@empathyco/x-components 3.0.0-alpha.29 → 3.0.0-alpha.32

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-list 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-input x-filters-search__input\"\n        data-test=\"filters-search-input\"\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    /**\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__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</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    <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":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"filters-search.vue.js","sources":["../../../../../../src/x-modules/facets/components/lists/filters-search.vue"],"sourcesContent":["<template>\n  <div class=\"x-list 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-input x-filters-search__input\"\n        data-test=\"filters-search-input\"\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    /**\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__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</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    <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":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/facets/components/lists/filters-search.vue_rollup-plugin-vue=script.js

@@ -90,9 +90,6 @@ import '../../../../components/result/base-result-fallback-image.vue.js';
 import '../../../../components/result/base-result-placeholder-image.vue.js';
 import '../../../../components/scroll/scroll.mixin.js';
 import '../../../../components/scroll/base-scroll.vue.js';
-import '../../../../components/scroll/base-id-scroll.vue.js';
-import '../../../../components/scroll/base-scroll-to-top.vue.js';
-import '../../../../components/scroll/base-main-scroll.vue.js';
 import '../../../../components/suggestions/base-suggestion.vue.js';
 import '../../../../components/suggestions/base-suggestions.vue.js';
 import '../../../../components/auto-progress-bar.vue.js';
@@ -103,12 +100,15 @@ import '../../../../components/base-variable-column-grid.vue.js';
 import '../../../../components/decorators/debounce.decorators.js';
 import '../../../../components/sliding-panel.vue.js';
 import '../../../../components/items-list.vue.js';
-import '../../../../components/layouts/multi-column-max-width-layout.vue.js';
-import '../../../../components/layouts/single-column-layout.vue.js';
 import '../../../../components/decorators/store.decorators.js';
-import '../../../../components/items-list-injection.mixin.js';
 import '../../../../components/x-component.utils.js';
 import { xComponentMixin } from '../../../../components/x-component.mixin.js';
+import '../../../../components/layouts/multi-column-max-width-layout.vue.js';
+import '../../../../components/layouts/single-column-layout.vue.js';
+import '../../../../components/location-provider.vue.js';
+import '../../../../components/global-x-bus.vue.js';
+import '../../../../components/snippet-callbacks.vue.js';
+import '../../../../components/items-list-injection.mixin.js';
 import { isBooleanFilter } from '@empathyco/x-types';
 import { facetsXModule } from '../../x-module.js';
 import FiltersInjectionMixin from './filters-injection.mixin.js';

package/js/x-modules/facets/components/lists/selected-filters-list.vue.js

@@ -5,7 +5,7 @@ import script from './selected-filters-list.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -15,7 +15,7 @@ var __vue_render__ = function() {
       [
         {
           key: "default",
-          fn: function(ref) {
+          fn: function (ref) {
             var selectedFilters = ref.selectedFilters;
             return [
               _c(
@@ -23,9 +23,9 @@ var __vue_render__ = function() {
                 {
                   tag: "component",
                   staticClass: "x-list x-selected-filters-list",
-                  attrs: { "data-test": "selected-filters-list", tag: "ul" }
+                  attrs: { "data-test": "selected-filters-list", tag: "ul" },
                 },
-                _vm._l(_vm.mapSlot(selectedFilters), function(ref) {
+                _vm._l(_vm.mapSlot(selectedFilters), function (ref) {
                   var slotName = ref.slotName;
                   var selectedFilter = ref.selectedFilter;
                   return _c(
@@ -33,47 +33,41 @@ var __vue_render__ = function() {
                     {
                       key: selectedFilter.id,
                       staticClass: "x-selected-filters-list__item",
-                      attrs: { "data-test": "selected-filters-list-item" }
+                      attrs: { "data-test": "selected-filters-list-item" },
                     },
                     [
                       _vm.$scopedSlots[slotName]
                         ? _vm._t(
                             slotName,
-                            function() {
+                            function () {
                               return [
                                 _c("span", { staticClass: "x-tag" }, [
-                                  _vm._v(_vm._s(selectedFilter.label))
-                                ])
-                              ]
+                                  _vm._v(_vm._s(selectedFilter.label)) ]) ]
                             },
                             { filter: selectedFilter }
                           )
                         : _vm._t(
                             "default",
-                            function() {
+                            function () {
                               return [
                                 _vm._v(
                                   "\n        " +
                                     _vm._s(selectedFilter.label) +
                                     "\n      "
-                                )
-                              ]
+                                ) ]
                             },
                             { filter: selectedFilter }
-                          )
-                    ],
+                          ) ],
                     2
                   )
                 }),
                 0
-              )
-            ]
-          }
-        }
-      ],
+              ) ]
+          },
+        } ],
       null,
       true
-    )
+    ),
   })
 };
 var __vue_staticRenderFns__ = [];

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

@@ -1 +1 @@
-{"version":3,"file":"selected-filters-list.vue.js","sources":["../../../../../../src/x-modules/facets/components/lists/selected-filters-list.vue"],"sourcesContent":["<template>\n  <SelectedFilters v-slot=\"{ selectedFilters }\" :facetId=\"facetId\" :alwaysVisible=\"alwaysVisible\">\n    <component\n      :is=\"animation\"\n      class=\"x-list x-selected-filters-list\"\n      data-test=\"selected-filters-list\"\n      tag=\"ul\"\n    >\n      <li\n        v-for=\"{ slotName, selectedFilter } in mapSlot(selectedFilters)\"\n        :key=\"selectedFilter.id\"\n        class=\"x-selected-filters-list__item\"\n        data-test=\"selected-filters-list-item\"\n      >\n        <!--\n          @slot Custom filter rendering. Dynamic slot defined in the template with the filter\n          facet id. It renders the filter label by default.\n              @binding {Filter} filter - Filter to render.\n        -->\n        <slot v-if=\"$scopedSlots[slotName]\" :name=\"slotName\" :filter=\"selectedFilter\">\n          <span class=\"x-tag\">{{ selectedFilter.label }}</span>\n        </slot>\n\n        <!--\n          @slot Default filter rendering. It renders the filter label by default.\n              @binding {Filter} filter - Filter to render.\n        -->\n        <slot v-else name=\"default\" :filter=\"selectedFilter\">\n          {{ selectedFilter.label }}\n        </slot>\n      </li>\n    </component>\n  </SelectedFilters>\n</template>\n\n<script lang=\"ts\">\n  import { Component, Prop, Vue } from 'vue-property-decorator';\n  import { Facet, Filter, isFacetFilter } from '@empathyco/x-types';\n  import { xComponentMixin } from '../../../../components/x-component.mixin';\n  import { toKebabCase } from '../../../../utils/string';\n  import { facetsXModule } from '../../x-module';\n  import SelectedFilters from './selected-filters.vue';\n\n  /**\n   * Custom interface to provide a slot name to a Filter.\n   *\n   * @internal\n   */\n  interface RenderFilter {\n    slotName: string;\n    selectedFilter: Filter;\n  }\n\n  /**\n   * This component renders a list of selected filters from every facet, or from the facet\n   * which facet id is passed as property. It uses the SelectedFilters component (state).\n   *\n   * It provides two slots: a scoped one which name is the filter facet id; and a default one.\n   * Both exposes the filter and renders the filter label by default.\n   *\n   * The property \"alwaysVisible\" handles if the component is rendered if no filters are selected.\n   *\n   * @public\n   */\n  @Component({\n    components: { SelectedFilters },\n    mixins: [xComponentMixin(facetsXModule)]\n  })\n  export default class SelectedFiltersList extends Vue {\n    /**\n     * It is directly passed to the selected filters component. If a facet id is passed as prop,\n     * the component filters the selected filters for that facet.\n     *\n     * @public\n     */\n    @Prop()\n    protected facetId: Facet['id'] | undefined;\n\n    /**\n     * It is directly passed to the selected filters component. It handles if the SelectedFilters\n     * component is always rendered no matter if no filters are selected.\n     *\n     * If true, the SelectedFilters component is always rendered.\n     * If false, the SelectedFilters component is not rendered whether no filters are selected.\n     *\n     * @public\n     */\n    @Prop({ default: false })\n    protected alwaysVisible!: boolean;\n\n    /**\n     * Animation component that will be used to animate the selected filters list.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue | string;\n\n    /**\n     * Transforms a dictionary of Filters including the slot name.\n     *\n     * @param selectedFilters - A list of selected filters without slot name.\n     *\n     * @returns A dictionary of facets with the slot name.\n     *\n     * @internal\n     */\n    protected mapSlot(selectedFilters: Filter[]): RenderFilter[] {\n      return selectedFilters.map(filter => ({\n        slotName: isFacetFilter(filter) ? toKebabCase(filter.facetId as string) : 'default',\n        selectedFilter: filter\n      }));\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n# Example\n\nThis component renders a list of selected filters from every facet, or from the facet which facet id\nis passed as property. It uses the SelectedFilters component (state).\n\nIt provides two slots: a scoped one which name is the filter facet id; and a default one. Both\nexposes the filter and renders the filter label by default.\n\nThe property \"alwaysVisible\" handles if the component is rendered if no filters are selected.\n\n## Default usage\n\n```vue\n<template>\n  <SelectedFiltersList />\n</template>\n\n<script>\n  import { SelectedFiltersList } from '@empathyco/x-components/facets';\n\n  export default {\n    components: {\n      SelectedFiltersList\n    }\n  };\n</script>\n```\n\n## Customized usage\n\n```vue\n<template>\n  <SelectedFiltersList #default=\"{ filter }\">Default: {{ filter.label }}</SelectedFiltersList>\n</template>\n\n<script>\n  import { SelectedFilters } from '@empathyco/x-components/facets';\n\n  export default {\n    components: {\n      SelectedFilters\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <SelectedFiltersList>\n    <template #default=\"{ filter }\">Default: {{ filter.label }}</template>\n    <template #brand_facet=\"{ filter }\">Brand: {{ filter.label }}</template>\n    <template #age_facet=\"{ filter }\">Age: {{ filter.label }}</template>\n    <template #price_facet=\"{ filter }\">Price: {{ filter.label }}</template>\n  </SelectedFiltersList>\n</template>\n\n<script>\n  import { SelectedFilters } from '@empathyco/x-components/facets';\n\n  export default {\n    components: {\n      SelectedFilters\n    }\n  };\n</script>\n```\n\n## Always visible\n\nIf \"alwaysVisible\" is true, the component is rendered no matter if there are some filter selected.\nIf \"alwaysVisible\" is false (default), the component is rendered if there are some filter selected.\n\n```vue\n<SelectedFiltersList :alwaysVisible=\"true\" />\n```\n\nOutput:\n\n```html\n<div class=\"x-selected-filters\">\n  <ul class=\"x-selected-filters-list\" data-test=\"selected-filters-list\"></ul>\n</div>\n```\n\n## Providing a facet id\n\nIn this example, the selected filters computed are the ones that match the facet passed as property.\n\n```vue\n<SelectedFilters facetId=\"brand_facet\" />\n```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"selected-filters-list.vue.js","sources":["../../../../../../src/x-modules/facets/components/lists/selected-filters-list.vue"],"sourcesContent":["<template>\n  <SelectedFilters v-slot=\"{ selectedFilters }\" :facetId=\"facetId\" :alwaysVisible=\"alwaysVisible\">\n    <component\n      :is=\"animation\"\n      class=\"x-list x-selected-filters-list\"\n      data-test=\"selected-filters-list\"\n      tag=\"ul\"\n    >\n      <li\n        v-for=\"{ slotName, selectedFilter } in mapSlot(selectedFilters)\"\n        :key=\"selectedFilter.id\"\n        class=\"x-selected-filters-list__item\"\n        data-test=\"selected-filters-list-item\"\n      >\n        <!--\n          @slot Custom filter rendering. Dynamic slot defined in the template with the filter\n          facet id. It renders the filter label by default.\n              @binding {Filter} filter - Filter to render.\n        -->\n        <slot v-if=\"$scopedSlots[slotName]\" :name=\"slotName\" :filter=\"selectedFilter\">\n          <span class=\"x-tag\">{{ selectedFilter.label }}</span>\n        </slot>\n\n        <!--\n          @slot Default filter rendering. It renders the filter label by default.\n              @binding {Filter} filter - Filter to render.\n        -->\n        <slot v-else name=\"default\" :filter=\"selectedFilter\">\n          {{ selectedFilter.label }}\n        </slot>\n      </li>\n    </component>\n  </SelectedFilters>\n</template>\n\n<script lang=\"ts\">\n  import { Component, Prop, Vue } from 'vue-property-decorator';\n  import { Facet, Filter, isFacetFilter } from '@empathyco/x-types';\n  import { xComponentMixin } from '../../../../components/x-component.mixin';\n  import { toKebabCase } from '../../../../utils/string';\n  import { facetsXModule } from '../../x-module';\n  import SelectedFilters from './selected-filters.vue';\n\n  /**\n   * Custom interface to provide a slot name to a Filter.\n   *\n   * @internal\n   */\n  interface RenderFilter {\n    slotName: string;\n    selectedFilter: Filter;\n  }\n\n  /**\n   * This component renders a list of selected filters from every facet, or from the facet\n   * which facet id is passed as property. It uses the SelectedFilters component (state).\n   *\n   * It provides two slots: a scoped one which name is the filter facet id; and a default one.\n   * Both exposes the filter and renders the filter label by default.\n   *\n   * The property \"alwaysVisible\" handles if the component is rendered if no filters are selected.\n   *\n   * @public\n   */\n  @Component({\n    components: { SelectedFilters },\n    mixins: [xComponentMixin(facetsXModule)]\n  })\n  export default class SelectedFiltersList extends Vue {\n    /**\n     * It is directly passed to the selected filters component. If a facet id is passed as prop,\n     * the component filters the selected filters for that facet.\n     *\n     * @public\n     */\n    @Prop()\n    protected facetId: Facet['id'] | undefined;\n\n    /**\n     * It is directly passed to the selected filters component. It handles if the SelectedFilters\n     * component is always rendered no matter if no filters are selected.\n     *\n     * If true, the SelectedFilters component is always rendered.\n     * If false, the SelectedFilters component is not rendered whether no filters are selected.\n     *\n     * @public\n     */\n    @Prop({ default: false })\n    protected alwaysVisible!: boolean;\n\n    /**\n     * Animation component that will be used to animate the selected filters list.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue | string;\n\n    /**\n     * Transforms a dictionary of Filters including the slot name.\n     *\n     * @param selectedFilters - A list of selected filters without slot name.\n     *\n     * @returns A dictionary of facets with the slot name.\n     *\n     * @internal\n     */\n    protected mapSlot(selectedFilters: Filter[]): RenderFilter[] {\n      return selectedFilters.map(filter => ({\n        slotName: isFacetFilter(filter) ? toKebabCase(filter.facetId as string) : 'default',\n        selectedFilter: filter\n      }));\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n# Example\n\nThis component renders a list of selected filters from every facet, or from the facet which facet id\nis passed as property. It uses the SelectedFilters component (state).\n\nIt provides two slots: a scoped one which name is the filter facet id; and a default one. Both\nexposes the filter and renders the filter label by default.\n\nThe property \"alwaysVisible\" handles if the component is rendered if no filters are selected.\n\n## Default usage\n\n```vue\n<template>\n  <SelectedFiltersList />\n</template>\n\n<script>\n  import { SelectedFiltersList } from '@empathyco/x-components/facets';\n\n  export default {\n    components: {\n      SelectedFiltersList\n    }\n  };\n</script>\n```\n\n## Customized usage\n\n```vue\n<template>\n  <SelectedFiltersList #default=\"{ filter }\">Default: {{ filter.label }}</SelectedFiltersList>\n</template>\n\n<script>\n  import { SelectedFilters } from '@empathyco/x-components/facets';\n\n  export default {\n    components: {\n      SelectedFilters\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <SelectedFiltersList>\n    <template #default=\"{ filter }\">Default: {{ filter.label }}</template>\n    <template #brand_facet=\"{ filter }\">Brand: {{ filter.label }}</template>\n    <template #age_facet=\"{ filter }\">Age: {{ filter.label }}</template>\n    <template #price_facet=\"{ filter }\">Price: {{ filter.label }}</template>\n  </SelectedFiltersList>\n</template>\n\n<script>\n  import { SelectedFilters } from '@empathyco/x-components/facets';\n\n  export default {\n    components: {\n      SelectedFilters\n    }\n  };\n</script>\n```\n\n## Always visible\n\nIf \"alwaysVisible\" is true, the component is rendered no matter if there are some filter selected.\nIf \"alwaysVisible\" is false (default), the component is rendered if there are some filter selected.\n\n```vue\n<SelectedFiltersList :alwaysVisible=\"true\" />\n```\n\nOutput:\n\n```html\n<div class=\"x-selected-filters\">\n  <ul class=\"x-selected-filters-list\" data-test=\"selected-filters-list\"></ul>\n</div>\n```\n\n## Providing a facet id\n\nIn this example, the selected filters computed are the ones that match the facet passed as property.\n\n```vue\n<SelectedFilters facetId=\"brand_facet\" />\n```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -5,7 +5,7 @@ import script from './selected-filters.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -16,13 +16,12 @@ var __vue_render__ = function() {
         [
           _vm._t(
             "default",
-            function() {
+            function () {
               return [_vm._v(_vm._s(_vm.selectedFilters.length))]
             },
             null,
             { selectedFilters: _vm.selectedFilters }
-          )
-        ],
+          ) ],
         2
       )
     : _vm._e()

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

@@ -1 +1 @@
-{"version":3,"file":"selected-filters.vue.js","sources":["../../../../../../src/x-modules/facets/components/lists/selected-filters.vue"],"sourcesContent":["<template>\n  <NoElement v-if=\"show\" class=\"x-selected-filters\">\n    <slot v-bind=\"{ selectedFilters }\">{{ selectedFilters.length }}</slot>\n  </NoElement>\n</template>\n\n<script lang=\"ts\">\n  import { Facet, Filter } from '@empathyco/x-types';\n  import { Component, Prop, Vue } from 'vue-property-decorator';\n  import { Getter } from '../../../../components/decorators/store.decorators';\n  import { NoElement } from '../../../../components';\n  import { xComponentMixin } from '../../../../components/x-component.mixin';\n  import { FiltersByFacet } from '../../store/types';\n  import { facetsXModule } from '../../x-module';\n\n  /**\n   * Provides a scoped slot with the selected filters from every facet, or from the facet which\n   * facet id is passed as property.\n   *\n   * The default slot renders the length of the selected filters array.\n   * The property \"alwaysVisible\" handles if the component is rendered if no filters are selected.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(facetsXModule)],\n    components: {\n      NoElement\n    }\n  })\n  export default class SelectedFilters extends Vue {\n    /**\n     * If a facet id is passed as prop, the component filters the selected filters for that facet.\n     *\n     * @public\n     */\n    @Prop()\n    protected facetId: Facet['id'] | undefined;\n\n    /**\n     * It handles if the SelectedFilters component is always rendered no matter if no filters are\n     * selected.\n     * If true, the SelectedFilters component is always rendered.\n     * If false, the SelectedFilters component is not rendered whether no filters are selected.\n     *\n     * @public\n     */\n    @Prop({ default: false })\n    protected alwaysVisible!: boolean;\n\n    /**\n     * Array of selected filters from every facet.\n     *\n     * @public\n     */\n    @Getter('facets', 'selectedFilters')\n    public selectedFiltersGetter!: Filter[];\n\n    /**\n     * Dictionary of selected filters grouped by facet.\n     *\n     * @public\n     */\n    @Getter('facets', 'selectedFiltersByFacet')\n    public selectedFiltersByFacet!: FiltersByFacet;\n\n    /**\n     * It returns an array of selected filters. If a facet id is passed as prop to the component,\n     * only the selected filters of that facet are returned. If not, it returns selected filters of\n     * every facet.\n     *\n     * @returns Array of selected filters.\n     *\n     * @internal\n     */\n    protected get selectedFilters(): Filter[] {\n      return this.facetId === undefined\n        ? this.selectedFiltersGetter\n        : this.selectedFiltersByFacet[this.facetId] ?? [];\n    }\n\n    /**\n     * If \"alwaysVisible\" prop is true, returns true.\n     * If \"alwaysVisible\" prop is false, returns true or false depending on if there are some\n     * filter selected.\n     *\n     * @returns True if \"alwaysVisible\" is true. True or false depending on if there are some filter\n     * selected.\n     *\n     * @internal\n     */\n    protected get show(): boolean {\n      return this.alwaysVisible || this.selectedFilters.length > 0;\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n# Examples\n\nProvides a scoped slot with the selected filters from every facet, or from the facet which facet id\nis passed as property.\n\nThe default slot renders the length of the selected filters array.\n\n## Basic usage\n\n```vue\n<SelectedFilters />\n```\n\n## Always visible\n\nIf \"alwaysVisible\" is true, the component is rendered no matter if there are some filter selected.\nIf \"alwaysVisible\" is false (default), the component is rendered if there are some filter selected.\n\n```vue\n<SelectedFilters />\n```\n\nOutput:\n\n```html\n<div class=\"x-selected-filters\">1</div>\n```\n\n## Customizing its content\n\nIn this example, renders a custom message using the default scoped slot.\n\n```vue\n<SelectedFilters>\n  <template #default=\"{ selectedFilters }\">\n    Selected filters: {{ selectedFilters.length }}\n  </template>\n</SelectedFilters>\n```\n\nOutput:\n\n```html\n<div class=\"x-selected-filters\">Selected filters: 1</div>\n```\n\nIn this example, the selected filters computed are the ones that match the facet passed as property.\n\n```vue\n<SelectedFilters facetId=\"brand_facet\" />\n```\n\n```vue\n<SelectedFilters facetId=\"brand_facet\">\n  <template #default=\"{ selectedFilters }\">\n    Selected filters: {{ selectedFilters.length }}\n  </template>\n</SelectedFilters>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"selected-filters.vue.js","sources":["../../../../../../src/x-modules/facets/components/lists/selected-filters.vue"],"sourcesContent":["<template>\n  <NoElement v-if=\"show\" class=\"x-selected-filters\">\n    <slot v-bind=\"{ selectedFilters }\">{{ selectedFilters.length }}</slot>\n  </NoElement>\n</template>\n\n<script lang=\"ts\">\n  import { Facet, Filter } from '@empathyco/x-types';\n  import { Component, Prop, Vue } from 'vue-property-decorator';\n  import { Getter } from '../../../../components/decorators/store.decorators';\n  import { NoElement } from '../../../../components';\n  import { xComponentMixin } from '../../../../components/x-component.mixin';\n  import { FiltersByFacet } from '../../store/types';\n  import { facetsXModule } from '../../x-module';\n\n  /**\n   * Provides a scoped slot with the selected filters from every facet, or from the facet which\n   * facet id is passed as property.\n   *\n   * The default slot renders the length of the selected filters array.\n   * The property \"alwaysVisible\" handles if the component is rendered if no filters are selected.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(facetsXModule)],\n    components: {\n      NoElement\n    }\n  })\n  export default class SelectedFilters extends Vue {\n    /**\n     * If a facet id is passed as prop, the component filters the selected filters for that facet.\n     *\n     * @public\n     */\n    @Prop()\n    protected facetId: Facet['id'] | undefined;\n\n    /**\n     * It handles if the SelectedFilters component is always rendered no matter if no filters are\n     * selected.\n     * If true, the SelectedFilters component is always rendered.\n     * If false, the SelectedFilters component is not rendered whether no filters are selected.\n     *\n     * @public\n     */\n    @Prop({ default: false })\n    protected alwaysVisible!: boolean;\n\n    /**\n     * Array of selected filters from every facet.\n     *\n     * @public\n     */\n    @Getter('facets', 'selectedFilters')\n    public selectedFiltersGetter!: Filter[];\n\n    /**\n     * Dictionary of selected filters grouped by facet.\n     *\n     * @public\n     */\n    @Getter('facets', 'selectedFiltersByFacet')\n    public selectedFiltersByFacet!: FiltersByFacet;\n\n    /**\n     * It returns an array of selected filters. If a facet id is passed as prop to the component,\n     * only the selected filters of that facet are returned. If not, it returns selected filters of\n     * every facet.\n     *\n     * @returns Array of selected filters.\n     *\n     * @internal\n     */\n    protected get selectedFilters(): Filter[] {\n      return this.facetId === undefined\n        ? this.selectedFiltersGetter\n        : this.selectedFiltersByFacet[this.facetId] ?? [];\n    }\n\n    /**\n     * If \"alwaysVisible\" prop is true, returns true.\n     * If \"alwaysVisible\" prop is false, returns true or false depending on if there are some\n     * filter selected.\n     *\n     * @returns True if \"alwaysVisible\" is true. True or false depending on if there are some filter\n     * selected.\n     *\n     * @internal\n     */\n    protected get show(): boolean {\n      return this.alwaysVisible || this.selectedFilters.length > 0;\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n# Examples\n\nProvides a scoped slot with the selected filters from every facet, or from the facet which facet id\nis passed as property.\n\nThe default slot renders the length of the selected filters array.\n\n## Basic usage\n\n```vue\n<SelectedFilters />\n```\n\n## Always visible\n\nIf \"alwaysVisible\" is true, the component is rendered no matter if there are some filter selected.\nIf \"alwaysVisible\" is false (default), the component is rendered if there are some filter selected.\n\n```vue\n<SelectedFilters />\n```\n\nOutput:\n\n```html\n<div class=\"x-selected-filters\">1</div>\n```\n\n## Customizing its content\n\nIn this example, renders a custom message using the default scoped slot.\n\n```vue\n<SelectedFilters>\n  <template #default=\"{ selectedFilters }\">\n    Selected filters: {{ selectedFilters.length }}\n  </template>\n</SelectedFilters>\n```\n\nOutput:\n\n```html\n<div class=\"x-selected-filters\">Selected filters: 1</div>\n```\n\nIn this example, the selected filters computed are the ones that match the facet passed as property.\n\n```vue\n<SelectedFilters facetId=\"brand_facet\" />\n```\n\n```vue\n<SelectedFilters facetId=\"brand_facet\">\n  <template #default=\"{ selectedFilters }\">\n    Selected filters: {{ selectedFilters.length }}\n  </template>\n</SelectedFilters>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/facets/components/lists/selected-filters.vue_rollup-plugin-vue=script.js

@@ -87,9 +87,6 @@ import '../../../../components/result/base-result-fallback-image.vue.js';
 import '../../../../components/result/base-result-placeholder-image.vue.js';
 import '../../../../components/scroll/scroll.mixin.js';
 import '../../../../components/scroll/base-scroll.vue.js';
-import '../../../../components/scroll/base-id-scroll.vue.js';
-import '../../../../components/scroll/base-scroll-to-top.vue.js';
-import '../../../../components/scroll/base-main-scroll.vue.js';
 import '../../../../components/suggestions/base-suggestion.vue.js';
 import '../../../../components/suggestions/base-suggestions.vue.js';
 import '../../../../components/auto-progress-bar.vue.js';
@@ -100,12 +97,15 @@ import '../../../../components/base-variable-column-grid.vue.js';
 import '../../../../components/decorators/debounce.decorators.js';
 import '../../../../components/sliding-panel.vue.js';
 import '../../../../components/items-list.vue.js';
-import '../../../../components/layouts/multi-column-max-width-layout.vue.js';
-import '../../../../components/layouts/single-column-layout.vue.js';
 import { Getter } from '../../../../components/decorators/store.decorators.js';
-import '../../../../components/items-list-injection.mixin.js';
 import '../../../../components/x-component.utils.js';
 import { xComponentMixin } from '../../../../components/x-component.mixin.js';
+import '../../../../components/layouts/multi-column-max-width-layout.vue.js';
+import '../../../../components/layouts/single-column-layout.vue.js';
+import '../../../../components/location-provider.vue.js';
+import '../../../../components/global-x-bus.vue.js';
+import '../../../../components/snippet-callbacks.vue.js';
+import '../../../../components/items-list-injection.mixin.js';
 import { facetsXModule } from '../../x-module.js';
 
 /**

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

@@ -5,7 +5,7 @@ import script from './sliced-filters.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -14,7 +14,7 @@ var __vue_render__ = function() {
     {
       staticClass: "x-sliced-filters",
       class: _vm.cssClasses,
-      attrs: { "data-test": "filters-show-more" }
+      attrs: { "data-test": "filters-show-more" },
     },
     [
       _vm._t("default", null, { slicedFilters: _vm.slicedFilters }),
@@ -28,12 +28,12 @@ var __vue_render__ = function() {
                     staticClass:
                       "x-filter x-sliced-filters__button x-sliced-filters__button--show-more",
                     attrs: { "data-test": "sliced-filters-show-more-button" },
-                    on: { click: _vm.toggleShowMoreFilters }
+                    on: { click: _vm.toggleShowMoreFilters },
                   },
                   [
                     _vm._t(
                       "show-more",
-                      function() {
+                      function () {
                         return [
                           _vm._v("\n        Show\n        "),
                           _c(
@@ -41,12 +41,10 @@ var __vue_render__ = function() {
                             { attrs: { "data-test": "show-more-amount" } },
                             [_vm._v(_vm._s(_vm.difference))]
                           ),
-                          _vm._v("\n        more filters\n      ")
-                        ]
+                          _vm._v("\n        more filters\n      ") ]
                       },
                       { difference: _vm.difference }
-                    )
-                  ],
+                    ) ],
                   2
                 )
               : _c(
@@ -55,12 +53,12 @@ var __vue_render__ = function() {
                     staticClass:
                       "x-filter x-sliced-filters__button x-sliced-filters__button--show-less",
                     attrs: { "data-test": "sliced-filters-show-less-button" },
-                    on: { click: _vm.toggleShowMoreFilters }
+                    on: { click: _vm.toggleShowMoreFilters },
                   },
                   [
                     _vm._t(
                       "show-less",
-                      function() {
+                      function () {
                         return [
                           _vm._v("\n        Show\n        "),
                           _c(
@@ -68,17 +66,13 @@ var __vue_render__ = function() {
                             { attrs: { "data-test": "show-less-amount" } },
                             [_vm._v(_vm._s(_vm.difference))]
                           ),
-                          _vm._v("\n        less filters\n      ")
-                        ]
+                          _vm._v("\n        less filters\n      ") ]
                       },
                       { difference: _vm.difference }
-                    )
-                  ],
+                    ) ],
                   2
-                )
-          ]
-        : _vm._e()
-    ],
+                ) ]
+        : _vm._e() ],
     2
   )
 };

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

@@ -1 +1 @@
-{"version":3,"file":"sliced-filters.vue.js","sources":["../../../../../../src/x-modules/facets/components/lists/sliced-filters.vue"],"sourcesContent":["<template>\n  <div class=\"x-sliced-filters\" :class=\"cssClasses\" data-test=\"filters-show-more\">\n    <!--\n      @slot (Required) Sliced filters content.\n        @binding {Filter[]} slicedFilters - Sliced filters..\n    -->\n    <slot :slicedFilters=\"slicedFilters\" />\n    <template v-if=\"showButton\">\n      <button\n        v-if=\"showMoreFilters\"\n        @click=\"toggleShowMoreFilters\"\n        class=\"x-filter x-sliced-filters__button x-sliced-filters__button--show-more\"\n        data-test=\"sliced-filters-show-more-button\"\n      >\n        <!--\n          @slot Button show more filters.\n            @binding {number} difference - The difference between the filters and max to show.\n        -->\n        <slot name=\"show-more\" :difference=\"difference\">\n          Show\n          <span data-test=\"show-more-amount\">{{ difference }}</span>\n          more filters\n        </slot>\n      </button>\n      <button\n        v-else\n        @click=\"toggleShowMoreFilters\"\n        class=\"x-filter x-sliced-filters__button x-sliced-filters__button--show-less\"\n        data-test=\"sliced-filters-show-less-button\"\n      >\n        <!--\n          @slot Button show less filters.\n            @binding {number} difference - The difference between the filters and max to show.\n        -->\n        <slot name=\"show-less\" :difference=\"difference\">\n          Show\n          <span data-test=\"show-less-amount\">{{ difference }}</span>\n          less filters\n        </slot>\n      </button>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { Filter } from '@empathyco/x-types';\n  import { mixins } from 'vue-class-component';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { xComponentMixin, XProvide } from '../../../../components';\n  import { VueCSSClasses } from '../../../../utils';\n  import { facetsXModule } from '../../x-module';\n  import FiltersInjectionMixin from './filters-injection.mixin';\n\n  /**\n   * Component that slices a list of filters and returns them using the default scoped slot,\n   * allowing the user to show the full list of them or slicing them again using the\n   * show more/less buttons.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(facetsXModule)]\n  })\n  export default class SlicedFilters extends mixins(FiltersInjectionMixin) {\n    /** The maximum number of filters to show.\n     *\n     * @public\n     * */\n    @Prop({ required: true })\n    protected max!: number;\n\n    /** For showing the remaining filters. */\n    public showMoreFilters = true;\n\n    /**\n     * Show the buttons template when length filters is greater than property max.\n     *\n     * @returns Boolean if length filters is greater than property max.\n     * @internal\n     */\n    protected get showButton(): boolean {\n      return this.renderedFilters.length > this.max;\n    }\n\n    /**\n     * Sliced the array of filters depends on click button show more.\n     *\n     * @returns Array of sliced filters or all filters.\n     * @internal\n     */\n    @XProvide('filters')\n    public get slicedFilters(): Filter[] {\n      return this.showMoreFilters ? this.renderedFilters.slice(0, this.max) : this.renderedFilters;\n    }\n\n    /**\n     * The difference between length filters and max to show.\n     *\n     * @returns Number of remaining filters to show.\n     * @internal\n     */\n    protected get difference(): number {\n      return this.renderedFilters.length - this.max;\n    }\n\n    /**\n     * Show or hide the remaining filters. It also emits a Vue event based on the clicked button.\n     *\n     * @param event - The click event.\n     *\n     * @internal\n     */\n    protected toggleShowMoreFilters(event: MouseEvent): void {\n      this.showMoreFilters = !this.showMoreFilters;\n      this.$emit(this.showMoreFilters ? 'click:show-less' : 'click:show-more', event);\n    }\n\n    /**\n     * Adds the dynamic css classes to the component.\n     *\n     * @returns The classes to be added to the component.\n     * @internal\n     */\n    protected get cssClasses(): VueCSSClasses {\n      return {\n        'x-sliced-filters--is-sliced': this.showButton\n      };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n# Example\n\nThe sliced filters component, takes a list of filters, and the maximum number of filters to render\nas prop. Then, it slices the list of filters using the `max` prop, and returns this new filters list\nusing the default scoped slot.\n\nThe user can click the show more button if he wants to see the full list of filters, or the show\nless button when he wants to reset the filters. This buttons text or icons can be configured via\nslot too. They receive a `difference` prop which can be useful for writing friendlier messages.\n\nThis component is usually integrated with the `Facets` and `Filters` component. It is useful when\nthere are lots of available filters for a single facet, helping to improve the app performance, as\nless nodes are rendered.\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\n```vue\n<template>\n  <Facets v-slot=\"{ facet }\">\n    <SlicedFilters :filters=\"facet.filters\" :max=\"4\">\n      <template #default=\"{ slicedFilters }\">\n        <Filters :items=\"slicedFilters\" v-slot=\"{ filter }\">\n          <SimpleFilter :filter=\"filter\" />\n        </Filters>\n      </template>\n      <template #show-more=\"{ difference }\">Show {{ difference }} more filters</template>\n      <template #show-less=\"{ difference }\">Show {{ difference }} less filters</template>\n    </SlicedFilters>\n  </Facets>\n</template>\n<script>\n  import { BaseShowMoreFilters } from '@empathyco/x-components';\n  import { Facets, SimpleFilter, Filters } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      Facets,\n      BaseShowMoreFilters,\n      Filters,\n      SimpleFilter\n    }\n  };\n</script>\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=\"4\">\n      <Filters v-slot=\"{ filter }\">\n        <SimpleFilter :filter=\"filter\"/>\n      </Filters>\n    <template #show-more=\"{ difference }\">Show {{ difference }} more filters</template>\n    <template #show-less=\"{ difference }\">Show {{ difference }} less filters</template>\n  </SlicedFilters>\n</Facets>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"sliced-filters.vue.js","sources":["../../../../../../src/x-modules/facets/components/lists/sliced-filters.vue"],"sourcesContent":["<template>\n  <div class=\"x-sliced-filters\" :class=\"cssClasses\" data-test=\"filters-show-more\">\n    <!--\n      @slot (Required) Sliced filters content.\n        @binding {Filter[]} slicedFilters - Sliced filters..\n    -->\n    <slot :slicedFilters=\"slicedFilters\" />\n    <template v-if=\"showButton\">\n      <button\n        v-if=\"showMoreFilters\"\n        @click=\"toggleShowMoreFilters\"\n        class=\"x-filter x-sliced-filters__button x-sliced-filters__button--show-more\"\n        data-test=\"sliced-filters-show-more-button\"\n      >\n        <!--\n          @slot Button show more filters.\n            @binding {number} difference - The difference between the filters and max to show.\n        -->\n        <slot name=\"show-more\" :difference=\"difference\">\n          Show\n          <span data-test=\"show-more-amount\">{{ difference }}</span>\n          more filters\n        </slot>\n      </button>\n      <button\n        v-else\n        @click=\"toggleShowMoreFilters\"\n        class=\"x-filter x-sliced-filters__button x-sliced-filters__button--show-less\"\n        data-test=\"sliced-filters-show-less-button\"\n      >\n        <!--\n          @slot Button show less filters.\n            @binding {number} difference - The difference between the filters and max to show.\n        -->\n        <slot name=\"show-less\" :difference=\"difference\">\n          Show\n          <span data-test=\"show-less-amount\">{{ difference }}</span>\n          less filters\n        </slot>\n      </button>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { Filter } from '@empathyco/x-types';\n  import { mixins } from 'vue-class-component';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { xComponentMixin, XProvide } from '../../../../components';\n  import { VueCSSClasses } from '../../../../utils';\n  import { facetsXModule } from '../../x-module';\n  import FiltersInjectionMixin from './filters-injection.mixin';\n\n  /**\n   * Component that slices a list of filters and returns them using the default scoped slot,\n   * allowing the user to show the full list of them or slicing them again using the\n   * show more/less buttons.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(facetsXModule)]\n  })\n  export default class SlicedFilters extends mixins(FiltersInjectionMixin) {\n    /** The maximum number of filters to show.\n     *\n     * @public\n     * */\n    @Prop({ required: true })\n    protected max!: number;\n\n    /** For showing the remaining filters. */\n    public showMoreFilters = true;\n\n    /**\n     * Show the buttons template when length filters is greater than property max.\n     *\n     * @returns Boolean if length filters is greater than property max.\n     * @internal\n     */\n    protected get showButton(): boolean {\n      return this.renderedFilters.length > this.max;\n    }\n\n    /**\n     * Sliced the array of filters depends on click button show more.\n     *\n     * @returns Array of sliced filters or all filters.\n     * @internal\n     */\n    @XProvide('filters')\n    public get slicedFilters(): Filter[] {\n      return this.showMoreFilters ? this.renderedFilters.slice(0, this.max) : this.renderedFilters;\n    }\n\n    /**\n     * The difference between length filters and max to show.\n     *\n     * @returns Number of remaining filters to show.\n     * @internal\n     */\n    protected get difference(): number {\n      return this.renderedFilters.length - this.max;\n    }\n\n    /**\n     * Show or hide the remaining filters. It also emits a Vue event based on the clicked button.\n     *\n     * @param event - The click event.\n     *\n     * @internal\n     */\n    protected toggleShowMoreFilters(event: MouseEvent): void {\n      this.showMoreFilters = !this.showMoreFilters;\n      this.$emit(this.showMoreFilters ? 'click:show-less' : 'click:show-more', event);\n    }\n\n    /**\n     * Adds the dynamic css classes to the component.\n     *\n     * @returns The classes to be added to the component.\n     * @internal\n     */\n    protected get cssClasses(): VueCSSClasses {\n      return {\n        'x-sliced-filters--is-sliced': this.showButton\n      };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n# Example\n\nThe sliced filters component, takes a list of filters, and the maximum number of filters to render\nas prop. Then, it slices the list of filters using the `max` prop, and returns this new filters list\nusing the default scoped slot.\n\nThe user can click the show more button if he wants to see the full list of filters, or the show\nless button when he wants to reset the filters. This buttons text or icons can be configured via\nslot too. They receive a `difference` prop which can be useful for writing friendlier messages.\n\nThis component is usually integrated with the `Facets` and `Filters` component. It is useful when\nthere are lots of available filters for a single facet, helping to improve the app performance, as\nless nodes are rendered.\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\n```vue\n<template>\n  <Facets v-slot=\"{ facet }\">\n    <SlicedFilters :filters=\"facet.filters\" :max=\"4\">\n      <template #default=\"{ slicedFilters }\">\n        <Filters :items=\"slicedFilters\" v-slot=\"{ filter }\">\n          <SimpleFilter :filter=\"filter\" />\n        </Filters>\n      </template>\n      <template #show-more=\"{ difference }\">\n        Show\n        <span data-test=\"show-more-amount\">{{ difference }}</span>\n        more filters\n      </template>\n      <template #show-less=\"{ difference }\">\n        Show\n        <span data-test=\"show-less-amount\">{{ difference }}</span>\n        less filters\n      </template>\n    </SlicedFilters>\n  </Facets>\n</template>\n<script>\n  import { BaseShowMoreFilters } from '@empathyco/x-components';\n  import { Facets, SimpleFilter, Filters } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      Facets,\n      BaseShowMoreFilters,\n      Filters,\n      SimpleFilter\n    }\n  };\n</script>\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=\"4\">\n      <Filters v-slot=\"{ filter }\">\n        <SimpleFilter :filter=\"filter\"/>\n      </Filters>\n    <template #show-more=\"{ difference }\">Show {{ difference }} more filters</template>\n    <template #show-less=\"{ difference }\">Show {{ difference }} less filters</template>\n  </SlicedFilters>\n</Facets>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/facets/components/lists/sliced-filters.vue_rollup-plugin-vue=script.js

@@ -88,9 +88,6 @@ import '../../../../components/result/base-result-fallback-image.vue.js';
 import '../../../../components/result/base-result-placeholder-image.vue.js';
 import '../../../../components/scroll/scroll.mixin.js';
 import '../../../../components/scroll/base-scroll.vue.js';
-import '../../../../components/scroll/base-id-scroll.vue.js';
-import '../../../../components/scroll/base-scroll-to-top.vue.js';
-import '../../../../components/scroll/base-main-scroll.vue.js';
 import '../../../../components/suggestions/base-suggestion.vue.js';
 import '../../../../components/suggestions/base-suggestions.vue.js';
 import '../../../../components/auto-progress-bar.vue.js';
@@ -101,12 +98,15 @@ import '../../../../components/base-variable-column-grid.vue.js';
 import '../../../../components/decorators/debounce.decorators.js';
 import '../../../../components/sliding-panel.vue.js';
 import '../../../../components/items-list.vue.js';
-import '../../../../components/layouts/multi-column-max-width-layout.vue.js';
-import '../../../../components/layouts/single-column-layout.vue.js';
 import '../../../../components/decorators/store.decorators.js';
-import '../../../../components/items-list-injection.mixin.js';
 import '../../../../components/x-component.utils.js';
 import { xComponentMixin } from '../../../../components/x-component.mixin.js';
+import '../../../../components/layouts/multi-column-max-width-layout.vue.js';
+import '../../../../components/layouts/single-column-layout.vue.js';
+import '../../../../components/location-provider.vue.js';
+import '../../../../components/global-x-bus.vue.js';
+import '../../../../components/snippet-callbacks.vue.js';
+import '../../../../components/items-list-injection.mixin.js';
 import { facetsXModule } from '../../x-module.js';
 import FiltersInjectionMixin from './filters-injection.mixin.js';
 

package/js/x-modules/facets/components/lists/sorted-filters.vue_rollup-plugin-vue=script.js

@@ -19,6 +19,7 @@ import '../../../../utils/html.js';
 import '../../../../utils/normalize.js';
 import '../../../../utils/number.js';
 import '../../../../utils/object.js';
+import '../../../../utils/origin.js';
 import '../../../../utils/sanitize.js';
 import '../../../../utils/storage.js';
 import '../../../../utils/string.js';
@@ -104,9 +105,6 @@ import '../../../../components/result/base-result-fallback-image.vue.js';
 import '../../../../components/result/base-result-placeholder-image.vue.js';
 import '../../../../components/scroll/scroll.mixin.js';
 import '../../../../components/scroll/base-scroll.vue.js';
-import '../../../../components/scroll/base-id-scroll.vue.js';
-import '../../../../components/scroll/base-scroll-to-top.vue.js';
-import '../../../../components/scroll/base-main-scroll.vue.js';
 import '../../../../components/suggestions/base-suggestion.vue.js';
 import '../../../../components/suggestions/base-suggestions.vue.js';
 import '../../../../components/auto-progress-bar.vue.js';
@@ -117,12 +115,15 @@ import '../../../../components/base-variable-column-grid.vue.js';
 import '../../../../components/decorators/debounce.decorators.js';
 import '../../../../components/sliding-panel.vue.js';
 import '../../../../components/items-list.vue.js';
-import '../../../../components/layouts/multi-column-max-width-layout.vue.js';
-import '../../../../components/layouts/single-column-layout.vue.js';
 import '../../../../components/decorators/store.decorators.js';
-import '../../../../components/items-list-injection.mixin.js';
 import '../../../../components/x-component.utils.js';
 import { xComponentMixin } from '../../../../components/x-component.mixin.js';
+import '../../../../components/layouts/multi-column-max-width-layout.vue.js';
+import '../../../../components/layouts/single-column-layout.vue.js';
+import '../../../../components/location-provider.vue.js';
+import '../../../../components/global-x-bus.vue.js';
+import '../../../../components/snippet-callbacks.vue.js';
+import '../../../../components/items-list-injection.mixin.js';
 import { isBooleanFilter } from '@empathyco/x-types';
 import { facetsXModule } from '../../x-module.js';
 import FiltersInjectionMixin from './filters-injection.mixin.js';

package/js/x-modules/facets/components/lists/sorted-filters.vue_rollup-plugin-vue=script.js.map

@@ -1 +1 @@
-{"version":3,"file":"sorted-filters.vue_rollup-plugin-vue=script.js","sources":["../../../../../../src/x-modules/facets/components/lists/sorted-filters.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\nimport { BooleanFilter, Filter, isBooleanFilter } from '@empathyco/x-types';\nimport { mixins } from 'vue-class-component';\nimport { Component } from 'vue-property-decorator';\nimport { CreateElement, VNode } from 'vue';\nimport { xComponentMixin, XProvide } from '../../../../components';\nimport { isArrayEmpty } from '../../../../utils';\nimport { facetsXModule } from '../../x-module';\nimport FiltersInjectionMixin from './filters-injection.mixin';\n\n/**\n * Component that sorts a list of filters and returns them using the default scoped slot.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(facetsXModule)]\n})\nexport default class SortedFilters extends mixins(FiltersInjectionMixin) {\n  /**\n   * An array of filters with the selected filters at the beginning of the list.\n   *\n   * @returns Array of filters.\n   * @internal\n   */\n  @XProvide('filters')\n  public get sortedFilters(): Filter[] {\n    if (!isArrayEmpty(this.renderedFilters) && isBooleanFilter(this.renderedFilters[0])) {\n      return ([...this.renderedFilters] as BooleanFilter[]).sort(({ selected }) => {\n        return selected ? -1 : 1;\n      });\n    }\n\n    return this.renderedFilters;\n  }\n\n  render(h: CreateElement): VNode {\n    return this.$scopedSlots.default?.({ filters: this.sortedFilters })?.[0] ?? h();\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA;;;;;AAQA;IAA2C,iCAA6B;IAAxE;;KAqBC;IAbC,sBAAW,wCAAa;;;;;;;aAAxB;YACE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,eAAe,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,EAAE;gBACnF,OAAQ,kBAAI,IAAI,CAAC,eAAe,CAAqB,CAAC,IAAI,CAAC,UAAC,EAAY;wBAAV,QAAQ,cAAA;oBACpE,OAAO,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;iBAC1B,CAAC,CAAC;aACJ;YAED,OAAO,IAAI,CAAC,eAAe,CAAC;SAC7B;;;OAAA;IAED,8BAAM,GAAN,UAAO,CAAgB;;QACrB,OAAO,MAAA,MAAA,MAAA,MAAA,IAAI,CAAC,YAAY,EAAC,OAAO,mDAAG,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,0CAAG,CAAC,CAAC,mCAAI,CAAC,EAAE,CAAC;KACjF;IAZD;QADC,QAAQ,CAAC,SAAS,CAAC;sDASnB;IAhBkB,aAAa;QAHjC,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;SACzC,CAAC;OACmB,aAAa,CAqBjC;IAAD,oBAAC;CArBD,CAA2C,MAAM,CAAC,qBAAqB,CAAC;;;;"}
+{"version":3,"file":"sorted-filters.vue_rollup-plugin-vue=script.js","sources":["../../../../../../src/x-modules/facets/components/lists/sorted-filters.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\nimport { BooleanFilter, Filter, isBooleanFilter } from '@empathyco/x-types';\nimport { mixins } from 'vue-class-component';\nimport { Component } from 'vue-property-decorator';\nimport { CreateElement, VNode } from 'vue';\nimport { xComponentMixin, XProvide } from '../../../../components';\nimport { isArrayEmpty } from '../../../../utils';\nimport { facetsXModule } from '../../x-module';\nimport FiltersInjectionMixin from './filters-injection.mixin';\n\n/**\n * Component that sorts a list of filters and returns them using the default scoped slot.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(facetsXModule)]\n})\nexport default class SortedFilters extends mixins(FiltersInjectionMixin) {\n  /**\n   * An array of filters with the selected filters at the beginning of the list.\n   *\n   * @returns Array of filters.\n   * @internal\n   */\n  @XProvide('filters')\n  public get sortedFilters(): Filter[] {\n    if (!isArrayEmpty(this.renderedFilters) && isBooleanFilter(this.renderedFilters[0])) {\n      return ([...this.renderedFilters] as BooleanFilter[]).sort(({ selected }) => {\n        return selected ? -1 : 1;\n      });\n    }\n\n    return this.renderedFilters;\n  }\n\n  render(h: CreateElement): VNode {\n    return this.$scopedSlots.default?.({ filters: this.sortedFilters })?.[0] ?? h();\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA;;;;;AAQA;IAA2C,iCAA6B;IAAxE;;KAqBC;IAbC,sBAAW,wCAAa;;;;;;;aAAxB;YACE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,eAAe,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,EAAE;gBACnF,OAAQ,kBAAI,IAAI,CAAC,eAAe,CAAqB,CAAC,IAAI,CAAC,UAAC,EAAY;wBAAV,QAAQ,cAAA;oBACpE,OAAO,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;iBAC1B,CAAC,CAAC;aACJ;YAED,OAAO,IAAI,CAAC,eAAe,CAAC;SAC7B;;;OAAA;IAED,8BAAM,GAAN,UAAO,CAAgB;;QACrB,OAAO,MAAA,MAAA,MAAA,MAAA,IAAI,CAAC,YAAY,EAAC,OAAO,mDAAG,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,0CAAG,CAAC,CAAC,mCAAI,CAAC,EAAE,CAAC;KACjF;IAZD;QADC,QAAQ,CAAC,SAAS,CAAC;sDASnB;IAhBkB,aAAa;QAHjC,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;SACzC,CAAC;OACmB,aAAa,CAqBjC;IAAD,oBAAC;CArBD,CAA2C,MAAM,CAAC,qBAAqB,CAAC;;;;"}

package/js/x-modules/facets/service/facets.service.js

@@ -11,6 +11,7 @@ import '../../../utils/html.js';
 import '../../../utils/normalize.js';
 import '../../../utils/number.js';
 import '../../../utils/object.js';
+import '../../../utils/origin.js';
 import '../../../utils/sanitize.js';
 import '../../../utils/storage.js';
 import '../../../utils/string.js';

package/js/x-modules/facets/service/facets.service.js.map

@@ -1 +1 @@
-{"version":3,"file":"facets.service.js","sources":["../../../../../src/x-modules/facets/service/facets.service.ts"],"sourcesContent":["import { Facet, Filter, isFacetFilter } from '@empathyco/x-types';\nimport { Store } from 'vuex';\nimport { XPlugin } from '../../../plugins/index';\nimport { RootXStoreState } from '../../../store/index';\nimport { arrayToObject, groupItemsBy, isArrayEmpty } from '../../../utils/index';\nimport { FilterEntityFactory } from '../entities/filter-entity.factory';\nimport { FilterEntity } from '../entities/types';\nimport { FacetGroupEntry, FacetsGetters } from '../store/types';\nimport { FacetsGroup, FacetsService } from './types';\n\n/**\n * Default implementation for the {@link FacetsService}.\n *\n * @public\n */\nexport class DefaultFacetsService implements FacetsService {\n  /**\n   * Global instance of the {@link FacetsService}.\n   */\n  public static instance: FacetsService = new DefaultFacetsService();\n\n  public constructor(\n    protected filterEntityFactory: FilterEntityFactory = FilterEntityFactory.instance\n  ) {}\n\n  /**\n   * The {@link https://vuex.vuejs.org/ | Vuex} store to use in the service.\n   *\n   * @returns The store.\n   * @internal\n   */\n  protected get store(): Store<RootXStoreState> {\n    return XPlugin.store;\n  }\n\n  setFacets(facetsGroup: FacetsGroup): void {\n    const newFilters = this.updateStore(facetsGroup);\n    /* Ensures that filters are selected with valid values. For example, you can't set a single\n     select facet with 2 or more selected filters */\n    this.updateFiltersSelectedState(newFilters);\n  }\n\n  updateFacets(facetsGroup: FacetsGroup): void {\n    const selectedFilters = this.getSelectedFilters();\n    const newFilters = this.updateStore(facetsGroup);\n    this.updateFiltersSelectedState(newFilters, selectedFilters);\n  }\n\n  clearFilters(facetIds?: Array<Facet['id']>): void {\n    this.getSelectedFilters()\n      .filter(filter => !facetIds || (isFacetFilter(filter) && facetIds.includes(filter.facetId)))\n      .forEach(this.deselect.bind(this));\n  }\n\n  deselect(filter: Filter): void {\n    this.getFilterEntity(filter).deselect(filter);\n  }\n\n  select(filterOrFilters: Filter | Filter[]): void {\n    const filters = Array.isArray(filterOrFilters) ? filterOrFilters : [filterOrFilters];\n    filters.forEach(filter => this.getFilterEntity(filter).select(filter));\n  }\n\n  toggle(filter: Filter): void {\n    if (filter.selected) {\n      this.deselect(filter);\n    } else {\n      this.select(filter);\n    }\n  }\n\n  /**\n   * Creates an entity from a filter DTO.\n   *\n   * @param filter - The filter to create an entity from.\n   * @returns The filter entity.\n   * @internal\n   */\n  protected getFilterEntity(filter: Filter): FilterEntity {\n    return this.filterEntityFactory.getFilterEntity(this.store, filter);\n  }\n\n  /**\n   * Sets in the store the Facets, the Filters and the FacetsGroup, without applying any logic\n   * to the selected state.\n   *\n   * @param facetsGroup - The {@link FacetsGroup} to set into the store state.\n   * @returns An array with the new filters.\n   * @internal\n   */\n  protected updateStore(facetsGroup: FacetsGroup): Filter[] {\n    this.removeGroupFacets(facetsGroup.id);\n    this.removeGroupFilters(facetsGroup.id);\n    facetsGroup.facets.forEach(facet => {\n      this.setFacetGroup({ facetId: facet.id, groupId: facetsGroup.id });\n      this.setFacet(facet);\n    });\n    const newFilters = facetsGroup.facets.flatMap(facet => facet.filters);\n    this.setFilters(newFilters);\n    return newFilters;\n  }\n\n  /**\n   * Retrieves the selected filters from the store.\n   *\n   * @returns The list of selected filters of the store.\n   * @internal\n   */\n  protected getSelectedFilters(): FacetsGetters['selectedFilters'] {\n    return this.store.getters['x/facets/selectedFilters'];\n  }\n\n  /**\n   * Changes the filters selection state to match the store.\n   *\n   * @param newFilters - The list of filters to save.\n   * @param previousFilters - (Optional) The list of old filters, used to set the `newFilters`\n   * selected state.\n   */\n  protected updateFiltersSelectedState(newFilters: Filter[], previousFilters?: Filter[]): void {\n    if (!isArrayEmpty(newFilters)) {\n      const newStateFiltersMap = arrayToObject(previousFilters ?? newFilters, 'id');\n      newFilters.forEach(filter => {\n        const filterEntity = this.getFilterEntity(filter);\n        if (newStateFiltersMap[filter.id]?.selected) {\n          filterEntity.select(filter);\n        } else {\n          filterEntity.deselect(filter);\n        }\n      });\n    }\n  }\n\n  /**\n   * Removes the filters that belong to the given group.\n   *\n   * @param groupId - The id of the group from whom remove the filters that are in the store.\n   *\n   * @returns The removed filters.\n   *\n   * @internal\n   */\n  protected removeGroupFilters(groupId: FacetsGroup['id']): Filter[] {\n    const filtersToRemove =\n      groupItemsBy(Object.values(this.store.state.x.facets.filters), filter =>\n        isFacetFilter(filter)\n          ? this.store.state.x.facets.groups[filter.facetId]\n          : '__unknown-group__'\n      )[groupId] ?? [];\n    this.removeFilters(filtersToRemove);\n    return filtersToRemove;\n  }\n  /**\n   * Removes the facets that belong to the given group.\n   *\n   * @param groupId - The id of the group from whom remove the facets that are in the store.\n   * @returns The removed facets.\n   * @internal\n   */\n  protected removeGroupFacets(groupId: FacetsGroup['id']): Omit<Facet, 'filters'>[] {\n    const facetsToRemove = Object.values(this.store.state.x.facets.facets).filter(\n      facet => this.store.state.x.facets.groups[facet.id] === groupId\n    );\n    facetsToRemove.forEach(this.removeFacet.bind(this));\n    return facetsToRemove;\n  }\n\n  /**\n   * Sets the group that a facet belongs to.\n   *\n   * @param facetGroup - The id of the facet, and the group it belongs to.\n   * @internal\n   */\n  protected setFacetGroup(facetGroup: FacetGroupEntry): void {\n    this.store.commit('x/facets/setFacetGroup', facetGroup);\n  }\n\n  /**\n   * Sets the Facet to the store facets record.\n   *\n   * @param facet - The facet to store.\n   *\n   * @internal\n   */\n  protected setFacet({ filters, ...restFacet }: Facet): void {\n    this.store.commit('x/facets/setFacet', restFacet);\n  }\n\n  /**\n   * Removes a facet from the store.\n   *\n   * @param facet - The facet to remove.\n   * @internal\n   */\n  protected removeFacet(facet: Omit<Facet, 'filters'>): void {\n    this.store.commit('x/facets/removeFacet', facet);\n  }\n\n  /**\n   * Saves a list of filters to the store without any state change logic applied.\n   *\n   * @param filters - The filters to save.\n   * @internal\n   */\n  protected setFilters(filters: Filter[]): void {\n    this.store.commit('x/facets/setFilters', filters);\n  }\n\n  /**\n   * Removes a list of filters from the store.\n   *\n   * @param filters - The filters to remove.\n   * @internal\n   */\n  protected removeFilters(filters: Filter[]): void {\n    this.store.commit('x/facets/removeFilters', filters);\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"facets.service.js","sources":["../../../../../src/x-modules/facets/service/facets.service.ts"],"sourcesContent":["import { Facet, Filter, isFacetFilter } from '@empathyco/x-types';\nimport { Store } from 'vuex';\nimport { XPlugin } from '../../../plugins/index';\nimport { RootXStoreState } from '../../../store/index';\nimport { arrayToObject, groupItemsBy, isArrayEmpty } from '../../../utils/index';\nimport { FilterEntityFactory } from '../entities/filter-entity.factory';\nimport { FilterEntity } from '../entities/types';\nimport { FacetGroupEntry, FacetsGetters } from '../store/types';\nimport { FacetsGroup, FacetsService } from './types';\n\n/**\n * Default implementation for the {@link FacetsService}.\n *\n * @public\n */\nexport class DefaultFacetsService implements FacetsService {\n  /**\n   * Global instance of the {@link FacetsService}.\n   */\n  public static instance: FacetsService = new DefaultFacetsService();\n\n  public constructor(\n    protected filterEntityFactory: FilterEntityFactory = FilterEntityFactory.instance\n  ) {}\n\n  /**\n   * The {@link https://vuex.vuejs.org/ | Vuex} store to use in the service.\n   *\n   * @returns The store.\n   * @internal\n   */\n  protected get store(): Store<RootXStoreState> {\n    return XPlugin.store;\n  }\n\n  setFacets(facetsGroup: FacetsGroup): void {\n    const newFilters = this.updateStore(facetsGroup);\n    /* Ensures that filters are selected with valid values. For example, you can't set a single\n     select facet with 2 or more selected filters */\n    this.updateFiltersSelectedState(newFilters);\n  }\n\n  updateFacets(facetsGroup: FacetsGroup): void {\n    const selectedFilters = this.getSelectedFilters();\n    const newFilters = this.updateStore(facetsGroup);\n    this.updateFiltersSelectedState(newFilters, selectedFilters);\n  }\n\n  clearFilters(facetIds?: Array<Facet['id']>): void {\n    this.getSelectedFilters()\n      .filter(filter => !facetIds || (isFacetFilter(filter) && facetIds.includes(filter.facetId)))\n      .forEach(this.deselect.bind(this));\n  }\n\n  deselect(filter: Filter): void {\n    this.getFilterEntity(filter).deselect(filter);\n  }\n\n  select(filterOrFilters: Filter | Filter[]): void {\n    const filters = Array.isArray(filterOrFilters) ? filterOrFilters : [filterOrFilters];\n    filters.forEach(filter => this.getFilterEntity(filter).select(filter));\n  }\n\n  toggle(filter: Filter): void {\n    if (filter.selected) {\n      this.deselect(filter);\n    } else {\n      this.select(filter);\n    }\n  }\n\n  /**\n   * Creates an entity from a filter DTO.\n   *\n   * @param filter - The filter to create an entity from.\n   * @returns The filter entity.\n   * @internal\n   */\n  protected getFilterEntity(filter: Filter): FilterEntity {\n    return this.filterEntityFactory.getFilterEntity(this.store, filter);\n  }\n\n  /**\n   * Sets in the store the Facets, the Filters and the FacetsGroup, without applying any logic\n   * to the selected state.\n   *\n   * @param facetsGroup - The {@link FacetsGroup} to set into the store state.\n   * @returns An array with the new filters.\n   * @internal\n   */\n  protected updateStore(facetsGroup: FacetsGroup): Filter[] {\n    this.removeGroupFacets(facetsGroup.id);\n    this.removeGroupFilters(facetsGroup.id);\n    facetsGroup.facets.forEach(facet => {\n      this.setFacetGroup({ facetId: facet.id, groupId: facetsGroup.id });\n      this.setFacet(facet);\n    });\n    const newFilters = facetsGroup.facets.flatMap(facet => facet.filters);\n    this.setFilters(newFilters);\n    return newFilters;\n  }\n\n  /**\n   * Retrieves the selected filters from the store.\n   *\n   * @returns The list of selected filters of the store.\n   * @internal\n   */\n  protected getSelectedFilters(): FacetsGetters['selectedFilters'] {\n    return this.store.getters['x/facets/selectedFilters'];\n  }\n\n  /**\n   * Changes the filters selection state to match the store.\n   *\n   * @param newFilters - The list of filters to save.\n   * @param previousFilters - (Optional) The list of old filters, used to set the `newFilters`\n   * selected state.\n   */\n  protected updateFiltersSelectedState(newFilters: Filter[], previousFilters?: Filter[]): void {\n    if (!isArrayEmpty(newFilters)) {\n      const newStateFiltersMap = arrayToObject(previousFilters ?? newFilters, 'id');\n      newFilters.forEach(filter => {\n        const filterEntity = this.getFilterEntity(filter);\n        if (newStateFiltersMap[filter.id]?.selected) {\n          filterEntity.select(filter);\n        } else {\n          filterEntity.deselect(filter);\n        }\n      });\n    }\n  }\n\n  /**\n   * Removes the filters that belong to the given group.\n   *\n   * @param groupId - The id of the group from whom remove the filters that are in the store.\n   *\n   * @returns The removed filters.\n   *\n   * @internal\n   */\n  protected removeGroupFilters(groupId: FacetsGroup['id']): Filter[] {\n    const filtersToRemove =\n      groupItemsBy(Object.values(this.store.state.x.facets.filters), filter =>\n        isFacetFilter(filter)\n          ? this.store.state.x.facets.groups[filter.facetId]\n          : '__unknown-group__'\n      )[groupId] ?? [];\n    this.removeFilters(filtersToRemove);\n    return filtersToRemove;\n  }\n  /**\n   * Removes the facets that belong to the given group.\n   *\n   * @param groupId - The id of the group from whom remove the facets that are in the store.\n   * @returns The removed facets.\n   * @internal\n   */\n  protected removeGroupFacets(groupId: FacetsGroup['id']): Omit<Facet, 'filters'>[] {\n    const facetsToRemove = Object.values(this.store.state.x.facets.facets).filter(\n      facet => this.store.state.x.facets.groups[facet.id] === groupId\n    );\n    facetsToRemove.forEach(this.removeFacet.bind(this));\n    return facetsToRemove;\n  }\n\n  /**\n   * Sets the group that a facet belongs to.\n   *\n   * @param facetGroup - The id of the facet, and the group it belongs to.\n   * @internal\n   */\n  protected setFacetGroup(facetGroup: FacetGroupEntry): void {\n    this.store.commit('x/facets/setFacetGroup', facetGroup);\n  }\n\n  /**\n   * Sets the Facet to the store facets record.\n   *\n   * @param facet - The facet to store.\n   *\n   * @internal\n   */\n  protected setFacet({ filters, ...restFacet }: Facet): void {\n    this.store.commit('x/facets/setFacet', restFacet);\n  }\n\n  /**\n   * Removes a facet from the store.\n   *\n   * @param facet - The facet to remove.\n   * @internal\n   */\n  protected removeFacet(facet: Omit<Facet, 'filters'>): void {\n    this.store.commit('x/facets/removeFacet', facet);\n  }\n\n  /**\n   * Saves a list of filters to the store without any state change logic applied.\n   *\n   * @param filters - The filters to save.\n   * @internal\n   */\n  protected setFilters(filters: Filter[]): void {\n    this.store.commit('x/facets/setFilters', filters);\n  }\n\n  /**\n   * Removes a list of filters from the store.\n   *\n   * @param filters - The filters to remove.\n   * @internal\n   */\n  protected removeFilters(filters: Filter[]): void {\n    this.store.commit('x/facets/removeFilters', filters);\n  }\n}\n"],"names":[],"mappings":"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"}

package/js/x-modules/history-queries/components/clear-history-queries.vue.js

@@ -5,7 +5,7 @@ import script from './clear-history-queries.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -17,14 +17,13 @@ var __vue_render__ = function() {
       attrs: {
         disabled: _vm.isHistoryQueriesEmpty,
         events: _vm.clearHistoryQueriesEvents,
-        "data-test": "clear-history-queries"
-      }
+        "data-test": "clear-history-queries",
+      },
     },
     [
-      _vm._t("default", function() {
+      _vm._t("default", function () {
         return [_vm._v("✕")]
-      })
-    ],
+      }) ],
     2
   )
 };

package/js/x-modules/history-queries/components/clear-history-queries.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"clear-history-queries.vue.js","sources":["../../../../../src/x-modules/history-queries/components/clear-history-queries.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    class=\"x-button x-clear-history-queries\"\n    :class=\"dynamicClasses\"\n    :disabled=\"isHistoryQueriesEmpty\"\n    :events=\"clearHistoryQueriesEvents\"\n    data-test=\"clear-history-queries\"\n  >\n    <!-- @slot (Required) Button content with a message, an icon or both -->\n    <slot>✕</slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import { HistoryQuery } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import { State } from '../../../components/decorators/store.decorators';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { historyQueriesXModule } from '../x-module';\n\n  /**\n   * A button that when is pressed, emits the\n   * {@link HistoryQueriesXEvents.UserPressedClearHistoryQueries} event, expressing the user\n   * intention to clear the whole history of queries.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseEventButton },\n    mixins: [xComponentMixin(historyQueriesXModule)]\n  })\n  export default class ClearHistoryQueries extends Vue {\n    /**\n     * The whole history queries.\n     *\n     * @internal\n     */\n    @State('historyQueries', 'historyQueries')\n    public historyQueries!: HistoryQuery[];\n\n    /**\n     * Returns if the array of history queries is empty.\n     *\n     * @returns `true` if the {@link historyQueries} array is empty, `false` otherwise.\n     * @internal\n     */\n    protected get isHistoryQueriesEmpty(): boolean {\n      return this.historyQueries.length === 0;\n    }\n\n    /**\n     * Dynamic CSS classes to add to the root element of this component.\n     *\n     * @returns A booleans dictionary where each key is the class name to add, and the boolean value\n     * tells if it should be added or not.\n     * @internal\n     */\n    protected get dynamicClasses(): VueCSSClasses {\n      return {\n        'x-clear-history-queries--is-empty': this.isHistoryQueriesEmpty\n      };\n    }\n\n    /**\n     * The list of events that are going to be emitted when the button is pressed.\n     *\n     * @internal\n     */\n    protected clearHistoryQueriesEvents: Partial<XEventsTypes> = {\n      UserPressedClearHistoryQueries: undefined\n    };\n  }\n</script>\n\n<docs lang=\"mdx\">\n# Examples\n\n## Basic example\n\nThe component exposes a single default slot, where you can add icons or text.\n\n```vue\n<ClearHistoryQueries>\n  <img class=\"x-history-query__icon\" src=\"./my-icon.svg\"/>\n</ClearHistoryQueries>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserPressedClearHistoryQueries`: the event is emitted after the user clicks the button.\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"clear-history-queries.vue.js","sources":["../../../../../src/x-modules/history-queries/components/clear-history-queries.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    class=\"x-button x-clear-history-queries\"\n    :class=\"dynamicClasses\"\n    :disabled=\"isHistoryQueriesEmpty\"\n    :events=\"clearHistoryQueriesEvents\"\n    data-test=\"clear-history-queries\"\n  >\n    <!-- @slot (Required) Button content with a message, an icon or both -->\n    <slot>✕</slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import { HistoryQuery } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import { State } from '../../../components/decorators/store.decorators';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { historyQueriesXModule } from '../x-module';\n\n  /**\n   * A button that when is pressed, emits the\n   * {@link HistoryQueriesXEvents.UserPressedClearHistoryQueries} event, expressing the user\n   * intention to clear the whole history of queries.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseEventButton },\n    mixins: [xComponentMixin(historyQueriesXModule)]\n  })\n  export default class ClearHistoryQueries extends Vue {\n    /**\n     * The whole history queries.\n     *\n     * @internal\n     */\n    @State('historyQueries', 'historyQueries')\n    public historyQueries!: HistoryQuery[];\n\n    /**\n     * Returns if the array of history queries is empty.\n     *\n     * @returns `true` if the {@link historyQueries} array is empty, `false` otherwise.\n     * @internal\n     */\n    protected get isHistoryQueriesEmpty(): boolean {\n      return this.historyQueries.length === 0;\n    }\n\n    /**\n     * Dynamic CSS classes to add to the root element of this component.\n     *\n     * @returns A booleans dictionary where each key is the class name to add, and the boolean value\n     * tells if it should be added or not.\n     * @internal\n     */\n    protected get dynamicClasses(): VueCSSClasses {\n      return {\n        'x-clear-history-queries--is-empty': this.isHistoryQueriesEmpty\n      };\n    }\n\n    /**\n     * The list of events that are going to be emitted when the button is pressed.\n     *\n     * @internal\n     */\n    protected clearHistoryQueriesEvents: Partial<XEventsTypes> = {\n      UserPressedClearHistoryQueries: undefined\n    };\n  }\n</script>\n\n<docs lang=\"mdx\">\n# Examples\n\n## Basic example\n\nThe component exposes a single default slot, where you can add icons or text.\n\n```vue\n<ClearHistoryQueries>\n  <img class=\"x-history-query__icon\" src=\"./my-icon.svg\"/>\n</ClearHistoryQueries>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserPressedClearHistoryQueries`: the event is emitted after the user clicks the button.\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}