npm - @empathyco/x-components - Versions diffs - 3.0.0-alpha.146 → 3.0.0-alpha.147 - Mend

@empathyco/x-components 3.0.0-alpha.146 → 3.0.0-alpha.147

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 (68) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [3.0.0-alpha.147](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.146...@empathyco/x-components@3.0.0-alpha.147) (2022-08-03)
+### ⚠ BREAKING CHANGES
+- **facets:** Removed the `setFilter`mutation from `facets` X-Module. Use `mutateFilter` instead.
+- **facets:** Modified the `HierarchicalFilter.children` Model type. Now it is an
+  `Array<HierarchicalFilter>` instead of an array of ids.
+### Features
+- **facets:** Move filters flattening from `x-adapter-platform` to `x-components`. (#626)
+  ([2bebaeb](https://github.com/empathyco/x/commit/2bebaeb2863fe794f1b3bea924904651b9302ef6)),
+  closes [EX-6484](https://searchbroker.atlassian.net/browse/EX-6484)
+# Change Log
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 ## [3.0.0-alpha.146](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.145...@empathyco/x-components@3.0.0-alpha.146) (2022-08-03)
 ### Documentation

package/design-system/default-theme.css CHANGED Viewed

@@ -407,6 +407,79 @@
 [dir="rtl"] .x-dropdown--right .x-dropdown__items-list {
   left: 0;
 }
+:root {
+  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
+  --x-size-border-radius-top-right-dropdown-default: var(--x-size-border-radius-dropdown-default);
+  --x-size-border-radius-bottom-right-dropdown-default: var(
+    --x-size-border-radius-dropdown-default
+  );
+  --x-size-border-radius-bottom-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
+  --x-size-border-width-dropdown-toggle-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-dropdown-toggle-default: var(
+    --x-size-border-width-dropdown-toggle-default
+  );
+  --x-size-border-width-right-dropdown-toggle-default: var(
+    --x-size-border-width-dropdown-toggle-default
+  );
+  --x-size-border-width-bottom-dropdown-toggle-default: var(
+    --x-size-border-width-dropdown-toggle-default
+  );
+  --x-size-border-width-left-dropdown-toggle-default: var(
+    --x-size-border-width-dropdown-toggle-default
+  );
+  --x-size-border-width-dropdown-list-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-dropdown-list-default: 0;
+  --x-size-border-width-right-dropdown-list-default: var(
+    --x-size-border-width-dropdown-list-default
+  );
+  --x-size-border-width-bottom-dropdown-list-default: var(
+    --x-size-border-width-dropdown-list-default
+  );
+  --x-size-border-width-left-dropdown-list-default: var(
+    --x-size-border-width-dropdown-list-default
+  );
+  --x-color-border-dropdown-toggle-default: var(--x-color-base-neutral-95);
+  --x-color-border-dropdown-list-default: var(--x-color-border-dropdown-toggle-default);
+  --x-color-background-dropdown-default: var(--x-color-base-neutral-100);
+  --x-color-background-dropdown-toggle-default: var(--x-color-base-neutral-100);
+  --x-color-background-dropdown-toggle-open-default: var(
+    --x-color-background-dropdown-toggle-default
+  );
+  --x-color-background-dropdown-item-default-selected: var(--x-color-base-neutral-95);
+  --x-color-background-dropdown-item-default-hover: var(--x-color-base-neutral-95);
+  --x-color-text-dropdown-default: var(--x-color-text-default);
+  --x-color-text-dropdown-toggle-default: var(--x-color-text-dropdown-default);
+  --x-color-text-dropdown-toggle-default-selected: var(--x-color-base-neutral-35);
+  --x-color-text-dropdown-item-default-hover: var(--x-color-base-neutral-35);
+  --x-color-text-dropdown-item-default-selected: var(--x-color-text-default);
+  --x-font-family-dropdown-default: var(--x-font-family-text);
+  --x-size-font-dropdown-default: var(--x-size-font-text);
+  --x-size-line-height-dropdown-default: var(--x-size-line-height-text);
+  --x-number-font-weight-dropdown-default: var(--x-number-font-weight-base-regular);
+  --x-number-font-weight-dropdown-item-default-hover: var(--x-number-font-weight-base-bold);
+  --x-number-font-weight-dropdown-item-default-selected: var(--x-number-font-weight-base-regular);
+  --x-font-decoration-dropdown-item-default-hover: none;
+  --x-font-decoration-dropdown-item-default-selected: none;
+  --x-size-width-dropdown-toggle-default: 100%;
+  --x-size-min-width-dropdown-list-default: 100%;
+  --x-size-gap-dropdown-default: 0;
+  --x-size-padding-top-dropdown-toggle-default: var(--x-size-padding-top-dropdown-item-default);
+  --x-size-padding-right-dropdown-toggle-default: var(--x-size-padding-right-dropdown-item-default);
+  --x-size-padding-bottom-dropdown-toggle-default: var(
+    --x-size-padding-bottom-dropdown-item-default
+  );
+  --x-size-padding-left-dropdown-toggle-default: var(--x-size-padding-left-dropdown-item-default);
+  --x-size-padding-vertical-dropdown-list-default: 0;
+  --x-size-padding-top-dropdown-item-default: var(--x-size-base-04);
+  --x-size-padding-right-dropdown-item-default: var(--x-size-base-05);
+  --x-size-padding-bottom-dropdown-item-default: var(--x-size-base-04);
+  --x-size-padding-left-dropdown-item-default: var(--x-size-base-05);
+  --x-size-gap-dropdown-item-default: var(--x-size-base-03);
+  --x-string-box-shadow-dropdown-default: none;
+  --x-string-overflow-dropdown-toggle-default: hidden;
+  --x-string-overflow-dropdown-list-default: hidden;
+}
 :root {
   --x-color-background-facet-default: transparent;
   --x-color-border-facet-default: var(--x-color-background-facet-default);
@@ -2833,77 +2906,4 @@
   --x-size-line-height-base-s: 16px;
   --x-size-line-height-base-m: 24px;
   --x-size-line-height-base-l: 32px;
-}
-:root {
-  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
-  --x-size-border-radius-top-right-dropdown-default: var(--x-size-border-radius-dropdown-default);
-  --x-size-border-radius-bottom-right-dropdown-default: var(
-    --x-size-border-radius-dropdown-default
-  );
-  --x-size-border-radius-bottom-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
-  --x-size-border-width-dropdown-toggle-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-dropdown-toggle-default: var(
-    --x-size-border-width-dropdown-toggle-default
-  );
-  --x-size-border-width-right-dropdown-toggle-default: var(
-    --x-size-border-width-dropdown-toggle-default
-  );
-  --x-size-border-width-bottom-dropdown-toggle-default: var(
-    --x-size-border-width-dropdown-toggle-default
-  );
-  --x-size-border-width-left-dropdown-toggle-default: var(
-    --x-size-border-width-dropdown-toggle-default
-  );
-  --x-size-border-width-dropdown-list-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-dropdown-list-default: 0;
-  --x-size-border-width-right-dropdown-list-default: var(
-    --x-size-border-width-dropdown-list-default
-  );
-  --x-size-border-width-bottom-dropdown-list-default: var(
-    --x-size-border-width-dropdown-list-default
-  );
-  --x-size-border-width-left-dropdown-list-default: var(
-    --x-size-border-width-dropdown-list-default
-  );
-  --x-color-border-dropdown-toggle-default: var(--x-color-base-neutral-95);
-  --x-color-border-dropdown-list-default: var(--x-color-border-dropdown-toggle-default);
-  --x-color-background-dropdown-default: var(--x-color-base-neutral-100);
-  --x-color-background-dropdown-toggle-default: var(--x-color-base-neutral-100);
-  --x-color-background-dropdown-toggle-open-default: var(
-    --x-color-background-dropdown-toggle-default
-  );
-  --x-color-background-dropdown-item-default-selected: var(--x-color-base-neutral-95);
-  --x-color-background-dropdown-item-default-hover: var(--x-color-base-neutral-95);
-  --x-color-text-dropdown-default: var(--x-color-text-default);
-  --x-color-text-dropdown-toggle-default: var(--x-color-text-dropdown-default);
-  --x-color-text-dropdown-toggle-default-selected: var(--x-color-base-neutral-35);
-  --x-color-text-dropdown-item-default-hover: var(--x-color-base-neutral-35);
-  --x-color-text-dropdown-item-default-selected: var(--x-color-text-default);
-  --x-font-family-dropdown-default: var(--x-font-family-text);
-  --x-size-font-dropdown-default: var(--x-size-font-text);
-  --x-size-line-height-dropdown-default: var(--x-size-line-height-text);
-  --x-number-font-weight-dropdown-default: var(--x-number-font-weight-base-regular);
-  --x-number-font-weight-dropdown-item-default-hover: var(--x-number-font-weight-base-bold);
-  --x-number-font-weight-dropdown-item-default-selected: var(--x-number-font-weight-base-regular);
-  --x-font-decoration-dropdown-item-default-hover: none;
-  --x-font-decoration-dropdown-item-default-selected: none;
-  --x-size-width-dropdown-toggle-default: 100%;
-  --x-size-min-width-dropdown-list-default: 100%;
-  --x-size-gap-dropdown-default: 0;
-  --x-size-padding-top-dropdown-toggle-default: var(--x-size-padding-top-dropdown-item-default);
-  --x-size-padding-right-dropdown-toggle-default: var(--x-size-padding-right-dropdown-item-default);
-  --x-size-padding-bottom-dropdown-toggle-default: var(
-    --x-size-padding-bottom-dropdown-item-default
-  );
-  --x-size-padding-left-dropdown-toggle-default: var(--x-size-padding-left-dropdown-item-default);
-  --x-size-padding-vertical-dropdown-list-default: 0;
-  --x-size-padding-top-dropdown-item-default: var(--x-size-base-04);
-  --x-size-padding-right-dropdown-item-default: var(--x-size-base-05);
-  --x-size-padding-bottom-dropdown-item-default: var(--x-size-base-04);
-  --x-size-padding-left-dropdown-item-default: var(--x-size-base-05);
-  --x-size-gap-dropdown-item-default: var(--x-size-base-03);
-  --x-string-box-shadow-dropdown-default: none;
-  --x-string-overflow-dropdown-toggle-default: hidden;
-  --x-string-overflow-dropdown-list-default: hidden;
 }

package/design-system/full-theme.css CHANGED Viewed

@@ -1144,6 +1144,10 @@
   --x-size-width-icon-default: var(--x-size-width-icon-xl);
   --x-size-height-icon-default: var(--x-size-height-icon-xl);
 }
+:root {
+  --x-size-width-icon-xl: var(--x-size-base-07);
+  --x-size-height-icon-xl: var(--x-size-base-07);
+}
 .x-input-group--card.x-input-group,
 .x-input-group--card .x-input-group {
   --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-card);
@@ -7589,8 +7593,3 @@
 .x-normal-case {
   text-transform: none;
 }
-:root {
-  --x-size-width-icon-xl: var(--x-size-base-07);
-  --x-size-height-icon-xl: var(--x-size-base-07);
-}

package/docs/API-reference/api/x-adapter-platform.md CHANGED Viewed

@@ -11,7 +11,6 @@
 |  [extractUrlParameters(url)](./x-adapter-platform.extracturlparameters.md) | Returns the base url path and an object with the query parameters. |
 |  [getFacetConfig(facet)](./x-adapter-platform.getfacetconfig.md) | Returns the facet's config. |
 |  [getTaggingInfoFromUrl(taggingUrl)](./x-adapter-platform.gettagginginfofromurl.md) | Extracts the tagging info from a URL. |
-|  [searchResponseFacetsMapper(from, { mappedValue })](./x-adapter-platform.searchresponsefacetsmapper.md) | Mapper to flatten hierarchical facet filters. |
 ## Interfaces

package/docs/API-reference/api/x-adapter-platform.searchresponsemapper.md CHANGED Viewed

@@ -7,15 +7,5 @@
 <b>Signature:</b>
 ```typescript
-searchResponseMapper: import("@empathyco/x-adapter").Mapper<PlatformSearchResponse, {
-    banners: import("@empathyco/x-types").Banner[];
-    facets: import("@empathyco/x-types").Facet[];
-    partialResults: import("@empathyco/x-types").PartialResult[];
-    promoteds: import("@empathyco/x-types").Promoted[];
-    queryTagging: import("@empathyco/x-types").TaggingRequest;
-    redirections: import("@empathyco/x-types").Redirection[];
-    results: import("@empathyco/x-types").Result[];
-    spellcheck: string;
-    totalResults: number;
-}>
+searchResponseMapper: import("@empathyco/x-adapter").Mapper<PlatformSearchResponse, SearchResponse>
 ```

package/docs/API-reference/api/x-components.facetsmutations.md CHANGED Viewed

@@ -16,12 +16,12 @@ export interface FacetsMutations
 |  Method | Description |
 |  --- | --- |
+|  [mutateFilter(payload)](./x-components.facetsmutations.mutatefilter.md) | Updates the state of a filter. |
 |  [removeFacet(facet)](./x-components.facetsmutations.removefacet.md) | Removes the facet from the [facets](./x-components.facetsstate.facets.md) record. |
 |  [removeFilter(filter)](./x-components.facetsmutations.removefilter.md) | Removes the filter from the [filters](./x-components.facetsstate.filters.md) record. |
 |  [removeFilters(filters)](./x-components.facetsmutations.removefilters.md) | Removes a list of filters from the [filters](./x-components.facetsstate.filters.md) record. |
 |  [setFacet(facet)](./x-components.facetsmutations.setfacet.md) | Adds the facet to the [facets](./x-components.facetsstate.facets.md) record. |
 |  [setFacetGroup(facetGroupEntry)](./x-components.facetsmutations.setfacetgroup.md) | Sets the group id of the facet. |
-|  [setFilter(filter)](./x-components.facetsmutations.setfilter.md) | Adds the filter to the [filters](./x-components.facetsstate.filters.md) record. |
 |  [setFilters(filters)](./x-components.facetsmutations.setfilters.md) | Adds a list of filters to the [filters](./x-components.facetsstate.filters.md) record. |
 |  [setPreselectedFilters(filters)](./x-components.facetsmutations.setpreselectedfilters.md) | Adds a list of filters to the [preselectedFilters](./x-components.facetsstate.preselectedfilters.md) record. |

package/docs/API-reference/api/x-components.facetsmutations.mutatefilter.md ADDED Viewed

@@ -0,0 +1,24 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [FacetsMutations](./x-components.facetsmutations.md) &gt; [mutateFilter](./x-components.facetsmutations.mutatefilter.md)
+## FacetsMutations.mutateFilter() method
+Updates the state of a filter.
+<b>Signature:</b>
+```typescript
+mutateFilter(payload: MutateFilterPayload): void;
+```
+## Parameters
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  payload | [MutateFilterPayload](./x-components.mutatefilterpayload.md) | An object containing the filter to update, and the properties to modify. |
+<b>Returns:</b>
+void

package/docs/API-reference/api/x-components.flathierarchicalfilters.md ADDED Viewed

@@ -0,0 +1,26 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [flatHierarchicalFilters](./x-components.flathierarchicalfilters.md)
+## flatHierarchicalFilters() function
+This function flattens the Hierarchical Filters, returning an array with all filters including the children.
+<b>Signature:</b>
+```typescript
+export declare function flatHierarchicalFilters(hierarchicalFilters: HierarchicalFilter[]): HierarchicalFilter[];
+```
+## Parameters
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  hierarchicalFilters | HierarchicalFilter\[\] | The list of Hierarchical Filters to flatten. |
+<b>Returns:</b>
+HierarchicalFilter\[\]
+An array with all the Hierarchical filters.

package/docs/API-reference/api/x-components.md CHANGED Viewed

@@ -166,6 +166,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [filterFalsyPayload(wire)](./x-components.filterfalsypayload.md) | Creates a [Wire](./x-components.wire.md) that is only executed when the payload is truthy. A truthy value is whatever is not a [falsy value](https://developer.mozilla.org/en-US/docs/Glossary/Falsy)<!-- -->. |
 |  [filterTruthyPayload(wire)](./x-components.filtertruthypayload.md) | Creates a [Wire](./x-components.wire.md) that is only executed when the payload is a [falsy value](https://developer.mozilla.org/en-US/docs/Glossary/Falsy)<!-- -->. |
 |  [filterWhitelistedModules(wire, whitelist)](./x-components.filterwhitelistedmodules.md) | Creates a [Wire](./x-components.wire.md) that is only executed if the event is emitted from a [XModule](./x-components.xmodule.md) that is included in the <code>whitelist</code> array passed as parameter. |
+|  [flatHierarchicalFilters(hierarchicalFilters)](./x-components.flathierarchicalfilters.md) | This function flattens the Hierarchical Filters, returning an array with all filters including the children. |
 |  [getRootXComponent(component)](./x-components.getrootxcomponent.md) | Given a component, finds the root XComponent in the ancestors hierarchy. |
 |  [getStateAndGettersFromModule(state, getters, moduleName)](./x-components.getstateandgettersfrommodule.md) | Returns an object with the getters and state of a module of store defined by the moduleName parameter. |
 |  [Getter(module, getter)](./x-components.getter.md) | Generates a computed property which returns the selected getter value.<!-- -->The decorated property needs to be public for type inference to work. |
@@ -253,6 +254,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [InitWrapper](./x-components.initwrapper.md) | Interface for the returned type of the [XInstaller.init()](./x-components.xinstaller.init.md) function. |
 |  [InstallXOptions](./x-components.installxoptions.md) | Interface for the parameter of the constructor of [XInstaller](./x-components.xinstaller.md) function. It is an extended version of [XPluginOptions](./x-components.xpluginoptions.md)<!-- -->. |
 |  [InternalSearchRequest](./x-components.internalsearchrequest.md) | An internal search request containing the page used to calculate the start and rows properties of a [SearchRequest](./x-types.searchrequest.md)<!-- -->. |
+|  [MutateFilterPayload](./x-components.mutatefilterpayload.md) | Payload to use in the <code>mutateFilter</code> mutation. |
 |  [NamespacedWireCommit](./x-components.namespacedwirecommit.md) | Namespaced type for the [wireCommit()](./x-components.wirecommit.md) which creates a wire with its payload associated. Possible ways for creating a wire that commits a mutation. If a payload is passed, then the observable payload can be ignored, so the wire is applicable to any event. If no payload is passed, then the wire is only applicable to events with the same payload type than the mutation. |
 |  [NamespacedWireDispatch](./x-components.namespacedwiredispatch.md) | Namespaced type for the [wireDispatch()](./x-components.wiredispatch.md) which creates a wire with its payload associated. Possible ways for creating a wire that dispatches an action. If a payload is passed, then the observable payload can be ignored, so the wire is applicable to any event. If no payload is passed, then the wire is only applicable to events with the same payload type than the action. |
 |  [NextQueriesActions](./x-components.nextqueriesactions.md) | Next queries module actions. |

package/docs/API-reference/api/x-components.mutatefilterpayload.filter.md ADDED Viewed

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [MutateFilterPayload](./x-components.mutatefilterpayload.md) &gt; [filter](./x-components.mutatefilterpayload.filter.md)
+## MutateFilterPayload.filter property
+The filter to modify. If it does not belong to the store it will be added.
+<b>Signature:</b>
+```typescript
+filter: Filter;
+```

package/docs/API-reference/api/x-components.mutatefilterpayload.md ADDED Viewed

@@ -0,0 +1,21 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [MutateFilterPayload](./x-components.mutatefilterpayload.md)
+## MutateFilterPayload interface
+Payload to use in the `mutateFilter` mutation.
+<b>Signature:</b>
+```typescript
+export interface MutateFilterPayload
+```
+## Properties
+|  Property | Type | Description |
+|  --- | --- | --- |
+|  [filter](./x-components.mutatefilterpayload.filter.md) | Filter | The filter to modify. If it does not belong to the store it will be added. |
+|  [newFilterState](./x-components.mutatefilterpayload.newfilterstate.md) | Partial&lt;Filter&gt; | The new fields values to modify in the filter. |

package/docs/API-reference/api/x-components.mutatefilterpayload.newfilterstate.md ADDED Viewed

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [MutateFilterPayload](./x-components.mutatefilterpayload.md) &gt; [newFilterState](./x-components.mutatefilterpayload.newfilterstate.md)
+## MutateFilterPayload.newFilterState property
+The new fields values to modify in the filter.
+<b>Signature:</b>
+```typescript
+newFilterState: Partial<Filter>;
+```

package/docs/API-reference/api/x-types.hierarchicalfilter.children.md CHANGED Viewed

@@ -4,10 +4,10 @@
 ## HierarchicalFilter.children property
-Descendants filters id.
+Descendants filters.
 <b>Signature:</b>
 ```typescript
-children?: Filter['id'][];
+children?: HierarchicalFilter[];
 ```

package/docs/API-reference/api/x-types.hierarchicalfilter.md CHANGED Viewed

@@ -17,7 +17,7 @@ export interface HierarchicalFilter extends BooleanFilter
 |  Property | Type | Description |
 |  --- | --- | --- |
-|  [children?](./x-types.hierarchicalfilter.children.md) | [Filter](./x-types.filter.md)<!-- -->\['id'\]\[\] | <i>(Optional)</i> Descendants filters id. |
+|  [children?](./x-types.hierarchicalfilter.children.md) | [HierarchicalFilter](./x-types.hierarchicalfilter.md)<!-- -->\[\] | <i>(Optional)</i> Descendants filters. |
 |  [modelName](./x-types.hierarchicalfilter.modelname.md) | 'HierarchicalFilter' | Model name to indicate the filter type. |
-|  [parentId](./x-types.hierarchicalfilter.parentid.md) | [Filter](./x-types.filter.md)<!-- -->\['id'\] \| null | An unique id used to reference the parent filter or null if it hasn't. |
+|  [parentId](./x-types.hierarchicalfilter.parentid.md) | [Filter](./x-types.filter.md)<!-- -->\['id'\] \| null | A unique id used to reference the parent filter or null if it hasn't. |

package/docs/API-reference/api/x-types.hierarchicalfilter.parentid.md CHANGED Viewed

@@ -4,7 +4,7 @@
 ## HierarchicalFilter.parentId property
-An unique id used to reference the parent filter or null if it hasn't.
+A unique id used to reference the parent filter or null if it hasn't.
 <b>Signature:</b>

package/facets/index.js CHANGED Viewed

@@ -32,5 +32,5 @@ export { default as SelectedFiltersList } from '../js/x-modules/facets/component
 export { default as SlicedFilters } from '../js/x-modules/facets/components/lists/sliced-filters.vue.js';
 export { default as SortedFilters } from '../js/x-modules/facets/components/lists/sorted-filters.vue.js';
 export { default as ClearFilters } from '../js/x-modules/facets/components/clear-filters.vue.js';
-export { isNewQuery } from '../js/x-modules/facets/utils.js';
+export { flatHierarchicalFilters, isNewQuery } from '../js/x-modules/facets/utils.js';
 export { default as FacetsMixin } from '../js/x-modules/facets/components/facets.mixin.js';

package/js/index.js CHANGED Viewed

@@ -207,7 +207,7 @@ export { default as SelectedFiltersList } from './x-modules/facets/components/li
 export { default as SlicedFilters } from './x-modules/facets/components/lists/sliced-filters.vue.js';
 export { default as SortedFilters } from './x-modules/facets/components/lists/sorted-filters.vue.js';
 export { default as ClearFilters } from './x-modules/facets/components/clear-filters.vue.js';
-export { isNewQuery } from './x-modules/facets/utils.js';
+export { flatHierarchicalFilters, isNewQuery } from './x-modules/facets/utils.js';
 export { default as FacetsMixin } from './x-modules/facets/components/facets.mixin.js';
 export { default as ClearHistoryQueries } from './x-modules/history-queries/components/clear-history-queries.vue.js';
 export { default as HistoryQueries } from './x-modules/history-queries/components/history-queries.vue.js';

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

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

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

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

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}