npm - @empathyco/x-components - Versions diffs - 3.0.0-alpha.145 → 3.0.0-alpha.148 - Mend

@empathyco/x-components 3.0.0-alpha.145 → 3.0.0-alpha.148

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (124) hide show

package/js/x-modules/facets/components/facets/facets-provider.vue_rollup-plugin-vue_script.vue.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { __decorate } from 'tslib';
+import { isHierarchicalFacet } from '@empathyco/x-types';
 import Vue from 'vue';
 import { Prop, Watch, Component } from 'vue-property-decorator';
 import '../../../../components/animations/animate-width.vue.js';
@@ -123,7 +124,10 @@ import { XOn } from '../../../../components/decorators/bus.decorators.js';
 import 'vue-class-component';
 import '../../../../components/items-list-injection.mixin.js';
 import { xComponentMixin } from '../../../../components/x-component.mixin.js';
+import { clone } from '../../../../utils/clone.js';
 import { areFiltersDifferent } from '../../../../utils/filters.js';
+import '../../../../utils/storage.js';
+import { flatHierarchicalFilters } from '../../utils.js';
 import { facetsXModule } from '../../x-module.js';
 /**
@@ -176,7 +180,8 @@ let FacetsProvider = class FacetsProvider extends Vue {
      */
     provideFacets() {
         if (this.facetsGroup.facets) {
-            this.$x.emit('FacetsGroupProvided', this.facetsGroup);
+            const facetsGroupClone = clone(this.facetsGroup);
+            this.$x.emit('FacetsGroupProvided', facetsGroupClone);
             this.extractSelectedFilters(this.facets);
         }
     }
@@ -189,7 +194,7 @@ let FacetsProvider = class FacetsProvider extends Vue {
      */
     extractSelectedFilters(facets) {
         this.selectedFilters = facets
-            .flatMap(facet => facet.filters)
+            .flatMap(facet => isHierarchicalFacet(facet) ? flatHierarchicalFilters(facet.filters) : facet.filters)
             .filter(filter => filter.selected);
     }
     // eslint-disable-next-line @typescript-eslint/no-empty-function

package/js/x-modules/facets/components/facets/facets-provider.vue_rollup-plugin-vue_script.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"facets-provider.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../../src/x-modules/facets/components/facets/facets-provider.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\nimport { Facet, Filter } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop, Watch } from 'vue-property-decorator';\nimport { XOn } from '../../../../components';\nimport { xComponentMixin } from '../../../../components/x-component.mixin';\nimport { areFiltersDifferent } from '../../../../utils/filters';\nimport { FacetsGroup } from '../../service/types';\nimport { GroupId } from '../../store/types';\nimport { facetsXModule } from '../../x-module';\n\n/*\n This component allows to provide facets by prop, to add them to the state of the\n * `Facets X-Module`. These facets will be added to the `Facets X-Module` state together with\n * the facets emitted by the `Search X-Module` through the {@link SearchXEvents.FacetsChanged}\n * event.\n \n @public\n /\n@Component({\n mixins: [xComponentMixin(facetsXModule)]\n})\nexport default class FacetsProvider extends Vue {\n /\n An facet group identifier to distinguish the provided facets from other facets like the\n * `Search X-Module` facets.\n \n @public\n /\n @Prop({ default: 'provided-facets' })\n public groupId!: GroupId;\n\n /\n The facets to provide to the `Facets X-Module` state. They have to include the\n * {@link @empathyco/x-types#Filter \| filters}.\n \n @internal\n /\n @Prop({ required: true })\n public facets!: Facet[];\n\n /\n Temporarily stores the selected filters from the {@link FacetsProvider.facets} prop.\n * This is necessary to handle the {@link FacetsXEvents.UserChangedSelectedFilters} event.\n \n @internal\n /\n protected selectedFilters: Filter[] \| null = null;\n\n /\n A computed property to group the facets and the groupId. This is used by the watcher.\n \n @returns The FacetGroup with the facets and the group id.\n \n @internal\n /\n protected get facetsGroup(): FacetsGroup {\n return { id: this.groupId, facets: this.facets };\n }\n\n /\n Emits the {@link FacetsXEvents.UserChangedSelectedFilters} event when the user changes\n * the selected filters.\n \n @param selectedFilters - The new list of selected filters.\n * @internal\n /\n @XOn('SelectedFiltersChanged')\n emitSelectedFiltersChanged(selectedFilters: Filter[]): void {\n if (\n this.selectedFilters === null \|\|\n areFiltersDifferent(this.selectedFilters, selectedFilters)\n ) {\n this.$x.emit('UserChangedSelectedFilters', selectedFilters);\n }\n this.selectedFilters = null;\n }\n\n /\n Emits the {@link FacetsXEvents.FacetsGroupProvided} event with the\n * {@link FacetsProvider.facetsGroup} as payload. It also extracts and saves the selected\n * filters.\n /\n @Watch('facetsGroup', { immediate: true })\n provideFacets(): void {\n if (this.facetsGroup.facets) {\n this.$x.emit('FacetsGroupProvided', ~~this.facetsGroup~~);\n this.extractSelectedFilters(this.facets);\n }\n }\n\n /\n Extracts the selected filters from the facets and stores them in the\n * {@link FacetsProvider.selectedFilters} property.\n \n @param facets - The facets from whom extract the selected filters.\n * @internal\n */\n protected extractSelectedFilters(facets: Facet[]): void {\n this.selectedFilters = facets\n .flatMap(facet => facet.filters)\n .filter(filter => filter.selected);\n }\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n render(): void {}\n}\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA~~;;;;;;;;AAWA,IAAqB,cAAc,GAAnC,MAAqB,cAAe,SAAQ,GAAG;IAA/C;;;;;;;;QAyBY,oBAAe,GAAoB,IAAI,CAAC;~~KA2DnD~~;;;;;;;;~~IAlDC~~,IAAc,WAAW;QACvB,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;KAClD;;;;;;;;IAUD,0BAA0B,CAAC,eAAyB;QAClD,IACE,IAAI,CAAC,eAAe,KAAK,IAAI;YAC7B,mBAAmB,CAAC,IAAI,CAAC,eAAe,EAAE,eAAe,CAAC,EAC1D;YACA,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,4BAA4B,EAAE,eAAe,CAAC,CAAC;SAC7D;QACD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;KAC7B;;;;;;IAQD,aAAa;QACX,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE;YAC3B,IAAI,CAAC,~~EAAE~~,CAAC,IAAI,CAAC,~~qBAAqB,~~EAAE,IAAI,CAAC,~~WAAW~~,CAAC,CAAC;YACtD,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SAC1C;KACF;;;;;;;;IASS,sBAAsB,CAAC,MAAe;QAC9C,IAAI,CAAC,eAAe,GAAG,MAAM;aAC1B,OAAO,CAAC,KAAK,~~IAAI~~,KAAK,CAAC,OAAO,CAAC;~~aAC/B~~,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC;KACtC;;IAGD,MAAM,MAAW;CAClB,CAAA;~~AA5EC~~;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,CAAC;+CACZ;AASzB;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;8CACD;AA6BxB;IADC,GAAG,CAAC,wBAAwB,CAAC;gEAS7B;AAQD;IADC,KAAK,CAAC,aAAa,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;~~mDAMzC~~;~~AAnEkB~~,cAAc;IAHlC,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;KACzC,CAAC;GACmB,cAAc,~~CAoFlC~~;~~aApFoB~~,cAAc;;;;"}
1	+ {"version":3,"file":"facets-provider.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../../src/x-modules/facets/components/facets/facets-provider.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\nimport { Facet, Filter, isHierarchicalFacet } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop, Watch } from 'vue-property-decorator';\nimport { XOn } from '../../../../components';\nimport { xComponentMixin } from '../../../../components/x-component.mixin';\nimport { clone } from '../../../../utils';\nimport { areFiltersDifferent } from '../../../../utils/filters';\nimport { FacetsGroup } from '../../service/types';\nimport { GroupId } from '../../store/types';\nimport { flatHierarchicalFilters } from '../../utils';\nimport { facetsXModule } from '../../x-module';\n\n/*\n This component allows to provide facets by prop, to add them to the state of the\n * `Facets X-Module`. These facets will be added to the `Facets X-Module` state together with\n * the facets emitted by the `Search X-Module` through the {@link SearchXEvents.FacetsChanged}\n * event.\n \n @public\n /\n@Component({\n mixins: [xComponentMixin(facetsXModule)]\n})\nexport default class FacetsProvider extends Vue {\n /\n An facet group identifier to distinguish the provided facets from other facets like the\n * `Search X-Module` facets.\n \n @public\n /\n @Prop({ default: 'provided-facets' })\n public groupId!: GroupId;\n\n /\n The facets to provide to the `Facets X-Module` state. They have to include the\n * {@link @empathyco/x-types#Filter \| filters}.\n \n @internal\n /\n @Prop({ required: true })\n public facets!: Facet[];\n\n /\n Temporarily stores the selected filters from the {@link FacetsProvider.facets} prop.\n * This is necessary to handle the {@link FacetsXEvents.UserChangedSelectedFilters} event.\n \n @internal\n /\n protected selectedFilters: Filter[] \| null = null;\n\n /\n A computed property to group the facets and the groupId. This is used by the watcher.\n \n @returns The FacetGroup with the facets and the group id.\n \n @internal\n /\n protected get facetsGroup(): FacetsGroup {\n return { id: this.groupId, facets: this.facets };\n }\n\n /\n Emits the {@link FacetsXEvents.UserChangedSelectedFilters} event when the user changes\n * the selected filters.\n \n @param selectedFilters - The new list of selected filters.\n * @internal\n /\n @XOn('SelectedFiltersChanged')\n emitSelectedFiltersChanged(selectedFilters: Filter[]): void {\n if (\n this.selectedFilters === null \|\|\n areFiltersDifferent(this.selectedFilters, selectedFilters)\n ) {\n this.$x.emit('UserChangedSelectedFilters', selectedFilters);\n }\n this.selectedFilters = null;\n }\n\n /\n Emits the {@link FacetsXEvents.FacetsGroupProvided} event with the\n * {@link FacetsProvider.facetsGroup} as payload. It also extracts and saves the selected\n * filters.\n /\n @Watch('facetsGroup', { immediate: true })\n provideFacets(): void {\n if (this.facetsGroup.facets) {\n const facetsGroupClone = clone(this.facetsGroup);\n this.$x.emit('FacetsGroupProvided', facetsGroupClone);\n this.extractSelectedFilters(this.facets);\n }\n }\n\n /\n Extracts the selected filters from the facets and stores them in the\n * {@link FacetsProvider.selectedFilters} property.\n \n @param facets - The facets from whom extract the selected filters.\n * @internal\n */\n protected extractSelectedFilters(facets: Facet[]): void {\n this.selectedFilters = facets\n .flatMap(facet =>\n isHierarchicalFacet(facet) ? flatHierarchicalFilters(facet.filters) : facet.filters\n )\n .filter(filter => filter.selected);\n }\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n render(): void {}\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA;;;;;;;;AAWA,IAAqB,cAAc,GAAnC,MAAqB,cAAe,SAAQ,GAAG;IAA/C;;;;;;;;QAyBY,oBAAe,GAAoB,IAAI,CAAC;KA8DnD;;;;;;;;IArDC,IAAc,WAAW;QACvB,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;KAClD;;;;;;;;IAUD,0BAA0B,CAAC,eAAyB;QAClD,IACE,IAAI,CAAC,eAAe,KAAK,IAAI;YAC7B,mBAAmB,CAAC,IAAI,CAAC,eAAe,EAAE,eAAe,CAAC,EAC1D;YACA,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,4BAA4B,EAAE,eAAe,CAAC,CAAC;SAC7D;QACD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;KAC7B;;;;;;IAQD,aAAa;QACX,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE;YAC3B,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACjD,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,CAAC,CAAC;YACtD,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SAC1C;KACF;;;;;;;;IASS,sBAAsB,CAAC,MAAe;QAC9C,IAAI,CAAC,eAAe,GAAG,MAAM;aAC1B,OAAO,CAAC,KAAK,IACZ,mBAAmB,CAAC,KAAK,CAAC,GAAG,uBAAuB,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,OAAO,CACpF;aACA,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC;KACtC;;IAGD,MAAM,MAAW;CAClB,CAAA;AA/EC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,CAAC;+CACZ;AASzB;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;8CACD;AA6BxB;IADC,GAAG,CAAC,wBAAwB,CAAC;gEAS7B;AAQD;IADC,KAAK,CAAC,aAAa,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;mDAOzC;AApEkB,cAAc;IAHlC,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;KACzC,CAAC;GACmB,cAAc,CAuFlC;aAvFoB,cAAc;;;;"}

package/js/x-modules/facets/components/filters/hierarchical-filter.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hierarchical-filter.vue.js","sources":["../../../../../../src/x-modules/facets/components/filters/hierarchical-filter.vue"],"sourcesContent":["<template>\n <div class=\"x-hierarchical-filter-container\" data-test=\"hierarchical-filter-container\">\n <RenderlessFilter\n v-slot=\"{ filter, clickFilter, cssClasses, isDisabled }\"\n :class=\"cssClasses\"\n :clickEvents=\"_clickEvents\"\n :filter=\"filter\"\n class=\"x-hierarchical-filter\"\n >\n <!--\n @slot The content to render inside the button.\n @binding {Filter} filter - The filter data.\n @binding {Function} clickFilter - The handler to invoke when clicking the filter.\n @binding {VueCssClasses} cssClasses - The CSS classes.\n @binding {boolean} isDisabled - Flag determining the disabled state.\n -->\n <slot v-bind=\"{ filter, clickFilter, cssClasses, isDisabled }\">\n <button\n @click=\"clickFilter\"\n :aria-checked=\"filter.selected.toString()\"\n :class=\"cssClasses\"\n :disabled=\"isDisabled\"\n data-test=\"filter\"\n role=\"checkbox\"\n >\n <!--\n @slot The content to render inside the button.\n @binding {Filter} filter - The filter data.\n -->\n <slot name=\"label\" :filter=\"filter\">{{ filter.label }}</slot>\n </button>\n </slot>\n </RenderlessFilter>\n <FiltersList\n v-slot=\"{ filter: childFilter }\"\n :animation=\"childrenAnimation\"\n :filters=\"renderedChildrenFilters\"\n :parent-id=\"filter.id\"\n class=\"x-hierarchical-filter__children\"\n data-test=\"children-filters\"\n >\n <HierarchicalFilter\n :childrenAnimation=\"childrenAnimation\"\n :filter=\"childFilter\"\n :clickEvents=\"getChildFilterClickEvents(childFilter)\"\n >\n <template #default=\"{ filter, clickFilter, cssClasses, isDisabled }\">\n <slot v-bind=\"{ filter, clickFilter, cssClasses, isDisabled }\" />\n </template>\n <template #label=\"{ filter }\">\n <slot name=\"label\" :filter=\"filter\" />\n </template>\n </HierarchicalFilter>\n </FiltersList>\n </div>\n</template>\n\n<script lang=\"ts\">\n import {\n Filter,\n HierarchicalFilter as HierarchicalFilterModel,\n isHierarchicalFilter\n } from '@empathyco/x-types';\n import { isObject } from '@empathyco/x-utils';\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { State, xComponentMixin } from '../../../../components';\n import { VueCSSClasses } from '../../../../utils/types';\n import { XEventsTypes } from '../../../../wiring/events.types';\n import { facetsXModule } from '../../x-module';\n import FiltersList from '../lists/filters-list.vue';\n import RenderlessFilter from './renderless-filter.vue';\n\n /*\n Renders a hierarchical filter recursively, emitting the needed events when clicked.\n \n @public\n /\n @Component({\n name: 'HierarchicalFilter',\n components: { FiltersList, RenderlessFilter },\n mixins: [xComponentMixin(facetsXModule)]\n })\n export default class HierarchicalFilter extends Vue {\n /* The filter data to render. /\n @Prop({ required: true })\n public filter!: HierarchicalFilterModel;\n\n /* The animation component to use for the children filters. /\n @Prop()\n public childrenAnimation?: Vue \| string;\n /\n The state filters.\n \n @internal\n /\n @State('facets', 'filters')\n public filters!: Record<Filter['id'], Filter>;\n\n /\n Additional events, with their payload, to emit when the filter is clicked.\n \n @public\n /\n @Prop()\n public clickEvents!: Partial<XEventsTypes>;\n\n /\n The {@link XEventsTypes \| events} to emit.\n \n @returns The events to emit when clicked.\n * @internal\n /\n protected get _clickEvents(): Partial<XEventsTypes> {\n return {\n UserClickedAHierarchicalFilter: this.filter,\n ...this.clickEvents\n };\n }\n\n /\n Dynamic CSS classes to apply to the component.\n \n @returns The dynamic CSS classes to apply to the component.\n * @internal\n /\n protected get cssClasses(): VueCSSClasses {\n return {\n 'x-hierarchical-filter--is-partially-selected': this.isPartiallySelected,\n 'x-hierarchical-filter--is-selected': this.filter.selected,\n 'x-filter--is-partially-selected': this.isPartiallySelected\n };\n }\n\n /\n Gets the child filter click events, converting the payload of the events that have a\n * {@link @empathyco/x-types#HierarchicalFilter} as payload to the corresponding child filter.\n \n @param childFilter - The child filter.\n * @returns The events to emit when clicking a child.\n * @internal\n /\n protected getChildFilterClickEvents(\n childFilter: HierarchicalFilterModel\n ): Partial<XEventsTypes> {\n return Object.entries(this._clickEvents).reduce((clickEvents, [event, payload]) => {\n return {\n ...clickEvents,\n [event]:\n isObject(payload) &&\n isHierarchicalFilter(payload as unknown as Filter) &&\n childFilter !== (payload as unknown as HierarchicalFilterModel)\n ? childFilter\n : payload\n };\n }, {} as Partial<XEventsTypes>);\n }\n\n /\n Returns if the filter is partially selected, which means having more than one child filter\n * selected, but not every of them, or having at least one child filter partially selected.\n \n @returns True if the filter is partially selected. False otherwise.\n * @internal\n /\n protected get isPartiallySelected(): boolean {\n return this.isFilterPartiallySelected(this.filter);\n }\n\n /\n List of filters to render, in case that the children's array\n * is empty it will return an empty array instead of inject the ones from the parent.\n \n @returns A list of filters.\n * @internal\n */\n protected get renderedChildrenFilters(): Filter[] {\n return this.filter.children?.map(filterId => this.filters[filterId]) ?? [];\n }\n\n protected isFilterPartiallySelected(filter: HierarchicalFilterModel): boolean {\n const selectedChildren = filter.children\n ?.map(filterId => this.filters[filterId])\n ?.filter(filter => filter?.selected) as HierarchicalFilterModel[] \| undefined;\n const filterChildrenLength = filter.children?.length ?? 0;\n return (\n !!selectedChildren &&\n ((selectedChildren.length > 0 && selectedChildren.length < filterChildrenLength) \|\|\n // eslint-disable-next-line @typescript-eslint/unbound-method\n selectedChildren.some(this.isFilterPartiallySelected))\n );\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedAFilter`](x-components.xeventstypes.userclickedafilter.md): the event is emitted\n after the user clicks the button, using the `filter` prop as its payload.\n- [`UserClickedAHierarchicalFilter`](x-components.xeventstypes.userclickedahierarchicalfilter.md):\n the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n filter.\n\n## See it in action\n\nThis component renders a button, which on clicked emits the `UserClickedAFilter` and\n`UserClickedAHierarchicalFilter` events. By default it renders the filter label as the button text.\nIf the provided filter has children filters, this component will render them recursively. Changing\nthe slot content will change it for all of the children.\n\nThe `filter` prop is required. The `clickEvents` prop is optional and allows configuring the events\nto emit on click.\n\n```vue\n<template>\n <HierarchicalFilter :filter=\"filter\" />\n</template>\n\n<script>\n import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'HierarchicalFilterTest',\n components: {\n HierarchicalFilter\n },\n date() {\n return {\n filter: {\n id: `categories:men`,\n modelName: 'HierarchicalFilter',\n label: `men`,\n facetId: 'categories',\n parentId: null,\n totalResults: 10,\n children: [],\n selected: false\n }\n };\n }\n };\n</script>\n```\n\n### Playing with props\n\nConfiguring the events to emit when the filter is clicked.\n\n```vue\n<template>\n <HierarchicalFilter :clickEvents=\"{ UserClickedAHierarchicalFilter: filter }\" :filter=\"filter\" />\n</template>\n\n<script>\n import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'HierarchicalFilterTest',\n components: {\n HierarchicalFilter\n },\n date() {\n return {\n filter: {\n id: `categories:men`,\n modelName: 'HierarchicalFilter',\n label: `men`,\n facetId: 'categories',\n parentId: null,\n totalResults: 10,\n children: [],\n selected: false\n }\n };\n }\n };\n</script>\n```\n\n### Customizing the default slot content\n\nIn this example, the child filters will also include the label and checkbox.\n\n```vue\n<template>\n <HierarchicalFilter :filter=\"filter\" v-slot=\"{ filter, clickFilter, slotCSSClasses, isDisabled }\">\n <label :class=\"slotCSSClasses\">\n <input @change=\"clickFilter\" :disabled=\"isDisabled\" />\n {{ filter.label }}\n </label>\n </HierarchicalFilter>\n</template>\n\n<script>\n import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'HierarchicalFilterTest',\n components: {\n HierarchicalFilter\n },\n date() {\n return {\n filter: {\n id: `categories:men`,\n modelName: 'HierarchicalFilter',\n label: `men`,\n facetId: 'categories',\n parentId: null,\n totalResults: 10,\n children: [],\n selected: false\n }\n };\n }\n };\n</script>\n```\n\n### Customizing the label slot content\n\n```vue\n<template>\n <HierarchicalFilter :filter=\"filter\">\n <template #label :filter=\"filter\">\n <span class=\"custom-class\">{{ filter.label }}</span>\n </template>\n </HierarchicalFilter>\n</template>\n\n<script>\n import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'HierarchicalFilterTest',\n components: {\n HierarchicalFilter\n },\n date() {\n return {\n filter: {\n id: `categories:men`,\n modelName: 'HierarchicalFilter',\n label: `men`,\n facetId: 'categories',\n parentId: null,\n totalResults: 10,\n children: [],\n selected: false\n }\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"hierarchical-filter.vue.js","sources":["../../../../../../src/x-modules/facets/components/filters/hierarchical-filter.vue"],"sourcesContent":["<template>\n <div class=\"x-hierarchical-filter-container\" data-test=\"hierarchical-filter-container\">\n <RenderlessFilter\n v-slot=\"{ filter, clickFilter, cssClasses, isDisabled }\"\n :class=\"cssClasses\"\n :clickEvents=\"_clickEvents\"\n :filter=\"filter\"\n class=\"x-hierarchical-filter\"\n >\n <!--\n @slot The content to render inside the button.\n @binding {Filter} filter - The filter data.\n @binding {Function} clickFilter - The handler to invoke when clicking the filter.\n @binding {VueCssClasses} cssClasses - The CSS classes.\n @binding {boolean} isDisabled - Flag determining the disabled state.\n -->\n <slot v-bind=\"{ filter, clickFilter, cssClasses, isDisabled }\">\n <button\n @click=\"clickFilter\"\n :aria-checked=\"filter.selected.toString()\"\n :class=\"cssClasses\"\n :disabled=\"isDisabled\"\n data-test=\"filter\"\n role=\"checkbox\"\n >\n <!--\n @slot The content to render inside the button.\n @binding {Filter} filter - The filter data.\n -->\n <slot name=\"label\" :filter=\"filter\">{{ filter.label }}</slot>\n </button>\n </slot>\n </RenderlessFilter>\n <FiltersList\n v-slot=\"{ filter: childFilter }\"\n :animation=\"childrenAnimation\"\n :filters=\"renderedChildrenFilters\"\n :parent-id=\"filter.id\"\n class=\"x-hierarchical-filter__children\"\n data-test=\"children-filters\"\n >\n <HierarchicalFilter\n :childrenAnimation=\"childrenAnimation\"\n :filter=\"childFilter\"\n :clickEvents=\"getChildFilterClickEvents(childFilter)\"\n >\n <template #default=\"{ filter, clickFilter, cssClasses, isDisabled }\">\n <slot v-bind=\"{ filter, clickFilter, cssClasses, isDisabled }\" />\n </template>\n <template #label=\"{ filter }\">\n <slot name=\"label\" :filter=\"filter\" />\n </template>\n </HierarchicalFilter>\n </FiltersList>\n </div>\n</template>\n\n<script lang=\"ts\">\n import {\n Filter,\n HierarchicalFilter as HierarchicalFilterModel,\n isHierarchicalFilter\n } from '@empathyco/x-types';\n import { isObject } from '@empathyco/x-utils';\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { xComponentMixin } from '../../../../components/x-component.mixin';\n import { VueCSSClasses } from '../../../../utils/types';\n import { XEventsTypes } from '../../../../wiring/events.types';\n import { facetsXModule } from '../../x-module';\n import FiltersList from '../lists/filters-list.vue';\n import RenderlessFilter from './renderless-filter.vue';\n\n /*\n Renders a hierarchical filter recursively, emitting the needed events when clicked.\n \n @public\n /\n @Component({\n name: 'HierarchicalFilter',\n components: { FiltersList, RenderlessFilter },\n mixins: [xComponentMixin(facetsXModule)]\n })\n export default class HierarchicalFilter extends Vue {\n /* The filter data to render. /\n @Prop({ required: true })\n public filter!: HierarchicalFilterModel;\n\n /* The animation component to use for the children filters. /\n @Prop()\n public childrenAnimation?: Vue \| string;\n\n /\n Additional events, with their payload, to emit when the filter is clicked.\n \n @public\n /\n @Prop()\n public clickEvents!: Partial<XEventsTypes>;\n\n /\n The {@link XEventsTypes \| events} to emit.\n \n @returns The events to emit when clicked.\n * @internal\n /\n protected get _clickEvents(): Partial<XEventsTypes> {\n return {\n UserClickedAHierarchicalFilter: this.filter,\n ...this.clickEvents\n };\n }\n\n /\n Dynamic CSS classes to apply to the component.\n \n @returns The dynamic CSS classes to apply to the component.\n * @internal\n /\n protected get cssClasses(): VueCSSClasses {\n return {\n 'x-hierarchical-filter--is-partially-selected': this.isPartiallySelected,\n 'x-hierarchical-filter--is-selected': this.filter.selected,\n 'x-filter--is-partially-selected': this.isPartiallySelected\n };\n }\n\n /\n Gets the child filter click events, converting the payload of the events that have a\n * {@link @empathyco/x-types#HierarchicalFilter} as payload to the corresponding child filter.\n \n @param childFilter - The child filter.\n * @returns The events to emit when clicking a child.\n * @internal\n /\n protected getChildFilterClickEvents(\n childFilter: HierarchicalFilterModel\n ): Partial<XEventsTypes> {\n return Object.entries(this._clickEvents).reduce((clickEvents, [event, payload]) => {\n return {\n ...clickEvents,\n [event]:\n isObject(payload) &&\n isHierarchicalFilter(payload as unknown as Filter) &&\n childFilter !== (payload as unknown as HierarchicalFilterModel)\n ? childFilter\n : payload\n };\n }, {} as Partial<XEventsTypes>);\n }\n\n /\n Returns if the filter is partially selected, which means having more than one child filter\n * selected, but not every of them, or having at least one child filter partially selected.\n \n @returns True if the filter is partially selected. False otherwise.\n * @internal\n /\n protected get isPartiallySelected(): boolean {\n return this.isFilterPartiallySelected(this.filter);\n }\n\n /\n List of filters to render, in case that the children's array\n * is empty it will return an empty array instead of inject the ones from the parent.\n \n @returns A list of filters.\n * @internal\n */\n protected get renderedChildrenFilters(): Filter[] {\n return this.filter.children ?? [];\n }\n\n protected isFilterPartiallySelected(filter: HierarchicalFilterModel): boolean {\n const selectedChildren = filter.children?.filter(filter => filter.selected);\n const filterChildrenLength = filter.children?.length ?? 0;\n return (\n !!selectedChildren &&\n ((selectedChildren.length > 0 && selectedChildren.length < filterChildrenLength) \|\|\n // eslint-disable-next-line @typescript-eslint/unbound-method\n selectedChildren.some(this.isFilterPartiallySelected))\n );\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedAFilter`](x-components.xeventstypes.userclickedafilter.md): the event is emitted\n after the user clicks the button, using the `filter` prop as its payload.\n- [`UserClickedAHierarchicalFilter`](x-components.xeventstypes.userclickedahierarchicalfilter.md):\n the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n filter.\n\n## See it in action\n\nThis component renders a button, which on clicked emits the `UserClickedAFilter` and\n`UserClickedAHierarchicalFilter` events. By default it renders the filter label as the button text.\nIf the provided filter has children filters, this component will render them recursively. Changing\nthe slot content will change it for all of the children.\n\nThe `filter` prop is required. The `clickEvents` prop is optional and allows configuring the events\nto emit on click.\n\n```vue\n<template>\n <HierarchicalFilter :filter=\"filter\" />\n</template>\n\n<script>\n import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'HierarchicalFilterTest',\n components: {\n HierarchicalFilter\n },\n date() {\n return {\n filter: {\n id: `categories:men`,\n modelName: 'HierarchicalFilter',\n label: `men`,\n facetId: 'categories',\n parentId: null,\n totalResults: 10,\n children: [],\n selected: false\n }\n };\n }\n };\n</script>\n```\n\n### Playing with props\n\nConfiguring the events to emit when the filter is clicked.\n\n```vue\n<template>\n <HierarchicalFilter :clickEvents=\"{ UserClickedAHierarchicalFilter: filter }\" :filter=\"filter\" />\n</template>\n\n<script>\n import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'HierarchicalFilterTest',\n components: {\n HierarchicalFilter\n },\n date() {\n return {\n filter: {\n id: `categories:men`,\n modelName: 'HierarchicalFilter',\n label: `men`,\n facetId: 'categories',\n parentId: null,\n totalResults: 10,\n children: [],\n selected: false\n }\n };\n }\n };\n</script>\n```\n\n### Customizing the default slot content\n\nIn this example, the child filters will also include the label and checkbox.\n\n```vue\n<template>\n <HierarchicalFilter :filter=\"filter\" v-slot=\"{ filter, clickFilter, slotCSSClasses, isDisabled }\">\n <label :class=\"slotCSSClasses\">\n <input @change=\"clickFilter\" :disabled=\"isDisabled\" />\n {{ filter.label }}\n </label>\n </HierarchicalFilter>\n</template>\n\n<script>\n import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'HierarchicalFilterTest',\n components: {\n HierarchicalFilter\n },\n date() {\n return {\n filter: {\n id: `categories:men`,\n modelName: 'HierarchicalFilter',\n label: `men`,\n facetId: 'categories',\n parentId: null,\n totalResults: 10,\n children: [],\n selected: false\n }\n };\n }\n };\n</script>\n```\n\n### Customizing the label slot content\n\n```vue\n<template>\n <HierarchicalFilter :filter=\"filter\">\n <template #label :filter=\"filter\">\n <span class=\"custom-class\">{{ filter.label }}</span>\n </template>\n </HierarchicalFilter>\n</template>\n\n<script>\n import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n export default {\n name: 'HierarchicalFilterTest',\n components: {\n HierarchicalFilter\n },\n date() {\n return {\n filter: {\n id: `categories:men`,\n modelName: 'HierarchicalFilter',\n label: `men`,\n facetId: 'categories',\n parentId: null,\n totalResults: 10,\n children: [],\n selected: false\n }\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/facets/components/filters/hierarchical-filter.vue_rollup-plugin-vue_script.vue.js CHANGED Viewed

@@ -3,129 +3,6 @@ import { isHierarchicalFilter } from '@empathyco/x-types';
 import { isObject } from '@empathyco/x-utils';
 import Vue from 'vue';
 import { Prop, Component } from 'vue-property-decorator';
-import '../../../../components/animations/animate-width.vue.js';
-import '../../../../components/animations/collapse-height.vue.js';
-import '../../../../components/animations/collapse-width.vue.js';
-import '../../../../components/animations/cross-fade.vue.js';
-import '../../../../components/animations/fade.vue.js';
-import '../../../../components/animations/fade-and-slide.vue.js';
-import '../../../../components/animations/staggered-fade-and-slide.vue.js';
-import '../../../../components/animations/staggering-transition-group.vue_rollup-plugin-vue_script.vue.js';
-import 'vue-runtime-helpers/dist/normalize-component.mjs';
-import 'vue-runtime-helpers/dist/inject-style/browser.mjs';
-import '../../../../components/animations/animate-clip-path/animate-clip-path.style.scss.js';
-import '../../../../components/animations/animate-scale/animate-scale.style.scss.js';
-import '../../../../components/animations/animate-translate/animate-translate.style.scss.js';
-import '../../../../components/column-picker/base-column-picker-dropdown.vue.js';
-import '../../../../components/column-picker/base-column-picker-list.vue.js';
-import '../../../../components/column-picker/column-picker.mixin.js';
-import '../../../../components/currency/base-currency.vue.js';
-import '../../../../components/filters/labels/base-price-filter-label.vue_rollup-plugin-vue_script.vue.js';
-import '../../../../components/filters/labels/base-rating-filter-label.vue.js';
-import '../../../../components/icons/arrow-down.vue.js';
-import '../../../../components/icons/arrow-left.vue.js';
-import '../../../../components/icons/arrow-right.vue.js';
-import '../../../../components/icons/arrow-up.vue.js';
-import '../../../../components/icons/bag.vue.js';
-import '../../../../components/icons/bar-code.vue.js';
-import '../../../../components/icons/barcode-tiny.vue.js';
-import '../../../../components/icons/cart.vue.js';
-import '../../../../components/icons/check-tiny.vue.js';
-import '../../../../components/icons/check.vue.js';
-import '../../../../components/icons/checkbox-card-selected.vue.js';
-import '../../../../components/icons/checkbox-card-unselected.vue.js';
-import '../../../../components/icons/checkbox-selected.vue.js';
-import '../../../../components/icons/checkbox-unselected.vue.js';
-import '../../../../components/icons/chevron-down.vue.js';
-import '../../../../components/icons/chevron-left.vue.js';
-import '../../../../components/icons/chevron-right.vue.js';
-import '../../../../components/icons/chevron-tiny-down.vue.js';
-import '../../../../components/icons/chevron-tiny-left.vue.js';
-import '../../../../components/icons/chevron-tiny-right.vue.js';
-import '../../../../components/icons/chevron-tiny-up.vue.js';
-import '../../../../components/icons/chevron-up.vue.js';
-import '../../../../components/icons/cross-tiny.vue.js';
-import '../../../../components/icons/cross.vue.js';
-import '../../../../components/icons/curated-check.vue.js';
-import '../../../../components/icons/filters.vue.js';
-import '../../../../components/icons/grid-1-col.vue.js';
-import '../../../../components/icons/grid-2-col.vue.js';
-import '../../../../components/icons/grid-4-col.vue.js';
-import '../../../../components/icons/grid-2-rows.vue.js';
-import '../../../../components/icons/hide.vue.js';
-import '../../../../components/icons/history-tiny.vue.js';
-import '../../../../components/icons/history.vue.js';
-import '../../../../components/icons/light-bulb-off.vue.js';
-import '../../../../components/icons/light-bulb-on.vue.js';
-import '../../../../components/icons/menu.vue.js';
-import '../../../../components/icons/minus-tiny.vue.js';
-import '../../../../components/icons/minus.vue.js';
-import '../../../../components/icons/nq-1.vue.js';
-import '../../../../components/icons/nq-2.vue.js';
-import '../../../../components/icons/nq-3.vue.js';
-import '../../../../components/icons/nq-4.vue.js';
-import '../../../../components/icons/plus.vue.js';
-import '../../../../components/icons/radiobutton-selected.vue.js';
-import '../../../../components/icons/radiobutton-unselected.vue.js';
-import '../../../../components/icons/search.vue.js';
-import '../../../../components/icons/settings.vue.js';
-import '../../../../components/icons/show.vue.js';
-import '../../../../components/icons/star.vue.js';
-import '../../../../components/icons/search-tiny.vue.js';
-import '../../../../components/icons/tag.vue.js';
-import '../../../../components/icons/trash-open.vue.js';
-import '../../../../components/icons/trash.vue.js';
-import '../../../../components/icons/trending-tiny.vue.js';
-import '../../../../components/icons/trending.vue.js';
-import '../../../../components/icons/user.vue.js';
-import '../../../../components/layouts/fixed-header-and-asides-layout.vue.js';
-import '../../../../components/layouts/multi-column-max-width-layout.vue.js';
-import '../../../../components/layouts/single-column-layout.vue.js';
-import '../../../../components/modals/base-events-modal-close.vue.js';
-import '../../../../components/modals/base-events-modal.vue.js';
-import '../../../../components/modals/base-events-modal-open.vue.js';
-import '../../../../components/modals/base-modal.vue.js';
-import '../../../../components/modals/base-id-modal.vue.js';
-import '../../../../components/modals/base-id-modal-close.vue.js';
-import '../../../../components/modals/base-id-modal-open.vue.js';
-import '../../../../components/modals/close-main-modal.vue.js';
-import '../../../../components/modals/main-modal.vue.js';
-import '../../../../components/modals/open-main-modal.vue.js';
-import '../../../../components/panels/base-header-toggle-panel.vue.js';
-import '../../../../components/panels/base-toggle-panel.vue.js';
-import '../../../../components/panels/base-id-toggle-panel.vue.js';
-import '../../../../components/panels/base-id-toggle-panel-button.vue.js';
-import '../../../../components/result/base-result-add-to-cart.vue.js';
-import '../../../../components/result/base-result-current-price.vue.js';
-import '../../../../components/result/base-result-image.vue.js';
-import '../../../../components/result/base-result-link.vue.js';
-import '../../../../components/result/base-result-previous-price.vue.js';
-import '../../../../components/result/base-result-fallback-image.vue.js';
-import '../../../../components/result/base-result-placeholder-image.vue.js';
-import '../../../../components/result/base-result-rating.vue.js';
-import '../../../../components/scroll/base-scroll.vue.js';
-import '../../../../components/scroll/scroll.mixin.js';
-import '../../../../components/suggestions/base-suggestion.vue.js';
-import '../../../../components/suggestions/base-suggestions.vue.js';
-import '../../../../components/auto-progress-bar.vue.js';
-import '../../../../components/base-dropdown.vue.js';
-import '../../../../components/base-event-button.vue.js';
-import '../../../../components/base-grid.vue.js';
-import '../../../../components/base-keyboard-navigation.vue.js';
-import '../../../../components/base-rating.vue.js';
-import '../../../../components/base-switch.vue.js';
-import '../../../../components/base-variable-column-grid.vue.js';
-import '../../../../components/global-x-bus.vue_rollup-plugin-vue_script.vue.js';
-import '../../../../components/items-list.vue.js';
-import '../../../../components/location-provider.vue_rollup-plugin-vue_script.vue.js';
-import '../../../../components/no-element.js';
-import '../../../../components/sliding-panel.vue.js';
-import '../../../../components/snippet-callbacks.vue.js';
-import 'rxjs';
-import 'rxjs/operators';
-import 'vue-class-component';
-import { State } from '../../../../components/decorators/store.decorators.js';
-import '../../../../components/items-list-injection.mixin.js';
 import { xComponentMixin } from '../../../../components/x-component.mixin.js';
 import { facetsXModule } from '../../x-module.js';
 import __vue_component__ from '../lists/filters-list.vue.js';
@@ -200,12 +77,10 @@ let HierarchicalFilter = class HierarchicalFilter extends Vue {
      * @internal
      */
     get renderedChildrenFilters() {
-        return this.filter.children?.map(filterId => this.filters[filterId]) ?? [];
+        return this.filter.children ?? [];
     }
     isFilterPartiallySelected(filter) {
-        const selectedChildren = filter.children
-            ?.map(filterId => this.filters[filterId])
-            ?.filter(filter => filter?.selected);
+        const selectedChildren = filter.children?.filter(filter => filter.selected);
         const filterChildrenLength = filter.children?.length ?? 0;
         return (!!selectedChildren &&
             ((selectedChildren.length > 0 && selectedChildren.length < filterChildrenLength) ||
@@ -219,9 +94,6 @@ __decorate([
 __decorate([
     Prop()
 ], HierarchicalFilter.prototype, "childrenAnimation", void 0);
-__decorate([
-    State('facets', 'filters')
-], HierarchicalFilter.prototype, "filters", void 0);
 __decorate([
     Prop()
 ], HierarchicalFilter.prototype, "clickEvents", void 0);

package/js/x-modules/facets/components/filters/hierarchical-filter.vue_rollup-plugin-vue_script.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hierarchical-filter.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../../src/x-modules/facets/components/filters/hierarchical-filter.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport {\n Filter,\n HierarchicalFilter as HierarchicalFilterModel,\n isHierarchicalFilter\n} from '@empathyco/x-types';\nimport { isObject } from '@empathyco/x-utils';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { ~~State,~~ xComponentMixin } from '../../../../components';\nimport { VueCSSClasses } from '../../../../utils/types';\nimport { XEventsTypes } from '../../../../wiring/events.types';\nimport { facetsXModule } from '../../x-module';\nimport FiltersList from '../lists/filters-list.vue';\nimport RenderlessFilter from './renderless-filter.vue';\n\n/*\n Renders a hierarchical filter recursively, emitting the needed events when clicked.\n \n @public\n /\n@Component({\n name: 'HierarchicalFilter',\n components: { FiltersList, RenderlessFilter },\n mixins: [xComponentMixin(facetsXModule)]\n})\nexport default class HierarchicalFilter extends Vue {\n /* The filter data to render. /\n @Prop({ required: true })\n public filter!: HierarchicalFilterModel;\n\n /* The animation component to use for the children filters. /\n @Prop()\n public childrenAnimation?: Vue \| string;\n ~~/\n The state filters.\n \n @internal~~\n /\n ~~@State('facets', 'filters')\n public filters!: Record<Filter['id'], Filter>;\n\n~~ /\n Additional events, with their payload, to emit when the filter is clicked.\n \n @public\n /\n @Prop()\n public clickEvents!: Partial<XEventsTypes>;\n\n /\n The {@link XEventsTypes \| events} to emit.\n \n @returns The events to emit when clicked.\n * @internal\n /\n protected get _clickEvents(): Partial<XEventsTypes> {\n return {\n UserClickedAHierarchicalFilter: this.filter,\n ...this.clickEvents\n };\n }\n\n /\n Dynamic CSS classes to apply to the component.\n \n @returns The dynamic CSS classes to apply to the component.\n * @internal\n /\n protected get cssClasses(): VueCSSClasses {\n return {\n 'x-hierarchical-filter--is-partially-selected': this.isPartiallySelected,\n 'x-hierarchical-filter--is-selected': this.filter.selected,\n 'x-filter--is-partially-selected': this.isPartiallySelected\n };\n }\n\n /\n Gets the child filter click events, converting the payload of the events that have a\n * {@link @empathyco/x-types#HierarchicalFilter} as payload to the corresponding child filter.\n \n @param childFilter - The child filter.\n * @returns The events to emit when clicking a child.\n * @internal\n /\n protected getChildFilterClickEvents(\n childFilter: HierarchicalFilterModel\n ): Partial<XEventsTypes> {\n return Object.entries(this._clickEvents).reduce((clickEvents, [event, payload]) => {\n return {\n ...clickEvents,\n [event]:\n isObject(payload) &&\n isHierarchicalFilter(payload as unknown as Filter) &&\n childFilter !== (payload as unknown as HierarchicalFilterModel)\n ? childFilter\n : payload\n };\n }, {} as Partial<XEventsTypes>);\n }\n\n /\n Returns if the filter is partially selected, which means having more than one child filter\n * selected, but not every of them, or having at least one child filter partially selected.\n \n @returns True if the filter is partially selected. False otherwise.\n * @internal\n /\n protected get isPartiallySelected(): boolean {\n return this.isFilterPartiallySelected(this.filter);\n }\n\n /\n List of filters to render, in case that the children's array\n * is empty it will return an empty array instead of inject the ones from the parent.\n \n @returns A list of filters.\n * @internal\n */\n protected get renderedChildrenFilters(): Filter[] {\n return this.filter.children~~?.map(filterId~~ ~~=> this.filters[filterId])~~ ?? [];\n }\n\n protected isFilterPartiallySelected(filter: HierarchicalFilterModel): boolean {\n const selectedChildren = filter.children\n ?.~~map(filterId => this.filters[filterId])\n ?.~~filter(filter => filter?.selected) ~~as HierarchicalFilterModel[] \| undefined~~;\n const filterChildrenLength = filter.children?.length ?? 0;\n return (\n !!selectedChildren &&\n ((selectedChildren.length > 0 && selectedChildren.length < filterChildrenLength) \|\|\n // eslint-disable-next-line @typescript-eslint/unbound-method\n selectedChildren.some(this.isFilterPartiallySelected))\n );\n }\n}\n"],"names":["FiltersList","RenderlessFilter"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAyEA;;;;;AAUA,IAAqB,kBAAkB,GAAvC,MAAqB,kBAAmB,SAAQ,GAAG;;;;;;;~~IA8BjD~~,IAAc,YAAY;QACxB,OAAO;YACL,8BAA8B,EAAE,IAAI,CAAC,MAAM;YAC3C,GAAG,IAAI,CAAC,WAAW;SACpB,CAAC;KACH;;;;;;;IAQD,IAAc,UAAU;QACtB,OAAO;YACL,8CAA8C,EAAE,IAAI,CAAC,mBAAmB;YACxE,oCAAoC,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ;YAC1D,iCAAiC,EAAE,IAAI,CAAC,mBAAmB;SAC5D,CAAC;KACH;;;;;;;;;IAUS,yBAAyB,CACjC,WAAoC;QAEpC,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC;YAC5E,OAAO;gBACL,GAAG,WAAW;gBACd,CAAC,KAAK,GACJ,QAAQ,CAAC,OAAO,CAAC;oBACjB,oBAAoB,CAAC,OAA4B,CAAC;oBAClD,WAAW,KAAM,OAA8C;sBAC3D,WAAW;sBACX,OAAO;aACd,CAAC;SACH,EAAE,EAA2B,CAAC,CAAC;KACjC;;;;;;;;IASD,IAAc,mBAAmB;QAC/B,OAAO,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACpD;;;;;;;;IASD,IAAc,uBAAuB;QACnC,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,~~EAAE,GAAG,CAAC,QAAQ,~~IAAI,~~IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,~~EAAE,CAAC;~~KAC5E~~;IAES,yBAAyB,CAAC,MAA+B;QACjE,MAAM,gBAAgB,GAAG,MAAM,CAAC,QAAQ~~;cACpC~~,~~GAAG~~,~~CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;cACvC,~~MAAM,CAAC,MAAM,IAAI,MAAM,~~EAAE~~,QAAQ,~~CAA0C~~,CAAC;~~QAChF~~,MAAM,oBAAoB,GAAG,MAAM,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC,CAAC;QAC1D,QACE,CAAC,CAAC,gBAAgB;aACjB,CAAC,gBAAgB,CAAC,MAAM,GAAG,CAAC,IAAI,gBAAgB,CAAC,MAAM,GAAG,oBAAoB;;gBAE7E,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC,EACxD;KACH;CACF,CAAA;~~AA1GC~~;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;kDACe;AAIxC;IADC,IAAI,EAAE;6DACiC;~~AAOxC~~;IADC,~~KAAK,CAAC,QAAQ,EAAE,SAAS,CAAC;mDACmB;AAQ9C;IADC,~~IAAI,EAAE;uDACoC;~~AAtBxB~~,kBAAkB;IALtC,SAAS,CAAC;QACT,IAAI,EAAE,oBAAoB;QAC1B,UAAU,EAAE,eAAEA,iBAAW,oBAAEC,mBAAgB,EAAE;QAC7C,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;KACzC,CAAC;GACmB,kBAAkB,~~CA6GtC~~;~~aA7GoB~~,kBAAkB;;;;"}
1	+ {"version":3,"file":"hierarchical-filter.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../../src/x-modules/facets/components/filters/hierarchical-filter.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport {\n Filter,\n HierarchicalFilter as HierarchicalFilterModel,\n isHierarchicalFilter\n} from '@empathyco/x-types';\nimport { isObject } from '@empathyco/x-utils';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { xComponentMixin } from '../../../../components/x-component.mixin';\nimport { VueCSSClasses } from '../../../../utils/types';\nimport { XEventsTypes } from '../../../../wiring/events.types';\nimport { facetsXModule } from '../../x-module';\nimport FiltersList from '../lists/filters-list.vue';\nimport RenderlessFilter from './renderless-filter.vue';\n\n/*\n Renders a hierarchical filter recursively, emitting the needed events when clicked.\n \n @public\n /\n@Component({\n name: 'HierarchicalFilter',\n components: { FiltersList, RenderlessFilter },\n mixins: [xComponentMixin(facetsXModule)]\n})\nexport default class HierarchicalFilter extends Vue {\n /* The filter data to render. /\n @Prop({ required: true })\n public filter!: HierarchicalFilterModel;\n\n /* The animation component to use for the children filters. /\n @Prop()\n public childrenAnimation?: Vue \| string;\n\n /\n Additional events, with their payload, to emit when the filter is clicked.\n \n @public\n /\n @Prop()\n public clickEvents!: Partial<XEventsTypes>;\n\n /\n The {@link XEventsTypes \| events} to emit.\n \n @returns The events to emit when clicked.\n * @internal\n /\n protected get _clickEvents(): Partial<XEventsTypes> {\n return {\n UserClickedAHierarchicalFilter: this.filter,\n ...this.clickEvents\n };\n }\n\n /\n Dynamic CSS classes to apply to the component.\n \n @returns The dynamic CSS classes to apply to the component.\n * @internal\n /\n protected get cssClasses(): VueCSSClasses {\n return {\n 'x-hierarchical-filter--is-partially-selected': this.isPartiallySelected,\n 'x-hierarchical-filter--is-selected': this.filter.selected,\n 'x-filter--is-partially-selected': this.isPartiallySelected\n };\n }\n\n /\n Gets the child filter click events, converting the payload of the events that have a\n * {@link @empathyco/x-types#HierarchicalFilter} as payload to the corresponding child filter.\n \n @param childFilter - The child filter.\n * @returns The events to emit when clicking a child.\n * @internal\n /\n protected getChildFilterClickEvents(\n childFilter: HierarchicalFilterModel\n ): Partial<XEventsTypes> {\n return Object.entries(this._clickEvents).reduce((clickEvents, [event, payload]) => {\n return {\n ...clickEvents,\n [event]:\n isObject(payload) &&\n isHierarchicalFilter(payload as unknown as Filter) &&\n childFilter !== (payload as unknown as HierarchicalFilterModel)\n ? childFilter\n : payload\n };\n }, {} as Partial<XEventsTypes>);\n }\n\n /\n Returns if the filter is partially selected, which means having more than one child filter\n * selected, but not every of them, or having at least one child filter partially selected.\n \n @returns True if the filter is partially selected. False otherwise.\n * @internal\n /\n protected get isPartiallySelected(): boolean {\n return this.isFilterPartiallySelected(this.filter);\n }\n\n /\n List of filters to render, in case that the children's array\n * is empty it will return an empty array instead of inject the ones from the parent.\n \n @returns A list of filters.\n * @internal\n */\n protected get renderedChildrenFilters(): Filter[] {\n return this.filter.children ?? [];\n }\n\n protected isFilterPartiallySelected(filter: HierarchicalFilterModel): boolean {\n const selectedChildren = filter.children?.filter(filter => filter.selected);\n const filterChildrenLength = filter.children?.length ?? 0;\n return (\n !!selectedChildren &&\n ((selectedChildren.length > 0 && selectedChildren.length < filterChildrenLength) \|\|\n // eslint-disable-next-line @typescript-eslint/unbound-method\n selectedChildren.some(this.isFilterPartiallySelected))\n );\n }\n}\n"],"names":["FiltersList","RenderlessFilter"],"mappings":";;;;;;;;;;AAyEA;;;;;AAUA,IAAqB,kBAAkB,GAAvC,MAAqB,kBAAmB,SAAQ,GAAG;;;;;;;IAuBjD,IAAc,YAAY;QACxB,OAAO;YACL,8BAA8B,EAAE,IAAI,CAAC,MAAM;YAC3C,GAAG,IAAI,CAAC,WAAW;SACpB,CAAC;KACH;;;;;;;IAQD,IAAc,UAAU;QACtB,OAAO;YACL,8CAA8C,EAAE,IAAI,CAAC,mBAAmB;YACxE,oCAAoC,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ;YAC1D,iCAAiC,EAAE,IAAI,CAAC,mBAAmB;SAC5D,CAAC;KACH;;;;;;;;;IAUS,yBAAyB,CACjC,WAAoC;QAEpC,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC;YAC5E,OAAO;gBACL,GAAG,WAAW;gBACd,CAAC,KAAK,GACJ,QAAQ,CAAC,OAAO,CAAC;oBACjB,oBAAoB,CAAC,OAA4B,CAAC;oBAClD,WAAW,KAAM,OAA8C;sBAC3D,WAAW;sBACX,OAAO;aACd,CAAC;SACH,EAAE,EAA2B,CAAC,CAAC;KACjC;;;;;;;;IASD,IAAc,mBAAmB;QAC/B,OAAO,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACpD;;;;;;;;IASD,IAAc,uBAAuB;QACnC,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,IAAI,EAAE,CAAC;KACnC;IAES,yBAAyB,CAAC,MAA+B;QACjE,MAAM,gBAAgB,GAAG,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC;QAC5E,MAAM,oBAAoB,GAAG,MAAM,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC,CAAC;QAC1D,QACE,CAAC,CAAC,gBAAgB;aACjB,CAAC,gBAAgB,CAAC,MAAM,GAAG,CAAC,IAAI,gBAAgB,CAAC,MAAM,GAAG,oBAAoB;;gBAE7E,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC,EACxD;KACH;CACF,CAAA;AAjGC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;kDACe;AAIxC;IADC,IAAI,EAAE;6DACiC;AAQxC;IADC,IAAI,EAAE;uDACoC;AAfxB,kBAAkB;IALtC,SAAS,CAAC;QACT,IAAI,EAAE,oBAAoB;QAC1B,UAAU,EAAE,eAAEA,iBAAW,oBAAEC,mBAAgB,EAAE;QAC7C,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;KACzC,CAAC;GACmB,kBAAkB,CAoGtC;aApGoB,kBAAkB;;;;"}

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

@@ -22,14 +22,16 @@ class EditableNumberRangeFilterEntity {
      * @param filter - The filter to deselect.
      */
     deselect(filter) {
-        const newFilter = {
-            ...filter,
-            selected: false,
-            range: { min: null, max: null }
+        const newFilterState = {
+            facetId: filter.facetId,
+            range: { min: null, max: null },
+            selected: false
         };
-        newFilter.id = this.getNewFilterId(newFilter);
         this.removePreviousFilter(filter.facetId);
-        this.store.commit('x/facets/setFilter', newFilter);
+        this.store.commit('x/facets/mutateFilter', {
+            filter,
+            newFilterState: Object.assign(newFilterState, { id: this.getNewFilterId(newFilterState) })
+        });
         addFacetIfNotPresent(this.store, filter.facetId, 'EditableNumberRangeFacet');
     }
     /**
@@ -43,10 +45,9 @@ class EditableNumberRangeFilterEntity {
     select(filter) {
         const newFilterId = this.getNewFilterId(filter);
         this.removePreviousFilter(filter.facetId);
-        this.store.commit('x/facets/setFilter', {
-            ...filter,
-            id: newFilterId,
-            selected: this.isSelected(filter)
+        this.store.commit('x/facets/mutateFilter', {
+            filter,
+            newFilterState: { id: newFilterId, selected: this.isSelected(filter) }
         });
         addFacetIfNotPresent(this.store, filter.facetId, 'EditableNumberRangeFacet');
     }

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

	@@ -1 +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 and reset the {@link @empathyco/x-types#EditableNumberRangeFilter\n * \| EditableNumberRangeFilter} values to null.\n \n @param filter - The filter to deselect.\n /\n deselect(filter: EditableNumberRangeFilter): void {\n const ~~newFilter~~: EditableNumberRangeFilter = {\n ~~...filter,\n selected~~: ~~false~~,\n range: { min: null, max: null }\n };\n ~~newFilter.id =~~ this.~~getNewFilterId(newFilter);\n this.~~removePreviousFilter(filter.facetId);\n this.store.commit('x/facets/~~setFilter~~', ~~newFilter~~);\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/~~setFilter~~', {\n ~~...~~filter,\n id: newFilterId~~,\n~~ selected: this.isSelected(filter)\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: EditableNumberRangeFilter): 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 return this.store.getters['x/facets/facets'][facetId]?.filters?.[0];\n }\n}\n"],"names":[],"mappings":";;;AAWA;;;;;;MAMa,+BAA+B;IAC1C,YAA6B,KAA6B;QAA7B,UAAK,GAAL,KAAK,CAAwB;KAAI;IAE9D,OAAO,OAAO,CAAC,MAAc;QAC3B,OAAO,2BAA2B,CAAC,MAAM,CAAC,CAAC;KAC5C;;;;;;;;IASD,QAAQ,CAAC,MAAiC;QACxC,MAAM,~~SAAS~~,~~GAA8B~~;~~YAC3C~~,~~GAAG~~,MAAM~~;YACT~~,~~QAAQ~~,~~EAAE,KAAK~~;~~YACf~~,KAAK,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE;~~SAChC~~,CAAC;QACF,~~SAAS~~,CAAC,~~EAAE~~,~~GAAG,IAAI,~~CAAC,~~cAAc~~,CAAC,~~SAAS~~,CAAC,CAAC;~~QAC9C~~,IAAI,CAAC,~~oBAAoB~~,CAAC,MAAM,CAAC,~~OAAO~~,CAAC,CAAC~~;QAC1C~~,IAAI,CAAC,~~KAAK~~,CAAC,~~MAAM~~,CAAC,~~oBAAoB,~~EAAE,~~SAAS~~,CAAC,CAAC;~~QACnD~~,oBAAoB,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,0BAA0B,CAAC,CAAC;KAC9E;;;;;;;;;IAUD,MAAM,CAAC,MAAiC;QACtC,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;QAChD,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAC1C,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,~~oBAAoB~~,EAAE;~~YACtC~~,~~GAAG,~~MAAM;~~YACT~~,EAAE,EAAE,WAAW~~;YACf~~,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC;~~SAClC~~,CAAC,CAAC;QACH,oBAAoB,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,0BAA0B,CAAC,CAAC;KAC9E;;;;;;;;IASS,cAAc,CAAC,~~MAAiC~~;~~QACxD~~,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC;KACpF;;;;;;;;IASS,UAAU,CAAC,MAAiC;QACpD,OAAO,MAAM,CAAC,KAAK,CAAC,GAAG,KAAK,IAAI,IAAI,MAAM,CAAC,KAAK,CAAC,GAAG,KAAK,IAAI,CAAC;KAC/D;;;;;;;IAQS,oBAAoB,CAAC,OAAoB;QACjD,MAAM,cAAc,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;QACtD,IAAI,cAAc,EAAE;YAClB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,uBAAuB,EAAE,cAAc,CAAC,CAAC;SAC5D;KACF;;;;;;;;IASS,gBAAgB,CAAC,OAAoB;QAC7C,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,CAAC;KACrE;;;;;"}
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 and reset the {@link @empathyco/x-types#EditableNumberRangeFilter\n * \| EditableNumberRangeFilter} values to null.\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: null, max: null },\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: { id: newFilterId, selected: this.isSelected(filter) }\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 return this.store.getters['x/facets/facets'][facetId]?.filters?.[0];\n }\n}\n"],"names":[],"mappings":";;;AAWA;;;;;;MAMa,+BAA+B;IAC1C,YAA6B,KAA6B;QAA7B,UAAK,GAAL,KAAK,CAAwB;KAAI;IAE9D,OAAO,OAAO,CAAC,MAAc;QAC3B,OAAO,2BAA2B,CAAC,MAAM,CAAC,CAAC;KAC5C;;;;;;;;IASD,QAAQ,CAAC,MAAiC;QACxC,MAAM,cAAc,GAAsE;YACxF,OAAO,EAAE,MAAM,CAAC,OAAO;YACvB,KAAK,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE;YAC/B,QAAQ,EAAE,KAAK;SAChB,CAAC;QACF,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAC1C,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,uBAAuB,EAAE;YACzC,MAAM;YACN,cAAc,EAAE,MAAM,CAAC,MAAM,CAAC,cAAc,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,CAAC;SAC3F,CAAC,CAAC;QACH,oBAAoB,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,0BAA0B,CAAC,CAAC;KAC9E;;;;;;;;;IAUD,MAAM,CAAC,MAAiC;QACtC,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;QAChD,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAC1C,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,uBAAuB,EAAE;YACzC,MAAM;YACN,cAAc,EAAE,EAAE,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE;SACvE,CAAC,CAAC;QACH,oBAAoB,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,0BAA0B,CAAC,CAAC;KAC9E;;;;;;;;IASS,cAAc,CAAC,MAA4D;QACnF,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC;KACpF;;;;;;;;IASS,UAAU,CAAC,MAAiC;QACpD,OAAO,MAAM,CAAC,KAAK,CAAC,GAAG,KAAK,IAAI,IAAI,MAAM,CAAC,KAAK,CAAC,GAAG,KAAK,IAAI,CAAC;KAC/D;;;;;;;IAQS,oBAAoB,CAAC,OAAoB;QACjD,MAAM,cAAc,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;QACtD,IAAI,cAAc,EAAE;YAClB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,uBAAuB,EAAE,cAAc,CAAC,CAAC;SAC5D;KACF;;;;;;;;IASS,gBAAgB,CAAC,OAAoB;QAC7C,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,CAAC;KACrE;;;;;"}

package/js/x-modules/facets/entities/hierarchical-filter.entity.js CHANGED Viewed

@@ -17,7 +17,7 @@ class HierarchicalFilterEntity {
      * @param filter - The filter to deselect.
      */
     deselect(filter) {
-        this.saveFilter({ ...filter, selected: false });
+        this.saveFilter(filter, { selected: false });
         this.deselectDescendants(filter);
         addFacetIfNotPresent(this.store, filter.facetId, 'HierarchicalFacet');
     }
@@ -27,7 +27,7 @@ class HierarchicalFilterEntity {
      * @param filter - The filter to select.
      */
     select(filter) {
-        this.saveFilter({ ...filter, selected: true });
+        this.saveFilter(filter, { selected: true });
         this.selectAncestors(filter);
         addFacetIfNotPresent(this.store, filter.facetId, 'HierarchicalFacet');
     }
@@ -40,12 +40,9 @@ class HierarchicalFilterEntity {
      */
     deselectDescendants(filter) {
         if (filter.children) {
-            filter.children.forEach(childId => {
-                const child = this.getFilterById(childId);
-                if (child) {
-                    this.saveFilter({ ...child, selected: false });
-                    this.deselectDescendants(child);
-                }
+            filter.children.forEach(child => {
+                this.saveFilter(child, { selected: false });
+                this.deselectDescendants(child);
             });
         }
     }
@@ -60,7 +57,7 @@ class HierarchicalFilterEntity {
         if (filter.parentId) {
             const parent = this.getFilterById(filter.parentId);
             if (parent) {
-                this.saveFilter({ ...parent, selected: true });
+                this.saveFilter(parent, { selected: true });
                 this.selectAncestors(parent);
             }
         }
@@ -79,10 +76,11 @@ class HierarchicalFilterEntity {
      * Saves the given filter to the store.
      *
      * @param filter - The filter to save to the store.
+     * @param newFilterState - The new partial state of the filter.
      * @internal
      */
-    saveFilter(filter) {
-        this.store.commit('x/facets/setFilter', filter);
+    saveFilter(filter, newFilterState = {}) {
+        this.store.commit('x/facets/mutateFilter', { filter, newFilterState });
     }
 }
 HierarchicalFilterEntity.accepts = isHierarchicalFilter;

package/js/x-modules/facets/entities/hierarchical-filter.entity.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hierarchical-filter.entity.js","sources":["../../../../../src/x-modules/facets/entities/hierarchical-filter.entity.ts"],"sourcesContent":["import { HierarchicalFilter, isHierarchicalFilter } 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#HierarchicalFilter\n * \| HierarchicalFilter}.\n \n @internal\n /\nexport class HierarchicalFilterEntity implements FilterEntity {\n public static accepts = isHierarchicalFilter;\n\n public constructor(protected store: Store<RootXStoreState>) {}\n\n /\n Deselects the hierarchical filter and all of its descendants.\n \n @param filter - The filter to deselect.\n /\n deselect(filter: HierarchicalFilter): void {\n this.saveFilter(~~{ ...~~filter, selected: false });\n this.deselectDescendants(filter);\n addFacetIfNotPresent(this.store, filter.facetId, 'HierarchicalFacet');\n }\n\n /\n Selects the hierarchical filter and its ancestors.\n \n @param filter - The filter to select.\n /\n select(filter: HierarchicalFilter): void {\n this.saveFilter(~~{ ...~~filter, selected: true });\n this.selectAncestors(filter);\n addFacetIfNotPresent(this.store, filter.facetId, 'HierarchicalFacet');\n }\n\n /\n Deselects all the descendants of the given filter, saving them to the store.\n \n @remarks The descendants hierarchy is retrieved from the store.\n * @param filter - The filter to deselect its descendants.\n * @internal\n /\n protected deselectDescendants(filter: HierarchicalFilter): void {\n if (filter.children) {\n filter.children.forEach(~~childId~~ => {\n ~~const child =~~ this.~~getFilterById~~(~~childId);\n if (~~child) {~~\n this.saveFilter({~~ ~~...child,~~ selected: false });\n this.deselectDescendants(child);\n ~~}\n~~ });\n }\n }\n\n /\n Selects all the ancestors of the given filter, saving them to the store.\n \n @remarks The ancestors hierarchy is retrieved from the store.\n * @param filter - The filter to select its ancestors.\n * @internal\n /\n protected selectAncestors(filter: HierarchicalFilter): void {\n if (filter.parentId) {\n const parent = this.getFilterById(filter.parentId);\n if (parent) {\n this.saveFilter(~~{ ...~~parent, selected: true });\n this.selectAncestors(parent);\n }\n }\n }\n\n /\n Retrieves a hierarchical filter from the store by its id.\n \n @param id - The id of the filter to retrieve.\n * @returns The hierarchical filter retrieved from the store.\n * @internal\n /\n protected getFilterById(id: HierarchicalFilter['id']): HierarchicalFilter {\n return this.store.state.x.facets.filters[id] as HierarchicalFilter;\n }\n\n /\n Saves the given filter to the store.\n \n @param filter - The filter to save to the store.\n * @internal\n */\n protected saveFilter(filter: HierarchicalFilter): void {\n this.store.commit('x/facets/~~setFilter~~', filter);\n }\n}\n"],"names":[],"mappings":";;;AAMA;;;;;;MAMa,wBAAwB;IAGnC,YAA6B,KAA6B;QAA7B,UAAK,GAAL,KAAK,CAAwB;KAAI;;;;;;IAO9D,QAAQ,CAAC,MAA0B;QACjC,IAAI,CAAC,UAAU,CAAC,~~EAAE,GAAG,~~MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;~~QAChD~~,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;QACjC,oBAAoB,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC;KACvE;;;;;;IAOD,MAAM,CAAC,MAA0B;QAC/B,IAAI,CAAC,UAAU,CAAC,~~EAAE,GAAG,~~MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;~~QAC/C~~,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;QAC7B,oBAAoB,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC;KACvE;;;;;;;;IASS,mBAAmB,CAAC,MAA0B;QACtD,IAAI,MAAM,CAAC,QAAQ,EAAE;YACnB,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,~~OAAO~~;~~gBAC7B~~,~~MAAM,KAAK,GAAG,~~IAAI,CAAC,~~aAAa~~,CAAC,~~OAAO,CAAC,CAAC;gBAC1C,IAAI,~~KAAK,EAAE~~;oBACT~~,~~IAAI,CAAC,UAAU,CAAC,~~EAAE,~~GAAG,KAAK,EAAE,~~QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;~~oBAC/C~~,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC;~~iBACjC;aACF~~,CAAC,CAAC;SACJ;KACF;;;;;;;;IASS,eAAe,CAAC,MAA0B;QAClD,IAAI,MAAM,CAAC,QAAQ,EAAE;YACnB,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;YACnD,IAAI,MAAM,EAAE;gBACV,IAAI,CAAC,UAAU,CAAC,~~EAAE,GAAG,~~MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;~~gBAC/C~~,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;aAC9B;SACF;KACF;;;;;;;;IASS,aAAa,CAAC,EAA4B;QAClD,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAuB,CAAC;KACpE~~;;;;;;;IAQS~~,UAAU,~~CAAC~~,MAA0B;~~QAC7C~~,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,~~oBAAoB~~,EAAE,MAAM,CAAC,CAAC;~~KACjD~~;;~~AAjFa~~,gCAAO,GAAG,oBAAoB;;;;"}
1	+ {"version":3,"file":"hierarchical-filter.entity.js","sources":["../../../../../src/x-modules/facets/entities/hierarchical-filter.entity.ts"],"sourcesContent":["import { HierarchicalFilter, isHierarchicalFilter } 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#HierarchicalFilter\n * \| HierarchicalFilter}.\n \n @internal\n /\nexport class HierarchicalFilterEntity implements FilterEntity {\n public static accepts = isHierarchicalFilter;\n\n public constructor(protected store: Store<RootXStoreState>) {}\n\n /\n Deselects the hierarchical filter and all of its descendants.\n \n @param filter - The filter to deselect.\n /\n deselect(filter: HierarchicalFilter): void {\n this.saveFilter(filter, { selected: false });\n this.deselectDescendants(filter);\n addFacetIfNotPresent(this.store, filter.facetId, 'HierarchicalFacet');\n }\n\n /\n Selects the hierarchical filter and its ancestors.\n \n @param filter - The filter to select.\n /\n select(filter: HierarchicalFilter): void {\n this.saveFilter(filter, { selected: true });\n this.selectAncestors(filter);\n addFacetIfNotPresent(this.store, filter.facetId, 'HierarchicalFacet');\n }\n\n /\n Deselects all the descendants of the given filter, saving them to the store.\n \n @remarks The descendants hierarchy is retrieved from the store.\n * @param filter - The filter to deselect its descendants.\n * @internal\n /\n protected deselectDescendants(filter: HierarchicalFilter): void {\n if (filter.children) {\n filter.children.forEach(child => {\n this.saveFilter(child, { selected: false });\n this.deselectDescendants(child);\n });\n }\n }\n\n /\n Selects all the ancestors of the given filter, saving them to the store.\n \n @remarks The ancestors hierarchy is retrieved from the store.\n * @param filter - The filter to select its ancestors.\n * @internal\n /\n protected selectAncestors(filter: HierarchicalFilter): void {\n if (filter.parentId) {\n const parent = this.getFilterById(filter.parentId);\n if (parent) {\n this.saveFilter(parent, { selected: true });\n this.selectAncestors(parent);\n }\n }\n }\n\n /\n Retrieves a hierarchical filter from the store by its id.\n \n @param id - The id of the filter to retrieve.\n * @returns The hierarchical filter retrieved from the store.\n * @internal\n /\n protected getFilterById(id: HierarchicalFilter['id']): HierarchicalFilter {\n return this.store.state.x.facets.filters[id] as HierarchicalFilter;\n }\n\n /\n Saves the given filter to the store.\n \n @param filter - The filter to save to the store.\n * @param newFilterState - The new partial state of the filter.\n * @internal\n */\n protected saveFilter(\n filter: HierarchicalFilter,\n newFilterState: Partial<HierarchicalFilter> = {}\n ): void {\n this.store.commit('x/facets/mutateFilter', { filter, newFilterState });\n }\n}\n"],"names":[],"mappings":";;;AAMA;;;;;;MAMa,wBAAwB;IAGnC,YAA6B,KAA6B;QAA7B,UAAK,GAAL,KAAK,CAAwB;KAAI;;;;;;IAO9D,QAAQ,CAAC,MAA0B;QACjC,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;QAC7C,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;QACjC,oBAAoB,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC;KACvE;;;;;;IAOD,MAAM,CAAC,MAA0B;QAC/B,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QAC5C,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;QAC7B,oBAAoB,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC;KACvE;;;;;;;;IASS,mBAAmB,CAAC,MAA0B;QACtD,IAAI,MAAM,CAAC,QAAQ,EAAE;YACnB,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK;gBAC3B,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;gBAC5C,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC;aACjC,CAAC,CAAC;SACJ;KACF;;;;;;;;IASS,eAAe,CAAC,MAA0B;QAClD,IAAI,MAAM,CAAC,QAAQ,EAAE;YACnB,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;YACnD,IAAI,MAAM,EAAE;gBACV,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;gBAC5C,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;aAC9B;SACF;KACF;;;;;;;;IASS,aAAa,CAAC,EAA4B;QAClD,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAuB,CAAC;KACpE;;;;;;;;IASS,UAAU,CAClB,MAA0B,EAC1B,iBAA8C,EAAE;QAEhD,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC,CAAC;KACxE;;AAlFa,gCAAO,GAAG,oBAAoB;;;;"}

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

@@ -16,7 +16,7 @@ class NumberRangeFilterEntity {
      * @param filter - The filter to deselect.
      */
     deselect(filter) {
-        this.store.commit('x/facets/setFilter', { ...filter, selected: false });
+        this.store.commit('x/facets/mutateFilter', { filter, newFilterState: { selected: false } });
         addFacetIfNotPresent(this.store, filter.facetId, 'NumberRangeFacet');
     }
     /**
@@ -25,7 +25,7 @@ class NumberRangeFilterEntity {
      * @param filter - The filter to select.
      */
     select(filter) {
-        this.store.commit('x/facets/setFilter', { ...filter, selected: true });
+        this.store.commit('x/facets/mutateFilter', { filter, newFilterState: { selected: true } });
         addFacetIfNotPresent(this.store, filter.facetId, 'NumberRangeFacet');
     }
 }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"number-range-filter.entity.js","sources":["../../../../../src/x-modules/facets/entities/number-range-filter.entity.ts"],"sourcesContent":["import { Store } from 'vuex';\nimport { isNumberRangeFilter, NumberRangeFilter } from '@empathyco/x-types';\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 NumberRangeFilter}.\n \n @internal\n /\nexport class NumberRangeFilterEntity implements FilterEntity {\n public static accepts = isNumberRangeFilter;\n\n public constructor(protected store: Store<RootXStoreState>) {}\n\n /\n Deselects and saves to the store the given filter.\n \n @param filter - The filter to deselect.\n /\n deselect(filter: NumberRangeFilter): void {\n this.store.commit('x/facets/~~setFilter~~', { ~~...~~filter, selected: false });\n addFacetIfNotPresent(this.store, filter.facetId, 'NumberRangeFacet');\n }\n\n /\n Selects and saves to the store the given filter.\n \n @param filter - The filter to select.\n */\n select(filter: NumberRangeFilter): void {\n this.store.commit('x/facets/~~setFilter~~', { ~~...~~filter, selected: true });\n addFacetIfNotPresent(this.store, filter.facetId, 'NumberRangeFacet');\n }\n}\n"],"names":[],"mappings":";;;AAMA;;;;;MAKa,uBAAuB;IAGlC,YAA6B,KAA6B;QAA7B,UAAK,GAAL,KAAK,CAAwB;KAAI;;;;;;IAO9D,QAAQ,CAAC,MAAyB;QAChC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,~~oBAAoB~~,EAAE,EAAE,~~GAAG,~~MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;~~QACxE~~,oBAAoB,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;KACtE;;;;;;IAOD,MAAM,CAAC,MAAyB;QAC9B,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,~~oBAAoB~~,EAAE,EAAE,~~GAAG,~~MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;~~QACvE~~,oBAAoB,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;KACtE;;AAtBa,+BAAO,GAAG,mBAAmB;;;;"}
1	+ {"version":3,"file":"number-range-filter.entity.js","sources":["../../../../../src/x-modules/facets/entities/number-range-filter.entity.ts"],"sourcesContent":["import { Store } from 'vuex';\nimport { isNumberRangeFilter, NumberRangeFilter } from '@empathyco/x-types';\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 NumberRangeFilter}.\n \n @internal\n /\nexport class NumberRangeFilterEntity implements FilterEntity {\n public static accepts = isNumberRangeFilter;\n\n public constructor(protected store: Store<RootXStoreState>) {}\n\n /\n Deselects and saves to the store the given filter.\n \n @param filter - The filter to deselect.\n /\n deselect(filter: NumberRangeFilter): void {\n this.store.commit('x/facets/mutateFilter', { filter, newFilterState: { selected: false } });\n addFacetIfNotPresent(this.store, filter.facetId, 'NumberRangeFacet');\n }\n\n /\n Selects and saves to the store the given filter.\n \n @param filter - The filter to select.\n */\n select(filter: NumberRangeFilter): void {\n this.store.commit('x/facets/mutateFilter', { filter, newFilterState: { selected: true } });\n addFacetIfNotPresent(this.store, filter.facetId, 'NumberRangeFacet');\n }\n}\n"],"names":[],"mappings":";;;AAMA;;;;;MAKa,uBAAuB;IAGlC,YAA6B,KAA6B;QAA7B,UAAK,GAAL,KAAK,CAAwB;KAAI;;;;;;IAO9D,QAAQ,CAAC,MAAyB;QAChC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,cAAc,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;QAC5F,oBAAoB,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;KACtE;;;;;;IAOD,MAAM,CAAC,MAAyB;QAC9B,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,cAAc,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;QAC3F,oBAAoB,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;KACtE;;AAtBa,+BAAO,GAAG,mBAAmB;;;;"}

package/js/x-modules/facets/entities/raw-filter.entity.js CHANGED Viewed

@@ -27,7 +27,7 @@ class RawFilterEntity {
      * there is no need to set this property.
      */
     select(filter) {
-        this.store.commit('x/facets/setFilter', filter);
+        this.store.commit('x/facets/mutateFilter', { filter, newFilterState: { selected: true } });
     }
 }
 RawFilterEntity.accepts = isRawFilter;

package/js/x-modules/facets/entities/raw-filter.entity.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"raw-filter.entity.js","sources":["../../../../../src/x-modules/facets/entities/raw-filter.entity.ts"],"sourcesContent":["import { isRawFilter, RawFilter } from '@empathyco/x-types';\nimport { Store } from 'vuex';\nimport { FilterEntity } from './types';\n\n/*\n Allows selecting and deselecting a filter of {@link @empathyco/x-types#RawFilter \| RawFilter}.\n \n @internal\n /\nexport class RawFilterEntity implements FilterEntity {\n public static accepts = isRawFilter;\n\n public constructor(protected store: Store<unknown>) {}\n\n /\n It deselects the {@link @empathyco/x-types#RawFilter \| RawFilter}.\n \n @param filter - The filter to deselect.\n * @remarks As the {@link @empathyco/x-types#RawFilter.selected} is always true,\n * the deselection just removes the filter from the store.\n /\n deselect(filter: RawFilter): void {\n this.store.commit('x/facets/removeFilter', filter);\n }\n\n /\n It selects the {@link @empathyco/x-types#RawFilter \| RawFilter}.\n \n @param filter - The filter to select.\n * @remarks As the {@link @empathyco/x-types#RawFilter.selected} is always true,\n * there is no need to set this property.\n */\n select(filter: RawFilter): void {\n this.store.commit('x/facets/~~setFilter~~', filter);\n }\n}\n"],"names":[],"mappings":";;AAIA;;;;;MAKa,eAAe;IAG1B,YAA6B,KAAqB;QAArB,UAAK,GAAL,KAAK,CAAgB;KAAI;;;;;;;;IAStD,QAAQ,CAAC,MAAiB;QACxB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,uBAAuB,EAAE,MAAM,CAAC,CAAC;KACpD;;;;;;;;IASD,MAAM,CAAC,MAAiB;QACtB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,~~oBAAoB~~,EAAE,MAAM,CAAC,CAAC;~~KACjD~~;;AAxBa,uBAAO,GAAG,WAAW;;;;"}
1	+ {"version":3,"file":"raw-filter.entity.js","sources":["../../../../../src/x-modules/facets/entities/raw-filter.entity.ts"],"sourcesContent":["import { isRawFilter, RawFilter } from '@empathyco/x-types';\nimport { Store } from 'vuex';\nimport { FilterEntity } from './types';\n\n/*\n Allows selecting and deselecting a filter of {@link @empathyco/x-types#RawFilter \| RawFilter}.\n \n @internal\n /\nexport class RawFilterEntity implements FilterEntity {\n public static accepts = isRawFilter;\n\n public constructor(protected store: Store<unknown>) {}\n\n /\n It deselects the {@link @empathyco/x-types#RawFilter \| RawFilter}.\n \n @param filter - The filter to deselect.\n * @remarks As the {@link @empathyco/x-types#RawFilter.selected} is always true,\n * the deselection just removes the filter from the store.\n /\n deselect(filter: RawFilter): void {\n this.store.commit('x/facets/removeFilter', filter);\n }\n\n /\n It selects the {@link @empathyco/x-types#RawFilter \| RawFilter}.\n \n @param filter - The filter to select.\n * @remarks As the {@link @empathyco/x-types#RawFilter.selected} is always true,\n * there is no need to set this property.\n */\n select(filter: RawFilter): void {\n this.store.commit('x/facets/mutateFilter', { filter, newFilterState: { selected: true } });\n }\n}\n"],"names":[],"mappings":";;AAIA;;;;;MAKa,eAAe;IAG1B,YAA6B,KAAqB;QAArB,UAAK,GAAL,KAAK,CAAgB;KAAI;;;;;;;;IAStD,QAAQ,CAAC,MAAiB;QACxB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,uBAAuB,EAAE,MAAM,CAAC,CAAC;KACpD;;;;;;;;IASD,MAAM,CAAC,MAAiB;QACtB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,cAAc,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;KAC5F;;AAxBa,uBAAO,GAAG,WAAW;;;;"}

package/js/x-modules/facets/entities/simple-filter.entity.js CHANGED Viewed

@@ -16,7 +16,7 @@ class SimpleFilterEntity {
      * @param filter - The filter to deselect.
      */
     deselect(filter) {
-        this.store.commit('x/facets/setFilter', { ...filter, selected: false });
+        this.store.commit('x/facets/mutateFilter', { filter, newFilterState: { selected: false } });
         addFacetIfNotPresent(this.store, filter.facetId, 'SimpleFacet');
     }
     /**
@@ -25,7 +25,7 @@ class SimpleFilterEntity {
      * @param filter - The filter to select.
      */
     select(filter) {
-        this.store.commit('x/facets/setFilter', { ...filter, selected: true });
+        this.store.commit('x/facets/mutateFilter', { filter, newFilterState: { selected: true } });
         addFacetIfNotPresent(this.store, filter.facetId, 'SimpleFacet');
     }
 }

package/js/x-modules/facets/entities/simple-filter.entity.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"simple-filter.entity.js","sources":["../../../../../src/x-modules/facets/entities/simple-filter.entity.ts"],"sourcesContent":["import { SimpleFilter, isSimpleFilter } 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 SimpleFilter}.\n \n @internal\n /\nexport class SimpleFilterEntity implements FilterEntity {\n public static accepts = isSimpleFilter;\n\n public constructor(protected store: Store<RootXStoreState>) {}\n\n /\n Deselects and saves to the store the given filter.\n \n @param filter - The filter to deselect.\n /\n deselect(filter: SimpleFilter): void {\n this.store.commit('x/facets/~~setFilter~~', { ~~...~~filter, selected: false });\n addFacetIfNotPresent(this.store, filter.facetId, 'SimpleFacet');\n }\n\n /\n Selects and saves to the store the given filter.\n \n @param filter - The filter to select.\n */\n select(filter: SimpleFilter): void {\n this.store.commit('x/facets/~~setFilter~~', { ~~...~~filter, selected: true });\n addFacetIfNotPresent(this.store, filter.facetId, 'SimpleFacet');\n }\n}\n"],"names":[],"mappings":";;;AAMA;;;;;MAKa,kBAAkB;IAG7B,YAA6B,KAA6B;QAA7B,UAAK,GAAL,KAAK,CAAwB;KAAI;;;;;;IAO9D,QAAQ,CAAC,MAAoB;QAC3B,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,~~oBAAoB~~,EAAE,EAAE,~~GAAG,~~MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;~~QACxE~~,oBAAoB,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;KACjE;;;;;;IAOD,MAAM,CAAC,MAAoB;QACzB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,~~oBAAoB~~,EAAE,EAAE,~~GAAG,~~MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;~~QACvE~~,oBAAoB,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;KACjE;;AAtBa,0BAAO,GAAG,cAAc;;;;"}
1	+ {"version":3,"file":"simple-filter.entity.js","sources":["../../../../../src/x-modules/facets/entities/simple-filter.entity.ts"],"sourcesContent":["import { SimpleFilter, isSimpleFilter } 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 SimpleFilter}.\n \n @internal\n /\nexport class SimpleFilterEntity implements FilterEntity {\n public static accepts = isSimpleFilter;\n\n public constructor(protected store: Store<RootXStoreState>) {}\n\n /\n Deselects and saves to the store the given filter.\n \n @param filter - The filter to deselect.\n /\n deselect(filter: SimpleFilter): void {\n this.store.commit('x/facets/mutateFilter', { filter, newFilterState: { selected: false } });\n addFacetIfNotPresent(this.store, filter.facetId, 'SimpleFacet');\n }\n\n /\n Selects and saves to the store the given filter.\n \n @param filter - The filter to select.\n */\n select(filter: SimpleFilter): void {\n this.store.commit('x/facets/mutateFilter', { filter, newFilterState: { selected: true } });\n addFacetIfNotPresent(this.store, filter.facetId, 'SimpleFacet');\n }\n}\n"],"names":[],"mappings":";;;AAMA;;;;;MAKa,kBAAkB;IAG7B,YAA6B,KAA6B;QAA7B,UAAK,GAAL,KAAK,CAAwB;KAAI;;;;;;IAO9D,QAAQ,CAAC,MAAoB;QAC3B,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,cAAc,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;QAC5F,oBAAoB,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;KACjE;;;;;;IAOD,MAAM,CAAC,MAAoB;QACzB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,cAAc,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;QAC3F,oBAAoB,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;KACjE;;AAtBa,0BAAO,GAAG,cAAc;;;;"}

package/js/x-modules/facets/entities/single-select.modifier.js CHANGED Viewed

@@ -68,7 +68,7 @@ class SingleSelectModifier extends BaseFilterEntityModifier {
      */
     getDescendantsIds(filter, ids = [filter.id]) {
         return filter?.children
-            ? filter?.children.flatMap(descendantId => this.getAncestorsIds(this.store.state.x.facets.filters[descendantId], [descendantId, ...ids]))
+            ? filter?.children.flatMap(descendant => this.getDescendantsIds(descendant, [descendant.id, ...ids]))
             : ids;
     }
     /**

package/js/x-modules/facets/entities/single-select.modifier.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"single-select.modifier.js","sources":["../../../../../src/x-modules/facets/entities/single-select.modifier.ts"],"sourcesContent":["import {\n isFacetFilter,\n isHierarchicalFilter,\n FacetFilter,\n Facet,\n Filter,\n HierarchicalFilter\n} from '@empathyco/x-types';\nimport { BaseFilterEntityModifier } from './types';\n\n/*\n Allows only to select only one filter from the same facet at the same time.\n \n @internal\n /\nexport class SingleSelectModifier extends BaseFilterEntityModifier {\n /\n Selects the passed filter, and then deselects any other filter of the same facet.\n \n @param filter - The filter to select.\n /\n select(filter: FacetFilter): void {\n this.getOtherFilters(filter).forEach(this.deselect.bind(this));\n this.entity.select(filter);\n }\n\n /\n Retrieves the rest of selected filters of the same facet than the one given.\n \n @param filter - The filter to find its relatives.\n * @returns A list of selected filters that belong to the same facet than the filter passed.\n * @remarks It takes into account if the passed filter is an\n * {@link @empathyco/x-types#HierarchicalFilter \| HierarchicalFilter} to exclude the ancestors and\n * descendants.\n \n @internal\n /\n protected getOtherFilters(filter: FacetFilter): FacetFilter[] {\n / This check seems dumb, but when you instantiate this modifier using the factory, the types\n `FacetFilter` parameter type is lost, so we should check it to avoid unexpected crashes\n due to a wrong configuration. /\n if (isHierarchicalFilter(filter)) {\n const ancestorsIds = this.getAncestorsIds(filter);\n const descendantsIds = this.getDescendantsIds(filter);\n return this.getFacetFilters(filter.facetId).filter(\n storeFilter =>\n !ancestorsIds.includes(storeFilter.id) && !descendantsIds.includes(storeFilter.id)\n );\n } else if (isFacetFilter(filter)) {\n return this.getFacetFilters(filter.facetId).filter(\n storeFilter => storeFilter.id !== filter.id && storeFilter.selected\n );\n } else {\n // TODO Add a warning in case a non facet filter is passed here.\n return [];\n }\n }\n\n /\n Returns the ancestors Filters Ids of the passed filter.\n \n @param filter - The {@link @empathyco/x-types#Filter \| Filter} which obtain the ancestors from.\n * @param ids - (Optional) an Array with the Ids used to execute the method recursively.\n * @returns An Array with the ancestors ids.\n * @internal\n /\n protected getAncestorsIds(\n filter: HierarchicalFilter,\n ids: Array<Filter['id']> = [filter.id]\n ): Array<Filter['id']> {\n return filter?.parentId\n ? this.getAncestorsIds(\n this.store.state.x.facets.filters[filter.parentId] as HierarchicalFilter,\n [filter.parentId, ...ids]\n )\n : ids;\n }\n\n /\n Returns the descendants Filters Ids of the passed filter.\n \n @param filter - The {@link @empathyco/x-types#Filter \| Filter} which obtain the descendants\n * from.\n * @param ids - (Optional) an Array with the Ids used to execute the method recursively.\n * @returns An Array with the descendants ids.\n * @internal\n /\n protected getDescendantsIds(\n filter: HierarchicalFilter,\n ids: Array<Filter['id']> = [filter.id]\n ): Array<Filter['id']> {\n return filter?.children\n ? filter?.children.flatMap(~~descendantId~~ =>\n this.~~getAncestorsIds~~(~~\n this.store.state.x.facets.filters[descendantId]~~ ~~as HierarchicalFilter,\n~~ [~~descendantId~~, ...ids]\n )\n )\n : ids;\n }\n\n /\n Retrieves All the filters from the given facet.\n \n @param facetId - The facet id to retrieve its filters.\n * @returns The filters from the given facet.\n * @internal\n */\n protected getFacetFilters(facetId: Facet['id']): FacetFilter[] {\n return (\n ((this.store.getters['x/facets/facets'] as Record<Facet['id'], Facet>)[facetId]\n ?.filters as FacetFilter[]) ?? []\n );\n }\n}\n"],"names":[],"mappings":";;;AAUA;;;;;MAKa,oBAAqB,SAAQ,wBAAwB;;;;;;IAMhE,MAAM,CAAC,MAAmB;QACxB,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC/D,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;KAC5B;;;;;;;;;;;;IAaS,eAAe,CAAC,MAAmB;;;;QAI3C,IAAI,oBAAoB,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;YAClD,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;YACtD,OAAO,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,MAAM,CAChD,WAAW,IACT,CAAC,YAAY,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,CACrF,CAAC;SACH;aAAM,IAAI,aAAa,CAAC,MAAM,CAAC,EAAE;YAChC,OAAO,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,MAAM,CAChD,WAAW,IAAI,WAAW,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,IAAI,WAAW,CAAC,QAAQ,CACpE,CAAC;SACH;aAAM;;YAEL,OAAO,EAAE,CAAC;SACX;KACF;;;;;;;;;IAUS,eAAe,CACvB,MAA0B,EAC1B,MAA2B,CAAC,MAAM,CAAC,EAAE,CAAC;QAEtC,OAAO,MAAM,EAAE,QAAQ;cACnB,IAAI,CAAC,eAAe,CAClB,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAuB,EACxE,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,GAAG,CAAC,CAC1B;cACD,GAAG,CAAC;KACT;;;;;;;;;;IAWS,iBAAiB,CACzB,MAA0B,EAC1B,MAA2B,CAAC,MAAM,CAAC,EAAE,CAAC;QAEtC,OAAO,MAAM,EAAE,QAAQ;cACnB,MAAM,EAAE,QAAQ,CAAC,OAAO,CAAC,~~YAAY~~,~~IACnC~~,IAAI,CAAC,~~eAAe~~,~~CAClB,IAAI,~~CAAC,~~KAAK~~,~~CAAC~~,~~KAAK,~~CAAC,~~CAAC~~,CAAC,~~MAAM~~,~~CAAC,OAAO,CAAC,YAAY,CAAuB,EACrE,CAAC,YAAY,~~EAAE,GAAG,GAAG,CAAC,~~CACvB~~,~~CACF~~;cACD,GAAG,CAAC;KACT;;;;;;;;IASS,eAAe,CAAC,OAAoB;QAC5C,QACI,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAgC,CAAC,OAAO,CAAC;cAC3E,OAAyB,IAAI,EAAE,EACnC;KACH;;;;;"}
1	+ {"version":3,"file":"single-select.modifier.js","sources":["../../../../../src/x-modules/facets/entities/single-select.modifier.ts"],"sourcesContent":["import {\n isFacetFilter,\n isHierarchicalFilter,\n FacetFilter,\n Facet,\n Filter,\n HierarchicalFilter\n} from '@empathyco/x-types';\nimport { BaseFilterEntityModifier } from './types';\n\n/*\n Allows only to select only one filter from the same facet at the same time.\n \n @internal\n /\nexport class SingleSelectModifier extends BaseFilterEntityModifier {\n /\n Selects the passed filter, and then deselects any other filter of the same facet.\n \n @param filter - The filter to select.\n /\n select(filter: FacetFilter): void {\n this.getOtherFilters(filter).forEach(this.deselect.bind(this));\n this.entity.select(filter);\n }\n\n /\n Retrieves the rest of selected filters of the same facet than the one given.\n \n @param filter - The filter to find its relatives.\n * @returns A list of selected filters that belong to the same facet than the filter passed.\n * @remarks It takes into account if the passed filter is an\n * {@link @empathyco/x-types#HierarchicalFilter \| HierarchicalFilter} to exclude the ancestors and\n * descendants.\n \n @internal\n /\n protected getOtherFilters(filter: FacetFilter): FacetFilter[] {\n / This check seems dumb, but when you instantiate this modifier using the factory, the types\n `FacetFilter` parameter type is lost, so we should check it to avoid unexpected crashes\n due to a wrong configuration. /\n if (isHierarchicalFilter(filter)) {\n const ancestorsIds = this.getAncestorsIds(filter);\n const descendantsIds = this.getDescendantsIds(filter);\n return this.getFacetFilters(filter.facetId).filter(\n storeFilter =>\n !ancestorsIds.includes(storeFilter.id) && !descendantsIds.includes(storeFilter.id)\n );\n } else if (isFacetFilter(filter)) {\n return this.getFacetFilters(filter.facetId).filter(\n storeFilter => storeFilter.id !== filter.id && storeFilter.selected\n );\n } else {\n // TODO Add a warning in case a non facet filter is passed here.\n return [];\n }\n }\n\n /\n Returns the ancestors Filters Ids of the passed filter.\n \n @param filter - The {@link @empathyco/x-types#Filter \| Filter} which obtain the ancestors from.\n * @param ids - (Optional) an Array with the Ids used to execute the method recursively.\n * @returns An Array with the ancestors ids.\n * @internal\n /\n protected getAncestorsIds(\n filter: HierarchicalFilter,\n ids: Array<Filter['id']> = [filter.id]\n ): Array<Filter['id']> {\n return filter?.parentId\n ? this.getAncestorsIds(\n this.store.state.x.facets.filters[filter.parentId] as HierarchicalFilter,\n [filter.parentId, ...ids]\n )\n : ids;\n }\n\n /\n Returns the descendants Filters Ids of the passed filter.\n \n @param filter - The {@link @empathyco/x-types#Filter \| Filter} which obtain the descendants\n * from.\n * @param ids - (Optional) an Array with the Ids used to execute the method recursively.\n * @returns An Array with the descendants ids.\n * @internal\n /\n protected getDescendantsIds(\n filter: HierarchicalFilter,\n ids: Array<Filter['id']> = [filter.id]\n ): Array<Filter['id']> {\n return filter?.children\n ? filter?.children.flatMap(descendant =>\n this.getDescendantsIds(descendant, [descendant.id, ...ids])\n )\n : ids;\n }\n\n /\n Retrieves All the filters from the given facet.\n \n @param facetId - The facet id to retrieve its filters.\n * @returns The filters from the given facet.\n * @internal\n */\n protected getFacetFilters(facetId: Facet['id']): FacetFilter[] {\n return (\n ((this.store.getters['x/facets/facets'] as Record<Facet['id'], Facet>)[facetId]\n ?.filters as FacetFilter[]) ?? []\n );\n }\n}\n"],"names":[],"mappings":";;;AAUA;;;;;MAKa,oBAAqB,SAAQ,wBAAwB;;;;;;IAMhE,MAAM,CAAC,MAAmB;QACxB,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC/D,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;KAC5B;;;;;;;;;;;;IAaS,eAAe,CAAC,MAAmB;;;;QAI3C,IAAI,oBAAoB,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;YAClD,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;YACtD,OAAO,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,MAAM,CAChD,WAAW,IACT,CAAC,YAAY,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,CACrF,CAAC;SACH;aAAM,IAAI,aAAa,CAAC,MAAM,CAAC,EAAE;YAChC,OAAO,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,MAAM,CAChD,WAAW,IAAI,WAAW,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,IAAI,WAAW,CAAC,QAAQ,CACpE,CAAC;SACH;aAAM;;YAEL,OAAO,EAAE,CAAC;SACX;KACF;;;;;;;;;IAUS,eAAe,CACvB,MAA0B,EAC1B,MAA2B,CAAC,MAAM,CAAC,EAAE,CAAC;QAEtC,OAAO,MAAM,EAAE,QAAQ;cACnB,IAAI,CAAC,eAAe,CAClB,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAuB,EACxE,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,GAAG,CAAC,CAC1B;cACD,GAAG,CAAC;KACT;;;;;;;;;;IAWS,iBAAiB,CACzB,MAA0B,EAC1B,MAA2B,CAAC,MAAM,CAAC,EAAE,CAAC;QAEtC,OAAO,MAAM,EAAE,QAAQ;cACnB,MAAM,EAAE,QAAQ,CAAC,OAAO,CAAC,UAAU,IACjC,IAAI,CAAC,iBAAiB,CAAC,UAAU,EAAE,CAAC,UAAU,CAAC,EAAE,EAAE,GAAG,GAAG,CAAC,CAAC,CAC5D;cACD,GAAG,CAAC;KACT;;;;;;;;IASS,eAAe,CAAC,OAAoB;QAC5C,QACI,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAgC,CAAC,OAAO,CAAC;cAC3E,OAAyB,IAAI,EAAE,EACnC;KACH;;;;;"}