Current File : /home/kelaby89/listingslad.com/wp-content/themes/listivo/templates/partials/search/v2/taxonomy.php
<?php

use Tangibledesign\Framework\Search\Field\TaxonomySearchField;

/* @var TaxonomySearchField $lstSearchField */
global $lstSearchField;

$showLabel = $args['show_label'] ?? false;
$disableLazyLoadTerms = $lstSearchField->disableLazyLoadTerms();
?>
<lst-taxonomy-search-field
        :field="<?php echo htmlspecialchars(json_encode($lstSearchField)); ?>"
        :filters="props.filters"
        :dependencies="props.dependencies"
        :term-count="props.termCount"
        :multiple="<?php echo esc_attr($lstSearchField->isSelectMultipleControl() ? 'true' : 'false'); ?>"
    <?php if ($disableLazyLoadTerms) : ?>
        :initial-terms="<?php echo htmlspecialchars(json_encode($lstSearchField->getTerms())); ?>"
        :disable-fetch-terms="true"
    <?php else : ?>
        fetch-terms-request-url="<?php echo esc_url(admin_url('admin-post.php?action=' . tdf_prefix() . '/search/terms/fetch')); ?>"
    <?php endif; ?>
>
    <div
            slot-scope="taxonomyField"
            v-if="taxonomyField.isVisible"
            class="listivo-field-v2 listivo-search-form-field listivo-search-form-field--<?php echo esc_attr($lstSearchField->getKey()); ?>"
        <?php if ($lstSearchField->showChildren()) : ?>
            :class="'listivo-field-v2--' + (taxonomyField.activeParentTerms.length + 1)"
        <?php endif; ?>
    >
        <?php if ($showLabel) : ?>
            <div class="listivo-search-field-label">
                <?php echo esc_html($lstSearchField->getName()); ?>
            </div>
        <?php endif; ?>

        <?php if ($lstSearchField->isSelectControl()) : ?>
            <lst-select
                    :options="taxonomyField.options"
                    @input="taxonomyField.addTerm"
                    :searchable="<?php echo esc_attr($lstSearchField->searchable() ? 'true' : 'false'); ?>"
                    active-text-class="listivo-select-v2__option--highlight-text"
                    highlight-option-class="listivo-select-v2__option--highlight"
                    order-type="<?php echo esc_attr($lstSearchField->getOrderType()); ?>"
                    :disabled="taxonomyField.isDisabled"
                    :is-selected="taxonomyField.isSelected"
            >
                <div
                        slot-scope="select"
                        @click.stop.prevent="select.onOpen"
                        @focusin="select.focusIn"
                        @focusout="select.focusOut"
                        @keyup.esc="select.onClose"
                        @keyup.up="select.decreaseOptionIndex"
                        @keyup.down="select.increaseOptionIndex"
                        @keyup.enter="select.setOptionByIndex"
                        tabindex="0"
                    <?php if ($lstSearchField->hasIcon()) : ?>
                        class="listivo-select-v2 listivo-select-v2--with-icon"
                    <?php else : ?>
                        class="listivo-select-v2"
                    <?php endif; ?>
                        :class="{
                            'listivo-select-v2--active': taxonomyField.selectedTerms.length || select.open,
                            'listivo-select-v2--open': select.open,
                            'listivo-select-v2--disabled': taxonomyField.isDisabled,
                        }"
                >
                    <?php if ($lstSearchField->hasIcon()) :
                        $lstIcon = $lstSearchField->getIcon();
                        ?>
                        <div class="listivo-select-v2__icon listivo-icon-v2">
                            <?php if (isset($lstIcon['library']) && $lstIcon['library'] === 'svg' && !empty($lstIcon['value']['url'])) : ?>
                                <?php echo tdf_load_icon($lstIcon['value']['url']); ?>
                            <?php else : ?>
                                <i class="<?php echo esc_attr($lstIcon['value']); ?>"></i>
                            <?php endif; ?>
                        </div>
                    <?php endif; ?>

                    <div
                            v-if="!taxonomyField.currentSelectedTermIds.length"
                            class="listivo-select-v2__placeholder"
                    >
                        <?php echo esc_html($lstSearchField->getPlaceholder()); ?>
                    </div>

                    <div class="listivo-select-v2__arrow">
                        <svg xmlns="http://www.w3.org/2000/svg" width="7" height="5"
                             viewBox="0 0 7 5" fill="none">
                            <path d="M3.5 2.56768L5.87477 0.192917C6.13207 -0.0643854 6.54972 -0.0643854 6.80702 0.192917C7.06433 0.45022 7.06433 0.86787 6.80702 1.12517L3.9394 3.99279C3.6964 4.2358 3.30298 4.2358 3.0606 3.99279L0.192977 1.12517C-0.0643257 0.86787 -0.0643257 0.45022 0.192977 0.192917C0.45028 -0.0643854 0.86793 -0.0643854 1.12523 0.192917L3.5 2.56768Z"
                                  fill="#2A3946"/>
                        </svg>
                    </div>

                    <template>
                        <div
                                v-if="taxonomyField.currentSelectedTermIds.length"
                                class="listivo-select-v2__placeholder"
                        >
                            <div
                                    v-if="taxonomyField.currentSelectedTermIds.length === 1"
                                    v-for="term in taxonomyField.selectedTerms"
                                    v-html="term.name"
                            ></div>
                        </div>

                        <div
                                v-if="taxonomyField.currentSelectedTermIds.length === 1"
                                class="listivo-select-v2__clear"
                                @click.stop.prevent="taxonomyField.clear(); select.onClose()"
                        >
                            <svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6"
                                 fill="none">
                                <path d="M0.667016 0.000289049C0.534874 0.000452754 0.405782 0.0400233 0.296228 0.113946C0.186675 0.187868 0.101634 0.292787 0.05197 0.415298C0.00230608 0.53781 -0.00972662 0.672352 0.0174091 0.801739C0.0445448 0.931126 0.109617 1.04948 0.204313 1.14169L2.06032 2.99857L0.204313 4.85546C0.140536 4.91672 0.0896183 4.9901 0.0545414 5.07129C0.0194646 5.15249 0.000933792 5.23987 3.43907e-05 5.32832C-0.00086501 5.41677 0.0158851 5.50452 0.0493036 5.58641C0.0827221 5.6683 0.132137 5.7427 0.194655 5.80525C0.257173 5.8678 0.331537 5.91724 0.413391 5.95067C0.495245 5.9841 0.582945 6.00086 0.671354 5.99996C0.759763 5.99906 0.847104 5.98052 0.928262 5.94543C1.00942 5.91034 1.08276 5.85939 1.144 5.79559L3 3.9387L4.856 5.79559C4.91723 5.85939 4.99058 5.91034 5.07173 5.94543C5.15289 5.98053 5.24023 5.99907 5.32864 5.99997C5.41705 6.00087 5.50475 5.98411 5.58661 5.95067C5.66846 5.91724 5.74283 5.8678 5.80535 5.80525C5.86786 5.74271 5.91728 5.66831 5.9507 5.58641C5.98412 5.50452 6.00087 5.41678 5.99997 5.32832C5.99907 5.23987 5.98053 5.15249 5.94546 5.07129C5.91038 4.9901 5.85946 4.91672 5.79568 4.85546L3.93968 2.99857L5.79568 1.14169C5.89171 1.0483 5.9573 0.928073 5.98385 0.796753C6.01041 0.665433 5.99669 0.529151 5.94449 0.405766C5.8923 0.282381 5.80407 0.177648 5.69136 0.105294C5.57865 0.0329402 5.44672 -0.00366036 5.31286 0.000289049C5.14022 0.00543568 4.97636 0.0776237 4.856 0.20156L3 2.05844L1.144 0.20156C1.08199 0.137793 1.00783 0.0871234 0.925898 0.0525512C0.843967 0.017979 0.755935 0.000207391 0.667016 0.000289049Z"
                                      fill="#F09965"/>
                            </svg>
                        </div>

                        <div
                                v-if="select.open"
                                class="listivo-select-v2__dropdown"
                                @click.stop.prevent
                        >
                            <?php if ($lstSearchField->searchable()) : ?>
                                <div class="listivo-select-v2__searchable">
                                    <div class="listivo-input-v2">
                                        <input
                                                type="text"
                                                @input="select.setKeyword($event.target.value)"
                                                :value="select.keyword"
                                                placeholder="<?php echo esc_attr(tdf_string('search_dots')); ?>"
                                                @keydown.up.prevent.stop
                                                @keydown.down.prevent.stop
                                        >
                                    </div>
                                </div>
                            <?php endif; ?>

                            <div v-if="!select.options.length" class="listivo-select-v2__no-options">
                                <span v-if="!taxonomyField.loadingTerms">
                                    <?php echo esc_html(tdf_string('no_options')); ?>
                                </span>

                                <span v-if="taxonomyField.loadingTerms">
                                    <?php echo esc_html(tdf_string('loading_options')); ?>
                                </span>
                            </div>

                            <div
                                    v-for="(option, index) in select.options"
                                    :key="option.id"
                                    @click.stop.prevent="select.setOption(option)"
                                    class="listivo-select-v2__option"
                                    :class="{
                                        'listivo-select-v2__option--active': option.selected,
                                        'listivo-select-v2__option--highlight': index === select.optionIndex,
                                        'listivo-select-v2__option--disabled': option.disabled && !option.selected,
                                    }"
                            >
                                <div class="listivo-select-v2__value" v-html="option.label"></div>

                                <?php if ($lstSearchField->showTermCount()) : ?>
                                    <div class="listivo-select-v2__count-wrapper">
                                        <div class="listivo-select-v2__count">
                                            {{ option.count }}
                                        </div>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                    </template>
                </div>
            </lst-select>

            <?php if ($lstSearchField->showChildren()) : ?>
                <template>
                    <lst-taxonomy-search-field
                            v-for="term in taxonomyField.activeParentTerms"
                            :field="taxonomyField.field"
                            :initial-terms="taxonomyField.terms"
                            :filters="props.filters"
                            :dependencies="props.dependencies"
                            :term-count="props.termCount"
                            :parent="term.id"
                            :key="term.id"
                            :multiple="<?php echo esc_attr($lstSearchField->isSelectMultipleControl() ? 'true' : 'false'); ?>"
                    >
                        <div slot-scope="taxonomyFieldProps" class="listivo-search-form-field">
                            <lst-select
                                    :options="taxonomyFieldProps.options"
                                    @input="taxonomyFieldProps.addTerm"
                                    :searchable="<?php echo esc_attr($lstSearchField->searchable() ? 'true' : 'false'); ?>"
                                    active-text-class="listivo-select-v2__active-text"
                                    highlight-option-class="listivo-select-v2__option--highlight"
                                    order-type="<?php echo esc_attr($lstSearchField->getOrderType()); ?>"
                                    :disabled="taxonomyFieldProps.isDisabled"
                                    :is-selected="taxonomyFieldProps.isSelected"
                            >
                                <div
                                        slot-scope="select"
                                        @click="select.onOpen"
                                        @focusin="select.focusIn"
                                        @focusout="select.focusOut"
                                        @keyup.esc="select.onClose"
                                        @keyup.up="select.decreaseOptionIndex"
                                        @keyup.down="select.increaseOptionIndex"
                                        @keyup.enter="select.setOptionByIndex"
                                        tabindex="0"
                                        class="listivo-select-v2"
                                        :class="{
                                            'listivo-select-v2--active': taxonomyFieldProps.currentSelectedTermIds.length || select.open,
                                            'listivo-select-v2--open': select.open,
                                            'listivo-select-v2--disabled': taxonomyFieldProps.isDisabled,
                                        }"
                                >
                                    <div
                                            v-if="!taxonomyFieldProps.currentSelectedTermIds.length"
                                            class="listivo-select-v2__placeholder"
                                    >
                                        {{ term.searchFormPlaceholder }}
                                    </div>

                                    <div class="listivo-select-v2__arrow">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="7" height="5"
                                             viewBox="0 0 7 5" fill="none">
                                            <path d="M3.5 2.56768L5.87477 0.192917C6.13207 -0.0643854 6.54972 -0.0643854 6.80702 0.192917C7.06433 0.45022 7.06433 0.86787 6.80702 1.12517L3.9394 3.99279C3.6964 4.2358 3.30298 4.2358 3.0606 3.99279L0.192977 1.12517C-0.0643257 0.86787 -0.0643257 0.45022 0.192977 0.192917C0.45028 -0.0643854 0.86793 -0.0643854 1.12523 0.192917L3.5 2.56768Z"
                                                  fill="#2A3946"/>
                                        </svg>
                                    </div>

                                    <div
                                            v-if="taxonomyFieldProps.currentSelectedTermIds.length"
                                            class="listivo-select-v2__placeholder"
                                    >
                                        <div
                                                v-if="taxonomyFieldProps.currentSelectedTermIds.length === 1"
                                                v-for="term in taxonomyFieldProps.selectedTerms"
                                                v-html="term.name"
                                        ></div>

                                        <div v-if="taxonomyFieldProps.currentSelectedTermIds.length > 1">
                                            {{ taxonomyField.selectedTerms.length
                                            }} <?php echo esc_html(tdf_string('selected')); ?>
                                        </div>
                                    </div>

                                    <div
                                            v-if="taxonomyFieldProps.currentSelectedTermIds.length > 0"
                                            class="listivo-select-v2__clear"
                                            @click.stop.prevent="taxonomyFieldProps.clear(); select.onClose()"
                                    >
                                        <svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6"
                                             fill="none">
                                            <path d="M0.667016 0.000289049C0.534874 0.000452754 0.405782 0.0400233 0.296228 0.113946C0.186675 0.187868 0.101634 0.292787 0.05197 0.415298C0.00230608 0.53781 -0.00972662 0.672352 0.0174091 0.801739C0.0445448 0.931126 0.109617 1.04948 0.204313 1.14169L2.06032 2.99857L0.204313 4.85546C0.140536 4.91672 0.0896183 4.9901 0.0545414 5.07129C0.0194646 5.15249 0.000933792 5.23987 3.43907e-05 5.32832C-0.00086501 5.41677 0.0158851 5.50452 0.0493036 5.58641C0.0827221 5.6683 0.132137 5.7427 0.194655 5.80525C0.257173 5.8678 0.331537 5.91724 0.413391 5.95067C0.495245 5.9841 0.582945 6.00086 0.671354 5.99996C0.759763 5.99906 0.847104 5.98052 0.928262 5.94543C1.00942 5.91034 1.08276 5.85939 1.144 5.79559L3 3.9387L4.856 5.79559C4.91723 5.85939 4.99058 5.91034 5.07173 5.94543C5.15289 5.98053 5.24023 5.99907 5.32864 5.99997C5.41705 6.00087 5.50475 5.98411 5.58661 5.95067C5.66846 5.91724 5.74283 5.8678 5.80535 5.80525C5.86786 5.74271 5.91728 5.66831 5.9507 5.58641C5.98412 5.50452 6.00087 5.41678 5.99997 5.32832C5.99907 5.23987 5.98053 5.15249 5.94546 5.07129C5.91038 4.9901 5.85946 4.91672 5.79568 4.85546L3.93968 2.99857L5.79568 1.14169C5.89171 1.0483 5.9573 0.928073 5.98385 0.796753C6.01041 0.665433 5.99669 0.529151 5.94449 0.405766C5.8923 0.282381 5.80407 0.177648 5.69136 0.105294C5.57865 0.0329402 5.44672 -0.00366036 5.31286 0.000289049C5.14022 0.00543568 4.97636 0.0776237 4.856 0.20156L3 2.05844L1.144 0.20156C1.08199 0.137793 1.00783 0.0871234 0.925898 0.0525512C0.843967 0.017979 0.755935 0.000207391 0.667016 0.000289049Z"
                                                  fill="#F09965"/>
                                        </svg>
                                    </div>

                                    <div
                                            v-if="select.open"
                                            class="listivo-select-v2__dropdown"
                                            @click.stop.prevent
                                    >
                                        <?php if ($lstSearchField->searchable()) : ?>
                                            <div class="listivo-select-v2__searchable">
                                                <div class="listivo-input-v2">
                                                    <input
                                                            type="text"
                                                            @input="select.setKeyword($event.target.value)"
                                                            :value="select.keyword"
                                                            placeholder="<?php echo esc_attr(tdf_string('search_dots')); ?>"
                                                            @keydown.up.prevent.stop
                                                            @keydown.down.prevent.stop
                                                    >
                                                </div>
                                            </div>
                                        <?php endif; ?>

                                        <div v-if="!select.options.length" class="listivo-select-v2__no-options">
                                            <span v-if="!taxonomyField.loadingTerms">
                                                <?php echo esc_html(tdf_string('no_options')); ?>
                                            </span>

                                            <span v-if="taxonomyField.loadingTerms">
                                                <?php echo esc_html(tdf_string('loading_options')); ?>
                                            </span>
                                        </div>

                                        <div
                                                v-for="(option, index) in select.options"
                                                :key="option.id"
                                                @click.stop.prevent="select.setOption(option)"
                                                class="listivo-select-v2__option"
                                                :class="{
                                                    'listivo-select-v2__option--active': option.selected,
                                                    'listivo-select-v2__option--highlight': index === select.optionIndex,
                                                    'listivo-select-v2__option--disabled': option.disabled && !option.selected,
                                                }"
                                        >
                                            <div class="listivo-select-v2__value" v-html="option.label"></div>

                                            <?php if ($lstSearchField->showTermCount()) : ?>
                                                <div class="listivo-select-v2__count-wrapper">
                                                    <div class="listivo-select-v2__count">
                                                        {{ option.count }}
                                                    </div>
                                                </div>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                </div>
                            </lst-select>
                        </div>
                    </lst-taxonomy-search-field>
                </template>
            <?php endif; ?>
        <?php elseif ($lstSearchField->isSelectMultipleControl()) : ?>
            <lst-select
                    :options="taxonomyField.options"
                    :multiple="true"
                    :searchable="<?php echo esc_attr($lstSearchField->searchable() ? 'true' : 'false'); ?>"
                    active-text-class="listivo-select__active-text"
                    highlight-option-class="listivo-select__option--highlight"
                    @input="taxonomyField.addTerm"
                    order-type="<?php echo esc_attr($lstSearchField->getOrderType()); ?>"
                    :disabled="taxonomyField.isDisabled"
                    :is-selected="taxonomyField.isSelected"
            >
                <div
                        slot-scope="select"
                        @click.stop.prevent="select.onOpen"
                        @focusin="select.focusIn"
                        @focusout="select.focusOut"
                        @keyup.esc="select.onClose"
                        @keyup.up="select.decreaseOptionIndex"
                        @keyup.down="select.increaseOptionIndex"
                        @keyup.enter="select.setOptionByIndex"
                        tabindex="0"
                    <?php if ($lstSearchField->hasIcon()) : ?>
                        class="listivo-select-v2 listivo-select-v2--with-icon"
                    <?php else : ?>
                        class="listivo-select-v2"
                    <?php endif; ?>
                        :class="{
                            'listivo-select-v2--active': taxonomyField.currentSelectedTermIds.length || select.open,
                            'listivo-select-v2--open': select.open,
                            'listivo-select-v2--disabled': taxonomyField.isDisabled,
                        }"
                >
                    <?php if ($lstSearchField->hasIcon()) :
                        $lstIcon = $lstSearchField->getIcon();
                        ?>
                        <div class="listivo-select-v2__icon listivo-icon-v2">
                            <?php if (isset($lstIcon['library']) && $lstIcon['library'] === 'svg' && !empty($lstIcon['value']['url'])) : ?>
                                <?php echo tdf_load_icon($lstIcon['value']['url']); ?>
                            <?php else : ?>
                                <i class="<?php echo esc_attr($lstIcon['value']); ?>"></i>
                            <?php endif; ?>
                        </div>
                    <?php endif; ?>

                    <div
                            v-if="!taxonomyField.selectedTerms.length"
                            class="listivo-select-v2__placeholder"
                    >
                        <?php echo esc_html($lstSearchField->getPlaceholder()) ?>
                    </div>

                    <div class="listivo-select-v2__arrow">
                        <svg xmlns="http://www.w3.org/2000/svg" width="7" height="5"
                             viewBox="0 0 7 5" fill="none">
                            <path d="M3.5 2.56768L5.87477 0.192917C6.13207 -0.0643854 6.54972 -0.0643854 6.80702 0.192917C7.06433 0.45022 7.06433 0.86787 6.80702 1.12517L3.9394 3.99279C3.6964 4.2358 3.30298 4.2358 3.0606 3.99279L0.192977 1.12517C-0.0643257 0.86787 -0.0643257 0.45022 0.192977 0.192917C0.45028 -0.0643854 0.86793 -0.0643854 1.12523 0.192917L3.5 2.56768Z"
                                  fill="#2A3946"/>
                        </svg>
                    </div>

                    <template>
                        <div
                                v-if="taxonomyField.selectedTerms.length"
                                class="listivo-select-v2__placeholder"
                        >
                            <div
                                    v-if="taxonomyField.selectedTerms.length === 1"
                                    v-for="term in taxonomyField.selectedTerms"
                                    v-html="term.name"
                            ></div>

                            <div
                                    v-if="taxonomyField.selectedTerms.length > 1"
                                    v-html="taxonomyField.selectedTerms.length + ' <?php echo esc_attr(tdf_string('selected')); ?>'"
                            ></div>
                        </div>

                        <div
                                v-if="taxonomyField.currentSelectedTermIds.length > 0"
                                class="listivo-select-v2__clear"
                                @click.stop.prevent="taxonomyField.clear(); select.onClose()"
                        >
                            <svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6"
                                 fill="none">
                                <path d="M0.667016 0.000289049C0.534874 0.000452754 0.405782 0.0400233 0.296228 0.113946C0.186675 0.187868 0.101634 0.292787 0.05197 0.415298C0.00230608 0.53781 -0.00972662 0.672352 0.0174091 0.801739C0.0445448 0.931126 0.109617 1.04948 0.204313 1.14169L2.06032 2.99857L0.204313 4.85546C0.140536 4.91672 0.0896183 4.9901 0.0545414 5.07129C0.0194646 5.15249 0.000933792 5.23987 3.43907e-05 5.32832C-0.00086501 5.41677 0.0158851 5.50452 0.0493036 5.58641C0.0827221 5.6683 0.132137 5.7427 0.194655 5.80525C0.257173 5.8678 0.331537 5.91724 0.413391 5.95067C0.495245 5.9841 0.582945 6.00086 0.671354 5.99996C0.759763 5.99906 0.847104 5.98052 0.928262 5.94543C1.00942 5.91034 1.08276 5.85939 1.144 5.79559L3 3.9387L4.856 5.79559C4.91723 5.85939 4.99058 5.91034 5.07173 5.94543C5.15289 5.98053 5.24023 5.99907 5.32864 5.99997C5.41705 6.00087 5.50475 5.98411 5.58661 5.95067C5.66846 5.91724 5.74283 5.8678 5.80535 5.80525C5.86786 5.74271 5.91728 5.66831 5.9507 5.58641C5.98412 5.50452 6.00087 5.41678 5.99997 5.32832C5.99907 5.23987 5.98053 5.15249 5.94546 5.07129C5.91038 4.9901 5.85946 4.91672 5.79568 4.85546L3.93968 2.99857L5.79568 1.14169C5.89171 1.0483 5.9573 0.928073 5.98385 0.796753C6.01041 0.665433 5.99669 0.529151 5.94449 0.405766C5.8923 0.282381 5.80407 0.177648 5.69136 0.105294C5.57865 0.0329402 5.44672 -0.00366036 5.31286 0.000289049C5.14022 0.00543568 4.97636 0.0776237 4.856 0.20156L3 2.05844L1.144 0.20156C1.08199 0.137793 1.00783 0.0871234 0.925898 0.0525512C0.843967 0.017979 0.755935 0.000207391 0.667016 0.000289049Z"
                                      fill="#F09965"/>
                            </svg>
                        </div>

                        <div
                                v-show="select.open"
                                class="listivo-select-v2__dropdown"
                                @click.stop.prevent
                        >
                            <?php if ($lstSearchField->searchable()) : ?>
                                <div class="listivo-select-v2__searchable">
                                    <div class="listivo-input-v2">
                                        <input
                                                type="text"
                                                @input="select.setKeyword($event.target.value)"
                                                :value="select.keyword"
                                                placeholder="<?php echo esc_attr(tdf_string('search_dots')); ?>"
                                                @keydown.up.prevent.stop
                                                @keydown.down.prevent.stop
                                        >
                                    </div>
                                </div>
                            <?php endif; ?>

                            <div v-if="!select.options.length" class="listivo-select-v2__no-options">
                                <span v-if="!taxonomyField.loadingTerms">
                                    <?php echo esc_html(tdf_string('no_options')); ?>
                                </span>

                                <span v-if="taxonomyField.loadingTerms">
                                    <?php echo esc_html(tdf_string('loading_options')); ?>
                                </span>
                            </div>

                            <div
                                    v-for="(option, index) in select.options"
                                    :key="option.id"
                                    @click.stop.prevent="select.setOption(option)"
                                    class="listivo-select-v2__option"
                                    :class="{
                                        'listivo-select-v2__option--active': option.selected,
                                        'listivo-select-v2__option--highlight': index === select.optionIndex,
                                        'listivo-select-v2__option--disabled': option.disabled && !option.selected,
                                    }"
                            >
                                <div class="listivo-select-v2__label-with-checkbox">
                                    <div class="listivo-select-v2__checkbox-wrapper">
                                        <div class="listivo-select-v2__checkbox">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"
                                                 viewBox="0 0 10 10" fill="none">
                                                <path d="M9.76184 0.728889L8.8648 0.0970432C8.6166 -0.0771195 8.27655 -0.0102893 8.11043 0.244879L3.71321 6.96431L1.69244 4.87031C1.48138 4.65159 1.13741 4.65159 0.926348 4.87031L0.1583 5.66619C-0.0527667 5.88491 -0.0527667 6.24133 0.1583 6.46207L3.26567 9.68205C3.43961 9.86229 3.71321 10 3.95946 10C4.2057 10 4.4539 9.84001 4.61415 9.59902L9.90646 1.50857C10.0745 1.2534 10.01 0.903051 9.76184 0.728889Z"
                                                      fill="#FDFDFE"/>
                                            </svg>
                                        </div>
                                    </div>

                                    <div class="listivo-select-v2__value" v-html="option.label"></div>
                                </div>

                                <?php if ($lstSearchField->showTermCount()) : ?>
                                    <div class="listivo-select-v2__count-wrapper">
                                        <div class="listivo-select-v2__count">
                                            {{ option.count }}
                                        </div>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                    </template>
                </div>
            </lst-select>

            <?php if ($lstSearchField->showChildren()) : ?>
                <template>
                    <lst-taxonomy-search-field
                            v-for="term in taxonomyField.activeParentTerms"
                            :field="taxonomyField.field"
                            :initial-terms="taxonomyField.terms"
                            :filters="props.filters"
                            :dependencies="props.dependencies"
                            :term-count="props.termCount"
                            :parent="term.id"
                            :key="term.id"
                            :multiple="<?php echo esc_attr($lstSearchField->isSelectMultipleControl() ? 'true' : 'false'); ?>"
                    >
                        <div slot-scope="taxonomyFieldProps" class="listivo-search-form-field">
                            <lst-select
                                    :options="taxonomyFieldProps.options"
                                    :multiple="true"
                                    :searchable="<?php echo esc_attr($lstSearchField->searchable() ? 'true' : 'false'); ?>"
                                    active-text-class="listivo-select__active-text"
                                    highlight-option-class="listivo-select__option--highlight"
                                    @input="taxonomyFieldProps.addTerm"
                                    order-type="<?php echo esc_attr($lstSearchField->getOrderType()); ?>"
                                    :disabled="taxonomyFieldProps.isDisabled"
                                    :is-selected="taxonomyFieldProps.isSelected"
                            >
                                <div
                                        slot-scope="select"
                                        @click="select.onOpen"
                                        @focusin="select.focusIn"
                                        @focusout="select.focusOut"
                                        @keyup.esc="select.onClose"
                                        @keyup.up="select.decreaseOptionIndex"
                                        @keyup.down="select.increaseOptionIndex"
                                        @keyup.enter="select.setOptionByIndex"
                                        tabindex="0"
                                        class="listivo-select-v2"
                                        :class="{
                                            'listivo-select-v2--active': taxonomyFieldProps.currentSelectedTermIds.length || select.open,
                                            'listivo-select-v2--open': select.open,
                                            'listivo-select-v2--disabled': taxonomyFieldProps.isDisabled,
                                        }"
                                >
                                    <div
                                            v-if="!taxonomyFieldProps.selectedTerms.length"
                                            class="listivo-select-v2__placeholder"
                                    >
                                        {{ term.searchFormPlaceholder }}
                                    </div>

                                    <div class="listivo-select-v2__arrow">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="7" height="5"
                                             viewBox="0 0 7 5" fill="none">
                                            <path d="M3.5 2.56768L5.87477 0.192917C6.13207 -0.0643854 6.54972 -0.0643854 6.80702 0.192917C7.06433 0.45022 7.06433 0.86787 6.80702 1.12517L3.9394 3.99279C3.6964 4.2358 3.30298 4.2358 3.0606 3.99279L0.192977 1.12517C-0.0643257 0.86787 -0.0643257 0.45022 0.192977 0.192917C0.45028 -0.0643854 0.86793 -0.0643854 1.12523 0.192917L3.5 2.56768Z"
                                                  fill="#2A3946"/>
                                        </svg>
                                    </div>

                                    <div
                                            v-if="taxonomyFieldProps.selectedTerms.length"
                                            class="listivo-select-v2__placeholder"
                                    >
                                        <div
                                                v-if="taxonomyFieldProps.selectedTerms.length === 1"
                                                v-for="term in taxonomyFieldProps.selectedTerms"
                                                v-html="term.name"
                                        ></div>

                                        <div
                                                v-if="taxonomyFieldProps.selectedTerms.length > 1"
                                                v-html="taxonomyFieldProps.selectedTerms.length + ' <?php echo esc_attr(tdf_string('selected')); ?>'"
                                        ></div>
                                    </div>

                                    <div
                                            v-if="taxonomyFieldProps.selectedTerms.length > 0"
                                            class="listivo-select-v2__clear"
                                            @click.stop.prevent="taxonomyFieldProps.clear(); select.onClose()"
                                    >
                                        <svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6"
                                             fill="none">
                                            <path d="M0.667016 0.000289049C0.534874 0.000452754 0.405782 0.0400233 0.296228 0.113946C0.186675 0.187868 0.101634 0.292787 0.05197 0.415298C0.00230608 0.53781 -0.00972662 0.672352 0.0174091 0.801739C0.0445448 0.931126 0.109617 1.04948 0.204313 1.14169L2.06032 2.99857L0.204313 4.85546C0.140536 4.91672 0.0896183 4.9901 0.0545414 5.07129C0.0194646 5.15249 0.000933792 5.23987 3.43907e-05 5.32832C-0.00086501 5.41677 0.0158851 5.50452 0.0493036 5.58641C0.0827221 5.6683 0.132137 5.7427 0.194655 5.80525C0.257173 5.8678 0.331537 5.91724 0.413391 5.95067C0.495245 5.9841 0.582945 6.00086 0.671354 5.99996C0.759763 5.99906 0.847104 5.98052 0.928262 5.94543C1.00942 5.91034 1.08276 5.85939 1.144 5.79559L3 3.9387L4.856 5.79559C4.91723 5.85939 4.99058 5.91034 5.07173 5.94543C5.15289 5.98053 5.24023 5.99907 5.32864 5.99997C5.41705 6.00087 5.50475 5.98411 5.58661 5.95067C5.66846 5.91724 5.74283 5.8678 5.80535 5.80525C5.86786 5.74271 5.91728 5.66831 5.9507 5.58641C5.98412 5.50452 6.00087 5.41678 5.99997 5.32832C5.99907 5.23987 5.98053 5.15249 5.94546 5.07129C5.91038 4.9901 5.85946 4.91672 5.79568 4.85546L3.93968 2.99857L5.79568 1.14169C5.89171 1.0483 5.9573 0.928073 5.98385 0.796753C6.01041 0.665433 5.99669 0.529151 5.94449 0.405766C5.8923 0.282381 5.80407 0.177648 5.69136 0.105294C5.57865 0.0329402 5.44672 -0.00366036 5.31286 0.000289049C5.14022 0.00543568 4.97636 0.0776237 4.856 0.20156L3 2.05844L1.144 0.20156C1.08199 0.137793 1.00783 0.0871234 0.925898 0.0525512C0.843967 0.017979 0.755935 0.000207391 0.667016 0.000289049Z"
                                                  fill="#F09965"/>
                                        </svg>
                                    </div>

                                    <div
                                            v-if="select.open"
                                            class="listivo-select-v2__dropdown"
                                            @click.stop.prevent
                                    >
                                        <?php if ($lstSearchField->searchable()) : ?>
                                            <div class="listivo-select-v2__searchable">
                                                <div class="listivo-input-v2">
                                                    <input
                                                            type="text"
                                                            @input="select.setKeyword($event.target.value)"
                                                            :value="select.keyword"
                                                            placeholder="<?php echo esc_attr(tdf_string('search_dots')); ?>"
                                                            @keydown.up.prevent.stop
                                                            @keydown.down.prevent.stop
                                                    >
                                                </div>
                                            </div>
                                        <?php endif; ?>

                                        <div v-if="!select.options.length" class="listivo-select-v2__no-options">
                                            <span v-if="!taxonomyField.loadingTerms">
                                                <?php echo esc_html(tdf_string('no_options')); ?>
                                            </span>

                                            <span v-if="taxonomyField.loadingTerms">
                                                <?php echo esc_html(tdf_string('loading_options')); ?>
                                            </span>
                                        </div>

                                        <div
                                                v-for="(option, index) in select.options"
                                                :key="option.id"
                                                @click.stop.prevent="select.setOption(option)"
                                                class="listivo-select-v2__option"
                                                :class="{
                                                    'listivo-select-v2__option--active': option.selected,
                                                    'listivo-select-v2__option--highlight': index === select.optionIndex,
                                                    'listivo-select-v2__option--disabled': option.disabled && !option.selected,
                                                }"
                                        >
                                            <div class="listivo-select-v2__label-with-checkbox">
                                                <i v-if="!option.selected" class="far fa-square"></i>

                                                <i v-if="option.selected" class="fas fa-check-square"></i>

                                                <div class="listivo-select-v2__value" v-html="option.label"></div>
                                            </div>

                                            <?php if ($lstSearchField->showTermCount()) : ?>
                                                <div class="listivo-select-v2__count-wrapper">
                                                    <div class="listivo-select-v2__count">
                                                        {{ option.count }}
                                                    </div>
                                                </div>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                </div>
                            </lst-select>
                        </div>
                    </lst-taxonomy-search-field>
                </template>
            <?php endif; ?>
        <?php endif; ?>
    </div>
</lst-taxonomy-search-field>
Page not found – Hello World !