@empathyco/x-components 6.0.0-alpha.1 → 6.0.0-alpha.3

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

@@ -17,13 +17,12 @@ _default: import("vue").DefineComponent<{
 }, {
     cssClasses: import("vue").Ref<string | import("@empathyco/x-utils").Dictionary<boolean> | (string | import("@empathyco/x-utils").Dictionary<boolean>)[]>;
     toggle: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: BooleanConstructor;
         default: boolean;
     };
 }>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: boolean;

package/docs/API-reference/components/common/x-components.base-switch.md

@@ -19,7 +19,6 @@ prop, and emits a Vue event whenever the user clicks it.
 
 | Event name        | Properties | Description |
 | ----------------- | ---------- | ----------- |
-| change            |            |
 | update:modelValue |            |
 
 ## Events
@@ -34,7 +33,7 @@ _Try clicking it to see how it changes its state_
 
 ```vue live
 <template>
-  <BaseSwitch @change="value = !value" :modelValue="value" />
+  <BaseSwitch @update:modelValue="value = !value" :modelValue="value" />
 </template>
 
 <script>

package/js/components/base-switch.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-switch.vue.js","sources":["../../../src/components/base-switch.vue"],"sourcesContent":["<template>\n  <button\n    @click=\"toggle\"\n    :aria-checked=\"modelValue || undefined\"\n    :class=\"cssClasses\"\n    class=\"x-switch\"\n    role=\"switch\"\n  >\n    <div class=\"x-switch__handle\" />\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, ref } from 'vue';\n  import { VueCSSClasses } from '../utils/types';\n\n  /**\n   * Basic switch component to handle boolean values. This component receives\n   * its selected state using a prop, and emits a Vue event whenever the user\n   * clicks it.\n   *\n   * @public\n   */\n\n  export default defineComponent({\n    name: 'BaseSwitch',\n    /**\n     * The selected value of the switch.\n     *\n     * @public\n     */\n    props: {\n      modelValue: {\n        type: Boolean,\n        default: false\n      }\n    },\n    emits: ['change', 'update:modelValue'],\n    setup(props, { emit }) {\n      /**\n       * Dynamic CSS classes to add to the switch component\n       * depending on its internal state.\n       *\n       * @returns A boolean dictionary with dynamic CSS classes.\n       * @internal\n       */\n      const cssClasses = ref<VueCSSClasses>({\n        'x-switch--is-selected x-selected': props.modelValue\n      });\n\n      /**\n       * Emits a change and input event with the desired value of the switch.\n       *\n       * @internal\n       */\n      const toggle = (): void => {\n        const newValue = !props.modelValue;\n        cssClasses.value = {\n          'x-switch--is-selected': newValue,\n          'x-selected': newValue\n        };\n\n        emit('update:modelValue', newValue);\n        emit('change', newValue);\n      };\n\n      return {\n        cssClasses,\n        toggle\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-switch {\n    --x-switch-height: 16px;\n    --x-switch-width: calc(2 * (var(--x-switch-height)) + 2 * var(--x-switch-padding));\n    --x-switch-background: #b3b3b3;\n    --x-switch-padding: 2px;\n    --x-switch-handle-size: var(--x-switch-height);\n    box-sizing: content-box;\n    height: var(--x-switch-height);\n    padding: var(--x-switch-padding);\n    border-radius: 99999px;\n    background: var(--x-switch-background);\n    width: var(--x-switch-width);\n    border: none;\n    transition: 0.25s ease-out background-color;\n    cursor: pointer;\n  }\n\n  .x-switch__handle {\n    background: #ffffff;\n    border-radius: 50%;\n    height: var(--x-switch-handle-size);\n    width: var(--x-switch-handle-size);\n    transition: 0.25s ease-out transform;\n    transform: translateX(var(--x-switch-translate-x, 0%));\n  }\n\n  .x-switch--is-selected {\n    --x-switch-translate-x: calc(var(--x-switch-padding) + var(--x-switch-width) / 2);\n    --x-switch-background: #1a1a1a;\n  }\n\n  .x-switch--sm {\n    --x-switch-height: 12px;\n  }\n\n  .x-switch--lg {\n    --x-switch-height: 24px;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n  <BaseSwitch @change=\"value = !value\" :modelValue=\"value\" />\n</template>\n\n<script>\n  import { BaseSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSwitchDemo',\n    components: {\n      BaseSwitch\n    },\n    data() {\n      return {\n        value: false\n      };\n    }\n  };\n</script>\n```\n\nThe switch component also supports using the `v-model` directive, to automatically handle its state\nchange:\n\n```vue live\n<template>\n  <BaseSwitch v-model=\"value\" />\n</template>\n\n<script>\n  import { BaseSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSwitchDemo',\n    components: {\n      BaseSwitch\n    },\n    data() {\n      return {\n        value: false\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_pushScopeId","_popScopeId","_createElementVNode","_openBlock","cssClasses","_normalizeClass"],"mappings":";;;;;AAQI,MAAA,YAAA,GAAA,CAAA,CAAA,MAAAA,WAAA,CAAA,iBAAA,CAAA,EAAA,CAAA,GAAA,CAAA,EAAA,EAAAC,UAAA,EAAA,EAAA,CAAA,CAAA,CAAA;;MAAA,UAAgC,mBAAA,YAAA,CAAA,sBAAAC,kBAAA;AAAA,EAAA,KAAA;AAAA,EAAA,EAAA,KAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,IAAA;AAAA,EAAA,CAAA,CAAA;AAAA;AAAA,CAAA,CAAA,CAAA;;;;AAN/B,SAAA,WAAA,CAAK,IAAE,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AACP,EAAA,OAAAC,SAAA,uBAA4B,QAAS,EAAA;AAAA,IACrC,OAJL,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAIYC,CAAU,CAAA,GAAA,CAAA,GAAA,IAAA,KACZ,IAAU,CAAA,MAAA,IAAA,IAAA,CAAA,MAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IAChB,cAAa,EAAA,IAAA,CAAA,UAAA,IAAA,KAAA,CAAA;AAAA,IANjB,KAAA,EAAAC,cAAA,CAAA,CAAA,IAAA,CAAA,UAAA,EAAA,UAAA,CAAA,CAAA;AAAA,IAAA,IAAA,EAAA,QAAA;;;;;;;"}
+{"version":3,"file":"base-switch.vue.js","sources":["../../../src/components/base-switch.vue"],"sourcesContent":["<template>\n  <button\n    @click=\"toggle\"\n    :aria-checked=\"modelValue || undefined\"\n    :class=\"cssClasses\"\n    class=\"x-switch\"\n    role=\"switch\"\n  >\n    <div class=\"x-switch__handle\" />\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, ref } from 'vue';\n  import { VueCSSClasses } from '../utils/types';\n\n  /**\n   * Basic switch component to handle boolean values. This component receives\n   * its selected state using a prop, and emits a Vue event whenever the user\n   * clicks it.\n   *\n   * @public\n   */\n\n  export default defineComponent({\n    name: 'BaseSwitch',\n    /**\n     * The selected value of the switch.\n     *\n     * @public\n     */\n    props: {\n      modelValue: {\n        type: Boolean,\n        default: false\n      }\n    },\n    emits: ['update:modelValue'],\n    setup(props, { emit }) {\n      /**\n       * Dynamic CSS classes to add to the switch component\n       * depending on its internal state.\n       *\n       * @returns A boolean dictionary with dynamic CSS classes.\n       * @internal\n       */\n      const cssClasses = ref<VueCSSClasses>({\n        'x-switch--is-selected x-selected': props.modelValue\n      });\n\n      /**\n       * Emits an event with the new value of the switch.\n       *\n       * @internal\n       */\n      const toggle = (): void => {\n        const newValue = !props.modelValue;\n        cssClasses.value = {\n          'x-switch--is-selected': newValue,\n          'x-selected': newValue\n        };\n\n        emit('update:modelValue', newValue);\n      };\n\n      return {\n        cssClasses,\n        toggle\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-switch {\n    --x-switch-height: 16px;\n    --x-switch-width: calc(2 * (var(--x-switch-height)) + 2 * var(--x-switch-padding));\n    --x-switch-background: #b3b3b3;\n    --x-switch-padding: 2px;\n    --x-switch-handle-size: var(--x-switch-height);\n    box-sizing: content-box;\n    height: var(--x-switch-height);\n    padding: var(--x-switch-padding);\n    border-radius: 99999px;\n    background: var(--x-switch-background);\n    width: var(--x-switch-width);\n    border: none;\n    transition: 0.25s ease-out background-color;\n    cursor: pointer;\n  }\n\n  .x-switch__handle {\n    background: #ffffff;\n    border-radius: 50%;\n    height: var(--x-switch-handle-size);\n    width: var(--x-switch-handle-size);\n    transition: 0.25s ease-out transform;\n    transform: translateX(var(--x-switch-translate-x, 0%));\n  }\n\n  .x-switch--is-selected {\n    --x-switch-translate-x: calc(var(--x-switch-padding) + var(--x-switch-width) / 2);\n    --x-switch-background: #1a1a1a;\n  }\n\n  .x-switch--sm {\n    --x-switch-height: 12px;\n  }\n\n  .x-switch--lg {\n    --x-switch-height: 24px;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n  <BaseSwitch @update:modelValue=\"value = !value\" :modelValue=\"value\" />\n</template>\n\n<script>\n  import { BaseSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSwitchDemo',\n    components: {\n      BaseSwitch\n    },\n    data() {\n      return {\n        value: false\n      };\n    }\n  };\n</script>\n```\n\nThe switch component also supports using the `v-model` directive, to automatically handle its state\nchange:\n\n```vue live\n<template>\n  <BaseSwitch v-model=\"value\" />\n</template>\n\n<script>\n  import { BaseSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSwitchDemo',\n    components: {\n      BaseSwitch\n    },\n    data() {\n      return {\n        value: false\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_pushScopeId","_popScopeId","_createElementVNode","_openBlock","cssClasses","_normalizeClass"],"mappings":";;;;;AAQI,MAAA,YAAA,GAAA,CAAA,CAAA,MAAAA,WAAA,CAAA,iBAAA,CAAA,EAAA,CAAA,GAAA,CAAA,EAAA,EAAAC,UAAA,EAAA,EAAA,CAAA,CAAA,CAAA;;MAAA,UAAgC,mBAAA,YAAA,CAAA,sBAAAC,kBAAA;AAAA,EAAA,KAAA;AAAA,EAAA,EAAA,KAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,IAAA;AAAA,EAAA,CAAA,CAAA;AAAA;AAAA,CAAA,CAAA,CAAA;;;;AAN/B,SAAA,WAAA,CAAK,IAAE,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AACP,EAAA,OAAAC,SAAA,uBAA4B,QAAS,EAAA;AAAA,IACrC,OAJL,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAIYC,CAAU,CAAA,GAAA,CAAA,GAAA,IAAA,KACZ,IAAU,CAAA,MAAA,IAAA,IAAA,CAAA,MAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IAChB,cAAa,EAAA,IAAA,CAAA,UAAA,IAAA,KAAA,CAAA;AAAA,IANjB,KAAA,EAAAC,cAAA,CAAA,CAAA,IAAA,CAAA,UAAA,EAAA,UAAA,CAAA,CAAA;AAAA,IAAA,IAAA,EAAA,QAAA;;;;;;;"}

package/js/components/base-switch.vue2.js

@@ -20,7 +20,7 @@ var _sfc_main = defineComponent({
             default: false
         }
     },
-    emits: ['change', 'update:modelValue'],
+    emits: ['update:modelValue'],
     setup(props, { emit }) {
         /**
          * Dynamic CSS classes to add to the switch component
@@ -33,7 +33,7 @@ var _sfc_main = defineComponent({
             'x-switch--is-selected x-selected': props.modelValue
         });
         /**
-         * Emits a change and input event with the desired value of the switch.
+         * Emits an event with the new value of the switch.
          *
          * @internal
          */
@@ -44,7 +44,6 @@ var _sfc_main = defineComponent({
                 'x-selected': newValue
             };
             emit('update:modelValue', newValue);
-            emit('change', newValue);
         };
         return {
             cssClasses,

package/js/components/base-switch.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-switch.vue2.js","sources":["../../../src/components/base-switch.vue"],"sourcesContent":["<template>\n  <button\n    @click=\"toggle\"\n    :aria-checked=\"modelValue || undefined\"\n    :class=\"cssClasses\"\n    class=\"x-switch\"\n    role=\"switch\"\n  >\n    <div class=\"x-switch__handle\" />\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, ref } from 'vue';\n  import { VueCSSClasses } from '../utils/types';\n\n  /**\n   * Basic switch component to handle boolean values. This component receives\n   * its selected state using a prop, and emits a Vue event whenever the user\n   * clicks it.\n   *\n   * @public\n   */\n\n  export default defineComponent({\n    name: 'BaseSwitch',\n    /**\n     * The selected value of the switch.\n     *\n     * @public\n     */\n    props: {\n      modelValue: {\n        type: Boolean,\n        default: false\n      }\n    },\n    emits: ['change', 'update:modelValue'],\n    setup(props, { emit }) {\n      /**\n       * Dynamic CSS classes to add to the switch component\n       * depending on its internal state.\n       *\n       * @returns A boolean dictionary with dynamic CSS classes.\n       * @internal\n       */\n      const cssClasses = ref<VueCSSClasses>({\n        'x-switch--is-selected x-selected': props.modelValue\n      });\n\n      /**\n       * Emits a change and input event with the desired value of the switch.\n       *\n       * @internal\n       */\n      const toggle = (): void => {\n        const newValue = !props.modelValue;\n        cssClasses.value = {\n          'x-switch--is-selected': newValue,\n          'x-selected': newValue\n        };\n\n        emit('update:modelValue', newValue);\n        emit('change', newValue);\n      };\n\n      return {\n        cssClasses,\n        toggle\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-switch {\n    --x-switch-height: 16px;\n    --x-switch-width: calc(2 * (var(--x-switch-height)) + 2 * var(--x-switch-padding));\n    --x-switch-background: #b3b3b3;\n    --x-switch-padding: 2px;\n    --x-switch-handle-size: var(--x-switch-height);\n    box-sizing: content-box;\n    height: var(--x-switch-height);\n    padding: var(--x-switch-padding);\n    border-radius: 99999px;\n    background: var(--x-switch-background);\n    width: var(--x-switch-width);\n    border: none;\n    transition: 0.25s ease-out background-color;\n    cursor: pointer;\n  }\n\n  .x-switch__handle {\n    background: #ffffff;\n    border-radius: 50%;\n    height: var(--x-switch-handle-size);\n    width: var(--x-switch-handle-size);\n    transition: 0.25s ease-out transform;\n    transform: translateX(var(--x-switch-translate-x, 0%));\n  }\n\n  .x-switch--is-selected {\n    --x-switch-translate-x: calc(var(--x-switch-padding) + var(--x-switch-width) / 2);\n    --x-switch-background: #1a1a1a;\n  }\n\n  .x-switch--sm {\n    --x-switch-height: 12px;\n  }\n\n  .x-switch--lg {\n    --x-switch-height: 24px;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n  <BaseSwitch @change=\"value = !value\" :modelValue=\"value\" />\n</template>\n\n<script>\n  import { BaseSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSwitchDemo',\n    components: {\n      BaseSwitch\n    },\n    data() {\n      return {\n        value: false\n      };\n    }\n  };\n</script>\n```\n\nThe switch component also supports using the `v-model` directive, to automatically handle its state\nchange:\n\n```vue live\n<template>\n  <BaseSwitch v-model=\"value\" />\n</template>\n\n<script>\n  import { BaseSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSwitchDemo',\n    components: {\n      BaseSwitch\n    },\n    data() {\n      return {\n        value: false\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;AAgBE;;;;;;AAME;AAEF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,YAAY;AAClB;;;;AAIE;AACF,IAAA,KAAK,EAAE;AACL,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAI;AACf,SAAA;AACD,KAAA;AACD,IAAA,KAAK,EAAE,CAAC,QAAQ,EAAE,mBAAmB,CAAC;AACtC,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,IAAG,EAAG,EAAA;AACnB;;;;;;AAME;QACF,MAAM,aAAa,GAAG,CAAgB;YACpC,kCAAkC,EAAE,KAAK,CAAC,UAAS;AACpD,SAAA,CAAC,CAAA;AAEF;;;;AAIE;QACF,MAAM,SAAS,MAAY;AACzB,YAAA,MAAM,QAAO,GAAI,CAAC,KAAK,CAAC,UAAU,CAAA;YAClC,UAAU,CAAC,QAAQ;AACjB,gBAAA,uBAAuB,EAAE,QAAQ;AACjC,gBAAA,YAAY,EAAE,QAAO;aACtB,CAAA;AAED,YAAA,IAAI,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAAA;AACnC,YAAA,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;AAC1B,SAAC,CAAA;QAED,OAAO;YACL,UAAU;YACV,MAAK;SACN,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"base-switch.vue2.js","sources":["../../../src/components/base-switch.vue"],"sourcesContent":["<template>\n  <button\n    @click=\"toggle\"\n    :aria-checked=\"modelValue || undefined\"\n    :class=\"cssClasses\"\n    class=\"x-switch\"\n    role=\"switch\"\n  >\n    <div class=\"x-switch__handle\" />\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, ref } from 'vue';\n  import { VueCSSClasses } from '../utils/types';\n\n  /**\n   * Basic switch component to handle boolean values. This component receives\n   * its selected state using a prop, and emits a Vue event whenever the user\n   * clicks it.\n   *\n   * @public\n   */\n\n  export default defineComponent({\n    name: 'BaseSwitch',\n    /**\n     * The selected value of the switch.\n     *\n     * @public\n     */\n    props: {\n      modelValue: {\n        type: Boolean,\n        default: false\n      }\n    },\n    emits: ['update:modelValue'],\n    setup(props, { emit }) {\n      /**\n       * Dynamic CSS classes to add to the switch component\n       * depending on its internal state.\n       *\n       * @returns A boolean dictionary with dynamic CSS classes.\n       * @internal\n       */\n      const cssClasses = ref<VueCSSClasses>({\n        'x-switch--is-selected x-selected': props.modelValue\n      });\n\n      /**\n       * Emits an event with the new value of the switch.\n       *\n       * @internal\n       */\n      const toggle = (): void => {\n        const newValue = !props.modelValue;\n        cssClasses.value = {\n          'x-switch--is-selected': newValue,\n          'x-selected': newValue\n        };\n\n        emit('update:modelValue', newValue);\n      };\n\n      return {\n        cssClasses,\n        toggle\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-switch {\n    --x-switch-height: 16px;\n    --x-switch-width: calc(2 * (var(--x-switch-height)) + 2 * var(--x-switch-padding));\n    --x-switch-background: #b3b3b3;\n    --x-switch-padding: 2px;\n    --x-switch-handle-size: var(--x-switch-height);\n    box-sizing: content-box;\n    height: var(--x-switch-height);\n    padding: var(--x-switch-padding);\n    border-radius: 99999px;\n    background: var(--x-switch-background);\n    width: var(--x-switch-width);\n    border: none;\n    transition: 0.25s ease-out background-color;\n    cursor: pointer;\n  }\n\n  .x-switch__handle {\n    background: #ffffff;\n    border-radius: 50%;\n    height: var(--x-switch-handle-size);\n    width: var(--x-switch-handle-size);\n    transition: 0.25s ease-out transform;\n    transform: translateX(var(--x-switch-translate-x, 0%));\n  }\n\n  .x-switch--is-selected {\n    --x-switch-translate-x: calc(var(--x-switch-padding) + var(--x-switch-width) / 2);\n    --x-switch-background: #1a1a1a;\n  }\n\n  .x-switch--sm {\n    --x-switch-height: 12px;\n  }\n\n  .x-switch--lg {\n    --x-switch-height: 24px;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n  <BaseSwitch @update:modelValue=\"value = !value\" :modelValue=\"value\" />\n</template>\n\n<script>\n  import { BaseSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSwitchDemo',\n    components: {\n      BaseSwitch\n    },\n    data() {\n      return {\n        value: false\n      };\n    }\n  };\n</script>\n```\n\nThe switch component also supports using the `v-model` directive, to automatically handle its state\nchange:\n\n```vue live\n<template>\n  <BaseSwitch v-model=\"value\" />\n</template>\n\n<script>\n  import { BaseSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSwitchDemo',\n    components: {\n      BaseSwitch\n    },\n    data() {\n      return {\n        value: false\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;AAgBE;;;;;;AAME;AAEF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,YAAY;AAClB;;;;AAIE;AACF,IAAA,KAAK,EAAE;AACL,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAI;AACf,SAAA;AACD,KAAA;IACD,KAAK,EAAE,CAAC,mBAAmB,CAAC;AAC5B,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,IAAG,EAAG,EAAA;AACnB;;;;;;AAME;QACF,MAAM,aAAa,GAAG,CAAgB;YACpC,kCAAkC,EAAE,KAAK,CAAC,UAAS;AACpD,SAAA,CAAC,CAAA;AAEF;;;;AAIE;QACF,MAAM,SAAS,MAAY;AACzB,YAAA,MAAM,QAAO,GAAI,CAAC,KAAK,CAAC,UAAU,CAAA;YAClC,UAAU,CAAC,QAAQ;AACjB,gBAAA,uBAAuB,EAAE,QAAQ;AACjC,gBAAA,YAAY,EAAE,QAAO;aACtB,CAAA;AAED,YAAA,IAAI,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAAA;AACrC,SAAC,CAAA;QAED,OAAO;YACL,UAAU;YACV,MAAK;SACN,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

package/js/components/scroll/use-scroll.js

@@ -67,9 +67,9 @@ function useScroll(props, { emit }, scrollEl) {
      */
     const storeScrollData = () => {
         if (scrollEl.value) {
-            currentPosition.value = scrollEl.value.scrollTop;
             scrollHeight.value = scrollEl.value.scrollHeight;
             clientHeight.value = scrollEl.value.clientHeight;
+            currentPosition.value = scrollEl.value.scrollTop;
         }
     };
     /**

package/js/components/scroll/use-scroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-scroll.js","sources":["../../../../src/components/scroll/use-scroll.ts"],"sourcesContent":["import { computed, nextTick, onMounted, Ref, ref, SetupContext, watch } from 'vue';\nimport { isArray } from '@empathyco/x-utils';\nimport { XEvent } from '../../wiring/events.types';\nimport { throttle } from '../../utils/throttle';\nimport { use$x } from '../../composables/use-$x';\nimport { ScrollDirection } from './scroll.types';\n\n/**\n * Composable to share Scroll logic.\n *\n * @param props - Composable props.\n * @param context - Component setup context.\n * @param scrollEl - The scrolling container reference.\n * @returns A throttled version of the function to store the scroll data.\n * @public\n */\nexport function useScroll(\n  props: {\n    /**\n     * Distance to the end of the scroll that when reached will emit the\n     * `scroll:about-to-end` event.\n     *\n     * @public\n     */\n    distanceToBottom: number;\n    /**\n     * Positive vertical distance to still consider that the element is the first one visible.\n     * For example, if set to 100, after scrolling 100 pixels, the first rendered element\n     * will still be considered the first one.\n     */\n    firstElementThresholdPx: number;\n    /**\n     * Time duration to ignore the subsequent scroll events after an emission.\n     * Higher values will decrease events precision but can prevent performance issues.\n     *\n     * @public\n     */\n    throttleMs: number;\n    /**\n     * If true (default), sets the scroll position to the top when certain events are emitted.\n     *\n     * @public\n     */\n    resetOnChange: boolean;\n    /**\n     * List of events that should reset the scroll when emitted.\n     *\n     * @public\n     */\n    resetOn: XEvent | XEvent[];\n  },\n  { emit }: SetupContext<any>,\n  scrollEl: Ref<HTMLElement | undefined>\n) {\n  /**\n   * Property for getting the client height of scroll.\n   *\n   * @internal\n   */\n  const clientHeight = ref(0);\n\n  /**\n   * Property for getting the current position of scroll.\n   *\n   * @internal\n   */\n  const currentPosition = ref(0);\n\n  /**\n   * Property for getting the previous position of scroll.\n   *\n   * @internal\n   */\n  const previousPosition = ref(0);\n\n  /**\n   * Property for getting the scroll height.\n   *\n   * @internal\n   */\n  const scrollHeight = ref(0);\n  /**\n   * Flag to know if the property clientHeight is changing or gets the final value.\n   *\n   * @internal\n   */\n  const isClientHeightChanging = ref(false);\n\n  /**\n   * Property for setting the direction of scroll.\n   *\n   * @internal\n   */\n  const scrollDirection: Ref<ScrollDirection> = ref('UP');\n\n  /**\n   * Restores the clientHeight flag when clientHeight property stops changing.\n   * Also sets a new previous position, before update the current one.\n   *\n   * @internal\n   */\n  const restoreClientHeightFlag = (): void => {\n    isClientHeightChanging.value = false;\n    previousPosition.value = currentPosition.value;\n  };\n\n  const throtteledCall = throttle(restoreClientHeightFlag, 100);\n\n  /**\n   * Updates scroll related properties.\n   *\n   * @internal\n   */\n  const storeScrollData = () => {\n    if (scrollEl.value) {\n      currentPosition.value = scrollEl.value.scrollTop;\n      scrollHeight.value = scrollEl.value.scrollHeight;\n      clientHeight.value = scrollEl.value.clientHeight;\n    }\n  };\n\n  /**\n   * Throttled version of the function that stores the DOM scroll related properties.\n   * The duration of the throttle is configured through the `throttleMs` prop passed as parameter.\n   *\n   * @returns A throttled version of the function to store the scroll data.\n   * @internal\n   */\n  const throttledStoreScrollData = computed(() => throttle(storeScrollData, props.throttleMs));\n\n  /**\n   * Returns end position of scroll.\n   *\n   * @returns A number for knowing end position of scroll.\n   * @internal\n   */\n  const scrollEndPosition = computed(() => scrollHeight.value - clientHeight.value);\n\n  /**\n   * Returns distance missing to endPosition position.\n   *\n   * @returns A number for knowing the distance missing to endPosition position.\n   * @internal\n   */\n  const distanceToEnd = computed(() => scrollEndPosition.value - currentPosition.value);\n\n  /**\n   * Returns `true` when there is no more content to scroll.\n   *\n   * @returns A boolean for knowing if the user scrolls to the end.\n   * @internal\n   */\n  const hasScrollReachedEnd = computed(() => currentPosition.value === scrollEndPosition.value);\n\n  /**\n   * Returns `true` when the scroll is at the initial position.\n   *\n   * @returns A boolean for knowing if the user scrolls to the start.\n   * @internal\n   */\n  const hasScrollReachedStart = computed(() => currentPosition.value === 0);\n\n  /**\n   * Returns `true` when the amount of pixels scrolled is greater than\n   * the `distanceToBottom` prop passed as parameter.\n   *\n   * @returns A boolean for knowing if the user is about to reaching to the end.\n   * @internal\n   */\n  const hasScrollAlmostReachedEnd = computed(\n    () => !hasScrollReachedStart.value && props.distanceToBottom > distanceToEnd.value\n  );\n\n  onMounted(() => {\n    nextTick().then(() => {\n      if (!scrollEl.value) {\n        // TODO Replace with Empathy's logger\n        // eslint-disable-next-line no-console\n        console.warn(\n          '[useScroll]',\n          // eslint-disable-next-line max-len\n          'Components using this composable must pass `scrollEl` as the HTML node that is scrolling.'\n        );\n      } else {\n        storeScrollData();\n      }\n    });\n  });\n\n  /**\n   * Change the isClientHeightChanging flag when the property clientHeight is changing and\n   * calls throttleledCall method.\n   *\n   * @internal\n   */\n  watch(\n    clientHeight,\n    () => {\n      isClientHeightChanging.value = true;\n\n      throtteledCall();\n    },\n    { immediate: true }\n  );\n\n  /**\n   * Emits the `scroll` event.\n   *\n   * @param _newScrollPosition - The new position of scroll.\n   * @param oldScrollPosition - The old position of scroll.\n   * @internal\n   */\n  watch(currentPosition, (_newScrollPosition: number, oldScrollPosition: number) => {\n    emit('scroll', currentPosition.value);\n    previousPosition.value = oldScrollPosition;\n  });\n\n  /**\n   * Sets direction of scroll based in {@link ScrollDirection} when the current position\n   * has changed.\n   *\n   * @internal\n   */\n  watch(currentPosition, () => {\n    if (!isClientHeightChanging.value && currentPosition.value !== previousPosition.value) {\n      scrollDirection.value = currentPosition.value > previousPosition.value ? 'DOWN' : 'UP';\n    }\n  });\n\n  /**\n   * Emits the 'scroll:almost-at-end' event when the user is about to reach to end.\n   *\n   * @param isScrollAlmostAtEnd - For knowing if the user is about to reach to end.\n   * @internal\n   */\n  watch(hasScrollReachedStart, (isScrollAtStart: boolean) => {\n    emit('scroll:at-start', isScrollAtStart);\n  });\n\n  /**\n   * Sets direction of scroll based in {@link ScrollDirection} when the current position\n   * has changed.\n   *\n   * @internal\n   */\n  watch(hasScrollAlmostReachedEnd, (isScrollAlmostAtEnd: boolean) => {\n    emit('scroll:almost-at-end', isScrollAlmostAtEnd);\n  });\n\n  /**\n   * Emits the 'scroll:at-end' event when the user reaches the end.\n   *\n   * @param isScrollAtEnd - For knowing if the user reaches at end.\n   * @internal\n   */\n  watch(hasScrollReachedEnd, (isScrollAtEnd: boolean) => {\n    emit('scroll:at-end', isScrollAtEnd);\n  });\n\n  /**\n   * Emits the `scroll:direction-change` event when the scrolling direction has changed.\n   *\n   * @param direction - The new direction of scroll.\n   * @internal\n   */\n  watch(scrollDirection, (direction: ScrollDirection) => {\n    if (!isClientHeightChanging.value) {\n      emit('scroll:direction-change', direction);\n    }\n  });\n\n  /**\n   * Resets the scroll position.\n   *\n   * @internal\n   */\n  const $x = use$x();\n  const resetOnEvents = isArray(props.resetOn) ? props.resetOn : [props.resetOn];\n  resetOnEvents.forEach(event =>\n    $x.on(event, false).subscribe(() =>\n      nextTick().then(() => {\n        if (props.resetOnChange) {\n          scrollEl.value?.scrollTo({ top: 0 });\n        }\n      })\n    )\n  );\n\n  return { throttledStoreScrollData };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"use-scroll.js","sources":["../../../../src/components/scroll/use-scroll.ts"],"sourcesContent":["import { computed, nextTick, onMounted, Ref, ref, SetupContext, watch } from 'vue';\nimport { isArray } from '@empathyco/x-utils';\nimport { XEvent } from '../../wiring/events.types';\nimport { throttle } from '../../utils/throttle';\nimport { use$x } from '../../composables/use-$x';\nimport { ScrollDirection } from './scroll.types';\n\n/**\n * Composable to share Scroll logic.\n *\n * @param props - Composable props.\n * @param context - Component setup context.\n * @param scrollEl - The scrolling container reference.\n * @returns A throttled version of the function to store the scroll data.\n * @public\n */\nexport function useScroll(\n  props: {\n    /**\n     * Distance to the end of the scroll that when reached will emit the\n     * `scroll:about-to-end` event.\n     *\n     * @public\n     */\n    distanceToBottom: number;\n    /**\n     * Positive vertical distance to still consider that the element is the first one visible.\n     * For example, if set to 100, after scrolling 100 pixels, the first rendered element\n     * will still be considered the first one.\n     */\n    firstElementThresholdPx: number;\n    /**\n     * Time duration to ignore the subsequent scroll events after an emission.\n     * Higher values will decrease events precision but can prevent performance issues.\n     *\n     * @public\n     */\n    throttleMs: number;\n    /**\n     * If true (default), sets the scroll position to the top when certain events are emitted.\n     *\n     * @public\n     */\n    resetOnChange: boolean;\n    /**\n     * List of events that should reset the scroll when emitted.\n     *\n     * @public\n     */\n    resetOn: XEvent | XEvent[];\n  },\n  { emit }: SetupContext<any>,\n  scrollEl: Ref<HTMLElement | undefined>\n) {\n  /**\n   * Property for getting the client height of scroll.\n   *\n   * @internal\n   */\n  const clientHeight = ref(0);\n\n  /**\n   * Property for getting the current position of scroll.\n   *\n   * @internal\n   */\n  const currentPosition = ref(0);\n\n  /**\n   * Property for getting the previous position of scroll.\n   *\n   * @internal\n   */\n  const previousPosition = ref(0);\n\n  /**\n   * Property for getting the scroll height.\n   *\n   * @internal\n   */\n  const scrollHeight = ref(0);\n  /**\n   * Flag to know if the property clientHeight is changing or gets the final value.\n   *\n   * @internal\n   */\n  const isClientHeightChanging = ref(false);\n\n  /**\n   * Property for setting the direction of scroll.\n   *\n   * @internal\n   */\n  const scrollDirection: Ref<ScrollDirection> = ref('UP');\n\n  /**\n   * Restores the clientHeight flag when clientHeight property stops changing.\n   * Also sets a new previous position, before update the current one.\n   *\n   * @internal\n   */\n  const restoreClientHeightFlag = (): void => {\n    isClientHeightChanging.value = false;\n    previousPosition.value = currentPosition.value;\n  };\n\n  const throtteledCall = throttle(restoreClientHeightFlag, 100);\n\n  /**\n   * Updates scroll related properties.\n   *\n   * @internal\n   */\n  const storeScrollData = () => {\n    if (scrollEl.value) {\n      scrollHeight.value = scrollEl.value.scrollHeight;\n      clientHeight.value = scrollEl.value.clientHeight;\n      currentPosition.value = scrollEl.value.scrollTop;\n    }\n  };\n\n  /**\n   * Throttled version of the function that stores the DOM scroll related properties.\n   * The duration of the throttle is configured through the `throttleMs` prop passed as parameter.\n   *\n   * @returns A throttled version of the function to store the scroll data.\n   * @internal\n   */\n  const throttledStoreScrollData = computed(() => throttle(storeScrollData, props.throttleMs));\n\n  /**\n   * Returns end position of scroll.\n   *\n   * @returns A number for knowing end position of scroll.\n   * @internal\n   */\n  const scrollEndPosition = computed(() => scrollHeight.value - clientHeight.value);\n\n  /**\n   * Returns distance missing to endPosition position.\n   *\n   * @returns A number for knowing the distance missing to endPosition position.\n   * @internal\n   */\n  const distanceToEnd = computed(() => scrollEndPosition.value - currentPosition.value);\n\n  /**\n   * Returns `true` when there is no more content to scroll.\n   *\n   * @returns A boolean for knowing if the user scrolls to the end.\n   * @internal\n   */\n  const hasScrollReachedEnd = computed(() => currentPosition.value === scrollEndPosition.value);\n\n  /**\n   * Returns `true` when the scroll is at the initial position.\n   *\n   * @returns A boolean for knowing if the user scrolls to the start.\n   * @internal\n   */\n  const hasScrollReachedStart = computed(() => currentPosition.value === 0);\n\n  /**\n   * Returns `true` when the amount of pixels scrolled is greater than\n   * the `distanceToBottom` prop passed as parameter.\n   *\n   * @returns A boolean for knowing if the user is about to reaching to the end.\n   * @internal\n   */\n  const hasScrollAlmostReachedEnd = computed(\n    () => !hasScrollReachedStart.value && props.distanceToBottom > distanceToEnd.value\n  );\n\n  onMounted(() => {\n    nextTick().then(() => {\n      if (!scrollEl.value) {\n        // TODO Replace with Empathy's logger\n        // eslint-disable-next-line no-console\n        console.warn(\n          '[useScroll]',\n          // eslint-disable-next-line max-len\n          'Components using this composable must pass `scrollEl` as the HTML node that is scrolling.'\n        );\n      } else {\n        storeScrollData();\n      }\n    });\n  });\n\n  /**\n   * Change the isClientHeightChanging flag when the property clientHeight is changing and\n   * calls throttleledCall method.\n   *\n   * @internal\n   */\n  watch(\n    clientHeight,\n    () => {\n      isClientHeightChanging.value = true;\n\n      throtteledCall();\n    },\n    { immediate: true }\n  );\n\n  /**\n   * Emits the `scroll` event.\n   *\n   * @param _newScrollPosition - The new position of scroll.\n   * @param oldScrollPosition - The old position of scroll.\n   * @internal\n   */\n  watch(currentPosition, (_newScrollPosition: number, oldScrollPosition: number) => {\n    emit('scroll', currentPosition.value);\n    previousPosition.value = oldScrollPosition;\n  });\n\n  /**\n   * Sets direction of scroll based in {@link ScrollDirection} when the current position\n   * has changed.\n   *\n   * @internal\n   */\n  watch(currentPosition, () => {\n    if (!isClientHeightChanging.value && currentPosition.value !== previousPosition.value) {\n      scrollDirection.value = currentPosition.value > previousPosition.value ? 'DOWN' : 'UP';\n    }\n  });\n\n  /**\n   * Emits the 'scroll:almost-at-end' event when the user is about to reach to end.\n   *\n   * @param isScrollAlmostAtEnd - For knowing if the user is about to reach to end.\n   * @internal\n   */\n  watch(hasScrollReachedStart, (isScrollAtStart: boolean) => {\n    emit('scroll:at-start', isScrollAtStart);\n  });\n\n  /**\n   * Sets direction of scroll based in {@link ScrollDirection} when the current position\n   * has changed.\n   *\n   * @internal\n   */\n  watch(hasScrollAlmostReachedEnd, (isScrollAlmostAtEnd: boolean) => {\n    emit('scroll:almost-at-end', isScrollAlmostAtEnd);\n  });\n\n  /**\n   * Emits the 'scroll:at-end' event when the user reaches the end.\n   *\n   * @param isScrollAtEnd - For knowing if the user reaches at end.\n   * @internal\n   */\n  watch(hasScrollReachedEnd, (isScrollAtEnd: boolean) => {\n    emit('scroll:at-end', isScrollAtEnd);\n  });\n\n  /**\n   * Emits the `scroll:direction-change` event when the scrolling direction has changed.\n   *\n   * @param direction - The new direction of scroll.\n   * @internal\n   */\n  watch(scrollDirection, (direction: ScrollDirection) => {\n    if (!isClientHeightChanging.value) {\n      emit('scroll:direction-change', direction);\n    }\n  });\n\n  /**\n   * Resets the scroll position.\n   *\n   * @internal\n   */\n  const $x = use$x();\n  const resetOnEvents = isArray(props.resetOn) ? props.resetOn : [props.resetOn];\n  resetOnEvents.forEach(event =>\n    $x.on(event, false).subscribe(() =>\n      nextTick().then(() => {\n        if (props.resetOnChange) {\n          scrollEl.value?.scrollTo({ top: 0 });\n        }\n      })\n    )\n  );\n\n  return { throttledStoreScrollData };\n}\n"],"names":[],"mappings":"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"}

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

@@ -13,9 +13,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_FiltersList = resolveComponent("FiltersList");
   return openBlock(), createElementBlock("div", _hoisted_1, [
     createVNode(_component_RenderlessFilter, {
-      cssClasses: _ctx.innerCssClasses,
+      filter: _ctx.filter,
       clickEvents: _ctx.innerClickEvents,
-      filter: _ctx.filter
+      cssClasses: _ctx.innerCssClasses
     }, {
       default: withCtx(({ filter, clickFilter, cssClasses, isDisabled }) => [
         createCommentVNode("\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      "),
@@ -41,7 +41,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       _: 3
       /* FORWARDED */
-    }, 8, ["cssClasses", "clickEvents", "filter"]),
+    }, 8, ["filter", "clickEvents", "cssClasses"]),
     createVNode(_component_FiltersList, {
       animation: _ctx.childrenAnimation,
       filters: _ctx.renderedChildrenFilters,

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      :cssClasses=\"innerCssClasses\"\n      :clickEvents=\"innerClickEvents\"\n      :filter=\"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, filterItemClass]\"\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      :class=\"childrenFiltersClass\"\n      data-test=\"children-filters\"\n    >\n      <HierarchicalFilter\n        :childrenAnimation=\"childrenAnimation\"\n        :filter=\"childFilter\"\n        :clickEvents=\"getChildFilterClickEvents(childFilter)\"\n        :childrenFiltersClass=\"childrenFiltersClass\"\n        :filterItemClass=\"filterItemClass\"\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 { Dictionary, isObject } from '@empathyco/x-utils';\n  import { computed, defineComponent, PropType } from 'vue';\n  import { XEventsTypes } from '../../../../wiring/events.types';\n  import { facetsXModule } from '../../x-module';\n  import FiltersList from '../lists/filters-list.vue';\n  import { AnimationProp } from '../../../../types';\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  export default defineComponent({\n    name: 'HierarchicalFilter',\n    xModule: facetsXModule.name,\n    components: { FiltersList, RenderlessFilter },\n    props: {\n      /** The filter data to render. */\n      filter: {\n        type: Object as PropType<HierarchicalFilterModel>,\n        required: true\n      },\n      /** The animation component to use for the children filters. */\n      childrenAnimation: AnimationProp,\n      /**\n       * Additional events, with their payload, to emit when the filter is clicked.\n       *\n       * @public\n       */\n      clickEvents: Object as PropType<Partial<XEventsTypes>>,\n      /** Inheritance CSS classes. */\n      cssClasses: {\n        type: Array as PropType<(string | Dictionary<boolean>)[]>,\n        default: () => []\n      },\n      /** Class inherited by content element. */\n      childrenFiltersClass: String,\n      /** Class inherited by content element. */\n      filterItemClass: String\n    },\n    setup: function (props) {\n      /**\n       * The {@link XEventsTypes} to emit.\n       *\n       * @returns The events to emit when clicked.\n       * @internal\n       */\n      const innerClickEvents = computed(() => ({\n        UserClickedAHierarchicalFilter: props.filter,\n        ...props.clickEvents\n      }));\n\n      const isFilterPartiallySelected = (filter: HierarchicalFilterModel) => {\n        const selectedChildren = filter.children?.filter(filter => filter.selected);\n        const filterChildrenLength = filter.children?.length ?? 0;\n        return (\n          !!selectedChildren &&\n          ((selectedChildren.length > 0 && selectedChildren.length < filterChildrenLength) ||\n            // eslint-disable-next-line @typescript-eslint/unbound-method\n            selectedChildren.some(isFilterPartiallySelected))\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      const isPartiallySelected = computed(() => isFilterPartiallySelected(props.filter));\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      const innerCssClasses = computed(() => [\n        'x-hierarchical-filter',\n        { 'x-hierarchical-filter--is-partially-selected': isPartiallySelected.value },\n        { 'x-hierarchical-filter--is-selected': props.filter.selected },\n        { 'x-facet-filter--is-partially-selected': isPartiallySelected.value },\n        ...props.cssClasses\n      ]);\n\n      /**\n       * Gets the child filter click events, converting the payload of the events that have a\n       * {@link 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      const getChildFilterClickEvents = (childFilter: HierarchicalFilterModel) => {\n        return Object.entries(innerClickEvents.value).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       * 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      const renderedChildrenFilters = computed(() => props.filter.children ?? []);\n\n      return {\n        innerClickEvents,\n        innerCssClasses,\n        renderedChildrenFilters,\n        getChildFilterClickEvents\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`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n- [`UserClickedAHierarchicalFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\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\n### Customizing the content with classes\n\nThe `childrenFiltersClass` prop can be used to add classes to the inner filters lists. This is\nuseful to set the indent of the children filters.\n\nThe `filterItemClass` prop can be used to add classes to the filter element itself.\n\n```vue\n<template>\n  <HierarchicalFilter\n    :filter=\"filter\"\n    childrenFiltersClass=\"x-custom-class\"\n    filterItemClass=\"x-custom-filter\"\n  />\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":["_resolveComponent","_openBlock","_createElementBlock","_createVNode","filter","_withCtx","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps","_createElementVNode","_normalizeClass","_toDisplayString","childrenAnimation","renderedChildrenFilters","getChildFilterClickEvents","filterItemClass"],"mappings":";;;;MAC+C,UAAU,GAAA;AAAA,EAAA,KAAA,EAAA,iCAAA;;;;;;;iCAAvDA,gBAuDM,CAAA,aAAA,CAAA,CAAA;AApDD,EAAA,OAAAC,SAAA,EAA2B,EAAAC,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,IAAAC,WAAA,CAChB,2BAAkB,EAAA;AAAA,MAC7B,UAAQC,EAAAA,IAAAA,CAAAA,eAAAA;AAAAA,MAAAA,WAAAA,EAAAA,IAAAA,CAAAA,gBAAAA;AANf,MAAA,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,KAAA,EAAA;AAeM,MAAA,OAAA,EAAAC,OAAA,CAeO,CA9Bb,EAAA,MAAA,EAAA,WAAA,EAAA,UAAA,EAAA,UAAA,EAAA,KAAA;AAAA,QAAAC,kBAAA,CAgBQ,gXAaS,CAAA;AAAA,QAAAC,UAAA,CAZD,KAAE,MAAW,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,MAAA,EAAA,WAAA,EAAA,UAAA,EAAA,UAAA,EAAA,CAAA,CAAA,EAAA,MAAA;AAAA,UAAAC,kBAAA,CACJ,QAAO,EAAA;AAAA,YACrB,OAnBX,EAAA,WAAA;AAAA,YAoBW,gBAAU,MAAU,CAAA,QAAA,CAAA,QAAA,EAAA;AAAA,YACrB,KAAkB,EAAAC,cAAA,CAAA,CAAA,UAAA,EAAA,IAAA,CAAA,eAAA,CAAA,CAAA;AAAA,YAClB,QAAK,EAAA,UAAA;AAAA,YAAA,WAAA,EAAA,QAAA;AAEL,YAAA,IAAA,EAAA,UAAA;AAAA,WAIA,EAAA;AAAA,YAAAL,kBAAA,CA5BV,sIA4B6D,CAAA;AAAA,YAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,EAAA,MAAA;;AA5B7D,gBAAAK,eAAA,CAAA,MAAA,CAAA,KAAA,CAAA;AAAA,gBAAA,CAAA;AAAA;AAAA,eAAA;AAAA,aAAA,CAAA;;AAAA,SAAA,CAAA;AAAA,OAAA,CAAA;AAgCI,MAAA,CAAA,EAAA,CAAA;AAAA;AAAA,KAAA,EAEG,GAAWC,CAAiB,YAAA,EAAA,aAAA,EAAA,QAAA,CAAA,CAAA;AAAA,IACnBC,WAAAA,CAAAA,sBAAAA,EAAAA;AAAAA,MACT,WAAS,IAAEV,CAAAA,iBAAAA;AAAAA,MACZ,OArCN,EAAA,IAAA,CAAA,uBAAA;AAAA,MAuCM,WAAU,EAAA,IAAA,CAAA,MAAA,CAAA,EAAA;AAAA,MAAA,KAAA,EAAAO,cAAA,CAAA,CAAA,iCAAA,EAAA,IAAA,CAAA,oBAAA,CAAA,CAAA;AAvChB,MAAA,WAAA,EAAA,kBAAA;AAAA,KAAA,EAAA;AA0CS,MAAA,OAAA,EAAAN,OAAA,CAAA,CAAA,EAAiB,QAAEQ,WAAiB,EAAA,KAAA;AAAA,QAAAV,WAAA,CAC5B,6BAAW,EAAA;AAAA,UACnB,iBAAaY,EAAAA,IAAAA,CAAAA,iBAAAA;AAAAA,UACb,MAAA,EAAA,WAAA;AAAA,UACA,kBAAiBC,yBAAe,CAAA,WAAA,CAAA;AAAA,UAAA,oBAAA,EAAA,IAAA,CAAA,oBAAA;AAEtB,UAAA,eAAA,EAAO,IAAI,CAAA,eAAA;AAAA,SAAA,EAAA;;AAGX,YAAAT,UAAA,CAAK,KAAI,MAAM,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,MAAA,EAAA,WAAA,EAAA,UAAA,EAAA,UAAA,EAAA,CAAA,CAAA,CAAA;AAAA,WAAA,CAAA;;AAnDlC,YAAAF,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,CAAA;AAAA,WAAA,CAAA;;;AAAA,SAAA,EAAA,IAAA,EAAA,CAAA,mBAAA,EAAA,QAAA,EAAA,aAAA,EAAA,sBAAA,EAAA,iBAAA,CAAA,CAAA;AAAA,OAAA,CAAA;;;;;;;;;;"}
+{"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      :filter=\"filter\"\n      :clickEvents=\"innerClickEvents\"\n      :cssClasses=\"innerCssClasses\"\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, filterItemClass]\"\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      :class=\"childrenFiltersClass\"\n      data-test=\"children-filters\"\n    >\n      <HierarchicalFilter\n        :childrenAnimation=\"childrenAnimation\"\n        :filter=\"childFilter\"\n        :clickEvents=\"getChildFilterClickEvents(childFilter)\"\n        :childrenFiltersClass=\"childrenFiltersClass\"\n        :filterItemClass=\"filterItemClass\"\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 { Dictionary, isObject } from '@empathyco/x-utils';\n  import { computed, defineComponent, PropType } from 'vue';\n  import { XEventsTypes } from '../../../../wiring/events.types';\n  import { facetsXModule } from '../../x-module';\n  import FiltersList from '../lists/filters-list.vue';\n  import { AnimationProp } from '../../../../types';\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  export default defineComponent({\n    name: 'HierarchicalFilter',\n    xModule: facetsXModule.name,\n    components: { FiltersList, RenderlessFilter },\n    props: {\n      /** The filter data to render. */\n      filter: {\n        type: Object as PropType<HierarchicalFilterModel>,\n        required: true\n      },\n      /** The animation component to use for the children filters. */\n      childrenAnimation: AnimationProp,\n      /**\n       * Additional events, with their payload, to emit when the filter is clicked.\n       *\n       * @public\n       */\n      clickEvents: Object as PropType<Partial<XEventsTypes>>,\n      /** Inheritance CSS classes. */\n      cssClasses: {\n        type: Array as PropType<(string | Dictionary<boolean>)[]>,\n        default: () => []\n      },\n      /** Class inherited by content element. */\n      childrenFiltersClass: String,\n      /** Class inherited by content element. */\n      filterItemClass: String\n    },\n    setup: function (props) {\n      /**\n       * The {@link XEventsTypes} to emit.\n       *\n       * @returns The events to emit when clicked.\n       * @internal\n       */\n      const innerClickEvents = computed(() => ({\n        UserClickedAHierarchicalFilter: props.filter,\n        ...props.clickEvents\n      }));\n\n      const isFilterPartiallySelected = (filter: HierarchicalFilterModel) => {\n        const selectedChildren = filter.children?.filter(filter => filter.selected);\n        const filterChildrenLength = filter.children?.length ?? 0;\n        return (\n          !!selectedChildren &&\n          ((selectedChildren.length > 0 && selectedChildren.length < filterChildrenLength) ||\n            // eslint-disable-next-line @typescript-eslint/unbound-method\n            selectedChildren.some(isFilterPartiallySelected))\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      const isPartiallySelected = computed(() => isFilterPartiallySelected(props.filter));\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      const innerCssClasses = computed(() => [\n        'x-hierarchical-filter',\n        { 'x-hierarchical-filter--is-partially-selected': isPartiallySelected.value },\n        { 'x-hierarchical-filter--is-selected': props.filter.selected },\n        { 'x-facet-filter--is-partially-selected': isPartiallySelected.value },\n        ...props.cssClasses\n      ]);\n\n      /**\n       * Gets the child filter click events, converting the payload of the events that have a\n       * {@link 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      const getChildFilterClickEvents = (childFilter: HierarchicalFilterModel) => {\n        return Object.entries(innerClickEvents.value).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       * 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      const renderedChildrenFilters = computed(() => props.filter.children ?? []);\n\n      return {\n        innerClickEvents,\n        innerCssClasses,\n        renderedChildrenFilters,\n        getChildFilterClickEvents\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`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n- [`UserClickedAHierarchicalFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\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\n### Customizing the content with classes\n\nThe `childrenFiltersClass` prop can be used to add classes to the inner filters lists. This is\nuseful to set the indent of the children filters.\n\nThe `filterItemClass` prop can be used to add classes to the filter element itself.\n\n```vue\n<template>\n  <HierarchicalFilter\n    :filter=\"filter\"\n    childrenFiltersClass=\"x-custom-class\"\n    filterItemClass=\"x-custom-filter\"\n  />\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":["_resolveComponent","_openBlock","_createElementBlock","_createVNode","innerCssClasses","_withCtx","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps","_createElementVNode","_normalizeClass","_toDisplayString","childrenAnimation","renderedChildrenFilters","filter","getChildFilterClickEvents","filterItemClass"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"hierarchical-filter.vue2.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      :cssClasses=\"innerCssClasses\"\n      :clickEvents=\"innerClickEvents\"\n      :filter=\"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, filterItemClass]\"\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      :class=\"childrenFiltersClass\"\n      data-test=\"children-filters\"\n    >\n      <HierarchicalFilter\n        :childrenAnimation=\"childrenAnimation\"\n        :filter=\"childFilter\"\n        :clickEvents=\"getChildFilterClickEvents(childFilter)\"\n        :childrenFiltersClass=\"childrenFiltersClass\"\n        :filterItemClass=\"filterItemClass\"\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 { Dictionary, isObject } from '@empathyco/x-utils';\n  import { computed, defineComponent, PropType } from 'vue';\n  import { XEventsTypes } from '../../../../wiring/events.types';\n  import { facetsXModule } from '../../x-module';\n  import FiltersList from '../lists/filters-list.vue';\n  import { AnimationProp } from '../../../../types';\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  export default defineComponent({\n    name: 'HierarchicalFilter',\n    xModule: facetsXModule.name,\n    components: { FiltersList, RenderlessFilter },\n    props: {\n      /** The filter data to render. */\n      filter: {\n        type: Object as PropType<HierarchicalFilterModel>,\n        required: true\n      },\n      /** The animation component to use for the children filters. */\n      childrenAnimation: AnimationProp,\n      /**\n       * Additional events, with their payload, to emit when the filter is clicked.\n       *\n       * @public\n       */\n      clickEvents: Object as PropType<Partial<XEventsTypes>>,\n      /** Inheritance CSS classes. */\n      cssClasses: {\n        type: Array as PropType<(string | Dictionary<boolean>)[]>,\n        default: () => []\n      },\n      /** Class inherited by content element. */\n      childrenFiltersClass: String,\n      /** Class inherited by content element. */\n      filterItemClass: String\n    },\n    setup: function (props) {\n      /**\n       * The {@link XEventsTypes} to emit.\n       *\n       * @returns The events to emit when clicked.\n       * @internal\n       */\n      const innerClickEvents = computed(() => ({\n        UserClickedAHierarchicalFilter: props.filter,\n        ...props.clickEvents\n      }));\n\n      const isFilterPartiallySelected = (filter: HierarchicalFilterModel) => {\n        const selectedChildren = filter.children?.filter(filter => filter.selected);\n        const filterChildrenLength = filter.children?.length ?? 0;\n        return (\n          !!selectedChildren &&\n          ((selectedChildren.length > 0 && selectedChildren.length < filterChildrenLength) ||\n            // eslint-disable-next-line @typescript-eslint/unbound-method\n            selectedChildren.some(isFilterPartiallySelected))\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      const isPartiallySelected = computed(() => isFilterPartiallySelected(props.filter));\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      const innerCssClasses = computed(() => [\n        'x-hierarchical-filter',\n        { 'x-hierarchical-filter--is-partially-selected': isPartiallySelected.value },\n        { 'x-hierarchical-filter--is-selected': props.filter.selected },\n        { 'x-facet-filter--is-partially-selected': isPartiallySelected.value },\n        ...props.cssClasses\n      ]);\n\n      /**\n       * Gets the child filter click events, converting the payload of the events that have a\n       * {@link 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      const getChildFilterClickEvents = (childFilter: HierarchicalFilterModel) => {\n        return Object.entries(innerClickEvents.value).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       * 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      const renderedChildrenFilters = computed(() => props.filter.children ?? []);\n\n      return {\n        innerClickEvents,\n        innerCssClasses,\n        renderedChildrenFilters,\n        getChildFilterClickEvents\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`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n- [`UserClickedAHierarchicalFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\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\n### Customizing the content with classes\n\nThe `childrenFiltersClass` prop can be used to add classes to the inner filters lists. This is\nuseful to set the indent of the children filters.\n\nThe `filterItemClass` prop can be used to add classes to the filter element itself.\n\n```vue\n<template>\n  <HierarchicalFilter\n    :filter=\"filter\"\n    childrenFiltersClass=\"x-custom-class\"\n    filterItemClass=\"x-custom-filter\"\n  />\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":["RenderlessFilter"],"mappings":";;;;;;;;AAyEE;;;;AAIE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,UAAU,EAAE,EAAE,WAAW,oBAAEA,aAAkB;AAC7C,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA2C;AACjD,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;;AAED,QAAA,iBAAiB,EAAE,aAAa;AAChC;;;;AAIE;AACF,QAAA,WAAW,EAAE,MAAyC;;AAEtD,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,KAAmD;AACzD,YAAA,OAAO,EAAE,MAAM,EAAC;AACjB,SAAA;;AAED,QAAA,oBAAoB,EAAE,MAAM;;AAE5B,QAAA,eAAe,EAAE,MAAK;AACvB,KAAA;IACD,KAAK,EAAE,UAAU,KAAK,EAAA;AACpB;;;;;AAKE;AACF,QAAA,MAAM,gBAAiB,GAAE,QAAQ,CAAC,OAAO;YACvC,8BAA8B,EAAE,KAAK,CAAC,MAAM;YAC5C,GAAG,KAAK,CAAC,WAAU;AACpB,SAAA,CAAC,CAAC,CAAA;AAEH,QAAA,MAAM,4BAA4B,CAAC,MAA+B,KAAK;AACrE,YAAA,MAAM,gBAAe,GAAI,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAO,IAAG,MAAM,CAAC,QAAQ,CAAC,CAAA;YAC3E,MAAM,oBAAqB,GAAE,MAAM,CAAC,QAAQ,EAAE,MAAK,IAAK,CAAC,CAAA;YACzD,QACE,CAAC,CAAC;AACF,iBAAC,CAAC,gBAAgB,CAAC,SAAS,CAAA,IAAK,gBAAgB,CAAC,MAAO,GAAE,oBAAoB;;AAE7E,oBAAA,gBAAgB,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAA,EACnD;AACH,SAAC,CAAA;AAED;;;;;;AAME;AACF,QAAA,MAAM,mBAAkB,GAAI,QAAQ,CAAC,MAAM,yBAAyB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;AAEnF;;;;;AAKE;AACF,QAAA,MAAM,eAAgB,GAAE,QAAQ,CAAC,MAAM;YACrC,uBAAuB;AACvB,YAAA,EAAE,8CAA8C,EAAE,mBAAmB,CAAC,OAAO;AAC7E,YAAA,EAAE,oCAAoC,EAAE,KAAK,CAAC,MAAM,CAAC,QAAO,EAAG;AAC/D,YAAA,EAAE,uCAAuC,EAAE,mBAAmB,CAAC,OAAO;YACtE,GAAG,KAAK,CAAC,UAAS;AACnB,SAAA,CAAC,CAAA;AAEF;;;;;;;AAOE;AACF,QAAA,MAAM,yBAAwB,GAAI,CAAC,WAAoC,KAAK;YAC1E,OAAO,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK;gBACtF,OAAO;AACL,oBAAA,GAAG,WAAW;AACd,oBAAA,CAAC,KAAK,GACJ,QAAQ,CAAC,OAAO;wBAChB,oBAAoB,CAAC,OAA4B,CAAA;AACjD,wBAAA,WAAU,KAAO,OAA6C;AAC5D,0BAAE,WAAU;AACZ,0BAAE,OAAM;iBACb,CAAA;aACF,EAAE,EAA2B,CAAC,CAAA;AACjC,SAAC,CAAA;AAED;;;;;;AAME;AACF,QAAA,MAAM,uBAAwB,GAAE,QAAQ,CAAC,MAAM,KAAK,CAAC,MAAM,CAAC,QAAS,IAAG,EAAE,CAAC,CAAA;QAE3E,OAAO;YACL,gBAAgB;YAChB,eAAe;YACf,uBAAuB;YACvB,yBAAwB;SACzB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"hierarchical-filter.vue2.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      :filter=\"filter\"\n      :clickEvents=\"innerClickEvents\"\n      :cssClasses=\"innerCssClasses\"\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, filterItemClass]\"\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      :class=\"childrenFiltersClass\"\n      data-test=\"children-filters\"\n    >\n      <HierarchicalFilter\n        :childrenAnimation=\"childrenAnimation\"\n        :filter=\"childFilter\"\n        :clickEvents=\"getChildFilterClickEvents(childFilter)\"\n        :childrenFiltersClass=\"childrenFiltersClass\"\n        :filterItemClass=\"filterItemClass\"\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 { Dictionary, isObject } from '@empathyco/x-utils';\n  import { computed, defineComponent, PropType } from 'vue';\n  import { XEventsTypes } from '../../../../wiring/events.types';\n  import { facetsXModule } from '../../x-module';\n  import FiltersList from '../lists/filters-list.vue';\n  import { AnimationProp } from '../../../../types';\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  export default defineComponent({\n    name: 'HierarchicalFilter',\n    xModule: facetsXModule.name,\n    components: { FiltersList, RenderlessFilter },\n    props: {\n      /** The filter data to render. */\n      filter: {\n        type: Object as PropType<HierarchicalFilterModel>,\n        required: true\n      },\n      /** The animation component to use for the children filters. */\n      childrenAnimation: AnimationProp,\n      /**\n       * Additional events, with their payload, to emit when the filter is clicked.\n       *\n       * @public\n       */\n      clickEvents: Object as PropType<Partial<XEventsTypes>>,\n      /** Inheritance CSS classes. */\n      cssClasses: {\n        type: Array as PropType<(string | Dictionary<boolean>)[]>,\n        default: () => []\n      },\n      /** Class inherited by content element. */\n      childrenFiltersClass: String,\n      /** Class inherited by content element. */\n      filterItemClass: String\n    },\n    setup: function (props) {\n      /**\n       * The {@link XEventsTypes} to emit.\n       *\n       * @returns The events to emit when clicked.\n       * @internal\n       */\n      const innerClickEvents = computed(() => ({\n        UserClickedAHierarchicalFilter: props.filter,\n        ...props.clickEvents\n      }));\n\n      const isFilterPartiallySelected = (filter: HierarchicalFilterModel) => {\n        const selectedChildren = filter.children?.filter(filter => filter.selected);\n        const filterChildrenLength = filter.children?.length ?? 0;\n        return (\n          !!selectedChildren &&\n          ((selectedChildren.length > 0 && selectedChildren.length < filterChildrenLength) ||\n            // eslint-disable-next-line @typescript-eslint/unbound-method\n            selectedChildren.some(isFilterPartiallySelected))\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      const isPartiallySelected = computed(() => isFilterPartiallySelected(props.filter));\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      const innerCssClasses = computed(() => [\n        'x-hierarchical-filter',\n        { 'x-hierarchical-filter--is-partially-selected': isPartiallySelected.value },\n        { 'x-hierarchical-filter--is-selected': props.filter.selected },\n        { 'x-facet-filter--is-partially-selected': isPartiallySelected.value },\n        ...props.cssClasses\n      ]);\n\n      /**\n       * Gets the child filter click events, converting the payload of the events that have a\n       * {@link 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      const getChildFilterClickEvents = (childFilter: HierarchicalFilterModel) => {\n        return Object.entries(innerClickEvents.value).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       * 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      const renderedChildrenFilters = computed(() => props.filter.children ?? []);\n\n      return {\n        innerClickEvents,\n        innerCssClasses,\n        renderedChildrenFilters,\n        getChildFilterClickEvents\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`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n- [`UserClickedAHierarchicalFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\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\n### Customizing the content with classes\n\nThe `childrenFiltersClass` prop can be used to add classes to the inner filters lists. This is\nuseful to set the indent of the children filters.\n\nThe `filterItemClass` prop can be used to add classes to the filter element itself.\n\n```vue\n<template>\n  <HierarchicalFilter\n    :filter=\"filter\"\n    childrenFiltersClass=\"x-custom-class\"\n    filterItemClass=\"x-custom-filter\"\n  />\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":["RenderlessFilter"],"mappings":";;;;;;;;AAyEE;;;;AAIE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,UAAU,EAAE,EAAE,WAAW,oBAAEA,aAAkB;AAC7C,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA2C;AACjD,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;;AAED,QAAA,iBAAiB,EAAE,aAAa;AAChC;;;;AAIE;AACF,QAAA,WAAW,EAAE,MAAyC;;AAEtD,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,KAAmD;AACzD,YAAA,OAAO,EAAE,MAAM,EAAC;AACjB,SAAA;;AAED,QAAA,oBAAoB,EAAE,MAAM;;AAE5B,QAAA,eAAe,EAAE,MAAK;AACvB,KAAA;IACD,KAAK,EAAE,UAAU,KAAK,EAAA;AACpB;;;;;AAKE;AACF,QAAA,MAAM,gBAAiB,GAAE,QAAQ,CAAC,OAAO;YACvC,8BAA8B,EAAE,KAAK,CAAC,MAAM;YAC5C,GAAG,KAAK,CAAC,WAAU;AACpB,SAAA,CAAC,CAAC,CAAA;AAEH,QAAA,MAAM,4BAA4B,CAAC,MAA+B,KAAK;AACrE,YAAA,MAAM,gBAAe,GAAI,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAO,IAAG,MAAM,CAAC,QAAQ,CAAC,CAAA;YAC3E,MAAM,oBAAqB,GAAE,MAAM,CAAC,QAAQ,EAAE,MAAK,IAAK,CAAC,CAAA;YACzD,QACE,CAAC,CAAC;AACF,iBAAC,CAAC,gBAAgB,CAAC,SAAS,CAAA,IAAK,gBAAgB,CAAC,MAAO,GAAE,oBAAoB;;AAE7E,oBAAA,gBAAgB,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAA,EACnD;AACH,SAAC,CAAA;AAED;;;;;;AAME;AACF,QAAA,MAAM,mBAAkB,GAAI,QAAQ,CAAC,MAAM,yBAAyB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;AAEnF;;;;;AAKE;AACF,QAAA,MAAM,eAAgB,GAAE,QAAQ,CAAC,MAAM;YACrC,uBAAuB;AACvB,YAAA,EAAE,8CAA8C,EAAE,mBAAmB,CAAC,OAAO;AAC7E,YAAA,EAAE,oCAAoC,EAAE,KAAK,CAAC,MAAM,CAAC,QAAO,EAAG;AAC/D,YAAA,EAAE,uCAAuC,EAAE,mBAAmB,CAAC,OAAO;YACtE,GAAG,KAAK,CAAC,UAAS;AACnB,SAAA,CAAC,CAAA;AAEF;;;;;;;AAOE;AACF,QAAA,MAAM,yBAAwB,GAAI,CAAC,WAAoC,KAAK;YAC1E,OAAO,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK;gBACtF,OAAO;AACL,oBAAA,GAAG,WAAW;AACd,oBAAA,CAAC,KAAK,GACJ,QAAQ,CAAC,OAAO;wBAChB,oBAAoB,CAAC,OAA4B,CAAA;AACjD,wBAAA,WAAU,KAAO,OAA6C;AAC5D,0BAAE,WAAU;AACZ,0BAAE,OAAM;iBACb,CAAA;aACF,EAAE,EAA2B,CAAC,CAAA;AACjC,SAAC,CAAA;AAED;;;;;;AAME;AACF,QAAA,MAAM,uBAAwB,GAAE,QAAQ,CAAC,MAAM,KAAK,CAAC,MAAM,CAAC,QAAS,IAAG,EAAE,CAAC,CAAA;QAE3E,OAAO;YACL,gBAAgB;YAChB,eAAe;YACf,uBAAuB;YACvB,yBAAwB;SACzB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

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

@@ -1,5 +1,5 @@
 import _sfc_main from './number-range-filter.vue2.js';
-import { resolveComponent, openBlock, createBlock, withCtx, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, createElementVNode, normalizeClass, createTextVNode, toDisplayString } from 'vue';
+import { resolveComponent, openBlock, createBlock, withCtx, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, createElementVNode, mergeProps, createTextVNode, toDisplayString } from 'vue';
 import _export_sfc from '../../../../_virtual/_plugin-vue_export-helper.js';
 
 const _hoisted_1 = ["onClick", "aria-checked", "disabled"];
@@ -18,14 +18,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         cssClasses,
         isDisabled
       })), () => [
-        createElementVNode("button", {
+        createElementVNode("button", mergeProps({
           onClick: clickFilter,
           "aria-checked": filter.selected.toString(),
-          class: normalizeClass(cssClasses),
+          class: cssClasses,
           disabled: isDisabled,
           "data-test": "filter",
           role: "checkbox"
-        }, [
+        }, _ctx.$attrs), [
           createCommentVNode("\n          @slot The content to render inside the button\n          @binding {Filter} filter - The filter data\n        "),
           renderSlot(_ctx.$slots, "label", { filter }, () => [
             createTextVNode(
@@ -34,7 +34,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               /* TEXT */
             )
           ])
-        ], 10, _hoisted_1)
+        ], 16, _hoisted_1)
       ])
     ]),
     _: 3

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    :cssClasses=\"innerCssClasses\"\n    :clickEvents=\"innerClickEvents\"\n    :filter=\"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 { computed, defineComponent, PropType } from 'vue';\n  import { NumberRangeFilter as NumberRangeFilterModel } from '@empathyco/x-types';\n  import { Dictionary } from '@empathyco/x-utils';\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  export default defineComponent({\n    name: 'NumberRangeFilter',\n    xModule: facetsXModule.name,\n    components: { RenderlessFilter },\n    props: {\n      /** The filter data to render. */\n      filter: {\n        type: Object as PropType<NumberRangeFilterModel>,\n        required: true\n      },\n      /**\n       * Additional events, with their payload, to emit when the filter is clicked.\n       *\n       * @public\n       */\n      clickEvents: Object as PropType<Partial<XEventsTypes>>,\n      /** Inheritance CSS classes. */\n      cssClasses: {\n        type: Array as PropType<(string | Dictionary<boolean>)[]>,\n        default: () => []\n      }\n    },\n    setup: function (props: any) {\n      /**\n       * The {@link XEventsTypes} to emit.\n       *\n       * @returns The events to emit when clicked.\n       * @internal\n       */\n      const innerClickEvents = computed(() => ({\n        UserClickedANumberRangeFilter: props.filter,\n        ...props.clickEvents\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      const innerCssClasses = computed(() => [\n        'x-number-range-filter',\n        { 'x-number-range-filter--is-selected': props.filter.selected },\n        ...props.cssClasses\n      ]);\n\n      return {\n        innerClickEvents,\n        innerCssClasses\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedAFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n- [`UserClickedANumberRangeFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the 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":["_resolveComponent","_openBlock","_createBlock","filter","_withCtx","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps","_createElementVNode","_normalizeClass","_toDisplayString"],"mappings":";;;;;;AAuCqB,EAAA,MAAA,2BAAA,GAAAA,gBAAA,CAAA,kBAAA,CAAA,CAAA;AAnChB,EAAA,OAAAC,SAAA,EAA6B,EAAAC,WAAA,CAAA,2BAAA,EAAA;AAAA,IAC7B,UAAQC,EAAAA,IAAAA,CAAAA,eAAAA;AAAAA,IAAAA,WAAAA,EAAAA,IAAAA,CAAAA,gBAAAA;AALb,IAAA,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;AAgBI,IAAA,OAAA,EAAAC,OAAA,CAsBO,CAtCX,EAAA,MAAA,EAAA,WAAA,EAAA,UAAA,EAAA,UAAA,EAAA,KAAA;AAAA,MAiB8BC,kBAAA,CAAA,2aAAA,CAAA;AAAA,MAAAC,UAAA,CAAU,IAAW,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA;AAAA,QAAU,MAAA;AAAA,QAAoB,WAAA;AAAA,QAAA,UAAA;AAO3E,QAAA,UAAA;AAAA,OAAA,CAAA,CAAA,EACG,MAAK;AAAA,QAAAC,kBAAA,CACS,QAAO,EAAA;AAAA,UACrB,OA3BT,EAAA,WAAA;AAAA,UA4BS,gBAAU,MAAU,CAAA,QAAA,CAAA,QAAA,EAAA;AAAA,UACrB,KAAkB,EAAAC,cAAA,CAAA,UAAA,CAAA;AAAA,UAClB,QAAK,EAAA,UAAA;AAAA,UAAA,WAAA,EAAA,QAAA;AAEL,UAAA,IAAA,EAAA,UAAA;AAAA,SAIA,EAAA;AAAA,UAAAL,kBAAA,CApCR,2HAoC2D,CAAA;AAAA,UAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,EAAA,MAAA;;AApC3D,cAAAK,eAAA,CAAA,MAAA,CAAA,KAAA,CAAA;AAAA,cAAA,CAAA;AAAA;AAAA,aAAA;AAAA,WAAA,CAAA;;AAAA,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"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    :cssClasses=\"innerCssClasses\"\n    :clickEvents=\"innerClickEvents\"\n    :filter=\"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        v-bind=\"$attrs\"\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 { computed, defineComponent, PropType } from 'vue';\n  import { NumberRangeFilter as NumberRangeFilterModel } from '@empathyco/x-types';\n  import { Dictionary } from '@empathyco/x-utils';\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  export default defineComponent({\n    name: 'NumberRangeFilter',\n    xModule: facetsXModule.name,\n    components: { RenderlessFilter },\n    inheritAttrs: false,\n    props: {\n      /** The filter data to render. */\n      filter: {\n        type: Object as PropType<NumberRangeFilterModel>,\n        required: true\n      },\n      /**\n       * Additional events, with their payload, to emit when the filter is clicked.\n       *\n       * @public\n       */\n      clickEvents: Object as PropType<Partial<XEventsTypes>>,\n      /** Inheritance CSS classes. */\n      cssClasses: {\n        type: Array as PropType<(string | Dictionary<boolean>)[]>,\n        default: () => []\n      }\n    },\n    setup: function (props: any) {\n      /**\n       * The {@link XEventsTypes} to emit.\n       *\n       * @returns The events to emit when clicked.\n       * @internal\n       */\n      const innerClickEvents = computed(() => ({\n        UserClickedANumberRangeFilter: props.filter,\n        ...props.clickEvents\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      const innerCssClasses = computed(() => [\n        'x-number-range-filter',\n        { 'x-number-range-filter--is-selected': props.filter.selected },\n        ...props.cssClasses\n      ]);\n\n      return {\n        innerClickEvents,\n        innerCssClasses\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedAFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n- [`UserClickedANumberRangeFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the 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":["_resolveComponent","_openBlock","_createBlock","filter","_withCtx","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps","_createElementVNode","_mergeProps","_toDisplayString"],"mappings":";;;;;;AAwCqB,EAAA,MAAA,2BAAA,GAAAA,gBAAA,CAAA,kBAAA,CAAA,CAAA;AApChB,EAAA,OAAAC,SAAA,EAA6B,EAAAC,WAAA,CAAA,2BAAA,EAAA;AAAA,IAC7B,UAAQC,EAAAA,IAAAA,CAAAA,eAAAA;AAAAA,IAAAA,WAAAA,EAAAA,IAAAA,CAAAA,gBAAAA;AALb,IAAA,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;AAgBI,IAAA,OAAA,EAAAC,OAAA,CAuBO,CAvCX,EAAA,MAAA,EAAA,WAAA,EAAA,UAAA,EAAA,UAAA,EAAA,KAAA;AAAA,MAiB8BC,kBAAA,CAAA,2aAAA,CAAA;AAAA,MAAAC,UAAA,CAAU,IAAW,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA;AAAA,QAAU,MAAA;AAAA,QAAoB,WAAA;AAAA,QAAA,UAAA;AAO3E,QAAA,UAAA;AAAA,OAAA,CAAA,CAAA,EACG,MAAK;AAAA,QAAAC,kBAAA,CACS,UAAOC,UAAiB,CAAA;AAAA,UACtC,OAAO,EAAA,WAAA;AAAA,UACP,gBAAU,MAAU,CAAA,QAAA,CAAA,QAAA,EAAA;AAAA,UACrB,KAAA,EAAA,UAAA;AAAA,UACA,QAAK,EAAA,UAAA;AAAA,UACS,WAAA,EAAA,QAAA;AAAA,UAEd,IAAA,EAAA,UAAA;AAAA,SAAA,EAIA,IAA6D,CAAA,MAAA,CAAA,EAAA;AAAA,UAAAL,kBAAA,CArCrE,2HAqC2D,CAAA;AAAA,UAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,EAAA,MAAA;;AArC3D,cAAAK,eAAA,CAAA,MAAA,CAAA,KAAA,CAAA;AAAA,cAAA,CAAA;AAAA;AAAA,aAAA;AAAA,WAAA,CAAA;;AAAA,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

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

@@ -11,6 +11,7 @@ var _sfc_main = defineComponent({
     name: 'NumberRangeFilter',
     xModule: facetsXModule.name,
     components: { RenderlessFilter: _sfc_main$1 },
+    inheritAttrs: false,
     props: {
         /** The filter data to render. */
         filter: {

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

@@ -1 +1 @@
-{"version":3,"file":"number-range-filter.vue2.js","sources":["../../../../../../src/x-modules/facets/components/filters/number-range-filter.vue"],"sourcesContent":["<template>\n  <RenderlessFilter\n    v-slot=\"{ filter, clickFilter, cssClasses, isDisabled }\"\n    :cssClasses=\"innerCssClasses\"\n    :clickEvents=\"innerClickEvents\"\n    :filter=\"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 { computed, defineComponent, PropType } from 'vue';\n  import { NumberRangeFilter as NumberRangeFilterModel } from '@empathyco/x-types';\n  import { Dictionary } from '@empathyco/x-utils';\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  export default defineComponent({\n    name: 'NumberRangeFilter',\n    xModule: facetsXModule.name,\n    components: { RenderlessFilter },\n    props: {\n      /** The filter data to render. */\n      filter: {\n        type: Object as PropType<NumberRangeFilterModel>,\n        required: true\n      },\n      /**\n       * Additional events, with their payload, to emit when the filter is clicked.\n       *\n       * @public\n       */\n      clickEvents: Object as PropType<Partial<XEventsTypes>>,\n      /** Inheritance CSS classes. */\n      cssClasses: {\n        type: Array as PropType<(string | Dictionary<boolean>)[]>,\n        default: () => []\n      }\n    },\n    setup: function (props: any) {\n      /**\n       * The {@link XEventsTypes} to emit.\n       *\n       * @returns The events to emit when clicked.\n       * @internal\n       */\n      const innerClickEvents = computed(() => ({\n        UserClickedANumberRangeFilter: props.filter,\n        ...props.clickEvents\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      const innerCssClasses = computed(() => [\n        'x-number-range-filter',\n        { 'x-number-range-filter--is-selected': props.filter.selected },\n        ...props.cssClasses\n      ]);\n\n      return {\n        innerClickEvents,\n        innerCssClasses\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedAFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n- [`UserClickedANumberRangeFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the 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":["RenderlessFilter"],"mappings":";;;;AAkDE;;;;AAIE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,mBAAmB;IACzB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,oBAAEA,WAAe,EAAG;AAChC,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA0C;AAChD,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,WAAW,EAAE,MAAyC;;AAEtD,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,KAAmD;AACzD,YAAA,OAAO,EAAE,MAAM,EAAC;AAClB,SAAA;AACD,KAAA;IACD,KAAK,EAAE,UAAU,KAAU,EAAA;AACzB;;;;;AAKE;AACF,QAAA,MAAM,gBAAiB,GAAE,QAAQ,CAAC,OAAO;YACvC,6BAA6B,EAAE,KAAK,CAAC,MAAM;YAC3C,GAAG,KAAK,CAAC,WAAU;AACpB,SAAA,CAAC,CAAC,CAAA;AAEH;;;;;AAKE;AACF,QAAA,MAAM,eAAgB,GAAE,QAAQ,CAAC,MAAM;YACrC,uBAAuB;AACvB,YAAA,EAAE,oCAAoC,EAAE,KAAK,CAAC,MAAM,CAAC,QAAO,EAAG;YAC/D,GAAG,KAAK,CAAC,UAAS;AACnB,SAAA,CAAC,CAAA;QAEF,OAAO;YACL,gBAAgB;YAChB,eAAc;SACf,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"number-range-filter.vue2.js","sources":["../../../../../../src/x-modules/facets/components/filters/number-range-filter.vue"],"sourcesContent":["<template>\n  <RenderlessFilter\n    v-slot=\"{ filter, clickFilter, cssClasses, isDisabled }\"\n    :cssClasses=\"innerCssClasses\"\n    :clickEvents=\"innerClickEvents\"\n    :filter=\"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        v-bind=\"$attrs\"\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 { computed, defineComponent, PropType } from 'vue';\n  import { NumberRangeFilter as NumberRangeFilterModel } from '@empathyco/x-types';\n  import { Dictionary } from '@empathyco/x-utils';\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  export default defineComponent({\n    name: 'NumberRangeFilter',\n    xModule: facetsXModule.name,\n    components: { RenderlessFilter },\n    inheritAttrs: false,\n    props: {\n      /** The filter data to render. */\n      filter: {\n        type: Object as PropType<NumberRangeFilterModel>,\n        required: true\n      },\n      /**\n       * Additional events, with their payload, to emit when the filter is clicked.\n       *\n       * @public\n       */\n      clickEvents: Object as PropType<Partial<XEventsTypes>>,\n      /** Inheritance CSS classes. */\n      cssClasses: {\n        type: Array as PropType<(string | Dictionary<boolean>)[]>,\n        default: () => []\n      }\n    },\n    setup: function (props: any) {\n      /**\n       * The {@link XEventsTypes} to emit.\n       *\n       * @returns The events to emit when clicked.\n       * @internal\n       */\n      const innerClickEvents = computed(() => ({\n        UserClickedANumberRangeFilter: props.filter,\n        ...props.clickEvents\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      const innerCssClasses = computed(() => [\n        'x-number-range-filter',\n        { 'x-number-range-filter--is-selected': props.filter.selected },\n        ...props.cssClasses\n      ]);\n\n      return {\n        innerClickEvents,\n        innerCssClasses\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedAFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n- [`UserClickedANumberRangeFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the 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":["RenderlessFilter"],"mappings":";;;;AAmDE;;;;AAIE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,mBAAmB;IACzB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,oBAAEA,WAAe,EAAG;AAChC,IAAA,YAAY,EAAE,KAAK;AACnB,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA0C;AAChD,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,WAAW,EAAE,MAAyC;;AAEtD,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,KAAmD;AACzD,YAAA,OAAO,EAAE,MAAM,EAAC;AAClB,SAAA;AACD,KAAA;IACD,KAAK,EAAE,UAAU,KAAU,EAAA;AACzB;;;;;AAKE;AACF,QAAA,MAAM,gBAAiB,GAAE,QAAQ,CAAC,OAAO;YACvC,6BAA6B,EAAE,KAAK,CAAC,MAAM;YAC3C,GAAG,KAAK,CAAC,WAAU;AACpB,SAAA,CAAC,CAAC,CAAA;AAEH;;;;;AAKE;AACF,QAAA,MAAM,eAAgB,GAAE,QAAQ,CAAC,MAAM;YACrC,uBAAuB;AACvB,YAAA,EAAE,oCAAoC,EAAE,KAAK,CAAC,MAAM,CAAC,QAAO,EAAG;YAC/D,GAAG,KAAK,CAAC,UAAS;AACnB,SAAA,CAAC,CAAA;QAEF,OAAO;YACL,gBAAgB;YAChB,eAAc;SACf,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

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

@@ -1,5 +1,5 @@
 import _sfc_main from './simple-filter.vue2.js';
-import { resolveComponent, openBlock, createBlock, withCtx, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, createElementVNode, normalizeClass, createTextVNode, toDisplayString } from 'vue';
+import { resolveComponent, openBlock, createBlock, withCtx, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, createElementVNode, mergeProps, createTextVNode, toDisplayString } from 'vue';
 import _export_sfc from '../../../../_virtual/_plugin-vue_export-helper.js';
 
 const _hoisted_1 = ["onClick", "aria-checked", "disabled"];
@@ -18,14 +18,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         isDisabled,
         cssClasses
       })), () => [
-        createElementVNode("button", {
+        createElementVNode("button", mergeProps({
           onClick: clickFilter,
           "aria-checked": filter.selected.toString(),
-          class: normalizeClass(cssClasses),
+          class: cssClasses,
           disabled: isDisabled,
           "data-test": "filter",
           role: "checkbox"
-        }, [
+        }, _ctx.$attrs), [
           createCommentVNode("\n          @slot The content to render inside the button\n          @binding {Filter} filter - The filter data\n        "),
           renderSlot(_ctx.$slots, "label", { filter }, () => [
             createTextVNode(
@@ -34,7 +34,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               /* TEXT */
             )
           ])
-        ], 10, _hoisted_1)
+        ], 16, _hoisted_1)
       ])
     ]),
     _: 3

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, isDisabled, cssClasses }\"\n    :filter=\"filter\"\n    :clickEvents=\"innerClickEvents\"\n    :cssClasses=\"innerCssClasses\"\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 {Boolean} isDisabled - True if the filter shouldn't be able to be selected by the\n      user\n      @binding {Object} cssClasses - Object containing CSS classes to add to the button\n    -->\n    <slot\n      v-bind=\"{\n        filter,\n        clickFilter,\n        isDisabled,\n        cssClasses\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 { Dictionary } from '@empathyco/x-utils';\n  import { computed, defineComponent, PropType } from 'vue';\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  export default defineComponent({\n    name: 'SimpleFilter',\n    xModule: facetsXModule.name,\n    components: { RenderlessFilter },\n    props: {\n      /** The filter data to render. */\n      filter: {\n        type: Object as PropType<SimpleFilterModel>,\n        required: true\n      },\n      /** Additional events, with their payload, to emit when the filter is clicked. */\n      clickEvents: Object as PropType<Partial<XEventsTypes>>,\n      /** Inheritance CSS classes. */\n      cssClasses: {\n        type: Array as PropType<(string | Dictionary<boolean>)[]>,\n        default: () => []\n      }\n    },\n    setup(props) {\n      /** The {@link XEventsTypes} to emit. */\n      const innerClickEvents = computed(() => ({\n        UserClickedASimpleFilter: props.filter,\n        ...props.clickEvents\n      }));\n\n      /** CSS classes to apply to the element. */\n      const innerCssClasses = computed(() => [\n        'x-simple-filter',\n        { 'x-simple-filter--is-selected': props.filter.selected },\n        ...props.cssClasses\n      ]);\n\n      return {\n        innerClickEvents,\n        innerCssClasses\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`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n- [`UserClickedASimpleFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the 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`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":["_resolveComponent","_openBlock","_createBlock","innerCssClasses","_withCtx","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps","_createElementVNode","_normalizeClass","_toDisplayString"],"mappings":";;;;;;AAuCqB,EAAA,MAAA,2BAAA,GAAAA,gBAAA,CAAA,kBAAA,CAAA,CAAA;AAnChB,EAAA,OAAAC,SAAA,EAA6B,EAAAC,WAAA,CAAA,2BAAA,EAAA;AAAA,IAC7B,MAAYC,EAAAA,IAAAA,CAAAA,MAAAA;AAAAA,IAAAA,WAAAA,EAAAA,IAAAA,CAAAA,gBAAAA;AALjB,IAAA,UAAA,EAAA,IAAA,CAAA,eAAA;AAAA,GAAA,EAAA;AAgBI,IAAA,OAAA,EAAAC,OAAA,CAsBO,CAtCX,EAAA,MAAA,EAAA,WAAA,EAAA,UAAA,EAAA,UAAA,EAAA,KAAA;AAAA,MAiB8BC,kBAAA,CAAA,2aAAA,CAAA;AAAA,MAAAC,UAAA,CAAU,IAAW,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA;AAAA,QAAU,MAAA;AAAA,QAAoB,WAAA;AAAA,QAAA,UAAA;AAO3E,QAAA,UAAA;AAAA,OAAA,CAAA,CAAA,EACG,MAAK;AAAA,QAAAC,kBAAA,CACS,QAAO,EAAA;AAAA,UACrB,OA3BT,EAAA,WAAA;AAAA,UA4BS,gBAAU,MAAU,CAAA,QAAA,CAAA,QAAA,EAAA;AAAA,UACrB,KAAkB,EAAAC,cAAA,CAAA,UAAA,CAAA;AAAA,UAClB,QAAK,EAAA,UAAA;AAAA,UAAA,WAAA,EAAA,QAAA;AAEL,UAAA,IAAA,EAAA,UAAA;AAAA,SAIA,EAAA;AAAA,UAAAL,kBAAA,CApCR,2HAoC2D,CAAA;AAAA,UAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,EAAA,MAAA;;AApC3D,cAAAK,eAAA,CAAA,MAAA,CAAA,KAAA,CAAA;AAAA,cAAA,CAAA;AAAA;AAAA,aAAA;AAAA,WAAA,CAAA;;AAAA,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"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, isDisabled, cssClasses }\"\n    :filter=\"filter\"\n    :clickEvents=\"innerClickEvents\"\n    :cssClasses=\"innerCssClasses\"\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 {Boolean} isDisabled - True if the filter shouldn't be able to be selected by the\n      user\n      @binding {Object} cssClasses - Object containing CSS classes to add to the button\n    -->\n    <slot\n      v-bind=\"{\n        filter,\n        clickFilter,\n        isDisabled,\n        cssClasses\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        v-bind=\"$attrs\"\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 { Dictionary } from '@empathyco/x-utils';\n  import { computed, defineComponent, PropType } from 'vue';\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  export default defineComponent({\n    name: 'SimpleFilter',\n    xModule: facetsXModule.name,\n    components: { RenderlessFilter },\n    inheritAttrs: false,\n    props: {\n      /** The filter data to render. */\n      filter: {\n        type: Object as PropType<SimpleFilterModel>,\n        required: true\n      },\n      /** Additional events, with their payload, to emit when the filter is clicked. */\n      clickEvents: Object as PropType<Partial<XEventsTypes>>,\n      /** Inheritance CSS classes. */\n      cssClasses: {\n        type: Array as PropType<(string | Dictionary<boolean>)[]>,\n        default: () => []\n      }\n    },\n    setup(props) {\n      /** The {@link XEventsTypes} to emit. */\n      const innerClickEvents = computed(() => ({\n        UserClickedASimpleFilter: props.filter,\n        ...props.clickEvents\n      }));\n\n      /** CSS classes to apply to the element. */\n      const innerCssClasses = computed(() => [\n        'x-simple-filter',\n        { 'x-simple-filter--is-selected': props.filter.selected },\n        ...props.cssClasses\n      ]);\n\n      return {\n        innerClickEvents,\n        innerCssClasses\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`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n- [`UserClickedASimpleFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the 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`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":["_resolveComponent","_openBlock","_createBlock","innerCssClasses","_withCtx","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps","_createElementVNode","_mergeProps","_toDisplayString"],"mappings":";;;;;;AAwCqB,EAAA,MAAA,2BAAA,GAAAA,gBAAA,CAAA,kBAAA,CAAA,CAAA;AApChB,EAAA,OAAAC,SAAA,EAA6B,EAAAC,WAAA,CAAA,2BAAA,EAAA;AAAA,IAC7B,MAAYC,EAAAA,IAAAA,CAAAA,MAAAA;AAAAA,IAAAA,WAAAA,EAAAA,IAAAA,CAAAA,gBAAAA;AALjB,IAAA,UAAA,EAAA,IAAA,CAAA,eAAA;AAAA,GAAA,EAAA;AAgBI,IAAA,OAAA,EAAAC,OAAA,CAuBO,CAvCX,EAAA,MAAA,EAAA,WAAA,EAAA,UAAA,EAAA,UAAA,EAAA,KAAA;AAAA,MAiB8BC,kBAAA,CAAA,2aAAA,CAAA;AAAA,MAAAC,UAAA,CAAU,IAAW,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA;AAAA,QAAU,MAAA;AAAA,QAAoB,WAAA;AAAA,QAAA,UAAA;AAO3E,QAAA,UAAA;AAAA,OAAA,CAAA,CAAA,EACG,MAAK;AAAA,QAAAC,kBAAA,CACS,UAAOC,UAAiB,CAAA;AAAA,UACtC,OAAO,EAAA,WAAA;AAAA,UACP,gBAAU,MAAU,CAAA,QAAA,CAAA,QAAA,EAAA;AAAA,UACrB,KAAA,EAAA,UAAA;AAAA,UACA,QAAK,EAAA,UAAA;AAAA,UACS,WAAA,EAAA,QAAA;AAAA,UAEd,IAAA,EAAA,UAAA;AAAA,SAAA,EAIA,IAA6D,CAAA,MAAA,CAAA,EAAA;AAAA,UAAAL,kBAAA,CArCrE,2HAqC2D,CAAA;AAAA,UAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,EAAA,MAAA;;AArC3D,cAAAK,eAAA,CAAA,MAAA,CAAA,KAAA,CAAA;AAAA,cAAA,CAAA;AAAA;AAAA,aAAA;AAAA,WAAA,CAAA;;AAAA,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

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

@@ -11,6 +11,7 @@ var _sfc_main = defineComponent({
     name: 'SimpleFilter',
     xModule: facetsXModule.name,
     components: { RenderlessFilter: _sfc_main$1 },
+    inheritAttrs: false,
     props: {
         /** The filter data to render. */
         filter: {