@empathyco/x-components 5.0.0-alpha.9 → 6.0.0-alpha.2

package/js/x-modules/facets/components/lists/filters-search.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"filters-search.vue.js","sources":["../../../../../../src/x-modules/facets/components/lists/filters-search.vue"],"sourcesContent":["<template>\n  <div class=\"x-filters-search\" :class=\"cssClasses\" data-test=\"filters-search\">\n    <!--\n      @slot Search content. It is the content which triggers the filters sifting.\n        @binding {string} query - The query to search in filters.\n        @binding {Function} setQuery - The function to set the query. The query is passed as\n        parameter.\n        @binding {Function} clearQuery - The function to clear the query.\n    -->\n    <slot name=\"search\" v-bind=\"{ query, setQuery, clearQuery }\">\n      <input\n        @input=\"setQuery($event.target.value)\"\n        :value=\"query\"\n        type=\"search\"\n        class=\"x-filters-search__input x-input\"\n        data-test=\"filters-search-input\"\n        :aria-label=\"filtersSearchInputMessage\"\n      />\n    </slot>\n    <!--\n      @slot (Required) Sifted filters content.\n        @binding {Filter[]} siftedFilters - Sifted filters data.\n    -->\n    <slot :siftedFilters=\"siftedFilters\"></slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { Filter, isBooleanFilter } from '@empathyco/x-types';\n  import { mixins } from 'vue-class-component';\n  import { Component, Prop, Watch } from 'vue-property-decorator';\n  import { xComponentMixin, XProvide } from '../../../../components';\n  import { debounce } from '../../../../utils/debounce';\n  import { normalizeString } from '../../../../utils/normalize';\n  import { DebouncedFunction, VueCSSClasses } from '../../../../utils/types';\n  import { facetsXModule } from '../../x-module';\n  import FiltersInjectionMixin from './filters-injection.mixin';\n\n  /**\n   * Renders the filters sifted with the input query.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(facetsXModule)]\n  })\n  export default class FiltersSearch extends mixins(FiltersInjectionMixin) {\n    /** The debounce time for applying the filter sifting. */\n    @Prop({ default: 200 })\n    protected debounceInMs!: number;\n\n    protected query = '';\n    protected setQueryDebounced!: DebouncedFunction<[string]>;\n\n    protected filtersSearchInputMessage = 'search into the filter values';\n\n    /**\n     * Set the debounce function for setting the query debounced.\n     *\n     * @internal\n     */\n    @Watch('debounceInMs', { immediate: true })\n    updateSetQueryDebounced(): void {\n      this.setQueryDebounced = debounce(query => {\n        this.query = query;\n      }, this.debounceInMs);\n    }\n\n    /**\n     * Sift the array of filters which matches with the query.\n     *\n     * @returns Array of sifted filters.\n     * @internal\n     */\n    @XProvide('filters')\n    public get siftedFilters(): Filter[] {\n      const normalizedQuery = normalizeString(this.query);\n      return this.renderedFilters.filter(\n        filter => isBooleanFilter(filter) && normalizeString(filter.label).includes(normalizedQuery)\n      );\n    }\n\n    /**\n     * Adds the dynamic css classes to the component.\n     *\n     * @returns The class to be added to the component.\n     * @internal\n     */\n    protected get cssClasses(): VueCSSClasses {\n      return {\n        'x-filters-search--is-sifted': !!this.query\n      };\n    }\n\n    /**\n     * Set the query through the debounced function.\n     *\n     * @param query - The query to sift filters.\n     * @internal\n     */\n    protected setQuery(query: string): void {\n      this.setQueryDebounced(query);\n    }\n\n    /**\n     * Clear the query.\n     *\n     * @internal\n     */\n    protected clearQuery(): void {\n      this.query = '';\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-filters-search {\n    display: flex;\n    flex-flow: column nowrap;\n\n    &__input {\n      &::-ms-clear {\n        display: none;\n        width: 0;\n        height: 0;\n      }\n\n      &::-ms-reveal {\n        display: none;\n        width: 0;\n        height: 0;\n      }\n\n      &::-webkit-search-decoration,\n      &::-webkit-search-cancel-button,\n      &::-webkit-search-results-button,\n      &::-webkit-search-results-decoration {\n        display: none;\n      }\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nIt renders an input and a list of filters passed as prop or being injected. The list of filters can\nbe sifted with the query typed in the input. This component has also a debounce prop to set the time\nin milliseconds to apply the filters search. Moreover, it has two scoped slots. The first one for\ncustomize the search triggering with three slot props; the query, a function to set the query by\nsifting and a third one for cleaning the query. The second scoped slot is required and it is for\ndisplaying the list of filters sifted. It has a slot prop with these filters sifted.\n\n### Important\n\nThe component has two ways of receive the filters list, it can be injected by another component or\nbe send it as a prop. If the component doesnt have a parent component that receive and exposed a\nfilters list to their children, it is mandatory to send it as prop.\n\n### Basic usage\n\nUsing default and required slot:\n\n```vue\n<FiltersSearch :filters=\"filters\" v-slot=\"{ siftedFilters }\">\n  <ul v-for=\"filter in siftedFilters\">\n    <li :key=\"filter.id\">{{ filter.label }}</li>\n  </ul>\n</FiltersSearch>\n```\n\nSetting debounce time:\n\n```vue\n<FiltersSearch :filters=\"filters\" :debounceInMs=\"500\" v-slot=\"{ siftedFilters }\">\n  <ul v-for=\"filter in siftedFilters\">\n    <li :key=\"filter.id\">{{ filter.label }}</li>\n  </ul>\n</FiltersSearch>\n```\n\nReplacing search triggering:\n\n```vue\n<FiltersSearch :filters=\"filters\">\n  <template #search=\"{ query, setQuery, clearQuery }\">\n    <input\n      @input=\"setQuery($event.target.value)\"\n      :value=\"query\"\n      class=\"x-input x-filters-search__input\"\n      :aria-label=\"filtersSearchInputMessage\"/>\n    <button @click=\"clearQuery\">X</button>\n  </template>\n  <template #default=\"{ siftedFilters }\">\n    <ul v-for=\"filter in siftedFilters\">\n      <li :key=\"filter.id\">{{ filter.label }}</li>\n    </ul>\n  </template>\n</FiltersSearch>\n```\n\n> **Using injection**: It can receive the filters list by injection. It only works if it has a\n> parent component that receives and exposes the filters list. Using the injection, It is not\n> necessary to send the prop to the child components, it has to be send it in the parent component,\n> the rest of components will inject this list.\n\n```vue\n<Facets v-slot=\"{ facet }\">\n  <SlicedFilters :filters=\"facet.filters\" :max=\"8\">\n    <FiltersSearch >\n        <Filters v-slot=\"{ filter }\">\n          <SimpleFilter :filter=\"filter\" data-test=\"brand-filter\" />\n        </Filters>\n    </FiltersSearch>\n  </SlicedFilters>\n</Facets>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"filters-search.vue.js","sources":["../../../../../../src/x-modules/facets/components/lists/filters-search.vue"],"sourcesContent":["<template>\n  <div class=\"x-filters-search\" :class=\"cssClasses\" data-test=\"filters-search\">\n    <!--\n      @slot Search content. It is the content which triggers the filters sifting.\n        @binding {string} query - The query to search in filters.\n        @binding {Function} setQuery - The function to set the query. The query is passed as\n        parameter.\n        @binding {Function} clearQuery - The function to clear the query.\n    -->\n    <slot name=\"search\" v-bind=\"{ query, setQuery, clearQuery }\">\n      <input\n        @input=\"setQuery($event.target.value)\"\n        :value=\"query\"\n        type=\"search\"\n        class=\"x-filters-search__input x-input\"\n        data-test=\"filters-search-input\"\n        :aria-label=\"'search into the filter values'\"\n      />\n    </slot>\n    <!--\n      @slot (Required) Sifted filters content.\n        @binding {Filter[]} siftedFilters - Sifted filters data.\n    -->\n    <slot :siftedFilters=\"siftedFilters\"></slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { Filter, isBooleanFilter } from '@empathyco/x-types';\n  import { computed, defineComponent, PropType, provide, ref, watch } from 'vue';\n  import { debounce } from '../../../../utils/debounce';\n  import { normalizeString } from '../../../../utils/normalize';\n  import { DebouncedFunction, VueCSSClasses } from '../../../../utils/types';\n  import { facetsXModule } from '../../x-module';\n  import { useFiltersInjection } from '../../composables/use-filters-injection';\n\n  /**\n   * Renders the filters sifted with the input query.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'FiltersSearch',\n    xModule: facetsXModule.name,\n    props: {\n      /**\n       * The list of filters to be rendered as slots.\n       *\n       * @public\n       */\n      filters: Array as PropType<Filter[]>,\n\n      /**\n       * This prop is used in the `HierarchicalFilter` component and only in that case. It is necessary\n       * to make the `renderedFilters` to return only the filters of each level of the hierarchy.\n       *\n       * @public\n       */\n      parentId: {\n        type: String as PropType<Filter['id']>,\n        required: false\n      },\n\n      /** The debounce time for applying the filter sifting. */\n      debounceInMs: {\n        type: Number,\n        default: 200\n      }\n    },\n    setup(props) {\n      const renderedFilters = useFiltersInjection(props);\n\n      let query = ref('');\n      let setQueryDebounced: DebouncedFunction<[string]>;\n\n      const debounceInMs = computed(() => props.debounceInMs);\n\n      /**\n       * Set the debounce function for setting the query debounced.\n       *\n       * @internal\n       */\n      const updateSetQueryDebounced = () => {\n        setQueryDebounced = debounce(queryDebounced => {\n          query.value = queryDebounced;\n        }, props.debounceInMs);\n      };\n      watch(debounceInMs, updateSetQueryDebounced, { immediate: true });\n\n      /**\n       * Sift the array of filters which matches with the query.\n       *\n       * @returns Array of sifted filters.\n       * @internal\n       */\n      const siftedFilters = computed((): Filter[] => {\n        const normalizedQuery = normalizeString(query.value);\n        return renderedFilters.value.filter(\n          filter =>\n            isBooleanFilter(filter) && normalizeString(filter.label).includes(normalizedQuery)\n        );\n      });\n      provide('filters', siftedFilters);\n\n      /**\n       * Adds the dynamic css classes to the component.\n       *\n       * @returns The class to be added to the component.\n       * @internal\n       */\n      const cssClasses = computed((): VueCSSClasses => {\n        return { 'x-filters-search--is-sifted': !!query.value };\n      });\n\n      /**\n       * Set the query through the debounced function.\n       *\n       * @param query - The query to sift filters.\n       * @internal\n       */\n      const setQuery = (query: string): void => {\n        setQueryDebounced(query);\n      };\n\n      /**\n       * Clear the query.\n       *\n       * @internal\n       */\n      const clearQuery = (): void => {\n        query.value = '';\n      };\n\n      return {\n        clearQuery,\n        setQuery,\n        cssClasses,\n        siftedFilters,\n        query\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-filters-search {\n    display: flex;\n    flex-flow: column nowrap;\n  }\n\n  .x-filters-search__input::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  .x-filters-search__input::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  .x-filters-search__input::-webkit-search-decoration,\n  .x-filters-search__input::-webkit-search-cancel-button,\n  .x-filters-search__input::-webkit-search-results-button,\n  .x-filters-search__input::-webkit-search-results-decoration {\n    display: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nIt renders an input and a list of filters passed as prop or being injected. The list of filters can\nbe sifted with the query typed in the input. This component has also a debounce prop to set the time\nin milliseconds to apply the filters search. Moreover, it has two scoped slots. The first one for\ncustomize the search triggering with three slot props; the query, a function to set the query by\nsifting and a third one for cleaning the query. The second scoped slot is required and it is for\ndisplaying the list of filters sifted. It has a slot prop with these filters sifted.\n\n### Important\n\nThe component has two ways of receive the filters list, it can be injected by another component or\nbe send it as a prop. If the component doesnt have a parent component that receive and exposed a\nfilters list to their children, it is mandatory to send it as prop.\n\n### Basic usage\n\nUsing default and required slot:\n\n```vue\n<FiltersSearch :filters=\"filters\" v-slot=\"{ siftedFilters }\">\n  <ul v-for=\"filter in siftedFilters\">\n    <li :key=\"filter.id\">{{ filter.label }}</li>\n  </ul>\n</FiltersSearch>\n```\n\nSetting debounce time:\n\n```vue\n<FiltersSearch :filters=\"filters\" :debounceInMs=\"500\" v-slot=\"{ siftedFilters }\">\n  <ul v-for=\"filter in siftedFilters\">\n    <li :key=\"filter.id\">{{ filter.label }}</li>\n  </ul>\n</FiltersSearch>\n```\n\nReplacing search triggering:\n\n```vue\n<FiltersSearch :filters=\"filters\">\n  <template #search=\"{ query, setQuery, clearQuery }\">\n    <input\n      @input=\"setQuery($event.target.value)\"\n      :value=\"query\"\n      class=\"x-input x-filters-search__input\"\n      :aria-label=\"filtersSearchInputMessage\"/>\n    <button @click=\"clearQuery\">X</button>\n  </template>\n  <template #default=\"{ siftedFilters }\">\n    <ul v-for=\"filter in siftedFilters\">\n      <li :key=\"filter.id\">{{ filter.label }}</li>\n    </ul>\n  </template>\n</FiltersSearch>\n```\n\n> **Using injection**: It can receive the filters list by injection. It only works if it has a\n> parent component that receives and exposes the filters list. Using the injection, It is not\n> necessary to send the prop to the child components, it has to be send it in the parent component,\n> the rest of components will inject this list.\n\n```vue\n<Facets v-slot=\"{ facet }\">\n  <SlicedFilters :filters=\"facet.filters\" :max=\"8\">\n    <FiltersSearch >\n        <Filters v-slot=\"{ filter }\">\n          <SimpleFilter :filter=\"filter\" data-test=\"brand-filter\" />\n        </Filters>\n    </FiltersSearch>\n  </SlicedFilters>\n</Facets>\n```\n</docs>\n"],"names":["cssClasses","_openBlock","_createElementBlock","_normalizeClass","_createCommentVNode","_renderSlot","_normalizeProps","setQuery","_createElementVNode"],"mappings":";;;;;;SACY,WADZ,CAAA,IAAA,EAAA,MAAA,EACa,gBAA2BA,KAAU,EAAA,QAAA,EAAA;SAAEC,SAAU,EAAA,EAAAC,kBAAA;AAAA,IAAgB,KAAA;AAAA,IAAA;AAAA,MAAA,KAAA,EAAAC,cAAA,CAAA,CAAA,kBAAA,EAAA,IAAA,CAAA,UAAA,CAAA,CAAA;AAC1E,MAAA,WAAA,EAAA,gBAAA;AAAA,KAAA;AAOA,IAAA;AAAA,MAAAC,kBAAA,CACE,2VAOE,CAAA;AAAA,MANMC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,QAAA,EAAAC,cAAA,CAAEC,kBAAgB,CAAA,EAAA,KAAA,EAAO,IAAK,CAAA,KAAA,EAAA,QAAA,EAAA,IAAA,CAAA,QAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,CAAA,CAAA,EAAA,MAAA;AAAA,QACvBC,kBAAA,CAAA,OAAA,EAAA;AAAA,UACb,SAAK,MAAQ,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,MAAA,KAAA,IAAA,CAAA,QAAA,CAAA,MAAA,CAAA,MAAA,CAAA,KAAA,CAAA,CAAA;AAAA,UACb,KAAM,EAAA,IAAA,CAAA,KAAA;AAAA,UACN,IAAA,EAAA,QAAA;AAAA,UACC,KAAA,EAAA,iCAAA;AAAA,UAAA,WAAA,EAAA,sBAAA;;AAGL,SAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,CAAA;AAAA,OAIA,EAAA,IAAA,CAAA;AAAA,MAAAJ,kBAAA,CAAA,0HAAA,CAAA;;;;;;;;;;;"}

package/js/x-modules/facets/components/lists/filters-search.vue2.js

@@ -1,233 +1,103 @@
-import { __decorate } from 'tslib';
 import { isBooleanFilter } from '@empathyco/x-types';
-import { mixins } from 'vue-class-component';
-import { Prop, Watch, Component } from 'vue-property-decorator';
-import '../../../../components/animations/animate-width.vue.js';
-import '../../../../components/animations/collapse-height.vue.js';
-import '../../../../components/animations/collapse-width.vue.js';
-import '../../../../components/animations/cross-fade.vue.js';
-import '../../../../components/animations/fade.vue.js';
-import '../../../../components/animations/fade-and-slide.vue.js';
-import '../../../../components/animations/staggered-fade-and-slide.vue.js';
-import '../../../../components/animations/staggering-transition-group.vue2.js';
-import '../../../../components/animations/staggering-transition-group.vue3.js';
-import 'vue-runtime-helpers/dist/normalize-component.mjs';
-import '../../../../components/animations/disable-animation.mixin.js';
-import 'vue';
-import '../../../../components/animations/animate-clip-path/animate-clip-path.style.scss.js';
-import '../../../../components/animations/animate-scale/animate-scale.style.scss.js';
-import '../../../../components/animations/animate-translate/animate-translate.style.scss.js';
-import '../../../../components/column-picker/base-column-picker-dropdown.vue.js';
-import '../../../../components/column-picker/base-column-picker-list.vue.js';
-import '../../../../components/currency/base-currency.vue.js';
-import '../../../../components/filters/labels/base-price-filter-label.vue2.js';
-import '../../../../components/filters/labels/base-rating-filter-label.vue.js';
-import '../../../../components/icons/arrow-down.vue.js';
-import '../../../../components/icons/arrow-left.vue.js';
-import '../../../../components/icons/arrow-right.vue.js';
-import '../../../../components/icons/arrow-up.vue.js';
-import '../../../../components/icons/bag.vue.js';
-import '../../../../components/icons/bar-code.vue.js';
-import '../../../../components/icons/barcode-tiny.vue.js';
-import '../../../../components/icons/cart.vue.js';
-import '../../../../components/icons/cart-filled.vue.js';
-import '../../../../components/icons/check-tiny.vue.js';
-import '../../../../components/icons/check.vue.js';
-import '../../../../components/icons/checkbox-selected.vue.js';
-import '../../../../components/icons/checkbox-selected-filled.vue.js';
-import '../../../../components/icons/checkbox-unselected.vue.js';
-import '../../../../components/icons/checkbox-unselected-filled.vue.js';
-import '../../../../components/icons/chevron-down.vue.js';
-import '../../../../components/icons/chevron-left.vue.js';
-import '../../../../components/icons/chevron-right.vue.js';
-import '../../../../components/icons/chevron-tiny-down.vue.js';
-import '../../../../components/icons/chevron-tiny-left.vue.js';
-import '../../../../components/icons/chevron-tiny-right.vue.js';
-import '../../../../components/icons/chevron-tiny-up.vue.js';
-import '../../../../components/icons/chevron-up.vue.js';
-import '../../../../components/icons/corner-arrow-left.vue.js';
-import '../../../../components/icons/corner-arrow-right.vue.js';
-import '../../../../components/icons/cross-tiny.vue.js';
-import '../../../../components/icons/cross.vue.js';
-import '../../../../components/icons/curated-check.vue.js';
-import '../../../../components/icons/curated-check-filled.vue.js';
-import '../../../../components/icons/curated-check-tiny.vue.js';
-import '../../../../components/icons/curated-check-tiny-filled.vue.js';
-import '../../../../components/icons/diagonal-arrow-left-down.vue.js';
-import '../../../../components/icons/diagonal-arrow-left-top.vue.js';
-import '../../../../components/icons/diagonal-arrow-right-down.vue.js';
-import '../../../../components/icons/diagonal-arrow-right-top.vue.js';
-import '../../../../components/icons/filters.vue.js';
-import '../../../../components/icons/grid-1-col.vue.js';
-import '../../../../components/icons/grid-2-col.vue.js';
-import '../../../../components/icons/grid-4-col.vue.js';
-import '../../../../components/icons/grid-2-rows.vue.js';
-import '../../../../components/icons/heart.vue.js';
-import '../../../../components/icons/heart-filled.vue.js';
-import '../../../../components/icons/hide.vue.js';
-import '../../../../components/icons/history-tiny.vue.js';
-import '../../../../components/icons/history.vue.js';
-import '../../../../components/icons/light-bulb-off.vue.js';
-import '../../../../components/icons/light-bulb-on.vue.js';
-import '../../../../components/icons/menu.vue.js';
-import '../../../../components/icons/minus-tiny.vue.js';
-import '../../../../components/icons/minus.vue.js';
-import '../../../../components/icons/plus.vue.js';
-import '../../../../components/icons/plus-tiny.vue.js';
-import '../../../../components/icons/radiobutton-selected.vue.js';
-import '../../../../components/icons/radiobutton-unselected.vue.js';
-import '../../../../components/icons/search.vue.js';
-import '../../../../components/icons/settings.vue.js';
-import '../../../../components/icons/show.vue.js';
-import '../../../../components/icons/sort-az.vue.js';
-import '../../../../components/icons/sort-price-down.vue.js';
-import '../../../../components/icons/sort-price-up.vue.js';
-import '../../../../components/icons/sort-relevancy.vue.js';
-import '../../../../components/icons/sort-za.vue.js';
-import '../../../../components/icons/star.vue.js';
-import '../../../../components/icons/star-filled.vue.js';
-import '../../../../components/icons/search-tiny.vue.js';
-import '../../../../components/icons/tag.vue.js';
-import '../../../../components/icons/tag-filled.vue.js';
-import '../../../../components/icons/trash-open.vue.js';
-import '../../../../components/icons/trash.vue.js';
-import '../../../../components/icons/trending-tiny.vue.js';
-import '../../../../components/icons/trending.vue.js';
-import '../../../../components/icons/user.vue.js';
-import '../../../../components/icons/user-filled.vue.js';
-import '../../../../components/layouts/fixed-header-and-asides-layout.vue.js';
-import '../../../../components/layouts/multi-column-max-width-layout.vue.js';
-import '../../../../components/layouts/single-column-layout.vue.js';
-import '../../../../components/modals/base-events-modal-close.vue.js';
-import '../../../../components/modals/base-events-modal.vue.js';
-import '../../../../components/modals/base-events-modal-open.vue.js';
-import '../../../../components/modals/base-modal.vue.js';
-import '../../../../components/modals/base-id-modal.vue.js';
-import '../../../../components/modals/base-id-modal-close.vue.js';
-import '../../../../components/modals/base-id-modal-open.vue.js';
-import '../../../../components/modals/close-main-modal.vue.js';
-import '../../../../components/modals/main-modal.vue.js';
-import '../../../../components/modals/open-main-modal.vue.js';
-import '../../../../components/panels/base-header-toggle-panel.vue.js';
-import '../../../../components/panels/base-toggle-panel.vue.js';
-import '../../../../components/panels/base-id-toggle-panel.vue.js';
-import '../../../../components/panels/base-id-toggle-panel-button.vue.js';
-import '../../../../components/panels/base-tabs-panel.vue.js';
-import '../../../../components/result/base-result-add-to-cart.vue.js';
-import '../../../../components/result/base-result-current-price.vue.js';
-import '../../../../components/result/base-result-image.vue.js';
-import '../../../../components/result/base-result-link.vue.js';
-import '../../../../components/result/base-result-previous-price.vue.js';
-import '../../../../components/result/base-result-fallback-image.vue.js';
-import '../../../../components/result/base-result-placeholder-image.vue.js';
-import '../../../../components/result/base-result-rating.vue.js';
-import '../../../../components/result/result-variants-provider.vue2.js';
-import '../../../../components/result/result-variant-selector.vue.js';
-import '../../../../components/scroll/base-scroll.vue.js';
-import '../../../../components/scroll/scroll.mixin.js';
-import '../../../../components/suggestions/base-suggestion.vue.js';
-import '../../../../components/suggestions/base-suggestions.vue.js';
-import '../../../../components/auto-progress-bar.vue.js';
-import '../../../../components/base-dropdown.vue.js';
-import '../../../../components/base-event-button.vue.js';
-import '../../../../components/base-grid.vue.js';
-import '../../../../components/base-keyboard-navigation.vue.js';
-import '../../../../components/base-rating.vue.js';
-import '../../../../components/base-switch.vue.js';
-import '../../../../components/base-variable-column-grid.vue.js';
-import '../../../../components/display-emitter.vue.js';
-import '../../../../components/global-x-bus.vue2.js';
-import '../../../../components/highlight.vue.js';
-import '../../../../components/items-list.vue.js';
-import '../../../../components/location-provider.vue2.js';
-import '../../../../components/no-element.js';
-import '../../../../components/sliding-panel.vue.js';
-import '../../../../components/snippet-callbacks.vue.js';
-import '../../../../components/page-loader-button.vue.js';
-import 'rxjs';
-import 'rxjs/operators';
+import { defineComponent, ref, computed, watch, provide } from 'vue';
 import { debounce } from '../../../../utils/debounce.js';
-import { XProvide } from '../../../../components/decorators/injection.decorators.js';
-import { xComponentMixin } from '../../../../components/x-component.mixin.js';
 import { normalizeString } from '../../../../utils/normalize.js';
 import { facetsXModule } from '../../x-module.js';
-import FiltersInjectionMixin from './filters-injection.mixin.js';
+import { useFiltersInjection } from '../../composables/use-filters-injection.js';
 
 /**
  * Renders the filters sifted with the input query.
  *
  * @public
  */
-let FiltersSearch = class FiltersSearch extends mixins(FiltersInjectionMixin) {
-    constructor() {
-        super(...arguments);
-        this.query = '';
-        this.filtersSearchInputMessage = 'search into the filter values';
-    }
-    /**
-     * Set the debounce function for setting the query debounced.
-     *
-     * @internal
-     */
-    updateSetQueryDebounced() {
-        this.setQueryDebounced = debounce(query => {
-            this.query = query;
-        }, this.debounceInMs);
-    }
-    /**
-     * Sift the array of filters which matches with the query.
-     *
-     * @returns Array of sifted filters.
-     * @internal
-     */
-    get siftedFilters() {
-        const normalizedQuery = normalizeString(this.query);
-        return this.renderedFilters.filter(filter => isBooleanFilter(filter) && normalizeString(filter.label).includes(normalizedQuery));
-    }
-    /**
-     * Adds the dynamic css classes to the component.
-     *
-     * @returns The class to be added to the component.
-     * @internal
-     */
-    get cssClasses() {
+var _sfc_main = defineComponent({
+    name: 'FiltersSearch',
+    xModule: facetsXModule.name,
+    props: {
+        /**
+         * The list of filters to be rendered as slots.
+         *
+         * @public
+         */
+        filters: Array,
+        /**
+         * This prop is used in the `HierarchicalFilter` component and only in that case. It is necessary
+         * to make the `renderedFilters` to return only the filters of each level of the hierarchy.
+         *
+         * @public
+         */
+        parentId: {
+            type: String,
+            required: false
+        },
+        /** The debounce time for applying the filter sifting. */
+        debounceInMs: {
+            type: Number,
+            default: 200
+        }
+    },
+    setup(props) {
+        const renderedFilters = useFiltersInjection(props);
+        let query = ref('');
+        let setQueryDebounced;
+        const debounceInMs = computed(() => props.debounceInMs);
+        /**
+         * Set the debounce function for setting the query debounced.
+         *
+         * @internal
+         */
+        const updateSetQueryDebounced = () => {
+            setQueryDebounced = debounce(queryDebounced => {
+                query.value = queryDebounced;
+            }, props.debounceInMs);
+        };
+        watch(debounceInMs, updateSetQueryDebounced, { immediate: true });
+        /**
+         * Sift the array of filters which matches with the query.
+         *
+         * @returns Array of sifted filters.
+         * @internal
+         */
+        const siftedFilters = computed(() => {
+            const normalizedQuery = normalizeString(query.value);
+            return renderedFilters.value.filter(filter => isBooleanFilter(filter) && normalizeString(filter.label).includes(normalizedQuery));
+        });
+        provide('filters', siftedFilters);
+        /**
+         * Adds the dynamic css classes to the component.
+         *
+         * @returns The class to be added to the component.
+         * @internal
+         */
+        const cssClasses = computed(() => {
+            return { 'x-filters-search--is-sifted': !!query.value };
+        });
+        /**
+         * Set the query through the debounced function.
+         *
+         * @param query - The query to sift filters.
+         * @internal
+         */
+        const setQuery = (query) => {
+            setQueryDebounced(query);
+        };
+        /**
+         * Clear the query.
+         *
+         * @internal
+         */
+        const clearQuery = () => {
+            query.value = '';
+        };
         return {
-            'x-filters-search--is-sifted': !!this.query
+            clearQuery,
+            setQuery,
+            cssClasses,
+            siftedFilters,
+            query
         };
     }
-    /**
-     * Set the query through the debounced function.
-     *
-     * @param query - The query to sift filters.
-     * @internal
-     */
-    setQuery(query) {
-        this.setQueryDebounced(query);
-    }
-    /**
-     * Clear the query.
-     *
-     * @internal
-     */
-    clearQuery() {
-        this.query = '';
-    }
-};
-__decorate([
-    Prop({ default: 200 })
-], FiltersSearch.prototype, "debounceInMs", void 0);
-__decorate([
-    Watch('debounceInMs', { immediate: true })
-], FiltersSearch.prototype, "updateSetQueryDebounced", null);
-__decorate([
-    XProvide('filters')
-], FiltersSearch.prototype, "siftedFilters", null);
-FiltersSearch = __decorate([
-    Component({
-        mixins: [xComponentMixin(facetsXModule)]
-    })
-], FiltersSearch);
-var script = FiltersSearch;
+});
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=filters-search.vue2.js.map

package/js/x-modules/facets/components/lists/filters-search.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"filters-search.vue2.js","sources":["../../../../../../src/x-modules/facets/components/lists/filters-search.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  import { Filter, isBooleanFilter } from '@empathyco/x-types';\n  import { mixins } from 'vue-class-component';\n  import { Component, Prop, Watch } from 'vue-property-decorator';\n  import { xComponentMixin, XProvide } from '../../../../components';\n  import { debounce } from '../../../../utils/debounce';\n  import { normalizeString } from '../../../../utils/normalize';\n  import { DebouncedFunction, VueCSSClasses } from '../../../../utils/types';\n  import { facetsXModule } from '../../x-module';\n  import FiltersInjectionMixin from './filters-injection.mixin';\n\n  /**\n   * Renders the filters sifted with the input query.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(facetsXModule)]\n  })\n  export default class FiltersSearch extends mixins(FiltersInjectionMixin) {\n    /** The debounce time for applying the filter sifting. */\n    @Prop({ default: 200 })\n    protected debounceInMs!: number;\n\n    protected query = '';\n    protected setQueryDebounced!: DebouncedFunction<[string]>;\n\n    protected filtersSearchInputMessage = 'search into the filter values';\n\n    /**\n     * Set the debounce function for setting the query debounced.\n     *\n     * @internal\n     */\n    @Watch('debounceInMs', { immediate: true })\n    updateSetQueryDebounced(): void {\n      this.setQueryDebounced = debounce(query => {\n        this.query = query;\n      }, this.debounceInMs);\n    }\n\n    /**\n     * Sift the array of filters which matches with the query.\n     *\n     * @returns Array of sifted filters.\n     * @internal\n     */\n    @XProvide('filters')\n    public get siftedFilters(): Filter[] {\n      const normalizedQuery = normalizeString(this.query);\n      return this.renderedFilters.filter(\n        filter => isBooleanFilter(filter) && normalizeString(filter.label).includes(normalizedQuery)\n      );\n    }\n\n    /**\n     * Adds the dynamic css classes to the component.\n     *\n     * @returns The class to be added to the component.\n     * @internal\n     */\n    protected get cssClasses(): VueCSSClasses {\n      return {\n        'x-filters-search--is-sifted': !!this.query\n      };\n    }\n\n    /**\n     * Set the query through the debounced function.\n     *\n     * @param query - The query to sift filters.\n     * @internal\n     */\n    protected setQuery(query: string): void {\n      this.setQueryDebounced(query);\n    }\n\n    /**\n     * Clear the query.\n     *\n     * @internal\n     */\n    protected clearQuery(): void {\n      this.query = '';\n    }\n  }\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCE;;;;AAIG;AAIY,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,MAAM,CAAC,qBAAqB,CAAC,CAAA;AAAzD,IAAA,WAAA,GAAA;;QAKH,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;QAGX,IAAyB,CAAA,yBAAA,GAAG,+BAA+B,CAAC;KA0DvE;AAxDC;;;;AAIG;IAEH,uBAAuB,GAAA;AACrB,QAAA,IAAI,CAAC,iBAAiB,GAAG,QAAQ,CAAC,KAAK,IAAG;AACxC,YAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;AACrB,SAAC,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;KACvB;AAED;;;;;AAKG;AAEH,IAAA,IAAW,aAAa,GAAA;QACtB,MAAM,eAAe,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpD,OAAO,IAAI,CAAC,eAAe,CAAC,MAAM,CAChC,MAAM,IAAI,eAAe,CAAC,MAAM,CAAC,IAAI,eAAe,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,CAC7F,CAAC;KACH;AAED;;;;;AAKG;AACH,IAAA,IAAc,UAAU,GAAA;QACtB,OAAO;AACL,YAAA,6BAA6B,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;SAC5C,CAAC;KACH;AAED;;;;;AAKG;AACO,IAAA,QAAQ,CAAC,KAAa,EAAA;AAC9B,QAAA,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;KAC/B;AAED;;;;AAIG;IACO,UAAU,GAAA;AAClB,QAAA,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;KACjB;CACF,CAAA;AA/DC,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC;AACS,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAahC,UAAA,CAAA;IADC,KAAK,CAAC,cAAc,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAK1C,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,yBAAA,EAAA,IAAA,CAAA,CAAA;AASD,UAAA,CAAA;IADC,QAAQ,CAAC,SAAS,CAAC;AAMnB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,eAAA,EAAA,IAAA,CAAA,CAAA;AAlCkB,aAAa,GAAA,UAAA,CAAA;AAHjC,IAAA,SAAS,CAAC;AACT,QAAA,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;KACzC,CAAC;AACmB,CAAA,EAAA,aAAa,CAkEjC,CAAA;aAlEoB,aAAa;;;;"}
+{"version":3,"file":"filters-search.vue2.js","sources":["../../../../../../src/x-modules/facets/components/lists/filters-search.vue"],"sourcesContent":["<template>\n  <div class=\"x-filters-search\" :class=\"cssClasses\" data-test=\"filters-search\">\n    <!--\n      @slot Search content. It is the content which triggers the filters sifting.\n        @binding {string} query - The query to search in filters.\n        @binding {Function} setQuery - The function to set the query. The query is passed as\n        parameter.\n        @binding {Function} clearQuery - The function to clear the query.\n    -->\n    <slot name=\"search\" v-bind=\"{ query, setQuery, clearQuery }\">\n      <input\n        @input=\"setQuery($event.target.value)\"\n        :value=\"query\"\n        type=\"search\"\n        class=\"x-filters-search__input x-input\"\n        data-test=\"filters-search-input\"\n        :aria-label=\"'search into the filter values'\"\n      />\n    </slot>\n    <!--\n      @slot (Required) Sifted filters content.\n        @binding {Filter[]} siftedFilters - Sifted filters data.\n    -->\n    <slot :siftedFilters=\"siftedFilters\"></slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { Filter, isBooleanFilter } from '@empathyco/x-types';\n  import { computed, defineComponent, PropType, provide, ref, watch } from 'vue';\n  import { debounce } from '../../../../utils/debounce';\n  import { normalizeString } from '../../../../utils/normalize';\n  import { DebouncedFunction, VueCSSClasses } from '../../../../utils/types';\n  import { facetsXModule } from '../../x-module';\n  import { useFiltersInjection } from '../../composables/use-filters-injection';\n\n  /**\n   * Renders the filters sifted with the input query.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'FiltersSearch',\n    xModule: facetsXModule.name,\n    props: {\n      /**\n       * The list of filters to be rendered as slots.\n       *\n       * @public\n       */\n      filters: Array as PropType<Filter[]>,\n\n      /**\n       * This prop is used in the `HierarchicalFilter` component and only in that case. It is necessary\n       * to make the `renderedFilters` to return only the filters of each level of the hierarchy.\n       *\n       * @public\n       */\n      parentId: {\n        type: String as PropType<Filter['id']>,\n        required: false\n      },\n\n      /** The debounce time for applying the filter sifting. */\n      debounceInMs: {\n        type: Number,\n        default: 200\n      }\n    },\n    setup(props) {\n      const renderedFilters = useFiltersInjection(props);\n\n      let query = ref('');\n      let setQueryDebounced: DebouncedFunction<[string]>;\n\n      const debounceInMs = computed(() => props.debounceInMs);\n\n      /**\n       * Set the debounce function for setting the query debounced.\n       *\n       * @internal\n       */\n      const updateSetQueryDebounced = () => {\n        setQueryDebounced = debounce(queryDebounced => {\n          query.value = queryDebounced;\n        }, props.debounceInMs);\n      };\n      watch(debounceInMs, updateSetQueryDebounced, { immediate: true });\n\n      /**\n       * Sift the array of filters which matches with the query.\n       *\n       * @returns Array of sifted filters.\n       * @internal\n       */\n      const siftedFilters = computed((): Filter[] => {\n        const normalizedQuery = normalizeString(query.value);\n        return renderedFilters.value.filter(\n          filter =>\n            isBooleanFilter(filter) && normalizeString(filter.label).includes(normalizedQuery)\n        );\n      });\n      provide('filters', siftedFilters);\n\n      /**\n       * Adds the dynamic css classes to the component.\n       *\n       * @returns The class to be added to the component.\n       * @internal\n       */\n      const cssClasses = computed((): VueCSSClasses => {\n        return { 'x-filters-search--is-sifted': !!query.value };\n      });\n\n      /**\n       * Set the query through the debounced function.\n       *\n       * @param query - The query to sift filters.\n       * @internal\n       */\n      const setQuery = (query: string): void => {\n        setQueryDebounced(query);\n      };\n\n      /**\n       * Clear the query.\n       *\n       * @internal\n       */\n      const clearQuery = (): void => {\n        query.value = '';\n      };\n\n      return {\n        clearQuery,\n        setQuery,\n        cssClasses,\n        siftedFilters,\n        query\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-filters-search {\n    display: flex;\n    flex-flow: column nowrap;\n  }\n\n  .x-filters-search__input::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  .x-filters-search__input::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  .x-filters-search__input::-webkit-search-decoration,\n  .x-filters-search__input::-webkit-search-cancel-button,\n  .x-filters-search__input::-webkit-search-results-button,\n  .x-filters-search__input::-webkit-search-results-decoration {\n    display: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nIt renders an input and a list of filters passed as prop or being injected. The list of filters can\nbe sifted with the query typed in the input. This component has also a debounce prop to set the time\nin milliseconds to apply the filters search. Moreover, it has two scoped slots. The first one for\ncustomize the search triggering with three slot props; the query, a function to set the query by\nsifting and a third one for cleaning the query. The second scoped slot is required and it is for\ndisplaying the list of filters sifted. It has a slot prop with these filters sifted.\n\n### Important\n\nThe component has two ways of receive the filters list, it can be injected by another component or\nbe send it as a prop. If the component doesnt have a parent component that receive and exposed a\nfilters list to their children, it is mandatory to send it as prop.\n\n### Basic usage\n\nUsing default and required slot:\n\n```vue\n<FiltersSearch :filters=\"filters\" v-slot=\"{ siftedFilters }\">\n  <ul v-for=\"filter in siftedFilters\">\n    <li :key=\"filter.id\">{{ filter.label }}</li>\n  </ul>\n</FiltersSearch>\n```\n\nSetting debounce time:\n\n```vue\n<FiltersSearch :filters=\"filters\" :debounceInMs=\"500\" v-slot=\"{ siftedFilters }\">\n  <ul v-for=\"filter in siftedFilters\">\n    <li :key=\"filter.id\">{{ filter.label }}</li>\n  </ul>\n</FiltersSearch>\n```\n\nReplacing search triggering:\n\n```vue\n<FiltersSearch :filters=\"filters\">\n  <template #search=\"{ query, setQuery, clearQuery }\">\n    <input\n      @input=\"setQuery($event.target.value)\"\n      :value=\"query\"\n      class=\"x-input x-filters-search__input\"\n      :aria-label=\"filtersSearchInputMessage\"/>\n    <button @click=\"clearQuery\">X</button>\n  </template>\n  <template #default=\"{ siftedFilters }\">\n    <ul v-for=\"filter in siftedFilters\">\n      <li :key=\"filter.id\">{{ filter.label }}</li>\n    </ul>\n  </template>\n</FiltersSearch>\n```\n\n> **Using injection**: It can receive the filters list by injection. It only works if it has a\n> parent component that receives and exposes the filters list. Using the injection, It is not\n> necessary to send the prop to the child components, it has to be send it in the parent component,\n> the rest of components will inject this list.\n\n```vue\n<Facets v-slot=\"{ facet }\">\n  <SlicedFilters :filters=\"facet.filters\" :max=\"8\">\n    <FiltersSearch >\n        <Filters v-slot=\"{ filter }\">\n          <SimpleFilter :filter=\"filter\" data-test=\"brand-filter\" />\n        </Filters>\n    </FiltersSearch>\n  </SlicedFilters>\n</Facets>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;AAoCE;;;;AAIE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,eAAe;IACrB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,OAAO,EAAE,KAA2B;AAEpC;;;;;AAKE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAgC;AACtC,YAAA,QAAQ,EAAE,KAAI;AACf,SAAA;;AAGD,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,GAAE;AACb,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,eAAc,GAAI,mBAAmB,CAAC,KAAK,CAAC,CAAA;AAElD,QAAA,IAAI,KAAI,GAAI,GAAG,CAAC,EAAE,CAAC,CAAA;AACnB,QAAA,IAAI,iBAA8C,CAAA;QAElD,MAAM,YAAa,GAAE,QAAQ,CAAC,MAAM,KAAK,CAAC,YAAY,CAAC,CAAA;AAEvD;;;;AAIE;QACF,MAAM,uBAAwB,GAAE,MAAM;AACpC,YAAA,iBAAkB,GAAE,QAAQ,CAAC,cAAa,IAAK;AAC7C,gBAAA,KAAK,CAAC,KAAI,GAAI,cAAc,CAAA;AAC9B,aAAC,EAAE,KAAK,CAAC,YAAY,CAAC,CAAA;AACxB,SAAC,CAAA;QACD,KAAK,CAAC,YAAY,EAAE,uBAAuB,EAAE,EAAE,SAAS,EAAE,IAAK,EAAC,CAAC,CAAA;AAEjE;;;;;AAKE;AACF,QAAA,MAAM,gBAAgB,QAAQ,CAAC,MAAgB;YAC7C,MAAM,eAAc,GAAI,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;YACpD,OAAO,eAAe,CAAC,KAAK,CAAC,MAAM,CACjC,UACE,eAAe,CAAC,MAAM,CAAE,IAAG,eAAe,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAA,CACpF,CAAA;AACH,SAAC,CAAC,CAAA;AACF,QAAA,OAAO,CAAC,SAAS,EAAE,aAAa,CAAC,CAAA;AAEjC;;;;;AAKE;AACF,QAAA,MAAM,UAAS,GAAI,QAAQ,CAAC,MAAqB;YAC/C,OAAO,EAAE,6BAA6B,EAAE,CAAC,CAAC,KAAK,CAAC,KAAI,EAAG,CAAA;AACzD,SAAC,CAAC,CAAA;AAEF;;;;;AAKE;AACF,QAAA,MAAM,QAAS,GAAE,CAAC,KAAa,KAAW;YACxC,iBAAiB,CAAC,KAAK,CAAC,CAAA;AAC1B,SAAC,CAAA;AAED;;;;AAIE;QACF,MAAM,UAAS,GAAI,MAAY;AAC7B,YAAA,KAAK,CAAC,KAAI,GAAI,EAAE,CAAA;AAClB,SAAC,CAAA;QAED,OAAO;YACL,UAAU;YACV,QAAQ;YACR,UAAU;YACV,aAAa;YACb,KAAI;SACL,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

package/js/x-modules/facets/components/lists/filters-search.vue3.js

@@ -1,16 +1,7 @@
-import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
+import injectCss from '../../../../../tools/inject-css.js';
 
-var css = ".x-filters-search[data-v-256780ff] {\n  display: flex;\n  flex-flow: column nowrap;\n}\n.x-filters-search__input[data-v-256780ff]::-ms-clear {\n  display: none;\n  width: 0;\n  height: 0;\n}\n.x-filters-search__input[data-v-256780ff]::-ms-reveal {\n  display: none;\n  width: 0;\n  height: 0;\n}\n.x-filters-search__input[data-v-256780ff]::-webkit-search-decoration, .x-filters-search__input[data-v-256780ff]::-webkit-search-cancel-button, .x-filters-search__input[data-v-256780ff]::-webkit-search-results-button, .x-filters-search__input[data-v-256780ff]::-webkit-search-results-decoration {\n  display: none;\n}";
-           const isBrowser = /*#__PURE__*/ (function () {
-             return (
-                Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
-                '[object process]'
-             );
-           })();
-           const useBrowserInjector =
-             (typeof STRIP_SSR_INJECTOR !== 'undefined' && STRIP_SSR_INJECTOR) || isBrowser;
-           const injector = useBrowserInjector ? createInjector({}) : createInjectorSSR({});
-           injector('/home/runner/work/x/x/packages/x-components/src/x-modules/facets/components/lists/filters-search.vue?rollup-plugin-vue=styles.0.css',{source:css});
+var css = ".x-filters-search[data-v-4979a051]{display:flex;flex-flow:column nowrap}.x-filters-search__input[data-v-4979a051]::-ms-clear,.x-filters-search__input[data-v-4979a051]::-ms-reveal{display:none;height:0;width:0}.x-filters-search__input[data-v-4979a051]::-webkit-search-cancel-button,.x-filters-search__input[data-v-4979a051]::-webkit-search-decoration,.x-filters-search__input[data-v-4979a051]::-webkit-search-results-button,.x-filters-search__input[data-v-4979a051]::-webkit-search-results-decoration{display:none}";
+injectCss(css);
 
 export { css, css as default };
 //# sourceMappingURL=filters-search.vue3.js.map

package/js/x-modules/facets/components/lists/filters-search.vue3.js.map

@@ -1 +1 @@
-{"version":3,"file":"filters-search.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"filters-search.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}