@empathyco/x-components 3.0.0-alpha.59 → 3.0.0-alpha.61

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 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.61](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.60...@empathyco/x-components@3.0.0-alpha.61) (2022-02-24)
+
+### Testing
+
+- **e2e:** add `extra-params` scenarios
+  ([4275c28](https://github.com/empathyco/x/commit/4275c2811ea7b0eaaf588fa4d96a7ae3cf4c43c7)),
+  closes [EX-5377](https://searchbroker.atlassian.net/browse/EX-5377)
+
+# 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.60](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.59...@empathyco/x-components@3.0.0-alpha.60) (2022-02-24)
+
+### Features
+
+- **facets:** add facets mixin to share logic between components
+  ([c8a9046](https://github.com/empathyco/x/commit/c8a904612213cd12040dd6fa1348f6c9a7726eda)),
+  closes [EX-2899](https://searchbroker.atlassian.net/browse/EX-2899)
+
+### Testing
+
+- **e2e:** fix `tagging` using the `mockedAdapter` and replacing `fetch` for `sendBeacon`
+  ([cf06d2f](https://github.com/empathyco/x/commit/cf06d2f7e9aff3987bc14fa46cd65eace402e612)),
+  closes [EX-5374](https://searchbroker.atlassian.net/browse/EX-5374)
+
+# 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.59](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.58...@empathyco/x-components@3.0.0-alpha.59) (2022-02-17)
 
 ### Features

package/core/index.js

@@ -136,7 +136,7 @@ export { getURLParameter } from '../js/utils/get-url-parameters.js';
 export { isElementEqualOrContained } from '../js/utils/html.js';
 export { normalizeString } from '../js/utils/normalize.js';
 export { isInRange } from '../js/utils/number.js';
-export { cleanUndefined, forEach, getNewAndUpdatedKeys, map, objectFilter, reduce } from '../js/utils/object.js';
+export { cleanUndefined, every, forEach, getNewAndUpdatedKeys, map, objectFilter, reduce } from '../js/utils/object.js';
 export { createOrigin } from '../js/utils/origin.js';
 export { sanitize } from '../js/utils/sanitize.js';
 export { localStorageService } from '../js/utils/storage.js';

package/core/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/docs/API-reference/api/x-components.clearfilters.md

@@ -9,14 +9,11 @@ Renders a simple button, emitting the needed events when clicked.
 <b>Signature:</b>
 
 ```typescript
-export default class ClearFilters extends Vue 
+export default class ClearFilters extends FacetsMixin 
 ```
-<b>Extends:</b> Vue
+<b>Extends:</b> FacetsMixin
 
-## Properties
+## Remarks
 
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [alwaysVisible](./x-components.clearfilters.alwaysvisible.md) |  | boolean | It handles if the ClearFilters button is always visible no matter if there are not filters selected. If false, the ClearFilters button is not visible whether there are no filters selected. |
-|  [facetsIds?](./x-components.clearfilters.facetsids.md) |  | Array&lt;Facet\['id'\]&gt; | <i>(Optional)</i> Array of facets ids that will be passed to event like payload. |
+It extends [FacetsMixin](./x-components.facetsmixin.md)<!-- -->.
 

package/docs/API-reference/api/x-components.every.md

@@ -0,0 +1,27 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [every](./x-components.every.md)
+
+## every() function
+
+Ensures that the given condition is met in all the non-undefined entries of the object.
+
+<b>Signature:</b>
+
+```typescript
+export declare function every<ObjectType extends Dictionary>(object: ObjectType, condition: (key: keyof ObjectType, value: Exclude<ObjectType[keyof ObjectType], undefined>, index: number) => boolean): boolean;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  object | ObjectType | The object to check if every item meets the given condition. |
+|  condition | (key: keyof ObjectType, value: Exclude&lt;ObjectType\[keyof ObjectType\], undefined&gt;, index: number) =&gt; boolean | The condition to check in each one of the entries of the object. |
+
+<b>Returns:</b>
+
+boolean
+
+True when all the entries pass the condition. False otherwise.
+

package/docs/API-reference/api/x-components.facetsmixin.alwaysvisible.md

@@ -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; [FacetsMixin](./x-components.facetsmixin.md) &gt; [alwaysVisible](./x-components.facetsmixin.alwaysvisible.md)
+
+## FacetsMixin.alwaysVisible property
+
+Flag to render the component even if there are no filters selected.
+
+<b>Signature:</b>
+
+```typescript
+alwaysVisible: boolean;
+```

package/docs/API-reference/api/x-components.facetsmixin.facetsids.md

@@ -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; [FacetsMixin](./x-components.facetsmixin.md) &gt; [facetsIds](./x-components.facetsmixin.facetsids.md)
+
+## FacetsMixin.facetsIds property
+
+Array of facets ids used to get the selected filters for those facets.
+
+<b>Signature:</b>
+
+```typescript
+facetsIds?: Array<Facet['id']>;
+```

package/docs/API-reference/api/x-components.facetsmixin.md

@@ -0,0 +1,22 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [FacetsMixin](./x-components.facetsmixin.md)
+
+## FacetsMixin class
+
+Mixin to share Facets logic.
+
+<b>Signature:</b>
+
+```typescript
+export default class FacetsMixin extends Vue 
+```
+<b>Extends:</b> Vue
+
+## Properties
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [alwaysVisible](./x-components.facetsmixin.alwaysvisible.md) |  | boolean | Flag to render the component even if there are no filters selected. |
+|  [facetsIds?](./x-components.facetsmixin.facetsids.md) |  | Array&lt;Facet\['id'\]&gt; | <i>(Optional)</i> Array of facets ids used to get the selected filters for those facets. |
+

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

@@ -66,6 +66,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [ExcludeFiltersWithNoResults](./x-components.excludefilterswithnoresults.md) | The <code>ExcludeFiltersWithNoResults</code> component filters the provided list of filters, excluding those which have the <code>totalResults</code> property exactly equal to <code>0</code>. It won't remove filters with no <code>totalResults</code> property.<!-- -->The new list of filters is bound to the default scoped slot. As this component does not render no root element, this default slot must contain a single root node. |
 |  [ExtraParams](./x-components.extraparams.md) | It emits a [ExtraParamsXEvents.ExtraParamsProvided](./x-components.extraparamsxevents.extraparamsprovided.md) with the values received as a prop. |
 |  [Facets](./x-components.facets.md) | This component renders the list of facets stored in the Facets module. Facets can be rendered differently based on their purpose and this can be achieved using the exposed slots: - A default and required slot. - A custom slot for each facet with the facetId as its name. This allows each facet to be rendered differently based on its needs. |
+|  [FacetsMixin](./x-components.facetsmixin.md) | Mixin to share Facets logic. |
 |  [FacetsProvider](./x-components.facetsprovider.md) | This component allows to provide facets by prop, to add them to the state of the <code>Facets X-Module</code>. These facets will be added to the <code>Facets X-Module</code> state together with the facets emitted by the <code>Search X-Module</code> through the [SearchXEvents.FacetsChanged](./x-components.searchxevents.facetschanged.md) event. |
 |  [FadeAndSlide](./x-components.fadeandslide.md) | Renders a transition group wrapping the elements passed in the default slot and animating them with a fade and slide animation. |
 |  [FiltersInjectionMixin](./x-components.filtersinjectionmixin.md) | Mixin to share filters injection logic. |
@@ -112,7 +113,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [SearchButton](./x-components.searchbutton.md) | This component renders a button to submit the query. |
 |  [SearchInput](./x-components.searchinput.md) | This component renders an input field that allows the user to type a query. It also reacts to query changes through event listening. |
 |  [SelectedFilters](./x-components.selectedfilters.md) | Provides a scoped slot with the selected filters from every facet, or from the facet which facet id is passed as property.<!-- -->The default slot renders the length of the selected filters array. The property "alwaysVisible" handles if the component is rendered if no filters are selected. |
-|  [SelectedFiltersList](./x-components.selectedfilterslist.md) | This component renders a list of selected filters from every facet, or from the facet which facet id is passed as property. It uses the SelectedFilters component (state).<!-- -->It provides two slots: a scoped one which name is the filter facet id; and a default one. Both exposes the filter and renders the filter label by default.<!-- -->The property "alwaysVisible" handles if the component is rendered if no filters are selected. |
+|  [SelectedFiltersList](./x-components.selectedfilterslist.md) | This component renders a list of selected filters from every facet, or from the facet ids passed as property. It uses the SelectedFilters component (state).<!-- -->It provides two slots: a scoped one which name is the filter facet id; and a default one. Both exposes the filter and renders the filter label by default.<!-- -->The property "alwaysVisible" handles if the component is rendered if no filters are selected. |
 |  [SimpleFilter](./x-components.simplefilter.md) | Renders a simple filter, emitting the needed events when clicked. |
 |  [SingleColumnLayout](./x-components.singlecolumnlayout.md) | Component for use as Layout to be filled with the rest of the Components. |
 |  [SlicedFilters](./x-components.slicedfilters.md) | Component that slices a list of filters and returns them using the default scoped slot, allowing the user to show the full list of them or slicing them again using the show more/less buttons. |
@@ -155,6 +156,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [Debounce(debounceTimeInMs, debounceOptions)](./x-components.debounce.md) | Adds debounce to the method that the decorator is applied to. |
 |  [deepFilter(array, filter, childrenKey)](./x-components.deepfilter.md) | Filters an array with all elements that pass the test implemented by the provided filter function. It also does it recursively if the property accessed, whose name is the parameter childrenKey, to the current iteration in an array. |
 |  [deepFlat(array, childrenKey)](./x-components.deepflat.md) | Flat an ArrayType\[\] recursively using the childrenKey passed as parameter to access to his nested child which is also ArrayType\[\]. |
+|  [every(object, condition)](./x-components.every.md) | Ensures that the given condition is met in all the non-undefined entries of the object. |
 |  [filter(wire, filterFn)](./x-components.filter.md) | Creates a [Wire](./x-components.wire.md) that is only executed whenever the condition in the filterFn is true. |
 |  [filterBlacklistedModules(wire, blacklist)](./x-components.filterblacklistedmodules.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 NOT included in the <code>blacklist</code> array passed as parameter. |
 |  [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)<!-- -->. |

package/docs/API-reference/api/x-components.selectedfilterslist.md

@@ -4,7 +4,7 @@
 
 ## SelectedFiltersList class
 
-This component renders a list of selected filters from every facet, or from the facet which facet id is passed as property. It uses the SelectedFilters component (state).
+This component renders a list of selected filters from every facet, or from the facet ids passed as property. It uses the SelectedFilters component (state).
 
 It provides two slots: a scoped one which name is the filter facet id; and a default one. Both exposes the filter and renders the filter label by default.
 
@@ -13,15 +13,17 @@ The property "alwaysVisible" handles if the component is rendered if no filters
 <b>Signature:</b>
 
 ```typescript
-export default class SelectedFiltersList extends Vue 
+export default class SelectedFiltersList extends FacetsMixin 
 ```
-<b>Extends:</b> Vue
+<b>Extends:</b> FacetsMixin
+
+## Remarks
+
+It extends [FacetsMixin](./x-components.facetsmixin.md)<!-- -->.
 
 ## Properties
 
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
-|  [alwaysVisible](./x-components.selectedfilterslist.alwaysvisible.md) |  | boolean | It is directly passed to the selected filters component. It handles if the SelectedFilters component is always rendered no matter if no filters are selected.<!-- -->If true, the SelectedFilters component is always rendered. If false, the SelectedFilters component is not rendered whether no filters are selected. |
 |  [animation](./x-components.selectedfilterslist.animation.md) |  | Vue \| string | Animation component that will be used to animate the selected filters list. |
-|  [facetId](./x-components.selectedfilterslist.facetid.md) |  | Facet\['id'\] \| undefined | It is directly passed to the selected filters component. If a facet id is passed as prop, the component filters the selected filters for that facet. |
 

package/docs/API-reference/components/facets/x-components.clear-filters.md

@@ -10,10 +10,10 @@ Renders a simple button, emitting the needed events when clicked.
 
 ## Props
 
-| Name                       | Description                                                                                                                                                                                            | Type                 | Default            |
-| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------- | ------------------ |
-| <code>alwaysVisible</code> | It handles if the ClearFilters button is always visible no matter if there are not<br />filters selected. If false, the ClearFilters button is not visible whether<br />there are no filters selected. | <code>boolean</code> | <code>false</code> |
-| <code>facetsIds</code>     | Array of facets ids that will be passed to event like payload.                                                                                                                                         | <code>Array</code>   | <code></code>      |
+| Name                       | Description                                                            | Type                 | Default            |
+| -------------------------- | ---------------------------------------------------------------------- | -------------------- | ------------------ |
+| <code>facetsIds</code>     | Array of facets ids used to get the selected filters for those facets. | <code>Array</code>   | <code></code>      |
+| <code>alwaysVisible</code> | Flag to render the component even if there are no filters selected.    | <code>boolean</code> | <code>false</code> |
 
 ## Slots
 

package/docs/API-reference/components/facets/x-components.facets/facets.md

@@ -15,10 +15,12 @@ differently based on their purpose and this can be achieved using the exposed sl
 
 ## Props
 
-| Name                          | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Type               | Default           |
-| ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ----------------- |
-| <code>animation</code>        | Animation component that will be used to animate the facets.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | <code>union</code> | <code>'ul'</code> |
-| <code>renderableFacets</code> | Discriminates the facets rendered by this component. It expects a string containing facets<br />ids, comma separated. This property will include or exclude facets based on its value.<br />The default value is an empty string and the component will render all existing facets.<br /><br />To behave as a `include`, simply set the facets ids, comma separated:<br />`existingFacets=[{ brand: ... }, category: { ... }, color: { ... }, price: { ... }]`<br />`renderableFacets="brand, category"`<br /><br />The component will render brand and category facets.<br /><br />On the other hand, to simulate an `exclude` behaviour and exclude a facet from being<br />rendered, append a '!' before its id:<br />`existingFacets=[{ brand: ... }, category: { ... }, color: { ... }, price: { ... }]`<br />`renderableFacets="!brand,!price"`<br /><br />The component will render category and color facets. | <code>union</code> | <code></code>     |
+| Name                          | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Type                 | Default            |
+| ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ------------------ |
+| <code>facetsIds</code>        | Array of facets ids used to get the selected filters for those facets.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | <code>Array</code>   | <code></code>      |
+| <code>alwaysVisible</code>    | Flag to render the component even if there are no filters selected.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | <code>boolean</code> | <code>false</code> |
+| <code>animation</code>        | Animation component that will be used to animate the facets.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | <code>union</code>   | <code>'ul'</code>  |
+| <code>renderableFacets</code> | Discriminates the facets rendered by this component. It expects a string containing facets<br />ids, comma separated. This property will include or exclude facets based on its value.<br />The default value is an empty string and the component will render all existing facets.<br /><br />To behave as a `include`, simply set the facets ids, comma separated:<br />`existingFacets=[{ brand: ... }, category: { ... }, color: { ... }, price: { ... }]`<br />`renderableFacets="brand, category"`<br /><br />The component will render brand and category facets.<br /><br />On the other hand, to simulate an `exclude` behaviour and exclude a facet from being<br />rendered, append a '!' before its id:<br />`existingFacets=[{ brand: ... }, category: { ... }, color: { ... }, price: { ... }]`<br />`renderableFacets="!brand,!price"`<br /><br />The component will render category and color facets. | <code>union</code>   | <code></code>      |
 
 ## Slots
 

package/docs/API-reference/components/facets/x-components.lists/selected-filters-list.md

@@ -7,7 +7,7 @@ title: SelectedFiltersList
 # SelectedFiltersList
 
 This component renders a list of selected filters from every facet, or from the facet
-which facet id is passed as property. It uses the SelectedFilters component (state).
+ids passed as property. It uses the SelectedFilters component (state).
 
 It provides two slots: a scoped one which name is the filter facet id; and a default one.
 Both exposes the filter and renders the filter label by default.
@@ -16,11 +16,11 @@ The property "alwaysVisible" handles if the component is rendered if no filters
 
 ## Props
 
-| Name                       | Description                                                                                                                                                                                                                                                                                                                            | Type                 | Default            |
-| -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ------------------ |
-| <code>facetId</code>       | It is directly passed to the selected filters component. If a facet id is passed as prop,<br />the component filters the selected filters for that facet.                                                                                                                                                                              | <code>union</code>   | <code></code>      |
-| <code>alwaysVisible</code> | It is directly passed to the selected filters component. It handles if the SelectedFilters<br />component is always rendered no matter if no filters are selected.<br /><br />If true, the SelectedFilters component is always rendered.<br />If false, the SelectedFilters component is not rendered whether no filters are selected. | <code>boolean</code> | <code>false</code> |
-| <code>animation</code>     | Animation component that will be used to animate the selected filters list.                                                                                                                                                                                                                                                            | <code>union</code>   | <code>'ul'</code>  |
+| Name                       | Description                                                                 | Type                 | Default            |
+| -------------------------- | --------------------------------------------------------------------------- | -------------------- | ------------------ |
+| <code>facetsIds</code>     | Array of facets ids used to get the selected filters for those facets.      | <code>Array</code>   | <code></code>      |
+| <code>alwaysVisible</code> | Flag to render the component even if there are no filters selected.         | <code>boolean</code> | <code>false</code> |
+| <code>animation</code>     | Animation component that will be used to animate the selected filters list. | <code>union</code>   | <code>'ul'</code>  |
 
 ## Slots
 
@@ -30,8 +30,8 @@ The property "alwaysVisible" handles if the component is rendered if no filters
 
 ## Example
 
-This component renders a list of selected filters from every facet, or from the facet which facet id
-is passed as property. It uses the SelectedFilters component (state).
+This component renders a list of selected filters from every facet, or from the facets which facets
+ids are passed as property. It uses the SelectedFilters component (state).
 
 It provides two slots: a scoped one which name is the filter facet id; and a default one. Both
 exposes the filter and renders the filter label by default.
@@ -114,10 +114,11 @@ Output:
 </div>
 ```
 
-#### Providing a facet id
+#### Providing an array of facet ids
 
-In this example, the selected filters computed are the ones that match the facet passed as property.
+In this example, the selected filters computed are the ones that match the facet ids passed as
+properties.
 
 ```vue
-<SelectedFilters facetId="brand_facet" />
+<SelectedFilters :facetsIds="['brand_facet', 'gender_facet']" />
 ```

package/docs/API-reference/components/facets/x-components.lists/selected-filters.md

@@ -14,10 +14,10 @@ The property "alwaysVisible" handles if the component is rendered if no filters
 
 ## Props
 
-| Name                       | Description                                                                                                                                                                                                                                                             | Type                 | Default            |
-| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ------------------ |
-| <code>facetId</code>       | If a facet id is passed as prop, the component filters the selected filters for that facet.                                                                                                                                                                             | <code>union</code>   | <code></code>      |
-| <code>alwaysVisible</code> | It handles if the SelectedFilters component is always rendered no matter if no filters are<br />selected.<br />If true, the SelectedFilters component is always rendered.<br />If false, the SelectedFilters component is not rendered whether no filters are selected. | <code>boolean</code> | <code>false</code> |
+| Name                       | Description                                                            | Type                 | Default            |
+| -------------------------- | ---------------------------------------------------------------------- | -------------------- | ------------------ |
+| <code>facetsIds</code>     | Array of facets ids used to get the selected filters for those facets. | <code>Array</code>   | <code></code>      |
+| <code>alwaysVisible</code> | Flag to render the component even if there are no filters selected.    | <code>boolean</code> | <code>false</code> |
 
 ## Slots
 
@@ -71,14 +71,14 @@ Output:
 <div class="x-selected-filters">Selected filters: 1</div>
 ```
 
-In this example, the selected filters computed are the ones that match the facet passed as property.
+In this example, the selected filters are filtered by the facetsIds property.
 
 ```vue
-<SelectedFilters facetId="brand_facet" />
+<SelectedFilters :facetsIds="['brand_facet']" />
 ```
 
 ```vue
-<SelectedFilters facetId="brand_facet">
+<SelectedFilters :facetsIds="['brand_facet', 'gender_facet']">
   <template #default="{ selectedFilters }">
     Selected filters: {{ selectedFilters.length }}
   </template>

package/facets/index.js

@@ -31,4 +31,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 { 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

@@ -136,7 +136,7 @@ export { getURLParameter } from './utils/get-url-parameters.js';
 export { isElementEqualOrContained } from './utils/html.js';
 export { normalizeString } from './utils/normalize.js';
 export { isInRange } from './utils/number.js';
-export { cleanUndefined, forEach, getNewAndUpdatedKeys, map, objectFilter, reduce } from './utils/object.js';
+export { cleanUndefined, every, forEach, getNewAndUpdatedKeys, map, objectFilter, reduce } from './utils/object.js';
 export { createOrigin } from './utils/origin.js';
 export { sanitize } from './utils/sanitize.js';
 export { localStorageService } from './utils/storage.js';
@@ -200,6 +200,7 @@ export { default as SlicedFilters } from './x-modules/facets/components/lists/sl
 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 { 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';
 export { default as HistoryQuery } from './x-modules/history-queries/components/history-query.vue.js';

package/js/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/utils/object.js

@@ -95,7 +95,21 @@ function getNewAndUpdatedKeys(newValue, oldValue) {
         return [];
     }
     return Object.keys(newValue).filter(key => !(key in oldValue) || newValue[key] !== oldValue[key]);
+}
+/**
+ * Ensures that the given condition is met in all the non-undefined entries of the object.
+ *
+ * @param object - The object to check if every item meets the given condition.
+ * @param condition - The condition to check in each one of the entries of the object.
+ *
+ * @returns True when all the entries pass the condition. False otherwise.
+ * @public
+ */
+function every(object, condition) {
+    return Object.entries(object)
+        .filter(([, value]) => value !== undefined)
+        .every(([key, value], index) => condition(key, value, index));
 }
 
-export { cleanUndefined, forEach, getNewAndUpdatedKeys, map, objectFilter, reduce };
+export { cleanUndefined, every, forEach, getNewAndUpdatedKeys, map, objectFilter, reduce };
 //# sourceMappingURL=object.js.map

package/js/utils/object.js.map

@@ -1 +1 @@
-{"version":3,"file":"object.js","sources":["../../../src/utils/object.ts"],"sourcesContent":["import { Dictionary } from './types';\n\n/**\n * Iterates over every non-undefined property of the object calling the callback passed as\n * parameter.\n *\n * @param obj - The object to iterate through each property.\n * @param callbackFn - The callback function to call for each property.\n * @public\n */\nexport function forEach<T extends Dictionary>(\n  obj: T | undefined | null,\n  callbackFn: (key: keyof T, value: Exclude<T[keyof T], undefined>, index: number) => void\n): void {\n  if (obj == null) {\n    return;\n  }\n\n  let index = 0;\n  for (const key in obj) {\n    if (Object.prototype.hasOwnProperty.call(obj, key) && obj[key] !== undefined) {\n      callbackFn(key, obj[key], index++);\n    }\n  }\n}\n\n/**\n * Iterates through the obj properties calling the reducer function.\n *\n * @param obj - The object to iterate through each property.\n * @param reducer - A function that will be called for each property, modifying the initialValue\n * object.\n * @param initialValue - The initial value of the accumulator property of the reducer function.\n * @returns Result of the reducer function.\n * @public\n */\nexport function reduce<T extends Dictionary, V>(\n  obj: T | undefined | null,\n  reducer: (\n    accumulator: V,\n    key: keyof T,\n    value: Exclude<T[keyof T], undefined>,\n    index: number\n  ) => V,\n  initialValue: V\n): V {\n  let accumulator = initialValue;\n  forEach(obj, (key, value, index) => {\n    accumulator = reducer(accumulator, key, value, index);\n  });\n  return accumulator;\n}\n\n/**\n * Creates an object from another object transforming each property value.\n *\n * @param obj - The object to transform each property value.\n * @param mapper - The mapper function which will transform each value.\n * @returns A record with the result of the mapper.\n * @public\n */\nexport function map<T extends Dictionary, W>(\n  obj: T | undefined | null,\n  mapper: (key: keyof T, value: Exclude<T[keyof T], undefined>, index: number) => W\n): Record<keyof T, W> {\n  return reduce(\n    obj,\n    (accumulator, key, value, index) => {\n      accumulator[key] = mapper(key, value, index);\n      return accumulator;\n    },\n    {} as Record<keyof T, W>\n  );\n}\n\n/**\n * Creates an object picking only the not undefined properties.\n *\n * @param obj - The object from whom pick the values.\n * @returns A new object with the not undefined properties of the source object.\n * @public\n */\nexport function cleanUndefined<T>(obj: T): T {\n  return typeof obj !== 'object' || obj === null || Array.isArray(obj)\n    ? obj\n    : reduce(\n        obj,\n        (pickedObject, key, value) => {\n          pickedObject[key] = cleanUndefined(value);\n          return pickedObject;\n        },\n        {} as T\n      );\n}\n\n/**\n * Creates an object picking only the ones that pass the test implemented by the\n * provided function isIncluded.\n *\n * @param obj - T object to be filtered.\n * @param isIncluded - Test function that every obj item must pass.\n * @returns A filtered object.\n * @public\n */\nexport function objectFilter<T extends Dictionary>(\n  obj: T | undefined | null,\n  isIncluded: (key: keyof T, value: Exclude<T[keyof T], undefined>, index: number) => boolean\n): T {\n  return reduce(\n    obj,\n    (accumulator, key, value, index) => {\n      if (isIncluded(key, value, index)) {\n        accumulator[key] = value;\n      }\n      return accumulator;\n    },\n    {} as T\n  );\n}\n\n/**\n * Compares two objects of the same type, checking the values of their keys and retrieving\n * those that were not present in the old value and/or those whose value has changed.\n *\n * @param newValue - The new object value.\n * @param oldValue - The old object value.\n *\n * @returns An array of keys.\n * @public\n */\nexport function getNewAndUpdatedKeys<ObjectType extends Dictionary>(\n  newValue: ObjectType | undefined,\n  oldValue: ObjectType | undefined\n): (keyof ObjectType)[] {\n  if (newValue === oldValue || !newValue || !oldValue) {\n    return [];\n  }\n\n  return Object.keys(newValue).filter(key => !(key in oldValue) || newValue[key] !== oldValue[key]);\n}\n"],"names":[],"mappings":"AAEA;;;;;;;;SAQgB,OAAO,CACrB,GAAyB,EACzB,UAAwF;IAExF,IAAI,GAAG,IAAI,IAAI,EAAE;QACf,OAAO;KACR;IAED,IAAI,KAAK,GAAG,CAAC,CAAC;IACd,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE;QACrB,IAAI,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,GAAG,CAAC,GAAG,CAAC,KAAK,SAAS,EAAE;YAC5E,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;SACpC;KACF;AACH,CAAC;AAED;;;;;;;;;;SAUgB,MAAM,CACpB,GAAyB,EACzB,OAKM,EACN,YAAe;IAEf,IAAI,WAAW,GAAG,YAAY,CAAC;IAC/B,OAAO,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK;QAC7B,WAAW,GAAG,OAAO,CAAC,WAAW,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;KACvD,CAAC,CAAC;IACH,OAAO,WAAW,CAAC;AACrB,CAAC;AAED;;;;;;;;SAQgB,GAAG,CACjB,GAAyB,EACzB,MAAiF;IAEjF,OAAO,MAAM,CACX,GAAG,EACH,CAAC,WAAW,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK;QAC7B,WAAW,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QAC7C,OAAO,WAAW,CAAC;KACpB,EACD,EAAwB,CACzB,CAAC;AACJ,CAAC;AAED;;;;;;;SAOgB,cAAc,CAAI,GAAM;IACtC,OAAO,OAAO,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,IAAI,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;UAChE,GAAG;UACH,MAAM,CACJ,GAAG,EACH,CAAC,YAAY,EAAE,GAAG,EAAE,KAAK;YACvB,YAAY,CAAC,GAAG,CAAC,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;YAC1C,OAAO,YAAY,CAAC;SACrB,EACD,EAAO,CACR,CAAC;AACR,CAAC;AAED;;;;;;;;;SASgB,YAAY,CAC1B,GAAyB,EACzB,UAA2F;IAE3F,OAAO,MAAM,CACX,GAAG,EACH,CAAC,WAAW,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK;QAC7B,IAAI,UAAU,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,EAAE;YACjC,WAAW,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;SAC1B;QACD,OAAO,WAAW,CAAC;KACpB,EACD,EAAO,CACR,CAAC;AACJ,CAAC;AAED;;;;;;;;;;SAUgB,oBAAoB,CAClC,QAAgC,EAChC,QAAgC;IAEhC,IAAI,QAAQ,KAAK,QAAQ,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,EAAE;QACnD,OAAO,EAAE,CAAC;KACX;IAED,OAAO,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,GAAG,IAAI,EAAE,GAAG,IAAI,QAAQ,CAAC,IAAI,QAAQ,CAAC,GAAG,CAAC,KAAK,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;AACpG;;;;"}
+{"version":3,"file":"object.js","sources":["../../../src/utils/object.ts"],"sourcesContent":["import { Dictionary } from './types';\n\n/**\n * Iterates over every non-undefined property of the object calling the callback passed as\n * parameter.\n *\n * @param obj - The object to iterate through each property.\n * @param callbackFn - The callback function to call for each property.\n * @public\n */\nexport function forEach<T extends Dictionary>(\n  obj: T | undefined | null,\n  callbackFn: (key: keyof T, value: Exclude<T[keyof T], undefined>, index: number) => void\n): void {\n  if (obj == null) {\n    return;\n  }\n\n  let index = 0;\n  for (const key in obj) {\n    if (Object.prototype.hasOwnProperty.call(obj, key) && obj[key] !== undefined) {\n      callbackFn(key, obj[key], index++);\n    }\n  }\n}\n\n/**\n * Iterates through the obj properties calling the reducer function.\n *\n * @param obj - The object to iterate through each property.\n * @param reducer - A function that will be called for each property, modifying the initialValue\n * object.\n * @param initialValue - The initial value of the accumulator property of the reducer function.\n * @returns Result of the reducer function.\n * @public\n */\nexport function reduce<T extends Dictionary, V>(\n  obj: T | undefined | null,\n  reducer: (\n    accumulator: V,\n    key: keyof T,\n    value: Exclude<T[keyof T], undefined>,\n    index: number\n  ) => V,\n  initialValue: V\n): V {\n  let accumulator = initialValue;\n  forEach(obj, (key, value, index) => {\n    accumulator = reducer(accumulator, key, value, index);\n  });\n  return accumulator;\n}\n\n/**\n * Creates an object from another object transforming each property value.\n *\n * @param obj - The object to transform each property value.\n * @param mapper - The mapper function which will transform each value.\n * @returns A record with the result of the mapper.\n * @public\n */\nexport function map<T extends Dictionary, W>(\n  obj: T | undefined | null,\n  mapper: (key: keyof T, value: Exclude<T[keyof T], undefined>, index: number) => W\n): Record<keyof T, W> {\n  return reduce(\n    obj,\n    (accumulator, key, value, index) => {\n      accumulator[key] = mapper(key, value, index);\n      return accumulator;\n    },\n    {} as Record<keyof T, W>\n  );\n}\n\n/**\n * Creates an object picking only the not undefined properties.\n *\n * @param obj - The object from whom pick the values.\n * @returns A new object with the not undefined properties of the source object.\n * @public\n */\nexport function cleanUndefined<T>(obj: T): T {\n  return typeof obj !== 'object' || obj === null || Array.isArray(obj)\n    ? obj\n    : reduce(\n        obj,\n        (pickedObject, key, value) => {\n          pickedObject[key] = cleanUndefined(value);\n          return pickedObject;\n        },\n        {} as T\n      );\n}\n\n/**\n * Creates an object picking only the ones that pass the test implemented by the\n * provided function isIncluded.\n *\n * @param obj - T object to be filtered.\n * @param isIncluded - Test function that every obj item must pass.\n * @returns A filtered object.\n * @public\n */\nexport function objectFilter<T extends Dictionary>(\n  obj: T | undefined | null,\n  isIncluded: (key: keyof T, value: Exclude<T[keyof T], undefined>, index: number) => boolean\n): T {\n  return reduce(\n    obj,\n    (accumulator, key, value, index) => {\n      if (isIncluded(key, value, index)) {\n        accumulator[key] = value;\n      }\n      return accumulator;\n    },\n    {} as T\n  );\n}\n\n/**\n * Compares two objects of the same type, checking the values of their keys and retrieving\n * those that were not present in the old value and/or those whose value has changed.\n *\n * @param newValue - The new object value.\n * @param oldValue - The old object value.\n *\n * @returns An array of keys.\n * @public\n */\nexport function getNewAndUpdatedKeys<ObjectType extends Dictionary>(\n  newValue: ObjectType | undefined,\n  oldValue: ObjectType | undefined\n): (keyof ObjectType)[] {\n  if (newValue === oldValue || !newValue || !oldValue) {\n    return [];\n  }\n\n  return Object.keys(newValue).filter(key => !(key in oldValue) || newValue[key] !== oldValue[key]);\n}\n\n/**\n * Ensures that the given condition is met in all the non-undefined entries of the object.\n *\n * @param object - The object to check if every item meets the given condition.\n * @param condition - The condition to check in each one of the entries of the object.\n *\n * @returns True when all the entries pass the condition. False otherwise.\n * @public\n */\nexport function every<ObjectType extends Dictionary>(\n  object: ObjectType,\n  condition: (\n    key: keyof ObjectType,\n    value: Exclude<ObjectType[keyof ObjectType], undefined>,\n    index: number\n  ) => boolean\n): boolean {\n  return Object.entries(object)\n    .filter(([, value]) => value !== undefined)\n    .every(([key, value], index) => condition(key, value, index));\n}\n"],"names":[],"mappings":"AAEA;;;;;;;;SAQgB,OAAO,CACrB,GAAyB,EACzB,UAAwF;IAExF,IAAI,GAAG,IAAI,IAAI,EAAE;QACf,OAAO;KACR;IAED,IAAI,KAAK,GAAG,CAAC,CAAC;IACd,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE;QACrB,IAAI,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,GAAG,CAAC,GAAG,CAAC,KAAK,SAAS,EAAE;YAC5E,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;SACpC;KACF;AACH,CAAC;AAED;;;;;;;;;;SAUgB,MAAM,CACpB,GAAyB,EACzB,OAKM,EACN,YAAe;IAEf,IAAI,WAAW,GAAG,YAAY,CAAC;IAC/B,OAAO,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK;QAC7B,WAAW,GAAG,OAAO,CAAC,WAAW,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;KACvD,CAAC,CAAC;IACH,OAAO,WAAW,CAAC;AACrB,CAAC;AAED;;;;;;;;SAQgB,GAAG,CACjB,GAAyB,EACzB,MAAiF;IAEjF,OAAO,MAAM,CACX,GAAG,EACH,CAAC,WAAW,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK;QAC7B,WAAW,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QAC7C,OAAO,WAAW,CAAC;KACpB,EACD,EAAwB,CACzB,CAAC;AACJ,CAAC;AAED;;;;;;;SAOgB,cAAc,CAAI,GAAM;IACtC,OAAO,OAAO,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,IAAI,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;UAChE,GAAG;UACH,MAAM,CACJ,GAAG,EACH,CAAC,YAAY,EAAE,GAAG,EAAE,KAAK;YACvB,YAAY,CAAC,GAAG,CAAC,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;YAC1C,OAAO,YAAY,CAAC;SACrB,EACD,EAAO,CACR,CAAC;AACR,CAAC;AAED;;;;;;;;;SASgB,YAAY,CAC1B,GAAyB,EACzB,UAA2F;IAE3F,OAAO,MAAM,CACX,GAAG,EACH,CAAC,WAAW,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK;QAC7B,IAAI,UAAU,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,EAAE;YACjC,WAAW,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;SAC1B;QACD,OAAO,WAAW,CAAC;KACpB,EACD,EAAO,CACR,CAAC;AACJ,CAAC;AAED;;;;;;;;;;SAUgB,oBAAoB,CAClC,QAAgC,EAChC,QAAgC;IAEhC,IAAI,QAAQ,KAAK,QAAQ,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,EAAE;QACnD,OAAO,EAAE,CAAC;KACX;IAED,OAAO,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,GAAG,IAAI,EAAE,GAAG,IAAI,QAAQ,CAAC,IAAI,QAAQ,CAAC,GAAG,CAAC,KAAK,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;AACpG,CAAC;AAED;;;;;;;;;SASgB,KAAK,CACnB,MAAkB,EAClB,SAIY;IAEZ,OAAO,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC;SAC1B,MAAM,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,KAAK,KAAK,SAAS,CAAC;SAC1C,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,KAAK,KAAK,SAAS,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;AAClE;;;;"}

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

@@ -9,7 +9,7 @@ var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _vm.show
+  return _vm.isVisible
     ? _c(
         "BaseEventButton",
         {
@@ -17,7 +17,7 @@ var __vue_render__ = function () {
           class: _vm.cssClasses,
           attrs: {
             "data-test": "clear-filters",
-            disabled: !_vm.areThereSelectedFilters,
+            disabled: !_vm.hasSelectedFilters,
             events: _vm.events,
           },
         },
@@ -27,13 +27,11 @@ var __vue_render__ = function () {
             function () {
               return [
                 _vm._v(
-                  "\n    Clear Filters (" +
-                    _vm._s(_vm.facetsSelectedFilters.length) +
-                    ")\n  "
+                  "Clear Filters (" + _vm._s(_vm.selectedFilters.length) + ")"
                 ),
               ]
             },
-            { selectedFilters: _vm.facetsSelectedFilters }
+            { selectedFilters: _vm.selectedFilters }
           ),
         ],
         2

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

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