@empathyco/x-components 3.0.0-alpha.31 → 3.0.0-alpha.35

package/js/x-modules/extra-params/components/snippet-config-extra-params.vue_rollup-plugin-vue=script.js

@@ -25,7 +25,7 @@ import '../../../utils/sanitize.js';
 import '../../../utils/storage.js';
 import '../../../utils/string.js';
 import '../../../utils/throttle.js';
-import '../../../components/staggering-transition-group.vue.js';
+import '../../../components/animations/staggering-transition-group.vue.js';
 import '../../../components/animations/staggered-fade-and-slide.vue.js';
 import '../../../components/animations/translate-from-left.vue.js';
 import '../../../components/animations/translate-from-right.vue.js';
@@ -80,21 +80,30 @@ import '../../../components/icons/plus.vue.js';
 import '../../../components/icons/search.vue.js';
 import '../../../components/icons/show.vue.js';
 import '../../../components/icons/search-tiny.vue.js';
+import '../../../components/icons/tag.vue.js';
 import '../../../components/icons/trash-open.vue.js';
 import '../../../components/icons/trash.vue.js';
 import '../../../components/icons/trending-tiny.vue.js';
 import '../../../components/icons/trending.vue.js';
 import '../../../components/icons/user.vue.js';
-import '../../../components/modals/base-events-modal-close.vue.js';
+import '../../../components/decorators/store.decorators.js';
+import '../../../components/x-component.utils.js';
+import { xComponentMixin } from '../../../components/x-component.mixin.js';
 import '../../../components/modals/base-modal.vue.js';
+import '../../../components/modals/base-id-modal.vue.js';
+import '../../../components/scroll/scroll.mixin.js';
+import '../../../components/scroll/base-scroll.vue.js';
+import '../../../components/layouts/fixed-header-and-asides-layout.vue.js';
+import '../../../components/panels/base-toggle-panel.vue.js';
+import '../../../components/panels/base-id-toggle-panel.vue.js';
+import '../../../components/layouts/multi-column-max-width-layout.vue.js';
+import '../../../components/layouts/single-column-layout.vue.js';
+import '../../../components/modals/base-events-modal-close.vue.js';
 import '../../../components/modals/base-events-modal.vue.js';
 import '../../../components/modals/base-events-modal-open.vue.js';
-import '../../../components/modals/base-id-modal.vue.js';
 import '../../../components/modals/base-id-modal-close.vue.js';
 import '../../../components/modals/base-id-modal-open.vue.js';
-import '../../../components/panels/base-toggle-panel.vue.js';
 import '../../../components/panels/base-header-toggle-panel.vue.js';
-import '../../../components/panels/base-id-toggle-panel.vue.js';
 import '../../../components/panels/base-id-toggle-panel-button.vue.js';
 import '../../../components/result/base-result-add-to-cart.vue.js';
 import '../../../components/result/base-result-current-price.vue.js';
@@ -103,8 +112,6 @@ import '../../../components/result/base-result-link.vue.js';
 import '../../../components/result/base-result-previous-price.vue.js';
 import '../../../components/result/base-result-fallback-image.vue.js';
 import '../../../components/result/base-result-placeholder-image.vue.js';
-import '../../../components/scroll/scroll.mixin.js';
-import '../../../components/scroll/base-scroll.vue.js';
 import '../../../components/suggestions/base-suggestion.vue.js';
 import '../../../components/suggestions/base-suggestions.vue.js';
 import '../../../components/auto-progress-bar.vue.js';
@@ -115,12 +122,9 @@ 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/decorators/store.decorators.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 { extraParamsXModule } from '../x-module.js';
 import ExtraParams from './extra-params.vue.js';
@@ -144,6 +148,12 @@ var SnippetConfigExtraParams = /** @class */ (function (_super) {
          * @internal
          */
         _this.extraParams = {};
+        /**
+         * Collection of properties from the snippet config not allowed to be sent as extra params.
+         *
+         * @internal
+         */
+        _this.notAllowedExtraParams = ['callbacks'];
         return _this;
     }
     /**
@@ -157,6 +167,9 @@ var SnippetConfigExtraParams = /** @class */ (function (_super) {
         var _this = this;
         var instance = _a.instance, scope = _a.scope, lang = _a.lang, searchLang = _a.searchLang, consent = _a.consent, documentDirection = _a.documentDirection, currency = _a.currency, snippetExtraParams = __rest(_a, ["instance", "scope", "lang", "searchLang", "consent", "documentDirection", "currency"]);
         forEach(snippetExtraParams, function (name, value) {
+            if (_this.notAllowedExtraParams.includes(name)) {
+                return;
+            }
             _this.$set(_this.extraParams, name, value);
         });
     };

package/js/x-modules/extra-params/components/snippet-config-extra-params.vue_rollup-plugin-vue=script.js.map

@@ -1 +1 @@
-{"version":3,"file":"snippet-config-extra-params.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/extra-params/components/snippet-config-extra-params.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Watch, Inject } from 'vue-property-decorator';\nimport { xComponentMixin } from '../../../components';\nimport { Dictionary, forEach } from '../../../utils';\nimport { SnippetConfig } from '../../../x-installer';\nimport { extraParamsXModule } from '../x-module';\nimport ExtraParams from './extra-params.vue';\n\n/**\n * Extracts the extra parameters from the {@link SnippetConfig} and syncs it with the request\n * objects of every x-module.\n *\n * @public\n */\n@Component({\n  components: { ExtraParams },\n  mixins: [xComponentMixin(extraParamsXModule)]\n})\nexport default class SnippetConfigExtraParams extends Vue {\n  /**\n   * It injects {@link SnippetConfig} provided by an ancestor as snippetConfig.\n   *\n   * @internal\n   */\n  @Inject('snippetConfig')\n  public snippetConfig!: SnippetConfig;\n\n  /**\n   * Custom object containing the extra params from the snippet config.\n   *\n   * @remarks This object keeps manually the desired snippet config properties to avoid\n   * unnecessary re-renders.\n   *\n   * @internal\n   */\n  protected extraParams: Dictionary<unknown> = {};\n\n  /**\n   * Updates the extraParams object when the snippet config changes.\n   *\n   * @param snippetConfig - The new snippet config.\n   *\n   * @internal\n   */\n  @Watch('snippetConfig', { deep: true, immediate: true })\n  syncExtraParams({\n    instance,\n    scope,\n    lang,\n    searchLang,\n    consent,\n    documentDirection,\n    currency,\n    ...snippetExtraParams\n  }: SnippetConfig): void {\n    forEach(snippetExtraParams, (name, value) => {\n      this.$set(this.extraParams, name, value);\n    });\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA;;;;;;AAUA;IAAsD,4CAAG;IAAzD;QAAA,qEAyCC;;;;;;;;;QAxBW,iBAAW,GAAwB,EAAE,CAAC;;KAwBjD;;;;;;;;IAdC,kDAAe,GAAf,UAAgB,EASA;QAVhB,iBAcC;QAZC,IAAA,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,UAAU,gBAAA,EACV,OAAO,aAAA,EACP,iBAAiB,uBAAA,EACjB,QAAQ,cAAA,EACL,kBAAkB,cARP,uFASf,CADsB;QAErB,OAAO,CAAC,kBAAkB,EAAE,UAAC,IAAI,EAAE,KAAK;YACtC,KAAI,CAAC,IAAI,CAAC,KAAI,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;SAC1C,CAAC,CAAC;KACJ;IAjCD;QADC,MAAM,CAAC,eAAe,CAAC;mEACa;IAoBrC;QADC,KAAK,CAAC,eAAe,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;mEAcvD;IAxCkB,wBAAwB;QAJ5C,SAAS,CAAC;YACT,UAAU,EAAE,EAAE,WAAW,aAAA,EAAE;YAC3B,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;SAC9C,CAAC;OACmB,wBAAwB,CAyC5C;IAAD,+BAAC;CAAA,CAzCqD,GAAG;;;;"}
+{"version":3,"file":"snippet-config-extra-params.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/extra-params/components/snippet-config-extra-params.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Watch, Inject } from 'vue-property-decorator';\nimport { xComponentMixin } from '../../../components';\nimport { Dictionary, forEach } from '../../../utils';\nimport { SnippetConfig } from '../../../x-installer';\nimport { extraParamsXModule } from '../x-module';\nimport ExtraParams from './extra-params.vue';\n\n/**\n * Extracts the extra parameters from the {@link SnippetConfig} and syncs it with the request\n * objects of every x-module.\n *\n * @public\n */\n@Component({\n  components: { ExtraParams },\n  mixins: [xComponentMixin(extraParamsXModule)]\n})\nexport default class SnippetConfigExtraParams extends Vue {\n  /**\n   * It injects {@link SnippetConfig} provided by an ancestor as snippetConfig.\n   *\n   * @internal\n   */\n  @Inject('snippetConfig')\n  public snippetConfig!: SnippetConfig;\n\n  /**\n   * Custom object containing the extra params from the snippet config.\n   *\n   * @remarks This object keeps manually the desired snippet config properties to avoid\n   * unnecessary re-renders.\n   *\n   * @internal\n   */\n  protected extraParams: Dictionary<unknown> = {};\n\n  /**\n   * Collection of properties from the snippet config not allowed to be sent as extra params.\n   *\n   * @internal\n   */\n  protected notAllowedExtraParams: Array<keyof SnippetConfig> = ['callbacks'];\n\n  /**\n   * Updates the extraParams object when the snippet config changes.\n   *\n   * @param snippetConfig - The new snippet config.\n   *\n   * @internal\n   */\n  @Watch('snippetConfig', { deep: true, immediate: true })\n  syncExtraParams({\n    instance,\n    scope,\n    lang,\n    searchLang,\n    consent,\n    documentDirection,\n    currency,\n    ...snippetExtraParams\n  }: SnippetConfig): void {\n    forEach(snippetExtraParams, (name, value) => {\n      if (this.notAllowedExtraParams.includes(name)) {\n        return;\n      }\n      this.$set(this.extraParams, name, value);\n    });\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA;;;;;;AAUA;IAAsD,4CAAG;IAAzD;QAAA,qEAmDC;;;;;;;;;QAlCW,iBAAW,GAAwB,EAAE,CAAC;;;;;;QAOtC,2BAAqB,GAA+B,CAAC,WAAW,CAAC,CAAC;;KA2B7E;;;;;;;;IAjBC,kDAAe,GAAf,UAAgB,EASA;QAVhB,iBAiBC;QAfC,IAAA,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,UAAU,gBAAA,EACV,OAAO,aAAA,EACP,iBAAiB,uBAAA,EACjB,QAAQ,cAAA,EACL,kBAAkB,cARP,uFASf,CADsB;QAErB,OAAO,CAAC,kBAAkB,EAAE,UAAC,IAAI,EAAE,KAAK;YACtC,IAAI,KAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;gBAC7C,OAAO;aACR;YACD,KAAI,CAAC,IAAI,CAAC,KAAI,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;SAC1C,CAAC,CAAC;KACJ;IA3CD;QADC,MAAM,CAAC,eAAe,CAAC;mEACa;IA2BrC;QADC,KAAK,CAAC,eAAe,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;mEAiBvD;IAlDkB,wBAAwB;QAJ5C,SAAS,CAAC;YACT,UAAU,EAAE,EAAE,WAAW,aAAA,EAAE;YAC3B,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;SAC9C,CAAC;OACmB,wBAAwB,CAmD5C;IAAD,+BAAC;CAAA,CAnDqD,GAAG;;;;"}

package/js/x-modules/facets/components/clear-filters.vue.js

@@ -5,7 +5,7 @@ import script from './clear-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;
@@ -18,24 +18,22 @@ var __vue_render__ = function() {
           attrs: {
             "data-test": "clear-filters",
             disabled: !_vm.areThereSelectedFilters,
-            events: _vm.events
-          }
+            events: _vm.events,
+          },
         },
         [
           _vm._t(
             "default",
-            function() {
+            function () {
               return [
                 _vm._v(
                   "\n    Clear Filters (" +
                     _vm._s(_vm.facetsSelectedFilters.length) +
                     ")\n  "
-                )
-              ]
+                ) ]
             },
             { selectedFilters: _vm.facetsSelectedFilters }
-          )
-        ],
+          ) ],
         2
       )
     : _vm._e()

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

@@ -1 +1 @@
-{"version":3,"file":"clear-filters.vue.js","sources":["../../../../../src/x-modules/facets/components/clear-filters.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    v-if=\"show\"\n    class=\"x-button x-clear-filters\"\n    data-test=\"clear-filters\"\n    :disabled=\"!areThereSelectedFilters\"\n    :events=\"events\"\n    :class=\"cssClasses\"\n  >\n    <slot :selectedFilters=\"facetsSelectedFilters\">\n      Clear Filters ({{ facetsSelectedFilters.length }})\n    </slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import { Facet, Filter, isFacetFilter } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { Getter, xComponentMixin } from '../../../components';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { VueCSSClasses } from '../../../utils';\n  import { XEventsTypes } from '../../../wiring';\n  import { facetsXModule } from '../x-module';\n\n  /**\n   * Renders a simple button, emitting the needed events when clicked.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseEventButton },\n    mixins: [xComponentMixin(facetsXModule)]\n  })\n  export default class ClearFilters extends Vue {\n    /**\n     * It handles if the ClearFilters button is always visible no matter if there are not\n     * filters selected. If false, the ClearFilters button is not visible whether\n     * there are no filters selected.\n     *\n     * @public\n     */\n    @Prop({ default: false })\n    public alwaysVisible!: boolean;\n\n    /**\n     * Array of facets ids that will be passed to event like payload.\n     *\n     * @public\n     */\n    @Prop()\n    public facetsIds?: Array<Facet['id']>;\n\n    /**\n     * Get the selected filters from store.\n     *\n     * @internal\n     */\n    @Getter('facets', 'selectedFilters')\n    public allSelectedFilters!: Filter[];\n\n    /**\n     * If alwaysVisible prop is true, ClearAllFilters button is always shown, but disabled\n     * if there are no filters selected.\n     * If alwaysVisible prop is false, ClearAllFilters button is shown whether there\n     * are some filter selected.\n     *\n     * @returns True if alwaysVisible is true or in the opposite case true or false depends\n     * on if there are selected filters or not.\n     *\n     * @internal\n     */\n    protected get show(): boolean {\n      return this.alwaysVisible || this.areThereSelectedFilters;\n    }\n\n    /**\n     * Get selected filters.\n     * If there are facets ids, get selected filters whose facet id match with some of facets ids.\n     * If there aren't facets ids, get selected filters.\n     *\n     * @returns Array of selected filters depends on there are facets ids or not.\n     * @internal\n     */\n    protected get facetsSelectedFilters(): Filter[] {\n      if (this.facetsIds) {\n        return this.allSelectedFilters.filter(\n          filter => isFacetFilter(filter) && this.facetsIds!.includes(filter.facetId)\n        );\n      } else {\n        return this.allSelectedFilters;\n      }\n    }\n\n    /**\n     * Check if there are selected filters.\n     *\n     * @returns True or false depends on if there are facets ids and if there are selected filters.\n     * @internal\n     */\n    protected get areThereSelectedFilters(): boolean {\n      return !!this.facetsSelectedFilters.length;\n    }\n\n    /**\n     * The events that will be emitted when the button clear filters is clicked.\n     *\n     * @returns The events to be emitted when the button clear filters is clicked.\n     * @internal\n     */\n    protected get events(): Partial<XEventsTypes> {\n      return this.facetsIds\n        ? {\n            UserClickedClearAllFilters: this.facetsIds\n          }\n        : {\n            UserClickedClearAllFilters: undefined\n          };\n    }\n\n    /**\n     * Dynamic CSS classes to apply to the component.\n     *\n     * @returns The dynamic CSS classes to apply to the component.\n     * @internal\n     */\n    protected get cssClasses(): VueCSSClasses {\n      return {\n        'x-clear-filters--has-not-selected-filters': !this.areThereSelectedFilters,\n        'x-clear-filters--has-selected-filters': this.areThereSelectedFilters\n      };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n# Examples\n\nThis component renders a button, which on clicked emits the `UserClickedClearAllFilters` or\n`UserClickedClearAllFilters` event.\n\n## Basic usage\n\n```vue\n<ClearFilters />\n```\n\n## Customizing its contents\n\nIn this example, show the custom message in button.\n\n```vue\n<ClearFilters v-slot=\"{ selectedFilters }\">\n  Delete {{ selectedFilters.length }} selected\n</ClearFilters>\n```\n\nIn this example, show the custom message in button with always visible a true and list of facets\nids.\n\n```vue\n<ClearFilters v-slot=\"{ selectedFilters }\" :alwaysVisible=\"true\" :facetsIds=\"facetsIds\">\n  Delete {{ selectedFilters.length }} selected\n</ClearFilters>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedClearAllFilters`: the event is emitted after the user clicks the button to clear a\n  certain facets filter. The event payload is the id of the facets that are going to be cleared.\n- `UserClickedClearAllFilters`: the event is emitted after the user clicks the button. The event\n  payload is undefined.\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"clear-filters.vue.js","sources":["../../../../../src/x-modules/facets/components/clear-filters.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    v-if=\"show\"\n    class=\"x-button x-clear-filters\"\n    data-test=\"clear-filters\"\n    :disabled=\"!areThereSelectedFilters\"\n    :events=\"events\"\n    :class=\"cssClasses\"\n  >\n    <slot :selectedFilters=\"facetsSelectedFilters\">\n      Clear Filters ({{ facetsSelectedFilters.length }})\n    </slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import { Facet, Filter, isFacetFilter } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { Getter, xComponentMixin } from '../../../components';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { VueCSSClasses } from '../../../utils';\n  import { XEventsTypes } from '../../../wiring';\n  import { facetsXModule } from '../x-module';\n\n  /**\n   * Renders a simple button, emitting the needed events when clicked.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseEventButton },\n    mixins: [xComponentMixin(facetsXModule)]\n  })\n  export default class ClearFilters extends Vue {\n    /**\n     * It handles if the ClearFilters button is always visible no matter if there are not\n     * filters selected. If false, the ClearFilters button is not visible whether\n     * there are no filters selected.\n     *\n     * @public\n     */\n    @Prop({ default: false })\n    public alwaysVisible!: boolean;\n\n    /**\n     * Array of facets ids that will be passed to event like payload.\n     *\n     * @public\n     */\n    @Prop()\n    public facetsIds?: Array<Facet['id']>;\n\n    /**\n     * Get the selected filters from store.\n     *\n     * @internal\n     */\n    @Getter('facets', 'selectedFilters')\n    public allSelectedFilters!: Filter[];\n\n    /**\n     * If alwaysVisible prop is true, ClearAllFilters button is always shown, but disabled\n     * if there are no filters selected.\n     * If alwaysVisible prop is false, ClearAllFilters button is shown whether there\n     * are some filter selected.\n     *\n     * @returns True if alwaysVisible is true or in the opposite case true or false depends\n     * on if there are selected filters or not.\n     *\n     * @internal\n     */\n    protected get show(): boolean {\n      return this.alwaysVisible || this.areThereSelectedFilters;\n    }\n\n    /**\n     * Get selected filters.\n     * If there are facets ids, get selected filters whose facet id match with some of facets ids.\n     * If there aren't facets ids, get selected filters.\n     *\n     * @returns Array of selected filters depends on there are facets ids or not.\n     * @internal\n     */\n    protected get facetsSelectedFilters(): Filter[] {\n      if (this.facetsIds) {\n        return this.allSelectedFilters.filter(\n          filter => isFacetFilter(filter) && this.facetsIds!.includes(filter.facetId)\n        );\n      } else {\n        return this.allSelectedFilters;\n      }\n    }\n\n    /**\n     * Check if there are selected filters.\n     *\n     * @returns True or false depends on if there are facets ids and if there are selected filters.\n     * @internal\n     */\n    protected get areThereSelectedFilters(): boolean {\n      return !!this.facetsSelectedFilters.length;\n    }\n\n    /**\n     * The events that will be emitted when the button clear filters is clicked.\n     *\n     * @returns The events to be emitted when the button clear filters is clicked.\n     * @internal\n     */\n    protected get events(): Partial<XEventsTypes> {\n      return this.facetsIds\n        ? {\n            UserClickedClearAllFilters: this.facetsIds\n          }\n        : {\n            UserClickedClearAllFilters: undefined\n          };\n    }\n\n    /**\n     * Dynamic CSS classes to apply to the component.\n     *\n     * @returns The dynamic CSS classes to apply to the component.\n     * @internal\n     */\n    protected get cssClasses(): VueCSSClasses {\n      return {\n        'x-clear-filters--has-not-selected-filters': !this.areThereSelectedFilters,\n        'x-clear-filters--has-selected-filters': this.areThereSelectedFilters\n      };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a button, which on clicked emits the `UserClickedClearAllFilters` or\n`UserClickedClearAllFilters` event.\n\n### Basic usage\n\n```vue\n<ClearFilters />\n```\n\n### Customizing its contents\n\nIn this example, show the custom message in button.\n\n```vue\n<ClearFilters v-slot=\"{ selectedFilters }\">\n  Delete {{ selectedFilters.length }} selected\n</ClearFilters>\n```\n\nIn this example, show the custom message in button with always visible a true and list of facets\nids.\n\n```vue\n<ClearFilters v-slot=\"{ selectedFilters }\" :alwaysVisible=\"true\" :facetsIds=\"facetsIds\">\n  Delete {{ selectedFilters.length }} selected\n</ClearFilters>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedClearAllFilters`: the event is emitted after the user clicks the button to clear a\n  certain facets filter. The event payload is the id of the facets that are going to be cleared.\n- `UserClickedClearAllFilters`: the event is emitted after the user clicks the button. The event\n  payload is undefined.\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -8,7 +8,7 @@ import '../../../components/animations/collapse-height.vue.js';
 import '../../../components/animations/collapse-width.vue.js';
 import '../../../components/animations/cross-fade.vue.js';
 import '../../../components/animations/fade-and-slide.vue.js';
-import '../../../components/staggering-transition-group.vue.js';
+import '../../../components/animations/staggering-transition-group.vue.js';
 import '../../../components/animations/staggered-fade-and-slide.vue.js';
 import '../../../components/animations/translate-from-left.vue.js';
 import '../../../components/animations/translate-from-right.vue.js';
@@ -63,21 +63,30 @@ import '../../../components/icons/plus.vue.js';
 import '../../../components/icons/search.vue.js';
 import '../../../components/icons/show.vue.js';
 import '../../../components/icons/search-tiny.vue.js';
+import '../../../components/icons/tag.vue.js';
 import '../../../components/icons/trash-open.vue.js';
 import '../../../components/icons/trash.vue.js';
 import '../../../components/icons/trending-tiny.vue.js';
 import '../../../components/icons/trending.vue.js';
 import '../../../components/icons/user.vue.js';
-import '../../../components/modals/base-events-modal-close.vue.js';
+import { Getter } from '../../../components/decorators/store.decorators.js';
+import '../../../components/x-component.utils.js';
+import { xComponentMixin } from '../../../components/x-component.mixin.js';
 import '../../../components/modals/base-modal.vue.js';
+import '../../../components/modals/base-id-modal.vue.js';
+import '../../../components/scroll/scroll.mixin.js';
+import '../../../components/scroll/base-scroll.vue.js';
+import '../../../components/layouts/fixed-header-and-asides-layout.vue.js';
+import '../../../components/panels/base-toggle-panel.vue.js';
+import '../../../components/panels/base-id-toggle-panel.vue.js';
+import '../../../components/layouts/multi-column-max-width-layout.vue.js';
+import '../../../components/layouts/single-column-layout.vue.js';
+import '../../../components/modals/base-events-modal-close.vue.js';
 import '../../../components/modals/base-events-modal.vue.js';
 import '../../../components/modals/base-events-modal-open.vue.js';
-import '../../../components/modals/base-id-modal.vue.js';
 import '../../../components/modals/base-id-modal-close.vue.js';
 import '../../../components/modals/base-id-modal-open.vue.js';
-import '../../../components/panels/base-toggle-panel.vue.js';
 import '../../../components/panels/base-header-toggle-panel.vue.js';
-import '../../../components/panels/base-id-toggle-panel.vue.js';
 import '../../../components/panels/base-id-toggle-panel-button.vue.js';
 import '../../../components/result/base-result-add-to-cart.vue.js';
 import '../../../components/result/base-result-current-price.vue.js';
@@ -86,8 +95,6 @@ import '../../../components/result/base-result-link.vue.js';
 import '../../../components/result/base-result-previous-price.vue.js';
 import '../../../components/result/base-result-fallback-image.vue.js';
 import '../../../components/result/base-result-placeholder-image.vue.js';
-import '../../../components/scroll/scroll.mixin.js';
-import '../../../components/scroll/base-scroll.vue.js';
 import '../../../components/suggestions/base-suggestion.vue.js';
 import '../../../components/suggestions/base-suggestions.vue.js';
 import '../../../components/auto-progress-bar.vue.js';
@@ -98,12 +105,9 @@ 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 { Getter } from '../../../components/decorators/store.decorators.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 { isFacetFilter } from '@empathyco/x-types';
 import { facetsXModule } from '../x-module.js';

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

@@ -1 +1 @@
-{"version":3,"file":"clear-filters.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/facets/components/clear-filters.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Facet, Filter, isFacetFilter } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { Getter, xComponentMixin } from '../../../components';\nimport BaseEventButton from '../../../components/base-event-button.vue';\nimport { VueCSSClasses } from '../../../utils';\nimport { XEventsTypes } from '../../../wiring';\nimport { facetsXModule } from '../x-module';\n\n/**\n * Renders a simple button, emitting the needed events when clicked.\n *\n * @public\n */\n@Component({\n  components: { BaseEventButton },\n  mixins: [xComponentMixin(facetsXModule)]\n})\nexport default class ClearFilters extends Vue {\n  /**\n   * It handles if the ClearFilters button is always visible no matter if there are not\n   * filters selected. If false, the ClearFilters button is not visible whether\n   * there are no filters selected.\n   *\n   * @public\n   */\n  @Prop({ default: false })\n  public alwaysVisible!: boolean;\n\n  /**\n   * Array of facets ids that will be passed to event like payload.\n   *\n   * @public\n   */\n  @Prop()\n  public facetsIds?: Array<Facet['id']>;\n\n  /**\n   * Get the selected filters from store.\n   *\n   * @internal\n   */\n  @Getter('facets', 'selectedFilters')\n  public allSelectedFilters!: Filter[];\n\n  /**\n   * If alwaysVisible prop is true, ClearAllFilters button is always shown, but disabled\n   * if there are no filters selected.\n   * If alwaysVisible prop is false, ClearAllFilters button is shown whether there\n   * are some filter selected.\n   *\n   * @returns True if alwaysVisible is true or in the opposite case true or false depends\n   * on if there are selected filters or not.\n   *\n   * @internal\n   */\n  protected get show(): boolean {\n    return this.alwaysVisible || this.areThereSelectedFilters;\n  }\n\n  /**\n   * Get selected filters.\n   * If there are facets ids, get selected filters whose facet id match with some of facets ids.\n   * If there aren't facets ids, get selected filters.\n   *\n   * @returns Array of selected filters depends on there are facets ids or not.\n   * @internal\n   */\n  protected get facetsSelectedFilters(): Filter[] {\n    if (this.facetsIds) {\n      return this.allSelectedFilters.filter(\n        filter => isFacetFilter(filter) && this.facetsIds!.includes(filter.facetId)\n      );\n    } else {\n      return this.allSelectedFilters;\n    }\n  }\n\n  /**\n   * Check if there are selected filters.\n   *\n   * @returns True or false depends on if there are facets ids and if there are selected filters.\n   * @internal\n   */\n  protected get areThereSelectedFilters(): boolean {\n    return !!this.facetsSelectedFilters.length;\n  }\n\n  /**\n   * The events that will be emitted when the button clear filters is clicked.\n   *\n   * @returns The events to be emitted when the button clear filters is clicked.\n   * @internal\n   */\n  protected get events(): Partial<XEventsTypes> {\n    return this.facetsIds\n      ? {\n          UserClickedClearAllFilters: this.facetsIds\n        }\n      : {\n          UserClickedClearAllFilters: undefined\n        };\n  }\n\n  /**\n   * Dynamic CSS classes to apply to the component.\n   *\n   * @returns The dynamic CSS classes to apply to the component.\n   * @internal\n   */\n  protected get cssClasses(): VueCSSClasses {\n    return {\n      'x-clear-filters--has-not-selected-filters': !this.areThereSelectedFilters,\n      'x-clear-filters--has-selected-filters': this.areThereSelectedFilters\n    };\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA;;;;;AASA;IAA0C,gCAAG;IAA7C;;KAkGC;IA5DC,sBAAc,8BAAI;;;;;;;;;;;;aAAlB;YACE,OAAO,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,uBAAuB,CAAC;SAC3D;;;OAAA;IAUD,sBAAc,+CAAqB;;;;;;;;;aAAnC;YAAA,iBAQC;YAPC,IAAI,IAAI,CAAC,SAAS,EAAE;gBAClB,OAAO,IAAI,CAAC,kBAAkB,CAAC,MAAM,CACnC,UAAA,MAAM,IAAI,OAAA,aAAa,CAAC,MAAM,CAAC,IAAI,KAAI,CAAC,SAAU,CAAC,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC,GAAA,CAC5E,CAAC;aACH;iBAAM;gBACL,OAAO,IAAI,CAAC,kBAAkB,CAAC;aAChC;SACF;;;OAAA;IAQD,sBAAc,iDAAuB;;;;;;;aAArC;YACE,OAAO,CAAC,CAAC,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC;SAC5C;;;OAAA;IAQD,sBAAc,gCAAM;;;;;;;aAApB;YACE,OAAO,IAAI,CAAC,SAAS;kBACjB;oBACE,0BAA0B,EAAE,IAAI,CAAC,SAAS;iBAC3C;kBACD;oBACE,0BAA0B,EAAE,SAAS;iBACtC,CAAC;SACP;;;OAAA;IAQD,sBAAc,oCAAU;;;;;;;aAAxB;YACE,OAAO;gBACL,2CAA2C,EAAE,CAAC,IAAI,CAAC,uBAAuB;gBAC1E,uCAAuC,EAAE,IAAI,CAAC,uBAAuB;aACtE,CAAC;SACH;;;OAAA;IAxFD;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;uDACM;IAQ/B;QADC,IAAI,EAAE;mDAC+B;IAQtC;QADC,MAAM,CAAC,QAAQ,EAAE,iBAAiB,CAAC;4DACC;IAzBlB,YAAY;QAJhC,SAAS,CAAC;YACT,UAAU,EAAE,EAAE,eAAe,iBAAA,EAAE;YAC/B,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;SACzC,CAAC;OACmB,YAAY,CAkGhC;IAAD,mBAAC;CAAA,CAlGyC,GAAG;;;;"}
+{"version":3,"file":"clear-filters.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/facets/components/clear-filters.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Facet, Filter, isFacetFilter } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { Getter, xComponentMixin } from '../../../components';\nimport BaseEventButton from '../../../components/base-event-button.vue';\nimport { VueCSSClasses } from '../../../utils';\nimport { XEventsTypes } from '../../../wiring';\nimport { facetsXModule } from '../x-module';\n\n/**\n * Renders a simple button, emitting the needed events when clicked.\n *\n * @public\n */\n@Component({\n  components: { BaseEventButton },\n  mixins: [xComponentMixin(facetsXModule)]\n})\nexport default class ClearFilters extends Vue {\n  /**\n   * It handles if the ClearFilters button is always visible no matter if there are not\n   * filters selected. If false, the ClearFilters button is not visible whether\n   * there are no filters selected.\n   *\n   * @public\n   */\n  @Prop({ default: false })\n  public alwaysVisible!: boolean;\n\n  /**\n   * Array of facets ids that will be passed to event like payload.\n   *\n   * @public\n   */\n  @Prop()\n  public facetsIds?: Array<Facet['id']>;\n\n  /**\n   * Get the selected filters from store.\n   *\n   * @internal\n   */\n  @Getter('facets', 'selectedFilters')\n  public allSelectedFilters!: Filter[];\n\n  /**\n   * If alwaysVisible prop is true, ClearAllFilters button is always shown, but disabled\n   * if there are no filters selected.\n   * If alwaysVisible prop is false, ClearAllFilters button is shown whether there\n   * are some filter selected.\n   *\n   * @returns True if alwaysVisible is true or in the opposite case true or false depends\n   * on if there are selected filters or not.\n   *\n   * @internal\n   */\n  protected get show(): boolean {\n    return this.alwaysVisible || this.areThereSelectedFilters;\n  }\n\n  /**\n   * Get selected filters.\n   * If there are facets ids, get selected filters whose facet id match with some of facets ids.\n   * If there aren't facets ids, get selected filters.\n   *\n   * @returns Array of selected filters depends on there are facets ids or not.\n   * @internal\n   */\n  protected get facetsSelectedFilters(): Filter[] {\n    if (this.facetsIds) {\n      return this.allSelectedFilters.filter(\n        filter => isFacetFilter(filter) && this.facetsIds!.includes(filter.facetId)\n      );\n    } else {\n      return this.allSelectedFilters;\n    }\n  }\n\n  /**\n   * Check if there are selected filters.\n   *\n   * @returns True or false depends on if there are facets ids and if there are selected filters.\n   * @internal\n   */\n  protected get areThereSelectedFilters(): boolean {\n    return !!this.facetsSelectedFilters.length;\n  }\n\n  /**\n   * The events that will be emitted when the button clear filters is clicked.\n   *\n   * @returns The events to be emitted when the button clear filters is clicked.\n   * @internal\n   */\n  protected get events(): Partial<XEventsTypes> {\n    return this.facetsIds\n      ? {\n          UserClickedClearAllFilters: this.facetsIds\n        }\n      : {\n          UserClickedClearAllFilters: undefined\n        };\n  }\n\n  /**\n   * Dynamic CSS classes to apply to the component.\n   *\n   * @returns The dynamic CSS classes to apply to the component.\n   * @internal\n   */\n  protected get cssClasses(): VueCSSClasses {\n    return {\n      'x-clear-filters--has-not-selected-filters': !this.areThereSelectedFilters,\n      'x-clear-filters--has-selected-filters': this.areThereSelectedFilters\n    };\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA;;;;;AASA;IAA0C,gCAAG;IAA7C;;KAkGC;IA5DC,sBAAc,8BAAI;;;;;;;;;;;;aAAlB;YACE,OAAO,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,uBAAuB,CAAC;SAC3D;;;OAAA;IAUD,sBAAc,+CAAqB;;;;;;;;;aAAnC;YAAA,iBAQC;YAPC,IAAI,IAAI,CAAC,SAAS,EAAE;gBAClB,OAAO,IAAI,CAAC,kBAAkB,CAAC,MAAM,CACnC,UAAA,MAAM,IAAI,OAAA,aAAa,CAAC,MAAM,CAAC,IAAI,KAAI,CAAC,SAAU,CAAC,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC,GAAA,CAC5E,CAAC;aACH;iBAAM;gBACL,OAAO,IAAI,CAAC,kBAAkB,CAAC;aAChC;SACF;;;OAAA;IAQD,sBAAc,iDAAuB;;;;;;;aAArC;YACE,OAAO,CAAC,CAAC,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC;SAC5C;;;OAAA;IAQD,sBAAc,gCAAM;;;;;;;aAApB;YACE,OAAO,IAAI,CAAC,SAAS;kBACjB;oBACE,0BAA0B,EAAE,IAAI,CAAC,SAAS;iBAC3C;kBACD;oBACE,0BAA0B,EAAE,SAAS;iBACtC,CAAC;SACP;;;OAAA;IAQD,sBAAc,oCAAU;;;;;;;aAAxB;YACE,OAAO;gBACL,2CAA2C,EAAE,CAAC,IAAI,CAAC,uBAAuB;gBAC1E,uCAAuC,EAAE,IAAI,CAAC,uBAAuB;aACtE,CAAC;SACH;;;OAAA;IAxFD;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;uDACM;IAQ/B;QADC,IAAI,EAAE;mDAC+B;IAQtC;QADC,MAAM,CAAC,QAAQ,EAAE,iBAAiB,CAAC;4DACC;IAzBlB,YAAY;QAJhC,SAAS,CAAC;YACT,UAAU,EAAE,EAAE,eAAe,iBAAA,EAAE;YAC/B,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;SACzC,CAAC;OACmB,YAAY,CAkGhC;IAAD,mBAAC;CAAA,CAlGyC,GAAG;;;;"}

package/js/x-modules/facets/components/facets/facets-provider.vue.js

@@ -10,11 +10,11 @@ var __vue_script__ = script;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-0739bd06_0", { source: ".x-facets-list[data-v-0739bd06] {\n  list-style-type: none;\n}", map: undefined, media: undefined });
+    inject("data-v-8b95797a_0", { source: ".x-facets-list[data-v-8b95797a] {\n  list-style-type: none;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-0739bd06";
+  var __vue_scope_id__ = "data-v-8b95797a";
   /* module identifier */
   var __vue_module_identifier__ = undefined;
   /* functional template */

package/js/x-modules/facets/components/facets/facets-provider.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"facets-provider.vue.js","sources":["../../../../../../src/x-modules/facets/components/facets/facets-provider.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { Facet, Filter } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { XOn } from '../../../../components';\n  import { xComponentMixin } from '../../../../components/x-component.mixin';\n  import { areFiltersDifferent } from '../../../../utils/filters';\n  import { FacetsGroup } from '../../service/types';\n  import { GroupId } from '../../store/types';\n  import { facetsXModule } from '../../x-module';\n\n  /**\n   * This component allows to provide facets by prop, to add them to the state of the\n   * `Facets X-Module`. These facets will be added to the `Facets X-Module` state together with\n   * the facets emitted by the `Search X-Module` through the {@link SearchXEvents.FacetsChanged}\n   * event.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(facetsXModule)]\n  })\n  export default class FacetsProvider extends Vue {\n    /**\n     * An facet group identifier to distinguish the provided facets from other facets like the\n     * `Search X-Module` facets.\n     *\n     * @public\n     */\n    @Prop({ default: 'provided-facets' })\n    public groupId!: GroupId;\n\n    /**\n     * The facets to provide to the `Facets X-Module` state. They have to include the\n     * {@link @empathyco/x-types#Filter | filters}.\n     *\n     * @internal\n     */\n    @Prop({ required: true })\n    public facets!: Facet[];\n\n    /**\n     * Temporarily stores the selected filters from the {@link FacetsProvider.facets} prop.\n     * This is necessary to handle the {@link FacetsXEvents.UserChangedSelectedFilters} event.\n     *\n     * @internal\n     */\n    protected selectedFilters: Filter[] | null = null;\n\n    /**\n     * Creates a watcher for the `facetsGroup`, if they're set, emitting an\n     * event whenever they change. This is done this way because the {@link XBus} is not injected\n     * until the component is created.\n     *\n     * @internal\n     */\n    protected created(): void {\n      this.$watch('facetsGroup', this.provideFacets.bind(this), { immediate: true });\n    }\n\n    /**\n     * A computed property to group the facets and the groupId. This is used by the watcher.\n     *\n     * @returns The FacetGroup with the facets and the group id.\n     *\n     * @internal\n     */\n    protected get facetsGroup(): FacetsGroup {\n      return { id: this.groupId, facets: this.facets };\n    }\n\n    /**\n     * Emits the {@link FacetsXEvents.UserChangedSelectedFilters} event when the user changes\n     * the selected filters.\n     *\n     * @param selectedFilters - The new list of selected filters.\n     * @internal\n     */\n    @XOn('SelectedFiltersChanged')\n    emitSelectedFiltersChanged(selectedFilters: Filter[]): void {\n      if (\n        this.selectedFilters === null ||\n        areFiltersDifferent(this.selectedFilters, selectedFilters)\n      ) {\n        this.$x.emit('UserChangedSelectedFilters', selectedFilters);\n      }\n      this.selectedFilters = null;\n    }\n\n    /**\n     * Emits the {@link FacetsXEvents.FacetsGroupProvided} event with the\n     * {@link FacetsProvider.facetsGroup} as payload. It also extracts and saves the selected\n     * filters.\n     */\n    provideFacets(): void {\n      if (this.facetsGroup.facets) {\n        this.$x.emit('FacetsGroupProvided', this.facetsGroup);\n        this.extractSelectedFilters(this.facets);\n      }\n    }\n\n    /**\n     * Extracts the selected filters from the facets and stores them in the\n     * {@link FacetsProvider.selectedFilters} property.\n     *\n     * @param facets - The facets from whom extract the selected filters.\n     * @internal\n     */\n    protected extractSelectedFilters(facets: Facet[]): void {\n      this.selectedFilters = facets\n        .flatMap(facet => facet.filters)\n        .filter(filter => filter.selected);\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    render(): void {}\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-facets-list {\n    list-style-type: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n# Example\n\nThis component allows to provide facets by prop, to add them to the state of the `Facets X-Module`.\nThese facets will be added to the `Facets X-Module` state together with the facets emitted by the\n`Search X-Module` through the {@link SearchXEvents.FacetsChanged} event.\n\n```vue\n<template>\n  <FacetsProvider :facets=\"myFacets\" />\n</template>\n\n<script>\n  import { FacetsProvider } from '@empathyco/x-components/facets';\n\n  export default {\n    components: {\n      FacetsProvider\n    },\n    data() {\n      return {\n        myFacets: [\n          {\n            modelName: 'SimpleFacet',\n            id: 'color-facet',\n            label: 'Color',\n            filters: [\n              {\n                modelName: 'SimpleFilter',\n                id: 'color:red',\n                facetId: 'color-facet',\n                label: 'Red',\n                selected: false,\n                value: 'color:red',\n                totalResults: 10\n              },\n              {\n                modelName: 'SimpleFilter',\n                id: 'color:blue',\n                facetId: 'color-facet',\n                label: 'Blue',\n                selected: false,\n                value: 'color:blue',\n                totalResults: 10\n              }\n            ]\n          }\n        ]\n      };\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserChangedSelectedFilters`: the event is emitted after the user performed an action that changed\n  the selected filters. The payload is the new list of selected filters.\n- `FacetsGroupProvided`: the event is emitted after updating the facets prop with a new list of\n  facets. The payload contains a Facets Group with the facets and the group id.\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"facets-provider.vue.js","sources":["../../../../../../src/x-modules/facets/components/facets/facets-provider.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { Facet, Filter } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop, Watch } from 'vue-property-decorator';\n  import { XOn } from '../../../../components';\n  import { xComponentMixin } from '../../../../components/x-component.mixin';\n  import { areFiltersDifferent } from '../../../../utils/filters';\n  import { FacetsGroup } from '../../service/types';\n  import { GroupId } from '../../store/types';\n  import { facetsXModule } from '../../x-module';\n\n  /**\n   * This component allows to provide facets by prop, to add them to the state of the\n   * `Facets X-Module`. These facets will be added to the `Facets X-Module` state together with\n   * the facets emitted by the `Search X-Module` through the {@link SearchXEvents.FacetsChanged}\n   * event.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(facetsXModule)]\n  })\n  export default class FacetsProvider extends Vue {\n    /**\n     * An facet group identifier to distinguish the provided facets from other facets like the\n     * `Search X-Module` facets.\n     *\n     * @public\n     */\n    @Prop({ default: 'provided-facets' })\n    public groupId!: GroupId;\n\n    /**\n     * The facets to provide to the `Facets X-Module` state. They have to include the\n     * {@link @empathyco/x-types#Filter | filters}.\n     *\n     * @internal\n     */\n    @Prop({ required: true })\n    public facets!: Facet[];\n\n    /**\n     * Temporarily stores the selected filters from the {@link FacetsProvider.facets} prop.\n     * This is necessary to handle the {@link FacetsXEvents.UserChangedSelectedFilters} event.\n     *\n     * @internal\n     */\n    protected selectedFilters: Filter[] | null = null;\n\n    /**\n     * A computed property to group the facets and the groupId. This is used by the watcher.\n     *\n     * @returns The FacetGroup with the facets and the group id.\n     *\n     * @internal\n     */\n    protected get facetsGroup(): FacetsGroup {\n      return { id: this.groupId, facets: this.facets };\n    }\n\n    /**\n     * Emits the {@link FacetsXEvents.UserChangedSelectedFilters} event when the user changes\n     * the selected filters.\n     *\n     * @param selectedFilters - The new list of selected filters.\n     * @internal\n     */\n    @XOn('SelectedFiltersChanged')\n    emitSelectedFiltersChanged(selectedFilters: Filter[]): void {\n      if (\n        this.selectedFilters === null ||\n        areFiltersDifferent(this.selectedFilters, selectedFilters)\n      ) {\n        this.$x.emit('UserChangedSelectedFilters', selectedFilters);\n      }\n      this.selectedFilters = null;\n    }\n\n    /**\n     * Emits the {@link FacetsXEvents.FacetsGroupProvided} event with the\n     * {@link FacetsProvider.facetsGroup} as payload. It also extracts and saves the selected\n     * filters.\n     */\n    @Watch('facetsGroup', { immediate: true })\n    provideFacets(): void {\n      if (this.facetsGroup.facets) {\n        this.$x.emit('FacetsGroupProvided', this.facetsGroup);\n        this.extractSelectedFilters(this.facets);\n      }\n    }\n\n    /**\n     * Extracts the selected filters from the facets and stores them in the\n     * {@link FacetsProvider.selectedFilters} property.\n     *\n     * @param facets - The facets from whom extract the selected filters.\n     * @internal\n     */\n    protected extractSelectedFilters(facets: Facet[]): void {\n      this.selectedFilters = facets\n        .flatMap(facet => facet.filters)\n        .filter(filter => filter.selected);\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    render(): void {}\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-facets-list {\n    list-style-type: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nThis component allows to provide facets by prop, to add them to the state of the `Facets X-Module`.\nThese facets will be added to the `Facets X-Module` state together with the facets emitted by the\n`Search X-Module` through the {@link SearchXEvents.FacetsChanged} event.\n\n```vue\n<template>\n  <FacetsProvider :facets=\"myFacets\" />\n</template>\n\n<script>\n  import { FacetsProvider } from '@empathyco/x-components/facets';\n\n  export default {\n    components: {\n      FacetsProvider\n    },\n    data() {\n      return {\n        myFacets: [\n          {\n            modelName: 'SimpleFacet',\n            id: 'color-facet',\n            label: 'Color',\n            filters: [\n              {\n                modelName: 'SimpleFilter',\n                id: 'color:red',\n                facetId: 'color-facet',\n                label: 'Red',\n                selected: false,\n                value: 'color:red',\n                totalResults: 10\n              },\n              {\n                modelName: 'SimpleFilter',\n                id: 'color:blue',\n                facetId: 'color-facet',\n                label: 'Blue',\n                selected: false,\n                value: 'color:blue',\n                totalResults: 10\n              }\n            ]\n          }\n        ]\n      };\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserChangedSelectedFilters`: the event is emitted after the user performed an action that changed\n  the selected filters. The payload is the new list of selected filters.\n- `FacetsGroupProvided`: the event is emitted after updating the facets prop with a new list of\n  facets. The payload contains a Facets Group with the facets and the group id.\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/facets/components/facets/facets-provider.vue_rollup-plugin-vue=script.js

@@ -1,6 +1,6 @@
 import { __extends, __decorate } from 'tslib';
 import Vue from 'vue';
-import { Prop, Component } from 'vue-property-decorator';
+import { Prop, Watch, Component } from 'vue-property-decorator';
 import '../../../../components/animations/animate-width.vue.js';
 import '../../../../components/animations/collapse-from-top.vue.js';
 import '../../../../components/animations/animations.mixin.js';
@@ -9,7 +9,7 @@ import '../../../../components/animations/collapse-width.vue.js';
 import '../../../../components/animations/cross-fade.vue.js';
 import '../../../../components/animations/fade-and-slide.vue.js';
 import { areFiltersDifferent } from '../../../../utils/filters.js';
-import '../../../../components/staggering-transition-group.vue.js';
+import '../../../../components/animations/staggering-transition-group.vue.js';
 import '../../../../components/animations/staggered-fade-and-slide.vue.js';
 import '../../../../components/animations/translate-from-left.vue.js';
 import '../../../../components/animations/translate-from-right.vue.js';
@@ -64,21 +64,30 @@ import '../../../../components/icons/plus.vue.js';
 import '../../../../components/icons/search.vue.js';
 import '../../../../components/icons/show.vue.js';
 import '../../../../components/icons/search-tiny.vue.js';
+import '../../../../components/icons/tag.vue.js';
 import '../../../../components/icons/trash-open.vue.js';
 import '../../../../components/icons/trash.vue.js';
 import '../../../../components/icons/trending-tiny.vue.js';
 import '../../../../components/icons/trending.vue.js';
 import '../../../../components/icons/user.vue.js';
-import '../../../../components/modals/base-events-modal-close.vue.js';
+import '../../../../components/decorators/store.decorators.js';
+import '../../../../components/x-component.utils.js';
+import { xComponentMixin } from '../../../../components/x-component.mixin.js';
 import '../../../../components/modals/base-modal.vue.js';
+import '../../../../components/modals/base-id-modal.vue.js';
+import '../../../../components/scroll/scroll.mixin.js';
+import '../../../../components/scroll/base-scroll.vue.js';
+import '../../../../components/layouts/fixed-header-and-asides-layout.vue.js';
+import '../../../../components/panels/base-toggle-panel.vue.js';
+import '../../../../components/panels/base-id-toggle-panel.vue.js';
+import '../../../../components/layouts/multi-column-max-width-layout.vue.js';
+import '../../../../components/layouts/single-column-layout.vue.js';
+import '../../../../components/modals/base-events-modal-close.vue.js';
 import '../../../../components/modals/base-events-modal.vue.js';
 import '../../../../components/modals/base-events-modal-open.vue.js';
-import '../../../../components/modals/base-id-modal.vue.js';
 import '../../../../components/modals/base-id-modal-close.vue.js';
 import '../../../../components/modals/base-id-modal-open.vue.js';
-import '../../../../components/panels/base-toggle-panel.vue.js';
 import '../../../../components/panels/base-header-toggle-panel.vue.js';
-import '../../../../components/panels/base-id-toggle-panel.vue.js';
 import '../../../../components/panels/base-id-toggle-panel-button.vue.js';
 import '../../../../components/result/base-result-add-to-cart.vue.js';
 import '../../../../components/result/base-result-current-price.vue.js';
@@ -87,8 +96,6 @@ import '../../../../components/result/base-result-link.vue.js';
 import '../../../../components/result/base-result-previous-price.vue.js';
 import '../../../../components/result/base-result-fallback-image.vue.js';
 import '../../../../components/result/base-result-placeholder-image.vue.js';
-import '../../../../components/scroll/scroll.mixin.js';
-import '../../../../components/scroll/base-scroll.vue.js';
 import '../../../../components/suggestions/base-suggestion.vue.js';
 import '../../../../components/suggestions/base-suggestions.vue.js';
 import '../../../../components/auto-progress-bar.vue.js';
@@ -99,12 +106,9 @@ 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/decorators/store.decorators.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';
 
@@ -129,16 +133,6 @@ var FacetsProvider = /** @class */ (function (_super) {
         _this.selectedFilters = null;
         return _this;
     }
-    /**
-     * Creates a watcher for the `facetsGroup`, if they're set, emitting an
-     * event whenever they change. This is done this way because the {@link XBus} is not injected
-     * until the component is created.
-     *
-     * @internal
-     */
-    FacetsProvider.prototype.created = function () {
-        this.$watch('facetsGroup', this.provideFacets.bind(this), { immediate: true });
-    };
     Object.defineProperty(FacetsProvider.prototype, "facetsGroup", {
         /**
          * A computed property to group the facets and the groupId. This is used by the watcher.
@@ -201,6 +195,9 @@ var FacetsProvider = /** @class */ (function (_super) {
     __decorate([
         XOn('SelectedFiltersChanged')
     ], FacetsProvider.prototype, "emitSelectedFiltersChanged", null);
+    __decorate([
+        Watch('facetsGroup', { immediate: true })
+    ], FacetsProvider.prototype, "provideFacets", null);
     FacetsProvider = __decorate([
         Component({
             mixins: [xComponentMixin(facetsXModule)]

package/js/x-modules/facets/components/facets/facets-provider.vue_rollup-plugin-vue=script.js.map

@@ -1 +1 @@
-{"version":3,"file":"facets-provider.vue_rollup-plugin-vue=script.js","sources":["../../../../../../src/x-modules/facets/components/facets/facets-provider.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\nimport { Facet, Filter } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { XOn } from '../../../../components';\nimport { xComponentMixin } from '../../../../components/x-component.mixin';\nimport { areFiltersDifferent } from '../../../../utils/filters';\nimport { FacetsGroup } from '../../service/types';\nimport { GroupId } from '../../store/types';\nimport { facetsXModule } from '../../x-module';\n\n/**\n * This component allows to provide facets by prop, to add them to the state of the\n * `Facets X-Module`. These facets will be added to the `Facets X-Module` state together with\n * the facets emitted by the `Search X-Module` through the {@link SearchXEvents.FacetsChanged}\n * event.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(facetsXModule)]\n})\nexport default class FacetsProvider extends Vue {\n  /**\n   * An facet group identifier to distinguish the provided facets from other facets like the\n   * `Search X-Module` facets.\n   *\n   * @public\n   */\n  @Prop({ default: 'provided-facets' })\n  public groupId!: GroupId;\n\n  /**\n   * The facets to provide to the `Facets X-Module` state. They have to include the\n   * {@link @empathyco/x-types#Filter | filters}.\n   *\n   * @internal\n   */\n  @Prop({ required: true })\n  public facets!: Facet[];\n\n  /**\n   * Temporarily stores the selected filters from the {@link FacetsProvider.facets} prop.\n   * This is necessary to handle the {@link FacetsXEvents.UserChangedSelectedFilters} event.\n   *\n   * @internal\n   */\n  protected selectedFilters: Filter[] | null = null;\n\n  /**\n   * Creates a watcher for the `facetsGroup`, if they're set, emitting an\n   * event whenever they change. This is done this way because the {@link XBus} is not injected\n   * until the component is created.\n   *\n   * @internal\n   */\n  protected created(): void {\n    this.$watch('facetsGroup', this.provideFacets.bind(this), { immediate: true });\n  }\n\n  /**\n   * A computed property to group the facets and the groupId. This is used by the watcher.\n   *\n   * @returns The FacetGroup with the facets and the group id.\n   *\n   * @internal\n   */\n  protected get facetsGroup(): FacetsGroup {\n    return { id: this.groupId, facets: this.facets };\n  }\n\n  /**\n   * Emits the {@link FacetsXEvents.UserChangedSelectedFilters} event when the user changes\n   * the selected filters.\n   *\n   * @param selectedFilters - The new list of selected filters.\n   * @internal\n   */\n  @XOn('SelectedFiltersChanged')\n  emitSelectedFiltersChanged(selectedFilters: Filter[]): void {\n    if (\n      this.selectedFilters === null ||\n      areFiltersDifferent(this.selectedFilters, selectedFilters)\n    ) {\n      this.$x.emit('UserChangedSelectedFilters', selectedFilters);\n    }\n    this.selectedFilters = null;\n  }\n\n  /**\n   * Emits the {@link FacetsXEvents.FacetsGroupProvided} event with the\n   * {@link FacetsProvider.facetsGroup} as payload. It also extracts and saves the selected\n   * filters.\n   */\n  provideFacets(): void {\n    if (this.facetsGroup.facets) {\n      this.$x.emit('FacetsGroupProvided', this.facetsGroup);\n      this.extractSelectedFilters(this.facets);\n    }\n  }\n\n  /**\n   * Extracts the selected filters from the facets and stores them in the\n   * {@link FacetsProvider.selectedFilters} property.\n   *\n   * @param facets - The facets from whom extract the selected filters.\n   * @internal\n   */\n  protected extractSelectedFilters(facets: Facet[]): void {\n    this.selectedFilters = facets\n      .flatMap(facet => facet.filters)\n      .filter(filter => filter.selected);\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  render(): void {}\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA;;;;;;;;AAWA;IAA4C,kCAAG;IAA/C;QAAA,qEA8FC;;;;;;;QArEW,qBAAe,GAAoB,IAAI,CAAC;;KAqEnD;;;;;;;;IA5DW,gCAAO,GAAjB;QACE,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;KAChF;IASD,sBAAc,uCAAW;;;;;;;;aAAzB;YACE,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;SAClD;;;OAAA;;;;;;;;IAUD,mDAA0B,GAA1B,UAA2B,eAAyB;QAClD,IACE,IAAI,CAAC,eAAe,KAAK,IAAI;YAC7B,mBAAmB,CAAC,IAAI,CAAC,eAAe,EAAE,eAAe,CAAC,EAC1D;YACA,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,4BAA4B,EAAE,eAAe,CAAC,CAAC;SAC7D;QACD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;KAC7B;;;;;;IAOD,sCAAa,GAAb;QACE,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE;YAC3B,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;YACtD,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SAC1C;KACF;;;;;;;;IASS,+CAAsB,GAAhC,UAAiC,MAAe;QAC9C,IAAI,CAAC,eAAe,GAAG,MAAM;aAC1B,OAAO,CAAC,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,OAAO,GAAA,CAAC;aAC/B,MAAM,CAAC,UAAA,MAAM,IAAI,OAAA,MAAM,CAAC,QAAQ,GAAA,CAAC,CAAC;KACtC;;IAGD,+BAAM,GAAN,eAAiB;IArFjB;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,CAAC;mDACZ;IASzB;QADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;kDACD;IAwCxB;QADC,GAAG,CAAC,wBAAwB,CAAC;oEAS7B;IAjEkB,cAAc;QAHlC,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;SACzC,CAAC;OACmB,cAAc,CA8FlC;IAAD,qBAAC;CAAA,CA9F2C,GAAG;;;;"}
+{"version":3,"file":"facets-provider.vue_rollup-plugin-vue=script.js","sources":["../../../../../../src/x-modules/facets/components/facets/facets-provider.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\nimport { Facet, Filter } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop, Watch } from 'vue-property-decorator';\nimport { XOn } from '../../../../components';\nimport { xComponentMixin } from '../../../../components/x-component.mixin';\nimport { areFiltersDifferent } from '../../../../utils/filters';\nimport { FacetsGroup } from '../../service/types';\nimport { GroupId } from '../../store/types';\nimport { facetsXModule } from '../../x-module';\n\n/**\n * This component allows to provide facets by prop, to add them to the state of the\n * `Facets X-Module`. These facets will be added to the `Facets X-Module` state together with\n * the facets emitted by the `Search X-Module` through the {@link SearchXEvents.FacetsChanged}\n * event.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(facetsXModule)]\n})\nexport default class FacetsProvider extends Vue {\n  /**\n   * An facet group identifier to distinguish the provided facets from other facets like the\n   * `Search X-Module` facets.\n   *\n   * @public\n   */\n  @Prop({ default: 'provided-facets' })\n  public groupId!: GroupId;\n\n  /**\n   * The facets to provide to the `Facets X-Module` state. They have to include the\n   * {@link @empathyco/x-types#Filter | filters}.\n   *\n   * @internal\n   */\n  @Prop({ required: true })\n  public facets!: Facet[];\n\n  /**\n   * Temporarily stores the selected filters from the {@link FacetsProvider.facets} prop.\n   * This is necessary to handle the {@link FacetsXEvents.UserChangedSelectedFilters} event.\n   *\n   * @internal\n   */\n  protected selectedFilters: Filter[] | null = null;\n\n  /**\n   * A computed property to group the facets and the groupId. This is used by the watcher.\n   *\n   * @returns The FacetGroup with the facets and the group id.\n   *\n   * @internal\n   */\n  protected get facetsGroup(): FacetsGroup {\n    return { id: this.groupId, facets: this.facets };\n  }\n\n  /**\n   * Emits the {@link FacetsXEvents.UserChangedSelectedFilters} event when the user changes\n   * the selected filters.\n   *\n   * @param selectedFilters - The new list of selected filters.\n   * @internal\n   */\n  @XOn('SelectedFiltersChanged')\n  emitSelectedFiltersChanged(selectedFilters: Filter[]): void {\n    if (\n      this.selectedFilters === null ||\n      areFiltersDifferent(this.selectedFilters, selectedFilters)\n    ) {\n      this.$x.emit('UserChangedSelectedFilters', selectedFilters);\n    }\n    this.selectedFilters = null;\n  }\n\n  /**\n   * Emits the {@link FacetsXEvents.FacetsGroupProvided} event with the\n   * {@link FacetsProvider.facetsGroup} as payload. It also extracts and saves the selected\n   * filters.\n   */\n  @Watch('facetsGroup', { immediate: true })\n  provideFacets(): void {\n    if (this.facetsGroup.facets) {\n      this.$x.emit('FacetsGroupProvided', this.facetsGroup);\n      this.extractSelectedFilters(this.facets);\n    }\n  }\n\n  /**\n   * Extracts the selected filters from the facets and stores them in the\n   * {@link FacetsProvider.selectedFilters} property.\n   *\n   * @param facets - The facets from whom extract the selected filters.\n   * @internal\n   */\n  protected extractSelectedFilters(facets: Facet[]): void {\n    this.selectedFilters = facets\n      .flatMap(facet => facet.filters)\n      .filter(filter => filter.selected);\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  render(): void {}\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA;;;;;;;;AAWA;IAA4C,kCAAG;IAA/C;QAAA,qEAoFC;;;;;;;QA3DW,qBAAe,GAAoB,IAAI,CAAC;;KA2DnD;IAlDC,sBAAc,uCAAW;;;;;;;;aAAzB;YACE,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;SAClD;;;OAAA;;;;;;;;IAUD,mDAA0B,GAA1B,UAA2B,eAAyB;QAClD,IACE,IAAI,CAAC,eAAe,KAAK,IAAI;YAC7B,mBAAmB,CAAC,IAAI,CAAC,eAAe,EAAE,eAAe,CAAC,EAC1D;YACA,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,4BAA4B,EAAE,eAAe,CAAC,CAAC;SAC7D;QACD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;KAC7B;;;;;;IAQD,sCAAa,GAAb;QACE,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE;YAC3B,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;YACtD,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SAC1C;KACF;;;;;;;;IASS,+CAAsB,GAAhC,UAAiC,MAAe;QAC9C,IAAI,CAAC,eAAe,GAAG,MAAM;aAC1B,OAAO,CAAC,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,OAAO,GAAA,CAAC;aAC/B,MAAM,CAAC,UAAA,MAAM,IAAI,OAAA,MAAM,CAAC,QAAQ,GAAA,CAAC,CAAC;KACtC;;IAGD,+BAAM,GAAN,eAAiB;IA3EjB;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,CAAC;mDACZ;IASzB;QADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;kDACD;IA6BxB;QADC,GAAG,CAAC,wBAAwB,CAAC;oEAS7B;IAQD;QADC,KAAK,CAAC,aAAa,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;uDAMzC;IAnEkB,cAAc;QAHlC,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;SACzC,CAAC;OACmB,cAAc,CAoFlC;IAAD,qBAAC;CAAA,CApF2C,GAAG;;;;"}

package/js/x-modules/facets/components/facets/facets.vue.js

@@ -6,7 +6,7 @@ import script from './facets.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,9 +16,9 @@ var __vue_render__ = function() {
         {
           tag: "component",
           staticClass: "x-list x-facets-list",
-          attrs: { "data-test": "facets", tag: "ul" }
+          attrs: { "data-test": "facets", tag: "ul" },
         },
-        _vm._l(_vm.mappedFacets, function(ref, facetId) {
+        _vm._l(_vm.mappedFacets, function (ref, facetId) {
           var facet = ref.facet;
           var slotName = ref.slotName;
           return _c(
@@ -26,32 +26,31 @@ var __vue_render__ = function() {
             {
               key: facetId,
               staticClass: "x-facets-list__item",
-              attrs: { "data-test": "facets-facet" }
+              attrs: { "data-test": "facets-facet" },
             },
             [
               _vm.$scopedSlots[slotName]
                 ? _vm._t(slotName, null, null, {
                     facet: facet,
-                    selectedFilters: _vm.selectedFiltersByFacet[facetId] || []
+                    selectedFilters: _vm.selectedFiltersByFacet[facetId] || [],
                   })
                 : _vm._t(
                     "default",
-                    function() {
+                    function () {
                       return [
                         _vm._v(
                           "\n      This is the " +
                             _vm._s(facet.label) +
                             " facet. Pass something into its slot to display content.\n    "
-                        )
-                      ]
+                        ) ]
                     },
                     null,
                     {
                       facet: facet,
-                      selectedFilters: _vm.selectedFiltersByFacet[facetId] || []
+                      selectedFilters:
+                        _vm.selectedFiltersByFacet[facetId] || [],
                     }
-                  )
-            ],
+                  ) ],
             2
           )
         }),
@@ -65,11 +64,11 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-3c750646_0", { source: ".x-facets-list[data-v-3c750646] {\n  list-style-type: none;\n}", map: undefined, media: undefined });
+    inject("data-v-050085ad_0", { source: ".x-facets-list[data-v-050085ad] {\n  list-style-type: none;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-3c750646";
+  var __vue_scope_id__ = "data-v-050085ad";
   /* module identifier */
   var __vue_module_identifier__ = undefined;
   /* functional template */

package/js/x-modules/facets/components/facets/facets.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"facets.vue.js","sources":["../../../../../../src/x-modules/facets/components/facets/facets.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"hasFacets\"\n    class=\"x-list x-facets-list\"\n    data-test=\"facets\"\n    tag=\"ul\"\n  >\n    <li\n      v-for=\"({ facet, slotName }, facetId) in mappedFacets\"\n      :key=\"facetId\"\n      class=\"x-facets-list__item\"\n      data-test=\"facets-facet\"\n    >\n      <!--\n        @slot Customized Facet rendering. Specifying a slot with the facet's name will result in the\n        facet using that slot composition to render.\n            @binding {Facet} facet - Facet to render\n      -->\n      <slot\n        v-if=\"$scopedSlots[slotName]\"\n        v-bind=\"{\n          facet,\n          selectedFilters: selectedFiltersByFacet[facetId] || []\n        }\"\n        :name=\"slotName\"\n      />\n      <!--\n        @slot (required) Default Facet rendering. This slot will be used by default for rendering\n        the facets without an specific slot implementation.\n            @binding {Facet} facet - Facet to render\n      -->\n      <slot\n        v-else\n        v-bind=\"{\n          facet,\n          selectedFilters: selectedFiltersByFacet[facetId] || []\n        }\"\n      >\n        This is the {{ facet.label }} facet. Pass something into its slot to display content.\n      </slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { Facet } from '@empathyco/x-types';\n  import { Component, Prop, Vue } from 'vue-property-decorator';\n  import { Getter } from '../../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../../components/x-component.mixin';\n  import { toKebabCase } from '../../../../utils/string';\n  import { map, objectFilter } from '../../../../utils/object';\n  import { Dictionary } from '../../../../utils/types';\n  import { FiltersByFacet } from '../../store/types';\n  import { facetsXModule } from '../../x-module';\n\n  /**\n   * Custom interface to provide a slot name to a Facet.\n   *\n   * @internal\n   */\n  interface RenderFacet {\n    slotName: string;\n    facet: Facet;\n  }\n\n  /**\n   * This component renders the list of facets stored in the Facets module. Facets can be rendered\n   * differently based on their purpose and this can be achieved using the exposed slots:\n   * - A default and required slot.\n   * - A custom slot for each facet with the facetId as its name. This allows each facet to be\n   * rendered differently based on its needs.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(facetsXModule)]\n  })\n  export default class Facets extends Vue {\n    /**\n     * Animation component that will be used to animate the facets.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    public animation!: Vue | string;\n\n    /**\n     * Discriminates the facets rendered by this component. It expects a string containing facets\n     * ids, comma separated. This property will include or exclude facets based on its value.\n     * The default value is an empty string and the component will render all existing facets.\n     *\n     * @remarks\n     * To behave as a `include`, simply set the facets ids, comma separated:\n     * `existingFacets=[{ brand: ... }, category: { ... }, color: { ... }, price: { ... }]`\n     * `renderableFacets=\"brand, category\"`\n     *\n     * The component will render brand and category facets.\n     *\n     * On the other hand, to simulate an `exclude` behaviour and exclude a facet from being\n     * rendered, append a '!' before its id:\n     * `existingFacets=[{ brand: ... }, category: { ... }, color: { ... }, price: { ... }]`\n     * `renderableFacets=\"!brand,!price\"`\n     *\n     * The component will render category and color facets.\n     *\n     * @public\n     */\n    @Prop()\n    public renderableFacets!: string | undefined;\n\n    /**\n     * Array of selected filters from every facet.\n     *\n     * @internal\n     */\n    @Getter('facets', 'selectedFiltersByFacet')\n    public selectedFiltersByFacet!: FiltersByFacet;\n\n    /**\n     * Dictionary of facets in the state.\n     *\n     * @internal\n     */\n    @Getter('facets', 'facets')\n    public facets!: Record<Facet['id'], Facet>;\n\n    /**\n     * Transforms a dictionary of Facets including the slot name.\n     *\n     * @returns A dictionary of facets with the slot name.\n     *\n     * @internal\n     */\n    protected get mappedFacets(): Dictionary<RenderFacet> {\n      return map(this.facetsToRender, (facetId, facet) => ({\n        slotName: toKebabCase(facetId),\n        facet\n      }));\n    }\n\n    /**\n     * The facets to be rendered after filtering {@link Facets.facets} by\n     * {@link Facets.renderableFacets} content.\n     *\n     * @returns The list of facets to be rendered.\n     *\n     * @internal\n     */\n    protected get facetsToRender(): Dictionary<Facet> {\n      if (!this.renderableFacets) {\n        return this.facets;\n      } else {\n        const excludedRegExp = /^!/;\n        const facetIds: string[] = this.renderableFacets.split(',').map(facetId => facetId.trim());\n        const included: string[] = [];\n        const excluded: string[] = [];\n        facetIds.forEach(facetId => {\n          if (excludedRegExp.test(facetId)) {\n            excluded.push(facetId.replace(excludedRegExp, ''));\n          } else {\n            included.push(facetId);\n          }\n        });\n\n        return this.filterFacetsToRender(included, excluded);\n      }\n    }\n\n    /**\n     * Indicates if there are facets available to show.\n     *\n     * @returns True if there are facets available and false otherwise.\n     * @internal\n     */\n    protected get hasFacets(): boolean {\n      return !!Object.keys(this.facetsToRender).length;\n    }\n\n    /**\n     * Filter facets dictionary retrieving those included and/or removing excluded.\n     *\n     * @param included - List of facets to render.\n     * @param excluded - List of not renderable facets.\n     *\n     * @returns The filtered list of facets to render.\n     *\n     * @internal\n     */\n    private filterFacetsToRender(included: string[], excluded: string[]): Dictionary<Facet> {\n      const hasAnyFacetIncluded = included.length > 0;\n      return objectFilter(this.facets, facetKey => {\n        const isIncluded = included.includes(String(facetKey));\n        const isExcluded = excluded.includes(String(facetKey));\n\n        return hasAnyFacetIncluded ? isIncluded && !isExcluded : !isExcluded;\n      });\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-facets-list {\n    list-style-type: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n# Example\n\nThis component renders the list of facets stored in the Facets module. Facets can be rendered\ndifferently based on their purpose and this can be achieved using the exposed slots:\n\n- A default and required slot.\n- A custom slot for each facet with the facetId as its name. This allows each facet to be rendered\n  differently based on its needs.\n\nBelow, there are some examples showing how to use the component with its different configurations.\n\n## Default usage\n\nThe default slot of this component is mandatory. If no other slot is defined, every Facet will be\nrendered as specified in the default slot.\n\n```vue\n<template>\n  <Facets>\n    <template #default=\"{ facet, selectedFilters }\">\n      <h1>{{ ${facet.label} }}</h1>\n      <span v-if=\"selectedFilters.length > 0\">{{ `${selectedFilters.length} selected` }}</span>\n\n      <ul>\n        <li v-for=\"filter in facet.filters\" :key=\"filter.id\">\n          {{ filter.label }}\n        </li>\n      </ul>\n    </template>\n  </Facets>\n</template>\n\n<script>\n  import { Facets } from '@empathyco/x-components/facets';\n\n  export default {\n    components: {\n      Facets\n    }\n  };\n</script>\n```\n\n## Customized usage\n\nCustomized compositions for a specific Facet can be achieved by using a slot with the same id as the\nfacet to customize. For example, the Facet with the id \"color\" requires a composition that differs\nfrom the rest of the Facets. Doing it in a slot with the name \"color\" will apply this customization\njust to the \"color\" Facet. The other facets will fallback to the composition of the default slot.\n\n```vue\n<template>\n  <Facets>\n    <template #color=\"{ facet, selectedFilters }\">\n      <span v-if=\"selectedFilters.length > 0\">{{ `${selectedFilters.length} colors chosen` }}</span>\n\n      <ul v-for=\"filter in facet.filters\" :key=\"filter.id\">\n        <li v-if=\"!filter.selected\">\n          {{ filter.label }}\n        </li>\n      </ul>\n    </template>\n\n    <template #default=\"{ facet }\">\n      <h1>{{ facet.label }}</h1>\n\n      <ul>\n        <li v-for=\"filter in facet.filters\" :key=\"filter.id\">\n          {{ filter.label }}\n        </li>\n      </ul>\n    </template>\n  </Facets>\n</template>\n\n<script>\n  import { Facets } from '@empathyco/x-components/facets';\n\n  export default {\n    components: {\n      Facets\n    }\n  };\n</script>\n```\n\n## Render specific facets I\n\nBy default, this component will render all existing facets. However, it has the renderableFacets\nprop to filter which facets will be rendered. Its value is a string containing the different facets\nids. This value is treated as an include or exclude list (to exclude a facet from being rendered,\njust prefix its id with a `!`). The component will only render included facets and discard excluded\nones. In the following example, the component will only render color and category facets.\n\n```vue\n<template>\n  <Facets renderableFacets=\"color, category\">\n    <template #default=\"{ facet }\">\n      <h1>{{ facet.label }}</h1>\n\n      <ul>\n        <li v-for=\"filter in facet.filters\" :key=\"filter.id\">\n          {{ filter.label }}\n        </li>\n      </ul>\n    </template>\n  </Facets>\n</template>\n\n<script>\n  import { Facets } from '@empathyco/x-components/facets';\n\n  export default {\n    components: {\n      Facets\n    }\n  };\n</script>\n```\n\n## Render specific facets II\n\nExclude facets so the component does not render them. In the following example, the component will\nrender every facet except color and price.\n\n```vue\n<template>\n  <Facets renderableFacets=\"!color, !price\">\n    <template #default=\"{ facet }\">\n      <h1>{{ facet.label }}</h1>\n\n      <ul>\n        <li v-for=\"filter in facet.filters\" :key=\"filter.id\">\n          {{ filter.label }}\n        </li>\n      </ul>\n    </template>\n  </Facets>\n</template>\n\n<script>\n  import { Facets } from '@empathyco/x-components/facets';\n\n  export default {\n    components: {\n      Facets\n    }\n  };\n</script>\n```\n\n## Integrating with the filters components\n\nThere are many components that will help you build your own awesome filters list. `Facets` just\nrenders the list, but what to render for each facet is up to you. Below you can see an example. of\nthe `Facets` component using the `FiltersSearch` `MultiSelectFilters`, `SimpleFilter`, `Filters`,\n`HierarchicalFilter`, `NumberRangeFilter` and `BasePriceFilterLabel`.\n\n```vue\n<template>\n  <Facets>\n    <template #default=\"{ facet, selectedFilters }\">\n      <h1>{{ facet.label }}</h1>\n      <FiltersSearch :filters=\"facet.filters\">\n        <MultiSelectFilters v-slot=\"{ filter }\">\n          <SimpleFilter :filter=\"filter\" />\n        </MultiSelectFilters>\n      </FiltersSearch>\n    </template>\n\n    <template #category=\"{ facet }\">\n      <h1>{{ facet.label }}</h1>\n      <Filters v-slot=\"{ filter }\" :filters=\"facet.filters\">\n        <HierarchicalFilter :filter=\"filter\" />\n      </Filters>\n    </template>\n\n    <template #price=\"{ facet }\">\n      <h1>{{ facet.label }}</h1>\n      <Filters v-slot=\"{ filter }\" :filters=\"facet.filters\">\n        <NumberRangeFilter :filter=\"filter\">\n          <BasePriceFilterLabel :filter=\"filter\" />\n        </NumberRangeFilter>\n      </Filters>\n    </template>\n  </Facets>\n</template>\n\n<script>\n  import {\n    Facets,\n    Filters,\n    FiltersSearch,\n    HierarchicalFilter,\n    MultiSelectFilters,\n    NumberRangeFilter,\n    SimpleFilter\n  } from '@empathyco/x-components/facets';\n\n  import { BasePriceFilterLabel } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      Facets,\n      MultiSelectFilters,\n      FiltersSearch,\n      SimpleFilter,\n      Filters,\n      HierarchicalFilter,\n      NumberRangeFilter,\n      BasePriceFilterLabel\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"facets.vue.js","sources":["../../../../../../src/x-modules/facets/components/facets/facets.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"hasFacets\"\n    class=\"x-list x-facets-list\"\n    data-test=\"facets\"\n    tag=\"ul\"\n  >\n    <li\n      v-for=\"({ facet, slotName }, facetId) in mappedFacets\"\n      :key=\"facetId\"\n      class=\"x-facets-list__item\"\n      data-test=\"facets-facet\"\n    >\n      <!--\n        @slot Customized Facet rendering. Specifying a slot with the facet's name will result in the\n        facet using that slot composition to render.\n            @binding {Facet} facet - Facet to render\n      -->\n      <slot\n        v-if=\"$scopedSlots[slotName]\"\n        v-bind=\"{\n          facet,\n          selectedFilters: selectedFiltersByFacet[facetId] || []\n        }\"\n        :name=\"slotName\"\n      />\n      <!--\n        @slot (required) Default Facet rendering. This slot will be used by default for rendering\n        the facets without an specific slot implementation.\n            @binding {Facet} facet - Facet to render\n      -->\n      <slot\n        v-else\n        v-bind=\"{\n          facet,\n          selectedFilters: selectedFiltersByFacet[facetId] || []\n        }\"\n      >\n        This is the {{ facet.label }} facet. Pass something into its slot to display content.\n      </slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { Facet } from '@empathyco/x-types';\n  import { Component, Prop, Vue } from 'vue-property-decorator';\n  import { Getter } from '../../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../../components/x-component.mixin';\n  import { toKebabCase } from '../../../../utils/string';\n  import { map, objectFilter } from '../../../../utils/object';\n  import { Dictionary } from '../../../../utils/types';\n  import { FiltersByFacet } from '../../store/types';\n  import { facetsXModule } from '../../x-module';\n\n  /**\n   * Custom interface to provide a slot name to a Facet.\n   *\n   * @internal\n   */\n  interface RenderFacet {\n    slotName: string;\n    facet: Facet;\n  }\n\n  /**\n   * This component renders the list of facets stored in the Facets module. Facets can be rendered\n   * differently based on their purpose and this can be achieved using the exposed slots:\n   * - A default and required slot.\n   * - A custom slot for each facet with the facetId as its name. This allows each facet to be\n   * rendered differently based on its needs.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(facetsXModule)]\n  })\n  export default class Facets extends Vue {\n    /**\n     * Animation component that will be used to animate the facets.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    public animation!: Vue | string;\n\n    /**\n     * Discriminates the facets rendered by this component. It expects a string containing facets\n     * ids, comma separated. This property will include or exclude facets based on its value.\n     * The default value is an empty string and the component will render all existing facets.\n     *\n     * @remarks\n     * To behave as a `include`, simply set the facets ids, comma separated:\n     * `existingFacets=[{ brand: ... }, category: { ... }, color: { ... }, price: { ... }]`\n     * `renderableFacets=\"brand, category\"`\n     *\n     * The component will render brand and category facets.\n     *\n     * On the other hand, to simulate an `exclude` behaviour and exclude a facet from being\n     * rendered, append a '!' before its id:\n     * `existingFacets=[{ brand: ... }, category: { ... }, color: { ... }, price: { ... }]`\n     * `renderableFacets=\"!brand,!price\"`\n     *\n     * The component will render category and color facets.\n     *\n     * @public\n     */\n    @Prop()\n    public renderableFacets!: string | undefined;\n\n    /**\n     * Array of selected filters from every facet.\n     *\n     * @internal\n     */\n    @Getter('facets', 'selectedFiltersByFacet')\n    public selectedFiltersByFacet!: FiltersByFacet;\n\n    /**\n     * Dictionary of facets in the state.\n     *\n     * @internal\n     */\n    @Getter('facets', 'facets')\n    public facets!: Record<Facet['id'], Facet>;\n\n    /**\n     * Transforms a dictionary of Facets including the slot name.\n     *\n     * @returns A dictionary of facets with the slot name.\n     *\n     * @internal\n     */\n    protected get mappedFacets(): Dictionary<RenderFacet> {\n      return map(this.facetsToRender, (facetId, facet) => ({\n        slotName: toKebabCase(facetId),\n        facet\n      }));\n    }\n\n    /**\n     * The facets to be rendered after filtering {@link Facets.facets} by\n     * {@link Facets.renderableFacets} content.\n     *\n     * @returns The list of facets to be rendered.\n     *\n     * @internal\n     */\n    protected get facetsToRender(): Dictionary<Facet> {\n      if (!this.renderableFacets) {\n        return this.facets;\n      } else {\n        const excludedRegExp = /^!/;\n        const facetIds: string[] = this.renderableFacets.split(',').map(facetId => facetId.trim());\n        const included: string[] = [];\n        const excluded: string[] = [];\n        facetIds.forEach(facetId => {\n          if (excludedRegExp.test(facetId)) {\n            excluded.push(facetId.replace(excludedRegExp, ''));\n          } else {\n            included.push(facetId);\n          }\n        });\n\n        return this.filterFacetsToRender(included, excluded);\n      }\n    }\n\n    /**\n     * Indicates if there are facets available to show.\n     *\n     * @returns True if there are facets available and false otherwise.\n     * @internal\n     */\n    protected get hasFacets(): boolean {\n      return !!Object.keys(this.facetsToRender).length;\n    }\n\n    /**\n     * Filter facets dictionary retrieving those included and/or removing excluded.\n     *\n     * @param included - List of facets to render.\n     * @param excluded - List of not renderable facets.\n     *\n     * @returns The filtered list of facets to render.\n     *\n     * @internal\n     */\n    private filterFacetsToRender(included: string[], excluded: string[]): Dictionary<Facet> {\n      const hasAnyFacetIncluded = included.length > 0;\n      return objectFilter(this.facets, facetKey => {\n        const isIncluded = included.includes(String(facetKey));\n        const isExcluded = excluded.includes(String(facetKey));\n\n        return hasAnyFacetIncluded ? isIncluded && !isExcluded : !isExcluded;\n      });\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-facets-list {\n    list-style-type: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nThis component renders the list of facets stored in the Facets module. Facets can be rendered\ndifferently based on their purpose and this can be achieved using the exposed slots:\n\n- A default and required slot.\n- A custom slot for each facet with the facetId as its name. This allows each facet to be rendered\n  differently based on its needs.\n\nBelow, there are some examples showing how to use the component with its different configurations.\n\n### Default usage\n\nThe default slot of this component is mandatory. If no other slot is defined, every Facet will be\nrendered as specified in the default slot.\n\n```vue\n<template>\n  <Facets>\n    <template #default=\"{ facet, selectedFilters }\">\n      <h1>{{ ${facet.label} }}</h1>\n      <span v-if=\"selectedFilters.length > 0\">{{ `${selectedFilters.length} selected` }}</span>\n\n      <ul>\n        <li v-for=\"filter in facet.filters\" :key=\"filter.id\">\n          {{ filter.label }}\n        </li>\n      </ul>\n    </template>\n  </Facets>\n</template>\n\n<script>\n  import { Facets } from '@empathyco/x-components/facets';\n\n  export default {\n    components: {\n      Facets\n    }\n  };\n</script>\n```\n\n### Customized usage\n\nCustomized compositions for a specific Facet can be achieved by using a slot with the same id as the\nfacet to customize. For example, the Facet with the id \"color\" requires a composition that differs\nfrom the rest of the Facets. Doing it in a slot with the name \"color\" will apply this customization\njust to the \"color\" Facet. The other facets will fallback to the composition of the default slot.\n\n```vue\n<template>\n  <Facets>\n    <template #color=\"{ facet, selectedFilters }\">\n      <span v-if=\"selectedFilters.length > 0\">{{ `${selectedFilters.length} colors chosen` }}</span>\n\n      <ul v-for=\"filter in facet.filters\" :key=\"filter.id\">\n        <li v-if=\"!filter.selected\">\n          {{ filter.label }}\n        </li>\n      </ul>\n    </template>\n\n    <template #default=\"{ facet }\">\n      <h1>{{ facet.label }}</h1>\n\n      <ul>\n        <li v-for=\"filter in facet.filters\" :key=\"filter.id\">\n          {{ filter.label }}\n        </li>\n      </ul>\n    </template>\n  </Facets>\n</template>\n\n<script>\n  import { Facets } from '@empathyco/x-components/facets';\n\n  export default {\n    components: {\n      Facets\n    }\n  };\n</script>\n```\n\n### Render specific facets I\n\nBy default, this component will render all existing facets. However, it has the renderableFacets\nprop to filter which facets will be rendered. Its value is a string containing the different facets\nids. This value is treated as an include or exclude list (to exclude a facet from being rendered,\njust prefix its id with a `!`). The component will only render included facets and discard excluded\nones. In the following example, the component will only render color and category facets.\n\n```vue\n<template>\n  <Facets renderableFacets=\"color, category\">\n    <template #default=\"{ facet }\">\n      <h1>{{ facet.label }}</h1>\n\n      <ul>\n        <li v-for=\"filter in facet.filters\" :key=\"filter.id\">\n          {{ filter.label }}\n        </li>\n      </ul>\n    </template>\n  </Facets>\n</template>\n\n<script>\n  import { Facets } from '@empathyco/x-components/facets';\n\n  export default {\n    components: {\n      Facets\n    }\n  };\n</script>\n```\n\n### Render specific facets II\n\nExclude facets so the component does not render them. In the following example, the component will\nrender every facet except color and price.\n\n```vue\n<template>\n  <Facets renderableFacets=\"!color, !price\">\n    <template #default=\"{ facet }\">\n      <h1>{{ facet.label }}</h1>\n\n      <ul>\n        <li v-for=\"filter in facet.filters\" :key=\"filter.id\">\n          {{ filter.label }}\n        </li>\n      </ul>\n    </template>\n  </Facets>\n</template>\n\n<script>\n  import { Facets } from '@empathyco/x-components/facets';\n\n  export default {\n    components: {\n      Facets\n    }\n  };\n</script>\n```\n\n### Integrating with the filters components\n\nThere are many components that will help you build your own awesome filters list. `Facets` just\nrenders the list, but what to render for each facet is up to you. Below you can see an example. of\nthe `Facets` component using the `FiltersSearch` `MultiSelectFilters`, `SimpleFilter`, `Filters`,\n`HierarchicalFilter`, `NumberRangeFilter` and `BasePriceFilterLabel`.\n\n```vue\n<template>\n  <Facets>\n    <template #default=\"{ facet, selectedFilters }\">\n      <h1>{{ facet.label }}</h1>\n      <FiltersSearch :filters=\"facet.filters\">\n        <MultiSelectFilters v-slot=\"{ filter }\">\n          <SimpleFilter :filter=\"filter\" />\n        </MultiSelectFilters>\n      </FiltersSearch>\n    </template>\n\n    <template #category=\"{ facet }\">\n      <h1>{{ facet.label }}</h1>\n      <Filters v-slot=\"{ filter }\" :filters=\"facet.filters\">\n        <HierarchicalFilter :filter=\"filter\" />\n      </Filters>\n    </template>\n\n    <template #price=\"{ facet }\">\n      <h1>{{ facet.label }}</h1>\n      <Filters v-slot=\"{ filter }\" :filters=\"facet.filters\">\n        <NumberRangeFilter :filter=\"filter\">\n          <BasePriceFilterLabel :filter=\"filter\" />\n        </NumberRangeFilter>\n      </Filters>\n    </template>\n  </Facets>\n</template>\n\n<script>\n  import {\n    Facets,\n    Filters,\n    FiltersSearch,\n    HierarchicalFilter,\n    MultiSelectFilters,\n    NumberRangeFilter,\n    SimpleFilter\n  } from '@empathyco/x-components/facets';\n\n  import { BasePriceFilterLabel } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      Facets,\n      MultiSelectFilters,\n      FiltersSearch,\n      SimpleFilter,\n      Filters,\n      HierarchicalFilter,\n      NumberRangeFilter,\n      BasePriceFilterLabel\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}