@empathyco/x-components 3.0.0-alpha.91 → 3.0.0-alpha.92

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 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.92](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.91...@empathyco/x-components@3.0.0-alpha.92) (2022-05-05)
+
+### Features
+
+- **facets:** expose `clickEvents` as a `prop` in filters components using a `RenderlessFilter`
+  ([013d83d](https://github.com/empathyco/x/commit/013d83d93ac734a1365bbf98a19ae15dc2f1a64b)),
+  closes [EX-5986](https://searchbroker.atlassian.net/browse/EX-5986)
+
+# 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.91](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.90...@empathyco/x-components@3.0.0-alpha.91) (2022-05-04)
 
 ### Features

package/docs/API-reference/api/x-components.hierarchicalfilter.clickevents.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; [HierarchicalFilter](./x-components.hierarchicalfilter.md) &gt; [clickEvents](./x-components.hierarchicalfilter.clickevents.md)
+
+## HierarchicalFilter.clickEvents property
+
+Additional events, with their payload, to emit when the filter is clicked.
+
+<b>Signature:</b>
+
+```typescript
+clickEvents: Partial<XEventsTypes>;
+```

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

@@ -18,6 +18,7 @@ export default class HierarchicalFilter extends Vue
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
 |  [childrenAnimation?](./x-components.hierarchicalfilter.childrenanimation.md) |  | Vue \| string | <i>(Optional)</i> The animation component to use for the children filters. |
+|  [clickEvents](./x-components.hierarchicalfilter.clickevents.md) |  | Partial&lt;[XEventsTypes](./x-components.xeventstypes.md)<!-- -->&gt; | Additional events, with their payload, to emit when the filter is clicked. |
 |  [filter](./x-components.hierarchicalfilter.filter.md) |  | HierarchicalFilterModel | The filter data to render. |
 
 ## Methods

package/docs/API-reference/api/x-components.numberrangefilter.clickevents.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; [NumberRangeFilter](./x-components.numberrangefilter.md) &gt; [clickEvents](./x-components.numberrangefilter.clickevents.md)
+
+## NumberRangeFilter.clickEvents property
+
+Additional events, with their payload, to emit when the filter is clicked.
+
+<b>Signature:</b>
+
+```typescript
+clickEvents?: Partial<XEventsTypes>;
+```

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

@@ -17,5 +17,6 @@ export default class NumberRangeFilter extends Vue
 
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
+|  [clickEvents?](./x-components.numberrangefilter.clickevents.md) |  | Partial&lt;[XEventsTypes](./x-components.xeventstypes.md)<!-- -->&gt; | <i>(Optional)</i> Additional events, with their payload, to emit when the filter is clicked. |
 |  [filter](./x-components.numberrangefilter.filter.md) |  | NumberRangeFilterModel | The filter data to render. |
 

package/docs/API-reference/api/x-components.simplefilter.clickevents.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; [SimpleFilter](./x-components.simplefilter.md) &gt; [clickEvents](./x-components.simplefilter.clickevents.md)
+
+## SimpleFilter.clickEvents property
+
+Additional events, with their payload, to emit when the filter is clicked.
+
+<b>Signature:</b>
+
+```typescript
+clickEvents?: Partial<XEventsTypes>;
+```

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

@@ -17,5 +17,6 @@ export default class SimpleFilter extends Vue
 
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
+|  [clickEvents?](./x-components.simplefilter.clickevents.md) |  | Partial&lt;[XEventsTypes](./x-components.xeventstypes.md)<!-- -->&gt; | <i>(Optional)</i> Additional events, with their payload, to emit when the filter is clicked. |
 |  [filter](./x-components.simplefilter.filter.md) |  | SimpleFilterModel | The filter data to render. |
 

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

@@ -10,10 +10,11 @@ Renders a hierarchical filter recursively, emitting the needed events when click
 
 ## Props
 
-| Name                           | Description                                              | Type                                 | Default       |
-| ------------------------------ | -------------------------------------------------------- | ------------------------------------ | ------------- |
-| <code>filter</code>            | The filter data to render.                               | <code>HierarchicalFilterModel</code> | <code></code> |
-| <code>childrenAnimation</code> | The animation component to use for the children filters. | <code>union</code>                   | <code></code> |
+| Name                           | Description                                                                | Type                                 | Default       |
+| ------------------------------ | -------------------------------------------------------------------------- | ------------------------------------ | ------------- |
+| <code>filter</code>            | The filter data to render.                                                 | <code>HierarchicalFilterModel</code> | <code></code> |
+| <code>childrenAnimation</code> | The animation component to use for the children filters.                   | <code>union</code>                   | <code></code> |
+| <code>clickEvents</code>       | Additional events, with their payload, to emit when the filter is clicked. | <code>Partial</code>                 | <code></code> |
 
 ## Slots
 
@@ -22,22 +23,93 @@ Renders a hierarchical filter recursively, emitting the needed events when click
 | <code>default</code> | The content to render inside the button. | <br /><br /><br />                        |
 | <code>label</code>   | The content to render inside the button. |                                           |
 
-## Examples
+## Events
+
+A list of events that the component will emit:
+
+- [`UserClickedAFilter`](x-components.xeventstypes.userclickedafilter.md): the event is emitted
+  after the user clicks the button, using the `filter` prop as its payload.
+- [`UserClickedAHierarchicalFilter`](x-components.xeventstypes.userclickedahierarchicalfilter.md):
+  the event is emitted after the user clicks the button, using the `filter` prop as its payload.
+  filter.
+
+## See it in action
 
 This component renders a button, which on clicked emits the `UserClickedAFilter` and
 `UserClickedAHierarchicalFilter` events. By default it renders the filter label as the button text.
 If the provided filter has children filters, this component will render them recursively. Changing
 the slot content will change it for all of the children.
 
-### Basic usage
+The `filter` prop is required. The `clickEvents` prop is optional and allows configuring the events
+to emit on click.
+
+```vue
+<template>
+  <HierarchicalFilter :filter="filter" />
+</template>
+
+<script>
+import { HierarchicalFilter } from "@empathyco/x-components/facets";
+
+export default {
+  name: "HierarchicalFilterTest",
+  components: {
+    HierarchicalFilter
+  },
+  date() {
+    return {
+      filter: {
+        id: `categories:men`,
+        modelName: "HierarchicalFilter",
+        label: `men`,
+        facetId: "categories",
+        parentId: null,
+        totalResults: 10,
+        children: [],
+        selected: false
+      }
+    };
+  }
+};
+</script>
+```
+
+### Playing with props
+
+Configuring the events to emit when the filter is clicked.
 
 ```vue
 <template>
   <HierarchicalFilter
+    :clickEvents="{ UserClickedAHierarchicalFilter: filter }"
     :filter="filter"
-    v-slot="{ filter: slotFilter, clickFilter, cssClasses, isDisabled }"
   />
 </template>
+
+<script>
+import { HierarchicalFilter } from "@empathyco/x-components/facets";
+
+export default {
+  name: "HierarchicalFilterTest",
+  components: {
+    HierarchicalFilter
+  },
+  date() {
+    return {
+      filter: {
+        id: `categories:men`,
+        modelName: "HierarchicalFilter",
+        label: `men`,
+        facetId: "categories",
+        parentId: null,
+        totalResults: 10,
+        children: [],
+        selected: false
+      }
+    };
+  }
+};
+</script>
 ```
 
 ### Customizing the default slot content
@@ -45,30 +117,77 @@ the slot content will change it for all of the children.
 In this example, the child filters will also include the label and checkbox.
 
 ```vue
-<HierarchicalFilter
-  :filter="filter"
-  v-slot="{ filter, clickFilter, slotCSSClasses, isDisabled }"
->
-  <label :class="slotCSSClasses">
-    <input @change="clickFilter" :disabled="isDisabled">
-    {{ filter.label }}
-  </label>
-</HierarchicalFilter>
+<template>
+  <HierarchicalFilter
+    :filter="filter"
+    v-slot="{ filter, clickFilter, slotCSSClasses, isDisabled }"
+  >
+    <label :class="slotCSSClasses">
+      <input @change="clickFilter" :disabled="isDisabled" />
+      {{ filter.label }}
+    </label>
+  </HierarchicalFilter>
+</template>
+
+<script>
+import { HierarchicalFilter } from "@empathyco/x-components/facets";
+
+export default {
+  name: "HierarchicalFilterTest",
+  components: {
+    HierarchicalFilter
+  },
+  date() {
+    return {
+      filter: {
+        id: `categories:men`,
+        modelName: "HierarchicalFilter",
+        label: `men`,
+        facetId: "categories",
+        parentId: null,
+        totalResults: 10,
+        children: [],
+        selected: false
+      }
+    };
+  }
+};
+</script>
 ```
 
 ### Customizing the label slot content
 
 ```vue
-<HierarchicalFilter :filter="filter">
-  <template #label :filter="filter">
-    <span class="custom-class">{{ filter.label }}</span>
-  </template>
-</HierarchicalFilter>
-```
-
-## Events
-
-A list of events that the component will emit:
+<template>
+  <HierarchicalFilter :filter="filter">
+    <template #label :filter="filter">
+      <span class="custom-class">{{ filter.label }}</span>
+    </template>
+  </HierarchicalFilter>
+</template>
 
-- `UserClickedAHierarchicalFilter`: the event is emitted after the user clicks the button. The event
-  payload is the hierarchical filter.
+<script>
+import { HierarchicalFilter } from "@empathyco/x-components/facets";
+
+export default {
+  name: "HierarchicalFilterTest",
+  components: {
+    HierarchicalFilter
+  },
+  date() {
+    return {
+      filter: {
+        id: `categories:men`,
+        modelName: "HierarchicalFilter",
+        label: `men`,
+        facetId: "categories",
+        parentId: null,
+        totalResults: 10,
+        children: [],
+        selected: false
+      }
+    };
+  }
+};
+</script>
+```

package/docs/API-reference/components/facets/x-components.filters/number-range-filter.md

@@ -10,9 +10,10 @@ Renders a number range filter, emitting the needed events when clicked.
 
 ## Props
 
-| Name                | Description                | Type                                | Default       |
-| ------------------- | -------------------------- | ----------------------------------- | ------------- |
-| <code>filter</code> | The filter data to render. | <code>NumberRangeFilterModel</code> | <code></code> |
+| Name                     | Description                                                                | Type                                | Default       |
+| ------------------------ | -------------------------------------------------------------------------- | ----------------------------------- | ------------- |
+| <code>filter</code>      | The filter data to render.                                                 | <code>NumberRangeFilterModel</code> | <code></code> |
+| <code>clickEvents</code> | Additional events, with their payload, to emit when the filter is clicked. | <code>Partial</code>                | <code></code> |
 
 ## Slots
 
@@ -21,29 +22,127 @@ Renders a number range filter, emitting the needed events when clicked.
 | <code>default</code> | The control element to render           | **filter** <code>Filter</code> - The filter data<br />**clickFilter** <code>() => void</code> - Method that will invoke the needed actions after the user<br /> clicks the filter.<br />**cssClasses** <code>Object</code> - Object containing CSS classes to add to the button<br />**isDisabled** <code>Boolean</code> - True if the filter shouldn't be able to be selected by the<br /> user |
 | <code>label</code>   | The content to render inside the button | **filter** <code>Filter</code> - The filter data                                                                                                                                                                                                                                                                                                                                                 |
 
-## Examples
+## Events
+
+This component emits the following events:
+
+- [`UserClickedAFilter`](x-components.xeventstypes.userclickedafilter.md): the event is emitted
+  after the user clicks the button, using the `filter` prop as its payload.
+- [`UserClickedANumberRangeFilter`](x-components.xeventstypes.userclickedanumberrangefilter.md): the
+  event is emitted after the user clicks the button, using the `filter` prop as its payload.
 
-This component renders a button, which on clicked emits the `UserClickedAFilter` and the
+## See it in action
+
+This component renders a button which, on clicked, emits the `UserClickedAFilter` and the
 `UserClickedANumberRangeFilter` events. By default, it renders the filter label as the button text.
 
-### Basic usage
+The `filter` prop is required. The `clickEvents` prop is optional and allows configuring the events
+to emit on click.
 
 ```vue
-<NumberRangeFilter :filter="filter" />
+<template>
+  <NumberRangeFilter :filter="filter" />
+</template>
+
+<script>
+import { NumberRangeFilter } from "@empathyco/x-components/facets";
+
+export default {
+  name: "NumberRangeFilterTest",
+  components: {
+    NumberRangeFilter
+  },
+  date() {
+    return {
+      filter: {
+        id: `price:1-10`,
+        modelName: "NumberRangeFilter",
+        label: `From 1 to 10`,
+        facetId: "price",
+        range: {
+          min: 1,
+          max: 10
+        },
+        selected: false
+      }
+    };
+  }
+};
+</script>
 ```
 
-### Customizing its contents
+### Playing with props
+
+Configuring the events to emit when the filter is clicked.
 
 ```vue
-<NumberRangeFilter :filter="filter" v-slot="{ filter }">
-  <img src="checkbox.png"/>
-  <span>{{ filter.label }}</span>
-</NumberRangeFilter>
+<template>
+  <NumberRangeFilter
+    :clickEvents="{ UserClickedANumberRangeFilter: filter }"
+    :filter="filter"
+  />
+</template>
+
+<script>
+import { NumberRangeFilter } from "@empathyco/x-components/facets";
+
+export default {
+  name: "NumberRangeFilterTest",
+  components: {
+    NumberRangeFilter
+  },
+  date() {
+    return {
+      filter: {
+        id: `price:1-10`,
+        modelName: "NumberRangeFilter",
+        label: `From 1 to 10`,
+        facetId: "price",
+        range: {
+          min: 1,
+          max: 10
+        },
+        selected: false
+      }
+    };
+  }
+};
+</script>
 ```
 
-## Events
-
-A list of events that the component will emit:
+### Customizing its contents
 
-- `UserClickedANumberRangeFilter`: the event is emitted after the user clicks the button. The event
-  payload is the number range filter.
+```vue
+<template>
+  <NumberRangeFilter :filter="filter" v-slot="{ filter }">
+    <img src="checkbox.png" />
+    <span>{{ filter.label }}</span>
+  </NumberRangeFilter>
+</template>
+
+<script>
+import { NumberRangeFilter } from "@empathyco/x-components/facets";
+
+export default {
+  name: "NumberRangeFilterTest",
+  components: {
+    NumberRangeFilter
+  },
+  date() {
+    return {
+      filter: {
+        id: `price:1-10`,
+        modelName: "NumberRangeFilter",
+        label: `From 1 to 10`,
+        facetId: "price",
+        range: {
+          min: 1,
+          max: 10
+        },
+        selected: false
+      }
+    };
+  }
+};
+</script>
+```

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

@@ -10,9 +10,10 @@ Renders a simple filter, emitting the needed events when clicked.
 
 ## Props
 
-| Name                | Description                | Type                           | Default       |
-| ------------------- | -------------------------- | ------------------------------ | ------------- |
-| <code>filter</code> | The filter data to render. | <code>SimpleFilterModel</code> | <code></code> |
+| Name                     | Description                                                                | Type                           | Default       |
+| ------------------------ | -------------------------------------------------------------------------- | ------------------------------ | ------------- |
+| <code>filter</code>      | The filter data to render.                                                 | <code>SimpleFilterModel</code> | <code></code> |
+| <code>clickEvents</code> | Additional events, with their payload, to emit when the filter is clicked. | <code>Partial</code>           | <code></code> |
 
 ## Slots
 
@@ -21,13 +22,23 @@ Renders a simple filter, emitting the needed events when clicked.
 | <code>default</code> | The control element to render           | **filter** <code>Filter</code> - The filter data<br />**clickFilter** <code>() => void</code> - Method that will invoke the needed actions after the user<br /> clicks the filter.<br />**cssClasses** <code>Object</code> - Object containing CSS classes to add to the button<br />**isDisabled** <code>Boolean</code> - True if the filter shouldn't be able to be selected by the<br /> user |
 | <code>label</code>   | The content to render inside the button | **filter** <code>Filter</code> - The filter data                                                                                                                                                                                                                                                                                                                                                 |
 
-## Examples
+## Events
+
+A list of events that the component will emit:
+
+- [`UserClickedAFilter`](x-components.xeventstypes.userclickedafilter.md): the event is emitted
+  after the user clicks the button, using the `filter` prop as its payload.
+- [`UserClickedASimpleFilter`[(x-components.xeventstypes.userclickedasimplefilter.md): the event is
+  emitted after the user clicks the button, using the `filter` prop as its payload.
+
+## See it in action
 
 This component renders a button, which on clicked emits the `UserClickedAFilter` and the
 `UserClickedASimpleFilter` events. By default, it renders a `button` with the `filter.label`
 property as text.
 
-### Basic usage
+The `filter` prop is required. The `clickEvents` prop is optional and allows configuring the events
+to emit on click.
 
 ```vue
 <template>
@@ -58,6 +69,42 @@ export default {
 </script>
 ```
 
+### Playing with props
+
+Configuring the events to emit when the filter is clicked.
+
+```vue
+<template>
+  <SimpleFilter
+    :clickEvents="{ UserClickedASimpleFilter: filter }"
+    :filter="filter"
+  />
+</template>
+
+<script>
+import { SimpleFilter } from "@empathyco/x-components/facets";
+
+export default {
+  name: "SimpleFilterTest",
+  components: {
+    SimpleFilter
+  },
+  data() {
+    return {
+      filter: {
+        modelName: "SimpleFilter",
+        selected: false,
+        id: "category:shirts",
+        value: "category:shirts",
+        facetId: "category",
+        totalResults: 10
+      }
+    };
+  }
+};
+</script>
+```
+
 ### Rendering an input
 
 You can change the rendered control using the default slot. Note that because of the current Vue
@@ -141,10 +188,3 @@ export default {
 };
 </script>
 ```
-
-## Events
-
-A list of events that the component will emit:
-
-- `UserClickedASimpleFilter`: the event is emitted after the user clicks the button. The event
-  payload is the simple filter.

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

@@ -19,7 +19,7 @@ var __vue_render__ = function () {
       _c("RenderlessFilter", {
         staticClass: "x-hierarchical-filter",
         class: _vm.cssClasses,
-        attrs: { clickEvents: _vm.clickEvents, filter: _vm.filter },
+        attrs: { clickEvents: _vm._clickEvents, filter: _vm.filter },
         scopedSlots: _vm._u(
           [
             {
@@ -94,6 +94,7 @@ var __vue_render__ = function () {
                   attrs: {
                     childrenAnimation: _vm.childrenAnimation,
                     filter: childFilter,
+                    clickEvents: _vm.getChildFilterClickEvents(childFilter),
                   },
                   scopedSlots: _vm._u(
                     [

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

@@ -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      #default=\"{ 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 :childrenAnimation=\"childrenAnimation\" :filter=\"childFilter\">\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 { Filter, HierarchicalFilter as HierarchicalFilterModel } from '@empathyco/x-types';\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 to emit when the filter is clicked.\n     *\n     * @returns A dictionary with the events to be emitted when the filter is clicked, and its\n     * payload.\n     * @internal\n     */\n    protected get clickEvents(): Partial<XEventsTypes> {\n      return {\n        UserClickedAHierarchicalFilter: this.filter\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     * 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     *\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## Examples\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\n### Basic usage\n\n```vue\n<template>\n  <HierarchicalFilter\n    :filter=\"filter\"\n    v-slot=\"{ filter: slotFilter, clickFilter, cssClasses, isDisabled }\"\n  />\n</template>\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<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```\n\n### Customizing the label slot content\n\n```vue\n<HierarchicalFilter :filter=\"filter\">\n  <template #label :filter=\"filter\">\n    <span class=\"custom-class\">{{ filter.label }}</span>\n  </template>\n</HierarchicalFilter>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedAHierarchicalFilter`: the event is emitted after the user clicks the button. The event\n  payload is the hierarchical filter.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,4 +1,6 @@
 import { __decorate } from 'tslib';
+import { isHierarchicalFilter } from '@empathyco/x-types';
+import { isObject } from '@empathyco/x-utils';
 import Vue from 'vue';
 import { Prop, Component } from 'vue-property-decorator';
 import '../../../../components/animations/animate-width.vue.js';
@@ -127,15 +129,15 @@ import __vue_component__$1 from './renderless-filter.vue.js';
  */
 let HierarchicalFilter = class HierarchicalFilter extends Vue {
     /**
-     * Additional events to emit when the filter is clicked.
+     * The {@link XEventsTypes | events} to emit.
      *
-     * @returns A dictionary with the events to be emitted when the filter is clicked, and its
-     * payload.
+     * @returns The events to emit when clicked.
      * @internal
      */
-    get clickEvents() {
+    get _clickEvents() {
         return {
-            UserClickedAHierarchicalFilter: this.filter
+            UserClickedAHierarchicalFilter: this.filter,
+            ...this.clickEvents
         };
     }
     /**
@@ -151,6 +153,26 @@ let HierarchicalFilter = class HierarchicalFilter extends Vue {
             'x-filter--is-partially-selected': this.isPartiallySelected
         };
     }
+    /**
+     * Gets the child filter click events, converting the payload of the events that have a
+     * {@link @empathyco/x-types#HierarchicalFilter} as payload to the corresponding child filter.
+     *
+     * @param childFilter - The child filter.
+     * @returns The events to emit when clicking a child.
+     * @internal
+     */
+    getChildFilterClickEvents(childFilter) {
+        return Object.entries(this._clickEvents).reduce((clickEvents, [event, payload]) => {
+            return {
+                ...clickEvents,
+                [event]: isObject(payload) &&
+                    isHierarchicalFilter(payload) &&
+                    childFilter !== payload
+                    ? childFilter
+                    : payload
+            };
+        }, {});
+    }
     /**
      * Returns if the filter is partially selected, which means having more than one child filter
      * selected, but not every of them, or having at least one child filter partially selected.
@@ -166,7 +188,6 @@ let HierarchicalFilter = class HierarchicalFilter extends Vue {
      * is empty it will return an empty array instead of inject the ones from the parent.
      *
      * @returns A list of filters.
-     *
      * @internal
      */
     get renderedChildrenFilters() {
@@ -192,6 +213,9 @@ __decorate([
 __decorate([
     State('facets', 'filters')
 ], HierarchicalFilter.prototype, "filters", void 0);
+__decorate([
+    Prop()
+], HierarchicalFilter.prototype, "clickEvents", void 0);
 HierarchicalFilter = __decorate([
     Component({
         name: 'HierarchicalFilter',

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

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

package/js/x-modules/facets/components/filters/number-range-filter.vue.js

@@ -12,7 +12,7 @@ var __vue_render__ = function () {
   return _c("RenderlessFilter", {
     staticClass: "x-number-range-filter",
     class: _vm.cssClasses,
-    attrs: { clickEvents: _vm.clickEvents, filter: _vm.filter },
+    attrs: { clickEvents: _vm._clickEvents, filter: _vm.filter },
     scopedSlots: _vm._u(
       [
         {

package/js/x-modules/facets/components/filters/number-range-filter.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"number-range-filter.vue.js","sources":["../../../../../../src/x-modules/facets/components/filters/number-range-filter.vue"],"sourcesContent":["<template>\n  <RenderlessFilter\n    v-slot=\"{ filter, clickFilter, cssClasses, isDisabled }\"\n    :class=\"cssClasses\"\n    :clickEvents=\"clickEvents\"\n    :filter=\"filter\"\n    class=\"x-number-range-filter\"\n  >\n    <!--\n      @slot The control element to render\n      @binding {Filter} filter - The filter data\n      @binding {() => void} clickFilter - Method that will invoke the needed actions after the user\n      clicks the filter.\n      @binding {Object} cssClasses - Object containing CSS classes to add to the button\n      @binding {Boolean} isDisabled - True if the filter shouldn't be able to be selected by the\n      user\n    -->\n    <slot\n      v-bind=\"{\n        filter,\n        clickFilter,\n        cssClasses,\n        isDisabled\n      }\"\n    >\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 :filter=\"filter\" name=\"label\">{{ filter.label }}</slot>\n      </button>\n    </slot>\n  </RenderlessFilter>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { NumberRangeFilter as NumberRangeFilterModel } from '@empathyco/x-types';\n  import { xComponentMixin } from '../../../../components';\n  import { VueCSSClasses } from '../../../../utils/types';\n  import { XEventsTypes } from '../../../../wiring/events.types';\n  import { facetsXModule } from '../../x-module';\n  import RenderlessFilter from './renderless-filter.vue';\n\n  /**\n   * Renders a number range filter, emitting the needed events when clicked.\n   *\n   * @public\n   */\n  @Component({\n    components: { RenderlessFilter },\n    mixins: [xComponentMixin(facetsXModule)]\n  })\n  export default class NumberRangeFilter extends Vue {\n    /** The filter data to render. */\n    @Prop({ required: true })\n    public filter!: NumberRangeFilterModel;\n\n    /**\n     * Additional events to emit when the filter is clicked.\n     *\n     * @returns A dictionary with the events to be emitted when the filter is clicked, and its\n     * payload.\n     * @internal\n     */\n    protected get clickEvents(): Partial<XEventsTypes> {\n      return {\n        UserClickedANumberRangeFilter: this.filter\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-number-range-filter--is-selected': this.filter.selected\n      };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a button, which on clicked emits the `UserClickedAFilter` and the\n`UserClickedANumberRangeFilter` events. By default, it renders the filter label as the button text.\n\n### Basic usage\n\n```vue\n<NumberRangeFilter :filter=\"filter\" />\n```\n\n### Customizing its contents\n\n```vue\n<NumberRangeFilter :filter=\"filter\" v-slot=\"{ filter }\">\n  <img src=\"checkbox.png\"/>\n  <span>{{ filter.label }}</span>\n</NumberRangeFilter>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedANumberRangeFilter`: the event is emitted after the user clicks the button. The event\n  payload is the number range filter.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"number-range-filter.vue.js","sources":["../../../../../../src/x-modules/facets/components/filters/number-range-filter.vue"],"sourcesContent":["<template>\n  <RenderlessFilter\n    v-slot=\"{ filter, clickFilter, cssClasses, isDisabled }\"\n    :class=\"cssClasses\"\n    :clickEvents=\"_clickEvents\"\n    :filter=\"filter\"\n    class=\"x-number-range-filter\"\n  >\n    <!--\n      @slot The control element to render\n      @binding {Filter} filter - The filter data\n      @binding {() => void} clickFilter - Method that will invoke the needed actions after the user\n      clicks the filter.\n      @binding {Object} cssClasses - Object containing CSS classes to add to the button\n      @binding {Boolean} isDisabled - True if the filter shouldn't be able to be selected by the\n      user\n    -->\n    <slot\n      v-bind=\"{\n        filter,\n        clickFilter,\n        cssClasses,\n        isDisabled\n      }\"\n    >\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 :filter=\"filter\" name=\"label\">{{ filter.label }}</slot>\n      </button>\n    </slot>\n  </RenderlessFilter>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { NumberRangeFilter as NumberRangeFilterModel } from '@empathyco/x-types';\n  import { xComponentMixin } from '../../../../components';\n  import { VueCSSClasses } from '../../../../utils/types';\n  import { XEventsTypes } from '../../../../wiring/events.types';\n  import { facetsXModule } from '../../x-module';\n  import RenderlessFilter from './renderless-filter.vue';\n\n  /**\n   * Renders a number range filter, emitting the needed events when clicked.\n   *\n   * @public\n   */\n  @Component({\n    components: { RenderlessFilter },\n    mixins: [xComponentMixin(facetsXModule)]\n  })\n  export default class NumberRangeFilter extends Vue {\n    /** The filter data to render. */\n    @Prop({ required: true })\n    public filter!: NumberRangeFilterModel;\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        UserClickedANumberRangeFilter: 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-number-range-filter--is-selected': this.filter.selected\n      };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\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- [`UserClickedANumberRangeFilter`](x-components.xeventstypes.userclickedanumberrangefilter.md): the\n  event is emitted after the user clicks the button, using the `filter` prop as its payload.\n\n## See it in action\n\nThis component renders a button which, on clicked, emits the `UserClickedAFilter` and the\n`UserClickedANumberRangeFilter` events. By default, it renders the filter label as the button text.\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  <NumberRangeFilter :filter=\"filter\" />\n</template>\n\n<script>\n  import { NumberRangeFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'NumberRangeFilterTest',\n    components: {\n      NumberRangeFilter\n    },\n    date() {\n      return {\n        filter: {\n          id: `price:1-10`,\n          modelName: 'NumberRangeFilter',\n          label: `From 1 to 10`,\n          facetId: 'price',\n          range: {\n            min: 1,\n            max: 10\n          },\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  <NumberRangeFilter :clickEvents=\"{ UserClickedANumberRangeFilter: filter }\" :filter=\"filter\" />\n</template>\n\n<script>\n  import { NumberRangeFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'NumberRangeFilterTest',\n    components: {\n      NumberRangeFilter\n    },\n    date() {\n      return {\n        filter: {\n          id: `price:1-10`,\n          modelName: 'NumberRangeFilter',\n          label: `From 1 to 10`,\n          facetId: 'price',\n          range: {\n            min: 1,\n            max: 10\n          },\n          selected: false\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Customizing its contents\n\n```vue\n<template>\n  <NumberRangeFilter :filter=\"filter\" v-slot=\"{ filter }\">\n    <img src=\"checkbox.png\" />\n    <span>{{ filter.label }}</span>\n  </NumberRangeFilter>\n</template>\n\n<script>\n  import { NumberRangeFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'NumberRangeFilterTest',\n    components: {\n      NumberRangeFilter\n    },\n    date() {\n      return {\n        filter: {\n          id: `price:1-10`,\n          modelName: 'NumberRangeFilter',\n          label: `From 1 to 10`,\n          facetId: 'price',\n          range: {\n            min: 1,\n            max: 10\n          },\n          selected: false\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/facets/components/filters/number-range-filter.vue_rollup-plugin-vue_script.vue.js

@@ -125,15 +125,15 @@ import __vue_component__ from './renderless-filter.vue.js';
  */
 let NumberRangeFilter = class NumberRangeFilter extends Vue {
     /**
-     * Additional events to emit when the filter is clicked.
+     * The {@link XEventsTypes | events} to emit.
      *
-     * @returns A dictionary with the events to be emitted when the filter is clicked, and its
-     * payload.
+     * @returns The events to emit when clicked.
      * @internal
      */
-    get clickEvents() {
+    get _clickEvents() {
         return {
-            UserClickedANumberRangeFilter: this.filter
+            UserClickedANumberRangeFilter: this.filter,
+            ...this.clickEvents
         };
     }
     /**
@@ -151,6 +151,9 @@ let NumberRangeFilter = class NumberRangeFilter extends Vue {
 __decorate([
     Prop({ required: true })
 ], NumberRangeFilter.prototype, "filter", void 0);
+__decorate([
+    Prop()
+], NumberRangeFilter.prototype, "clickEvents", void 0);
 NumberRangeFilter = __decorate([
     Component({
         components: { RenderlessFilter: __vue_component__ },

package/js/x-modules/facets/components/filters/number-range-filter.vue_rollup-plugin-vue_script.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"number-range-filter.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../../src/x-modules/facets/components/filters/number-range-filter.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { NumberRangeFilter as NumberRangeFilterModel } from '@empathyco/x-types';\nimport { xComponentMixin } from '../../../../components';\nimport { VueCSSClasses } from '../../../../utils/types';\nimport { XEventsTypes } from '../../../../wiring/events.types';\nimport { facetsXModule } from '../../x-module';\nimport RenderlessFilter from './renderless-filter.vue';\n\n/**\n * Renders a number range filter, emitting the needed events when clicked.\n *\n * @public\n */\n@Component({\n  components: { RenderlessFilter },\n  mixins: [xComponentMixin(facetsXModule)]\n})\nexport default class NumberRangeFilter extends Vue {\n  /** The filter data to render. */\n  @Prop({ required: true })\n  public filter!: NumberRangeFilterModel;\n\n  /**\n   * Additional events to emit when the filter is clicked.\n   *\n   * @returns A dictionary with the events to be emitted when the filter is clicked, and its\n   * payload.\n   * @internal\n   */\n  protected get clickEvents(): Partial<XEventsTypes> {\n    return {\n      UserClickedANumberRangeFilter: this.filter\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-number-range-filter--is-selected': this.filter.selected\n    };\n  }\n}\n"],"names":["RenderlessFilter"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA;;;;;AASA,IAAqB,iBAAiB,GAAtC,MAAqB,iBAAkB,SAAQ,GAAG;;;;;;;;IAYhD,IAAc,WAAW;QACvB,OAAO;YACL,6BAA6B,EAAE,IAAI,CAAC,MAAM;SAC3C,CAAC;KACH;;;;;;;IAQD,IAAc,UAAU;QACtB,OAAO;YACL,oCAAoC,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ;SAC3D,CAAC;KACH;CACF,CAAA;AA1BC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;iDACc;AAHpB,iBAAiB;IAJrC,SAAS,CAAC;QACT,UAAU,EAAE,oBAAEA,iBAAgB,EAAE;QAChC,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;KACzC,CAAC;GACmB,iBAAiB,CA6BrC;aA7BoB,iBAAiB;;;;"}
+{"version":3,"file":"number-range-filter.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../../src/x-modules/facets/components/filters/number-range-filter.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { NumberRangeFilter as NumberRangeFilterModel } from '@empathyco/x-types';\nimport { xComponentMixin } from '../../../../components';\nimport { VueCSSClasses } from '../../../../utils/types';\nimport { XEventsTypes } from '../../../../wiring/events.types';\nimport { facetsXModule } from '../../x-module';\nimport RenderlessFilter from './renderless-filter.vue';\n\n/**\n * Renders a number range filter, emitting the needed events when clicked.\n *\n * @public\n */\n@Component({\n  components: { RenderlessFilter },\n  mixins: [xComponentMixin(facetsXModule)]\n})\nexport default class NumberRangeFilter extends Vue {\n  /** The filter data to render. */\n  @Prop({ required: true })\n  public filter!: NumberRangeFilterModel;\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      UserClickedANumberRangeFilter: 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-number-range-filter--is-selected': this.filter.selected\n    };\n  }\n}\n"],"names":["RenderlessFilter"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA;;;;;AASA,IAAqB,iBAAiB,GAAtC,MAAqB,iBAAkB,SAAQ,GAAG;;;;;;;IAmBhD,IAAc,YAAY;QACxB,OAAO;YACL,6BAA6B,EAAE,IAAI,CAAC,MAAM;YAC1C,GAAG,IAAI,CAAC,WAAW;SACpB,CAAC;KACH;;;;;;;IAQD,IAAc,UAAU;QACtB,OAAO;YACL,oCAAoC,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ;SAC3D,CAAC;KACH;CACF,CAAA;AAlCC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;iDACc;AAQvC;IADC,IAAI,EAAE;sDACoC;AAXxB,iBAAiB;IAJrC,SAAS,CAAC;QACT,UAAU,EAAE,oBAAEA,iBAAgB,EAAE;QAChC,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;KACzC,CAAC;GACmB,iBAAiB,CAqCrC;aArCoB,iBAAiB;;;;"}

package/js/x-modules/facets/components/filters/simple-filter.vue.js

@@ -12,7 +12,7 @@ var __vue_render__ = function () {
   return _c("RenderlessFilter", {
     staticClass: "x-simple-filter",
     class: _vm.cssClasses,
-    attrs: { clickEvents: _vm.clickEvents, filter: _vm.filter },
+    attrs: { clickEvents: _vm._clickEvents, filter: _vm.filter },
     scopedSlots: _vm._u(
       [
         {

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

@@ -1 +1 @@
-{"version":3,"file":"simple-filter.vue.js","sources":["../../../../../../src/x-modules/facets/components/filters/simple-filter.vue"],"sourcesContent":["<template>\n  <RenderlessFilter\n    v-slot=\"{ filter, clickFilter, cssClasses, isDisabled }\"\n    :class=\"cssClasses\"\n    :clickEvents=\"clickEvents\"\n    :filter=\"filter\"\n    class=\"x-simple-filter\"\n  >\n    <!--\n      @slot The control element to render\n      @binding {Filter} filter - The filter data\n      @binding {() => void} clickFilter - Method that will invoke the needed actions after the user\n      clicks the filter.\n      @binding {Object} cssClasses - Object containing CSS classes to add to the button\n      @binding {Boolean} isDisabled - True if the filter shouldn't be able to be selected by the\n      user\n    -->\n    <slot\n      v-bind=\"{\n        filter,\n        clickFilter,\n        cssClasses,\n        isDisabled\n      }\"\n    >\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 :filter=\"filter\" name=\"label\">{{ filter.label }}</slot>\n      </button>\n    </slot>\n  </RenderlessFilter>\n</template>\n\n<script lang=\"ts\">\n  import { SimpleFilter as SimpleFilterModel } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { xComponentMixin } from '../../../../components';\n  import { VueCSSClasses } from '../../../../utils/types';\n  import { XEventsTypes } from '../../../../wiring/events.types';\n  import { facetsXModule } from '../../x-module';\n  import RenderlessFilter from './renderless-filter.vue';\n\n  /**\n   * Renders a simple filter, emitting the needed events when clicked.\n   *\n   * @public\n   */\n  @Component({\n    components: { RenderlessFilter },\n    mixins: [xComponentMixin(facetsXModule)]\n  })\n  export default class SimpleFilter extends Vue {\n    /** The filter data to render. */\n    @Prop({ required: true })\n    public filter!: SimpleFilterModel;\n\n    /**\n     * Additional events to emit when the filter is clicked.\n     *\n     * @returns A dictionary with the events to be emitted when the filter is clicked, and its\n     * payload.\n     * @internal\n     */\n    protected get clickEvents(): Partial<XEventsTypes> {\n      return {\n        UserClickedASimpleFilter: this.filter\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-simple-filter--is-selected': this.filter.selected\n      };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a button, which on clicked emits the `UserClickedAFilter` and the\n`UserClickedASimpleFilter` events. By default, it renders a `button` with the `filter.label`\nproperty as text.\n\n### Basic usage\n\n```vue\n<template>\n  <SimpleFilter :filter=\"filter\" />\n</template>\n\n<script>\n  import { SimpleFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'SimpleFilterTest',\n    components: {\n      SimpleFilter\n    },\n    data() {\n      return {\n        filter: {\n          modelName: 'SimpleFilter',\n          selected: false,\n          id: 'category:shirts',\n          value: 'category:shirts',\n          facetId: 'category',\n          totalResults: 10\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Rendering an input\n\nYou can change the rendered control using the default slot. Note that because of the current Vue\nlimitations, you must only render one single root node in this slot. There you will receive all the\ndata and methods needed:\n\n```vue\n<template>\n  <SimpleFilter v-slot=\"{ filter, clickFilter, isDisabled, cssClasses }\" :filter=\"filter\">\n    <label :class=\"cssClasses\">\n      <input :checked=\"filter.selected\" type=\"checkbox\" @change=\"clickFilter\" />\n      {{ filter.label }}\n    </label>\n  </SimpleFilter>\n</template>\n\n<script>\n  import { SimpleFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'SimpleFilterTest',\n    components: {\n      SimpleFilter\n    },\n    data() {\n      return {\n        filter: {\n          modelName: 'SimpleFilter',\n          selected: false,\n          id: 'category:shirts',\n          value: 'category:shirts',\n          facetId: 'category',\n          label: 'Shirts',\n          totalResults: 10\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Changing default button content\n\nYou can change the content rendered by the default button using the `label` slot. There you will\nreceive the filter data.\n\n```vue\n<template>\n  <SimpleFilter :filter=\"filter\">\n    <template #label=\"{ filter }\">\n      <img :src=\"`imgs/filters/${filter.id}.png`\" />\n      <span>{{ filter.label }}</span>\n    </template>\n  </SimpleFilter>\n</template>\n\n<script>\n  import { SimpleFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'SimpleFilterTest',\n    components: {\n      SimpleFilter\n    },\n    data() {\n      return {\n        filter: {\n          modelName: 'SimpleFilter',\n          selected: false,\n          id: 'category:shirts',\n          value: 'category:shirts',\n          facetId: 'category',\n          label: 'Shirts',\n          totalResults: 10\n        }\n      };\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedASimpleFilter`: the event is emitted after the user clicks the button. The event\n  payload is the simple filter.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"simple-filter.vue.js","sources":["../../../../../../src/x-modules/facets/components/filters/simple-filter.vue"],"sourcesContent":["<template>\n  <RenderlessFilter\n    v-slot=\"{ filter, clickFilter, cssClasses, isDisabled }\"\n    :class=\"cssClasses\"\n    :clickEvents=\"_clickEvents\"\n    :filter=\"filter\"\n    class=\"x-simple-filter\"\n  >\n    <!--\n      @slot The control element to render\n      @binding {Filter} filter - The filter data\n      @binding {() => void} clickFilter - Method that will invoke the needed actions after the user\n      clicks the filter.\n      @binding {Object} cssClasses - Object containing CSS classes to add to the button\n      @binding {Boolean} isDisabled - True if the filter shouldn't be able to be selected by the\n      user\n    -->\n    <slot\n      v-bind=\"{\n        filter,\n        clickFilter,\n        cssClasses,\n        isDisabled\n      }\"\n    >\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 :filter=\"filter\" name=\"label\">{{ filter.label }}</slot>\n      </button>\n    </slot>\n  </RenderlessFilter>\n</template>\n\n<script lang=\"ts\">\n  import { SimpleFilter as SimpleFilterModel } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { xComponentMixin } from '../../../../components';\n  import { VueCSSClasses } from '../../../../utils/types';\n  import { XEventsTypes } from '../../../../wiring/events.types';\n  import { facetsXModule } from '../../x-module';\n  import RenderlessFilter from './renderless-filter.vue';\n\n  /**\n   * Renders a simple filter, emitting the needed events when clicked.\n   *\n   * @public\n   */\n  @Component({\n    components: { RenderlessFilter },\n    mixins: [xComponentMixin(facetsXModule)]\n  })\n  export default class SimpleFilter extends Vue {\n    /** The filter data to render. */\n    @Prop({ required: true })\n    public filter!: SimpleFilterModel;\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        UserClickedASimpleFilter: 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-simple-filter--is-selected': this.filter.selected\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- [`UserClickedASimpleFilter`[(x-components.xeventstypes.userclickedasimplefilter.md): the event is\n  emitted after the user clicks the button, using the `filter` prop as its payload.\n\n## See it in action\n\nThis component renders a button, which on clicked emits the `UserClickedAFilter` and the\n`UserClickedASimpleFilter` events. By default, it renders a `button` with the `filter.label`\nproperty as text.\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  <SimpleFilter :filter=\"filter\" />\n</template>\n\n<script>\n  import { SimpleFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'SimpleFilterTest',\n    components: {\n      SimpleFilter\n    },\n    data() {\n      return {\n        filter: {\n          modelName: 'SimpleFilter',\n          selected: false,\n          id: 'category:shirts',\n          value: 'category:shirts',\n          facetId: 'category',\n          totalResults: 10\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  <SimpleFilter :clickEvents=\"{ UserClickedASimpleFilter: filter }\" :filter=\"filter\" />\n</template>\n\n<script>\n  import { SimpleFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'SimpleFilterTest',\n    components: {\n      SimpleFilter\n    },\n    data() {\n      return {\n        filter: {\n          modelName: 'SimpleFilter',\n          selected: false,\n          id: 'category:shirts',\n          value: 'category:shirts',\n          facetId: 'category',\n          totalResults: 10\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Rendering an input\n\nYou can change the rendered control using the default slot. Note that because of the current Vue\nlimitations, you must only render one single root node in this slot. There you will receive all the\ndata and methods needed:\n\n```vue\n<template>\n  <SimpleFilter v-slot=\"{ filter, clickFilter, isDisabled, cssClasses }\" :filter=\"filter\">\n    <label :class=\"cssClasses\">\n      <input :checked=\"filter.selected\" type=\"checkbox\" @change=\"clickFilter\" />\n      {{ filter.label }}\n    </label>\n  </SimpleFilter>\n</template>\n\n<script>\n  import { SimpleFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'SimpleFilterTest',\n    components: {\n      SimpleFilter\n    },\n    data() {\n      return {\n        filter: {\n          modelName: 'SimpleFilter',\n          selected: false,\n          id: 'category:shirts',\n          value: 'category:shirts',\n          facetId: 'category',\n          label: 'Shirts',\n          totalResults: 10\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Changing default button content\n\nYou can change the content rendered by the default button using the `label` slot. There you will\nreceive the filter data.\n\n```vue\n<template>\n  <SimpleFilter :filter=\"filter\">\n    <template #label=\"{ filter }\">\n      <img :src=\"`imgs/filters/${filter.id}.png`\" />\n      <span>{{ filter.label }}</span>\n    </template>\n  </SimpleFilter>\n</template>\n\n<script>\n  import { SimpleFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'SimpleFilterTest',\n    components: {\n      SimpleFilter\n    },\n    data() {\n      return {\n        filter: {\n          modelName: 'SimpleFilter',\n          selected: false,\n          id: 'category:shirts',\n          value: 'category:shirts',\n          facetId: 'category',\n          label: 'Shirts',\n          totalResults: 10\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/facets/components/filters/simple-filter.vue_rollup-plugin-vue_script.vue.js

@@ -125,15 +125,15 @@ import __vue_component__ from './renderless-filter.vue.js';
  */
 let SimpleFilter = class SimpleFilter extends Vue {
     /**
-     * Additional events to emit when the filter is clicked.
+     * The {@link XEventsTypes | events} to emit.
      *
-     * @returns A dictionary with the events to be emitted when the filter is clicked, and its
-     * payload.
+     * @returns The events to emit when clicked.
      * @internal
      */
-    get clickEvents() {
+    get _clickEvents() {
         return {
-            UserClickedASimpleFilter: this.filter
+            UserClickedASimpleFilter: this.filter,
+            ...this.clickEvents
         };
     }
     /**
@@ -151,6 +151,9 @@ let SimpleFilter = class SimpleFilter extends Vue {
 __decorate([
     Prop({ required: true })
 ], SimpleFilter.prototype, "filter", void 0);
+__decorate([
+    Prop()
+], SimpleFilter.prototype, "clickEvents", void 0);
 SimpleFilter = __decorate([
     Component({
         components: { RenderlessFilter: __vue_component__ },

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

@@ -1 +1 @@
-{"version":3,"file":"simple-filter.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../../src/x-modules/facets/components/filters/simple-filter.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { SimpleFilter as SimpleFilterModel } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { xComponentMixin } from '../../../../components';\nimport { VueCSSClasses } from '../../../../utils/types';\nimport { XEventsTypes } from '../../../../wiring/events.types';\nimport { facetsXModule } from '../../x-module';\nimport RenderlessFilter from './renderless-filter.vue';\n\n/**\n * Renders a simple filter, emitting the needed events when clicked.\n *\n * @public\n */\n@Component({\n  components: { RenderlessFilter },\n  mixins: [xComponentMixin(facetsXModule)]\n})\nexport default class SimpleFilter extends Vue {\n  /** The filter data to render. */\n  @Prop({ required: true })\n  public filter!: SimpleFilterModel;\n\n  /**\n   * Additional events to emit when the filter is clicked.\n   *\n   * @returns A dictionary with the events to be emitted when the filter is clicked, and its\n   * payload.\n   * @internal\n   */\n  protected get clickEvents(): Partial<XEventsTypes> {\n    return {\n      UserClickedASimpleFilter: this.filter\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-simple-filter--is-selected': this.filter.selected\n    };\n  }\n}\n"],"names":["RenderlessFilter"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA;;;;;AASA,IAAqB,YAAY,GAAjC,MAAqB,YAAa,SAAQ,GAAG;;;;;;;;IAY3C,IAAc,WAAW;QACvB,OAAO;YACL,wBAAwB,EAAE,IAAI,CAAC,MAAM;SACtC,CAAC;KACH;;;;;;;IAQD,IAAc,UAAU;QACtB,OAAO;YACL,8BAA8B,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ;SACrD,CAAC;KACH;CACF,CAAA;AA1BC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;4CACS;AAHf,YAAY;IAJhC,SAAS,CAAC;QACT,UAAU,EAAE,oBAAEA,iBAAgB,EAAE;QAChC,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;KACzC,CAAC;GACmB,YAAY,CA6BhC;aA7BoB,YAAY;;;;"}
+{"version":3,"file":"simple-filter.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../../src/x-modules/facets/components/filters/simple-filter.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { SimpleFilter as SimpleFilterModel } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { xComponentMixin } from '../../../../components';\nimport { VueCSSClasses } from '../../../../utils/types';\nimport { XEventsTypes } from '../../../../wiring/events.types';\nimport { facetsXModule } from '../../x-module';\nimport RenderlessFilter from './renderless-filter.vue';\n\n/**\n * Renders a simple filter, emitting the needed events when clicked.\n *\n * @public\n */\n@Component({\n  components: { RenderlessFilter },\n  mixins: [xComponentMixin(facetsXModule)]\n})\nexport default class SimpleFilter extends Vue {\n  /** The filter data to render. */\n  @Prop({ required: true })\n  public filter!: SimpleFilterModel;\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      UserClickedASimpleFilter: 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-simple-filter--is-selected': this.filter.selected\n    };\n  }\n}\n"],"names":["RenderlessFilter"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA;;;;;AASA,IAAqB,YAAY,GAAjC,MAAqB,YAAa,SAAQ,GAAG;;;;;;;IAmB3C,IAAc,YAAY;QACxB,OAAO;YACL,wBAAwB,EAAE,IAAI,CAAC,MAAM;YACrC,GAAG,IAAI,CAAC,WAAW;SACpB,CAAC;KACH;;;;;;;IAQD,IAAc,UAAU;QACtB,OAAO;YACL,8BAA8B,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ;SACrD,CAAC;KACH;CACF,CAAA;AAlCC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;4CACS;AAQlC;IADC,IAAI,EAAE;iDACoC;AAXxB,YAAY;IAJhC,SAAS,CAAC;QACT,UAAU,EAAE,oBAAEA,iBAAgB,EAAE;QAChC,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;KACzC,CAAC;GACmB,YAAY,CAqChC;aArCoB,YAAY;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "3.0.0-alpha.91",
+  "version": "3.0.0-alpha.92",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -125,5 +125,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "ef73eb4b19269566873d0207fdf611b2c44e1ea5"
+  "gitHead": "e2f14ec7353d62834232ee677f7a1a1871583b16"
 }

package/report/x-components.api.json

@@ -18159,6 +18159,47 @@
               },
               "isStatic": false
             },
+            {
+              "kind": "Property",
+              "canonicalReference": "@empathyco/x-components!HierarchicalFilter#clickEvents:member",
+              "docComment": "/**\n * Additional events, with their payload, to emit when the filter is clicked.\n *\n * @public\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "clickEvents: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "Partial",
+                  "canonicalReference": "!Partial:type"
+                },
+                {
+                  "kind": "Content",
+                  "text": "<"
+                },
+                {
+                  "kind": "Reference",
+                  "text": "XEventsTypes",
+                  "canonicalReference": "@empathyco/x-components!XEventsTypes:interface"
+                },
+                {
+                  "kind": "Content",
+                  "text": ">"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "clickEvents",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 5
+              },
+              "isStatic": false
+            },
             {
               "kind": "Property",
               "canonicalReference": "@empathyco/x-components!HierarchicalFilter#filter:member",
@@ -26942,6 +26983,47 @@
           "releaseTag": "Public",
           "name": "NumberRangeFilter",
           "members": [
+            {
+              "kind": "Property",
+              "canonicalReference": "@empathyco/x-components!NumberRangeFilter#clickEvents:member",
+              "docComment": "/**\n * Additional events, with their payload, to emit when the filter is clicked.\n *\n * @public\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "clickEvents?: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "Partial",
+                  "canonicalReference": "!Partial:type"
+                },
+                {
+                  "kind": "Content",
+                  "text": "<"
+                },
+                {
+                  "kind": "Reference",
+                  "text": "XEventsTypes",
+                  "canonicalReference": "@empathyco/x-components!XEventsTypes:interface"
+                },
+                {
+                  "kind": "Content",
+                  "text": ">"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isOptional": true,
+              "releaseTag": "Public",
+              "name": "clickEvents",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 5
+              },
+              "isStatic": false
+            },
             {
               "kind": "Property",
               "canonicalReference": "@empathyco/x-components!NumberRangeFilter#filter:member",
@@ -41187,6 +41269,47 @@
           "releaseTag": "Public",
           "name": "SimpleFilter",
           "members": [
+            {
+              "kind": "Property",
+              "canonicalReference": "@empathyco/x-components!SimpleFilter#clickEvents:member",
+              "docComment": "/**\n * Additional events, with their payload, to emit when the filter is clicked.\n *\n * @public\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "clickEvents?: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "Partial",
+                  "canonicalReference": "!Partial:type"
+                },
+                {
+                  "kind": "Content",
+                  "text": "<"
+                },
+                {
+                  "kind": "Reference",
+                  "text": "XEventsTypes",
+                  "canonicalReference": "@empathyco/x-components!XEventsTypes:interface"
+                },
+                {
+                  "kind": "Content",
+                  "text": ">"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isOptional": true,
+              "releaseTag": "Public",
+              "name": "clickEvents",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 5
+              },
+              "isStatic": false
+            },
             {
               "kind": "Property",
               "canonicalReference": "@empathyco/x-components!SimpleFilter#filter:member",

package/report/x-components.api.md

@@ -1745,13 +1745,16 @@ export const HideIcon: {};
 // @public
 export class HierarchicalFilter extends Vue_2 {
     childrenAnimation?: Vue_2 | string;
+    clickEvents: Partial<XEventsTypes>;
     // @internal
-    protected get clickEvents(): Partial<XEventsTypes>;
+    protected get _clickEvents(): Partial<XEventsTypes>;
     // @internal
     protected get cssClasses(): VueCSSClasses;
     filter: HierarchicalFilter_2;
     // @internal
     filters: Record<Filter['id'], Filter>;
+    // @internal
+    protected getChildFilterClickEvents(childFilter: HierarchicalFilter_2): Partial<XEventsTypes>;
     // (undocumented)
     protected isFilterPartiallySelected(filter: HierarchicalFilter_2): boolean;
     // @internal
@@ -2501,8 +2504,9 @@ export const Nq4Icon: {};
 
 // @public
 export class NumberRangeFilter extends Vue_2 {
+    clickEvents?: Partial<XEventsTypes>;
     // @internal
-    protected get clickEvents(): Partial<XEventsTypes>;
+    protected get _clickEvents(): Partial<XEventsTypes>;
     // @internal
     protected get cssClasses(): VueCSSClasses;
     filter: NumberRangeFilter_2;
@@ -3875,8 +3879,9 @@ export const ShowIcon: {};
 
 // @public
 export class SimpleFilter extends Vue_2 {
+    clickEvents?: Partial<XEventsTypes>;
     // @internal
-    protected get clickEvents(): Partial<XEventsTypes>;
+    protected get _clickEvents(): Partial<XEventsTypes>;
     // @internal
     protected get cssClasses(): VueCSSClasses;
     filter: SimpleFilter_2;

package/types/x-modules/facets/components/filters/hierarchical-filter.vue.d.ts

@@ -19,13 +19,18 @@ export default class HierarchicalFilter extends Vue {
      */
     filters: Record<Filter['id'], Filter>;
     /**
-     * Additional events to emit when the filter is clicked.
+     * Additional events, with their payload, to emit when the filter is clicked.
      *
-     * @returns A dictionary with the events to be emitted when the filter is clicked, and its
-     * payload.
+     * @public
+     */
+    clickEvents: Partial<XEventsTypes>;
+    /**
+     * The {@link XEventsTypes | events} to emit.
+     *
+     * @returns The events to emit when clicked.
      * @internal
      */
-    protected get clickEvents(): Partial<XEventsTypes>;
+    protected get _clickEvents(): Partial<XEventsTypes>;
     /**
      * Dynamic CSS classes to apply to the component.
      *
@@ -33,6 +38,15 @@ export default class HierarchicalFilter extends Vue {
      * @internal
      */
     protected get cssClasses(): VueCSSClasses;
+    /**
+     * Gets the child filter click events, converting the payload of the events that have a
+     * {@link @empathyco/x-types#HierarchicalFilter} as payload to the corresponding child filter.
+     *
+     * @param childFilter - The child filter.
+     * @returns The events to emit when clicking a child.
+     * @internal
+     */
+    protected getChildFilterClickEvents(childFilter: HierarchicalFilterModel): Partial<XEventsTypes>;
     /**
      * Returns if the filter is partially selected, which means having more than one child filter
      * selected, but not every of them, or having at least one child filter partially selected.
@@ -46,7 +60,6 @@ export default class HierarchicalFilter extends Vue {
      * is empty it will return an empty array instead of inject the ones from the parent.
      *
      * @returns A list of filters.
-     *
      * @internal
      */
     protected get renderedChildrenFilters(): Filter[];

package/types/x-modules/facets/components/filters/hierarchical-filter.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hierarchical-filter.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../../src/x-modules/facets/components/filters/hierarchical-filter.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAsDA,OAAO,EAAE,MAAM,EAAE,kBAAkB,IAAI,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAC3F,OAAO,GAAG,MAAM,KAAK,CAAC;AAGtB,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAK/D;;;;GAIG;AAMH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,GAAG;IACjD,iCAAiC;IAE1B,MAAM,EAAG,uBAAuB,CAAC;IAExC,+DAA+D;IAExD,iBAAiB,CAAC,EAAE,GAAG,GAAG,MAAM,CAAC;IACxC;;;;OAIG;IAEI,OAAO,EAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,CAAC;IAE9C;;;;;;OAMG;IACH,SAAS,KAAK,WAAW,IAAI,OAAO,CAAC,YAAY,CAAC,CAIjD;IAED;;;;;OAKG;IACH,SAAS,KAAK,UAAU,IAAI,aAAa,CAMxC;IAED;;;;;;OAMG;IACH,SAAS,KAAK,mBAAmB,IAAI,OAAO,CAE3C;IAED;;;;;;;OAOG;IACH,SAAS,KAAK,uBAAuB,IAAI,MAAM,EAAE,CAEhD;IAED,SAAS,CAAC,yBAAyB,CAAC,MAAM,EAAE,uBAAuB,GAAG,OAAO;CAY9E"}
+{"version":3,"file":"hierarchical-filter.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../../src/x-modules/facets/components/filters/hierarchical-filter.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AA0DA,OAAO,EACL,MAAM,EACN,kBAAkB,IAAI,uBAAuB,EAE9C,MAAM,oBAAoB,CAAC;AAE5B,OAAO,GAAG,MAAM,KAAK,CAAC;AAGtB,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAK/D;;;;GAIG;AAMH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,GAAG;IACjD,iCAAiC;IAE1B,MAAM,EAAG,uBAAuB,CAAC;IAExC,+DAA+D;IAExD,iBAAiB,CAAC,EAAE,GAAG,GAAG,MAAM,CAAC;IACxC;;;;OAIG;IAEI,OAAO,EAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,CAAC;IAE9C;;;;OAIG;IAEI,WAAW,EAAG,OAAO,CAAC,YAAY,CAAC,CAAC;IAE3C;;;;;OAKG;IACH,SAAS,KAAK,YAAY,IAAI,OAAO,CAAC,YAAY,CAAC,CAKlD;IAED;;;;;OAKG;IACH,SAAS,KAAK,UAAU,IAAI,aAAa,CAMxC;IAED;;;;;;;OAOG;IACH,SAAS,CAAC,yBAAyB,CACjC,WAAW,EAAE,uBAAuB,GACnC,OAAO,CAAC,YAAY,CAAC;IAcxB;;;;;;OAMG;IACH,SAAS,KAAK,mBAAmB,IAAI,OAAO,CAE3C;IAED;;;;;;OAMG;IACH,SAAS,KAAK,uBAAuB,IAAI,MAAM,EAAE,CAEhD;IAED,SAAS,CAAC,yBAAyB,CAAC,MAAM,EAAE,uBAAuB,GAAG,OAAO;CAY9E"}

package/types/x-modules/facets/components/filters/number-range-filter.vue.d.ts

@@ -11,13 +11,18 @@ export default class NumberRangeFilter extends Vue {
     /** The filter data to render. */
     filter: NumberRangeFilterModel;
     /**
-     * Additional events to emit when the filter is clicked.
+     * Additional events, with their payload, to emit when the filter is clicked.
      *
-     * @returns A dictionary with the events to be emitted when the filter is clicked, and its
-     * payload.
+     * @public
+     */
+    clickEvents?: Partial<XEventsTypes>;
+    /**
+     * The {@link XEventsTypes | events} to emit.
+     *
+     * @returns The events to emit when clicked.
      * @internal
      */
-    protected get clickEvents(): Partial<XEventsTypes>;
+    protected get _clickEvents(): Partial<XEventsTypes>;
     /**
      * Dynamic CSS classes to apply to the component.
      *

package/types/x-modules/facets/components/filters/number-range-filter.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"number-range-filter.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../../src/x-modules/facets/components/filters/number-range-filter.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AA4CA,OAAO,GAAG,MAAM,KAAK,CAAC;AAEtB,OAAO,EAAE,iBAAiB,IAAI,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAEjF,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAI/D;;;;GAIG;AAKH,MAAM,CAAC,OAAO,OAAO,iBAAkB,SAAQ,GAAG;IAChD,iCAAiC;IAE1B,MAAM,EAAG,sBAAsB,CAAC;IAEvC;;;;;;OAMG;IACH,SAAS,KAAK,WAAW,IAAI,OAAO,CAAC,YAAY,CAAC,CAIjD;IAED;;;;;OAKG;IACH,SAAS,KAAK,UAAU,IAAI,aAAa,CAIxC;CACF"}
+{"version":3,"file":"number-range-filter.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../../src/x-modules/facets/components/filters/number-range-filter.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AA4CA,OAAO,GAAG,MAAM,KAAK,CAAC;AAEtB,OAAO,EAAE,iBAAiB,IAAI,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAEjF,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAI/D;;;;GAIG;AAKH,MAAM,CAAC,OAAO,OAAO,iBAAkB,SAAQ,GAAG;IAChD,iCAAiC;IAE1B,MAAM,EAAG,sBAAsB,CAAC;IAEvC;;;;OAIG;IAEI,WAAW,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAE3C;;;;;OAKG;IACH,SAAS,KAAK,YAAY,IAAI,OAAO,CAAC,YAAY,CAAC,CAKlD;IAED;;;;;OAKG;IACH,SAAS,KAAK,UAAU,IAAI,aAAa,CAIxC;CACF"}

package/types/x-modules/facets/components/filters/simple-filter.vue.d.ts

@@ -11,13 +11,18 @@ export default class SimpleFilter extends Vue {
     /** The filter data to render. */
     filter: SimpleFilterModel;
     /**
-     * Additional events to emit when the filter is clicked.
+     * Additional events, with their payload, to emit when the filter is clicked.
      *
-     * @returns A dictionary with the events to be emitted when the filter is clicked, and its
-     * payload.
+     * @public
+     */
+    clickEvents?: Partial<XEventsTypes>;
+    /**
+     * The {@link XEventsTypes | events} to emit.
+     *
+     * @returns The events to emit when clicked.
      * @internal
      */
-    protected get clickEvents(): Partial<XEventsTypes>;
+    protected get _clickEvents(): Partial<XEventsTypes>;
     /**
      * Dynamic CSS classes to apply to the component.
      *

package/types/x-modules/facets/components/filters/simple-filter.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"simple-filter.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../../src/x-modules/facets/components/filters/simple-filter.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AA4CA,OAAO,EAAE,YAAY,IAAI,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,GAAG,MAAM,KAAK,CAAC;AAGtB,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAI/D;;;;GAIG;AAKH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,GAAG;IAC3C,iCAAiC;IAE1B,MAAM,EAAG,iBAAiB,CAAC;IAElC;;;;;;OAMG;IACH,SAAS,KAAK,WAAW,IAAI,OAAO,CAAC,YAAY,CAAC,CAIjD;IAED;;;;;OAKG;IACH,SAAS,KAAK,UAAU,IAAI,aAAa,CAIxC;CACF"}
+{"version":3,"file":"simple-filter.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../../src/x-modules/facets/components/filters/simple-filter.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AA4CA,OAAO,EAAE,YAAY,IAAI,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,GAAG,MAAM,KAAK,CAAC;AAGtB,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAI/D;;;;GAIG;AAKH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,GAAG;IAC3C,iCAAiC;IAE1B,MAAM,EAAG,iBAAiB,CAAC;IAElC;;;;OAIG;IAEI,WAAW,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAE3C;;;;;OAKG;IACH,SAAS,KAAK,YAAY,IAAI,OAAO,CAAC,YAAY,CAAC,CAKlD;IAED;;;;;OAKG;IACH,SAAS,KAAK,UAAU,IAAI,aAAa,CAIxC;CACF"}