@empathyco/x-components 7.2.3 → 7.2.4

package/js/x-modules/device/components/device-detector.vue.js

@@ -1,4 +1,4 @@
-import _sfc_main from './device-detector2.vue.js';
+import _sfc_main from './device-detector.vue2.js';
 import { resolveComponent, openBlock, createBlock, createCommentVNode } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 

package/js/x-modules/device/components/{device-detector2.vue.js → device-detector.vue2.js}

@@ -124,4 +124,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=device-detector2.vue.js.map
+//# sourceMappingURL=device-detector.vue2.js.map

package/js/x-modules/device/components/{device-detector2.vue.js.map → device-detector.vue2.js.map}

@@ -1 +1 @@
-{"version":3,"file":"device-detector2.vue.js","sources":["../../../../../src/x-modules/device/components/device-detector.vue"],"sourcesContent":["<template>\n  <GlobalEvents v-if=\"!force\" target=\"window\" @resize=\"throttledStoreWindowWidth\" />\n</template>\n\n<script lang=\"ts\">\nimport type { PropType, Ref } from 'vue'\nimport { computed, defineComponent, onMounted, ref, watch } from 'vue'\nimport { GlobalEvents } from 'vue-global-events'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { throttle } from '../../../utils/throttle'\nimport { deviceXModule } from '../x-module'\n\n/** Alias just to improve code readiness. */\ntype Device = string\n/** Alias just to improve code readiness. */\ntype MaxWidth = number\n\n/**\n * This component helps to detect or setting a device, that can be used later to create\n * different layouts optimized for different devices. This detected device is available under\n * the {@link XComponentAliasAPI.device} property.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'DeviceDetector',\n  xModule: deviceXModule.name,\n  components: { GlobalEvents },\n  props: {\n    /**\n     * Record of the device name, that can be whatever you want `xs`, `mobile`, `big`... And\n     * the max width in pixels for that device.\n     *\n     * @public\n     */\n    breakpoints: {\n      type: Object as PropType<Record<Device, MaxWidth>>,\n      default: () => ({}),\n    },\n    /**\n     * Forces a device, ignoring the breakpoints prop.\n     *\n     * @public\n     */\n    force: String as PropType<Device>,\n\n    /**\n     * Time in milliseconds to throttle the resize events used to detect the device.\n     *\n     * @public\n     */\n    throttleMs: {\n      type: Number,\n      default: 100,\n    },\n  },\n  setup(props) {\n    const xBus = useXBus()\n\n    /**\n     * The width in pixels of the window where the app is being rendered.\n     *\n     * @internal\n     */\n    const windowWidthPx: Ref<number | null> = ref(null)\n\n    /**\n     * Stores the window width in {@link DeviceDetector.windowWidthPx}.\n     *\n     * @internal\n     */\n    const storeWindowWidth = (): void => {\n      windowWidthPx.value = window.innerWidth\n    }\n\n    /**\n     * Throttled version of {@link DeviceDetector.storeWindowWidth} function.\n     *\n     * @internal\n     */\n    let throttledStoreWindowWidth = storeWindowWidth\n\n    /**\n     * List of each of the entries of the breakpoints sorted from the smallest to the biggest\n     * max width.\n     *\n     * @returns A list of the breakpoints sorted by its max width in ascending order.\n     *\n     * @internal\n     */\n    const sortedBreakpoints = computed((): [Device, MaxWidth][] =>\n      Object.entries(props.breakpoints).sort(([, aWidth], [, bWidth]) => aWidth - bWidth),\n    )\n\n    /**\n     * The device detected by this component, or the value provided in {@link DeviceDetector.force}\n     * prop.\n     *\n     * @returns The detected device, or the value provided in {@link DeviceDetector.force}\n     * prop.\n     *\n     * @internal\n     */\n    const detectedDevice = computed((): string | null => {\n      if (props.force) {\n        return props.force\n      } else if (windowWidthPx.value === null) {\n        return null\n      } else {\n        return (\n          sortedBreakpoints.value.find(([, width]) => windowWidthPx.value! <= width)?.[0] ?? null\n        )\n      }\n    })\n\n    watch(\n      detectedDevice,\n      device => {\n        xBus.emit('DeviceProvided', device)\n      },\n      { immediate: true },\n    )\n\n    /**\n     * Updates {@link DeviceDetector.throttledStoreWindowWidth} with the throttle time at\n     * {@link DeviceDetector.throttleMs}.\n     *\n     * @param throttleMs - The new duration in milliseconds for the throttle.\n     *\n     * @internal\n     */\n    watch(\n      () => props.throttleMs,\n      throttleMs => {\n        throttledStoreWindowWidth = throttle(storeWindowWidth, throttleMs)\n      },\n      { immediate: true },\n    )\n\n    /**\n     * Initialises the store window width.\n     *\n     * @remarks This is done this way to ensure SSR compatibility.\n     *\n     * @internal\n     */\n    onMounted(() => {\n      storeWindowWidth()\n    })\n\n    return {\n      throttledStoreWindowWidth,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`DeviceProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component renders no element to the DOM, but serves as way to safely detect or set the device\nname given an object containing all the possible breakpoints.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" />\n    {{ x.device }}\n  </div>\n</template>\n\n<script setup>\nimport { reactive } from 'vue'\nimport { DeviceDetector } from '@empathyco/x-components/device'\nimport { use$x } from '../../../composables/use-$x'\n\nconst x = use$x()\nconst breakpoints = reactive({\n  mobile: 600,\n  tablet: 900,\n  desktop: Number.POSITIVE_INFINITY,\n})\n</script>\n```\n\n### Play with props\n\nIn this example, the `DeviceDetector` has been forced to always detect the `mobile` device. No\nmatter what the window width is.\n\n_Try resizing the window to check that it never changes_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector force=\"mobile\" :breakpoints=\"breakpoints\" />\n    {{ x.device }}\n  </div>\n</template>\n\n<script setup>\nimport { reactive } from 'vue'\nimport { DeviceDetector } from '@empathyco/x-components/device'\nimport { use$x } from '../../../composables/use-$x'\n\nconst x = use$x()\nconst breakpoints = reactive({\n  mobile: 600,\n  tablet: 900,\n  desktop: Number.POSITIVE_INFINITY,\n})\n</script>\n```\n\n### Play with events\n\nIn this example, the `DeviceDetector` will emit a `DeviceProvided` event, with the new device as the\npayload. This device is stored in a ref and then displayed.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" @DeviceProvided=\"storeDevice\" />\n    {{ device }}\n  </div>\n</template>\n\n<script setup>\nimport { DeviceDetector } from '@empathyco/x-components/device'\nimport { reactive, ref } from 'vue'\nconst device = ref('unknown')\nconst breakpoints = reactive({\n  mobile: 600,\n  tablet: 900,\n  desktop: Number.POSITIVE_INFINITY,\n})\nfunction storeDevice(newDevice) {\n  device.value = newDevice\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAiBA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;IACtB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,YAAW,EAAG;AAC5B,IAAA,KAAK,EAAE;AACL;;;;;AAKE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,IAAI,EAAE,MAA4C;AAClD,YAAA,OAAO,EAAE,OAAO,EAAE,CAAC;AACpB,SAAA;AACD;;;;AAIE;AACF,QAAA,KAAK,EAAE,MAA0B;AAEjC;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,GAAG;AACb,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,IAAG,GAAI,OAAO,EAAC;AAErB;;;;AAIE;AACF,QAAA,MAAM,aAAa,GAAuB,GAAG,CAAC,IAAI,CAAA;AAElD;;;;AAIE;QACF,MAAM,gBAAe,GAAI,MAAU;AACjC,YAAA,aAAa,CAAC,KAAI,GAAI,MAAM,CAAC,UAAS;AACxC,QAAA,CAAA;AAEA;;;;AAIE;QACF,IAAI,4BAA4B,gBAAe;AAE/C;;;;;;;AAOE;AACF,QAAA,MAAM,iBAAgB,GAAI,QAAQ,CAAC,MACjC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM,CAAC,KAAK,MAAK,GAAI,MAAM,CAAC,CACrF;AAEA;;;;;;;;AAQE;AACF,QAAA,MAAM,cAAa,GAAI,QAAQ,CAAC,MAAmB;AACjD,YAAA,IAAI,KAAK,CAAC,KAAK,EAAE;gBACf,OAAO,KAAK,CAAC,KAAI;YACnB;AAAO,iBAAA,IAAI,aAAa,CAAC,KAAI,KAAM,IAAI,EAAE;AACvC,gBAAA,OAAO,IAAG;YACZ;iBAAO;AACL,gBAAA,QACE,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,aAAa,CAAC,KAAK,IAAK,KAAK,CAAC,GAAG,CAAC,CAAA,IAAK,IAAG;YAE1F;AACF,QAAA,CAAC,CAAA;AAED,QAAA,KAAK,CACH,cAAc,EACd,MAAK,IAAG;AACN,YAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAA;AACpC,QAAA,CAAC,EACD,EAAE,SAAS,EAAE,MAAM,CACrB;AAEA;;;;;;;AAOE;QACF,KAAK,CACH,MAAM,KAAK,CAAC,UAAU,EACtB,UAAS,IAAG;AACV,YAAA,yBAAwB,GAAI,QAAQ,CAAC,gBAAgB,EAAE,UAAU,CAAA;AACnE,QAAA,CAAC,EACD,EAAE,SAAS,EAAE,MAAM,CACrB;AAEA;;;;;;AAME;QACF,SAAS,CAAC,MAAI;AACZ,YAAA,gBAAgB,EAAC;AACnB,QAAA,CAAC,CAAA;QAED,OAAO;YACL,yBAAyB;SAC3B;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"device-detector.vue2.js","sources":["../../../../../src/x-modules/device/components/device-detector.vue"],"sourcesContent":["<template>\n  <GlobalEvents v-if=\"!force\" target=\"window\" @resize=\"throttledStoreWindowWidth\" />\n</template>\n\n<script lang=\"ts\">\nimport type { PropType, Ref } from 'vue'\nimport { computed, defineComponent, onMounted, ref, watch } from 'vue'\nimport { GlobalEvents } from 'vue-global-events'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { throttle } from '../../../utils/throttle'\nimport { deviceXModule } from '../x-module'\n\n/** Alias just to improve code readiness. */\ntype Device = string\n/** Alias just to improve code readiness. */\ntype MaxWidth = number\n\n/**\n * This component helps to detect or setting a device, that can be used later to create\n * different layouts optimized for different devices. This detected device is available under\n * the {@link XComponentAliasAPI.device} property.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'DeviceDetector',\n  xModule: deviceXModule.name,\n  components: { GlobalEvents },\n  props: {\n    /**\n     * Record of the device name, that can be whatever you want `xs`, `mobile`, `big`... And\n     * the max width in pixels for that device.\n     *\n     * @public\n     */\n    breakpoints: {\n      type: Object as PropType<Record<Device, MaxWidth>>,\n      default: () => ({}),\n    },\n    /**\n     * Forces a device, ignoring the breakpoints prop.\n     *\n     * @public\n     */\n    force: String as PropType<Device>,\n\n    /**\n     * Time in milliseconds to throttle the resize events used to detect the device.\n     *\n     * @public\n     */\n    throttleMs: {\n      type: Number,\n      default: 100,\n    },\n  },\n  setup(props) {\n    const xBus = useXBus()\n\n    /**\n     * The width in pixels of the window where the app is being rendered.\n     *\n     * @internal\n     */\n    const windowWidthPx: Ref<number | null> = ref(null)\n\n    /**\n     * Stores the window width in {@link DeviceDetector.windowWidthPx}.\n     *\n     * @internal\n     */\n    const storeWindowWidth = (): void => {\n      windowWidthPx.value = window.innerWidth\n    }\n\n    /**\n     * Throttled version of {@link DeviceDetector.storeWindowWidth} function.\n     *\n     * @internal\n     */\n    let throttledStoreWindowWidth = storeWindowWidth\n\n    /**\n     * List of each of the entries of the breakpoints sorted from the smallest to the biggest\n     * max width.\n     *\n     * @returns A list of the breakpoints sorted by its max width in ascending order.\n     *\n     * @internal\n     */\n    const sortedBreakpoints = computed((): [Device, MaxWidth][] =>\n      Object.entries(props.breakpoints).sort(([, aWidth], [, bWidth]) => aWidth - bWidth),\n    )\n\n    /**\n     * The device detected by this component, or the value provided in {@link DeviceDetector.force}\n     * prop.\n     *\n     * @returns The detected device, or the value provided in {@link DeviceDetector.force}\n     * prop.\n     *\n     * @internal\n     */\n    const detectedDevice = computed((): string | null => {\n      if (props.force) {\n        return props.force\n      } else if (windowWidthPx.value === null) {\n        return null\n      } else {\n        return (\n          sortedBreakpoints.value.find(([, width]) => windowWidthPx.value! <= width)?.[0] ?? null\n        )\n      }\n    })\n\n    watch(\n      detectedDevice,\n      device => {\n        xBus.emit('DeviceProvided', device)\n      },\n      { immediate: true },\n    )\n\n    /**\n     * Updates {@link DeviceDetector.throttledStoreWindowWidth} with the throttle time at\n     * {@link DeviceDetector.throttleMs}.\n     *\n     * @param throttleMs - The new duration in milliseconds for the throttle.\n     *\n     * @internal\n     */\n    watch(\n      () => props.throttleMs,\n      throttleMs => {\n        throttledStoreWindowWidth = throttle(storeWindowWidth, throttleMs)\n      },\n      { immediate: true },\n    )\n\n    /**\n     * Initialises the store window width.\n     *\n     * @remarks This is done this way to ensure SSR compatibility.\n     *\n     * @internal\n     */\n    onMounted(() => {\n      storeWindowWidth()\n    })\n\n    return {\n      throttledStoreWindowWidth,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`DeviceProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component renders no element to the DOM, but serves as way to safely detect or set the device\nname given an object containing all the possible breakpoints.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" />\n    {{ x.device }}\n  </div>\n</template>\n\n<script setup>\nimport { reactive } from 'vue'\nimport { DeviceDetector } from '@empathyco/x-components/device'\nimport { use$x } from '../../../composables/use-$x'\n\nconst x = use$x()\nconst breakpoints = reactive({\n  mobile: 600,\n  tablet: 900,\n  desktop: Number.POSITIVE_INFINITY,\n})\n</script>\n```\n\n### Play with props\n\nIn this example, the `DeviceDetector` has been forced to always detect the `mobile` device. No\nmatter what the window width is.\n\n_Try resizing the window to check that it never changes_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector force=\"mobile\" :breakpoints=\"breakpoints\" />\n    {{ x.device }}\n  </div>\n</template>\n\n<script setup>\nimport { reactive } from 'vue'\nimport { DeviceDetector } from '@empathyco/x-components/device'\nimport { use$x } from '../../../composables/use-$x'\n\nconst x = use$x()\nconst breakpoints = reactive({\n  mobile: 600,\n  tablet: 900,\n  desktop: Number.POSITIVE_INFINITY,\n})\n</script>\n```\n\n### Play with events\n\nIn this example, the `DeviceDetector` will emit a `DeviceProvided` event, with the new device as the\npayload. This device is stored in a ref and then displayed.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" @DeviceProvided=\"storeDevice\" />\n    {{ device }}\n  </div>\n</template>\n\n<script setup>\nimport { DeviceDetector } from '@empathyco/x-components/device'\nimport { reactive, ref } from 'vue'\nconst device = ref('unknown')\nconst breakpoints = reactive({\n  mobile: 600,\n  tablet: 900,\n  desktop: Number.POSITIVE_INFINITY,\n})\nfunction storeDevice(newDevice) {\n  device.value = newDevice\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAiBA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;IACtB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,YAAW,EAAG;AAC5B,IAAA,KAAK,EAAE;AACL;;;;;AAKE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,IAAI,EAAE,MAA4C;AAClD,YAAA,OAAO,EAAE,OAAO,EAAE,CAAC;AACpB,SAAA;AACD;;;;AAIE;AACF,QAAA,KAAK,EAAE,MAA0B;AAEjC;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,GAAG;AACb,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,IAAG,GAAI,OAAO,EAAC;AAErB;;;;AAIE;AACF,QAAA,MAAM,aAAa,GAAuB,GAAG,CAAC,IAAI,CAAA;AAElD;;;;AAIE;QACF,MAAM,gBAAe,GAAI,MAAU;AACjC,YAAA,aAAa,CAAC,KAAI,GAAI,MAAM,CAAC,UAAS;AACxC,QAAA,CAAA;AAEA;;;;AAIE;QACF,IAAI,4BAA4B,gBAAe;AAE/C;;;;;;;AAOE;AACF,QAAA,MAAM,iBAAgB,GAAI,QAAQ,CAAC,MACjC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM,CAAC,KAAK,MAAK,GAAI,MAAM,CAAC,CACrF;AAEA;;;;;;;;AAQE;AACF,QAAA,MAAM,cAAa,GAAI,QAAQ,CAAC,MAAmB;AACjD,YAAA,IAAI,KAAK,CAAC,KAAK,EAAE;gBACf,OAAO,KAAK,CAAC,KAAI;YACnB;AAAO,iBAAA,IAAI,aAAa,CAAC,KAAI,KAAM,IAAI,EAAE;AACvC,gBAAA,OAAO,IAAG;YACZ;iBAAO;AACL,gBAAA,QACE,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,aAAa,CAAC,KAAK,IAAK,KAAK,CAAC,GAAG,CAAC,CAAA,IAAK,IAAG;YAE1F;AACF,QAAA,CAAC,CAAA;AAED,QAAA,KAAK,CACH,cAAc,EACd,MAAK,IAAG;AACN,YAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAA;AACpC,QAAA,CAAC,EACD,EAAE,SAAS,EAAE,MAAM,CACrB;AAEA;;;;;;;AAOE;QACF,KAAK,CACH,MAAM,KAAK,CAAC,UAAU,EACtB,UAAS,IAAG;AACV,YAAA,yBAAwB,GAAI,QAAQ,CAAC,gBAAgB,EAAE,UAAU,CAAA;AACnE,QAAA,CAAC,EACD,EAAE,SAAS,EAAE,MAAM,CACrB;AAEA;;;;;;AAME;QACF,SAAS,CAAC,MAAI;AACZ,YAAA,gBAAgB,EAAC;AACnB,QAAA,CAAC,CAAA;QAED,OAAO;YACL,yBAAyB;SAC3B;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/empathize/components/empathize.vue.js

@@ -1,4 +1,4 @@
-import _sfc_main from './empathize2.vue.js';
+import _sfc_main from './empathize.vue2.js';
 import { openBlock, createBlock, resolveDynamicComponent, withCtx, withDirectives, createElementVNode, withModifiers, renderSlot, vShow } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 

package/js/x-modules/empathize/components/{empathize2.vue.js → empathize.vue2.js}

@@ -1,95 +1,95 @@
 import { defineComponent, ref, computed, watch } from 'vue';
-import '../../../components/animations/animate-clip-path2.vue.js';
-import '../../../components/animations/animate-scale2.vue.js';
-import '../../../components/animations/animate-translate2.vue.js';
-import '../../../components/animations/animate-width2.vue.js';
-import '../../../components/animations/animate-width3.vue.js';
-import '../../../components/animations/change-height2.vue.js';
-import '../../../components/animations/change-height3.vue.js';
-import '../../../components/animations/collapse-height2.vue.js';
-import '../../../components/animations/collapse-height3.vue.js';
-import '../../../components/animations/collapse-width2.vue.js';
-import '../../../components/animations/collapse-width3.vue.js';
-import '../../../components/animations/cross-fade2.vue.js';
-import '../../../components/animations/cross-fade3.vue.js';
-import '../../../components/animations/fade-and-slide2.vue.js';
-import '../../../components/animations/fade-and-slide3.vue.js';
-import '../../../components/animations/fade2.vue.js';
-import '../../../components/animations/fade3.vue.js';
+import '../../../components/animations/animate-clip-path.vue2.js';
+import '../../../components/animations/animate-scale.vue2.js';
+import '../../../components/animations/animate-translate.vue2.js';
+import '../../../components/animations/animate-width.vue2.js';
+import '../../../components/animations/animate-width.vue3.js';
+import '../../../components/animations/change-height.vue2.js';
+import '../../../components/animations/change-height.vue3.js';
+import '../../../components/animations/collapse-height.vue2.js';
+import '../../../components/animations/collapse-height.vue3.js';
+import '../../../components/animations/collapse-width.vue2.js';
+import '../../../components/animations/collapse-width.vue3.js';
+import '../../../components/animations/cross-fade.vue2.js';
+import '../../../components/animations/cross-fade.vue3.js';
+import '../../../components/animations/fade-and-slide.vue2.js';
+import '../../../components/animations/fade-and-slide.vue3.js';
+import '../../../components/animations/fade.vue2.js';
+import '../../../components/animations/fade.vue3.js';
 import _sfc_main$1 from '../../../components/animations/no-animation.vue.js';
-import '../../../components/animations/staggered-fade-and-slide2.vue.js';
-import '../../../components/animations/staggered-fade-and-slide3.vue.js';
-import '../../../components/auto-progress-bar2.vue.js';
-import '../../../components/auto-progress-bar3.vue.js';
-import '../../../components/base-dropdown2.vue.js';
-import '../../../components/base-dropdown3.vue.js';
-import '../../../components/base-event-button2.vue.js';
-import '../../../components/base-grid2.vue.js';
-import '../../../components/base-grid3.vue.js';
-import '../../../components/base-keyboard-navigation2.vue.js';
-import '../../../components/base-rating2.vue.js';
-import '../../../components/base-rating3.vue.js';
-import '../../../components/base-slider2.vue.js';
-import '../../../components/base-slider3.vue.js';
-import '../../../components/base-switch2.vue.js';
-import '../../../components/base-switch3.vue.js';
-import '../../../components/base-teleport2.vue.js';
-import '../../../components/base-variable-column-grid2.vue.js';
-import '../../../components/column-picker/base-column-picker-dropdown2.vue.js';
-import '../../../components/column-picker/base-column-picker-list2.vue.js';
-import '../../../components/currency/base-currency2.vue.js';
+import '../../../components/animations/staggered-fade-and-slide.vue2.js';
+import '../../../components/animations/staggered-fade-and-slide.vue3.js';
+import '../../../components/auto-progress-bar.vue2.js';
+import '../../../components/auto-progress-bar.vue3.js';
+import '../../../components/base-dropdown.vue2.js';
+import '../../../components/base-dropdown.vue3.js';
+import '../../../components/base-event-button.vue2.js';
+import '../../../components/base-grid.vue2.js';
+import '../../../components/base-grid.vue3.js';
+import '../../../components/base-keyboard-navigation.vue2.js';
+import '../../../components/base-rating.vue2.js';
+import '../../../components/base-rating.vue3.js';
+import '../../../components/base-slider.vue2.js';
+import '../../../components/base-slider.vue3.js';
+import '../../../components/base-switch.vue2.js';
+import '../../../components/base-switch.vue3.js';
+import '../../../components/base-teleport.vue2.js';
+import '../../../components/base-variable-column-grid.vue2.js';
+import '../../../components/column-picker/base-column-picker-dropdown.vue2.js';
+import '../../../components/column-picker/base-column-picker-list.vue2.js';
+import '../../../components/currency/base-currency.vue2.js';
 import '../../../components/display-click-provider.vue.js';
 import '../../../components/display-emitter.vue.js';
 import '../../../components/filters/labels/base-price-filter-label.vue.js';
-import '../../../components/filters/labels/base-rating-filter-label2.vue.js';
+import '../../../components/filters/labels/base-rating-filter-label.vue2.js';
 import '../../../components/global-x-bus.vue.js';
-import '../../../components/highlight2.vue.js';
-import '../../../components/items-list2.vue.js';
+import '../../../components/highlight.vue2.js';
+import '../../../components/items-list.vue2.js';
 import '../../../components/location-provider.vue.js';
 import { AnimationProp } from '../../../types/animation-prop.js';
-import '../../../components/modals/base-events-modal-close2.vue.js';
-import '../../../components/modals/base-events-modal-open2.vue.js';
-import '../../../components/modals/base-events-modal2.vue.js';
-import '../../../components/modals/base-id-modal-close2.vue.js';
-import '../../../components/modals/base-id-modal-open2.vue.js';
-import '../../../components/modals/base-id-modal2.vue.js';
-import '../../../components/modals/base-modal2.vue.js';
-import '../../../components/modals/base-modal3.vue.js';
-import '../../../components/modals/close-main-modal2.vue.js';
-import '../../../components/modals/main-modal2.vue.js';
-import '../../../components/modals/open-main-modal2.vue.js';
-import '../../../components/page-loader-button2.vue.js';
-import '../../../components/page-loader-button3.vue.js';
-import '../../../components/page-selector2.vue.js';
-import '../../../components/page-selector3.vue.js';
-import '../../../components/panels/base-header-toggle-panel2.vue.js';
-import '../../../components/panels/base-header-toggle-panel3.vue.js';
-import '../../../components/panels/base-id-toggle-panel-button2.vue.js';
-import '../../../components/panels/base-id-toggle-panel2.vue.js';
-import '../../../components/panels/base-tabs-panel2.vue.js';
-import '../../../components/panels/base-tabs-panel3.vue.js';
-import '../../../components/panels/base-toggle-panel2.vue.js';
-import '../../../components/result/base-result-add-to-cart2.vue.js';
-import '../../../components/result/base-result-current-price2.vue.js';
-import '../../../components/result/base-result-image2.vue.js';
-import '../../../components/result/base-result-image3.vue.js';
-import '../../../components/result/base-result-link2.vue.js';
-import '../../../components/result/base-result-link3.vue.js';
-import '../../../components/result/base-result-previous-price2.vue.js';
-import '../../../components/result/base-result-rating2.vue.js';
-import '../../../components/result/base-result-rating3.vue.js';
-import '../../../components/result/result-variant-selector2.vue.js';
-import '../../../components/result/result-variant-selector3.vue.js';
+import '../../../components/modals/base-events-modal-close.vue2.js';
+import '../../../components/modals/base-events-modal-open.vue2.js';
+import '../../../components/modals/base-events-modal.vue2.js';
+import '../../../components/modals/base-id-modal-close.vue2.js';
+import '../../../components/modals/base-id-modal-open.vue2.js';
+import '../../../components/modals/base-id-modal.vue2.js';
+import '../../../components/modals/base-modal.vue2.js';
+import '../../../components/modals/base-modal.vue3.js';
+import '../../../components/modals/close-main-modal.vue2.js';
+import '../../../components/modals/main-modal.vue2.js';
+import '../../../components/modals/open-main-modal.vue2.js';
+import '../../../components/page-loader-button.vue2.js';
+import '../../../components/page-loader-button.vue3.js';
+import '../../../components/page-selector.vue2.js';
+import '../../../components/page-selector.vue3.js';
+import '../../../components/panels/base-header-toggle-panel.vue2.js';
+import '../../../components/panels/base-header-toggle-panel.vue3.js';
+import '../../../components/panels/base-id-toggle-panel-button.vue2.js';
+import '../../../components/panels/base-id-toggle-panel.vue2.js';
+import '../../../components/panels/base-tabs-panel.vue2.js';
+import '../../../components/panels/base-tabs-panel.vue3.js';
+import '../../../components/panels/base-toggle-panel.vue2.js';
+import '../../../components/result/base-result-add-to-cart.vue2.js';
+import '../../../components/result/base-result-current-price.vue2.js';
+import '../../../components/result/base-result-image.vue2.js';
+import '../../../components/result/base-result-image.vue3.js';
+import '../../../components/result/base-result-link.vue2.js';
+import '../../../components/result/base-result-link.vue3.js';
+import '../../../components/result/base-result-previous-price.vue2.js';
+import '../../../components/result/base-result-rating.vue2.js';
+import '../../../components/result/base-result-rating.vue3.js';
+import '../../../components/result/result-variant-selector.vue2.js';
+import '../../../components/result/result-variant-selector.vue3.js';
 import '../../../components/result/result-variants-provider.vue.js';
-import '../../../components/scroll/base-scroll2.vue.js';
+import '../../../components/scroll/base-scroll.vue2.js';
 import '@empathyco/x-utils';
 import { use$x } from '../../../composables/use-_x.js';
-import '../../../components/sliding-panel2.vue.js';
-import '../../../components/sliding-panel3.vue.js';
-import '../../../components/snippet-callbacks2.vue.js';
-import '../../../components/suggestions/base-suggestion2.vue.js';
-import '../../../components/suggestions/base-suggestions2.vue.js';
-import '../../../components/suggestions/base-suggestions3.vue.js';
+import '../../../components/sliding-panel.vue2.js';
+import '../../../components/sliding-panel.vue3.js';
+import '../../../components/snippet-callbacks.vue2.js';
+import '../../../components/suggestions/base-suggestion.vue2.js';
+import '../../../components/suggestions/base-suggestions.vue2.js';
+import '../../../components/suggestions/base-suggestions.vue3.js';
 import '../../../composables/create-use-device.js';
 import 'vuex';
 import '../../../plugins/x-bus.js';
@@ -214,4 +214,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=empathize2.vue.js.map
+//# sourceMappingURL=empathize.vue2.js.map

package/js/x-modules/empathize/components/{empathize2.vue.js.map → empathize.vue2.js.map}

@@ -1 +1 @@
-{"version":3,"file":"empathize2.vue.js","sources":["../../../../../src/x-modules/empathize/components/empathize.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\">\n    <div\n      v-show=\"isOpenAndHasContent\"\n      ref=\"empathizeRef\"\n      class=\"x-empathize\"\n      data-test=\"empathize\"\n      @mousedown.prevent\n      @focusin=\"open\"\n      @focusout=\"close\"\n    >\n      <!-- @slot (Required) Modal container content -->\n      <slot />\n    </div>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType, WatchStopHandle } from 'vue'\nimport type { XEvent } from '../../../wiring'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport { NoAnimation } from '../../../components'\nimport { use$x, useDebounce } from '../../../composables'\nimport { AnimationProp } from '../../../types'\nimport { getActiveElement } from '../../../utils'\nimport { empathizeXModule } from '../x-module'\n\n/**\n * Component containing the empathize. It has a required slot to define its content.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Empathize',\n  xModule: empathizeXModule.name,\n  props: {\n    /** Array of {@link XEvent} to open the empathize. */\n    eventsToOpenEmpathize: {\n      type: Array as PropType<XEvent[]>,\n      default: () => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox'],\n    },\n    /** Array of {@link XEvent} to close the empathize. */\n    eventsToCloseEmpathize: {\n      type: Array as PropType<XEvent[]>,\n      default: () => [\n        'UserClosedEmpathize',\n        'UserSelectedASuggestion',\n        'UserPressedEnterKey',\n        'UserBlurredSearchBox',\n      ],\n    },\n    /** Animation component that will be used to animate the empathize. */\n    animation: {\n      type: AnimationProp,\n      default: () => NoAnimation,\n    },\n    /** Whether the empathize has content or not. As it is only known in the client, it is a prop. */\n    hasContent: {\n      type: Boolean,\n      default: true,\n    },\n    /** Fallback flag to trigger a search and close the empathize when has no-content. */\n    searchAndCloseOnNoContent: {\n      type: Boolean,\n      default: false,\n    },\n    /** Debounce time in milliseconds to search and close the empathize when has no-content. */\n    searchAndCloseDebounceInMs: {\n      type: Number,\n      default: 1000,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const empathizeRef = ref<HTMLDivElement | null>(null)\n    const isOpen = ref(false)\n    const isOpenAndHasContent = computed(() => isOpen.value && props.hasContent)\n\n    /** Emit 'EmpathizeOpened' or 'EmpathizeClosed' event when computed changes. */\n    watch(isOpenAndHasContent, () => {\n      const empathizeEvent = isOpenAndHasContent.value ? 'EmpathizeOpened' : 'EmpathizeClosed'\n      $x.emit(empathizeEvent, undefined, { target: empathizeRef.value })\n    })\n\n    /** Debounce function to change the state `isOpen` to the new value. */\n    const changeOpenDebounced = useDebounce((newOpen: boolean) => (isOpen.value = newOpen), 0)\n\n    /**\n     * Open empathize. This function will be executed on any event in\n     * {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on the Empathize root\n     * element.\n     */\n    function open() {\n      changeOpenDebounced(true)\n    }\n\n    /**\n     * Close empathize. This function will be executed on any event in\n     * {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on the Empathize root\n     * element.\n     */\n    function close() {\n      const activeElement = getActiveElement()\n      if (!empathizeRef.value?.contains(activeElement)) {\n        changeOpenDebounced(false)\n      }\n    }\n\n    /** Events subscriptions to open and close empathize. */\n    props.eventsToOpenEmpathize.forEach(event => $x.on(event, false).subscribe(open))\n    props.eventsToCloseEmpathize.forEach(event => $x.on(event, false).subscribe(close))\n\n    let unwatchSearchBoxQuery: WatchStopHandle = () => {}\n\n    /** Debounced function to unwatch the search-box query and also search and close empathize. */\n    const searchAndCloseDebounced = useDebounce(async () => {\n      if (isOpen.value) {\n        unwatchSearchBoxQuery()\n        await $x.emit('UserAcceptedAQuery', $x.query.searchBox)\n        close()\n      }\n    }, props.searchAndCloseDebounceInMs)\n\n    /**\n     * Watcher triggered when `hasContent` change and the `searchAndCloseOnNoContent` flag is active\n     * with the following casuistics:\n     * 1. Empathize has content: unwatch the search-box query and cancel debounced search&close.\n     * 2. Empathize has NO content: create a watcher for the search-box query. It is to debounce the\n     * search fallback when the user types in the search-box during debounced time.\n     */\n    watch(\n      () => props.hasContent,\n      () => {\n        if (props.searchAndCloseOnNoContent) {\n          if (props.hasContent) {\n            unwatchSearchBoxQuery()\n            searchAndCloseDebounced.cancel()\n          } else {\n            unwatchSearchBoxQuery = watch(() => $x.query.searchBox, searchAndCloseDebounced, {\n              immediate: true,\n            })\n          }\n        }\n      },\n    )\n\n    return { empathizeRef, isOpenAndHasContent, open, close }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`EmpathizeOpened`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after receiving an event to change the state `isOpen` to `true` and `hasContent` to `true`.\n  The event payload is undefined and can have a metadata with the module and the element that emitted it.\n- [`EmpathizeClosed`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after receiving an event to change the state `isOpen` to `false` and `hasContent` to `true`.\n  The event payload is undefined and can have a metadata with the module and the element that emitted it.\n\n## Examples\n\nThis component will listen to the configured events in `eventsToOpenEmpathize` and\n`eventsToCloseEmpathize` props and open/close itself accordingly. By default, those props values\nare:\n\n- Open: `UserFocusedSearchBox`, `UserIsTypingAQuery`, `UserClickedSearchBox`\n- Close: `UserClosedEmpathize`, `UserSelectedASuggestion`, `UserPressedEnterKey`, `UserBlurredSearchBox`\n\n### Basic example\n\nThe component rendering the query suggestions, popular searches and history queries with keyboard\nnavigation.\n\n```vue\n<template>\n  <Empathize>\n    <BaseKeyboardNavigation>\n      <QuerySuggestions />\n      <PopularSearches />\n      <HistoryQueries />\n    </BaseKeyboardNavigation>\n  </Empathize>\n</template>\n\n<script setup>\nimport Empathize from '@empathyco/x-components/js/x-modules/empathize/components/empathize.vue'\nimport BaseKeyboardNavigation from '@empathyco/x-components/js/components/base-keyboard-navigation.vue'\nimport QuerySuggestions from '@empathyco/x-components/js/x-modules/query-suggestions/components/query-suggestions.vue'\nimport PopularSearches from '@empathyco/x-components/js/x-modules/popular-searches/components/popular-searches.vue'\nimport HistoryQueries from '@empathyco/x-components/js/x-modules/history-queries/components/history-queries.vue'\n</script>\n```\n\nDefining custom values for the events to open and close the Empathize. For example, opening it when\nthe search box loses the focus and closing it when the search box receives the focus:\n\n```vue\n<template>\n  <Empathize\n    :events-to-open-empathize=\"['UserBlurredSearchBox']\"\n    :events-to-close-empathize=\"['UserFocusedSearchBox']\"\n  >\n    Please, type a query in the Search Box.\n  </Empathize>\n</template>\n\n<script setup>\nimport Empathize from '@empathyco/x-components/js/x-modules/empathize/components/empathize.vue'\n</script>\n```\n\nAn animation can be used for the opening and closing using the `animation` prop. The animation must\nbe a component with a `Transition` and a slot inside:\n\n```vue\n<template>\n  <Empathize :animation=\"collapseFromTop\">\n    <PopularSearches />\n  </Empathize>\n</template>\n\n<script setup>\nimport Empathize from '@empathyco/x-components/js/x-modules/empathize/components/empathize.vue'\nimport PopularSearches from '@empathyco/x-components/js/x-modules/popular-searches/components/popular-searches.vue'\nimport CollapseFromTop from './collapseFromTop.vue'\nconst animation = CollapseFromTop\n</script>\n```\n\n### Advanced example\n\nThe component rendering the query suggestions, popular searches and history queries with keyboard\nnavigation. It also configures `searchAndCloseOnNoContent` to trigger a search and close the empathize\nwhen it has no content as fallback behaviour. To do that, `hasContent` prop must be reactive to know\nif the empathize has content or not. It also configures `searchAndCloseDebounceInMs` to 500ms as debounce time to search and close the empathize when it has no content.\n\n```vue\n<template>\n  <Empathize\n    :animation=\"empathizeAnimation\"\n    :events-to-close-empathize=\"empathizeCloseEvents\"\n    :has-content=\"showEmpathize\"\n    :search-and-close-debounce-in-ms=\"500\"\n    search-and-close-on-no-content\n  >\n    <BaseKeyboardNavigation>\n      <QuerySuggestions />\n      <PopularSearches />\n      <HistoryQueries />\n    </BaseKeyboardNavigation>\n  </Empathize>\n</template>\n\n<script setup>\nimport Empathize from '@empathyco/x-components/js/x-modules/empathize/components/empathize.vue'\nimport BaseKeyboardNavigation from '@empathyco/x-components/js/components/base-keyboard-navigation.vue'\nimport QuerySuggestions from '@empathyco/x-components/js/x-modules/query-suggestions/components/query-suggestions.vue'\nimport PopularSearches from '@empathyco/x-components/js/x-modules/popular-searches/components/popular-searches.vue'\nimport HistoryQueries from '@empathyco/x-components/js/x-modules/history-queries/components/history-queries.vue'\nimport CollapseFromTop from './collapseFromTop.vue'\nimport { ref } from 'vue'\nconst empathizeAnimation = CollapseFromTop\nconst empathizeCloseEvents = ['UserClosedEmpathize', 'UserSelectedASuggestion']\nconst showEmpathize = ref(true)\n</script>\n```\n</docs>\n"],"names":["NoAnimation"],"mappings":"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"}
+{"version":3,"file":"empathize.vue2.js","sources":["../../../../../src/x-modules/empathize/components/empathize.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\">\n    <div\n      v-show=\"isOpenAndHasContent\"\n      ref=\"empathizeRef\"\n      class=\"x-empathize\"\n      data-test=\"empathize\"\n      @mousedown.prevent\n      @focusin=\"open\"\n      @focusout=\"close\"\n    >\n      <!-- @slot (Required) Modal container content -->\n      <slot />\n    </div>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType, WatchStopHandle } from 'vue'\nimport type { XEvent } from '../../../wiring'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport { NoAnimation } from '../../../components'\nimport { use$x, useDebounce } from '../../../composables'\nimport { AnimationProp } from '../../../types'\nimport { getActiveElement } from '../../../utils'\nimport { empathizeXModule } from '../x-module'\n\n/**\n * Component containing the empathize. It has a required slot to define its content.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Empathize',\n  xModule: empathizeXModule.name,\n  props: {\n    /** Array of {@link XEvent} to open the empathize. */\n    eventsToOpenEmpathize: {\n      type: Array as PropType<XEvent[]>,\n      default: () => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox'],\n    },\n    /** Array of {@link XEvent} to close the empathize. */\n    eventsToCloseEmpathize: {\n      type: Array as PropType<XEvent[]>,\n      default: () => [\n        'UserClosedEmpathize',\n        'UserSelectedASuggestion',\n        'UserPressedEnterKey',\n        'UserBlurredSearchBox',\n      ],\n    },\n    /** Animation component that will be used to animate the empathize. */\n    animation: {\n      type: AnimationProp,\n      default: () => NoAnimation,\n    },\n    /** Whether the empathize has content or not. As it is only known in the client, it is a prop. */\n    hasContent: {\n      type: Boolean,\n      default: true,\n    },\n    /** Fallback flag to trigger a search and close the empathize when has no-content. */\n    searchAndCloseOnNoContent: {\n      type: Boolean,\n      default: false,\n    },\n    /** Debounce time in milliseconds to search and close the empathize when has no-content. */\n    searchAndCloseDebounceInMs: {\n      type: Number,\n      default: 1000,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const empathizeRef = ref<HTMLDivElement | null>(null)\n    const isOpen = ref(false)\n    const isOpenAndHasContent = computed(() => isOpen.value && props.hasContent)\n\n    /** Emit 'EmpathizeOpened' or 'EmpathizeClosed' event when computed changes. */\n    watch(isOpenAndHasContent, () => {\n      const empathizeEvent = isOpenAndHasContent.value ? 'EmpathizeOpened' : 'EmpathizeClosed'\n      $x.emit(empathizeEvent, undefined, { target: empathizeRef.value })\n    })\n\n    /** Debounce function to change the state `isOpen` to the new value. */\n    const changeOpenDebounced = useDebounce((newOpen: boolean) => (isOpen.value = newOpen), 0)\n\n    /**\n     * Open empathize. This function will be executed on any event in\n     * {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on the Empathize root\n     * element.\n     */\n    function open() {\n      changeOpenDebounced(true)\n    }\n\n    /**\n     * Close empathize. This function will be executed on any event in\n     * {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on the Empathize root\n     * element.\n     */\n    function close() {\n      const activeElement = getActiveElement()\n      if (!empathizeRef.value?.contains(activeElement)) {\n        changeOpenDebounced(false)\n      }\n    }\n\n    /** Events subscriptions to open and close empathize. */\n    props.eventsToOpenEmpathize.forEach(event => $x.on(event, false).subscribe(open))\n    props.eventsToCloseEmpathize.forEach(event => $x.on(event, false).subscribe(close))\n\n    let unwatchSearchBoxQuery: WatchStopHandle = () => {}\n\n    /** Debounced function to unwatch the search-box query and also search and close empathize. */\n    const searchAndCloseDebounced = useDebounce(async () => {\n      if (isOpen.value) {\n        unwatchSearchBoxQuery()\n        await $x.emit('UserAcceptedAQuery', $x.query.searchBox)\n        close()\n      }\n    }, props.searchAndCloseDebounceInMs)\n\n    /**\n     * Watcher triggered when `hasContent` change and the `searchAndCloseOnNoContent` flag is active\n     * with the following casuistics:\n     * 1. Empathize has content: unwatch the search-box query and cancel debounced search&close.\n     * 2. Empathize has NO content: create a watcher for the search-box query. It is to debounce the\n     * search fallback when the user types in the search-box during debounced time.\n     */\n    watch(\n      () => props.hasContent,\n      () => {\n        if (props.searchAndCloseOnNoContent) {\n          if (props.hasContent) {\n            unwatchSearchBoxQuery()\n            searchAndCloseDebounced.cancel()\n          } else {\n            unwatchSearchBoxQuery = watch(() => $x.query.searchBox, searchAndCloseDebounced, {\n              immediate: true,\n            })\n          }\n        }\n      },\n    )\n\n    return { empathizeRef, isOpenAndHasContent, open, close }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`EmpathizeOpened`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after receiving an event to change the state `isOpen` to `true` and `hasContent` to `true`.\n  The event payload is undefined and can have a metadata with the module and the element that emitted it.\n- [`EmpathizeClosed`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after receiving an event to change the state `isOpen` to `false` and `hasContent` to `true`.\n  The event payload is undefined and can have a metadata with the module and the element that emitted it.\n\n## Examples\n\nThis component will listen to the configured events in `eventsToOpenEmpathize` and\n`eventsToCloseEmpathize` props and open/close itself accordingly. By default, those props values\nare:\n\n- Open: `UserFocusedSearchBox`, `UserIsTypingAQuery`, `UserClickedSearchBox`\n- Close: `UserClosedEmpathize`, `UserSelectedASuggestion`, `UserPressedEnterKey`, `UserBlurredSearchBox`\n\n### Basic example\n\nThe component rendering the query suggestions, popular searches and history queries with keyboard\nnavigation.\n\n```vue\n<template>\n  <Empathize>\n    <BaseKeyboardNavigation>\n      <QuerySuggestions />\n      <PopularSearches />\n      <HistoryQueries />\n    </BaseKeyboardNavigation>\n  </Empathize>\n</template>\n\n<script setup>\nimport Empathize from '@empathyco/x-components/js/x-modules/empathize/components/empathize.vue'\nimport BaseKeyboardNavigation from '@empathyco/x-components/js/components/base-keyboard-navigation.vue'\nimport QuerySuggestions from '@empathyco/x-components/js/x-modules/query-suggestions/components/query-suggestions.vue'\nimport PopularSearches from '@empathyco/x-components/js/x-modules/popular-searches/components/popular-searches.vue'\nimport HistoryQueries from '@empathyco/x-components/js/x-modules/history-queries/components/history-queries.vue'\n</script>\n```\n\nDefining custom values for the events to open and close the Empathize. For example, opening it when\nthe search box loses the focus and closing it when the search box receives the focus:\n\n```vue\n<template>\n  <Empathize\n    :events-to-open-empathize=\"['UserBlurredSearchBox']\"\n    :events-to-close-empathize=\"['UserFocusedSearchBox']\"\n  >\n    Please, type a query in the Search Box.\n  </Empathize>\n</template>\n\n<script setup>\nimport Empathize from '@empathyco/x-components/js/x-modules/empathize/components/empathize.vue'\n</script>\n```\n\nAn animation can be used for the opening and closing using the `animation` prop. The animation must\nbe a component with a `Transition` and a slot inside:\n\n```vue\n<template>\n  <Empathize :animation=\"collapseFromTop\">\n    <PopularSearches />\n  </Empathize>\n</template>\n\n<script setup>\nimport Empathize from '@empathyco/x-components/js/x-modules/empathize/components/empathize.vue'\nimport PopularSearches from '@empathyco/x-components/js/x-modules/popular-searches/components/popular-searches.vue'\nimport CollapseFromTop from './collapseFromTop.vue'\nconst animation = CollapseFromTop\n</script>\n```\n\n### Advanced example\n\nThe component rendering the query suggestions, popular searches and history queries with keyboard\nnavigation. It also configures `searchAndCloseOnNoContent` to trigger a search and close the empathize\nwhen it has no content as fallback behaviour. To do that, `hasContent` prop must be reactive to know\nif the empathize has content or not. It also configures `searchAndCloseDebounceInMs` to 500ms as debounce time to search and close the empathize when it has no content.\n\n```vue\n<template>\n  <Empathize\n    :animation=\"empathizeAnimation\"\n    :events-to-close-empathize=\"empathizeCloseEvents\"\n    :has-content=\"showEmpathize\"\n    :search-and-close-debounce-in-ms=\"500\"\n    search-and-close-on-no-content\n  >\n    <BaseKeyboardNavigation>\n      <QuerySuggestions />\n      <PopularSearches />\n      <HistoryQueries />\n    </BaseKeyboardNavigation>\n  </Empathize>\n</template>\n\n<script setup>\nimport Empathize from '@empathyco/x-components/js/x-modules/empathize/components/empathize.vue'\nimport BaseKeyboardNavigation from '@empathyco/x-components/js/components/base-keyboard-navigation.vue'\nimport QuerySuggestions from '@empathyco/x-components/js/x-modules/query-suggestions/components/query-suggestions.vue'\nimport PopularSearches from '@empathyco/x-components/js/x-modules/popular-searches/components/popular-searches.vue'\nimport HistoryQueries from '@empathyco/x-components/js/x-modules/history-queries/components/history-queries.vue'\nimport CollapseFromTop from './collapseFromTop.vue'\nimport { ref } from 'vue'\nconst empathizeAnimation = CollapseFromTop\nconst empathizeCloseEvents = ['UserClosedEmpathize', 'UserSelectedASuggestion']\nconst showEmpathize = ref(true)\n</script>\n```\n</docs>\n"],"names":["NoAnimation"],"mappings":"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"}

package/js/x-modules/experience-controls/components/{experience-controls2.vue.js → experience-controls.vue2.js}

@@ -3,4 +3,4 @@ import _sfc_main from './experience-controls.vue.js';
 
 
 export { _sfc_main as default };
-//# sourceMappingURL=experience-controls2.vue.js.map
+//# sourceMappingURL=experience-controls.vue2.js.map

package/js/x-modules/experience-controls/components/experience-controls.vue2.js.map

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

package/js/x-modules/extra-params/components/{extra-params2.vue.js → extra-params.vue2.js}

@@ -3,4 +3,4 @@ import _sfc_main from './extra-params.vue.js';
 
 
 export { _sfc_main as default };
-//# sourceMappingURL=extra-params2.vue.js.map
+//# sourceMappingURL=extra-params.vue2.js.map

package/js/x-modules/extra-params/components/extra-params.vue2.js.map

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

package/js/x-modules/extra-params/components/{renderless-extra-param2.vue.js → renderless-extra-param.vue2.js}

@@ -3,4 +3,4 @@ import _sfc_main from './renderless-extra-param.vue.js';
 
 
 export { _sfc_main as default };
-//# sourceMappingURL=renderless-extra-param2.vue.js.map
+//# sourceMappingURL=renderless-extra-param.vue2.js.map

package/js/x-modules/extra-params/components/renderless-extra-param.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderless-extra-param.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/js/x-modules/extra-params/components/snippet-config-extra-params.vue.js

@@ -1,4 +1,4 @@
-import _sfc_main from './snippet-config-extra-params2.vue.js';
+import _sfc_main from './snippet-config-extra-params.vue2.js';
 import { resolveComponent, openBlock, createBlock } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 

package/js/x-modules/extra-params/components/{snippet-config-extra-params2.vue.js → snippet-config-extra-params.vue2.js}

@@ -47,4 +47,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=snippet-config-extra-params2.vue.js.map
+//# sourceMappingURL=snippet-config-extra-params.vue2.js.map

package/js/x-modules/extra-params/components/{snippet-config-extra-params2.vue.js.map → snippet-config-extra-params.vue2.js.map}

@@ -1 +1 @@
-{"version":3,"file":"snippet-config-extra-params2.vue.js","sources":["../../../../../src/x-modules/extra-params/components/snippet-config-extra-params.vue"],"sourcesContent":["<template>\n  <ExtraParams :values=\"extraParams\" />\n</template>\n\n<script lang=\"ts\">\nimport type { Dictionary } from '@empathyco/x-utils'\nimport type { PropType } from 'vue'\nimport type { SnippetConfig } from '../../../x-installer/api/api.types'\nimport { forEach } from '@empathyco/x-utils'\nimport { defineComponent, inject, ref, watch } from 'vue'\nimport { extraParamsXModule } from '../x-module'\nimport ExtraParams from './extra-params.vue'\n\nexport default defineComponent({\n  name: 'SnippetConfigExtraParams',\n  xModule: extraParamsXModule.name,\n  components: {\n    ExtraParams,\n  },\n  props: {\n    values: {\n      type: Object as PropType<Dictionary<unknown>>,\n    },\n    excludedExtraParams: {\n      type: Array as PropType<Array<keyof SnippetConfig>>,\n      default: (): Array<keyof SnippetConfig> => [\n        'callbacks',\n        'productId',\n        'uiLang',\n        'consent',\n        'documentDirection',\n        'filters',\n        'isSpa',\n        'queriesPreview',\n      ],\n    },\n  },\n  setup(props) {\n    const snippetConfig = inject('snippetConfig') as SnippetConfig\n    const extraParams = ref<Record<string, any>>({})\n\n    watch(\n      [() => snippetConfig, () => props.values],\n      () => {\n        forEach({ ...props.values, ...snippetConfig }, (name, value) => {\n          if (!props.excludedExtraParams.includes(name) && extraParams.value[name] !== value) {\n            extraParams.value = { ...extraParams.value, [name]: value }\n          }\n        })\n      },\n      {\n        deep: true,\n        immediate: true,\n      },\n    )\n\n    return {\n      extraParams,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## See it in action\n\n_See how the snippet config is injected and passed to the SnippetConfigExtraParams component._\n\n```vue\n<template>\n  <Provider>\n    <SnippetConfigExtraParams />\n  </Provider>\n</template>\n\n<script setup>\nimport { SnippetConfigExtraParams } from '@empathyco/x-components/extra-params'\nimport { defineComponent, provide } from 'vue'\n\nconst Provider = defineComponent({\n  setup(_, { slots }) {\n    provide('snippetConfig', {\n      instance: 'demo',\n      lang: 'es',\n      warehouse: 1234,\n    })\n    return () => slots.default?.()\n  },\n})\n</script>\n```\n</docs>\n"],"names":["ExtraParams"],"mappings":";;;;;AAaA,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,0BAA0B;IAChC,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,UAAU,EAAE;qBACVA,WAAW;AACZ,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAuC;AAC9C,SAAA;AACD,QAAA,mBAAmB,EAAE;AACnB,YAAA,IAAI,EAAE,KAA6C;YACnD,OAAO,EAAE,MAAkC;gBACzC,WAAW;gBACX,WAAW;gBACX,QAAQ;gBACR,SAAS;gBACT,mBAAmB;gBACnB,SAAS;gBACT,OAAO;gBACP,gBAAgB;AACjB,aAAA;AACF,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,aAAY,GAAI,MAAM,CAAC,eAAe,CAAiB;AAC7D,QAAA,MAAM,cAAc,GAAG,CAAsB,EAAE,CAAA;AAE/C,QAAA,KAAK,CACH,CAAC,MAAM,aAAa,EAAE,MAAM,KAAK,CAAC,MAAM,CAAC,EACzC,MAAI;AACF,YAAA,OAAO,CAAC,EAAE,GAAG,KAAK,CAAC,MAAM,EAAE,GAAG,aAAY,EAAG,EAAE,CAAC,IAAI,EAAE,KAAK,KAAG;AAC5D,gBAAA,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAA,IAAK,WAAW,CAAC,KAAK,CAAC,IAAI,CAAA,KAAM,KAAK,EAAE;AAClF,oBAAA,WAAW,CAAC,KAAI,GAAI,EAAE,GAAG,WAAW,CAAC,KAAK,EAAE,CAAC,IAAI,GAAG,KAAI,EAAE;gBAC5D;AACF,YAAA,CAAC,CAAA;AACH,QAAA,CAAC,EACD;AACE,YAAA,IAAI,EAAE,IAAI;AACV,YAAA,SAAS,EAAE,IAAI;AAChB,SAAA,CACH;QAEA,OAAO;YACL,WAAW;SACb;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"snippet-config-extra-params.vue2.js","sources":["../../../../../src/x-modules/extra-params/components/snippet-config-extra-params.vue"],"sourcesContent":["<template>\n  <ExtraParams :values=\"extraParams\" />\n</template>\n\n<script lang=\"ts\">\nimport type { Dictionary } from '@empathyco/x-utils'\nimport type { PropType } from 'vue'\nimport type { SnippetConfig } from '../../../x-installer/api/api.types'\nimport { forEach } from '@empathyco/x-utils'\nimport { defineComponent, inject, ref, watch } from 'vue'\nimport { extraParamsXModule } from '../x-module'\nimport ExtraParams from './extra-params.vue'\n\nexport default defineComponent({\n  name: 'SnippetConfigExtraParams',\n  xModule: extraParamsXModule.name,\n  components: {\n    ExtraParams,\n  },\n  props: {\n    values: {\n      type: Object as PropType<Dictionary<unknown>>,\n    },\n    excludedExtraParams: {\n      type: Array as PropType<Array<keyof SnippetConfig>>,\n      default: (): Array<keyof SnippetConfig> => [\n        'callbacks',\n        'productId',\n        'uiLang',\n        'consent',\n        'documentDirection',\n        'filters',\n        'isSpa',\n        'queriesPreview',\n      ],\n    },\n  },\n  setup(props) {\n    const snippetConfig = inject('snippetConfig') as SnippetConfig\n    const extraParams = ref<Record<string, any>>({})\n\n    watch(\n      [() => snippetConfig, () => props.values],\n      () => {\n        forEach({ ...props.values, ...snippetConfig }, (name, value) => {\n          if (!props.excludedExtraParams.includes(name) && extraParams.value[name] !== value) {\n            extraParams.value = { ...extraParams.value, [name]: value }\n          }\n        })\n      },\n      {\n        deep: true,\n        immediate: true,\n      },\n    )\n\n    return {\n      extraParams,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## See it in action\n\n_See how the snippet config is injected and passed to the SnippetConfigExtraParams component._\n\n```vue\n<template>\n  <Provider>\n    <SnippetConfigExtraParams />\n  </Provider>\n</template>\n\n<script setup>\nimport { SnippetConfigExtraParams } from '@empathyco/x-components/extra-params'\nimport { defineComponent, provide } from 'vue'\n\nconst Provider = defineComponent({\n  setup(_, { slots }) {\n    provide('snippetConfig', {\n      instance: 'demo',\n      lang: 'es',\n      warehouse: 1234,\n    })\n    return () => slots.default?.()\n  },\n})\n</script>\n```\n</docs>\n"],"names":["ExtraParams"],"mappings":";;;;;AAaA,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,0BAA0B;IAChC,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,UAAU,EAAE;qBACVA,WAAW;AACZ,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAuC;AAC9C,SAAA;AACD,QAAA,mBAAmB,EAAE;AACnB,YAAA,IAAI,EAAE,KAA6C;YACnD,OAAO,EAAE,MAAkC;gBACzC,WAAW;gBACX,WAAW;gBACX,QAAQ;gBACR,SAAS;gBACT,mBAAmB;gBACnB,SAAS;gBACT,OAAO;gBACP,gBAAgB;AACjB,aAAA;AACF,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,aAAY,GAAI,MAAM,CAAC,eAAe,CAAiB;AAC7D,QAAA,MAAM,cAAc,GAAG,CAAsB,EAAE,CAAA;AAE/C,QAAA,KAAK,CACH,CAAC,MAAM,aAAa,EAAE,MAAM,KAAK,CAAC,MAAM,CAAC,EACzC,MAAI;AACF,YAAA,OAAO,CAAC,EAAE,GAAG,KAAK,CAAC,MAAM,EAAE,GAAG,aAAY,EAAG,EAAE,CAAC,IAAI,EAAE,KAAK,KAAG;AAC5D,gBAAA,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAA,IAAK,WAAW,CAAC,KAAK,CAAC,IAAI,CAAA,KAAM,KAAK,EAAE;AAClF,oBAAA,WAAW,CAAC,KAAI,GAAI,EAAE,GAAG,WAAW,CAAC,KAAK,EAAE,CAAC,IAAI,GAAG,KAAI,EAAE;gBAC5D;AACF,YAAA,CAAC,CAAA;AACH,QAAA,CAAC,EACD;AACE,YAAA,IAAI,EAAE,IAAI;AACV,YAAA,SAAS,EAAE,IAAI;AAChB,SAAA,CACH;QAEA,OAAO;YACL,WAAW;SACb;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

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

@@ -1,4 +1,4 @@
-import _sfc_main from './clear-filters2.vue.js';
+import _sfc_main from './clear-filters.vue2.js';
 import { resolveComponent, openBlock, createBlock, normalizeClass, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 

package/js/x-modules/facets/components/{clear-filters2.vue.js → clear-filters.vue2.js}

@@ -48,4 +48,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=clear-filters2.vue.js.map
+//# sourceMappingURL=clear-filters.vue2.js.map

package/js/x-modules/facets/components/{clear-filters2.vue.js.map → clear-filters.vue2.js.map}

@@ -1 +1 @@
-{"version":3,"file":"clear-filters2.vue.js","sources":["../../../../../src/x-modules/facets/components/clear-filters.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    v-if=\"isVisible\"\n    class=\"x-clear-filters xds:button\"\n    data-test=\"clear-filters\"\n    :disabled=\"!hasSelectedFilters\"\n    :events=\"events\"\n    :class=\"cssClasses\"\n  >\n    <slot :selected-filters=\"selectedFilters\">Clear Filters ({{ selectedFilters.length }})</slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { Facet } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { useFacets } from '../composables/use-facets'\nimport { facetsXModule } from '../x-module'\n\n/**\n * Renders a simple button, emitting the needed events when clicked.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'ClearFilters',\n  xModule: facetsXModule.name,\n  components: { BaseEventButton },\n  props: {\n    /** Array of facets ids used to get the selected filters for those facets. */\n    facetsIds: Array as PropType<Array<Facet['id']>>,\n    /** Flag to render the component even if there are no filters selected. */\n    alwaysVisible: Boolean,\n  },\n  setup(props) {\n    const { selectedFilters, hasSelectedFilters, isVisible } = useFacets(props)\n\n    /**\n     * The events that will be emitted when the button clear filters is clicked.\n     *\n     * @returns The events to be emitted when the button clear filters is clicked.\n     */\n    const events = computed<Partial<XEventsTypes>>(() => ({\n      UserClickedClearAllFilters: props.facetsIds,\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     */\n    const cssClasses = computed<VueCSSClasses>(() => ({\n      'x-clear-filters--has-not-selected-filters': !hasSelectedFilters.value,\n      'x-clear-filters--has-selected-filters': hasSelectedFilters.value,\n    }))\n\n    return {\n      selectedFilters,\n      hasSelectedFilters,\n      isVisible,\n      events,\n      cssClasses,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedClearAllFilters`](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 to clear a certain facets filter. The event\n  payload is the id of the facets that are going to be cleared.\n- [`UserClickedClearAllFilters`](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. The event payload is undefined.\n\n## Examples\n\nThis component renders a button, which on clicked emits the `UserClickedClearAllFilters` or\n`UserClickedClearAllFilters` event.\n\n### Basic usage\n\n```vue\n<template>\n  <ClearFilters />\n</template>\n\n<script setup>\nimport { ClearFilters } from '@empathyco/x-components/facets'\n</script>\n```\n\n### Customizing its contents\n\nIn this example, show the custom message in button.\n\n```vue\n<template>\n  <ClearFilters v-slot=\"{ selectedFilters }\">\n    Delete {{ selectedFilters.length }} selected\n  </ClearFilters>\n</template>\n\n<script setup>\nimport { ClearFilters } from '@empathyco/x-components/facets'\n</script>\n```\n\nIn this example, show the custom message in button with always visible a true and list of facets\nids.\n\n```vue\n<template>\n  <ClearFilters v-slot=\"{ selectedFilters }\" :alwaysVisible=\"true\" :facetsIds=\"facetsIds\">\n    Delete {{ selectedFilters.length }} selected\n  </ClearFilters>\n</template>\n\n<script setup>\nimport { ClearFilters } from '@empathyco/x-components/facets'\nimport { ref } from 'vue'\n\nconst facetsIds = ref(['brand_facet', 'gender_facet'])\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAuBA;;;;AAIE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;IACpB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE,KAAqC;;AAEhD,QAAA,aAAa,EAAE,OAAO;AACvB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAE,eAAe,EAAE,kBAAkB,EAAE,SAAQ,EAAE,GAAI,SAAS,CAAC,KAAK,CAAA;AAE1E;;;;AAIE;AACF,QAAA,MAAM,MAAK,GAAI,QAAQ,CAAwB,OAAO;YACpD,0BAA0B,EAAE,KAAK,CAAC,SAAS;AAC5C,SAAA,CAAC,CAAA;AAEF;;;;AAIE;AACF,QAAA,MAAM,UAAS,GAAI,QAAQ,CAAgB,OAAO;AAChD,YAAA,2CAA2C,EAAE,CAAC,kBAAkB,CAAC,KAAK;YACtE,uCAAuC,EAAE,kBAAkB,CAAC,KAAK;AAClE,SAAA,CAAC,CAAA;QAEF,OAAO;YACL,eAAe;YACf,kBAAkB;YAClB,SAAS;YACT,MAAM;YACN,UAAU;SACZ;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"clear-filters.vue2.js","sources":["../../../../../src/x-modules/facets/components/clear-filters.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    v-if=\"isVisible\"\n    class=\"x-clear-filters xds:button\"\n    data-test=\"clear-filters\"\n    :disabled=\"!hasSelectedFilters\"\n    :events=\"events\"\n    :class=\"cssClasses\"\n  >\n    <slot :selected-filters=\"selectedFilters\">Clear Filters ({{ selectedFilters.length }})</slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { Facet } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { useFacets } from '../composables/use-facets'\nimport { facetsXModule } from '../x-module'\n\n/**\n * Renders a simple button, emitting the needed events when clicked.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'ClearFilters',\n  xModule: facetsXModule.name,\n  components: { BaseEventButton },\n  props: {\n    /** Array of facets ids used to get the selected filters for those facets. */\n    facetsIds: Array as PropType<Array<Facet['id']>>,\n    /** Flag to render the component even if there are no filters selected. */\n    alwaysVisible: Boolean,\n  },\n  setup(props) {\n    const { selectedFilters, hasSelectedFilters, isVisible } = useFacets(props)\n\n    /**\n     * The events that will be emitted when the button clear filters is clicked.\n     *\n     * @returns The events to be emitted when the button clear filters is clicked.\n     */\n    const events = computed<Partial<XEventsTypes>>(() => ({\n      UserClickedClearAllFilters: props.facetsIds,\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     */\n    const cssClasses = computed<VueCSSClasses>(() => ({\n      'x-clear-filters--has-not-selected-filters': !hasSelectedFilters.value,\n      'x-clear-filters--has-selected-filters': hasSelectedFilters.value,\n    }))\n\n    return {\n      selectedFilters,\n      hasSelectedFilters,\n      isVisible,\n      events,\n      cssClasses,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedClearAllFilters`](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 to clear a certain facets filter. The event\n  payload is the id of the facets that are going to be cleared.\n- [`UserClickedClearAllFilters`](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. The event payload is undefined.\n\n## Examples\n\nThis component renders a button, which on clicked emits the `UserClickedClearAllFilters` or\n`UserClickedClearAllFilters` event.\n\n### Basic usage\n\n```vue\n<template>\n  <ClearFilters />\n</template>\n\n<script setup>\nimport { ClearFilters } from '@empathyco/x-components/facets'\n</script>\n```\n\n### Customizing its contents\n\nIn this example, show the custom message in button.\n\n```vue\n<template>\n  <ClearFilters v-slot=\"{ selectedFilters }\">\n    Delete {{ selectedFilters.length }} selected\n  </ClearFilters>\n</template>\n\n<script setup>\nimport { ClearFilters } from '@empathyco/x-components/facets'\n</script>\n```\n\nIn this example, show the custom message in button with always visible a true and list of facets\nids.\n\n```vue\n<template>\n  <ClearFilters v-slot=\"{ selectedFilters }\" :alwaysVisible=\"true\" :facetsIds=\"facetsIds\">\n    Delete {{ selectedFilters.length }} selected\n  </ClearFilters>\n</template>\n\n<script setup>\nimport { ClearFilters } from '@empathyco/x-components/facets'\nimport { ref } from 'vue'\n\nconst facetsIds = ref(['brand_facet', 'gender_facet'])\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAuBA;;;;AAIE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;IACpB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE,KAAqC;;AAEhD,QAAA,aAAa,EAAE,OAAO;AACvB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAE,eAAe,EAAE,kBAAkB,EAAE,SAAQ,EAAE,GAAI,SAAS,CAAC,KAAK,CAAA;AAE1E;;;;AAIE;AACF,QAAA,MAAM,MAAK,GAAI,QAAQ,CAAwB,OAAO;YACpD,0BAA0B,EAAE,KAAK,CAAC,SAAS;AAC5C,SAAA,CAAC,CAAA;AAEF;;;;AAIE;AACF,QAAA,MAAM,UAAS,GAAI,QAAQ,CAAgB,OAAO;AAChD,YAAA,2CAA2C,EAAE,CAAC,kBAAkB,CAAC,KAAK;YACtE,uCAAuC,EAAE,kBAAkB,CAAC,KAAK;AAClE,SAAA,CAAC,CAAA;QAEF,OAAO;YACL,eAAe;YACf,kBAAkB;YAClB,SAAS;YACT,MAAM;YACN,UAAU;SACZ;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

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

@@ -1,5 +1,5 @@
-import _sfc_main from './facets-provider2.vue.js';
-import './facets-provider3.vue.js';
+import _sfc_main from './facets-provider.vue2.js';
+import './facets-provider.vue3.js';
 import _export_sfc from '../../../../_virtual/_plugin-vue_export-helper.js';
 
 var facetsProvider = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-67bd3b28"]]);

package/js/x-modules/facets/components/facets/{facets-provider2.vue.js → facets-provider.vue2.js}

@@ -100,4 +100,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=facets-provider2.vue.js.map
+//# sourceMappingURL=facets-provider.vue2.js.map

package/js/x-modules/facets/components/facets/{facets-provider2.vue.js.map → facets-provider.vue2.js.map}

@@ -1 +1 @@
-{"version":3,"file":"facets-provider2.vue.js","sources":["../../../../../../src/x-modules/facets/components/facets/facets-provider.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Facet, Filter } from '@empathyco/x-types'\nimport type { PropType, Ref } from 'vue'\nimport type { GroupId } from '../../store/types'\nimport { isHierarchicalFacet } from '@empathyco/x-types'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport { use$x } from '../../../../composables/use-$x'\nimport { clone } from '../../../../utils'\nimport { areFiltersDifferent } from '../../../../utils/filters'\nimport { flatHierarchicalFilters } from '../../utils'\nimport { facetsXModule } from '../../x-module'\n\n/**\n * This component allows to provide facets by prop, to add them to the state of the\n * `Facets X-Module`. These facets will be added to the `Facets X-Module` state together with\n * the facets emitted by the `Search X-Module` through the {@link SearchXEvents.FacetsChanged}\n * event.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'FacetsProvider',\n  xModule: facetsXModule.name,\n  props: {\n    /**\n     * An facet group identifier to distinguish the provided facets from other facets like the\n     * `Search X-Module` facets.\n     *\n     * @public\n     */\n    groupId: {\n      type: String as PropType<GroupId>,\n      default: 'provided-facets',\n    },\n    /**\n     * The facets to provide to the `Facets X-Module` state. They have to include the\n     * {@link @empathyco/x-types#Filter}.\n     *\n     * @internal\n     */\n    facets: {\n      type: Array as PropType<Facet[]>,\n      required: true,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    /**\n     * Temporarily stores the selected filters from the {@link FacetsProvider.facets} prop.\n     * This is necessary to handle the {@link FacetsXEvents.UserChangedSelectedFilters} event.\n     *\n     * @internal\n     */\n    const selectedFilters: Ref<Filter[] | null> = ref(null)\n\n    /**\n     * A computed property to group the facets and the groupId. This is used by the watcher.\n     *\n     * @returns The FacetGroup with the facets and the group id.\n     *\n     * @internal\n     */\n    const facetsGroup = computed(() => ({ id: props.groupId, facets: props.facets }))\n\n    /**\n     * Emits the {@link FacetsXEvents.UserChangedSelectedFilters} event when the user changes\n     * the selected filters.\n     *\n     * @param selectedFilters - The new list of selected filters.\n     * @internal\n     */\n    $x.on('SelectedFiltersChanged', false).subscribe((selectedFiltersParams: Filter[]) => {\n      if (\n        selectedFilters.value === null ||\n        areFiltersDifferent(selectedFilters.value, selectedFiltersParams)\n      ) {\n        $x.emit('UserChangedSelectedFilters', selectedFiltersParams)\n      }\n      selectedFilters.value = null\n    })\n\n    /**\n     * Extracts the selected filters from the facets and stores them in the\n     * {@link FacetsProvider.selectedFilters} property.\n     *\n     * @param facets - The facets from whom extract the selected filters.\n     * @internal\n     */\n    const extractSelectedFilters = (facets: Facet[]) => {\n      selectedFilters.value = facets\n        .flatMap(facet =>\n          isHierarchicalFacet(facet) ? flatHierarchicalFilters(facet.filters) : facet.filters,\n        )\n        .filter(filter => filter.selected)\n    }\n\n    /**\n     * Emits the {@link FacetsXEvents.FacetsGroupProvided} event with the\n     * {@link FacetsProvider.facetsGroup} as payload. It also extracts and saves the selected\n     * filters.\n     */\n    watch(\n      () => facetsGroup.value,\n      () => {\n        if (facetsGroup.value.facets) {\n          const facetsGroupClone = clone(facetsGroup.value)\n          $x.emit('FacetsGroupProvided', facetsGroupClone)\n          extractSelectedFilters(props.facets)\n        }\n      },\n      { immediate: true },\n    )\n\n    return () => ''\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-facets-list {\n  list-style-type: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserChangedSelectedFilters`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user performed an action that changed the selected filters. The\n  payload is the new list of selected filters.\n- [`FacetsGroupProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after updating the facets prop with a new list of facets. The payload\n  contains a Facets Group with the facets and the group id.\n\n## Example\n\nThis component allows to provide facets by prop, to add them to the state of the `Facets X-Module`.\nThese facets will be added to the `Facets X-Module` state together with the facets emitted by the\n`Search X-Module` through the `SearchXEvents.FacetsChanged` event.\n\n```vue\n<template>\n  <FacetsProvider :facets=\"myFacets\" />\n</template>\n\n<script setup>\nimport { FacetsProvider } from '@empathyco/x-components/facets'\nimport { ref } from 'vue'\n\nconst myFacets = ref([\n  {\n    modelName: 'SimpleFacet',\n    id: 'color-facet',\n    label: 'Color',\n    filters: [\n      {\n        modelName: 'SimpleFilter',\n        id: 'color:red',\n        facetId: 'color-facet',\n        label: 'Red',\n        selected: false,\n        value: 'color:red',\n        totalResults: 10,\n      },\n      {\n        modelName: 'SimpleFilter',\n        id: 'color:blue',\n        facetId: 'color-facet',\n        label: 'Blue',\n        selected: false,\n        value: 'color:blue',\n        totalResults: 10,\n      },\n    ],\n  },\n])\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;AAYA;;;;;;;AAOE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;IACtB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;;AAKE;AACF,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAA2B;AACjC,YAAA,OAAO,EAAE,iBAAiB;AAC3B,SAAA;AACD;;;;;AAKE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,KAA0B;AAChC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AAEjB;;;;;AAKE;AACF,QAAA,MAAM,eAAe,GAAyB,GAAG,CAAC,IAAI,CAAA;AAEtD;;;;;;AAME;QACF,MAAM,WAAU,GAAI,QAAQ,CAAC,OAAO,EAAE,EAAE,EAAE,KAAK,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,MAAK,EAAG,CAAC,CAAA;AAEhF;;;;;;AAME;AACF,QAAA,EAAE,CAAC,EAAE,CAAC,wBAAwB,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,qBAA+B,KAAG;AAClF,YAAA,IACE,eAAe,CAAC,KAAI,KAAM,IAAG;gBAC7B,mBAAmB,CAAC,eAAe,CAAC,KAAK,EAAE,qBAAqB,CAAA,EAChE;AACA,gBAAA,EAAE,CAAC,IAAI,CAAC,4BAA4B,EAAE,qBAAqB,CAAA;YAC7D;AACA,YAAA,eAAe,CAAC,KAAI,GAAI,IAAG;AAC7B,QAAA,CAAC,CAAA;AAED;;;;;;AAME;AACF,QAAA,MAAM,yBAAyB,CAAC,MAAe,KAAG;YAChD,eAAe,CAAC,KAAI,GAAI;iBACrB,OAAO,CAAC,SACP,mBAAmB,CAAC,KAAK,CAAA,GAAI,uBAAuB,CAAC,KAAK,CAAC,OAAO,CAAA,GAAI,KAAK,CAAC,OAAO;iBAEpF,MAAM,CAAC,MAAK,IAAK,MAAM,CAAC,QAAQ,CAAA;AACrC,QAAA,CAAA;AAEA;;;;AAIE;QACF,KAAK,CACH,MAAM,WAAW,CAAC,KAAK,EACvB,MAAI;AACF,YAAA,IAAI,WAAW,CAAC,KAAK,CAAC,MAAM,EAAE;gBAC5B,MAAM,gBAAe,GAAI,KAAK,CAAC,WAAW,CAAC,KAAK,CAAA;AAChD,gBAAA,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,CAAA;AAC/C,gBAAA,sBAAsB,CAAC,KAAK,CAAC,MAAM,CAAA;YACrC;AACF,QAAA,CAAC,EACD,EAAE,SAAS,EAAE,MAAM,CACrB;AAEA,QAAA,OAAO,MAAM,EAAC;IAChB,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"facets-provider.vue2.js","sources":["../../../../../../src/x-modules/facets/components/facets/facets-provider.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Facet, Filter } from '@empathyco/x-types'\nimport type { PropType, Ref } from 'vue'\nimport type { GroupId } from '../../store/types'\nimport { isHierarchicalFacet } from '@empathyco/x-types'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport { use$x } from '../../../../composables/use-$x'\nimport { clone } from '../../../../utils'\nimport { areFiltersDifferent } from '../../../../utils/filters'\nimport { flatHierarchicalFilters } from '../../utils'\nimport { facetsXModule } from '../../x-module'\n\n/**\n * This component allows to provide facets by prop, to add them to the state of the\n * `Facets X-Module`. These facets will be added to the `Facets X-Module` state together with\n * the facets emitted by the `Search X-Module` through the {@link SearchXEvents.FacetsChanged}\n * event.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'FacetsProvider',\n  xModule: facetsXModule.name,\n  props: {\n    /**\n     * An facet group identifier to distinguish the provided facets from other facets like the\n     * `Search X-Module` facets.\n     *\n     * @public\n     */\n    groupId: {\n      type: String as PropType<GroupId>,\n      default: 'provided-facets',\n    },\n    /**\n     * The facets to provide to the `Facets X-Module` state. They have to include the\n     * {@link @empathyco/x-types#Filter}.\n     *\n     * @internal\n     */\n    facets: {\n      type: Array as PropType<Facet[]>,\n      required: true,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    /**\n     * Temporarily stores the selected filters from the {@link FacetsProvider.facets} prop.\n     * This is necessary to handle the {@link FacetsXEvents.UserChangedSelectedFilters} event.\n     *\n     * @internal\n     */\n    const selectedFilters: Ref<Filter[] | null> = ref(null)\n\n    /**\n     * A computed property to group the facets and the groupId. This is used by the watcher.\n     *\n     * @returns The FacetGroup with the facets and the group id.\n     *\n     * @internal\n     */\n    const facetsGroup = computed(() => ({ id: props.groupId, facets: props.facets }))\n\n    /**\n     * Emits the {@link FacetsXEvents.UserChangedSelectedFilters} event when the user changes\n     * the selected filters.\n     *\n     * @param selectedFilters - The new list of selected filters.\n     * @internal\n     */\n    $x.on('SelectedFiltersChanged', false).subscribe((selectedFiltersParams: Filter[]) => {\n      if (\n        selectedFilters.value === null ||\n        areFiltersDifferent(selectedFilters.value, selectedFiltersParams)\n      ) {\n        $x.emit('UserChangedSelectedFilters', selectedFiltersParams)\n      }\n      selectedFilters.value = null\n    })\n\n    /**\n     * Extracts the selected filters from the facets and stores them in the\n     * {@link FacetsProvider.selectedFilters} property.\n     *\n     * @param facets - The facets from whom extract the selected filters.\n     * @internal\n     */\n    const extractSelectedFilters = (facets: Facet[]) => {\n      selectedFilters.value = facets\n        .flatMap(facet =>\n          isHierarchicalFacet(facet) ? flatHierarchicalFilters(facet.filters) : facet.filters,\n        )\n        .filter(filter => filter.selected)\n    }\n\n    /**\n     * Emits the {@link FacetsXEvents.FacetsGroupProvided} event with the\n     * {@link FacetsProvider.facetsGroup} as payload. It also extracts and saves the selected\n     * filters.\n     */\n    watch(\n      () => facetsGroup.value,\n      () => {\n        if (facetsGroup.value.facets) {\n          const facetsGroupClone = clone(facetsGroup.value)\n          $x.emit('FacetsGroupProvided', facetsGroupClone)\n          extractSelectedFilters(props.facets)\n        }\n      },\n      { immediate: true },\n    )\n\n    return () => ''\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-facets-list {\n  list-style-type: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserChangedSelectedFilters`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user performed an action that changed the selected filters. The\n  payload is the new list of selected filters.\n- [`FacetsGroupProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after updating the facets prop with a new list of facets. The payload\n  contains a Facets Group with the facets and the group id.\n\n## Example\n\nThis component allows to provide facets by prop, to add them to the state of the `Facets X-Module`.\nThese facets will be added to the `Facets X-Module` state together with the facets emitted by the\n`Search X-Module` through the `SearchXEvents.FacetsChanged` event.\n\n```vue\n<template>\n  <FacetsProvider :facets=\"myFacets\" />\n</template>\n\n<script setup>\nimport { FacetsProvider } from '@empathyco/x-components/facets'\nimport { ref } from 'vue'\n\nconst myFacets = ref([\n  {\n    modelName: 'SimpleFacet',\n    id: 'color-facet',\n    label: 'Color',\n    filters: [\n      {\n        modelName: 'SimpleFilter',\n        id: 'color:red',\n        facetId: 'color-facet',\n        label: 'Red',\n        selected: false,\n        value: 'color:red',\n        totalResults: 10,\n      },\n      {\n        modelName: 'SimpleFilter',\n        id: 'color:blue',\n        facetId: 'color-facet',\n        label: 'Blue',\n        selected: false,\n        value: 'color:blue',\n        totalResults: 10,\n      },\n    ],\n  },\n])\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;AAYA;;;;;;;AAOE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;IACtB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;;AAKE;AACF,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAA2B;AACjC,YAAA,OAAO,EAAE,iBAAiB;AAC3B,SAAA;AACD;;;;;AAKE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,KAA0B;AAChC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AAEjB;;;;;AAKE;AACF,QAAA,MAAM,eAAe,GAAyB,GAAG,CAAC,IAAI,CAAA;AAEtD;;;;;;AAME;QACF,MAAM,WAAU,GAAI,QAAQ,CAAC,OAAO,EAAE,EAAE,EAAE,KAAK,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,MAAK,EAAG,CAAC,CAAA;AAEhF;;;;;;AAME;AACF,QAAA,EAAE,CAAC,EAAE,CAAC,wBAAwB,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,qBAA+B,KAAG;AAClF,YAAA,IACE,eAAe,CAAC,KAAI,KAAM,IAAG;gBAC7B,mBAAmB,CAAC,eAAe,CAAC,KAAK,EAAE,qBAAqB,CAAA,EAChE;AACA,gBAAA,EAAE,CAAC,IAAI,CAAC,4BAA4B,EAAE,qBAAqB,CAAA;YAC7D;AACA,YAAA,eAAe,CAAC,KAAI,GAAI,IAAG;AAC7B,QAAA,CAAC,CAAA;AAED;;;;;;AAME;AACF,QAAA,MAAM,yBAAyB,CAAC,MAAe,KAAG;YAChD,eAAe,CAAC,KAAI,GAAI;iBACrB,OAAO,CAAC,SACP,mBAAmB,CAAC,KAAK,CAAA,GAAI,uBAAuB,CAAC,KAAK,CAAC,OAAO,CAAA,GAAI,KAAK,CAAC,OAAO;iBAEpF,MAAM,CAAC,MAAK,IAAK,MAAM,CAAC,QAAQ,CAAA;AACrC,QAAA,CAAA;AAEA;;;;AAIE;QACF,KAAK,CACH,MAAM,WAAW,CAAC,KAAK,EACvB,MAAI;AACF,YAAA,IAAI,WAAW,CAAC,KAAK,CAAC,MAAM,EAAE;gBAC5B,MAAM,gBAAe,GAAI,KAAK,CAAC,WAAW,CAAC,KAAK,CAAA;AAChD,gBAAA,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,CAAA;AAC/C,gBAAA,sBAAsB,CAAC,KAAK,CAAC,MAAM,CAAA;YACrC;AACF,QAAA,CAAC,EACD,EAAE,SAAS,EAAE,MAAM,CACrB;AAEA,QAAA,OAAO,MAAM,EAAC;IAChB,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/facets/components/facets/{facets-provider3.vue.js → facets-provider.vue3.js}

@@ -4,4 +4,4 @@ var css = ".x-facets-list[data-v-67bd3b28]{list-style-type:none}";
 injectCss(css);
 
 export { css };
-//# sourceMappingURL=facets-provider3.vue.js.map
+//# sourceMappingURL=facets-provider.vue3.js.map

package/js/x-modules/facets/components/facets/facets-provider.vue3.js.map

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

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

@@ -1,6 +1,6 @@
-import _sfc_main from './facets2.vue.js';
+import _sfc_main from './facets.vue2.js';
 import { openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, renderSlot, mergeProps, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
-import './facets3.vue.js';
+import './facets.vue3.js';
 import _export_sfc from '../../../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {

package/js/x-modules/facets/components/facets/{facets2.vue.js → facets.vue2.js}

@@ -132,4 +132,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=facets2.vue.js.map
+//# sourceMappingURL=facets.vue2.js.map