@empathyco/x-components 6.0.0-alpha.9 → 6.0.0-alpha.90

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

@@ -18,15 +18,15 @@ var _sfc_main = defineComponent({
         /** Array of facets ids used to get the selected filters for those facets. */
         facetsIds: Array,
         /** Flag to render the component even if there are no filters selected. */
-        alwaysVisible: Boolean
+        alwaysVisible: Boolean,
     },
-    setup: function (props, { slots }) {
+    setup(props, { slots }) {
         const { selectedFilters, isVisible } = useFacets(props);
         return () => isVisible.value
-            ? slots.default?.({ selectedFilters: selectedFilters.value })[0] ??
-                h('span', `${selectedFilters.value.length}`)
+            ? (slots.default?.({ selectedFilters: selectedFilters.value })[0] ??
+                h('span', `${selectedFilters.value.length}`))
             : '';
-    }
+    },
 });
 
 export { _sfc_main as default };

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

@@ -1 +1 @@
-{"version":3,"file":"selected-filters.vue.js","sources":["../../../../../../src/x-modules/facets/components/lists/selected-filters.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { Facet } from '@empathyco/x-types';\n  import { defineComponent, h, PropType } from 'vue';\n  import { useFacets } from '../../composables/use-facets';\n  import { facetsXModule } from '../../x-module';\n\n  /**\n   * Provides a scoped slot with the selected filters from every facet, or from the facet which\n   * facet id is passed as property.\n   *\n   * The default slot renders the length of the selected filters array.\n   * The property \"alwaysVisible\" handles if the component is rendered if no filters are selected.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'SelectedFilters',\n    xModule: facetsXModule.name,\n    props: {\n      /** Array of facets ids used to get the selected filters for those facets. */\n      facetsIds: Array as PropType<Array<Facet['id']>>,\n      /** Flag to render the component even if there are no filters selected. */\n      alwaysVisible: Boolean\n    },\n    setup: function (props, { slots }) {\n      const { selectedFilters, isVisible } = useFacets(props);\n\n      return () =>\n        isVisible.value\n          ? slots.default?.({ selectedFilters: selectedFilters.value })[0] ??\n            h('span', `${selectedFilters.value.length}`)\n          : '';\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nProvides a scoped slot with the selected filters from every facet, or from the facet which facet id\nis passed as property.\n\nThe default slot renders the length of the selected filters array.\n\n### Basic usage\n\n```vue\n<SelectedFilters />\n```\n\n### Always visible\n\nIf \"alwaysVisible\" is true, the component is rendered no matter if there are some filter selected.\nIf \"alwaysVisible\" is false (default), the component is rendered if there are some filter selected.\n\n```vue\n<SelectedFilters />\n```\n\nOutput:\n\n```html\n<div class=\"x-selected-filters\">1</div>\n```\n\n### Customizing its content\n\nIn this example, renders a custom message using the default scoped slot.\n\n```vue\n<SelectedFilters>\n  <template #default=\"{ selectedFilters }\">\n    Selected filters: {{ selectedFilters.length }}\n  </template>\n</SelectedFilters>\n```\n\nOutput:\n\n```html\n<div class=\"x-selected-filters\">Selected filters: 1</div>\n```\n\nIn this example, the selected filters are filtered by the facetsIds property.\n\n```vue\n<SelectedFilters :facetsIds=\"['brand_facet']\" />\n```\n\n```vue\n<SelectedFilters :facetsIds=\"['brand_facet', 'gender_facet']\">\n  <template #default=\"{ selectedFilters }\">\n    Selected filters: {{ selectedFilters.length }}\n  </template>\n</SelectedFilters>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAME;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;IACvB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE,KAAqC;;AAEhD,QAAA,aAAa,EAAE,OAAM;AACtB,KAAA;AACD,IAAA,KAAK,EAAE,UAAU,KAAK,EAAE,EAAE,KAAM,EAAC,EAAA;QAC/B,MAAM,EAAE,eAAe,EAAE,WAAY,GAAE,SAAS,CAAC,KAAK,CAAC,CAAA;AAEvD,QAAA,OAAO,MACL,SAAS,CAAC,KAAI;AACZ,cAAE,KAAK,CAAC,OAAO,GAAG,EAAE,eAAe,EAAE,eAAe,CAAC,KAAM,EAAC,CAAC,CAAC,CAAC,CAAA;gBAC7D,CAAC,CAAC,MAAM,EAAE,CAAG,EAAA,eAAe,CAAC,KAAK,CAAC,MAAM,CAAA,CAAE,CAAA;cAC3C,EAAE,CAAA;KACV;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"selected-filters.vue.js","sources":["../../../../../../src/x-modules/facets/components/lists/selected-filters.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Facet } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent, h } from 'vue'\nimport { useFacets } from '../../composables/use-facets'\nimport { facetsXModule } from '../../x-module'\n\n/**\n * Provides a scoped slot with the selected filters from every facet, or from the facet which\n * facet id is passed as property.\n *\n * The default slot renders the length of the selected filters array.\n * The property \"alwaysVisible\" handles if the component is rendered if no filters are selected.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'SelectedFilters',\n  xModule: facetsXModule.name,\n  props: {\n    /** Array of facets ids used to get the selected filters for those facets. */\n    facetsIds: Array as PropType<Array<Facet['id']>>,\n    /** Flag to render the component even if there are no filters selected. */\n    alwaysVisible: Boolean,\n  },\n  setup(props, { slots }) {\n    const { selectedFilters, isVisible } = useFacets(props)\n\n    return () =>\n      isVisible.value\n        ? (slots.default?.({ selectedFilters: selectedFilters.value })[0] ??\n          h('span', `${selectedFilters.value.length}`))\n        : ''\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nProvides a scoped slot with the selected filters from every facet, or from the facet which facet id\nis passed as property.\n\nThe default slot renders the length of the selected filters array.\n\n### Basic usage\n\n```vue\n<SelectedFilters />\n```\n\n### Always visible\n\nIf \"alwaysVisible\" is true, the component is rendered no matter if there are some filter selected.\nIf \"alwaysVisible\" is false (default), the component is rendered if there are some filter selected.\n\n```vue\n<SelectedFilters />\n```\n\nOutput:\n\n```html\n<div class=\"x-selected-filters\">1</div>\n```\n\n### Customizing its content\n\nIn this example, renders a custom message using the default scoped slot.\n\n```vue\n<SelectedFilters>\n  <template #default=\"{ selectedFilters }\">\n    Selected filters: {{ selectedFilters.length }}\n  </template>\n</SelectedFilters>\n```\n\nOutput:\n\n```html\n<div class=\"x-selected-filters\">Selected filters: 1</div>\n```\n\nIn this example, the selected filters are filtered by the facetsIds property.\n\n```vue\n<SelectedFilters :facetsIds=\"['brand_facet']\" />\n```\n\n```vue\n<SelectedFilters :facetsIds=\"['brand_facet', 'gender_facet']\">\n  <template #default=\"{ selectedFilters }\">\n    Selected filters: {{ selectedFilters.length }}\n  </template>\n</SelectedFilters>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAOA;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;IACvB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE,KAAqC;;AAEhD,QAAA,aAAa,EAAE,OAAO;AACvB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;QACpB,MAAM,EAAE,eAAe,EAAE,WAAY,GAAE,SAAS,CAAC,KAAK,CAAA,CAAA;AAEtD,QAAA,OAAO,MACL,SAAS,CAAC,KAAI;AACZ,eAAG,KAAK,CAAC,OAAO,GAAG,EAAE,eAAe,EAAE,eAAe,CAAC,KAAM,EAAC,CAAC,CAAC,CAAC,CAAA;gBAC9D,CAAC,CAAC,MAAM,EAAE,CAAG,EAAA,eAAe,CAAC,KAAK,CAAC,MAAM,CAAE,CAAA,CAAC;cAC5C,EAAC,CAAA;KACR;AACF,CAAA,CAAA;;;;"}

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

@@ -1,5 +1,5 @@
 import _sfc_main from './sliced-filters.vue2.js';
-import { openBlock, createElementBlock, normalizeClass, createCommentVNode, renderSlot, Fragment, createTextVNode, createElementVNode, toDisplayString } from 'vue';
+import { openBlock, createElementBlock, normalizeClass, renderSlot, Fragment, createTextVNode, createElementVNode, toDisplayString, createCommentVNode } from 'vue';
 import _export_sfc from '../../../../_virtual/_plugin-vue_export-helper.js';
 
 const _hoisted_1 = { "data-test": "show-more-amount" };
@@ -12,7 +12,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       "data-test": "filters-show-more"
     },
     [
-      createCommentVNode("\n      @slot (Required) Sliced filters content.\n        @binding {Filter[]} slicedFilters - Sliced filters..\n    "),
       renderSlot(_ctx.$slots, "default", { slicedFilters: _ctx.slicedFilters }),
       _ctx.showButton ? (openBlock(), createElementBlock(
         Fragment,
@@ -22,12 +21,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             "button",
             {
               key: 0,
-              onClick: _cache[0] || (_cache[0] = (...args) => _ctx.toggleShowMoreFilters && _ctx.toggleShowMoreFilters(...args)),
               class: normalizeClass(["x-facet-filter x-sliced-filters__button x-sliced-filters__button--show-more", _ctx.buttonClass]),
-              "data-test": "sliced-filters-show-more-button"
+              "data-test": "sliced-filters-show-more-button",
+              onClick: _cache[0] || (_cache[0] = (...args) => _ctx.toggleShowMoreFilters && _ctx.toggleShowMoreFilters(...args))
             },
             [
-              createCommentVNode("\n          @slot Button show more filters.\n            @binding {number} difference - The difference between the filters and max to show.\n        "),
               renderSlot(_ctx.$slots, "show-more", { difference: _ctx.difference }, () => [
                 createTextVNode(" Show "),
                 createElementVNode(
@@ -46,12 +44,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             "button",
             {
               key: 1,
-              onClick: _cache[1] || (_cache[1] = (...args) => _ctx.toggleShowMoreFilters && _ctx.toggleShowMoreFilters(...args)),
               class: normalizeClass(["x-facet-filter x-sliced-filters__button x-sliced-filters__button--show-less", _ctx.buttonClass]),
-              "data-test": "sliced-filters-show-less-button"
+              "data-test": "sliced-filters-show-less-button",
+              onClick: _cache[1] || (_cache[1] = (...args) => _ctx.toggleShowMoreFilters && _ctx.toggleShowMoreFilters(...args))
             },
             [
-              createCommentVNode("\n          @slot Button show less filters.\n            @binding {number} difference - The difference between the filters and max to show.\n        "),
               renderSlot(_ctx.$slots, "show-less", { difference: _ctx.difference }, () => [
                 createTextVNode(" Show "),
                 createElementVNode(

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

@@ -1 +1 @@
-{"version":3,"file":"sliced-filters.vue.js","sources":["../../../../../../src/x-modules/facets/components/lists/sliced-filters.vue"],"sourcesContent":["<template>\n  <div class=\"x-sliced-filters\" :class=\"cssClasses\" data-test=\"filters-show-more\">\n    <!--\n      @slot (Required) Sliced filters content.\n        @binding {Filter[]} slicedFilters - Sliced filters..\n    -->\n    <slot :slicedFilters=\"slicedFilters\" />\n    <template v-if=\"showButton\">\n      <button\n        v-if=\"showMoreFilters\"\n        @click=\"toggleShowMoreFilters\"\n        class=\"x-facet-filter x-sliced-filters__button x-sliced-filters__button--show-more\"\n        :class=\"buttonClass\"\n        data-test=\"sliced-filters-show-more-button\"\n      >\n        <!--\n          @slot Button show more filters.\n            @binding {number} difference - The difference between the filters and max to show.\n        -->\n        <slot name=\"show-more\" :difference=\"difference\">\n          Show\n          <span data-test=\"show-more-amount\">{{ difference }}</span>\n          more filters\n        </slot>\n      </button>\n      <button\n        v-else\n        @click=\"toggleShowMoreFilters\"\n        class=\"x-facet-filter x-sliced-filters__button x-sliced-filters__button--show-less\"\n        :class=\"buttonClass\"\n        data-test=\"sliced-filters-show-less-button\"\n      >\n        <!--\n          @slot Button show less filters.\n            @binding {number} difference - The difference between the filters and max to show.\n        -->\n        <slot name=\"show-less\" :difference=\"difference\">\n          Show\n          <span data-test=\"show-less-amount\">{{ difference }}</span>\n          less filters\n        </slot>\n      </button>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { Filter } from '@empathyco/x-types';\n  import { computed, defineComponent, PropType, provide, ref } from 'vue';\n  import { VueCSSClasses } from '../../../../utils';\n  import { facetsXModule } from '../../x-module';\n  import { useFiltersInjection } from '../../composables/use-filters-injection';\n\n  /**\n   * Component that slices a list of filters and returns them using the default scoped slot,\n   * allowing the user to show the full list of them or slicing them again using the\n   * show more/less buttons.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'SlicedFilters',\n    xModule: facetsXModule.name,\n    props: {\n      /**\n       * The list of filters to be rendered as slots.\n       *\n       * @public\n       */\n      filters: Array as PropType<Filter[]>,\n      /**\n       * This prop is used in the `HierarchicalFilter` component and only in that case. It is necessary\n       * to make the `renderedFilters` to return only the filters of each level of the hierarchy.\n       */\n      parentId: {\n        type: String as PropType<Filter['id']>,\n        required: false\n      },\n      /** The maximum number of filters to show. */\n      max: {\n        type: Number,\n        required: true\n      },\n      buttonClass: String\n    },\n    emits: ['click:show-less', 'click:show-more'],\n    setup(props, { emit }) {\n      /** For showing the remaining filters. */\n      let showMoreFilters = ref(true);\n\n      const renderedFilters = useFiltersInjection(props);\n\n      /**\n       * Show the buttons template when length filters is greater than property max.\n       *\n       * @returns Boolean if length filters is greater than property max.\n       * @internal\n       */\n      const showButton = computed(() => renderedFilters.value.length > props.max);\n\n      /**\n       * Sliced the array of filters depends on click button show more.\n       *\n       * @returns Array of sliced filters or all filters.\n       * @internal\n       */\n      const slicedFilters = computed((): Filter[] => {\n        return showMoreFilters.value\n          ? renderedFilters.value.slice(0, props.max)\n          : renderedFilters.value;\n      });\n      provide('filters', slicedFilters);\n\n      /**\n       * The difference between length filters and max to show.\n       *\n       * @returns Number of remaining filters to show.\n       * @internal\n       */\n      const difference = computed(() => renderedFilters.value.length - props.max);\n\n      /**\n       * Show or hide the remaining filters. It also emits a Vue event based on the clicked button.\n       *\n       * @param event - The click event.\n       *\n       * @internal\n       */\n      const toggleShowMoreFilters = (event: MouseEvent): void => {\n        showMoreFilters.value = !showMoreFilters.value;\n        emit(showMoreFilters.value ? 'click:show-less' : 'click:show-more', event);\n      };\n\n      /**\n       * Adds the dynamic css classes to the component.\n       *\n       * @returns The classes to be added to the component.\n       * @internal\n       */\n      const cssClasses = computed((): VueCSSClasses => {\n        return {\n          'x-sliced-filters--is-sliced': showButton.value\n        };\n      });\n\n      return {\n        cssClasses,\n        toggleShowMoreFilters,\n        showButton,\n        difference,\n        slicedFilters,\n        showMoreFilters\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nThe sliced filters component, takes a list of filters, and the maximum number of filters to render\nas prop. Then, it slices the list of filters using the `max` prop, and returns this new filters list\nusing the default scoped slot.\n\nThe user can click the show more button if he wants to see the full list of filters, or the show\nless button when he wants to reset the filters. This buttons text or icons can be configured via\nslot too. They receive a `difference` prop which can be useful for writing friendlier messages.\n\nThis component is usually integrated with the `Facets` and `Filters` component. It is useful when\nthere are lots of available filters for a single facet, helping to improve the app performance, as\nless nodes are rendered.\n\n### Important\n\nThe component has two ways of receive the filters list, it can be injected by another component or\nbe send it as a prop. If the component doesnt have a parent component that receive and exposed a\nfilters list to their children, it is mandatory to send it as prop.\n\n### Basic usage\n\n```vue\n<template>\n  <Facets v-slot=\"{ facet }\">\n    <SlicedFilters :filters=\"facet.filters\" :max=\"4\">\n      <template #default=\"{ slicedFilters }\">\n        <Filters :items=\"slicedFilters\" v-slot=\"{ filter }\">\n          <SimpleFilter :filter=\"filter\" />\n        </Filters>\n      </template>\n      <template #show-more=\"{ difference }\">\n        Show\n        <span data-test=\"show-more-amount\">{{ difference }}</span>\n        more filters\n      </template>\n      <template #show-less=\"{ difference }\">\n        Show\n        <span data-test=\"show-less-amount\">{{ difference }}</span>\n        less filters\n      </template>\n    </SlicedFilters>\n  </Facets>\n</template>\n<script>\n  import { BaseShowMoreFilters } from '@empathyco/x-components';\n  import { Facets, SimpleFilter, Filters } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      Facets,\n      BaseShowMoreFilters,\n      Filters,\n      SimpleFilter\n    }\n  };\n</script>\n```\n\n> **Using injection**: It can receive the filters list by injection. It only works if it has a\n> parent component that receives and exposes the filters list. Using the injection, It is not\n> necessary to send the prop to the child components, it has to be send it in the parent component ,\n> the rest of components will inject this list.\n\n```vue\n<Facets v-slot=\"{ facet }\">\n  <SlicedFilters :filters=\"facet.filters\" :max=\"4\">\n      <Filters v-slot=\"{ filter }\">\n        <SimpleFilter :filter=\"filter\"/>\n      </Filters>\n    <template #show-more=\"{ difference }\">Show {{ difference }} more filters</template>\n    <template #show-less=\"{ difference }\">Show {{ difference }} less filters</template>\n  </SlicedFilters>\n</Facets>\n```\n\n### Customizing the items with classes\n\nThe `buttonClass` prop can be used to add classes to the show more/less buttons.\n\n```vue live\n<Facets v-slot=\"{ facet }\">\n  <SlicedFilters :filters=\"facet.filters\" :max=\"4\" buttonClass=\"x-facet-filter-lg\">\n    <Filters v-slot=\"{ filter }\">\n      <SimpleFilter :filter=\"filter\"/>\n    </Filters>\n    <template #show-more=\"{ difference }\">Show {{ difference }} more filters</template>\n    <template #show-less=\"{ difference }\">Show {{ difference }} less filters</template>\n  </SlicedFilters>\n</Facets>\n```\n</docs>\n"],"names":["cssClasses","_openBlock","_createElementBlock","_normalizeClass","_createCommentVNode","_renderSlot","_Fragment","_createTextVNode","_createElementVNode"],"mappings":";;;;;;SACY,WADZ,CAAA,IAAA,EAAA,MAAA,EACa,gBAA2BA,KAAU,EAAA,QAAA,EAAA;SAAEC,SAAU,EAAA,EAAAC,kBAAA;AAAA,IAAmB,KAAA;AAAA,IAAA;AAAA,MAAA,KAAA,EAAAC,cAAA,CAAA,CAAA,kBAAA,EAAA,IAAA,CAAA,UAAA,CAAA,CAAA;AAC7E,MAAA,WAAA,EAAA,mBAAA;AAAA,KAAA;AAIA,IAAA;AAAA,MAC0BC,kBAAA,CAAA,sHAAA,CAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAA1B,SAPJ,EAAA,EAAA,aAAA,EAAA,IAAA,CAAA,aAAA,EAAA,CAAA;AAAA,MAAA,IAAA,CAAA,UAAA,IAAAJ,SAAA,EAAA,EAAAC,kBAAA;AAQM,QAAAI,QAAA;AAAA,QAgBS,EAAA,GAAA,EAAA,CAAA,EAAA;AAAA,QAAA;AAAA,UAAA,IAAA,CAxBf,eAUc,IAAAL,SAAA,EAAA,EAAAC,kBAAA;AAAA,YAAA,QAAA;AAAA,YAAA;AAAA,cACN,GAAK,EAAA,CAAA;AAAA,cAEL,gBAAU,CAAiC,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,qBAAA,IAAA,IAAA,CAAA,qBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,cAAA,KAAA,EAAAC,cAAA,CAAA,CAAA,6EAAA,EAAA,IAAA,CAAA,WAAA,CAAA,CAAA;AAE3C,cAAA,WAAA,EAAA,iCAAA;AAAA,aAAA;AAIA,YAAA;AAAA,cAAAC,kBAAA,CAAgD,uJAE9C,CAAA;AAAA,cAA0DC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,WAAA,EAA1D,EAA0D,UAAA,EAAA,IAAA,CAAA,UAAA,EAAV,EAAA,MAAA;AAAA,gBArB1DE,eAqBoE,CAAA,QAAA,CAAA;AAAA,gBAAAC,kBAAA;;;;;;;;;;AArBpE,YAAA,CAAA;AAAA;AAAA,WA2Bc,KAAAP,SAAA,EAAA,EAAAC,kBAAA;AAAA,YAAA,QAAA;AAAA,YAAA;AAAA,cACN,GAAK,EAAA,CAAA;AAAA,cAEL,gBAAU,CAAiC,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,qBAAA,IAAA,IAAA,CAAA,qBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,cAAA,KAAA,EAAAC,cAAA,CAAA,CAAA,6EAAA,EAAA,IAAA,CAAA,WAAA,CAAA,CAAA;AAE3C,cAAA,WAAA,EAAA,iCAAA;AAAA,aAAA;AAIA,YAAA;AAAA,cAAAC,kBAAA,CAAgD,uJAE9C,CAAA;AAAA,cAA0DC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,WAAA,EAA1D,EAA0D,UAAA,EAAA,IAAA,CAAA,UAAA,EAAV,EAAA,MAAA;AAAA,gBAtC1DE,eAsCoE,CAAA,QAAA,CAAA;AAAA,gBAAAC,kBAAA;;;;;;;;;AAtCpE,aAAA;AAAA,YAAA,CAAA;AAAA;AAAA,WAAA,CAAA;AAAA,SAAA;;;;;;;;;;;;;"}
+{"version":3,"file":"sliced-filters.vue.js","sources":["../../../../../../src/x-modules/facets/components/lists/sliced-filters.vue"],"sourcesContent":["<template>\n  <div class=\"x-sliced-filters\" :class=\"cssClasses\" data-test=\"filters-show-more\">\n    <!--\n      @slot (Required) Sliced filters content.\n        @binding {Filter[]} slicedFilters - Sliced filters..\n    -->\n    <slot :sliced-filters=\"slicedFilters\" />\n    <template v-if=\"showButton\">\n      <button\n        v-if=\"showMoreFilters\"\n        class=\"x-facet-filter x-sliced-filters__button x-sliced-filters__button--show-more\"\n        :class=\"buttonClass\"\n        data-test=\"sliced-filters-show-more-button\"\n        @click=\"toggleShowMoreFilters\"\n      >\n        <!--\n          @slot Button show more filters.\n            @binding {number} difference - The difference between the filters and max to show.\n        -->\n        <slot name=\"show-more\" :difference=\"difference\">\n          Show\n          <span data-test=\"show-more-amount\">{{ difference }}</span>\n          more filters\n        </slot>\n      </button>\n      <button\n        v-else\n        class=\"x-facet-filter x-sliced-filters__button x-sliced-filters__button--show-less\"\n        :class=\"buttonClass\"\n        data-test=\"sliced-filters-show-less-button\"\n        @click=\"toggleShowMoreFilters\"\n      >\n        <!--\n          @slot Button show less filters.\n            @binding {number} difference - The difference between the filters and max to show.\n        -->\n        <slot name=\"show-less\" :difference=\"difference\">\n          Show\n          <span data-test=\"show-less-amount\">{{ difference }}</span>\n          less filters\n        </slot>\n      </button>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { Filter } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { VueCSSClasses } from '../../../../utils'\nimport { computed, defineComponent, provide, ref } from 'vue'\nimport { useFiltersInjection } from '../../composables/use-filters-injection'\nimport { facetsXModule } from '../../x-module'\n\n/**\n * Component that slices a list of filters and returns them using the default scoped slot,\n * allowing the user to show the full list of them or slicing them again using the\n * show more/less buttons.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'SlicedFilters',\n  xModule: facetsXModule.name,\n  props: {\n    /**\n     * The list of filters to be rendered as slots.\n     *\n     * @public\n     */\n    filters: Array as PropType<Filter[]>,\n    /**\n     * This prop is used in the `HierarchicalFilter` component and only in that case. It is necessary\n     * to make the `renderedFilters` to return only the filters of each level of the hierarchy.\n     */\n    parentId: {\n      type: String as PropType<Filter['id']>,\n      required: false,\n    },\n    /** The maximum number of filters to show. */\n    max: {\n      type: Number,\n      required: true,\n    },\n    buttonClass: String,\n  },\n  emits: ['click:show-less', 'click:show-more'],\n  setup(props, { emit }) {\n    /** For showing the remaining filters. */\n    const showMoreFilters = ref(true)\n\n    const renderedFilters = useFiltersInjection(props)\n\n    /**\n     * Show the buttons template when length filters is greater than property max.\n     *\n     * @returns Boolean if length filters is greater than property max.\n     * @internal\n     */\n    const showButton = computed(() => renderedFilters.value.length > props.max)\n\n    /**\n     * Sliced the array of filters depends on click button show more.\n     *\n     * @returns Array of sliced filters or all filters.\n     * @internal\n     */\n    const slicedFilters = computed((): Filter[] => {\n      return showMoreFilters.value\n        ? renderedFilters.value.slice(0, props.max)\n        : renderedFilters.value\n    })\n    provide('filters', slicedFilters)\n\n    /**\n     * The difference between length filters and max to show.\n     *\n     * @returns Number of remaining filters to show.\n     * @internal\n     */\n    const difference = computed(() => renderedFilters.value.length - props.max)\n\n    /**\n     * Show or hide the remaining filters. It also emits a Vue event based on the clicked button.\n     *\n     * @param event - The click event.\n     *\n     * @internal\n     */\n    const toggleShowMoreFilters = (event: MouseEvent): void => {\n      showMoreFilters.value = !showMoreFilters.value\n      emit(showMoreFilters.value ? 'click:show-less' : 'click:show-more', event)\n    }\n\n    /**\n     * Adds the dynamic css classes to the component.\n     *\n     * @returns The classes to be added to the component.\n     * @internal\n     */\n    const cssClasses = computed((): VueCSSClasses => {\n      return {\n        'x-sliced-filters--is-sliced': showButton.value,\n      }\n    })\n\n    return {\n      cssClasses,\n      toggleShowMoreFilters,\n      showButton,\n      difference,\n      slicedFilters,\n      showMoreFilters,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nThe sliced filters component, takes a list of filters, and the maximum number of filters to render\nas prop. Then, it slices the list of filters using the `max` prop, and returns this new filters list\nusing the default scoped slot.\n\nThe user can click the show more button if he wants to see the full list of filters, or the show\nless button when he wants to reset the filters. This buttons text or icons can be configured via\nslot too. They receive a `difference` prop which can be useful for writing friendlier messages.\n\nThis component is usually integrated with the `Facets` and `Filters` component. It is useful when\nthere are lots of available filters for a single facet, helping to improve the app performance, as\nless nodes are rendered.\n\n### Important\n\nThe component has two ways of receive the filters list, it can be injected by another component or\nbe send it as a prop. If the component doesnt have a parent component that receive and exposed a\nfilters list to their children, it is mandatory to send it as prop.\n\n### Basic usage\n\n```vue\n<template>\n  <Facets v-slot=\"{ facet }\">\n    <SlicedFilters :filters=\"facet.filters\" :max=\"4\">\n      <template #default=\"{ slicedFilters }\">\n        <Filters :items=\"slicedFilters\" v-slot=\"{ filter }\">\n          <SimpleFilter :filter=\"filter\" />\n        </Filters>\n      </template>\n      <template #show-more=\"{ difference }\">\n        Show\n        <span data-test=\"show-more-amount\">{{ difference }}</span>\n        more filters\n      </template>\n      <template #show-less=\"{ difference }\">\n        Show\n        <span data-test=\"show-less-amount\">{{ difference }}</span>\n        less filters\n      </template>\n    </SlicedFilters>\n  </Facets>\n</template>\n<script>\nimport { BaseShowMoreFilters } from '@empathyco/x-components'\nimport { Facets, SimpleFilter, Filters } from '@empathyco/x-components'\n\nexport default {\n  components: {\n    Facets,\n    BaseShowMoreFilters,\n    Filters,\n    SimpleFilter,\n  },\n}\n</script>\n```\n\n> **Using injection**: It can receive the filters list by injection. It only works if it has a\n> parent component that receives and exposes the filters list. Using the injection, It is not\n> necessary to send the prop to the child components, it has to be send it in the parent component ,\n> the rest of components will inject this list.\n\n```vue\n<Facets v-slot=\"{ facet }\">\n  <SlicedFilters :filters=\"facet.filters\" :max=\"4\">\n      <Filters v-slot=\"{ filter }\">\n        <SimpleFilter :filter=\"filter\"/>\n      </Filters>\n    <template #show-more=\"{ difference }\">Show {{ difference }} more filters</template>\n    <template #show-less=\"{ difference }\">Show {{ difference }} less filters</template>\n  </SlicedFilters>\n</Facets>\n```\n\n### Customizing the items with classes\n\nThe `buttonClass` prop can be used to add classes to the show more/less buttons.\n\n```vue live\n<Facets v-slot=\"{ facet }\">\n  <SlicedFilters :filters=\"facet.filters\" :max=\"4\" buttonClass=\"x-facet-filter-lg\">\n    <Filters v-slot=\"{ filter }\">\n      <SimpleFilter :filter=\"filter\"/>\n    </Filters>\n    <template #show-more=\"{ difference }\">Show {{ difference }} more filters</template>\n    <template #show-less=\"{ difference }\">Show {{ difference }} less filters</template>\n  </SlicedFilters>\n</Facets>\n```\n</docs>\n"],"names":["cssClasses","_openBlock","_createElementBlock","_normalizeClass","showButton","_Fragment","difference","_createTextVNode","_createElementVNode"],"mappings":";;;;;;SACY,WADZ,CAAA,IAAA,EAAA,MAAA,EACa,gBAA2BA,KAAU,EAAA,QAAA,EAAA;SAAEC,SAAU,EAAA,EAAAC,kBAAA;AAAA,IAAmB,KAAA;AAAA,IAAA;AAAA,MAAA,KAAA,EAAAC,cAAA,CAAA,CAAA,kBAAA,EAAA,IAAA,CAAA,UAAA,CAAA,CAAA;MAK7E,WAAwC,EAAA,mBAAA;AAAA,KAAA;AACxBC,IAAAA;AAAAA,MAAAA,UAAAA,CAAAA,IAAAA,CAAAA,MAAAA,EAAhB,SAPJ,EAAA,EAAA,aAAA,EAAA,IAAA,CAAA,aAAA,EAAA,CAAA;AAAA,MAAA,IAAA,CAAA,UAAA,IAAAH,SAAA,EAAA,EAAAC,kBAAA;AAQM,QAAAG,QAAA;AAAA,QAgBS,EAAA,GAAA,EAAA,CAAA,EAAA;AAAA,QAAA;AAAA,UAxBf,IAAA,CAAA,eAAA,IAAAJ,SAAA,EAAA,EAAAC,kBAAA;AAAA,YAUc,QAAA;AAAA,YAAA;AAAA,cAEN,GAAA,EAAA,CAAA;AAAA,cACC,KAAA,EAAKC,+FAAE,IAAqB,CAAA,WAAA,CAAA,CAAA;AAAA,cAAA,WAAA,EAAA,iCAAA;cAM7B,OAIO,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAJiB,KAAYG,qBAI7B,IAAA,IAAA,CAAA,qBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,aAAA;;yBAFL,IAA0D,CAAA,MAAA,EAAA,WAAA,EAA1D,EAA0D,UAAA,EAAA,IAAA,CAAA,UAAA,EAAV,EAAA,MAAA;AAAA,gBArB1DC,eAqBoE,CAAA,QAAA,CAAA;AAAA,gBAAAC,kBAAA;;;;;;;;;;AArBpE,YAAA,CAAA;AAAA;AAAA,WAAA,KAAAP,SAAA,EAAA,EAAAC,kBAAA;AAAA,YA2Bc,QAAA;AAAA,YAAA;AAAA,cAEN,GAAA,EAAA,CAAA;AAAA,cACC,KAAA,EAAKC,+FAAE,IAAqB,CAAA,WAAA,CAAA,CAAA;AAAA,cAAA,WAAA,EAAA,iCAAA;cAM7B,OAIO,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAJiB,KAAYG,qBAI7B,IAAA,IAAA,CAAA,qBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,aAAA;;yBAFL,IAA0D,CAAA,MAAA,EAAA,WAAA,EAA1D,EAA0D,UAAA,EAAA,IAAA,CAAA,UAAA,EAAV,EAAA,MAAA;AAAA,gBAtC1DC,eAsCoE,CAAA,QAAA,CAAA;AAAA,gBAAAC,kBAAA;;;;;;;;;AAtCpE,aAAA;AAAA,YAAA,CAAA;AAAA;AAAA,WAAA,CAAA;AAAA,SAAA;;;;;;;;;;;;;"}

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

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, provide } from 'vue';
-import { facetsXModule } from '../../x-module.js';
 import { useFiltersInjection } from '../../composables/use-filters-injection.js';
+import { facetsXModule } from '../../x-module.js';
 
 /**
  * Component that slices a list of filters and returns them using the default scoped slot,
@@ -25,19 +25,19 @@ var _sfc_main = defineComponent({
          */
         parentId: {
             type: String,
-            required: false
+            required: false,
         },
         /** The maximum number of filters to show. */
         max: {
             type: Number,
-            required: true
+            required: true,
         },
-        buttonClass: String
+        buttonClass: String,
     },
     emits: ['click:show-less', 'click:show-more'],
     setup(props, { emit }) {
         /** For showing the remaining filters. */
-        let showMoreFilters = ref(true);
+        const showMoreFilters = ref(true);
         const renderedFilters = useFiltersInjection(props);
         /**
          * Show the buttons template when length filters is greater than property max.
@@ -84,7 +84,7 @@ var _sfc_main = defineComponent({
          */
         const cssClasses = computed(() => {
             return {
-                'x-sliced-filters--is-sliced': showButton.value
+                'x-sliced-filters--is-sliced': showButton.value,
             };
         });
         return {
@@ -93,9 +93,9 @@ var _sfc_main = defineComponent({
             showButton,
             difference,
             slicedFilters,
-            showMoreFilters
+            showMoreFilters,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

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

@@ -1 +1 @@
-{"version":3,"file":"sliced-filters.vue2.js","sources":["../../../../../../src/x-modules/facets/components/lists/sliced-filters.vue"],"sourcesContent":["<template>\n  <div class=\"x-sliced-filters\" :class=\"cssClasses\" data-test=\"filters-show-more\">\n    <!--\n      @slot (Required) Sliced filters content.\n        @binding {Filter[]} slicedFilters - Sliced filters..\n    -->\n    <slot :slicedFilters=\"slicedFilters\" />\n    <template v-if=\"showButton\">\n      <button\n        v-if=\"showMoreFilters\"\n        @click=\"toggleShowMoreFilters\"\n        class=\"x-facet-filter x-sliced-filters__button x-sliced-filters__button--show-more\"\n        :class=\"buttonClass\"\n        data-test=\"sliced-filters-show-more-button\"\n      >\n        <!--\n          @slot Button show more filters.\n            @binding {number} difference - The difference between the filters and max to show.\n        -->\n        <slot name=\"show-more\" :difference=\"difference\">\n          Show\n          <span data-test=\"show-more-amount\">{{ difference }}</span>\n          more filters\n        </slot>\n      </button>\n      <button\n        v-else\n        @click=\"toggleShowMoreFilters\"\n        class=\"x-facet-filter x-sliced-filters__button x-sliced-filters__button--show-less\"\n        :class=\"buttonClass\"\n        data-test=\"sliced-filters-show-less-button\"\n      >\n        <!--\n          @slot Button show less filters.\n            @binding {number} difference - The difference between the filters and max to show.\n        -->\n        <slot name=\"show-less\" :difference=\"difference\">\n          Show\n          <span data-test=\"show-less-amount\">{{ difference }}</span>\n          less filters\n        </slot>\n      </button>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { Filter } from '@empathyco/x-types';\n  import { computed, defineComponent, PropType, provide, ref } from 'vue';\n  import { VueCSSClasses } from '../../../../utils';\n  import { facetsXModule } from '../../x-module';\n  import { useFiltersInjection } from '../../composables/use-filters-injection';\n\n  /**\n   * Component that slices a list of filters and returns them using the default scoped slot,\n   * allowing the user to show the full list of them or slicing them again using the\n   * show more/less buttons.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'SlicedFilters',\n    xModule: facetsXModule.name,\n    props: {\n      /**\n       * The list of filters to be rendered as slots.\n       *\n       * @public\n       */\n      filters: Array as PropType<Filter[]>,\n      /**\n       * This prop is used in the `HierarchicalFilter` component and only in that case. It is necessary\n       * to make the `renderedFilters` to return only the filters of each level of the hierarchy.\n       */\n      parentId: {\n        type: String as PropType<Filter['id']>,\n        required: false\n      },\n      /** The maximum number of filters to show. */\n      max: {\n        type: Number,\n        required: true\n      },\n      buttonClass: String\n    },\n    emits: ['click:show-less', 'click:show-more'],\n    setup(props, { emit }) {\n      /** For showing the remaining filters. */\n      let showMoreFilters = ref(true);\n\n      const renderedFilters = useFiltersInjection(props);\n\n      /**\n       * Show the buttons template when length filters is greater than property max.\n       *\n       * @returns Boolean if length filters is greater than property max.\n       * @internal\n       */\n      const showButton = computed(() => renderedFilters.value.length > props.max);\n\n      /**\n       * Sliced the array of filters depends on click button show more.\n       *\n       * @returns Array of sliced filters or all filters.\n       * @internal\n       */\n      const slicedFilters = computed((): Filter[] => {\n        return showMoreFilters.value\n          ? renderedFilters.value.slice(0, props.max)\n          : renderedFilters.value;\n      });\n      provide('filters', slicedFilters);\n\n      /**\n       * The difference between length filters and max to show.\n       *\n       * @returns Number of remaining filters to show.\n       * @internal\n       */\n      const difference = computed(() => renderedFilters.value.length - props.max);\n\n      /**\n       * Show or hide the remaining filters. It also emits a Vue event based on the clicked button.\n       *\n       * @param event - The click event.\n       *\n       * @internal\n       */\n      const toggleShowMoreFilters = (event: MouseEvent): void => {\n        showMoreFilters.value = !showMoreFilters.value;\n        emit(showMoreFilters.value ? 'click:show-less' : 'click:show-more', event);\n      };\n\n      /**\n       * Adds the dynamic css classes to the component.\n       *\n       * @returns The classes to be added to the component.\n       * @internal\n       */\n      const cssClasses = computed((): VueCSSClasses => {\n        return {\n          'x-sliced-filters--is-sliced': showButton.value\n        };\n      });\n\n      return {\n        cssClasses,\n        toggleShowMoreFilters,\n        showButton,\n        difference,\n        slicedFilters,\n        showMoreFilters\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nThe sliced filters component, takes a list of filters, and the maximum number of filters to render\nas prop. Then, it slices the list of filters using the `max` prop, and returns this new filters list\nusing the default scoped slot.\n\nThe user can click the show more button if he wants to see the full list of filters, or the show\nless button when he wants to reset the filters. This buttons text or icons can be configured via\nslot too. They receive a `difference` prop which can be useful for writing friendlier messages.\n\nThis component is usually integrated with the `Facets` and `Filters` component. It is useful when\nthere are lots of available filters for a single facet, helping to improve the app performance, as\nless nodes are rendered.\n\n### Important\n\nThe component has two ways of receive the filters list, it can be injected by another component or\nbe send it as a prop. If the component doesnt have a parent component that receive and exposed a\nfilters list to their children, it is mandatory to send it as prop.\n\n### Basic usage\n\n```vue\n<template>\n  <Facets v-slot=\"{ facet }\">\n    <SlicedFilters :filters=\"facet.filters\" :max=\"4\">\n      <template #default=\"{ slicedFilters }\">\n        <Filters :items=\"slicedFilters\" v-slot=\"{ filter }\">\n          <SimpleFilter :filter=\"filter\" />\n        </Filters>\n      </template>\n      <template #show-more=\"{ difference }\">\n        Show\n        <span data-test=\"show-more-amount\">{{ difference }}</span>\n        more filters\n      </template>\n      <template #show-less=\"{ difference }\">\n        Show\n        <span data-test=\"show-less-amount\">{{ difference }}</span>\n        less filters\n      </template>\n    </SlicedFilters>\n  </Facets>\n</template>\n<script>\n  import { BaseShowMoreFilters } from '@empathyco/x-components';\n  import { Facets, SimpleFilter, Filters } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      Facets,\n      BaseShowMoreFilters,\n      Filters,\n      SimpleFilter\n    }\n  };\n</script>\n```\n\n> **Using injection**: It can receive the filters list by injection. It only works if it has a\n> parent component that receives and exposes the filters list. Using the injection, It is not\n> necessary to send the prop to the child components, it has to be send it in the parent component ,\n> the rest of components will inject this list.\n\n```vue\n<Facets v-slot=\"{ facet }\">\n  <SlicedFilters :filters=\"facet.filters\" :max=\"4\">\n      <Filters v-slot=\"{ filter }\">\n        <SimpleFilter :filter=\"filter\"/>\n      </Filters>\n    <template #show-more=\"{ difference }\">Show {{ difference }} more filters</template>\n    <template #show-less=\"{ difference }\">Show {{ difference }} less filters</template>\n  </SlicedFilters>\n</Facets>\n```\n\n### Customizing the items with classes\n\nThe `buttonClass` prop can be used to add classes to the show more/less buttons.\n\n```vue live\n<Facets v-slot=\"{ facet }\">\n  <SlicedFilters :filters=\"facet.filters\" :max=\"4\" buttonClass=\"x-facet-filter-lg\">\n    <Filters v-slot=\"{ filter }\">\n      <SimpleFilter :filter=\"filter\"/>\n    </Filters>\n    <template #show-more=\"{ difference }\">Show {{ difference }} more filters</template>\n    <template #show-less=\"{ difference }\">Show {{ difference }} less filters</template>\n  </SlicedFilters>\n</Facets>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAqDE;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,eAAe;IACrB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,OAAO,EAAE,KAA2B;AACpC;;;AAGE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAgC;AACtC,YAAA,QAAQ,EAAE,KAAI;AACf,SAAA;;AAED,QAAA,GAAG,EAAE;AACH,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD,QAAA,WAAW,EAAE,MAAK;AACnB,KAAA;AACD,IAAA,KAAK,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;AAC7C,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,IAAG,EAAG,EAAA;;AAEnB,QAAA,IAAI,eAAgB,GAAE,GAAG,CAAC,IAAI,CAAC,CAAA;AAE/B,QAAA,MAAM,eAAc,GAAI,mBAAmB,CAAC,KAAK,CAAC,CAAA;AAElD;;;;;AAKE;AACF,QAAA,MAAM,UAAW,GAAE,QAAQ,CAAC,MAAM,eAAe,CAAC,KAAK,CAAC,MAAK,GAAI,KAAK,CAAC,GAAG,CAAC,CAAA;AAE3E;;;;;AAKE;AACF,QAAA,MAAM,gBAAgB,QAAQ,CAAC,MAAgB;YAC7C,OAAO,eAAe,CAAC,KAAI;AACzB,kBAAE,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG,CAAA;AAC1C,kBAAE,eAAe,CAAC,KAAK,CAAA;AAC3B,SAAC,CAAC,CAAA;AACF,QAAA,OAAO,CAAC,SAAS,EAAE,aAAa,CAAC,CAAA;AAEjC;;;;;AAKE;AACF,QAAA,MAAM,UAAW,GAAE,QAAQ,CAAC,MAAM,eAAe,CAAC,KAAK,CAAC,MAAK,GAAI,KAAK,CAAC,GAAG,CAAC,CAAA;AAE3E;;;;;;AAME;AACF,QAAA,MAAM,qBAAoB,GAAI,CAAC,KAAiB,KAAW;AACzD,YAAA,eAAe,CAAC,KAAM,GAAE,CAAC,eAAe,CAAC,KAAK,CAAA;AAC9C,YAAA,IAAI,CAAC,eAAe,CAAC,KAAM,GAAE,iBAAkB,GAAE,iBAAiB,EAAE,KAAK,CAAC,CAAA;AAC5E,SAAC,CAAA;AAED;;;;;AAKE;AACF,QAAA,MAAM,UAAS,GAAI,QAAQ,CAAC,MAAqB;YAC/C,OAAO;gBACL,6BAA6B,EAAE,UAAU,CAAC,KAAI;aAC/C,CAAA;AACH,SAAC,CAAC,CAAA;QAEF,OAAO;YACL,UAAU;YACV,qBAAqB;YACrB,UAAU;YACV,UAAU;YACV,aAAa;YACb,eAAc;SACf,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"sliced-filters.vue2.js","sources":["../../../../../../src/x-modules/facets/components/lists/sliced-filters.vue"],"sourcesContent":["<template>\n  <div class=\"x-sliced-filters\" :class=\"cssClasses\" data-test=\"filters-show-more\">\n    <!--\n      @slot (Required) Sliced filters content.\n        @binding {Filter[]} slicedFilters - Sliced filters..\n    -->\n    <slot :sliced-filters=\"slicedFilters\" />\n    <template v-if=\"showButton\">\n      <button\n        v-if=\"showMoreFilters\"\n        class=\"x-facet-filter x-sliced-filters__button x-sliced-filters__button--show-more\"\n        :class=\"buttonClass\"\n        data-test=\"sliced-filters-show-more-button\"\n        @click=\"toggleShowMoreFilters\"\n      >\n        <!--\n          @slot Button show more filters.\n            @binding {number} difference - The difference between the filters and max to show.\n        -->\n        <slot name=\"show-more\" :difference=\"difference\">\n          Show\n          <span data-test=\"show-more-amount\">{{ difference }}</span>\n          more filters\n        </slot>\n      </button>\n      <button\n        v-else\n        class=\"x-facet-filter x-sliced-filters__button x-sliced-filters__button--show-less\"\n        :class=\"buttonClass\"\n        data-test=\"sliced-filters-show-less-button\"\n        @click=\"toggleShowMoreFilters\"\n      >\n        <!--\n          @slot Button show less filters.\n            @binding {number} difference - The difference between the filters and max to show.\n        -->\n        <slot name=\"show-less\" :difference=\"difference\">\n          Show\n          <span data-test=\"show-less-amount\">{{ difference }}</span>\n          less filters\n        </slot>\n      </button>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { Filter } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { VueCSSClasses } from '../../../../utils'\nimport { computed, defineComponent, provide, ref } from 'vue'\nimport { useFiltersInjection } from '../../composables/use-filters-injection'\nimport { facetsXModule } from '../../x-module'\n\n/**\n * Component that slices a list of filters and returns them using the default scoped slot,\n * allowing the user to show the full list of them or slicing them again using the\n * show more/less buttons.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'SlicedFilters',\n  xModule: facetsXModule.name,\n  props: {\n    /**\n     * The list of filters to be rendered as slots.\n     *\n     * @public\n     */\n    filters: Array as PropType<Filter[]>,\n    /**\n     * This prop is used in the `HierarchicalFilter` component and only in that case. It is necessary\n     * to make the `renderedFilters` to return only the filters of each level of the hierarchy.\n     */\n    parentId: {\n      type: String as PropType<Filter['id']>,\n      required: false,\n    },\n    /** The maximum number of filters to show. */\n    max: {\n      type: Number,\n      required: true,\n    },\n    buttonClass: String,\n  },\n  emits: ['click:show-less', 'click:show-more'],\n  setup(props, { emit }) {\n    /** For showing the remaining filters. */\n    const showMoreFilters = ref(true)\n\n    const renderedFilters = useFiltersInjection(props)\n\n    /**\n     * Show the buttons template when length filters is greater than property max.\n     *\n     * @returns Boolean if length filters is greater than property max.\n     * @internal\n     */\n    const showButton = computed(() => renderedFilters.value.length > props.max)\n\n    /**\n     * Sliced the array of filters depends on click button show more.\n     *\n     * @returns Array of sliced filters or all filters.\n     * @internal\n     */\n    const slicedFilters = computed((): Filter[] => {\n      return showMoreFilters.value\n        ? renderedFilters.value.slice(0, props.max)\n        : renderedFilters.value\n    })\n    provide('filters', slicedFilters)\n\n    /**\n     * The difference between length filters and max to show.\n     *\n     * @returns Number of remaining filters to show.\n     * @internal\n     */\n    const difference = computed(() => renderedFilters.value.length - props.max)\n\n    /**\n     * Show or hide the remaining filters. It also emits a Vue event based on the clicked button.\n     *\n     * @param event - The click event.\n     *\n     * @internal\n     */\n    const toggleShowMoreFilters = (event: MouseEvent): void => {\n      showMoreFilters.value = !showMoreFilters.value\n      emit(showMoreFilters.value ? 'click:show-less' : 'click:show-more', event)\n    }\n\n    /**\n     * Adds the dynamic css classes to the component.\n     *\n     * @returns The classes to be added to the component.\n     * @internal\n     */\n    const cssClasses = computed((): VueCSSClasses => {\n      return {\n        'x-sliced-filters--is-sliced': showButton.value,\n      }\n    })\n\n    return {\n      cssClasses,\n      toggleShowMoreFilters,\n      showButton,\n      difference,\n      slicedFilters,\n      showMoreFilters,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nThe sliced filters component, takes a list of filters, and the maximum number of filters to render\nas prop. Then, it slices the list of filters using the `max` prop, and returns this new filters list\nusing the default scoped slot.\n\nThe user can click the show more button if he wants to see the full list of filters, or the show\nless button when he wants to reset the filters. This buttons text or icons can be configured via\nslot too. They receive a `difference` prop which can be useful for writing friendlier messages.\n\nThis component is usually integrated with the `Facets` and `Filters` component. It is useful when\nthere are lots of available filters for a single facet, helping to improve the app performance, as\nless nodes are rendered.\n\n### Important\n\nThe component has two ways of receive the filters list, it can be injected by another component or\nbe send it as a prop. If the component doesnt have a parent component that receive and exposed a\nfilters list to their children, it is mandatory to send it as prop.\n\n### Basic usage\n\n```vue\n<template>\n  <Facets v-slot=\"{ facet }\">\n    <SlicedFilters :filters=\"facet.filters\" :max=\"4\">\n      <template #default=\"{ slicedFilters }\">\n        <Filters :items=\"slicedFilters\" v-slot=\"{ filter }\">\n          <SimpleFilter :filter=\"filter\" />\n        </Filters>\n      </template>\n      <template #show-more=\"{ difference }\">\n        Show\n        <span data-test=\"show-more-amount\">{{ difference }}</span>\n        more filters\n      </template>\n      <template #show-less=\"{ difference }\">\n        Show\n        <span data-test=\"show-less-amount\">{{ difference }}</span>\n        less filters\n      </template>\n    </SlicedFilters>\n  </Facets>\n</template>\n<script>\nimport { BaseShowMoreFilters } from '@empathyco/x-components'\nimport { Facets, SimpleFilter, Filters } from '@empathyco/x-components'\n\nexport default {\n  components: {\n    Facets,\n    BaseShowMoreFilters,\n    Filters,\n    SimpleFilter,\n  },\n}\n</script>\n```\n\n> **Using injection**: It can receive the filters list by injection. It only works if it has a\n> parent component that receives and exposes the filters list. Using the injection, It is not\n> necessary to send the prop to the child components, it has to be send it in the parent component ,\n> the rest of components will inject this list.\n\n```vue\n<Facets v-slot=\"{ facet }\">\n  <SlicedFilters :filters=\"facet.filters\" :max=\"4\">\n      <Filters v-slot=\"{ filter }\">\n        <SimpleFilter :filter=\"filter\"/>\n      </Filters>\n    <template #show-more=\"{ difference }\">Show {{ difference }} more filters</template>\n    <template #show-less=\"{ difference }\">Show {{ difference }} less filters</template>\n  </SlicedFilters>\n</Facets>\n```\n\n### Customizing the items with classes\n\nThe `buttonClass` prop can be used to add classes to the show more/less buttons.\n\n```vue live\n<Facets v-slot=\"{ facet }\">\n  <SlicedFilters :filters=\"facet.filters\" :max=\"4\" buttonClass=\"x-facet-filter-lg\">\n    <Filters v-slot=\"{ filter }\">\n      <SimpleFilter :filter=\"filter\"/>\n    </Filters>\n    <template #show-more=\"{ difference }\">Show {{ difference }} more filters</template>\n    <template #show-less=\"{ difference }\">Show {{ difference }} less filters</template>\n  </SlicedFilters>\n</Facets>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAsDA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,eAAe;IACrB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,OAAO,EAAE,KAA2B;AACpC;;;AAGE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAgC;AACtC,YAAA,QAAQ,EAAE,KAAK;AAChB,SAAA;;AAED,QAAA,GAAG,EAAE;AACH,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD,QAAA,WAAW,EAAE,MAAM;AACpB,KAAA;AACD,IAAA,KAAK,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;AAC7C,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,IAAG,EAAG,EAAA;;AAEnB,QAAA,MAAM,eAAc,GAAI,GAAG,CAAC,IAAI,CAAA,CAAA;AAEhC,QAAA,MAAM,eAAc,GAAI,mBAAmB,CAAC,KAAK,CAAA,CAAA;AAEjD;;;;;AAKE;AACF,QAAA,MAAM,UAAW,GAAE,QAAQ,CAAC,MAAM,eAAe,CAAC,KAAK,CAAC,SAAS,KAAK,CAAC,GAAG,CAAA,CAAA;AAE1E;;;;;AAKE;AACF,QAAA,MAAM,gBAAgB,QAAQ,CAAC,MAAgB;YAC7C,OAAO,eAAe,CAAC,KAAI;AACzB,kBAAE,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG,CAAA;AAC1C,kBAAE,eAAe,CAAC,KAAI,CAAA;AAC1B,SAAC,CAAA,CAAA;AACD,QAAA,OAAO,CAAC,SAAS,EAAE,aAAa,CAAA,CAAA;AAEhC;;;;;AAKE;AACF,QAAA,MAAM,UAAW,GAAE,QAAQ,CAAC,MAAM,eAAe,CAAC,KAAK,CAAC,SAAS,KAAK,CAAC,GAAG,CAAA,CAAA;AAE1E;;;;;;AAME;AACF,QAAA,MAAM,qBAAoB,GAAI,CAAC,KAAiB,KAAW;AACzD,YAAA,eAAe,CAAC,KAAI,GAAI,CAAC,eAAe,CAAC,KAAI,CAAA;AAC7C,YAAA,IAAI,CAAC,eAAe,CAAC,KAAM,GAAE,iBAAgB,GAAI,iBAAiB,EAAE,KAAK,CAAA,CAAA;AAC3E,SAAA,CAAA;AAEA;;;;;AAKE;AACF,QAAA,MAAM,UAAS,GAAI,QAAQ,CAAC,MAAqB;YAC/C,OAAO;gBACL,6BAA6B,EAAE,UAAU,CAAC,KAAK;aACjD,CAAA;AACF,SAAC,CAAA,CAAA;QAED,OAAO;YACL,UAAU;YACV,qBAAqB;YACrB,UAAU;YACV,UAAU;YACV,aAAa;YACb,eAAe;SACjB,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

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

@@ -2,8 +2,8 @@ import { isBooleanFilter } from '@empathyco/x-types';
 import { defineComponent, computed, provide } from 'vue';
 import { isArrayEmpty } from '../../../../utils/array.js';
 import '../../../../utils/storage.js';
-import { facetsXModule } from '../../x-module.js';
 import { useFiltersInjection } from '../../composables/use-filters-injection.js';
+import { facetsXModule } from '../../x-module.js';
 
 /**
  * Component that sorts a list of filters and returns them using the default scoped slot.
@@ -28,8 +28,8 @@ var _sfc_main = defineComponent({
          */
         parentId: {
             type: String,
-            required: false
-        }
+            required: false,
+        },
     },
     setup(props, { slots }) {
         const renderedFilters = useFiltersInjection(props);
@@ -49,7 +49,7 @@ var _sfc_main = defineComponent({
         });
         provide('filters', sortedFilters);
         return () => slots.default?.({ filters: sortedFilters.value })[0] ?? '';
-    }
+    },
 });
 
 export { _sfc_main as default };

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

@@ -1 +1 @@
-{"version":3,"file":"sorted-filters.vue.js","sources":["../../../../../../src/x-modules/facets/components/lists/sorted-filters.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { BooleanFilter, Filter, isBooleanFilter } from '@empathyco/x-types';\n  import { computed, defineComponent, PropType, provide } from 'vue';\n  import { isArrayEmpty } from '../../../../utils';\n  import { facetsXModule } from '../../x-module';\n  import { useFiltersInjection } from '../../composables/use-filters-injection';\n\n  /**\n   * Component that sorts a list of filters and returns them using the default scoped slot.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'SortedFilters',\n    xModule: facetsXModule.name,\n    props: {\n      /**\n       * The list of filters to be rendered as slots.\n       *\n       * @public\n       */\n      filters: Array as PropType<Filter[]>,\n\n      /**\n       * This prop is used in the `HierarchicalFilter` component and only in that case. It is necessary\n       * to make the `renderedFilters` to return only the filters of each level of the hierarchy.\n       *\n       * @public\n       */\n      parentId: {\n        type: String as PropType<Filter['id']>,\n        required: false\n      }\n    },\n    setup(props, { slots }) {\n      const renderedFilters = useFiltersInjection(props);\n\n      /**\n       * An array of filters with the selected filters at the beginning of the list.\n       *\n       * @returns Array of filters.\n       * @internal\n       */\n      const sortedFilters = computed((): Filter[] => {\n        if (!isArrayEmpty(renderedFilters.value) && isBooleanFilter(renderedFilters.value[0])) {\n          return ([...renderedFilters.value] as BooleanFilter[]).sort(({ selected }) => {\n            return selected ? -1 : 1;\n          });\n        }\n\n        return renderedFilters.value;\n      });\n      provide('filters', sortedFilters);\n\n      return () => slots.default?.({ filters: sortedFilters.value })[0] ?? '';\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nThe sorted filters component takes a list of filters and returns this new filters list sorted by the\n`selected` filter property.\n\n### Remarks\n\n- The component can receive the filters list by property or using the XInjection feature.\n- It also provides the resultant list bound in the default slot or with the XProvide feature.\n\nBoth XInjection and XProvide features are from the extended FiltersInjectionMixin. You don't have to\nuse XInjection and XProvide together, e.g. you can use pass the filters using a prop and then\nreturns the result with XProvide.\n\n### Basic usage\n\n#### Using props and binding the result\n\n```vue\n<template>\n  <Facets v-slot=\"{ facet }\">\n    <SortedFilters :filters=\"facet.filters\" #default=\"{ sortedFilters }\">\n      <Filters :items=\"sortedFilters\" v-slot=\"{ filter }\">\n        <SimpleFilter :filter=\"filter\" />\n      </Filters>\n    </SortedFilters>\n  </Facets>\n</template>\n\n<script>\n  import { Facets, SimpleFilter, Filters } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      Facets,\n      Filters,\n      SimpleFilter\n    }\n  };\n</script>\n```\n\n#### Using XInject and XProvide\n\n```vue\n<Facets v-slot=\"{ facet }\">\n  <FiltersSearch :filters=\"facet.filters\">\n    <SortedFilters>\n      <Filters v-slot=\"{ filter }\">\n        <SimpleFilter :filter=\"filter\"/>\n      </Filters>\n    </SortedFilters>\n  </FiltersSearch>\n</Facets>\n\n<script>\n  import { Facets, FiltersSearch, SimpleFilter, Filters } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      Facets,\n      FiltersSearch,\n      Filters,\n      SimpleFilter\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;AAOE;;;;AAIE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,eAAe;IACrB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,OAAO,EAAE,KAA2B;AAEpC;;;;;AAKE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAgC;AACtC,YAAA,QAAQ,EAAE,KAAI;AAChB,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,eAAc,GAAI,mBAAmB,CAAC,KAAK,CAAC,CAAA;AAElD;;;;;AAKE;AACF,QAAA,MAAM,gBAAgB,QAAQ,CAAC,MAAgB;AAC7C,YAAA,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,KAAK,eAAe,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE;AACrF,gBAAA,OAAQ,CAAC,GAAG,eAAe,CAAC,KAAK,CAAqB,CAAC,IAAI,CAAC,CAAC,EAAE,QAAO,EAAG,KAAK;oBAC5E,OAAO,QAAO,GAAI,CAAC,CAAA,GAAI,CAAC,CAAA;AAC1B,iBAAC,CAAC,CAAA;AACJ,aAAA;YAEA,OAAO,eAAe,CAAC,KAAK,CAAA;AAC9B,SAAC,CAAC,CAAA;AACF,QAAA,OAAO,CAAC,SAAS,EAAE,aAAa,CAAC,CAAA;QAEjC,OAAO,MAAM,KAAK,CAAC,OAAO,GAAG,EAAE,OAAO,EAAE,aAAa,CAAC,KAAM,EAAC,CAAC,CAAC,CAAC,CAAA,IAAK,EAAE,CAAA;KACzE;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"sorted-filters.vue.js","sources":["../../../../../../src/x-modules/facets/components/lists/sorted-filters.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { BooleanFilter, Filter } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { isBooleanFilter } from '@empathyco/x-types'\nimport { computed, defineComponent, provide } from 'vue'\nimport { isArrayEmpty } from '../../../../utils'\nimport { useFiltersInjection } from '../../composables/use-filters-injection'\nimport { facetsXModule } from '../../x-module'\n\n/**\n * Component that sorts a list of filters and returns them using the default scoped slot.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'SortedFilters',\n  xModule: facetsXModule.name,\n  props: {\n    /**\n     * The list of filters to be rendered as slots.\n     *\n     * @public\n     */\n    filters: Array as PropType<Filter[]>,\n\n    /**\n     * This prop is used in the `HierarchicalFilter` component and only in that case. It is necessary\n     * to make the `renderedFilters` to return only the filters of each level of the hierarchy.\n     *\n     * @public\n     */\n    parentId: {\n      type: String as PropType<Filter['id']>,\n      required: false,\n    },\n  },\n  setup(props, { slots }) {\n    const renderedFilters = useFiltersInjection(props)\n\n    /**\n     * An array of filters with the selected filters at the beginning of the list.\n     *\n     * @returns Array of filters.\n     * @internal\n     */\n    const sortedFilters = computed((): Filter[] => {\n      if (!isArrayEmpty(renderedFilters.value) && isBooleanFilter(renderedFilters.value[0])) {\n        return ([...renderedFilters.value] as BooleanFilter[]).sort(({ selected }) => {\n          return selected ? -1 : 1\n        })\n      }\n\n      return renderedFilters.value\n    })\n    provide('filters', sortedFilters)\n\n    return () => slots.default?.({ filters: sortedFilters.value })[0] ?? ''\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nThe sorted filters component takes a list of filters and returns this new filters list sorted by the\n`selected` filter property.\n\n### Remarks\n\n- The component can receive the filters list by property or using the XInjection feature.\n- It also provides the resultant list bound in the default slot or with the XProvide feature.\n\nBoth XInjection and XProvide features are from the extended FiltersInjectionMixin. You don't have to\nuse XInjection and XProvide together, e.g. you can use pass the filters using a prop and then\nreturns the result with XProvide.\n\n### Basic usage\n\n#### Using props and binding the result\n\n```vue\n<template>\n  <Facets v-slot=\"{ facet }\">\n    <SortedFilters :filters=\"facet.filters\" #default=\"{ sortedFilters }\">\n      <Filters :items=\"sortedFilters\" v-slot=\"{ filter }\">\n        <SimpleFilter :filter=\"filter\" />\n      </Filters>\n    </SortedFilters>\n  </Facets>\n</template>\n\n<script>\nimport { Facets, SimpleFilter, Filters } from '@empathyco/x-components'\n\nexport default {\n  components: {\n    Facets,\n    Filters,\n    SimpleFilter,\n  },\n}\n</script>\n```\n\n#### Using XInject and XProvide\n\n```vue\n<Facets v-slot=\"{ facet }\">\n  <FiltersSearch :filters=\"facet.filters\">\n    <SortedFilters>\n      <Filters v-slot=\"{ filter }\">\n        <SimpleFilter :filter=\"filter\"/>\n      </Filters>\n    </SortedFilters>\n  </FiltersSearch>\n</Facets>\n\n<script>\nimport { Facets, FiltersSearch, SimpleFilter, Filters } from '@empathyco/x-components'\n\nexport default {\n  components: {\n    Facets,\n    FiltersSearch,\n    Filters,\n    SimpleFilter,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;AASA;;;;AAIE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,eAAe;IACrB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,OAAO,EAAE,KAA2B;AAEpC;;;;;AAKE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAgC;AACtC,YAAA,QAAQ,EAAE,KAAK;AAChB,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,eAAc,GAAI,mBAAmB,CAAC,KAAK,CAAA,CAAA;AAEjD;;;;;AAKE;AACF,QAAA,MAAM,gBAAgB,QAAQ,CAAC,MAAgB;AAC7C,YAAA,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,KAAK,eAAe,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE;AACrF,gBAAA,OAAQ,CAAC,GAAG,eAAe,CAAC,KAAK,CAAqB,CAAC,IAAI,CAAC,CAAC,EAAE,QAAO,EAAG,KAAK;oBAC5E,OAAO,QAAO,GAAI,CAAC,IAAI,CAAA,CAAA;AACzB,iBAAC,CAAA,CAAA;AACH,aAAA;YAEA,OAAO,eAAe,CAAC,KAAI,CAAA;AAC7B,SAAC,CAAA,CAAA;AACD,QAAA,OAAO,CAAC,SAAS,EAAE,aAAa,CAAA,CAAA;QAEhC,OAAO,MAAM,KAAK,CAAC,OAAO,GAAG,EAAE,OAAO,EAAE,aAAa,CAAC,KAAM,EAAC,CAAC,CAAC,CAAC,CAAA,IAAK,EAAC,CAAA;KACvE;AACF,CAAA,CAAA;;;;"}

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

@@ -1,7 +1,7 @@
 import { defineComponent, inject, computed, watch } from 'vue';
-import { createRawFilters } from '../../../utils/filters.js';
-import { isArrayEmpty } from '../../../utils/array.js';
 import { useXBus } from '../../../composables/use-x-bus.js';
+import { isArrayEmpty } from '../../../utils/array.js';
+import { createRawFilters } from '../../../utils/filters.js';
 import { facetsXModule } from '../x-module.js';
 
 /**
@@ -24,8 +24,8 @@ var _sfc_main = defineComponent({
          */
         filters: {
             type: Array,
-            default: () => []
-        }
+            default: () => [],
+        },
     },
     setup(props, { slots }) {
         const xBus = useXBus();
@@ -63,7 +63,7 @@ var _sfc_main = defineComponent({
          */
         watch(preselectedFilters, emitPreselectedFilters, { immediate: true });
         return () => slots.default?.()[0] ?? '';
-    }
+    },
 });
 
 export { _sfc_main as default };

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

@@ -1 +1 @@
-{"version":3,"file":"preselected-filters.vue.js","sources":["../../../../../src/x-modules/facets/components/preselected-filters.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { defineComponent, PropType, watch, computed, inject } from 'vue';\n  import { createRawFilters } from '../../../utils/filters';\n  import { isArrayEmpty } from '../../../utils/array';\n  import { SnippetConfig } from '../../../x-installer/api/api.types';\n  import { useXBus } from '../../../composables/use-x-bus';\n  import { facetsXModule } from '../x-module';\n\n  /**\n   * This component emits {@link FacetsXEvents.PreselectedFiltersProvided} when a preselected filter\n   * is set in the snippet config or by using the prop of the component.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'PreselectedFilters',\n    xModule: facetsXModule.name,\n    props: {\n      /**\n       * A list of filters to preselect.\n       *\n       * @remarks Emits the {@link FacetsXEvents.PreselectedFiltersProvided} when the\n       * component is created.\n       *\n       * @public\n       */\n      filters: {\n        type: Array as PropType<string[]>,\n        default: () => []\n      }\n    },\n    setup(props, { slots }) {\n      const xBus = useXBus();\n\n      /**\n       * Injects {@link SnippetConfig} provided by an ancestor as snippetConfig\n       * and sets is as a ref to get synced when it changes.\n       *\n       * @internal\n       */\n      const snippetConfig = inject<SnippetConfig>('snippetConfig');\n\n      /**\n       * Gets the provided preselected filters prioritizing the {@link SnippetConfig} over the\n       * filters prop.\n       *\n       * @returns An array of filter's ids.\n       * @internal\n       */\n      const preselectedFilters = computed<string[]>(() => {\n        return snippetConfig?.filters ?? props.filters;\n      });\n\n      /**\n       * Emits the {@link FacetsXEvents.PreselectedFiltersProvided} to save\n       * the provided filters in the state.\n       *\n       * @internal\n       */\n      const emitPreselectedFilters = (): void => {\n        if (!isArrayEmpty(preselectedFilters.value)) {\n          xBus.emit('PreselectedFiltersProvided', createRawFilters(preselectedFilters.value));\n        }\n      };\n\n      /**\n       * Emits the {@link FacetsXEvents.PreselectedFiltersProvided} when the\n       * computed prop changes.\n       */\n      watch(preselectedFilters, emitPreselectedFilters, { immediate: true });\n\n      return () => slots.default?.()[0] ?? '';\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n[`PreselectedFiltersProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts).\n\n## See it in action\n\n_See how the event is triggered when the component is rendered._\n\n```vue\n<template>\n  <PreselectedFilters />\n</template>\n\n<script>\n  import { PreselectedFilters } from '@empathyco/x-components';\n  export default {\n    name: 'PreselectedFiltersDemo',\n    components: {\n      PreselectedFilters\n    },\n    provide: {\n      snippetConfig: {\n        filters: ['{!tag=brand_facet}brand_facet:\"Lego\"', '{!tag=age_facet}age_facet:\"toddler\"']\n      }\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the preselected filters have been configured to use a list of configured filters by\nprop:\n\n```vue\n<template>\n  <PreselectedFilters :filters=\"filters\" />\n</template>\n\n<script>\n  import { PreselectedFilters } from '@empathyco/x-components';\n  export default {\n    name: 'PreselectedFiltersDemo',\n    components: {\n      PreselectedFilters\n    },\n    computed: {\n      filters() {\n        return ['{!tag=brand_facet}brand_facet:\"Lego\"', '{!tag=age_facet}age_facet:\"toddler\"'];\n      }\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAQE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;;;;AAOE;AACF,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,KAA2B;AACjC,YAAA,OAAO,EAAE,MAAM,EAAC;AAClB,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,IAAG,GAAI,OAAO,EAAE,CAAA;AAEtB;;;;;AAKE;AACF,QAAA,MAAM,aAAY,GAAI,MAAM,CAAgB,eAAe,CAAC,CAAA;AAE5D;;;;;;AAME;AACF,QAAA,MAAM,kBAAiB,GAAI,QAAQ,CAAW,MAAM;AAClD,YAAA,OAAO,aAAa,EAAE,OAAQ,IAAG,KAAK,CAAC,OAAO,CAAA;AAChD,SAAC,CAAC,CAAA;AAEF;;;;;AAKE;QACF,MAAM,sBAAuB,GAAE,MAAY;AACzC,YAAA,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE;AAC3C,gBAAA,IAAI,CAAC,IAAI,CAAC,4BAA4B,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC,CAAA;AACrF,aAAA;AACF,SAAC,CAAA;AAED;;;AAGE;QACF,KAAK,CAAC,kBAAkB,EAAE,sBAAsB,EAAE,EAAE,SAAS,EAAE,IAAG,EAAG,CAAC,CAAA;AAEtE,QAAA,OAAO,MAAM,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,CAAA,IAAK,EAAE,CAAA;KACzC;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"preselected-filters.vue.js","sources":["../../../../../src/x-modules/facets/components/preselected-filters.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { SnippetConfig } from '../../../x-installer/api/api.types'\nimport { computed, defineComponent, inject, watch } from 'vue'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { isArrayEmpty } from '../../../utils/array'\nimport { createRawFilters } from '../../../utils/filters'\nimport { facetsXModule } from '../x-module'\n\n/**\n * This component emits {@link FacetsXEvents.PreselectedFiltersProvided} when a preselected filter\n * is set in the snippet config or by using the prop of the component.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'PreselectedFilters',\n  xModule: facetsXModule.name,\n  props: {\n    /**\n     * A list of filters to preselect.\n     *\n     * @remarks Emits the {@link FacetsXEvents.PreselectedFiltersProvided} when the\n     * component is created.\n     *\n     * @public\n     */\n    filters: {\n      type: Array as PropType<string[]>,\n      default: () => [],\n    },\n  },\n  setup(props, { slots }) {\n    const xBus = useXBus()\n\n    /**\n     * Injects {@link SnippetConfig} provided by an ancestor as snippetConfig\n     * and sets is as a ref to get synced when it changes.\n     *\n     * @internal\n     */\n    const snippetConfig = inject<SnippetConfig>('snippetConfig')\n\n    /**\n     * Gets the provided preselected filters prioritizing the {@link SnippetConfig} over the\n     * filters prop.\n     *\n     * @returns An array of filter's ids.\n     * @internal\n     */\n    const preselectedFilters = computed<string[]>(() => {\n      return snippetConfig?.filters ?? props.filters\n    })\n\n    /**\n     * Emits the {@link FacetsXEvents.PreselectedFiltersProvided} to save\n     * the provided filters in the state.\n     *\n     * @internal\n     */\n    const emitPreselectedFilters = (): void => {\n      if (!isArrayEmpty(preselectedFilters.value)) {\n        xBus.emit('PreselectedFiltersProvided', createRawFilters(preselectedFilters.value))\n      }\n    }\n\n    /**\n     * Emits the {@link FacetsXEvents.PreselectedFiltersProvided} when the\n     * computed prop changes.\n     */\n    watch(preselectedFilters, emitPreselectedFilters, { immediate: true })\n\n    return () => slots.default?.()[0] ?? ''\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n[`PreselectedFiltersProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts).\n\n## See it in action\n\n_See how the event is triggered when the component is rendered._\n\n```vue\n<template>\n  <PreselectedFilters />\n</template>\n\n<script>\nimport { PreselectedFilters } from '@empathyco/x-components'\nexport default {\n  name: 'PreselectedFiltersDemo',\n  components: {\n    PreselectedFilters,\n  },\n  provide: {\n    snippetConfig: {\n      filters: ['{!tag=brand_facet}brand_facet:\"Lego\"', '{!tag=age_facet}age_facet:\"toddler\"'],\n    },\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the preselected filters have been configured to use a list of configured filters by\nprop:\n\n```vue\n<template>\n  <PreselectedFilters :filters=\"filters\" />\n</template>\n\n<script>\nimport { PreselectedFilters } from '@empathyco/x-components'\nexport default {\n  name: 'PreselectedFiltersDemo',\n  components: {\n    PreselectedFilters,\n  },\n  computed: {\n    filters() {\n      return ['{!tag=brand_facet}brand_facet:\"Lego\"', '{!tag=age_facet}age_facet:\"toddler\"']\n    },\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AASA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;;;;AAOE;AACF,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,KAA2B;AACjC,YAAA,OAAO,EAAE,MAAM,EAAE;AAClB,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,IAAG,GAAI,OAAO,EAAC,CAAA;AAErB;;;;;AAKE;AACF,QAAA,MAAM,aAAY,GAAI,MAAM,CAAgB,eAAe,CAAA,CAAA;AAE3D;;;;;;AAME;AACF,QAAA,MAAM,kBAAiB,GAAI,QAAQ,CAAW,MAAM;AAClD,YAAA,OAAO,aAAa,EAAE,OAAQ,IAAG,KAAK,CAAC,OAAM,CAAA;AAC/C,SAAC,CAAA,CAAA;AAED;;;;;AAKE;QACF,MAAM,sBAAuB,GAAE,MAAY;AACzC,YAAA,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE;AAC3C,gBAAA,IAAI,CAAC,IAAI,CAAC,4BAA4B,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAA,CAAA;AACpF,aAAA;AACF,SAAA,CAAA;AAEA;;;AAGE;QACF,KAAK,CAAC,kBAAkB,EAAE,sBAAsB,EAAE,EAAE,SAAS,EAAE,MAAM,CAAA,CAAA;AAErE,QAAA,OAAO,MAAM,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,CAAE,IAAG,EAAC,CAAA;KACvC;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/facets/composables/use-facets.js

@@ -7,14 +7,10 @@ import { isArrayEmpty } from '../../../utils/array.js';
  *
  * @param props - Composable props.
  * @returns Composable.
- *
  * @public
  */
 function useFacets(props) {
-    const { selectedFiltersByFacet, selectedFilters: selectedFiltersGetter } = useGetter('facets', [
-        'selectedFiltersByFacet',
-        'selectedFilters'
-    ]);
+    const { selectedFiltersByFacet, selectedFilters: selectedFiltersGetter } = useGetter('facets');
     /**
      * Get selected filters.
      * If there are facets ids, get selected filters whose facet id match with some of facets ids.
@@ -28,7 +24,7 @@ function useFacets(props) {
                 ...selectedFilters,
                 ...(Array.isArray(selectedFiltersByFacet.value[facetId])
                     ? selectedFiltersByFacet.value[facetId]
-                    : [])
+                    : []),
             ], []);
         }
         return selectedFiltersGetter.value;
@@ -50,7 +46,7 @@ function useFacets(props) {
         selectedFiltersByFacet,
         selectedFilters,
         hasSelectedFilters,
-        isVisible
+        isVisible,
     };
 }
 

package/js/x-modules/facets/composables/use-facets.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-facets.js","sources":["../../../../../src/x-modules/facets/composables/use-facets.ts"],"sourcesContent":["import { Facet, Filter } from '@empathyco/x-types';\nimport { computed, ComputedRef } from 'vue';\nimport { useGetter } from '../../../composables/use-getter';\nimport { isArrayEmpty } from '../../../utils/array';\nimport { FiltersByFacet } from '../store/types';\n\n/**\n * Composable to share Facets logic.\n *\n * @param props - Composable props.\n * @returns Composable.\n *\n * @public\n */\nexport function useFacets(props: {\n  /** Array of facets ids used to get the selected filters for those facets. */\n  facetsIds?: Array<Facet['id']>;\n  /** Flag to render the component even if there are no filters selected. */\n  alwaysVisible?: boolean;\n}) {\n  const { selectedFiltersByFacet, selectedFilters: selectedFiltersGetter } = useGetter('facets', [\n    'selectedFiltersByFacet',\n    'selectedFilters'\n  ]) as {\n    /** Dictionary of filters {@link FiltersByFacet} filtered by facet id. */\n    selectedFiltersByFacet: ComputedRef<FiltersByFacet>;\n    /** Get the selected filters from store. */\n    selectedFilters: ComputedRef<Filter[]>;\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   */\n  const selectedFilters = computed<Filter[]>(() => {\n    if (props.facetsIds) {\n      return (props.facetsIds as string[]).reduce(\n        (selectedFilters, facetId) => [\n          ...selectedFilters,\n          ...(Array.isArray(selectedFiltersByFacet.value[facetId])\n            ? selectedFiltersByFacet.value[facetId]\n            : [])\n        ],\n        [] as Filter[]\n      );\n    }\n\n    return selectedFiltersGetter.value;\n  });\n\n  /**\n   * Check if there are selected filters.\n   *\n   * @returns True or false depends on if there are selected filters.\n   */\n  const hasSelectedFilters = computed<boolean>(() => !isArrayEmpty(selectedFilters.value));\n\n  /**\n   * Flag representing if the component should be visible/rendered or not.\n   *\n   * @returns True whenever alwaysVisible is true or has selected filters. False\n   * otherwise.\n   */\n  const isVisible = computed<boolean>(() => !!props.alwaysVisible || hasSelectedFilters.value);\n\n  return {\n    selectedFiltersByFacet,\n    selectedFilters,\n    hasSelectedFilters,\n    isVisible\n  };\n}\n"],"names":[],"mappings":";;;;AAMA;;;;;;;AAOG;AACG,SAAU,SAAS,CAAC,KAKzB,EAAA;IACC,MAAM,EAAE,sBAAsB,EAAE,eAAe,EAAE,qBAAqB,EAAE,GAAG,SAAS,CAAC,QAAQ,EAAE;QAC7F,wBAAwB;QACxB,iBAAiB;AAClB,KAAA,CAKA,CAAC;AAEF;;;;;;AAMG;AACH,IAAA,MAAM,eAAe,GAAG,QAAQ,CAAW,MAAK;QAC9C,IAAI,KAAK,CAAC,SAAS,EAAE;AACnB,YAAA,OAAQ,KAAK,CAAC,SAAsB,CAAC,MAAM,CACzC,CAAC,eAAe,EAAE,OAAO,KAAK;AAC5B,gBAAA,GAAG,eAAe;gBAClB,IAAI,KAAK,CAAC,OAAO,CAAC,sBAAsB,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;AACtD,sBAAE,sBAAsB,CAAC,KAAK,CAAC,OAAO,CAAC;sBACrC,EAAE;aACP,EACD,EAAc,CACf,CAAC;AACH,SAAA;QAED,OAAO,qBAAqB,CAAC,KAAK,CAAC;AACrC,KAAC,CAAC,CAAC;AAEH;;;;AAIG;AACH,IAAA,MAAM,kBAAkB,GAAG,QAAQ,CAAU,MAAM,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC;AAEzF;;;;;AAKG;AACH,IAAA,MAAM,SAAS,GAAG,QAAQ,CAAU,MAAM,CAAC,CAAC,KAAK,CAAC,aAAa,IAAI,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAE7F,OAAO;QACL,sBAAsB;QACtB,eAAe;QACf,kBAAkB;QAClB,SAAS;KACV,CAAC;AACJ;;;;"}
+{"version":3,"file":"use-facets.js","sources":["../../../../../src/x-modules/facets/composables/use-facets.ts"],"sourcesContent":["import type { Facet, Filter } from '@empathyco/x-types'\nimport type { ComputedRef } from 'vue'\nimport type { FiltersByFacet } from '../store/types'\nimport { computed } from 'vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { isArrayEmpty } from '../../../utils/array'\n\n/**\n * Composable to share Facets logic.\n *\n * @param props - Composable props.\n * @returns Composable.\n * @public\n */\nexport function useFacets(props: {\n  /** Array of facets ids used to get the selected filters for those facets. */\n  facetsIds?: Array<Facet['id']>\n  /** Flag to render the component even if there are no filters selected. */\n  alwaysVisible?: boolean\n}) {\n  const { selectedFiltersByFacet, selectedFilters: selectedFiltersGetter } = useGetter('facets', [\n    'selectedFiltersByFacet',\n    'selectedFilters',\n  ]) as {\n    /** Dictionary of filters {@link FiltersByFacet} filtered by facet id. */\n    selectedFiltersByFacet: ComputedRef<FiltersByFacet>\n    /** Get the selected filters from store. */\n    selectedFilters: ComputedRef<Filter[]>\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   */\n  const selectedFilters = computed<Filter[]>(() => {\n    if (props.facetsIds) {\n      return (props.facetsIds as string[]).reduce(\n        (selectedFilters, facetId) => [\n          ...selectedFilters,\n          ...(Array.isArray(selectedFiltersByFacet.value[facetId])\n            ? selectedFiltersByFacet.value[facetId]\n            : []),\n        ],\n        [] as Filter[],\n      )\n    }\n\n    return selectedFiltersGetter.value\n  })\n\n  /**\n   * Check if there are selected filters.\n   *\n   * @returns True or false depends on if there are selected filters.\n   */\n  const hasSelectedFilters = computed<boolean>(() => !isArrayEmpty(selectedFilters.value))\n\n  /**\n   * Flag representing if the component should be visible/rendered or not.\n   *\n   * @returns True whenever alwaysVisible is true or has selected filters. False\n   * otherwise.\n   */\n  const isVisible = computed<boolean>(() => !!props.alwaysVisible || hasSelectedFilters.value)\n\n  return {\n    selectedFiltersByFacet,\n    selectedFilters,\n    hasSelectedFilters,\n    isVisible,\n  }\n}\n"],"names":[],"mappings":";;;;AAOA;;;;;;AAMG;AACG,SAAU,SAAS,CAAC,KAKzB,EAAA;IACC,MAAM,EAAE,sBAAsB,EAAE,eAAe,EAAE,qBAAqB,EAAE,GAAG,SAAS,CAAC,QAGpF,CAKA,CAAA;AAED;;;;;;AAMG;AACH,IAAA,MAAM,eAAe,GAAG,QAAQ,CAAW,MAAK;QAC9C,IAAI,KAAK,CAAC,SAAS,EAAE;AACnB,YAAA,OAAQ,KAAK,CAAC,SAAsB,CAAC,MAAM,CACzC,CAAC,eAAe,EAAE,OAAO,KAAK;AAC5B,gBAAA,GAAG,eAAe;gBAClB,IAAI,KAAK,CAAC,OAAO,CAAC,sBAAsB,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;AACtD,sBAAE,sBAAsB,CAAC,KAAK,CAAC,OAAO,CAAC;sBACrC,EAAE;aACP,EACD,EAAc,CACf,CAAA;AACF,SAAA;QAED,OAAO,qBAAqB,CAAC,KAAK,CAAA;AACpC,KAAC,CAAC,CAAA;AAEF;;;;AAIG;AACH,IAAA,MAAM,kBAAkB,GAAG,QAAQ,CAAU,MAAM,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAA;AAExF;;;;;AAKG;AACH,IAAA,MAAM,SAAS,GAAG,QAAQ,CAAU,MAAM,CAAC,CAAC,KAAK,CAAC,aAAa,IAAI,kBAAkB,CAAC,KAAK,CAAC,CAAA;IAE5F,OAAO;QACL,sBAAsB;QACtB,eAAe;QACf,kBAAkB;QAClB,SAAS;KACV,CAAA;AACH;;;;"}

package/js/x-modules/facets/composables/use-filters-injection.js

@@ -7,7 +7,6 @@ import { isArrayEmpty } from '../../../utils/array.js';
  *
  * @param props - Composable props.
  * @returns An array of filters.
- *
  * @public
  */
 function useFiltersInjection(props) {
@@ -28,7 +27,6 @@ function useFiltersInjection(props) {
         return (props.filters ??
             injectedFilters?.value ??
             //TODO: add here logger
-            //eslint-disable-next-line no-console
             console.warn('It is necessary to pass a prop or inject the list of filters'));
     });
     /**

package/js/x-modules/facets/composables/use-filters-injection.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-filters-injection.js","sources":["../../../../../src/x-modules/facets/composables/use-filters-injection.ts"],"sourcesContent":["import { Filter, HierarchicalFilter, isHierarchicalFilter } from '@empathyco/x-types';\nimport { computed, inject, Ref } from 'vue';\nimport { isArrayEmpty } from '../../../utils/array';\n\n/**\n * Composable to share filters injection logic.\n *\n * @param props - Composable props.\n * @returns An array of filters.\n *\n * @public\n */\nexport function useFiltersInjection(props: {\n  /** The list of filters to be rendered as slots. */\n  filters?: Filter[];\n  /**\n    This prop is used in the `HierarchicalFilter` component and only in that case. It is necessary\n   to make the `renderedFilters` to return only the filters of each level of the hierarchy.\n   */\n  parentId?: Filter['id'];\n}) {\n  /**\n   * The injected filters array.\n   *\n   * @public\n   */\n  const injectedFilters = inject<Ref<Filter[]> | undefined>('filters', undefined);\n\n  /**\n   * An array of filters formed by those that are passed through prop or injected.\n   *\n   * @returns An array of filters.\n   *\n   * @internal\n   */\n  const propOrInjectedFilters = computed((): void | Filter[] => {\n    return (\n      props.filters ??\n      injectedFilters?.value ??\n      //TODO: add here logger\n      //eslint-disable-next-line no-console\n      console.warn('It is necessary to pass a prop or inject the list of filters')\n    );\n  });\n\n  /**\n   * In the case that the filters are {@link @empathyco/x-types#HierarchicalFilter}, this method\n   * removes from the filter list passed as a param, the filters that are not part of the level of\n   * the hierarchy, depending on the value of the `parentId` prop. In case this prop is undefined,\n   * then only the first level of filters hierarchy are returned. In the case the prop `parentId` is\n   * defined, then only the filters with the same `parentId` are returned.\n   *\n   * @param filters - The list of the filters to apply the filter.\n   * @returns The list of the filters filtered by parentId.\n   * @internal\n   */\n  const filterByParentId = (filters: Filter[]): Filter[] => {\n    if (!isArrayEmpty(filters) && isHierarchicalFilter(filters[0])) {\n      return (filters as HierarchicalFilter[]).filter(\n        filter => filter.parentId === (props.parentId ?? null)\n      );\n    } else {\n      return filters;\n    }\n  };\n\n  /**\n   * The prop or injected filters array, filtered by parentId if they are\n   * {@link @empathyco/x-types#HierarchicalFilter}.\n   *\n   * @returns An array of filters.\n   *\n   * @internal\n   */\n  return computed<Filter[]>(() => filterByParentId(propOrInjectedFilters.value as Filter[]));\n}\n"],"names":[],"mappings":";;;;AAIA;;;;;;;AAOG;AACG,SAAU,mBAAmB,CAAC,KAQnC,EAAA;AACC;;;;AAIG;IACH,MAAM,eAAe,GAAG,MAAM,CAA4B,SAAS,EAAE,SAAS,CAAC,CAAC;AAEhF;;;;;;AAMG;AACH,IAAA,MAAM,qBAAqB,GAAG,QAAQ,CAAC,MAAsB;QAC3D,QACE,KAAK,CAAC,OAAO;AACb,YAAA,eAAe,EAAE,KAAK;;;AAGtB,YAAA,OAAO,CAAC,IAAI,CAAC,8DAA8D,CAAC,EAC5E;AACJ,KAAC,CAAC,CAAC;AAEH;;;;;;;;;;AAUG;AACH,IAAA,MAAM,gBAAgB,GAAG,CAAC,OAAiB,KAAc;AACvD,QAAA,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,oBAAoB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE;YAC9D,OAAQ,OAAgC,CAAC,MAAM,CAC7C,MAAM,IAAI,MAAM,CAAC,QAAQ,MAAM,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,CACvD,CAAC;AACH,SAAA;AAAM,aAAA;AACL,YAAA,OAAO,OAAO,CAAC;AAChB,SAAA;AACH,KAAC,CAAC;AAEF;;;;;;;AAOG;AACH,IAAA,OAAO,QAAQ,CAAW,MAAM,gBAAgB,CAAC,qBAAqB,CAAC,KAAiB,CAAC,CAAC,CAAC;AAC7F;;;;"}
+{"version":3,"file":"use-filters-injection.js","sources":["../../../../../src/x-modules/facets/composables/use-filters-injection.ts"],"sourcesContent":["import type { Filter, HierarchicalFilter } from '@empathyco/x-types'\nimport type { Ref } from 'vue'\nimport { isHierarchicalFilter } from '@empathyco/x-types'\nimport { computed, inject } from 'vue'\nimport { isArrayEmpty } from '../../../utils/array'\n\n/**\n * Composable to share filters injection logic.\n *\n * @param props - Composable props.\n * @returns An array of filters.\n * @public\n */\nexport function useFiltersInjection(props: {\n  /** The list of filters to be rendered as slots. */\n  filters?: Filter[]\n  /**\n    This prop is used in the `HierarchicalFilter` component and only in that case. It is necessary\n   to make the `renderedFilters` to return only the filters of each level of the hierarchy.\n   */\n  parentId?: Filter['id']\n}) {\n  /**\n   * The injected filters array.\n   *\n   * @public\n   */\n  const injectedFilters = inject<Ref<Filter[]> | undefined>('filters', undefined)\n\n  /**\n   * An array of filters formed by those that are passed through prop or injected.\n   *\n   * @returns An array of filters.\n   *\n   * @internal\n   */\n  const propOrInjectedFilters = computed((): void | Filter[] => {\n    return (\n      props.filters ??\n      injectedFilters?.value ??\n      //TODO: add here logger\n\n      console.warn('It is necessary to pass a prop or inject the list of filters')\n    )\n  })\n\n  /**\n   * In the case that the filters are {@link @empathyco/x-types#HierarchicalFilter}, this method\n   * removes from the filter list passed as a param, the filters that are not part of the level of\n   * the hierarchy, depending on the value of the `parentId` prop. In case this prop is undefined,\n   * then only the first level of filters hierarchy are returned. In the case the prop `parentId` is\n   * defined, then only the filters with the same `parentId` are returned.\n   *\n   * @param filters - The list of the filters to apply the filter.\n   * @returns The list of the filters filtered by parentId.\n   * @internal\n   */\n  const filterByParentId = (filters: Filter[]): Filter[] => {\n    if (!isArrayEmpty(filters) && isHierarchicalFilter(filters[0])) {\n      return (filters as HierarchicalFilter[]).filter(\n        filter => filter.parentId === (props.parentId ?? null),\n      )\n    } else {\n      return filters\n    }\n  }\n\n  /**\n   * The prop or injected filters array, filtered by parentId if they are\n   * {@link @empathyco/x-types#HierarchicalFilter}.\n   *\n   * @returns An array of filters.\n   *\n   * @internal\n   */\n  return computed<Filter[]>(() => filterByParentId(propOrInjectedFilters.value as Filter[]))\n}\n"],"names":[],"mappings":";;;;AAMA;;;;;;AAMG;AACG,SAAU,mBAAmB,CAAC,KAQnC,EAAA;AACC;;;;AAIG;IACH,MAAM,eAAe,GAAG,MAAM,CAA4B,SAAS,EAAE,SAAS,CAAC,CAAA;AAE/E;;;;;;AAMG;AACH,IAAA,MAAM,qBAAqB,GAAG,QAAQ,CAAC,MAAsB;QAC3D,QACE,KAAK,CAAC,OAAO;AACb,YAAA,eAAe,EAAE,KAAK;;AAGtB,YAAA,OAAO,CAAC,IAAI,CAAC,8DAA8D,CAAC,EAC7E;AACH,KAAC,CAAC,CAAA;AAEF;;;;;;;;;;AAUG;AACH,IAAA,MAAM,gBAAgB,GAAG,CAAC,OAAiB,KAAc;AACvD,QAAA,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,oBAAoB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE;YAC9D,OAAQ,OAAgC,CAAC,MAAM,CAC7C,MAAM,IAAI,MAAM,CAAC,QAAQ,MAAM,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,CACvD,CAAA;AACF,SAAA;AAAM,aAAA;AACL,YAAA,OAAO,OAAO,CAAA;AACf,SAAA;AACH,KAAC,CAAA;AAED;;;;;;;AAOG;AACH,IAAA,OAAO,QAAQ,CAAW,MAAM,gBAAgB,CAAC,qBAAqB,CAAC,KAAiB,CAAC,CAAC,CAAA;AAC5F;;;;"}

package/js/x-modules/facets/entities/add-facet-if-not-present.js

@@ -11,7 +11,7 @@ function addFacetIfNotPresent(store, facetId, facetModelName) {
         store.commit('x/facets/setFacet', {
             modelName: facetModelName,
             id: facetId,
-            label: facetId
+            label: facetId,
         });
     }
 }

package/js/x-modules/facets/entities/add-facet-if-not-present.js.map

@@ -1 +1 @@
-{"version":3,"file":"add-facet-if-not-present.js","sources":["../../../../../src/x-modules/facets/entities/add-facet-if-not-present.ts"],"sourcesContent":["import { Store } from 'vuex';\nimport { Facet, FacetModelName } from '@empathyco/x-types';\nimport { RootXStoreState } from '../../../store/store.types';\n\n/**\n * Adds an {@link Facet} to the store in case it doesn't exist for the passed facetId.\n *\n * @param store - The {@link https://vuex.vuejs.org/guide/ | Vuex Store}.\n * @param facetId - The Facet id for the Facet that will be created.\n * @param facetModelName - The {@link FacetModelName} for  the Facet that will be created.\n * @internal\n */\nexport function addFacetIfNotPresent(\n  store: Store<RootXStoreState>,\n  facetId: Facet['id'],\n  facetModelName: FacetModelName\n): void {\n  if (!store.state.x.facets.facets[facetId]) {\n    store.commit('x/facets/setFacet', {\n      modelName: facetModelName,\n      id: facetId,\n      label: facetId\n    } as Omit<Facet, 'filters'>);\n  }\n}\n"],"names":[],"mappings":"AAIA;;;;;;;AAOG;SACa,oBAAoB,CAClC,KAA6B,EAC7B,OAAoB,EACpB,cAA8B,EAAA;AAE9B,IAAA,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE;AACzC,QAAA,KAAK,CAAC,MAAM,CAAC,mBAAmB,EAAE;AAChC,YAAA,SAAS,EAAE,cAAc;AACzB,YAAA,EAAE,EAAE,OAAO;AACX,YAAA,KAAK,EAAE,OAAO;AACW,SAAA,CAAC,CAAC;AAC9B,KAAA;AACH;;;;"}
+{"version":3,"file":"add-facet-if-not-present.js","sources":["../../../../../src/x-modules/facets/entities/add-facet-if-not-present.ts"],"sourcesContent":["import type { Facet, FacetModelName } from '@empathyco/x-types'\nimport type { Store } from 'vuex'\nimport type { RootXStoreState } from '../../../store/store.types'\n\n/**\n * Adds an {@link Facet} to the store in case it doesn't exist for the passed facetId.\n *\n * @param store - The {@link https://vuex.vuejs.org/guide/ | Vuex Store}.\n * @param facetId - The Facet id for the Facet that will be created.\n * @param facetModelName - The {@link FacetModelName} for  the Facet that will be created.\n * @internal\n */\nexport function addFacetIfNotPresent(\n  store: Store<RootXStoreState>,\n  facetId: Facet['id'],\n  facetModelName: FacetModelName,\n): void {\n  if (!store.state.x.facets.facets[facetId]) {\n    store.commit('x/facets/setFacet', {\n      modelName: facetModelName,\n      id: facetId,\n      label: facetId,\n    } as Omit<Facet, 'filters'>)\n  }\n}\n"],"names":[],"mappings":"AAIA;;;;;;;AAOG;SACa,oBAAoB,CAClC,KAA6B,EAC7B,OAAoB,EACpB,cAA8B,EAAA;AAE9B,IAAA,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE;AACzC,QAAA,KAAK,CAAC,MAAM,CAAC,mBAAmB,EAAE;AAChC,YAAA,SAAS,EAAE,cAAc;AACzB,YAAA,EAAE,EAAE,OAAO;AACX,YAAA,KAAK,EAAE,OAAO;AACW,SAAA,CAAC,CAAA;AAC7B,KAAA;AACH;;;;"}

package/js/x-modules/facets/entities/editable-number-range-filter.entity.js

@@ -19,18 +19,19 @@ class EditableNumberRangeFilterEntity {
      * false. Range values are kept to be able to update the {@link FacetsGetters.selectedFilters}
      * getter accordingly (as the id is built using the range).
      *
-     * @param filter - The filter to deselect.
+     * @param filterParam - The filter to deselect.
      */
-    deselect(filter) {
+    deselect(filterParam) {
+        const filter = filterParam;
         const newFilterState = {
             facetId: filter.facetId,
             range: { min: filter.range.min, max: filter.range.max },
-            selected: false
+            selected: false,
         };
         this.removePreviousFilter(filter.facetId);
         this.store.commit('x/facets/mutateFilter', {
             filter,
-            newFilterState: Object.assign(newFilterState, { id: this.getNewFilterId(newFilterState) })
+            newFilterState: Object.assign(newFilterState, { id: this.getNewFilterId(newFilterState) }),
         });
         addFacetIfNotPresent(this.store, filter.facetId, 'EditableNumberRangeFacet');
     }
@@ -38,19 +39,20 @@ class EditableNumberRangeFilterEntity {
      * It selects the {@link @empathyco/x-types#EditableNumberRangeFilter
      * | EditableNumberRangeFilter}.
      *
-     * @param filter - The filter to select.
+     * @param filterParam - The filter to select.
      * @remarks If the filter has no selected range, then filter is deselected when this
      * method is called.
      */
-    select(filter) {
+    select(filterParam) {
+        const filter = filterParam;
         const newFilterId = this.getNewFilterId(filter);
         this.removePreviousFilter(filter.facetId);
         this.store.commit('x/facets/mutateFilter', {
             filter,
             newFilterState: {
                 id: newFilterId,
-                selected: this.isSelected(filter)
-            }
+                selected: this.isSelected(filter),
+            },
         });
         addFacetIfNotPresent(this.store, filter.facetId, 'EditableNumberRangeFacet');
     }
@@ -94,6 +96,7 @@ class EditableNumberRangeFilterEntity {
      * @internal
      */
     getFilterByFacet(facetId) {
+        // eslint-disable-next-line ts/no-unsafe-member-access,ts/no-unsafe-return
         return this.store.getters['x/facets/facets'][facetId]?.filters?.[0];
     }
 }

package/js/x-modules/facets/entities/editable-number-range-filter.entity.js.map

@@ -1 +1 @@
-{"version":3,"file":"editable-number-range-filter.entity.js","sources":["../../../../../src/x-modules/facets/entities/editable-number-range-filter.entity.ts"],"sourcesContent":["import {\n  EditableNumberRangeFilter,\n  Facet,\n  Filter,\n  isEditableNumberRangeFilter\n} from '@empathyco/x-types';\nimport { Store } from 'vuex';\nimport { RootXStoreState } from '../../../store/store.types';\nimport { addFacetIfNotPresent } from './add-facet-if-not-present';\nimport { FilterEntity } from './types';\n\n/**\n * Allows selecting and deselecting a filter of {@link @empathyco/x-types#EditableNumberRangeFilter\n * | EditableNumberRangeFilter}.\n *\n * @internal\n */\nexport class EditableNumberRangeFilterEntity implements FilterEntity {\n  public constructor(protected store: Store<RootXStoreState>) {}\n\n  static accepts(filter: Filter): boolean {\n    return isEditableNumberRangeFilter(filter);\n  }\n\n  /**\n   * It sets {@link @empathyco/x-types#EditableNumberRangeFilter | EditableNumberRangeFilter} to\n   * false. Range values are kept to be able to update the {@link FacetsGetters.selectedFilters}\n   * getter accordingly (as the id is built using the range).\n   *\n   * @param filter - The filter to deselect.\n   */\n  deselect(filter: EditableNumberRangeFilter): void {\n    const newFilterState: Pick<EditableNumberRangeFilter, 'range' | 'facetId' | 'selected'> = {\n      facetId: filter.facetId,\n      range: { min: filter.range.min, max: filter.range.max },\n      selected: false\n    };\n    this.removePreviousFilter(filter.facetId);\n    this.store.commit('x/facets/mutateFilter', {\n      filter,\n      newFilterState: Object.assign(newFilterState, { id: this.getNewFilterId(newFilterState) })\n    });\n    addFacetIfNotPresent(this.store, filter.facetId, 'EditableNumberRangeFacet');\n  }\n\n  /**\n   * It selects the {@link @empathyco/x-types#EditableNumberRangeFilter\n   * | EditableNumberRangeFilter}.\n   *\n   * @param filter - The filter to select.\n   * @remarks If the filter has no selected range, then filter is deselected when this\n   * method is called.\n   */\n  select(filter: EditableNumberRangeFilter): void {\n    const newFilterId = this.getNewFilterId(filter);\n    this.removePreviousFilter(filter.facetId);\n    this.store.commit('x/facets/mutateFilter', {\n      filter,\n      newFilterState: {\n        id: newFilterId,\n        selected: this.isSelected(filter)\n      }\n    });\n    addFacetIfNotPresent(this.store, filter.facetId, 'EditableNumberRangeFacet');\n  }\n\n  /**\n   * Generates a new filter id using the range values.\n   *\n   * @param filter - The filter to generate its new id.\n   * @returns The new filter id.\n   * @internal\n   */\n  protected getNewFilterId(filter: Pick<EditableNumberRangeFilter, 'range' | 'facetId'>): string {\n    return `${filter.facetId}:${String(filter.range.min ?? '*')}-${String(\n      filter.range.max ?? '*'\n    )}`;\n  }\n\n  /**\n   * It returns if the filter range min or the filter range max is not null.\n   *\n   * @param filter - The filter to determine if it is selected or not.\n   * @returns True if filter range min or filter range max is not null.\n   * @internal\n   */\n  protected isSelected(filter: EditableNumberRangeFilter): boolean {\n    return filter.range.min !== null || filter.range.max !== null;\n  }\n\n  /**\n   * Removes the previous filter of this facet from the store, only if it exists.\n   *\n   * @param facetId - The facet to remove its only filter.\n   * @internal\n   */\n  protected removePreviousFilter(facetId: Facet['id']): void {\n    const previousFilter = this.getFilterByFacet(facetId);\n    if (previousFilter) {\n      this.store.commit('x/facets/removeFilter', previousFilter);\n    }\n  }\n\n  /**\n   * Retrieves the filter of the given facet id from the store.\n   *\n   * @param facetId -  The facet id to retrieve its filter.\n   * @returns The filter of the facet if it exists.\n   * @internal\n   */\n  protected getFilterByFacet(facetId: Facet['id']): EditableNumberRangeFilter | undefined {\n    return this.store.getters['x/facets/facets'][facetId]?.filters?.[0];\n  }\n}\n"],"names":[],"mappings":";;;AAWA;;;;;AAKG;MACU,+BAA+B,CAAA;AAC1C,IAAA,WAAA,CAA6B,KAA6B,EAAA;QAA7B,IAAK,CAAA,KAAA,GAAL,KAAK,CAAwB;KAAI;IAE9D,OAAO,OAAO,CAAC,MAAc,EAAA;AAC3B,QAAA,OAAO,2BAA2B,CAAC,MAAM,CAAC,CAAC;KAC5C;AAED;;;;;;AAMG;AACH,IAAA,QAAQ,CAAC,MAAiC,EAAA;AACxC,QAAA,MAAM,cAAc,GAAsE;YACxF,OAAO,EAAE,MAAM,CAAC,OAAO;AACvB,YAAA,KAAK,EAAE,EAAE,GAAG,EAAE,MAAM,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,CAAC,KAAK,CAAC,GAAG,EAAE;AACvD,YAAA,QAAQ,EAAE,KAAK;SAChB,CAAC;AACF,QAAA,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;AAC1C,QAAA,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,uBAAuB,EAAE;YACzC,MAAM;AACN,YAAA,cAAc,EAAE,MAAM,CAAC,MAAM,CAAC,cAAc,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,CAAC;AAC3F,SAAA,CAAC,CAAC;QACH,oBAAoB,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,0BAA0B,CAAC,CAAC;KAC9E;AAED;;;;;;;AAOG;AACH,IAAA,MAAM,CAAC,MAAiC,EAAA;QACtC,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAChD,QAAA,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;AAC1C,QAAA,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,uBAAuB,EAAE;YACzC,MAAM;AACN,YAAA,cAAc,EAAE;AACd,gBAAA,EAAE,EAAE,WAAW;AACf,gBAAA,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC;AAClC,aAAA;AACF,SAAA,CAAC,CAAC;QACH,oBAAoB,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,0BAA0B,CAAC,CAAC;KAC9E;AAED;;;;;;AAMG;AACO,IAAA,cAAc,CAAC,MAA4D,EAAA;QACnF,OAAO,CAAA,EAAG,MAAM,CAAC,OAAO,CAAA,CAAA,EAAI,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,CAAC,CAAI,CAAA,EAAA,MAAM,CACnE,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,CACxB,CAAA,CAAE,CAAC;KACL;AAED;;;;;;AAMG;AACO,IAAA,UAAU,CAAC,MAAiC,EAAA;AACpD,QAAA,OAAO,MAAM,CAAC,KAAK,CAAC,GAAG,KAAK,IAAI,IAAI,MAAM,CAAC,KAAK,CAAC,GAAG,KAAK,IAAI,CAAC;KAC/D;AAED;;;;;AAKG;AACO,IAAA,oBAAoB,CAAC,OAAoB,EAAA;QACjD,MAAM,cAAc,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;AACtD,QAAA,IAAI,cAAc,EAAE;YAClB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,uBAAuB,EAAE,cAAc,CAAC,CAAC;AAC5D,SAAA;KACF;AAED;;;;;;AAMG;AACO,IAAA,gBAAgB,CAAC,OAAoB,EAAA;AAC7C,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,CAAC;KACrE;AACF;;;;"}
+{"version":3,"file":"editable-number-range-filter.entity.js","sources":["../../../../../src/x-modules/facets/entities/editable-number-range-filter.entity.ts"],"sourcesContent":["import type { EditableNumberRangeFilter, Facet, Filter } from '@empathyco/x-types'\nimport type { Store } from 'vuex'\nimport type { RootXStoreState } from '../../../store/store.types'\nimport type { FilterEntity } from './types'\nimport { isEditableNumberRangeFilter } from '@empathyco/x-types'\nimport { addFacetIfNotPresent } from './add-facet-if-not-present'\n\n/**\n * Allows selecting and deselecting a filter of {@link @empathyco/x-types#EditableNumberRangeFilter\n * | EditableNumberRangeFilter}.\n *\n * @internal\n */\nexport class EditableNumberRangeFilterEntity implements FilterEntity {\n  public constructor(protected store: Store<RootXStoreState>) {}\n\n  static accepts(filter: Filter): boolean {\n    return isEditableNumberRangeFilter(filter)\n  }\n\n  /**\n   * It sets {@link @empathyco/x-types#EditableNumberRangeFilter | EditableNumberRangeFilter} to\n   * false. Range values are kept to be able to update the {@link FacetsGetters.selectedFilters}\n   * getter accordingly (as the id is built using the range).\n   *\n   * @param filterParam - The filter to deselect.\n   */\n  deselect(filterParam: Filter): void {\n    const filter = filterParam as EditableNumberRangeFilter\n    const newFilterState: Pick<EditableNumberRangeFilter, 'range' | 'facetId' | 'selected'> = {\n      facetId: filter.facetId,\n      range: { min: filter.range.min, max: filter.range.max },\n      selected: false,\n    }\n    this.removePreviousFilter(filter.facetId)\n    this.store.commit('x/facets/mutateFilter', {\n      filter,\n      newFilterState: Object.assign(newFilterState, { id: this.getNewFilterId(newFilterState) }),\n    })\n    addFacetIfNotPresent(this.store, filter.facetId, 'EditableNumberRangeFacet')\n  }\n\n  /**\n   * It selects the {@link @empathyco/x-types#EditableNumberRangeFilter\n   * | EditableNumberRangeFilter}.\n   *\n   * @param filterParam - The filter to select.\n   * @remarks If the filter has no selected range, then filter is deselected when this\n   * method is called.\n   */\n  select(filterParam: Filter): void {\n    const filter = filterParam as EditableNumberRangeFilter\n    const newFilterId = this.getNewFilterId(filter)\n    this.removePreviousFilter(filter.facetId)\n    this.store.commit('x/facets/mutateFilter', {\n      filter,\n      newFilterState: {\n        id: newFilterId,\n        selected: this.isSelected(filter),\n      },\n    })\n    addFacetIfNotPresent(this.store, filter.facetId, 'EditableNumberRangeFacet')\n  }\n\n  /**\n   * Generates a new filter id using the range values.\n   *\n   * @param filter - The filter to generate its new id.\n   * @returns The new filter id.\n   * @internal\n   */\n  protected getNewFilterId(filter: Pick<EditableNumberRangeFilter, 'range' | 'facetId'>): string {\n    return `${filter.facetId}:${String(filter.range.min ?? '*')}-${String(filter.range.max ?? '*')}`\n  }\n\n  /**\n   * It returns if the filter range min or the filter range max is not null.\n   *\n   * @param filter - The filter to determine if it is selected or not.\n   * @returns True if filter range min or filter range max is not null.\n   * @internal\n   */\n  protected isSelected(filter: EditableNumberRangeFilter): boolean {\n    return filter.range.min !== null || filter.range.max !== null\n  }\n\n  /**\n   * Removes the previous filter of this facet from the store, only if it exists.\n   *\n   * @param facetId - The facet to remove its only filter.\n   * @internal\n   */\n  protected removePreviousFilter(facetId: Facet['id']): void {\n    const previousFilter = this.getFilterByFacet(facetId)\n    if (previousFilter) {\n      this.store.commit('x/facets/removeFilter', previousFilter)\n    }\n  }\n\n  /**\n   * Retrieves the filter of the given facet id from the store.\n   *\n   * @param facetId -  The facet id to retrieve its filter.\n   * @returns The filter of the facet if it exists.\n   * @internal\n   */\n  protected getFilterByFacet(facetId: Facet['id']): EditableNumberRangeFilter | undefined {\n    // eslint-disable-next-line ts/no-unsafe-member-access,ts/no-unsafe-return\n    return this.store.getters['x/facets/facets'][facetId]?.filters?.[0]\n  }\n}\n"],"names":[],"mappings":";;;AAOA;;;;;AAKG;MACU,+BAA+B,CAAA;AAC1C,IAAA,WAAA,CAA6B,KAA6B,EAAA;QAA7B,IAAK,CAAA,KAAA,GAAL,KAAK,CAAwB;KAAI;IAE9D,OAAO,OAAO,CAAC,MAAc,EAAA;AAC3B,QAAA,OAAO,2BAA2B,CAAC,MAAM,CAAC,CAAA;KAC3C;AAED;;;;;;AAMG;AACH,IAAA,QAAQ,CAAC,WAAmB,EAAA;QAC1B,MAAM,MAAM,GAAG,WAAwC,CAAA;AACvD,QAAA,MAAM,cAAc,GAAsE;YACxF,OAAO,EAAE,MAAM,CAAC,OAAO;AACvB,YAAA,KAAK,EAAE,EAAE,GAAG,EAAE,MAAM,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,CAAC,KAAK,CAAC,GAAG,EAAE;AACvD,YAAA,QAAQ,EAAE,KAAK;SAChB,CAAA;AACD,QAAA,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;AACzC,QAAA,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,uBAAuB,EAAE;YACzC,MAAM;AACN,YAAA,cAAc,EAAE,MAAM,CAAC,MAAM,CAAC,cAAc,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,CAAC;AAC3F,SAAA,CAAC,CAAA;QACF,oBAAoB,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,0BAA0B,CAAC,CAAA;KAC7E;AAED;;;;;;;AAOG;AACH,IAAA,MAAM,CAAC,WAAmB,EAAA;QACxB,MAAM,MAAM,GAAG,WAAwC,CAAA;QACvD,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;AAC/C,QAAA,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;AACzC,QAAA,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,uBAAuB,EAAE;YACzC,MAAM;AACN,YAAA,cAAc,EAAE;AACd,gBAAA,EAAE,EAAE,WAAW;AACf,gBAAA,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC;AAClC,aAAA;AACF,SAAA,CAAC,CAAA;QACF,oBAAoB,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,0BAA0B,CAAC,CAAA;KAC7E;AAED;;;;;;AAMG;AACO,IAAA,cAAc,CAAC,MAA4D,EAAA;QACnF,OAAO,CAAA,EAAG,MAAM,CAAC,OAAO,CAAA,CAAA,EAAI,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,CAAC,CAAI,CAAA,EAAA,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,CAAC,CAAA,CAAE,CAAA;KACjG;AAED;;;;;;AAMG;AACO,IAAA,UAAU,CAAC,MAAiC,EAAA;AACpD,QAAA,OAAO,MAAM,CAAC,KAAK,CAAC,GAAG,KAAK,IAAI,IAAI,MAAM,CAAC,KAAK,CAAC,GAAG,KAAK,IAAI,CAAA;KAC9D;AAED;;;;;AAKG;AACO,IAAA,oBAAoB,CAAC,OAAoB,EAAA;QACjD,MAAM,cAAc,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAA;AACrD,QAAA,IAAI,cAAc,EAAE;YAClB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,uBAAuB,EAAE,cAAc,CAAC,CAAA;AAC3D,SAAA;KACF;AAED;;;;;;AAMG;AACO,IAAA,gBAAgB,CAAC,OAAoB,EAAA;;AAE7C,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,CAAA;KACpE;AACF;;;;"}