@empathyco/x-components 6.0.0-alpha.17 → 6.0.0-alpha.170

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

@@ -1 +1 @@
-{"version":3,"file":"device-detector.vue.js","sources":["../../../../../src/x-modules/device/components/device-detector.vue"],"sourcesContent":["<template>\n  <GlobalEvents v-if=\"!force\" @resize=\"throttledStoreWindowWidth\" target=\"window\" />\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, onMounted, PropType, Ref, ref, watch } from 'vue';\n  import { GlobalEvents } from 'vue-global-events';\n  import { throttle } from '../../../utils/throttle';\n  import { deviceXModule } from '../x-module';\n  import { useXBus } from '../../../composables/use-x-bus';\n\n  /** Alias just to improve code readiness. */\n  type Device = string;\n  /** Alias just to improve code readiness. */\n  type 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   */\n  export 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>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    }\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>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    }\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 data variable 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>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        device: 'unknown',\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    },\n    methods: {\n      storeDevice(device) {\n        this.device = device;\n      }\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_createCommentVNode"],"mappings":";;;;;AAC4B,EAAA,MAAA,uBAAA,GAAAA,gBAAA,CAAA,cAAA,CAAA,CAAA;AAD5B,EAAA,OAAA,CAAA,IAAA,CAAA,KAAA,IAAAC,SAAA,EACgE,EAAAC,WAAA,CAAA,uBAAA,EAAA;AAAA,IAAE,GAAA,EAAA,CAAA;AAAA,IAAA,QAAA,EAAA,IAAA,CAAA,yBAAA;AADlE,IAAA,MAAA,EAAA,QAAA;AAAA,GAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,UAAA,CAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"device-detector.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>\nimport { DeviceDetector } from '@empathyco/x-components/device'\n\nexport default {\n  name: 'DeviceDemo',\n  components: {\n    DeviceDetector,\n  },\n  data() {\n    return {\n      breakpoints: {\n        mobile: 600,\n        tablet: 900,\n        desktop: Number.POSITIVE_INFINITY,\n      },\n    }\n  },\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>\nimport { DeviceDetector } from '@empathyco/x-components/device'\n\nexport default {\n  name: 'DeviceDemo',\n  components: {\n    DeviceDetector,\n  },\n  data() {\n    return {\n      breakpoints: {\n        mobile: 600,\n        tablet: 900,\n        desktop: Number.POSITIVE_INFINITY,\n      },\n    }\n  },\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 data variable 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>\nimport { DeviceDetector } from '@empathyco/x-components/device'\n\nexport default {\n  name: 'DeviceDemo',\n  components: {\n    DeviceDetector,\n  },\n  data() {\n    return {\n      device: 'unknown',\n      breakpoints: {\n        mobile: 600,\n        tablet: 900,\n        desktop: Number.POSITIVE_INFINITY,\n      },\n    }\n  },\n  methods: {\n    storeDevice(device) {\n      this.device = device\n    },\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_createCommentVNode"],"mappings":";;;;;;AACuB,EAAA,OAAA,CAAA,IAAA,CAAA,KAAA,IAAAA,SAAA,EAAA,EAArBC,WAAkF,CAAA,uBAAA,EAAA;AAAA,IADpF,GAAA,EAAA,CAAA;AAAA,IAC8B,MAAO,EAAA,QAAA;AAAA,IAAU,QAAQ,EAAA,IAAA,CAAA,yBAAA;AAAA,GADvD,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,UAAA,CAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

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

@@ -1,126 +1,126 @@
 import { defineComponent, ref, computed, watch, onMounted } from 'vue';
 import { GlobalEvents } from 'vue-global-events';
+import { useXBus } from '../../../composables/use-x-bus.js';
 import { throttle } from '../../../utils/throttle.js';
 import { deviceXModule } from '../x-module.js';
-import { useXBus } from '../../../composables/use-x-bus.js';
 
-/**
- * This component helps to detect or setting a device, that can be used later to create
- * different layouts optimized for different devices. This detected device is available under
- * the {@link XComponentAliasAPI.device} property.
- *
- * @public
- */
-var _sfc_main = defineComponent({
-    name: 'DeviceDetector',
-    xModule: deviceXModule.name,
-    components: { GlobalEvents },
-    props: {
-        /**
-         * Record of the device name, that can be whatever you want `xs`, `mobile`, `big`... And
-         * the max width in pixels for that device.
-         *
-         * @public
-         */
-        breakpoints: {
-            type: Object,
-            default: () => ({})
-        },
-        /**
-         * Forces a device, ignoring the breakpoints prop.
-         *
-         * @public
-         */
-        force: String,
-        /**
-         * Time in milliseconds to throttle the resize events used to detect the device.
-         *
-         * @public
-         */
-        throttleMs: {
-            type: Number,
-            default: 100
-        }
-    },
-    setup(props) {
-        const xBus = useXBus();
-        /**
-         * The width in pixels of the window where the app is being rendered.
-         *
-         * @internal
-         */
-        const windowWidthPx = ref(null);
-        /**
-         * Stores the window width in {@link DeviceDetector.windowWidthPx}.
-         *
-         * @internal
-         */
-        const storeWindowWidth = () => {
-            windowWidthPx.value = window.innerWidth;
-        };
-        /**
-         * Throttled version of {@link DeviceDetector.storeWindowWidth} function.
-         *
-         * @internal
-         */
-        let throttledStoreWindowWidth = storeWindowWidth;
-        /**
-         * List of each of the entries of the breakpoints sorted from the smallest to the biggest
-         * max width.
-         *
-         * @returns A list of the breakpoints sorted by its max width in ascending order.
-         *
-         * @internal
-         */
-        const sortedBreakpoints = computed(() => Object.entries(props.breakpoints).sort(([, aWidth], [, bWidth]) => aWidth - bWidth));
-        /**
-         * The device detected by this component, or the value provided in {@link DeviceDetector.force}
-         * prop.
-         *
-         * @returns The detected device, or the value provided in {@link DeviceDetector.force}
-         * prop.
-         *
-         * @internal
-         */
-        const detectedDevice = computed(() => {
-            if (props.force) {
-                return props.force;
-            }
-            else if (windowWidthPx.value === null) {
-                return null;
-            }
-            else {
-                return (sortedBreakpoints.value.find(([, width]) => windowWidthPx.value <= width)?.[0] ?? null);
-            }
-        });
-        watch(detectedDevice, device => {
-            xBus.emit('DeviceProvided', device);
-        }, { immediate: true });
-        /**
-         * Updates {@link DeviceDetector.throttledStoreWindowWidth} with the throttle time at
-         * {@link DeviceDetector.throttleMs}.
-         *
-         * @param throttleMs - The new duration in milliseconds for the throttle.
-         *
-         * @internal
-         */
-        watch(() => props.throttleMs, throttleMs => {
-            throttledStoreWindowWidth = throttle(storeWindowWidth, throttleMs);
-        }, { immediate: true });
-        /**
-         * Initialises the store window width.
-         *
-         * @remarks This is done this way to ensure SSR compatibility.
-         *
-         * @internal
-         */
-        onMounted(() => {
-            storeWindowWidth();
-        });
-        return {
-            throttledStoreWindowWidth
-        };
-    }
+/**
+ * This component helps to detect or setting a device, that can be used later to create
+ * different layouts optimized for different devices. This detected device is available under
+ * the {@link XComponentAliasAPI.device} property.
+ *
+ * @public
+ */
+var _sfc_main = defineComponent({
+    name: 'DeviceDetector',
+    xModule: deviceXModule.name,
+    components: { GlobalEvents },
+    props: {
+        /**
+         * Record of the device name, that can be whatever you want `xs`, `mobile`, `big`... And
+         * the max width in pixels for that device.
+         *
+         * @public
+         */
+        breakpoints: {
+            type: Object,
+            default: () => ({}),
+        },
+        /**
+         * Forces a device, ignoring the breakpoints prop.
+         *
+         * @public
+         */
+        force: String,
+        /**
+         * Time in milliseconds to throttle the resize events used to detect the device.
+         *
+         * @public
+         */
+        throttleMs: {
+            type: Number,
+            default: 100,
+        },
+    },
+    setup(props) {
+        const xBus = useXBus();
+        /**
+         * The width in pixels of the window where the app is being rendered.
+         *
+         * @internal
+         */
+        const windowWidthPx = ref(null);
+        /**
+         * Stores the window width in {@link DeviceDetector.windowWidthPx}.
+         *
+         * @internal
+         */
+        const storeWindowWidth = () => {
+            windowWidthPx.value = window.innerWidth;
+        };
+        /**
+         * Throttled version of {@link DeviceDetector.storeWindowWidth} function.
+         *
+         * @internal
+         */
+        let throttledStoreWindowWidth = storeWindowWidth;
+        /**
+         * List of each of the entries of the breakpoints sorted from the smallest to the biggest
+         * max width.
+         *
+         * @returns A list of the breakpoints sorted by its max width in ascending order.
+         *
+         * @internal
+         */
+        const sortedBreakpoints = computed(() => Object.entries(props.breakpoints).sort(([, aWidth], [, bWidth]) => aWidth - bWidth));
+        /**
+         * The device detected by this component, or the value provided in {@link DeviceDetector.force}
+         * prop.
+         *
+         * @returns The detected device, or the value provided in {@link DeviceDetector.force}
+         * prop.
+         *
+         * @internal
+         */
+        const detectedDevice = computed(() => {
+            if (props.force) {
+                return props.force;
+            }
+            else if (windowWidthPx.value === null) {
+                return null;
+            }
+            else {
+                return (sortedBreakpoints.value.find(([, width]) => windowWidthPx.value <= width)?.[0] ?? null);
+            }
+        });
+        watch(detectedDevice, device => {
+            xBus.emit('DeviceProvided', device);
+        }, { immediate: true });
+        /**
+         * Updates {@link DeviceDetector.throttledStoreWindowWidth} with the throttle time at
+         * {@link DeviceDetector.throttleMs}.
+         *
+         * @param throttleMs - The new duration in milliseconds for the throttle.
+         *
+         * @internal
+         */
+        watch(() => props.throttleMs, throttleMs => {
+            throttledStoreWindowWidth = throttle(storeWindowWidth, throttleMs);
+        }, { immediate: true });
+        /**
+         * Initialises the store window width.
+         *
+         * @remarks This is done this way to ensure SSR compatibility.
+         *
+         * @internal
+         */
+        onMounted(() => {
+            storeWindowWidth();
+        });
+        return {
+            throttledStoreWindowWidth,
+        };
+    },
 });
 
 export { _sfc_main as default };

package/js/x-modules/device/components/device-detector.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"device-detector.vue2.js","sources":["../../../../../src/x-modules/device/components/device-detector.vue"],"sourcesContent":["<template>\n  <GlobalEvents v-if=\"!force\" @resize=\"throttledStoreWindowWidth\" target=\"window\" />\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, onMounted, PropType, Ref, ref, watch } from 'vue';\n  import { GlobalEvents } from 'vue-global-events';\n  import { throttle } from '../../../utils/throttle';\n  import { deviceXModule } from '../x-module';\n  import { useXBus } from '../../../composables/use-x-bus';\n\n  /** Alias just to improve code readiness. */\n  type Device = string;\n  /** Alias just to improve code readiness. */\n  type 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   */\n  export 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>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    }\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>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    }\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 data variable 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>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        device: 'unknown',\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    },\n    methods: {\n      storeDevice(device) {\n        this.device = device;\n      }\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAgBE;;;;;;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,CAAA;AACnB,SAAA;AACD;;;;AAIE;AACF,QAAA,KAAK,EAAE,MAA0B;AAEjC;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,GAAE;AACb,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,IAAG,GAAI,OAAO,EAAE,CAAA;AAEtB;;;;AAIE;AACF,QAAA,MAAM,aAAa,GAAuB,GAAG,CAAC,IAAI,CAAC,CAAA;AAEnD;;;;AAIE;QACF,MAAM,gBAAe,GAAI,MAAY;AACnC,YAAA,aAAa,CAAC,KAAM,GAAE,MAAM,CAAC,UAAU,CAAA;AACzC,SAAC,CAAA;AAED;;;;AAIE;QACF,IAAI,yBAAwB,GAAI,gBAAgB,CAAA;AAEhD;;;;;;;AAOE;AACF,QAAA,MAAM,iBAAkB,GAAE,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,CAAA,CACnF,CAAA;AAED;;;;;;;;AAQE;AACF,QAAA,MAAM,cAAa,GAAI,QAAQ,CAAC,MAAqB;YACnD,IAAI,KAAK,CAAC,KAAK,EAAE;gBACf,OAAO,KAAK,CAAC,KAAK,CAAA;AACpB,aAAA;AAAO,iBAAA,IAAI,aAAa,CAAC,KAAM,KAAI,IAAI,EAAE;AACvC,gBAAA,OAAO,IAAI,CAAA;AACX,aAAA;AAAK,iBAAA;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,EACvF;AACH,aAAA;AACF,SAAC,CAAC,CAAA;AAEF,QAAA,KAAK,CACH,cAAc,EACd,MAAK,IAAK;AACR,YAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAA;AACrC,SAAC,EACD,EAAE,SAAS,EAAE,IAAK,EAAA,CACnB,CAAA;AAED;;;;;;;AAOE;QACF,KAAK,CACH,MAAM,KAAK,CAAC,UAAU,EACtB,UAAW,IAAG;AACZ,YAAA,yBAAwB,GAAI,QAAQ,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAA;AACpE,SAAC,EACD,EAAE,SAAS,EAAE,IAAK,EAAA,CACnB,CAAA;AAED;;;;;;AAME;QACF,SAAS,CAAC,MAAM;AACd,YAAA,gBAAgB,EAAE,CAAA;AACpB,SAAC,CAAC,CAAA;QAEF,OAAO;YACL,yBAAwB;SACzB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"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>\nimport { DeviceDetector } from '@empathyco/x-components/device'\n\nexport default {\n  name: 'DeviceDemo',\n  components: {\n    DeviceDetector,\n  },\n  data() {\n    return {\n      breakpoints: {\n        mobile: 600,\n        tablet: 900,\n        desktop: Number.POSITIVE_INFINITY,\n      },\n    }\n  },\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>\nimport { DeviceDetector } from '@empathyco/x-components/device'\n\nexport default {\n  name: 'DeviceDemo',\n  components: {\n    DeviceDetector,\n  },\n  data() {\n    return {\n      breakpoints: {\n        mobile: 600,\n        tablet: 900,\n        desktop: Number.POSITIVE_INFINITY,\n      },\n    }\n  },\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 data variable 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>\nimport { DeviceDetector } from '@empathyco/x-components/device'\n\nexport default {\n  name: 'DeviceDemo',\n  components: {\n    DeviceDetector,\n  },\n  data() {\n    return {\n      device: 'unknown',\n      breakpoints: {\n        mobile: 600,\n        tablet: 900,\n        desktop: Number.POSITIVE_INFINITY,\n      },\n    }\n  },\n  methods: {\n    storeDevice(device) {\n      this.device = device\n    },\n  },\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,CAAA;AAErB;;;;AAIE;AACF,QAAA,MAAM,aAAa,GAAuB,GAAG,CAAC,IAAI,CAAA,CAAA;AAElD;;;;AAIE;QACF,MAAM,gBAAe,GAAI,MAAY;AACnC,YAAA,aAAa,CAAC,KAAM,GAAE,MAAM,CAAC,UAAS,CAAA;AACxC,SAAA,CAAA;AAEA;;;;AAIE;QACF,IAAI,4BAA4B,gBAAe,CAAA;AAE/C;;;;;;;AAOE;AACF,QAAA,MAAM,iBAAkB,GAAE,QAAQ,CAAC,MACjC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM,CAAC,KAAK,MAAO,GAAE,MAAM,CAAC,CACrF,CAAA;AAEA;;;;;;;;AAQE;AACF,QAAA,MAAM,cAAa,GAAI,QAAQ,CAAC,MAAqB;AACnD,YAAA,IAAI,KAAK,CAAC,KAAK,EAAE;gBACf,OAAO,KAAK,CAAC,KAAI,CAAA;aACnB;AAAO,iBAAA,IAAI,aAAa,CAAC,KAAM,KAAI,IAAI,EAAE;AACvC,gBAAA,OAAO,IAAG,CAAA;aACV;iBAAK;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,EACxF;aACF;AACF,SAAC,CAAA,CAAA;AAED,QAAA,KAAK,CACH,cAAc,EACd,MAAK,IAAK;AACR,YAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAA,CAAA;AACpC,SAAC,EACD,EAAE,SAAS,EAAE,MAAM,CACrB,CAAA;AAEA;;;;;;;AAOE;QACF,KAAK,CACH,MAAM,KAAK,CAAC,UAAU,EACtB,UAAW,IAAG;AACZ,YAAA,yBAAwB,GAAI,QAAQ,CAAC,gBAAgB,EAAE,UAAU,CAAA,CAAA;AACnE,SAAC,EACD,EAAE,SAAS,EAAE,MAAM,CACrB,CAAA;AAEA;;;;;;AAME;QACF,SAAS,CAAC,MAAM;AACd,YAAA,gBAAgB,EAAC,CAAA;AACnB,SAAC,CAAA,CAAA;QAED,OAAO;YACL,yBAAyB;SAC3B,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/device/store/emitters.js

@@ -1,11 +1,12 @@
+import '@empathyco/x-utils';
 import { createStoreEmitters } from '../../../store/utils/store-emitters.utils.js';
 import { deviceXStoreModule } from './module.js';
 
-/**
- * {@link StoreEmitters} For the device module.
- *
- * @internal
- */
+/**
+ * {@link StoreEmitters} For the device module.
+ *
+ * @internal
+ */
 const deviceEmitters = createStoreEmitters(deviceXStoreModule, {});
 
 export { deviceEmitters };

package/js/x-modules/device/store/emitters.js.map

@@ -1 +1 @@
-{"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/device/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store';\nimport { deviceXStoreModule } from './module';\n\n/**\n * {@link StoreEmitters} For the device module.\n *\n * @internal\n */\nexport const deviceEmitters = createStoreEmitters(deviceXStoreModule, {});\n"],"names":[],"mappings":";;;AAGA;;;;AAIG;AACU,MAAA,cAAc,GAAG,mBAAmB,CAAC,kBAAkB,EAAE,EAAE;;;;"}
+{"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/device/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store'\nimport { deviceXStoreModule } from './module'\n\n/**\n * {@link StoreEmitters} For the device module.\n *\n * @internal\n */\nexport const deviceEmitters = createStoreEmitters(deviceXStoreModule, {})\n"],"names":[],"mappings":";;;;AAGA;;;;AAIG;AACU,MAAA,cAAc,GAAG,mBAAmB,CAAC,kBAAkB,EAAE,EAAE;;;;"}

package/js/x-modules/device/store/module.js

@@ -1,19 +1,19 @@
-/**
- * {@link XStoreModule} For the device module.
- *
- * @internal
- */
-const deviceXStoreModule = {
-    state: () => ({
-        name: null
-    }),
-    getters: {},
-    mutations: {
-        setName(state, name) {
-            state.name = name;
-        }
-    },
-    actions: {}
+/**
+ * {@link XStoreModule} For the device module.
+ *
+ * @internal
+ */
+const deviceXStoreModule = {
+    state: () => ({
+        name: null,
+    }),
+    getters: {},
+    mutations: {
+        setName(state, name) {
+            state.name = name;
+        },
+    },
+    actions: {},
 };
 
 export { deviceXStoreModule };

package/js/x-modules/device/store/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/device/store/module.ts"],"sourcesContent":["import { DeviceXStoreModule } from './types';\n\n/**\n * {@link XStoreModule} For the device module.\n *\n * @internal\n */\nexport const deviceXStoreModule: DeviceXStoreModule = {\n  state: () => ({\n    name: null\n  }),\n  getters: {},\n  mutations: {\n    setName(state, name) {\n      state.name = name;\n    }\n  },\n  actions: {}\n};\n"],"names":[],"mappings":"AAEA;;;;AAIG;AACU,MAAA,kBAAkB,GAAuB;AACpD,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,IAAI,EAAE,IAAI;KACX,CAAC;AACF,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,SAAS,EAAE;QACT,OAAO,CAAC,KAAK,EAAE,IAAI,EAAA;AACjB,YAAA,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;SACnB;AACF,KAAA;AACD,IAAA,OAAO,EAAE,EAAE;;;;;"}
+{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/device/store/module.ts"],"sourcesContent":["import type { DeviceXStoreModule } from './types'\n\n/**\n * {@link XStoreModule} For the device module.\n *\n * @internal\n */\nexport const deviceXStoreModule: DeviceXStoreModule = {\n  state: () => ({\n    name: null,\n  }),\n  getters: {},\n  mutations: {\n    setName(state, name) {\n      state.name = name\n    },\n  },\n  actions: {},\n}\n"],"names":[],"mappings":"AAEA;;;;AAIG;AACU,MAAA,kBAAkB,GAAuB;AACpD,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,IAAI,EAAE,IAAI;KACX,CAAC;AACF,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,SAAS,EAAE;QACT,OAAO,CAAC,KAAK,EAAE,IAAI,EAAA;AACjB,YAAA,KAAK,CAAC,IAAI,GAAG,IAAI,CAAA;SAClB;AACF,KAAA;AACD,IAAA,OAAO,EAAE,EAAE;;;;;"}

package/js/x-modules/device/wiring.js

@@ -1,27 +1,27 @@
 import { namespacedWireCommit } from '../../wiring/namespaced-wires.factory.js';
 import { createWiring } from '../../wiring/wiring.utils.js';
 
-/**
- * WireCommit for {@link DeviceXModule}.
- *
- * @internal
- */
-const wireCommit = namespacedWireCommit('device');
-/**
- * Sets the device of the {@link DeviceXModule}.
- *
- * @public
- */
-const setName = wireCommit('setName');
-/**
- * Wiring configuration for the {@link DeviceXModule | device module}.
- *
- * @internal
- */
-const deviceWiring = createWiring({
-    DeviceProvided: {
-        setName
-    }
+/**
+ * WireCommit for {@link DeviceXModule}.
+ *
+ * @internal
+ */
+const wireCommit = namespacedWireCommit('device');
+/**
+ * Sets the device of the {@link DeviceXModule}.
+ *
+ * @public
+ */
+const setName = wireCommit('setName');
+/**
+ * Wiring configuration for the {@link DeviceXModule | device module}.
+ *
+ * @internal
+ */
+const deviceWiring = createWiring({
+    DeviceProvided: {
+        setName,
+    },
 });
 
 export { deviceWiring, setName };

package/js/x-modules/device/wiring.js.map

@@ -1 +1 @@
-{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/device/wiring.ts"],"sourcesContent":["import { namespacedWireCommit } from '../../wiring/namespaced-wires.factory';\nimport { createWiring } from '../../wiring/wiring.utils';\n\n/**\n * WireCommit for {@link DeviceXModule}.\n *\n * @internal\n */\nconst wireCommit = namespacedWireCommit('device');\n\n/**\n * Sets the device of the {@link DeviceXModule}.\n *\n * @public\n */\nexport const setName = wireCommit('setName');\n\n/**\n * Wiring configuration for the {@link DeviceXModule | device module}.\n *\n * @internal\n */\nexport const deviceWiring = createWiring({\n  DeviceProvided: {\n    setName\n  }\n});\n"],"names":[],"mappings":";;;AAGA;;;;AAIG;AACH,MAAM,UAAU,GAAG,oBAAoB,CAAC,QAAQ,CAAC,CAAC;AAElD;;;;AAIG;MACU,OAAO,GAAG,UAAU,CAAC,SAAS,EAAE;AAE7C;;;;AAIG;AACI,MAAM,YAAY,GAAG,YAAY,CAAC;AACvC,IAAA,cAAc,EAAE;QACd,OAAO;AACR,KAAA;AACF,CAAA;;;;"}
+{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/device/wiring.ts"],"sourcesContent":["import { namespacedWireCommit } from '../../wiring/namespaced-wires.factory'\nimport { createWiring } from '../../wiring/wiring.utils'\n\n/**\n * WireCommit for {@link DeviceXModule}.\n *\n * @internal\n */\nconst wireCommit = namespacedWireCommit('device')\n\n/**\n * Sets the device of the {@link DeviceXModule}.\n *\n * @public\n */\nexport const setName = wireCommit('setName')\n\n/**\n * Wiring configuration for the {@link DeviceXModule | device module}.\n *\n * @internal\n */\nexport const deviceWiring = createWiring({\n  DeviceProvided: {\n    setName,\n  },\n})\n"],"names":[],"mappings":";;;AAGA;;;;AAIG;AACH,MAAM,UAAU,GAAG,oBAAoB,CAAC,QAAQ,CAAC,CAAA;AAEjD;;;;AAIG;MACU,OAAO,GAAG,UAAU,CAAC,SAAS,EAAC;AAE5C;;;;AAIG;AACI,MAAM,YAAY,GAAG,YAAY,CAAC;AACvC,IAAA,cAAc,EAAE;QACd,OAAO;AACR,KAAA;AACF,CAAA;;;;"}

package/js/x-modules/device/x-module.js

@@ -3,18 +3,18 @@ import { deviceEmitters } from './store/emitters.js';
 import { deviceXStoreModule } from './store/module.js';
 import { deviceWiring } from './wiring.js';
 
-/**
- * Device {@link XModule} implementation. This module is auto-registered as soon as you
- * import any component from the `device` entry point.
- *
- * @public
- */
-const deviceXModule = {
-    name: 'device',
-    storeModule: deviceXStoreModule,
-    storeEmitters: deviceEmitters,
-    wiring: deviceWiring
-};
+/**
+ * Device {@link XModule} implementation. This module is auto-registered as soon as you
+ * import any component from the `device` entry point.
+ *
+ * @public
+ */
+const deviceXModule = {
+    name: 'device',
+    storeModule: deviceXStoreModule,
+    storeEmitters: deviceEmitters,
+    wiring: deviceWiring,
+};
 XPlugin.registerXModule(deviceXModule);
 
 export { deviceXModule };

package/js/x-modules/device/x-module.js.map

@@ -1 +1 @@
-{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/device/x-module.ts"],"sourcesContent":["import { XModule } from '../x-modules.types';\nimport { XPlugin } from '../../plugins/x-plugin';\nimport { deviceEmitters } from './store/emitters';\nimport { deviceXStoreModule } from './store/module';\nimport { DeviceXStoreModule } from './store/types';\nimport { deviceWiring } from './wiring';\n\n/**\n * Device {@link XModule} alias.\n *\n * @public\n */\nexport type DeviceXModule = XModule<DeviceXStoreModule>;\n\n/**\n * Device {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `device` entry point.\n *\n * @public\n */\nexport const deviceXModule: DeviceXModule = {\n  name: 'device',\n  storeModule: deviceXStoreModule,\n  storeEmitters: deviceEmitters,\n  wiring: deviceWiring\n};\n\nXPlugin.registerXModule(deviceXModule);\n"],"names":[],"mappings":";;;;;AAcA;;;;;AAKG;AACU,MAAA,aAAa,GAAkB;AAC1C,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,WAAW,EAAE,kBAAkB;AAC/B,IAAA,aAAa,EAAE,cAAc;AAC7B,IAAA,MAAM,EAAE,YAAY;EACpB;AAEF,OAAO,CAAC,eAAe,CAAC,aAAa,CAAC;;;;"}
+{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/device/x-module.ts"],"sourcesContent":["import type { XModule } from '../x-modules.types'\nimport type { DeviceXStoreModule } from './store/types'\nimport { XPlugin } from '../../plugins/x-plugin'\nimport { deviceEmitters } from './store/emitters'\nimport { deviceXStoreModule } from './store/module'\nimport { deviceWiring } from './wiring'\n\n/**\n * Device {@link XModule} alias.\n *\n * @public\n */\nexport type DeviceXModule = XModule<DeviceXStoreModule>\n\n/**\n * Device {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `device` entry point.\n *\n * @public\n */\nexport const deviceXModule: DeviceXModule = {\n  name: 'device',\n  storeModule: deviceXStoreModule,\n  storeEmitters: deviceEmitters,\n  wiring: deviceWiring,\n}\n\nXPlugin.registerXModule(deviceXModule)\n"],"names":[],"mappings":";;;;;AAcA;;;;;AAKG;AACU,MAAA,aAAa,GAAkB;AAC1C,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,WAAW,EAAE,kBAAkB;AAC/B,IAAA,aAAa,EAAE,cAAc;AAC7B,IAAA,MAAM,EAAE,YAAY;EACrB;AAED,OAAO,CAAC,eAAe,CAAC,aAAa,CAAC;;;;"}

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

@@ -1,5 +1,5 @@
 import _sfc_main from './empathize.vue2.js';
-import { openBlock, createBlock, resolveDynamicComponent, withCtx, withDirectives, createElementVNode, withModifiers, createCommentVNode, renderSlot, vShow } from 'vue';
+import { openBlock, createBlock, resolveDynamicComponent, withCtx, withDirectives, createElementVNode, withModifiers, renderSlot, vShow } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -9,21 +9,20 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         "div",
         {
           ref: "empathizeRef",
+          class: "x-empathize",
+          "data-test": "empathize",
           onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {
           }, ["prevent"])),
           onFocusin: _cache[1] || (_cache[1] = (...args) => _ctx.open && _ctx.open(...args)),
-          onFocusout: _cache[2] || (_cache[2] = (...args) => _ctx.close && _ctx.close(...args)),
-          class: "x-empathize",
-          "data-test": "empathize"
+          onFocusout: _cache[2] || (_cache[2] = (...args) => _ctx.close && _ctx.close(...args))
         },
         [
-          createCommentVNode(" @slot (Required) Modal container content "),
           renderSlot(_ctx.$slots, "default")
         ],
         544
         /* NEED_HYDRATION, NEED_PATCH */
       ), [
-        [vShow, _ctx.isOpen && _ctx.hasContent]
+        [vShow, _ctx.isOpenAndHasContent]
       ])
     ]),
     _: 3

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

@@ -1 +1 @@
-{"version":3,"file":"empathize.vue.js","sources":["../../../../../src/x-modules/empathize/components/empathize.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\">\n    <div\n      v-show=\"isOpen && hasContent\"\n      ref=\"empathizeRef\"\n      @mousedown.prevent\n      @focusin=\"open\"\n      @focusout=\"close\"\n      class=\"x-empathize\"\n      data-test=\"empathize\"\n    >\n      <!-- @slot (Required) Modal container content -->\n      <slot />\n    </div>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, PropType, ref } from 'vue';\n  import { NoAnimation } from '../../../components';\n  import { use$x, useDebounce } from '../../../composables';\n  import { AnimationProp } from '../../../types';\n  import { XEvent } from '../../../wiring';\n  import { empathizeXModule } from '../x-module';\n  import { getActiveElement } from '../../../utils/html';\n\n  /**\n   * Component containing the empathize. It has a required slot to define its content and two props\n   * to define when to open and close it: `eventsToOpenEmpathize` and `eventsToCloseEmpathize`.\n   *\n   * @public\n   */\n  export 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    },\n    setup(props) {\n      const $x = use$x();\n\n      const empathizeRef = ref<HTMLDivElement>();\n\n      const isOpen = ref(false);\n      const hasContent = ref(!!empathizeRef.value?.children.length);\n\n      /**\n       * Changes the state of {@link Empathize.isOpen} assigning to it the value of `newOpen`\n       * parameter. Also emits the {@link XEvent} `EmpathizeOpened` or `EmpathizeClosed` if\n       * the state really changes.\n       *\n       * @param newOpen - The new open state to assign to {@link Empathize.isOpen}.\n       */\n      const changeOpen = useDebounce((newOpen: boolean) => {\n        if (isOpen.value !== newOpen) {\n          isOpen.value = newOpen;\n          const empathizeEvent = isOpen.value ? 'EmpathizeOpened' : 'EmpathizeClosed';\n          $x.emit(empathizeEvent, undefined, { target: empathizeRef.value });\n        }\n      }, 0);\n\n      /**\n       * Open empathize. This method will be executed on any event in\n       * {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on Empathize root\n       * element.\n       */\n      function open() {\n        hasContent.value = !!empathizeRef.value?.children.length;\n        if (hasContent.value) {\n          changeOpen(true);\n        }\n      }\n\n      /**\n       * Close empathize. This method will be executed on any event in\n       * {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on Empathize root\n       * element.\n       */\n      function close() {\n        const activeElement = getActiveElement();\n        if (!empathizeRef.value?.contains(activeElement)) {\n          changeOpen(false);\n        }\n      }\n\n      props.eventsToOpenEmpathize.forEach(event => $x.on(event, false).subscribe(open));\n      props.eventsToCloseEmpathize.forEach(event => $x.on(event, false).subscribe(close));\n\n      return {\n        close,\n        empathizeRef,\n        hasContent,\n        isOpen,\n        open\n      };\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`. The event\n  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`. The event\n  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` and\n- Close: `UserClosedEmpathize`, `UserSelectedASuggestion`, `UserPressedEnter`,\n  'UserBlurredSearchBox`\n\n### Basic examples\n\nThe component rendering the query suggestions, popular searches and history queries with keyboard\nnavigation.\n\n```vue\n<Empathize>\n  <template #default>\n    <BaseKeyboardNavigation>\n      <QuerySuggestions/>\n      <PopularSearches/>\n      <HistoryQueries/>\n    </BaseKeyboardNavigation>\n  </template>\n</Empathize>\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<Empathize\n  :eventsToOpenEmpathize=\"['UserBlurredSearchBox']\"\n  :eventsToCloseEmpathize=\"['UserFocusedSearchBox']\"\n>\n  <template #default>\n    Please, type a query in the Search Box.\n  </template>\n</Empathize>\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` with a slot inside:\n\n```vue\n<Empathize :animation=\"collapseFromTop\">\n  <template #default>\n    <PopularSearches/>\n  </template>\n</Empathize>\n```\n</docs>\n"],"names":["_createBlock","_resolveDynamicComponent","_withCtx","_withDirectives","_createElementVNode","_withModifiers","_createCommentVNode","isOpen","hasContent"],"mappings":";;;;SAAA,WAaU,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;sBAXNA,WAWM,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA,IAAA,EAAA;AAAA,IAAA,OAAA,EATAC,OAAc,CAAA,MAAA;AAAA,MACRC,cAAA,CAAAC,kBAAA;AAAA,QAAA,KAAA;AAAA,QALhB;AAAA,UAMO,GAAA,EAAA,cAAA;AAAA,UACA,aAAQ,MAAE,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAC,aAAA,CAAA,MAAA;AAAA,WAAA,EAAA,CAAA,SAAA,CAAA,CAAA,CAAA;AAAA,UACX,WAAM,MAAa,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,IAAA,IAAA,IAAA,CAAA,IAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,UACnB,UAAA,EAAS,OAAC,CAAW,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,KAAA,IAAA,IAAA,CAAA,KAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,UAAA,KAAA,EAAA,aAAA;AAErB,UAAA,WAAA,EAAA,WAAA;AAAA,SAAA;AACA,QAAA;AAAA,UAAAC,kBAAA,CAAA,4CAAA,CAAA;qBATQC,IAAUC,CAAAA,MAAAA,EAAAA,SAAAA,CAAAA;AAAAA,SAAAA;;;;;AAHxB,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"empathize.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`, `UserPressedEnter` and 'UserBlurredSearchBox`\n\n### Basic examples\n\nThe component rendering the query suggestions, popular searches and history queries with keyboard\nnavigation.\n\n```vue\n<Empathize>\n  <template #default>\n    <BaseKeyboardNavigation>\n      <QuerySuggestions/>\n      <PopularSearches/>\n      <HistoryQueries/>\n    </BaseKeyboardNavigation>\n  </template>\n</Empathize>\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<Empathize\n  :eventsToOpenEmpathize=\"['UserBlurredSearchBox']\"\n  :eventsToCloseEmpathize=\"['UserFocusedSearchBox']\"\n>\n  <template #default>\n    Please, type a query in the Search Box.\n  </template>\n</Empathize>\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` with a slot inside:\n\n```vue\n<Empathize :animation=\"collapseFromTop\">\n  <template #default>\n    <PopularSearches/>\n  </template>\n</Empathize>\n```\n\n### Advance examples\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 has no-content as fallback behaviour. To do that, `hasContent` prop must be reactive to know\nif the empathize has content or not.\nIt also configures `searchAndCloseDebounceInMs` to 500ms as debounce time to search and close the\nempathize when has no-content.\n\n```vue\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```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_withDirectives","_createElementVNode","_withModifiers","_renderSlot"],"mappings":";;;;;AACE,EAAA,OAAAA,SAAA,EAAA,EAAAC,WAAA,CAaYC,wBAbI,IAAS,CAAA,SAAA,CAAA,EAAA,IAAA,EAAA;AAAA,IAD3B,iBAEI,MAWM;AAAA,MAXNC,cAAA,CAAAC,kBAAA;AAAA,QAWM,KAAA;AAAA,QAAA;AAAA,UATJ,GAAI,EAAA,cAAA;AAAA,UACJ,KAAM,EAAA,aAAA;AAAA,UACN,WAAU,EAAA,WAAA;AAAA,UACT,WAAA,EAAS,0BAPhBC,aAOM,CAAA,MAAA;AAAA,WAAkB,EAAA,CAAA,SAAA,CAAA,CAAA,CAAA;AAAA,UACjB,WAAO,MAAE,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,IAAA,IAAA,IAAA,CAAA,IAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,UACT,YAAQ,MAAE,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,KAAA,IAAA,IAAA,CAAA,KAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,SAAA;;UAGXC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,SAAA;;;;gBATA,IAAmB,CAAA,mBAAA,CAAA;AAAA,OAAA,CAAA;;AAHjC,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,CAAA;;;;;;"}