@empathyco/x-components 6.0.0-alpha.237 → 6.0.0-alpha.239

package/js/x-modules/search-box/components/search-input-placeholder.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"search-input-placeholder.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-input-placeholder.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"isVisible\"\n    class=\"x-input-placeholder x-search-input-placeholder\"\n    mode=\"out-in\"\n  >\n    <span :key=\"message\" data-test=\"search-input-placeholder\">\n      {{ message }}\n    </span>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, h, onBeforeUnmount, ref, watch } from 'vue'\nimport AnimateTranslate from '../../../components/animations/animate-translate.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types'\nimport { searchBoxXModule } from '../x-module'\n\n/**.\n * This component renders an animated placeholder for the search input in the shape of a list of\n * iterating messages that can be configured to happen always or only when hovering the input\n *\n * @public\n */\nexport default defineComponent({\n  name: 'SearchInputPlaceholder',\n  xModule: searchBoxXModule.name,\n  props: {\n    /**\n     * List of messages to animate.\n     *\n     * @public\n     */\n    messages: {\n      type: Array as PropType<string[]>,\n      required: true,\n    },\n    /**\n     * Animation component used for the messages.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: () => h(AnimateTranslate, { animationOrigin: 'bottom-to-top' }),\n    },\n    /**\n     * Time in milliseconds during which each message is visible.\n     *\n     * @public\n     */\n    animationIntervalMs: {\n      type: Number,\n      default: 1500,\n    },\n    /**\n     * Whether the messages animation is active only when hovering the search input or always.\n     *\n     * @public\n     */\n    animateOnlyOnHover: Boolean,\n  },\n  setup(props) {\n    const $x = use$x()\n\n    /**.\n     * The search box written query\n     *\n     * @internal\n     */\n    const { query } = useState('searchBox')\n\n    /**.\n     * The search box hover status\n     *\n     * @internal\n     */\n    const isSearchBoxHovered = ref(false)\n\n    /**.\n     * The search box focus status\n     *\n     * @internal\n     */\n    const isSearchBoxFocused = ref(false)\n\n    /**\n     * The index used to point to the current animation message in the list.\n     *\n     * @internal\n     */\n    const animationMessageIndex = ref(0)\n\n    /**\n     * The interval used for the animation.\n     *\n     * @internal\n     */\n    const animationInterval = ref<number | undefined>(undefined)\n\n    /**\n     * The visibility state of the component.\n     *\n     * @returns The visibility state based on the search input state (query & focus).\n     *\n     * @internal\n     */\n    const isVisible = computed((): boolean => !query.value && !isSearchBoxFocused.value)\n\n    /**\n     * The animation state of the component.\n     *\n     * @returns Whether the animation is active or not.\n     *\n     * @internal\n     */\n    const isBeingAnimated = computed(\n      (): boolean => isVisible.value && (!props.animateOnlyOnHover || isSearchBoxHovered.value),\n    )\n\n    /**\n     * The current placeholder message.\n     *\n     * @returns The message to display as placeholder at any moment.\n     *\n     * @internal\n     */\n    const message = computed((): string | undefined =>\n      isBeingAnimated.value ? props.messages[animationMessageIndex.value] : props.messages[0],\n    )\n\n    /**\n     * Clears the interval used for the animation.\n     *\n     * @internal\n     */\n    const stopAnimationInterval = (): void => {\n      if (animationInterval.value) {\n        clearInterval(animationInterval.value)\n        animationInterval.value = undefined\n      }\n    }\n\n    /**\n     * Increments animation message index; if the new index exceeds the messages list length, it is\n     * reset to 0.\n     *\n     * @internal\n     */\n    const incrementAnimationMessageIndex = (): void => {\n      animationMessageIndex.value = (animationMessageIndex.value + 1) % props.messages.length\n    }\n\n    $x.on('UserHoveredInSearchBox', false).subscribe(() => (isSearchBoxHovered.value = true))\n\n    $x.on('UserHoveredOutSearchBox', false).subscribe(() => (isSearchBoxHovered.value = false))\n\n    $x.on('UserFocusedSearchBox', false).subscribe(() => (isSearchBoxFocused.value = true))\n\n    $x.on('UserBlurredSearchBox', false).subscribe(() => (isSearchBoxFocused.value = false))\n\n    /**\n     * Starts or stops the animation depending on the current animation state.\n     *\n     * @internal\n     */\n    const resetAnimation = (): void => {\n      stopAnimationInterval()\n      if (isBeingAnimated.value) {\n        animationInterval.value = window.setInterval((): void => {\n          incrementAnimationMessageIndex()\n        }, props.animationIntervalMs)\n      }\n    }\n\n    watch(() => 'animationIntervalMs', resetAnimation)\n\n    /**\n     * Resets the animation message index to zero.\n     *\n     * @internal\n     */\n    const resetAnimationMessageIndex = (): void => {\n      animationMessageIndex.value = 0\n    }\n\n    watch(\n      () => props.messages,\n      () => {\n        resetAnimationMessageIndex()\n        resetAnimation()\n      },\n      { deep: true },\n    )\n\n    /**\n     * Sets the animation message index with the right value for the next future iteration when the\n     * current one stops,assuring the user will see always a new message on each animation state\n     * change.\n     *\n     * @internal\n     */\n    watch(\n      isBeingAnimated,\n      () => {\n        if (!isBeingAnimated.value) {\n          if (props.animateOnlyOnHover) {\n            resetAnimationMessageIndex()\n          }\n          incrementAnimationMessageIndex()\n        }\n        resetAnimation()\n      },\n      { immediate: true },\n    )\n\n    onBeforeUnmount(() => {\n      stopAnimationInterval()\n    })\n\n    return {\n      isVisible,\n      message,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-search-input-placeholder-container {\n  position: relative;\n}\n</style>\n\n<style lang=\"css\" scoped>\n.x-search-input-placeholder {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## See it in action\n\nHere a basic example of how the animated search input placeholder is rendered.\n\n```vue live\n<template>\n  <div style=\"position: relative; overflow: hidden;\">\n    <SearchInputPlaceholder\n      style=\"position: absolute; height: 100%; pointer-events: none;\"\n      :messages=\"placeholderMessages\"\n    />\n    <SearchInput />\n  </div>\n</template>\n\n<script setup>\nimport { SearchInput, SearchInputPlaceholder } from '@empathyco/x-components/search-box'\nimport { ref } from 'vue'\n\nconst placeholderMessages = ref([\n  'Find shirts',\n  'Find shoes',\n  'Find watches',\n  'Find handbags',\n  'Find sunglasses',\n])\n</script>\n```\n\n### Animating only on hover\n\nIn this example, the placeholder is configured to animate only when the user hovers in the search\ninput, showing the first message of the array the rest of the time.\n\n```vue live\n<template>\n  <div style=\"position: relative; overflow: hidden;\">\n    <SearchInputPlaceholder\n      style=\"position: absolute; height: 100%; pointer-events: none;\"\n      :messages=\"placeholderMessages\"\n      :animate-only-on-hover=\"true\"\n    />\n    <SearchInput />\n  </div>\n</template>\n\n<script setup>\nimport { SearchInput, SearchInputPlaceholder } from '@empathyco/x-components/search-box'\nimport { ref } from 'vue'\n\nconst placeholderMessages = ref([\n  'Find shirts',\n  'Find shoes',\n  'Find watches',\n  'Find handbags',\n  'Find sunglasses',\n])\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock"],"mappings":";;;;;;;SAGU,IAAA,CAAA,SAAA,IAAAA,SAAA,EAAA,EAFRC,WAAA,CASYC,wBARL,IAAA,CAAA,SAAS,CAAA,EAAA;AAAA,IAAA,GAAA,EAAA,CAAA;IAEd,KAAA,EAAM,gDAAA;AAAA,IACN,IAAA,EAAK;AAAA,GAAA,EAAA;qBAEL,MAEO;AAAA,OAAAF,SAAA,EAAA,EAFPG,kBAAA;AAAA,QAEO,MAAA;AAAA,QAAA;AAAA,UAFA,GAAA,EAAK,IAAA,CAAA,OAAA;AAAA,UAAS,WAAA,EAAU;AAAA,SAAA;wBAC1B,IAAA,CAAA,OAAO,CAAA;AAAA,QAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"search-input-placeholder.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-input-placeholder.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"isVisible\"\n    class=\"x-search-input-placeholder xds:input-placeholder\"\n    mode=\"out-in\"\n  >\n    <span :key=\"message\" data-test=\"search-input-placeholder\">\n      {{ message }}\n    </span>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, h, onBeforeUnmount, ref, watch } from 'vue'\nimport AnimateTranslate from '../../../components/animations/animate-translate.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types'\nimport { searchBoxXModule } from '../x-module'\n\n/**.\n * This component renders an animated placeholder for the search input in the shape of a list of\n * iterating messages that can be configured to happen always or only when hovering the input\n *\n * @public\n */\nexport default defineComponent({\n  name: 'SearchInputPlaceholder',\n  xModule: searchBoxXModule.name,\n  props: {\n    /**\n     * List of messages to animate.\n     *\n     * @public\n     */\n    messages: {\n      type: Array as PropType<string[]>,\n      required: true,\n    },\n    /**\n     * Animation component used for the messages.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: () => h(AnimateTranslate, { animationOrigin: 'bottom-to-top' }),\n    },\n    /**\n     * Time in milliseconds during which each message is visible.\n     *\n     * @public\n     */\n    animationIntervalMs: {\n      type: Number,\n      default: 1500,\n    },\n    /**\n     * Whether the messages animation is active only when hovering the search input or always.\n     *\n     * @public\n     */\n    animateOnlyOnHover: Boolean,\n  },\n  setup(props) {\n    const $x = use$x()\n\n    /**.\n     * The search box written query\n     *\n     * @internal\n     */\n    const { query } = useState('searchBox')\n\n    /**.\n     * The search box hover status\n     *\n     * @internal\n     */\n    const isSearchBoxHovered = ref(false)\n\n    /**.\n     * The search box focus status\n     *\n     * @internal\n     */\n    const isSearchBoxFocused = ref(false)\n\n    /**\n     * The index used to point to the current animation message in the list.\n     *\n     * @internal\n     */\n    const animationMessageIndex = ref(0)\n\n    /**\n     * The interval used for the animation.\n     *\n     * @internal\n     */\n    const animationInterval = ref<number | undefined>(undefined)\n\n    /**\n     * The visibility state of the component.\n     *\n     * @returns The visibility state based on the search input state (query & focus).\n     *\n     * @internal\n     */\n    const isVisible = computed((): boolean => !query.value && !isSearchBoxFocused.value)\n\n    /**\n     * The animation state of the component.\n     *\n     * @returns Whether the animation is active or not.\n     *\n     * @internal\n     */\n    const isBeingAnimated = computed(\n      (): boolean => isVisible.value && (!props.animateOnlyOnHover || isSearchBoxHovered.value),\n    )\n\n    /**\n     * The current placeholder message.\n     *\n     * @returns The message to display as placeholder at any moment.\n     *\n     * @internal\n     */\n    const message = computed((): string | undefined =>\n      isBeingAnimated.value ? props.messages[animationMessageIndex.value] : props.messages[0],\n    )\n\n    /**\n     * Clears the interval used for the animation.\n     *\n     * @internal\n     */\n    const stopAnimationInterval = (): void => {\n      if (animationInterval.value) {\n        clearInterval(animationInterval.value)\n        animationInterval.value = undefined\n      }\n    }\n\n    /**\n     * Increments animation message index; if the new index exceeds the messages list length, it is\n     * reset to 0.\n     *\n     * @internal\n     */\n    const incrementAnimationMessageIndex = (): void => {\n      animationMessageIndex.value = (animationMessageIndex.value + 1) % props.messages.length\n    }\n\n    $x.on('UserHoveredInSearchBox', false).subscribe(() => (isSearchBoxHovered.value = true))\n\n    $x.on('UserHoveredOutSearchBox', false).subscribe(() => (isSearchBoxHovered.value = false))\n\n    $x.on('UserFocusedSearchBox', false).subscribe(() => (isSearchBoxFocused.value = true))\n\n    $x.on('UserBlurredSearchBox', false).subscribe(() => (isSearchBoxFocused.value = false))\n\n    /**\n     * Starts or stops the animation depending on the current animation state.\n     *\n     * @internal\n     */\n    const resetAnimation = (): void => {\n      stopAnimationInterval()\n      if (isBeingAnimated.value) {\n        animationInterval.value = window.setInterval((): void => {\n          incrementAnimationMessageIndex()\n        }, props.animationIntervalMs)\n      }\n    }\n\n    watch(() => 'animationIntervalMs', resetAnimation)\n\n    /**\n     * Resets the animation message index to zero.\n     *\n     * @internal\n     */\n    const resetAnimationMessageIndex = (): void => {\n      animationMessageIndex.value = 0\n    }\n\n    watch(\n      () => props.messages,\n      () => {\n        resetAnimationMessageIndex()\n        resetAnimation()\n      },\n      { deep: true },\n    )\n\n    /**\n     * Sets the animation message index with the right value for the next future iteration when the\n     * current one stops,assuring the user will see always a new message on each animation state\n     * change.\n     *\n     * @internal\n     */\n    watch(\n      isBeingAnimated,\n      () => {\n        if (!isBeingAnimated.value) {\n          if (props.animateOnlyOnHover) {\n            resetAnimationMessageIndex()\n          }\n          incrementAnimationMessageIndex()\n        }\n        resetAnimation()\n      },\n      { immediate: true },\n    )\n\n    onBeforeUnmount(() => {\n      stopAnimationInterval()\n    })\n\n    return {\n      isVisible,\n      message,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-search-input-placeholder-container {\n  position: relative;\n}\n</style>\n\n<style lang=\"css\" scoped>\n.x-search-input-placeholder {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## See it in action\n\nHere a basic example of how the animated search input placeholder is rendered.\n\n```vue live\n<template>\n  <div style=\"position: relative; overflow: hidden;\">\n    <SearchInputPlaceholder\n      style=\"position: absolute; height: 100%; pointer-events: none;\"\n      :messages=\"placeholderMessages\"\n    />\n    <SearchInput />\n  </div>\n</template>\n\n<script setup>\nimport { SearchInput, SearchInputPlaceholder } from '@empathyco/x-components/search-box'\nimport { ref } from 'vue'\n\nconst placeholderMessages = ref([\n  'Find shirts',\n  'Find shoes',\n  'Find watches',\n  'Find handbags',\n  'Find sunglasses',\n])\n</script>\n```\n\n### Animating only on hover\n\nIn this example, the placeholder is configured to animate only when the user hovers in the search\ninput, showing the first message of the array the rest of the time.\n\n```vue live\n<template>\n  <div style=\"position: relative; overflow: hidden;\">\n    <SearchInputPlaceholder\n      style=\"position: absolute; height: 100%; pointer-events: none;\"\n      :messages=\"placeholderMessages\"\n      :animate-only-on-hover=\"true\"\n    />\n    <SearchInput />\n  </div>\n</template>\n\n<script setup>\nimport { SearchInput, SearchInputPlaceholder } from '@empathyco/x-components/search-box'\nimport { ref } from 'vue'\n\nconst placeholderMessages = ref([\n  'Find shirts',\n  'Find shoes',\n  'Find watches',\n  'Find handbags',\n  'Find sunglasses',\n])\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock"],"mappings":";;;;;;;SAGU,IAAA,CAAA,SAAA,IAAAA,SAAA,EAAA,EAFRC,WAAA,CASYC,wBARL,IAAA,CAAA,SAAS,CAAA,EAAA;AAAA,IAAA,GAAA,EAAA,CAAA;IAEd,KAAA,EAAM,kDAAA;AAAA,IACN,IAAA,EAAK;AAAA,GAAA,EAAA;qBAEL,MAEO;AAAA,OAAAF,SAAA,EAAA,EAFPG,kBAAA;AAAA,QAEO,MAAA;AAAA,QAAA;AAAA,UAFA,GAAA,EAAK,IAAA,CAAA,OAAA;AAAA,UAAS,WAAA,EAAU;AAAA,SAAA;wBAC1B,IAAA,CAAA,OAAO,CAAA;AAAA,QAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/x-modules/search-box/components/search-input-placeholder.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"search-input-placeholder.vue2.js","sources":["../../../../../src/x-modules/search-box/components/search-input-placeholder.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"isVisible\"\n    class=\"x-input-placeholder x-search-input-placeholder\"\n    mode=\"out-in\"\n  >\n    <span :key=\"message\" data-test=\"search-input-placeholder\">\n      {{ message }}\n    </span>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, h, onBeforeUnmount, ref, watch } from 'vue'\nimport AnimateTranslate from '../../../components/animations/animate-translate.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types'\nimport { searchBoxXModule } from '../x-module'\n\n/**.\n * This component renders an animated placeholder for the search input in the shape of a list of\n * iterating messages that can be configured to happen always or only when hovering the input\n *\n * @public\n */\nexport default defineComponent({\n  name: 'SearchInputPlaceholder',\n  xModule: searchBoxXModule.name,\n  props: {\n    /**\n     * List of messages to animate.\n     *\n     * @public\n     */\n    messages: {\n      type: Array as PropType<string[]>,\n      required: true,\n    },\n    /**\n     * Animation component used for the messages.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: () => h(AnimateTranslate, { animationOrigin: 'bottom-to-top' }),\n    },\n    /**\n     * Time in milliseconds during which each message is visible.\n     *\n     * @public\n     */\n    animationIntervalMs: {\n      type: Number,\n      default: 1500,\n    },\n    /**\n     * Whether the messages animation is active only when hovering the search input or always.\n     *\n     * @public\n     */\n    animateOnlyOnHover: Boolean,\n  },\n  setup(props) {\n    const $x = use$x()\n\n    /**.\n     * The search box written query\n     *\n     * @internal\n     */\n    const { query } = useState('searchBox')\n\n    /**.\n     * The search box hover status\n     *\n     * @internal\n     */\n    const isSearchBoxHovered = ref(false)\n\n    /**.\n     * The search box focus status\n     *\n     * @internal\n     */\n    const isSearchBoxFocused = ref(false)\n\n    /**\n     * The index used to point to the current animation message in the list.\n     *\n     * @internal\n     */\n    const animationMessageIndex = ref(0)\n\n    /**\n     * The interval used for the animation.\n     *\n     * @internal\n     */\n    const animationInterval = ref<number | undefined>(undefined)\n\n    /**\n     * The visibility state of the component.\n     *\n     * @returns The visibility state based on the search input state (query & focus).\n     *\n     * @internal\n     */\n    const isVisible = computed((): boolean => !query.value && !isSearchBoxFocused.value)\n\n    /**\n     * The animation state of the component.\n     *\n     * @returns Whether the animation is active or not.\n     *\n     * @internal\n     */\n    const isBeingAnimated = computed(\n      (): boolean => isVisible.value && (!props.animateOnlyOnHover || isSearchBoxHovered.value),\n    )\n\n    /**\n     * The current placeholder message.\n     *\n     * @returns The message to display as placeholder at any moment.\n     *\n     * @internal\n     */\n    const message = computed((): string | undefined =>\n      isBeingAnimated.value ? props.messages[animationMessageIndex.value] : props.messages[0],\n    )\n\n    /**\n     * Clears the interval used for the animation.\n     *\n     * @internal\n     */\n    const stopAnimationInterval = (): void => {\n      if (animationInterval.value) {\n        clearInterval(animationInterval.value)\n        animationInterval.value = undefined\n      }\n    }\n\n    /**\n     * Increments animation message index; if the new index exceeds the messages list length, it is\n     * reset to 0.\n     *\n     * @internal\n     */\n    const incrementAnimationMessageIndex = (): void => {\n      animationMessageIndex.value = (animationMessageIndex.value + 1) % props.messages.length\n    }\n\n    $x.on('UserHoveredInSearchBox', false).subscribe(() => (isSearchBoxHovered.value = true))\n\n    $x.on('UserHoveredOutSearchBox', false).subscribe(() => (isSearchBoxHovered.value = false))\n\n    $x.on('UserFocusedSearchBox', false).subscribe(() => (isSearchBoxFocused.value = true))\n\n    $x.on('UserBlurredSearchBox', false).subscribe(() => (isSearchBoxFocused.value = false))\n\n    /**\n     * Starts or stops the animation depending on the current animation state.\n     *\n     * @internal\n     */\n    const resetAnimation = (): void => {\n      stopAnimationInterval()\n      if (isBeingAnimated.value) {\n        animationInterval.value = window.setInterval((): void => {\n          incrementAnimationMessageIndex()\n        }, props.animationIntervalMs)\n      }\n    }\n\n    watch(() => 'animationIntervalMs', resetAnimation)\n\n    /**\n     * Resets the animation message index to zero.\n     *\n     * @internal\n     */\n    const resetAnimationMessageIndex = (): void => {\n      animationMessageIndex.value = 0\n    }\n\n    watch(\n      () => props.messages,\n      () => {\n        resetAnimationMessageIndex()\n        resetAnimation()\n      },\n      { deep: true },\n    )\n\n    /**\n     * Sets the animation message index with the right value for the next future iteration when the\n     * current one stops,assuring the user will see always a new message on each animation state\n     * change.\n     *\n     * @internal\n     */\n    watch(\n      isBeingAnimated,\n      () => {\n        if (!isBeingAnimated.value) {\n          if (props.animateOnlyOnHover) {\n            resetAnimationMessageIndex()\n          }\n          incrementAnimationMessageIndex()\n        }\n        resetAnimation()\n      },\n      { immediate: true },\n    )\n\n    onBeforeUnmount(() => {\n      stopAnimationInterval()\n    })\n\n    return {\n      isVisible,\n      message,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-search-input-placeholder-container {\n  position: relative;\n}\n</style>\n\n<style lang=\"css\" scoped>\n.x-search-input-placeholder {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## See it in action\n\nHere a basic example of how the animated search input placeholder is rendered.\n\n```vue live\n<template>\n  <div style=\"position: relative; overflow: hidden;\">\n    <SearchInputPlaceholder\n      style=\"position: absolute; height: 100%; pointer-events: none;\"\n      :messages=\"placeholderMessages\"\n    />\n    <SearchInput />\n  </div>\n</template>\n\n<script setup>\nimport { SearchInput, SearchInputPlaceholder } from '@empathyco/x-components/search-box'\nimport { ref } from 'vue'\n\nconst placeholderMessages = ref([\n  'Find shirts',\n  'Find shoes',\n  'Find watches',\n  'Find handbags',\n  'Find sunglasses',\n])\n</script>\n```\n\n### Animating only on hover\n\nIn this example, the placeholder is configured to animate only when the user hovers in the search\ninput, showing the first message of the array the rest of the time.\n\n```vue live\n<template>\n  <div style=\"position: relative; overflow: hidden;\">\n    <SearchInputPlaceholder\n      style=\"position: absolute; height: 100%; pointer-events: none;\"\n      :messages=\"placeholderMessages\"\n      :animate-only-on-hover=\"true\"\n    />\n    <SearchInput />\n  </div>\n</template>\n\n<script setup>\nimport { SearchInput, SearchInputPlaceholder } from '@empathyco/x-components/search-box'\nimport { ref } from 'vue'\n\nconst placeholderMessages = ref([\n  'Find shirts',\n  'Find shoes',\n  'Find watches',\n  'Find handbags',\n  'Find sunglasses',\n])\n</script>\n```\n</docs>\n"],"names":["AnimateTranslate"],"mappings":"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"}
+{"version":3,"file":"search-input-placeholder.vue2.js","sources":["../../../../../src/x-modules/search-box/components/search-input-placeholder.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"isVisible\"\n    class=\"x-search-input-placeholder xds:input-placeholder\"\n    mode=\"out-in\"\n  >\n    <span :key=\"message\" data-test=\"search-input-placeholder\">\n      {{ message }}\n    </span>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, h, onBeforeUnmount, ref, watch } from 'vue'\nimport AnimateTranslate from '../../../components/animations/animate-translate.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types'\nimport { searchBoxXModule } from '../x-module'\n\n/**.\n * This component renders an animated placeholder for the search input in the shape of a list of\n * iterating messages that can be configured to happen always or only when hovering the input\n *\n * @public\n */\nexport default defineComponent({\n  name: 'SearchInputPlaceholder',\n  xModule: searchBoxXModule.name,\n  props: {\n    /**\n     * List of messages to animate.\n     *\n     * @public\n     */\n    messages: {\n      type: Array as PropType<string[]>,\n      required: true,\n    },\n    /**\n     * Animation component used for the messages.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: () => h(AnimateTranslate, { animationOrigin: 'bottom-to-top' }),\n    },\n    /**\n     * Time in milliseconds during which each message is visible.\n     *\n     * @public\n     */\n    animationIntervalMs: {\n      type: Number,\n      default: 1500,\n    },\n    /**\n     * Whether the messages animation is active only when hovering the search input or always.\n     *\n     * @public\n     */\n    animateOnlyOnHover: Boolean,\n  },\n  setup(props) {\n    const $x = use$x()\n\n    /**.\n     * The search box written query\n     *\n     * @internal\n     */\n    const { query } = useState('searchBox')\n\n    /**.\n     * The search box hover status\n     *\n     * @internal\n     */\n    const isSearchBoxHovered = ref(false)\n\n    /**.\n     * The search box focus status\n     *\n     * @internal\n     */\n    const isSearchBoxFocused = ref(false)\n\n    /**\n     * The index used to point to the current animation message in the list.\n     *\n     * @internal\n     */\n    const animationMessageIndex = ref(0)\n\n    /**\n     * The interval used for the animation.\n     *\n     * @internal\n     */\n    const animationInterval = ref<number | undefined>(undefined)\n\n    /**\n     * The visibility state of the component.\n     *\n     * @returns The visibility state based on the search input state (query & focus).\n     *\n     * @internal\n     */\n    const isVisible = computed((): boolean => !query.value && !isSearchBoxFocused.value)\n\n    /**\n     * The animation state of the component.\n     *\n     * @returns Whether the animation is active or not.\n     *\n     * @internal\n     */\n    const isBeingAnimated = computed(\n      (): boolean => isVisible.value && (!props.animateOnlyOnHover || isSearchBoxHovered.value),\n    )\n\n    /**\n     * The current placeholder message.\n     *\n     * @returns The message to display as placeholder at any moment.\n     *\n     * @internal\n     */\n    const message = computed((): string | undefined =>\n      isBeingAnimated.value ? props.messages[animationMessageIndex.value] : props.messages[0],\n    )\n\n    /**\n     * Clears the interval used for the animation.\n     *\n     * @internal\n     */\n    const stopAnimationInterval = (): void => {\n      if (animationInterval.value) {\n        clearInterval(animationInterval.value)\n        animationInterval.value = undefined\n      }\n    }\n\n    /**\n     * Increments animation message index; if the new index exceeds the messages list length, it is\n     * reset to 0.\n     *\n     * @internal\n     */\n    const incrementAnimationMessageIndex = (): void => {\n      animationMessageIndex.value = (animationMessageIndex.value + 1) % props.messages.length\n    }\n\n    $x.on('UserHoveredInSearchBox', false).subscribe(() => (isSearchBoxHovered.value = true))\n\n    $x.on('UserHoveredOutSearchBox', false).subscribe(() => (isSearchBoxHovered.value = false))\n\n    $x.on('UserFocusedSearchBox', false).subscribe(() => (isSearchBoxFocused.value = true))\n\n    $x.on('UserBlurredSearchBox', false).subscribe(() => (isSearchBoxFocused.value = false))\n\n    /**\n     * Starts or stops the animation depending on the current animation state.\n     *\n     * @internal\n     */\n    const resetAnimation = (): void => {\n      stopAnimationInterval()\n      if (isBeingAnimated.value) {\n        animationInterval.value = window.setInterval((): void => {\n          incrementAnimationMessageIndex()\n        }, props.animationIntervalMs)\n      }\n    }\n\n    watch(() => 'animationIntervalMs', resetAnimation)\n\n    /**\n     * Resets the animation message index to zero.\n     *\n     * @internal\n     */\n    const resetAnimationMessageIndex = (): void => {\n      animationMessageIndex.value = 0\n    }\n\n    watch(\n      () => props.messages,\n      () => {\n        resetAnimationMessageIndex()\n        resetAnimation()\n      },\n      { deep: true },\n    )\n\n    /**\n     * Sets the animation message index with the right value for the next future iteration when the\n     * current one stops,assuring the user will see always a new message on each animation state\n     * change.\n     *\n     * @internal\n     */\n    watch(\n      isBeingAnimated,\n      () => {\n        if (!isBeingAnimated.value) {\n          if (props.animateOnlyOnHover) {\n            resetAnimationMessageIndex()\n          }\n          incrementAnimationMessageIndex()\n        }\n        resetAnimation()\n      },\n      { immediate: true },\n    )\n\n    onBeforeUnmount(() => {\n      stopAnimationInterval()\n    })\n\n    return {\n      isVisible,\n      message,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-search-input-placeholder-container {\n  position: relative;\n}\n</style>\n\n<style lang=\"css\" scoped>\n.x-search-input-placeholder {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## See it in action\n\nHere a basic example of how the animated search input placeholder is rendered.\n\n```vue live\n<template>\n  <div style=\"position: relative; overflow: hidden;\">\n    <SearchInputPlaceholder\n      style=\"position: absolute; height: 100%; pointer-events: none;\"\n      :messages=\"placeholderMessages\"\n    />\n    <SearchInput />\n  </div>\n</template>\n\n<script setup>\nimport { SearchInput, SearchInputPlaceholder } from '@empathyco/x-components/search-box'\nimport { ref } from 'vue'\n\nconst placeholderMessages = ref([\n  'Find shirts',\n  'Find shoes',\n  'Find watches',\n  'Find handbags',\n  'Find sunglasses',\n])\n</script>\n```\n\n### Animating only on hover\n\nIn this example, the placeholder is configured to animate only when the user hovers in the search\ninput, showing the first message of the array the rest of the time.\n\n```vue live\n<template>\n  <div style=\"position: relative; overflow: hidden;\">\n    <SearchInputPlaceholder\n      style=\"position: absolute; height: 100%; pointer-events: none;\"\n      :messages=\"placeholderMessages\"\n      :animate-only-on-hover=\"true\"\n    />\n    <SearchInput />\n  </div>\n</template>\n\n<script setup>\nimport { SearchInput, SearchInputPlaceholder } from '@empathyco/x-components/search-box'\nimport { ref } from 'vue'\n\nconst placeholderMessages = ref([\n  'Find shirts',\n  'Find shoes',\n  'Find watches',\n  'Find handbags',\n  'Find sunglasses',\n])\n</script>\n```\n</docs>\n"],"names":["AnimateTranslate"],"mappings":"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"}

package/js/x-modules/search-box/components/search-input-placeholder.vue4.js

@@ -1,6 +1,6 @@
 import injectCss from '../../../../tools/inject-css.js';
 
-var css = ".x-search-input-placeholder[data-v-db4f79d1]{align-items:center;bottom:0;display:flex;left:0;pointer-events:none;position:absolute;right:0;top:0}";
+var css = ".x-search-input-placeholder[data-v-db4f79d1]{align-items:center;display:flex;inset:0;pointer-events:none;position:absolute}";
 injectCss(css);
 
 export { css };

package/js/x-modules/search-box/components/search-input.vue.js

@@ -10,7 +10,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     maxlength: _ctx.maxLength,
     value: _ctx.query,
     autocomplete: "off",
-    class: "x-search-input x-input",
+    class: "x-search-input xds:input",
     enterkeyhint: "search",
     inputmode: "search",
     type: "search",

package/js/x-modules/search-box/components/search-input.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"search-input.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-input.vue"],"sourcesContent":["<template>\n  <input\n    ref=\"inputElement\"\n    :maxlength=\"maxLength\"\n    :value=\"query\"\n    autocomplete=\"off\"\n    class=\"x-search-input x-input\"\n    enterkeyhint=\"search\"\n    inputmode=\"search\"\n    type=\"search\"\n    data-test=\"search-input\"\n    aria-label=\"type your query here\"\n    @mouseenter=\"emitUserHoveredInSearchBox\"\n    @mouseleave=\"emitUserHoveredOutSearchBox\"\n    @blur=\"emitUserBlurredSearchBox\"\n    @click=\"emitUserClickedSearchBox\"\n    @focus=\"emitUserFocusedSearchBox\"\n    @input=\"emitUserIsTypingAQueryEvents\"\n    @keydown.enter=\"emitUserPressedEnterKey\"\n    @keydown.up.down.prevent=\"emitUserPressedArrowKey\"\n    @beforeinput=\"preventSpecialKey\"\n  />\n</template>\n\n<script lang=\"ts\">\nimport type { ArrowKey } from '../../../utils'\nimport type { DebouncedFunction } from '../../../utils/types'\nimport type { XEvent } from '../../../wiring/events.types'\nimport type { WireMetadata } from '../../../wiring/wiring.types'\nimport { defineComponent, onMounted, ref } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { debounce } from '../../../utils/debounce'\nimport { searchBoxXModule } from '../x-module'\n\n/**\n * This component renders an input field that allows the user to type a query. It also reacts to\n * query changes through event listening.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'SearchInput',\n  xModule: searchBoxXModule.name,\n  props: {\n    /**\n     * Maximum characters allowed in the input search.\n     */\n    maxLength: {\n      type: Number,\n      default: 64,\n    },\n    /**\n     * Allows input autofocus when the search field is rendered.\n     */\n    autofocus: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * Enables the auto-accept query after debounce.\n     */\n    instant: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * Debounce time for the instant.\n     */\n    instantDebounceInMs: {\n      type: Number,\n      default: 500,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const { query } = useState('searchBox')\n\n    const inputElement = ref<HTMLInputElement>()\n\n    let debouncedUserAcceptedAQuery: DebouncedFunction<[string]>\n\n    /**\n     * Generates the {@link WireMetadata} object omitting the moduleName.\n     *\n     * @returns The {@link WireMetadata} object omitting the moduleName.\n     * @internal\n     */\n    const createEventMetadata = (): Omit<WireMetadata, 'moduleName'> => {\n      return {\n        target: inputElement.value,\n        feature: 'search_box',\n      }\n    }\n\n    /**\n     * Emits {@link XEventsTypes.UserAcceptedAQuery} event.\n     *\n     * @remarks It is necessary in a separated method to use it as the parameter of debounce in\n     * emitDebouncedUserAcceptedAQuery method.\n     * @internal\n     * @param query - The query that will be emitted.\n     */\n    const emitUserAcceptedAQuery = (query: string): void => {\n      $x.emit('UserAcceptedAQuery', query, createEventMetadata())\n    }\n\n    /**\n     * Emits {@link XEventsTypes.UserAcceptedAQuery} event with a debounce configured in\n     * `instantDebounceInMs` prop.\n     *\n     * @internal\n     * @param query - The query that will be emitted.\n     */\n    const emitDebouncedUserAcceptedAQuery = (query: string): void => {\n      if (props.instant) {\n        if (!debouncedUserAcceptedAQuery) {\n          debouncedUserAcceptedAQuery = debounce(emitUserAcceptedAQuery, props.instantDebounceInMs)\n        }\n        debouncedUserAcceptedAQuery(query)\n      }\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserHoveredInSearchBox} when search box is hovered in.\n     *\n     * @internal\n     */\n    const emitUserHoveredInSearchBox = (): void => {\n      $x.emit('UserHoveredInSearchBox', undefined, { target: inputElement.value })\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserHoveredOutSearchBox} when search box is hovered out.\n     *\n     * @internal\n     */\n    const emitUserHoveredOutSearchBox = (): void => {\n      $x.emit('UserHoveredOutSearchBox', undefined, { target: inputElement.value })\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserBlurredSearchBox} when search box loses focus.\n     *\n     * @internal\n     */\n    const emitUserBlurredSearchBox = (): void => {\n      $x.emit('UserBlurredSearchBox', undefined, { target: inputElement.value })\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserClickedSearchBox} when user clicks  the search input.\n     *\n     * @internal\n     */\n    const emitUserClickedSearchBox = (): void => {\n      $x.emit('UserClickedSearchBox', undefined, { target: inputElement.value })\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserFocusedSearchBox} when search box gains focus.\n     *\n     * @internal\n     */\n    const emitUserFocusedSearchBox = (): void => {\n      $x.emit('UserFocusedSearchBox', undefined, { target: inputElement.value })\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserIsTypingAQuery} when the user typed/pasted something\n     * into the search-box. Also emits event {@link SearchBoxXEvents.UserClearedQuery} when the user\n     * removes all characters in the search-box.\n     *\n     * @internal\n     */\n    const emitUserIsTypingAQueryEvents = (): void => {\n      const query = inputElement.value?.value ?? ''\n\n      $x.emit('UserIsTypingAQuery', query, { target: inputElement.value })\n      if (query.trim()) {\n        emitDebouncedUserAcceptedAQuery(query)\n      } else {\n        cancelDebouncedUserAcceptedAQuery()\n      }\n    }\n\n    /**\n     * Emits event {@link XEventsTypes.UserPressedArrowKey} when the user pressed an arrow key.\n     *\n     * @param event - The keyboard event with the arrow key pressed.\n     * @internal\n     */\n    const emitUserPressedArrowKey = (event: KeyboardEvent): void => {\n      $x.emit('UserPressedArrowKey', event.key as ArrowKey, createEventMetadata())\n    }\n\n    /**\n     * Emits multiple events when the user pressed the enter key.\n     *\n     * @remarks\n     * Emitted events are:\n     * {@link SearchBoxXEvents.UserPressedEnterKey}\n     * {@link XEventsTypes.UserAcceptedAQuery}\n     *\n     * @internal\n     */\n    const emitUserPressedEnterKey = (): void => {\n      const query = inputElement.value?.value.trim()\n      if (!!query && query.length > 0) {\n        $x.emit('UserPressedEnterKey', query, createEventMetadata())\n        emitUserAcceptedAQuery(query)\n      }\n      inputElement.value?.blur()\n    }\n\n    /**\n     * Prevents the user from either typing or pasting special characters in the input field.\n     *\n     * @internal\n     * @param event - The event that will be checked for special characters.\n     */\n    const preventSpecialKey = (event: InputEvent): void => {\n      if (/[<>]/.test(event.data ?? '')) {\n        event.preventDefault()\n      }\n    }\n\n    /**\n     * When event {@link XEventsTypes.UserReachedEmpathizeTop} or\n     * {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}\n     * are emitted the search input is focused.\n     *\n     * @internal\n     */\n    function focusInput(): void {\n      inputElement.value?.focus()\n    }\n    ;['UserReachedEmpathizeTop', 'UserPressedClearSearchBoxButton'].forEach(event =>\n      $x.on(event as XEvent, false).subscribe(focusInput),\n    )\n\n    /**\n     * When event {@link XEventsTypes.UserAcceptedAQuery} or\n     * {@link SearchBoxXEvents.UserClearedQuery} are emitted the pending debounced emit\n     * {@link XEvent} `UserAcceptedAQuery` is canceled.\n     *\n     * @internal\n     */\n    function cancelDebouncedUserAcceptedAQuery(): void {\n      debouncedUserAcceptedAQuery?.cancel()\n    }\n    ;['UserAcceptedAQuery', 'UserClearedQuery'].forEach(event =>\n      $x.on(event as XEvent, false).subscribe(cancelDebouncedUserAcceptedAQuery),\n    )\n\n    onMounted(() => {\n      if (props.autofocus) {\n        focusInput()\n      }\n    })\n\n    return {\n      query,\n      inputElement,\n      emitUserHoveredInSearchBox,\n      emitUserHoveredOutSearchBox,\n      emitUserBlurredSearchBox,\n      emitUserClickedSearchBox,\n      emitUserFocusedSearchBox,\n      emitUserIsTypingAQueryEvents,\n      emitUserPressedEnterKey,\n      emitUserPressedArrowKey,\n      preventSpecialKey,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-search-input::-webkit-search-decoration,\n.x-search-input::-webkit-search-cancel-button,\n.x-search-input::-webkit-search-results-button,\n.x-search-input::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedSearchBox`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserBlurredSearchBox`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserFocusedSearchBox`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserIsTypingAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPressedEnterKey`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPressedArrowKey`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Search service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example of how the search input is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n  <SearchInput />\n</template>\n\n<script setup>\nimport { SearchInput } from '@empathyco/x-components/search-box'\n</script>\n```\n\n### Play with props\n\nIn this example, the search input has been limited to accept a maximum of 5 characters, including\nspaces, it won't take the focus when it is rendered, and it will emit the `UserAcceptedAQuery` event\nafter 1000 milliseconds without typing.\n\n_Type a term with more than 5 characters to try it out!_\n\n```vue live\n<template>\n  <SearchInput :maxLength=\"5\" :autofocus=\"false\" :instant=\"true\" :instantDebounceInMs=\"1000\" />\n</template>\n\n<script setup>\nimport { SearchInput } from '@empathyco/x-components/search-box'\n</script>\n```\n\n### Play with events\n\nIn this example, a message has been added below the search input to illustrate the action performed.\nFor example, if you select the search input box, the message “focus” appears. When you start to\nenter a search term, the message “typing” appears. If you press Enter after typing a search term,\nthe message “enter” appears.\n\n<!-- prettier-ignore-start -->\n:::warning X Events are only emitted from the root X Component.\nAt the moment, X Events are only emitted from the root X Component. This means that if you wrap\nthe `SearchInput` with another component of another module like the `MainScroll`, you should add\nthe listeners to the `MainScroll` instead of the `SearchInput`. If you need to subscribe to these\nevents, it is recommended to use the [`GlobalXBus`](../common/x-components.global-x-bus.md)\ncomponent instead.\n:::\n<!-- prettier-ignore-end -->\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput\n      @UserPressedEnterKey=\"value = 'enter'\"\n      @UserFocusedSearchBox=\"hasFocus = true\"\n      @UserBlurredSearchBox=\"hasFocus = false\"\n      @UserIsTypingAQuery=\"value = 'typing'\"\n    />\n    <strong>{{ value }}</strong>\n    <span>{{ hasFocus ? 'focused' : 'unfocused' }}</span>\n  </div>\n</template>\n\n<script setup>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { ref } from 'vue'\n\nconst value = ref('')\nconst hasFocus = ref(false)\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `SearchInput` component\ncommunicates with the [`SearchButton`](x-components.search-button.md) and the\n[`ClearSearchInput`](x-components.clear-search-input.md) to offer a full query entry experience.\nFurthermore, you can use it together with the [`QuerySuggestions`](query-suggestions.md) component\nto autocomplete the typed search term.\n\n_Type “trousers” or another fashion term in the input field and then click the clear icon to try it\nout!_\n\n```vue live\n<template>\n  <div>\n    <div style=\"display: flex; flex-flow: row nowrap;\">\n      <SearchInput />\n      <ClearSearchInput>\n        <img src=\"/assets/icons/cross.svg\" />\n      </ClearSearchInput>\n      <SearchButton>Search</SearchButton>\n    </div>\n    <QuerySuggestions />\n  </div>\n</template>\n\n<script setup>\nimport { SearchInput, ClearSearchInput, SearchButton } from '@empathyco/x-components/search-box'\nimport { QuerySuggestions } from '@empathyco/x-components/query-suggestions'\n</script>\n```\n</docs>\n"],"names":["_createElementBlock","_withKeys","_withModifiers"],"mappings":";;;;;;;sBACEA,kBAAA,CAoBE,OAAA,EAAA;AAAA,IAnBA,GAAA,EAAI,cAAA;AAAA,IACH,SAAA,EAAW,IAAA,CAAA,SAAA;AAAA,IACX,KAAA,EAAO,IAAA,CAAA,KAAA;AAAA,IACR,YAAA,EAAa,KAAA;AAAA,IACb,KAAA,EAAM,wBAAA;AAAA,IACN,YAAA,EAAa,QAAA;AAAA,IACb,SAAA,EAAU,QAAA;AAAA,IACV,IAAA,EAAK,QAAA;AAAA,IACL,WAAA,EAAU,cAAA;AAAA,IACV,YAAA,EAAW,sBAAA;AAAA,IACV,cAAU,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,0BAAA,IAAA,IAAA,CAAA,0BAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IACZ,cAAU,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,2BAAA,IAAA,IAAA,CAAA,2BAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IACZ,QAAI,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,wBAAA,IAAA,IAAA,CAAA,wBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IACN,SAAK,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,wBAAA,IAAA,IAAA,CAAA,wBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IACP,SAAK,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,wBAAA,IAAA,IAAA,CAAA,wBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IACP,SAAK,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,4BAAA,IAAA,IAAA,CAAA,4BAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IACP,SAAA,EAAO;AAAA,MAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAC,QAAA,CAAA,CAAA,GAAA,IAAA,KAAQ,IAAA,CAAA,uBAAA,IAAA,IAAA,CAAA,uBAAA,CAAA,GAAA,IAAA,CAAA,EAAuB,CAAA,OAAA,CAAA,CAAA,CAAA;AAAA,MAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAA,QAAA,CAAAC,aAAA,CAAA,CAAA,GAAA,IAAA,KACb,IAAA,CAAA,uBAAA,IAAA,IAAA,CAAA,uBAAA,CAAA,GAAA,IAAA,CAAA,EAAuB,CAAA,SAAA,CAAA,CAAA,EAAA,CAAA,IAAA,EAAA,MAAA,CAAA,CAAA;AAAA,KAAA;AAChD,IAAA,aAAA,EAAW,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,iBAAA,IAAA,IAAA,CAAA,iBAAA,CAAA,GAAA,IAAA,CAAA;AAAA,GAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,CAAA;;;;;;"}
+{"version":3,"file":"search-input.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-input.vue"],"sourcesContent":["<template>\n  <input\n    ref=\"inputElement\"\n    :maxlength=\"maxLength\"\n    :value=\"query\"\n    autocomplete=\"off\"\n    class=\"x-search-input xds:input\"\n    enterkeyhint=\"search\"\n    inputmode=\"search\"\n    type=\"search\"\n    data-test=\"search-input\"\n    aria-label=\"type your query here\"\n    @mouseenter=\"emitUserHoveredInSearchBox\"\n    @mouseleave=\"emitUserHoveredOutSearchBox\"\n    @blur=\"emitUserBlurredSearchBox\"\n    @click=\"emitUserClickedSearchBox\"\n    @focus=\"emitUserFocusedSearchBox\"\n    @input=\"emitUserIsTypingAQueryEvents\"\n    @keydown.enter=\"emitUserPressedEnterKey\"\n    @keydown.up.down.prevent=\"emitUserPressedArrowKey\"\n    @beforeinput=\"preventSpecialKey\"\n  />\n</template>\n\n<script lang=\"ts\">\nimport type { ArrowKey } from '../../../utils'\nimport type { DebouncedFunction } from '../../../utils/types'\nimport type { XEvent } from '../../../wiring/events.types'\nimport type { WireMetadata } from '../../../wiring/wiring.types'\nimport { defineComponent, onMounted, ref } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { debounce } from '../../../utils/debounce'\nimport { searchBoxXModule } from '../x-module'\n\n/**\n * This component renders an input field that allows the user to type a query. It also reacts to\n * query changes through event listening.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'SearchInput',\n  xModule: searchBoxXModule.name,\n  props: {\n    /**\n     * Maximum characters allowed in the input search.\n     */\n    maxLength: {\n      type: Number,\n      default: 64,\n    },\n    /**\n     * Allows input autofocus when the search field is rendered.\n     */\n    autofocus: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * Enables the auto-accept query after debounce.\n     */\n    instant: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * Debounce time for the instant.\n     */\n    instantDebounceInMs: {\n      type: Number,\n      default: 500,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const { query } = useState('searchBox')\n\n    const inputElement = ref<HTMLInputElement>()\n\n    let debouncedUserAcceptedAQuery: DebouncedFunction<[string]>\n\n    /**\n     * Generates the {@link WireMetadata} object omitting the moduleName.\n     *\n     * @returns The {@link WireMetadata} object omitting the moduleName.\n     * @internal\n     */\n    const createEventMetadata = (): Omit<WireMetadata, 'moduleName'> => {\n      return {\n        target: inputElement.value,\n        feature: 'search_box',\n      }\n    }\n\n    /**\n     * Emits {@link XEventsTypes.UserAcceptedAQuery} event.\n     *\n     * @remarks It is necessary in a separated method to use it as the parameter of debounce in\n     * emitDebouncedUserAcceptedAQuery method.\n     * @internal\n     * @param query - The query that will be emitted.\n     */\n    const emitUserAcceptedAQuery = (query: string): void => {\n      $x.emit('UserAcceptedAQuery', query, createEventMetadata())\n    }\n\n    /**\n     * Emits {@link XEventsTypes.UserAcceptedAQuery} event with a debounce configured in\n     * `instantDebounceInMs` prop.\n     *\n     * @internal\n     * @param query - The query that will be emitted.\n     */\n    const emitDebouncedUserAcceptedAQuery = (query: string): void => {\n      if (props.instant) {\n        if (!debouncedUserAcceptedAQuery) {\n          debouncedUserAcceptedAQuery = debounce(emitUserAcceptedAQuery, props.instantDebounceInMs)\n        }\n        debouncedUserAcceptedAQuery(query)\n      }\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserHoveredInSearchBox} when search box is hovered in.\n     *\n     * @internal\n     */\n    const emitUserHoveredInSearchBox = (): void => {\n      $x.emit('UserHoveredInSearchBox', undefined, { target: inputElement.value })\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserHoveredOutSearchBox} when search box is hovered out.\n     *\n     * @internal\n     */\n    const emitUserHoveredOutSearchBox = (): void => {\n      $x.emit('UserHoveredOutSearchBox', undefined, { target: inputElement.value })\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserBlurredSearchBox} when search box loses focus.\n     *\n     * @internal\n     */\n    const emitUserBlurredSearchBox = (): void => {\n      $x.emit('UserBlurredSearchBox', undefined, { target: inputElement.value })\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserClickedSearchBox} when user clicks  the search input.\n     *\n     * @internal\n     */\n    const emitUserClickedSearchBox = (): void => {\n      $x.emit('UserClickedSearchBox', undefined, { target: inputElement.value })\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserFocusedSearchBox} when search box gains focus.\n     *\n     * @internal\n     */\n    const emitUserFocusedSearchBox = (): void => {\n      $x.emit('UserFocusedSearchBox', undefined, { target: inputElement.value })\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserIsTypingAQuery} when the user typed/pasted something\n     * into the search-box. Also emits event {@link SearchBoxXEvents.UserClearedQuery} when the user\n     * removes all characters in the search-box.\n     *\n     * @internal\n     */\n    const emitUserIsTypingAQueryEvents = (): void => {\n      const query = inputElement.value?.value ?? ''\n\n      $x.emit('UserIsTypingAQuery', query, { target: inputElement.value })\n      if (query.trim()) {\n        emitDebouncedUserAcceptedAQuery(query)\n      } else {\n        cancelDebouncedUserAcceptedAQuery()\n      }\n    }\n\n    /**\n     * Emits event {@link XEventsTypes.UserPressedArrowKey} when the user pressed an arrow key.\n     *\n     * @param event - The keyboard event with the arrow key pressed.\n     * @internal\n     */\n    const emitUserPressedArrowKey = (event: KeyboardEvent): void => {\n      $x.emit('UserPressedArrowKey', event.key as ArrowKey, createEventMetadata())\n    }\n\n    /**\n     * Emits multiple events when the user pressed the enter key.\n     *\n     * @remarks\n     * Emitted events are:\n     * {@link SearchBoxXEvents.UserPressedEnterKey}\n     * {@link XEventsTypes.UserAcceptedAQuery}\n     *\n     * @internal\n     */\n    const emitUserPressedEnterKey = (): void => {\n      const query = inputElement.value?.value.trim()\n      if (!!query && query.length > 0) {\n        $x.emit('UserPressedEnterKey', query, createEventMetadata())\n        emitUserAcceptedAQuery(query)\n      }\n      inputElement.value?.blur()\n    }\n\n    /**\n     * Prevents the user from either typing or pasting special characters in the input field.\n     *\n     * @internal\n     * @param event - The event that will be checked for special characters.\n     */\n    const preventSpecialKey = (event: InputEvent): void => {\n      if (/[<>]/.test(event.data ?? '')) {\n        event.preventDefault()\n      }\n    }\n\n    /**\n     * When event {@link XEventsTypes.UserReachedEmpathizeTop} or\n     * {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}\n     * are emitted the search input is focused.\n     *\n     * @internal\n     */\n    function focusInput(): void {\n      inputElement.value?.focus()\n    }\n    ;['UserReachedEmpathizeTop', 'UserPressedClearSearchBoxButton'].forEach(event =>\n      $x.on(event as XEvent, false).subscribe(focusInput),\n    )\n\n    /**\n     * When event {@link XEventsTypes.UserAcceptedAQuery} or\n     * {@link SearchBoxXEvents.UserClearedQuery} are emitted the pending debounced emit\n     * {@link XEvent} `UserAcceptedAQuery` is canceled.\n     *\n     * @internal\n     */\n    function cancelDebouncedUserAcceptedAQuery(): void {\n      debouncedUserAcceptedAQuery?.cancel()\n    }\n    ;['UserAcceptedAQuery', 'UserClearedQuery'].forEach(event =>\n      $x.on(event as XEvent, false).subscribe(cancelDebouncedUserAcceptedAQuery),\n    )\n\n    onMounted(() => {\n      if (props.autofocus) {\n        focusInput()\n      }\n    })\n\n    return {\n      query,\n      inputElement,\n      emitUserHoveredInSearchBox,\n      emitUserHoveredOutSearchBox,\n      emitUserBlurredSearchBox,\n      emitUserClickedSearchBox,\n      emitUserFocusedSearchBox,\n      emitUserIsTypingAQueryEvents,\n      emitUserPressedEnterKey,\n      emitUserPressedArrowKey,\n      preventSpecialKey,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-search-input::-webkit-search-decoration,\n.x-search-input::-webkit-search-cancel-button,\n.x-search-input::-webkit-search-results-button,\n.x-search-input::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedSearchBox`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserBlurredSearchBox`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserFocusedSearchBox`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserIsTypingAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPressedEnterKey`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPressedArrowKey`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Search service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example of how the search input is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n  <SearchInput />\n</template>\n\n<script setup>\nimport { SearchInput } from '@empathyco/x-components/search-box'\n</script>\n```\n\n### Play with props\n\nIn this example, the search input has been limited to accept a maximum of 5 characters, including\nspaces, it won't take the focus when it is rendered, and it will emit the `UserAcceptedAQuery` event\nafter 1000 milliseconds without typing.\n\n_Type a term with more than 5 characters to try it out!_\n\n```vue live\n<template>\n  <SearchInput :maxLength=\"5\" :autofocus=\"false\" :instant=\"true\" :instantDebounceInMs=\"1000\" />\n</template>\n\n<script setup>\nimport { SearchInput } from '@empathyco/x-components/search-box'\n</script>\n```\n\n### Play with events\n\nIn this example, a message has been added below the search input to illustrate the action performed.\nFor example, if you select the search input box, the message “focus” appears. When you start to\nenter a search term, the message “typing” appears. If you press Enter after typing a search term,\nthe message “enter” appears.\n\n<!-- prettier-ignore-start -->\n:::warning X Events are only emitted from the root X Component.\nAt the moment, X Events are only emitted from the root X Component. This means that if you wrap\nthe `SearchInput` with another component of another module like the `MainScroll`, you should add\nthe listeners to the `MainScroll` instead of the `SearchInput`. If you need to subscribe to these\nevents, it is recommended to use the [`GlobalXBus`](../common/x-components.global-x-bus.md)\ncomponent instead.\n:::\n<!-- prettier-ignore-end -->\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput\n      @UserPressedEnterKey=\"value = 'enter'\"\n      @UserFocusedSearchBox=\"hasFocus = true\"\n      @UserBlurredSearchBox=\"hasFocus = false\"\n      @UserIsTypingAQuery=\"value = 'typing'\"\n    />\n    <strong>{{ value }}</strong>\n    <span>{{ hasFocus ? 'focused' : 'unfocused' }}</span>\n  </div>\n</template>\n\n<script setup>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { ref } from 'vue'\n\nconst value = ref('')\nconst hasFocus = ref(false)\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `SearchInput` component\ncommunicates with the [`SearchButton`](x-components.search-button.md) and the\n[`ClearSearchInput`](x-components.clear-search-input.md) to offer a full query entry experience.\nFurthermore, you can use it together with the [`QuerySuggestions`](query-suggestions.md) component\nto autocomplete the typed search term.\n\n_Type “trousers” or another fashion term in the input field and then click the clear icon to try it\nout!_\n\n```vue live\n<template>\n  <div>\n    <div style=\"display: flex; flex-flow: row nowrap;\">\n      <SearchInput />\n      <ClearSearchInput>\n        <img src=\"/assets/icons/cross.svg\" />\n      </ClearSearchInput>\n      <SearchButton>Search</SearchButton>\n    </div>\n    <QuerySuggestions />\n  </div>\n</template>\n\n<script setup>\nimport { SearchInput, ClearSearchInput, SearchButton } from '@empathyco/x-components/search-box'\nimport { QuerySuggestions } from '@empathyco/x-components/query-suggestions'\n</script>\n```\n</docs>\n"],"names":["_createElementBlock","_withKeys","_withModifiers"],"mappings":";;;;;;;sBACEA,kBAAA,CAoBE,OAAA,EAAA;AAAA,IAnBA,GAAA,EAAI,cAAA;AAAA,IACH,SAAA,EAAW,IAAA,CAAA,SAAA;AAAA,IACX,KAAA,EAAO,IAAA,CAAA,KAAA;AAAA,IACR,YAAA,EAAa,KAAA;AAAA,IACb,KAAA,EAAM,0BAAA;AAAA,IACN,YAAA,EAAa,QAAA;AAAA,IACb,SAAA,EAAU,QAAA;AAAA,IACV,IAAA,EAAK,QAAA;AAAA,IACL,WAAA,EAAU,cAAA;AAAA,IACV,YAAA,EAAW,sBAAA;AAAA,IACV,cAAU,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,0BAAA,IAAA,IAAA,CAAA,0BAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IACZ,cAAU,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,2BAAA,IAAA,IAAA,CAAA,2BAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IACZ,QAAI,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,wBAAA,IAAA,IAAA,CAAA,wBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IACN,SAAK,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,wBAAA,IAAA,IAAA,CAAA,wBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IACP,SAAK,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,wBAAA,IAAA,IAAA,CAAA,wBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IACP,SAAK,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,4BAAA,IAAA,IAAA,CAAA,4BAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IACP,SAAA,EAAO;AAAA,MAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAC,QAAA,CAAA,CAAA,GAAA,IAAA,KAAQ,IAAA,CAAA,uBAAA,IAAA,IAAA,CAAA,uBAAA,CAAA,GAAA,IAAA,CAAA,EAAuB,CAAA,OAAA,CAAA,CAAA,CAAA;AAAA,MAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAA,QAAA,CAAAC,aAAA,CAAA,CAAA,GAAA,IAAA,KACb,IAAA,CAAA,uBAAA,IAAA,IAAA,CAAA,uBAAA,CAAA,GAAA,IAAA,CAAA,EAAuB,CAAA,SAAA,CAAA,CAAA,EAAA,CAAA,IAAA,EAAA,MAAA,CAAA,CAAA;AAAA,KAAA;AAChD,IAAA,aAAA,EAAW,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,iBAAA,IAAA,IAAA,CAAA,iBAAA,CAAA,GAAA,IAAA,CAAA;AAAA,GAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,CAAA;;;;;;"}

package/js/x-modules/search-box/components/search-input.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"search-input.vue2.js","sources":["../../../../../src/x-modules/search-box/components/search-input.vue"],"sourcesContent":["<template>\n  <input\n    ref=\"inputElement\"\n    :maxlength=\"maxLength\"\n    :value=\"query\"\n    autocomplete=\"off\"\n    class=\"x-search-input x-input\"\n    enterkeyhint=\"search\"\n    inputmode=\"search\"\n    type=\"search\"\n    data-test=\"search-input\"\n    aria-label=\"type your query here\"\n    @mouseenter=\"emitUserHoveredInSearchBox\"\n    @mouseleave=\"emitUserHoveredOutSearchBox\"\n    @blur=\"emitUserBlurredSearchBox\"\n    @click=\"emitUserClickedSearchBox\"\n    @focus=\"emitUserFocusedSearchBox\"\n    @input=\"emitUserIsTypingAQueryEvents\"\n    @keydown.enter=\"emitUserPressedEnterKey\"\n    @keydown.up.down.prevent=\"emitUserPressedArrowKey\"\n    @beforeinput=\"preventSpecialKey\"\n  />\n</template>\n\n<script lang=\"ts\">\nimport type { ArrowKey } from '../../../utils'\nimport type { DebouncedFunction } from '../../../utils/types'\nimport type { XEvent } from '../../../wiring/events.types'\nimport type { WireMetadata } from '../../../wiring/wiring.types'\nimport { defineComponent, onMounted, ref } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { debounce } from '../../../utils/debounce'\nimport { searchBoxXModule } from '../x-module'\n\n/**\n * This component renders an input field that allows the user to type a query. It also reacts to\n * query changes through event listening.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'SearchInput',\n  xModule: searchBoxXModule.name,\n  props: {\n    /**\n     * Maximum characters allowed in the input search.\n     */\n    maxLength: {\n      type: Number,\n      default: 64,\n    },\n    /**\n     * Allows input autofocus when the search field is rendered.\n     */\n    autofocus: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * Enables the auto-accept query after debounce.\n     */\n    instant: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * Debounce time for the instant.\n     */\n    instantDebounceInMs: {\n      type: Number,\n      default: 500,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const { query } = useState('searchBox')\n\n    const inputElement = ref<HTMLInputElement>()\n\n    let debouncedUserAcceptedAQuery: DebouncedFunction<[string]>\n\n    /**\n     * Generates the {@link WireMetadata} object omitting the moduleName.\n     *\n     * @returns The {@link WireMetadata} object omitting the moduleName.\n     * @internal\n     */\n    const createEventMetadata = (): Omit<WireMetadata, 'moduleName'> => {\n      return {\n        target: inputElement.value,\n        feature: 'search_box',\n      }\n    }\n\n    /**\n     * Emits {@link XEventsTypes.UserAcceptedAQuery} event.\n     *\n     * @remarks It is necessary in a separated method to use it as the parameter of debounce in\n     * emitDebouncedUserAcceptedAQuery method.\n     * @internal\n     * @param query - The query that will be emitted.\n     */\n    const emitUserAcceptedAQuery = (query: string): void => {\n      $x.emit('UserAcceptedAQuery', query, createEventMetadata())\n    }\n\n    /**\n     * Emits {@link XEventsTypes.UserAcceptedAQuery} event with a debounce configured in\n     * `instantDebounceInMs` prop.\n     *\n     * @internal\n     * @param query - The query that will be emitted.\n     */\n    const emitDebouncedUserAcceptedAQuery = (query: string): void => {\n      if (props.instant) {\n        if (!debouncedUserAcceptedAQuery) {\n          debouncedUserAcceptedAQuery = debounce(emitUserAcceptedAQuery, props.instantDebounceInMs)\n        }\n        debouncedUserAcceptedAQuery(query)\n      }\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserHoveredInSearchBox} when search box is hovered in.\n     *\n     * @internal\n     */\n    const emitUserHoveredInSearchBox = (): void => {\n      $x.emit('UserHoveredInSearchBox', undefined, { target: inputElement.value })\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserHoveredOutSearchBox} when search box is hovered out.\n     *\n     * @internal\n     */\n    const emitUserHoveredOutSearchBox = (): void => {\n      $x.emit('UserHoveredOutSearchBox', undefined, { target: inputElement.value })\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserBlurredSearchBox} when search box loses focus.\n     *\n     * @internal\n     */\n    const emitUserBlurredSearchBox = (): void => {\n      $x.emit('UserBlurredSearchBox', undefined, { target: inputElement.value })\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserClickedSearchBox} when user clicks  the search input.\n     *\n     * @internal\n     */\n    const emitUserClickedSearchBox = (): void => {\n      $x.emit('UserClickedSearchBox', undefined, { target: inputElement.value })\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserFocusedSearchBox} when search box gains focus.\n     *\n     * @internal\n     */\n    const emitUserFocusedSearchBox = (): void => {\n      $x.emit('UserFocusedSearchBox', undefined, { target: inputElement.value })\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserIsTypingAQuery} when the user typed/pasted something\n     * into the search-box. Also emits event {@link SearchBoxXEvents.UserClearedQuery} when the user\n     * removes all characters in the search-box.\n     *\n     * @internal\n     */\n    const emitUserIsTypingAQueryEvents = (): void => {\n      const query = inputElement.value?.value ?? ''\n\n      $x.emit('UserIsTypingAQuery', query, { target: inputElement.value })\n      if (query.trim()) {\n        emitDebouncedUserAcceptedAQuery(query)\n      } else {\n        cancelDebouncedUserAcceptedAQuery()\n      }\n    }\n\n    /**\n     * Emits event {@link XEventsTypes.UserPressedArrowKey} when the user pressed an arrow key.\n     *\n     * @param event - The keyboard event with the arrow key pressed.\n     * @internal\n     */\n    const emitUserPressedArrowKey = (event: KeyboardEvent): void => {\n      $x.emit('UserPressedArrowKey', event.key as ArrowKey, createEventMetadata())\n    }\n\n    /**\n     * Emits multiple events when the user pressed the enter key.\n     *\n     * @remarks\n     * Emitted events are:\n     * {@link SearchBoxXEvents.UserPressedEnterKey}\n     * {@link XEventsTypes.UserAcceptedAQuery}\n     *\n     * @internal\n     */\n    const emitUserPressedEnterKey = (): void => {\n      const query = inputElement.value?.value.trim()\n      if (!!query && query.length > 0) {\n        $x.emit('UserPressedEnterKey', query, createEventMetadata())\n        emitUserAcceptedAQuery(query)\n      }\n      inputElement.value?.blur()\n    }\n\n    /**\n     * Prevents the user from either typing or pasting special characters in the input field.\n     *\n     * @internal\n     * @param event - The event that will be checked for special characters.\n     */\n    const preventSpecialKey = (event: InputEvent): void => {\n      if (/[<>]/.test(event.data ?? '')) {\n        event.preventDefault()\n      }\n    }\n\n    /**\n     * When event {@link XEventsTypes.UserReachedEmpathizeTop} or\n     * {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}\n     * are emitted the search input is focused.\n     *\n     * @internal\n     */\n    function focusInput(): void {\n      inputElement.value?.focus()\n    }\n    ;['UserReachedEmpathizeTop', 'UserPressedClearSearchBoxButton'].forEach(event =>\n      $x.on(event as XEvent, false).subscribe(focusInput),\n    )\n\n    /**\n     * When event {@link XEventsTypes.UserAcceptedAQuery} or\n     * {@link SearchBoxXEvents.UserClearedQuery} are emitted the pending debounced emit\n     * {@link XEvent} `UserAcceptedAQuery` is canceled.\n     *\n     * @internal\n     */\n    function cancelDebouncedUserAcceptedAQuery(): void {\n      debouncedUserAcceptedAQuery?.cancel()\n    }\n    ;['UserAcceptedAQuery', 'UserClearedQuery'].forEach(event =>\n      $x.on(event as XEvent, false).subscribe(cancelDebouncedUserAcceptedAQuery),\n    )\n\n    onMounted(() => {\n      if (props.autofocus) {\n        focusInput()\n      }\n    })\n\n    return {\n      query,\n      inputElement,\n      emitUserHoveredInSearchBox,\n      emitUserHoveredOutSearchBox,\n      emitUserBlurredSearchBox,\n      emitUserClickedSearchBox,\n      emitUserFocusedSearchBox,\n      emitUserIsTypingAQueryEvents,\n      emitUserPressedEnterKey,\n      emitUserPressedArrowKey,\n      preventSpecialKey,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-search-input::-webkit-search-decoration,\n.x-search-input::-webkit-search-cancel-button,\n.x-search-input::-webkit-search-results-button,\n.x-search-input::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedSearchBox`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserBlurredSearchBox`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserFocusedSearchBox`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserIsTypingAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPressedEnterKey`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPressedArrowKey`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Search service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example of how the search input is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n  <SearchInput />\n</template>\n\n<script setup>\nimport { SearchInput } from '@empathyco/x-components/search-box'\n</script>\n```\n\n### Play with props\n\nIn this example, the search input has been limited to accept a maximum of 5 characters, including\nspaces, it won't take the focus when it is rendered, and it will emit the `UserAcceptedAQuery` event\nafter 1000 milliseconds without typing.\n\n_Type a term with more than 5 characters to try it out!_\n\n```vue live\n<template>\n  <SearchInput :maxLength=\"5\" :autofocus=\"false\" :instant=\"true\" :instantDebounceInMs=\"1000\" />\n</template>\n\n<script setup>\nimport { SearchInput } from '@empathyco/x-components/search-box'\n</script>\n```\n\n### Play with events\n\nIn this example, a message has been added below the search input to illustrate the action performed.\nFor example, if you select the search input box, the message “focus” appears. When you start to\nenter a search term, the message “typing” appears. If you press Enter after typing a search term,\nthe message “enter” appears.\n\n<!-- prettier-ignore-start -->\n:::warning X Events are only emitted from the root X Component.\nAt the moment, X Events are only emitted from the root X Component. This means that if you wrap\nthe `SearchInput` with another component of another module like the `MainScroll`, you should add\nthe listeners to the `MainScroll` instead of the `SearchInput`. If you need to subscribe to these\nevents, it is recommended to use the [`GlobalXBus`](../common/x-components.global-x-bus.md)\ncomponent instead.\n:::\n<!-- prettier-ignore-end -->\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput\n      @UserPressedEnterKey=\"value = 'enter'\"\n      @UserFocusedSearchBox=\"hasFocus = true\"\n      @UserBlurredSearchBox=\"hasFocus = false\"\n      @UserIsTypingAQuery=\"value = 'typing'\"\n    />\n    <strong>{{ value }}</strong>\n    <span>{{ hasFocus ? 'focused' : 'unfocused' }}</span>\n  </div>\n</template>\n\n<script setup>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { ref } from 'vue'\n\nconst value = ref('')\nconst hasFocus = ref(false)\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `SearchInput` component\ncommunicates with the [`SearchButton`](x-components.search-button.md) and the\n[`ClearSearchInput`](x-components.clear-search-input.md) to offer a full query entry experience.\nFurthermore, you can use it together with the [`QuerySuggestions`](query-suggestions.md) component\nto autocomplete the typed search term.\n\n_Type “trousers” or another fashion term in the input field and then click the clear icon to try it\nout!_\n\n```vue live\n<template>\n  <div>\n    <div style=\"display: flex; flex-flow: row nowrap;\">\n      <SearchInput />\n      <ClearSearchInput>\n        <img src=\"/assets/icons/cross.svg\" />\n      </ClearSearchInput>\n      <SearchButton>Search</SearchButton>\n    </div>\n    <QuerySuggestions />\n  </div>\n</template>\n\n<script setup>\nimport { SearchInput, ClearSearchInput, SearchButton } from '@empathyco/x-components/search-box'\nimport { QuerySuggestions } from '@empathyco/x-components/query-suggestions'\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"search-input.vue2.js","sources":["../../../../../src/x-modules/search-box/components/search-input.vue"],"sourcesContent":["<template>\n  <input\n    ref=\"inputElement\"\n    :maxlength=\"maxLength\"\n    :value=\"query\"\n    autocomplete=\"off\"\n    class=\"x-search-input xds:input\"\n    enterkeyhint=\"search\"\n    inputmode=\"search\"\n    type=\"search\"\n    data-test=\"search-input\"\n    aria-label=\"type your query here\"\n    @mouseenter=\"emitUserHoveredInSearchBox\"\n    @mouseleave=\"emitUserHoveredOutSearchBox\"\n    @blur=\"emitUserBlurredSearchBox\"\n    @click=\"emitUserClickedSearchBox\"\n    @focus=\"emitUserFocusedSearchBox\"\n    @input=\"emitUserIsTypingAQueryEvents\"\n    @keydown.enter=\"emitUserPressedEnterKey\"\n    @keydown.up.down.prevent=\"emitUserPressedArrowKey\"\n    @beforeinput=\"preventSpecialKey\"\n  />\n</template>\n\n<script lang=\"ts\">\nimport type { ArrowKey } from '../../../utils'\nimport type { DebouncedFunction } from '../../../utils/types'\nimport type { XEvent } from '../../../wiring/events.types'\nimport type { WireMetadata } from '../../../wiring/wiring.types'\nimport { defineComponent, onMounted, ref } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { debounce } from '../../../utils/debounce'\nimport { searchBoxXModule } from '../x-module'\n\n/**\n * This component renders an input field that allows the user to type a query. It also reacts to\n * query changes through event listening.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'SearchInput',\n  xModule: searchBoxXModule.name,\n  props: {\n    /**\n     * Maximum characters allowed in the input search.\n     */\n    maxLength: {\n      type: Number,\n      default: 64,\n    },\n    /**\n     * Allows input autofocus when the search field is rendered.\n     */\n    autofocus: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * Enables the auto-accept query after debounce.\n     */\n    instant: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * Debounce time for the instant.\n     */\n    instantDebounceInMs: {\n      type: Number,\n      default: 500,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const { query } = useState('searchBox')\n\n    const inputElement = ref<HTMLInputElement>()\n\n    let debouncedUserAcceptedAQuery: DebouncedFunction<[string]>\n\n    /**\n     * Generates the {@link WireMetadata} object omitting the moduleName.\n     *\n     * @returns The {@link WireMetadata} object omitting the moduleName.\n     * @internal\n     */\n    const createEventMetadata = (): Omit<WireMetadata, 'moduleName'> => {\n      return {\n        target: inputElement.value,\n        feature: 'search_box',\n      }\n    }\n\n    /**\n     * Emits {@link XEventsTypes.UserAcceptedAQuery} event.\n     *\n     * @remarks It is necessary in a separated method to use it as the parameter of debounce in\n     * emitDebouncedUserAcceptedAQuery method.\n     * @internal\n     * @param query - The query that will be emitted.\n     */\n    const emitUserAcceptedAQuery = (query: string): void => {\n      $x.emit('UserAcceptedAQuery', query, createEventMetadata())\n    }\n\n    /**\n     * Emits {@link XEventsTypes.UserAcceptedAQuery} event with a debounce configured in\n     * `instantDebounceInMs` prop.\n     *\n     * @internal\n     * @param query - The query that will be emitted.\n     */\n    const emitDebouncedUserAcceptedAQuery = (query: string): void => {\n      if (props.instant) {\n        if (!debouncedUserAcceptedAQuery) {\n          debouncedUserAcceptedAQuery = debounce(emitUserAcceptedAQuery, props.instantDebounceInMs)\n        }\n        debouncedUserAcceptedAQuery(query)\n      }\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserHoveredInSearchBox} when search box is hovered in.\n     *\n     * @internal\n     */\n    const emitUserHoveredInSearchBox = (): void => {\n      $x.emit('UserHoveredInSearchBox', undefined, { target: inputElement.value })\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserHoveredOutSearchBox} when search box is hovered out.\n     *\n     * @internal\n     */\n    const emitUserHoveredOutSearchBox = (): void => {\n      $x.emit('UserHoveredOutSearchBox', undefined, { target: inputElement.value })\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserBlurredSearchBox} when search box loses focus.\n     *\n     * @internal\n     */\n    const emitUserBlurredSearchBox = (): void => {\n      $x.emit('UserBlurredSearchBox', undefined, { target: inputElement.value })\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserClickedSearchBox} when user clicks  the search input.\n     *\n     * @internal\n     */\n    const emitUserClickedSearchBox = (): void => {\n      $x.emit('UserClickedSearchBox', undefined, { target: inputElement.value })\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserFocusedSearchBox} when search box gains focus.\n     *\n     * @internal\n     */\n    const emitUserFocusedSearchBox = (): void => {\n      $x.emit('UserFocusedSearchBox', undefined, { target: inputElement.value })\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserIsTypingAQuery} when the user typed/pasted something\n     * into the search-box. Also emits event {@link SearchBoxXEvents.UserClearedQuery} when the user\n     * removes all characters in the search-box.\n     *\n     * @internal\n     */\n    const emitUserIsTypingAQueryEvents = (): void => {\n      const query = inputElement.value?.value ?? ''\n\n      $x.emit('UserIsTypingAQuery', query, { target: inputElement.value })\n      if (query.trim()) {\n        emitDebouncedUserAcceptedAQuery(query)\n      } else {\n        cancelDebouncedUserAcceptedAQuery()\n      }\n    }\n\n    /**\n     * Emits event {@link XEventsTypes.UserPressedArrowKey} when the user pressed an arrow key.\n     *\n     * @param event - The keyboard event with the arrow key pressed.\n     * @internal\n     */\n    const emitUserPressedArrowKey = (event: KeyboardEvent): void => {\n      $x.emit('UserPressedArrowKey', event.key as ArrowKey, createEventMetadata())\n    }\n\n    /**\n     * Emits multiple events when the user pressed the enter key.\n     *\n     * @remarks\n     * Emitted events are:\n     * {@link SearchBoxXEvents.UserPressedEnterKey}\n     * {@link XEventsTypes.UserAcceptedAQuery}\n     *\n     * @internal\n     */\n    const emitUserPressedEnterKey = (): void => {\n      const query = inputElement.value?.value.trim()\n      if (!!query && query.length > 0) {\n        $x.emit('UserPressedEnterKey', query, createEventMetadata())\n        emitUserAcceptedAQuery(query)\n      }\n      inputElement.value?.blur()\n    }\n\n    /**\n     * Prevents the user from either typing or pasting special characters in the input field.\n     *\n     * @internal\n     * @param event - The event that will be checked for special characters.\n     */\n    const preventSpecialKey = (event: InputEvent): void => {\n      if (/[<>]/.test(event.data ?? '')) {\n        event.preventDefault()\n      }\n    }\n\n    /**\n     * When event {@link XEventsTypes.UserReachedEmpathizeTop} or\n     * {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}\n     * are emitted the search input is focused.\n     *\n     * @internal\n     */\n    function focusInput(): void {\n      inputElement.value?.focus()\n    }\n    ;['UserReachedEmpathizeTop', 'UserPressedClearSearchBoxButton'].forEach(event =>\n      $x.on(event as XEvent, false).subscribe(focusInput),\n    )\n\n    /**\n     * When event {@link XEventsTypes.UserAcceptedAQuery} or\n     * {@link SearchBoxXEvents.UserClearedQuery} are emitted the pending debounced emit\n     * {@link XEvent} `UserAcceptedAQuery` is canceled.\n     *\n     * @internal\n     */\n    function cancelDebouncedUserAcceptedAQuery(): void {\n      debouncedUserAcceptedAQuery?.cancel()\n    }\n    ;['UserAcceptedAQuery', 'UserClearedQuery'].forEach(event =>\n      $x.on(event as XEvent, false).subscribe(cancelDebouncedUserAcceptedAQuery),\n    )\n\n    onMounted(() => {\n      if (props.autofocus) {\n        focusInput()\n      }\n    })\n\n    return {\n      query,\n      inputElement,\n      emitUserHoveredInSearchBox,\n      emitUserHoveredOutSearchBox,\n      emitUserBlurredSearchBox,\n      emitUserClickedSearchBox,\n      emitUserFocusedSearchBox,\n      emitUserIsTypingAQueryEvents,\n      emitUserPressedEnterKey,\n      emitUserPressedArrowKey,\n      preventSpecialKey,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-search-input::-webkit-search-decoration,\n.x-search-input::-webkit-search-cancel-button,\n.x-search-input::-webkit-search-results-button,\n.x-search-input::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedSearchBox`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserBlurredSearchBox`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserFocusedSearchBox`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserIsTypingAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPressedEnterKey`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPressedArrowKey`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Search service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example of how the search input is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n  <SearchInput />\n</template>\n\n<script setup>\nimport { SearchInput } from '@empathyco/x-components/search-box'\n</script>\n```\n\n### Play with props\n\nIn this example, the search input has been limited to accept a maximum of 5 characters, including\nspaces, it won't take the focus when it is rendered, and it will emit the `UserAcceptedAQuery` event\nafter 1000 milliseconds without typing.\n\n_Type a term with more than 5 characters to try it out!_\n\n```vue live\n<template>\n  <SearchInput :maxLength=\"5\" :autofocus=\"false\" :instant=\"true\" :instantDebounceInMs=\"1000\" />\n</template>\n\n<script setup>\nimport { SearchInput } from '@empathyco/x-components/search-box'\n</script>\n```\n\n### Play with events\n\nIn this example, a message has been added below the search input to illustrate the action performed.\nFor example, if you select the search input box, the message “focus” appears. When you start to\nenter a search term, the message “typing” appears. If you press Enter after typing a search term,\nthe message “enter” appears.\n\n<!-- prettier-ignore-start -->\n:::warning X Events are only emitted from the root X Component.\nAt the moment, X Events are only emitted from the root X Component. This means that if you wrap\nthe `SearchInput` with another component of another module like the `MainScroll`, you should add\nthe listeners to the `MainScroll` instead of the `SearchInput`. If you need to subscribe to these\nevents, it is recommended to use the [`GlobalXBus`](../common/x-components.global-x-bus.md)\ncomponent instead.\n:::\n<!-- prettier-ignore-end -->\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput\n      @UserPressedEnterKey=\"value = 'enter'\"\n      @UserFocusedSearchBox=\"hasFocus = true\"\n      @UserBlurredSearchBox=\"hasFocus = false\"\n      @UserIsTypingAQuery=\"value = 'typing'\"\n    />\n    <strong>{{ value }}</strong>\n    <span>{{ hasFocus ? 'focused' : 'unfocused' }}</span>\n  </div>\n</template>\n\n<script setup>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { ref } from 'vue'\n\nconst value = ref('')\nconst hasFocus = ref(false)\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `SearchInput` component\ncommunicates with the [`SearchButton`](x-components.search-button.md) and the\n[`ClearSearchInput`](x-components.clear-search-input.md) to offer a full query entry experience.\nFurthermore, you can use it together with the [`QuerySuggestions`](query-suggestions.md) component\nto autocomplete the typed search term.\n\n_Type “trousers” or another fashion term in the input field and then click the clear icon to try it\nout!_\n\n```vue live\n<template>\n  <div>\n    <div style=\"display: flex; flex-flow: row nowrap;\">\n      <SearchInput />\n      <ClearSearchInput>\n        <img src=\"/assets/icons/cross.svg\" />\n      </ClearSearchInput>\n      <SearchButton>Search</SearchButton>\n    </div>\n    <QuerySuggestions />\n  </div>\n</template>\n\n<script setup>\nimport { SearchInput, ClearSearchInput, SearchButton } from '@empathyco/x-components/search-box'\nimport { QuerySuggestions } from '@empathyco/x-components/query-suggestions'\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}

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

@@ -4,7 +4,7 @@ import '../../utils/storage.js';
 import { namespacedWireDispatch, namespacedWireCommit } from '../../wiring/namespaced-wires.factory.js';
 import { namespacedDebounce } from '../../wiring/namespaced-wires.operators.js';
 import { wireServiceWithoutPayload, wireService } from '../../wiring/wires.factory.js';
-import { filterTruthyPayload, filter, mapWire } from '../../wiring/wires.operators.js';
+import { filter, mapWire } from '../../wiring/wires.operators.js';
 import { createWiring } from '../../wiring/wiring.utils.js';
 import { DefaultExternalTaggingService } from './service/external-tagging.service.js';
 
@@ -225,23 +225,6 @@ const trackNoResultsQueryWithSemanticsWire = trackNoResultsQueryWithFallbackWire
  * @deprecated - Use {@link trackNoResultsQueryWithFallbackWireDebounced} instead.
  */
 const trackNoResultsQueryWithSemanticsWireDebounced = trackNoResultsQueryWithFallbackWireDebounced;
-/**
- * Performs a track of clicking the AI overview expand button when the playload (expanded) is false.
- *
- * @public
- */
-const trackAiOverviewButtonClickedWire = filterTruthyPayload(wireDispatch('track', ({ metadata: { toolingDisplayClick, suggestionText } }) => {
-    const taggingInfo = {
-        ...toolingDisplayClick,
-        params: {
-            ...toolingDisplayClick.params,
-            productId: 'EXPAND',
-            title: suggestionText,
-            url: 'none',
-        },
-    };
-    return taggingInfo;
-}));
 /**
  * Factory helper to create a wire for the track of the display click.
  *
@@ -420,9 +403,6 @@ const taggingWiring = createWiring({
     AiSuggestionsSearchChanged: {
         trackAiSuggestionsSearchWire,
     },
-    UserClickedAiOverviewExpandButton: {
-        trackAiOverviewButtonClickedWire,
-    },
     UserClickedAnAiOverviewResult: {
         trackToolingDisplayClickedWire,
     },
@@ -431,5 +411,5 @@ const taggingWiring = createWiring({
     },
 });
 
-export { createSetQueryTaggingFromQueryPreview, createTrackDisplayWire, createTrackRelatedPromptToolingDisplayClickWire, createTrackToolingAdd2CartWire, createTrackToolingDisplayWire, createTrackWire, setConsent, setNoResultsTaggingEnabledWire, setQueryTaggingFromQueryPreview, setQueryTaggingInfo, setTaggingConfig, taggingWiring, trackAddToCartWire, trackAiOverviewButtonClickedWire, trackAiSuggestionsSearchWire, trackBannerClickedWire, trackDisplayClickedWire, trackElementDisplayedWire, trackNoResultsQueryWithFallbackWire, trackNoResultsQueryWithFallbackWireDebounced, trackNoResultsQueryWithSemanticsWire, trackNoResultsQueryWithSemanticsWireDebounced, trackPromotedClickedWire, trackQueryWire, trackRelatedPromptToolingDisplayClickWire, trackResultClickedWire, trackToolingAdd2CartWire, trackToolingDisplayClickedWire };
+export { createSetQueryTaggingFromQueryPreview, createTrackDisplayWire, createTrackRelatedPromptToolingDisplayClickWire, createTrackToolingAdd2CartWire, createTrackToolingDisplayWire, createTrackWire, setConsent, setNoResultsTaggingEnabledWire, setQueryTaggingFromQueryPreview, setQueryTaggingInfo, setTaggingConfig, taggingWiring, trackAddToCartWire, trackAiSuggestionsSearchWire, trackBannerClickedWire, trackDisplayClickedWire, trackElementDisplayedWire, trackNoResultsQueryWithFallbackWire, trackNoResultsQueryWithFallbackWireDebounced, trackNoResultsQueryWithSemanticsWire, trackNoResultsQueryWithSemanticsWireDebounced, trackPromotedClickedWire, trackQueryWire, trackRelatedPromptToolingDisplayClickWire, trackResultClickedWire, trackToolingAdd2CartWire, trackToolingDisplayClickedWire };
 //# sourceMappingURL=wiring.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/tagging/wiring.ts"],"sourcesContent":["import type {\n  AiSuggestionSearch,\n  RelatedPrompt,\n  Result,\n  SemanticQuery,\n  Taggable,\n  Tagging,\n  TaggingRequest,\n} from '@empathyco/x-types'\nimport type { FeatureLocation } from '../../types/index'\nimport type { DisplayWireMetadata, Wire } from '../../wiring/wiring.types'\nimport { DefaultSessionService } from '@empathyco/x-utils'\nimport { createOrigin } from '../../utils/index'\nimport { namespacedWireCommit, namespacedWireDispatch } from '../../wiring/namespaced-wires.factory'\nimport { namespacedDebounce } from '../../wiring/namespaced-wires.operators'\nimport { wireService, wireServiceWithoutPayload } from '../../wiring/wires.factory'\nimport { filter, filterTruthyPayload, mapWire } from '../../wiring/wires.operators'\nimport { createWiring } from '../../wiring/wiring.utils'\nimport { DefaultExternalTaggingService } from './service/external-tagging.service'\n\n/**\n * `tagging` {@link XModuleName | XModule name}.\n *\n * @internal\n */\nconst moduleName = 'tagging'\n\n/**\n * Debounce function for the module.\n */\nconst moduleDebounce = namespacedDebounce(moduleName)\n\n/**\n * WireCommit for {@link TaggingXModule}.\n *\n * @internal\n */\nconst wireCommit = namespacedWireCommit(moduleName)\n\n/**\n * WireDispatch for {@link TaggingXModule}.\n *\n * @internal\n */\nconst wireDispatch = namespacedWireDispatch(moduleName)\n\n/**\n * Wires without payload factory for {@link DefaultSessionService}.\n */\nconst wireSessionServiceWithoutPayload = wireServiceWithoutPayload(DefaultSessionService.instance)\n\n/**\n * Wires factory for {@link DefaultExternalTaggingService}.\n */\nconst wireExternalTaggingService = wireService(DefaultExternalTaggingService.instance)\n\n/**\n * Stores the given result on the local storage.\n *\n * @public\n */\nconst storeClickedResultWire = wireExternalTaggingService('storeResultClicked')\n\n/**\n * Stores the result added to cart on the local storage.\n *\n * @public\n */\nconst storeAddToCartWire = wireExternalTaggingService('storeAddToCart')\n\n/**\n * Moves the result information from the local storage to session storage.\n *\n * @public\n */\nconst moveClickedResultToSessionWire = mapWire(\n  wireExternalTaggingService('moveToSessionStorage'),\n  (payload: string) => {\n    return payload === 'url' ? undefined : payload\n  },\n)\n\n/**\n * Triggers the add to cart tracking.\n *\n * @public\n */\nconst trackAddToCartFromSessionStorage = wireExternalTaggingService('trackAddToCart')\n\n/**\n * Clears the session id.\n *\n * @public\n */\nconst clearSessionWire = filter(\n  wireSessionServiceWithoutPayload('clearSessionId'),\n  ({ eventPayload: consent }) => !consent,\n)\n\n/**\n * Sets the tagging state `consent`.\n *\n * @public\n */\nexport const setConsent = wireCommit('setConsent')\n\n/**\n * Sets the tagging state `noResultsTaggingEnabled`.\n *\n * @public\n */\nexport const setNoResultsTaggingEnabledWire = wireCommit('setNoResultsTaggingEnabled')\n\n/**\n * Sets the tagging config state.\n *\n * @public\n */\nexport const setTaggingConfig = wireCommit('mergeConfig')\n\n/**\n * Tracks the tagging of the query.\n *\n * @public\n */\nexport const trackQueryWire = filter(\n  wireDispatch('track'),\n  ({ eventPayload, store }) =>\n    ((eventPayload as TaggingRequest).params.totalHits as number) > 0 ||\n    !store.state.x.tagging.noResultsTaggingEnabled,\n)\n\n/**\n * Sets the tagging state of the query tagging info using a debounce which ends if the user\n * accepts a query.\n *\n * @public\n */\nexport const setQueryTaggingInfo = moduleDebounce(\n  wireCommit('setQueryTaggingInfo'),\n  ({ state }) => state.config.queryTaggingDebounceMs,\n  {\n    cancelOn: 'UserClearedQuery',\n    forceOn: [\n      'UserClickedAResult',\n      'UserClickedAPromoted',\n      'UserClickedABanner',\n      'UserClickedARedirection',\n      'UserReachedResultsListEnd',\n    ],\n  },\n)\n\n/**\n * Sets the tagging state of the query tagging info using.\n *\n * @public\n */\nexport const setQueryTaggingFromQueryPreview = createSetQueryTaggingFromQueryPreview()\n\n/**\n * Tracks the tagging of the result.\n *\n * @public\n */\nexport const trackResultClickedWire = createTrackWire('click')\n\n/**\n * Tracks the tagging of the banner.\n *\n * @public\n */\nexport const trackBannerClickedWire = createTrackWire('click')\n\n/**\n * Tracks the click on a promoted result.\n *\n * @public\n */\nexport const trackPromotedClickedWire = createTrackWire('click')\n\n/**\n * Performs a track of a result added to the cart.\n *\n * @public\n */\nexport const trackAddToCartWire = createTrackWire('add2cart')\n\n/**\n * Performs a track of a display result being clicked.\n *\n * @public\n */\nexport const trackDisplayClickedWire = createTrackDisplayWire('displayClick')\n\n/**\n * Performs a track of a display result being clicked.\n *\n * @public\n */\nexport const trackToolingDisplayClickedWire = createTrackToolingDisplayWire()\n\n/**\n * Performs a track of a display result being clicked.\n *\n * @public\n */\nexport const trackToolingAdd2CartWire = createTrackToolingAdd2CartWire()\n\n/**\n * Performs a track of a clicked related prompt.\n *\n * @public\n */\nexport const trackRelatedPromptToolingDisplayClickWire =\n  createTrackRelatedPromptToolingDisplayClickWire()\n\n/**\n * Performs a track of a display element appearing.\n *\n * @public\n */\nexport const trackElementDisplayedWire = createTrackDisplayWire('display')\n\n/**\n * Factory helper to create a wire for the track of a taggable element.\n *\n * @param property - Key of the tagging object to track.\n * @returns A new wire for the given property of the taggable element.\n *\n * @public\n */\nexport function createTrackWire(property: keyof Tagging): Wire<Taggable> {\n  return filter(\n    wireDispatch('track', ({ eventPayload: { tagging }, metadata: { location } }) => {\n      const taggingInfo: TaggingRequest = tagging[property]\n      taggingInfo.params.location = location as string\n      return taggingInfo\n    }),\n    ({ eventPayload: { tagging }, metadata: { ignoreInModules } }) =>\n      // eslint-disable-next-line ts/no-unsafe-member-access\n      !!tagging?.[property] && !ignoreInModules?.includes(moduleName),\n  )\n}\n\n/**\n * Performs a track of a query with no results that used related prompts or semantic queries as fallback.\n * The totalHits will be changed to -1 if related prompts or semantic queries are found in order to differentiate\n * it from scenarios where the user encounters a no-results page without any related prompts or semantic queries.\n *\n * @public\n */\nexport const trackNoResultsQueryWithFallbackWire = filter(\n  wireDispatch('track', ({ eventPayload, state }) => {\n    const { queryTaggingInfo } = state\n    const totalHits = (eventPayload as RelatedPrompt[] | SemanticQuery[]).length > 0 ? -1 : 0\n    return {\n      params: { ...queryTaggingInfo?.params, totalHits },\n      url: queryTaggingInfo?.url ?? '',\n    }\n  }),\n  ({ store }) => Number(store.state.x.tagging.queryTaggingInfo?.params.totalHits) === 0,\n)\n\n/**.\n * Debounced version of {@link trackNoResultsQueryWithFallbackWire}\n *\n * @public\n */\nexport const trackNoResultsQueryWithFallbackWireDebounced = moduleDebounce(\n  trackNoResultsQueryWithFallbackWire,\n  ({ state }) => state.config.queryTaggingDebounceMs,\n  { cancelOn: ['QueryPreviewUnmounted', 'RelatedPromptsUnmounted'] },\n)\n\n/**\n * Performs a track of a query with no results that used semantic queries as fallback.\n * The totalHits will be changed to -1 if semantic queries are found in order to differentiate\n * it from scenarios where the user encounters a no-results page without any semantic queries.\n *\n * @public\n * @deprecated - Use {@link trackNoResultsQueryWithFallbackWire} instead.\n */\nexport const trackNoResultsQueryWithSemanticsWire = trackNoResultsQueryWithFallbackWire\n\n/**\n * Debounced version of {@link trackNoResultsQueryWithFallbackWire}\n *\n * @public\n * @deprecated - Use {@link trackNoResultsQueryWithFallbackWireDebounced} instead.\n */\nexport const trackNoResultsQueryWithSemanticsWireDebounced =\n  trackNoResultsQueryWithFallbackWireDebounced\n\n/**\n * Performs a track of clicking the AI overview expand button when the playload (expanded) is false.\n *\n * @public\n */\nexport const trackAiOverviewButtonClickedWire = filterTruthyPayload(\n  wireDispatch('track', ({ metadata: { toolingDisplayClick, suggestionText } }) => {\n    const taggingInfo = {\n      ...(toolingDisplayClick as TaggingRequest),\n      params: {\n        ...(toolingDisplayClick as TaggingRequest).params,\n        productId: 'EXPAND',\n        title: suggestionText as string,\n        url: 'none',\n      },\n    }\n\n    return taggingInfo\n  }),\n)\n\n/**\n * Factory helper to create a wire for the track of the display click.\n *\n * @param property - Key of the tagging object to track.\n * @returns A new wire for the display click of the taggable element.\n *\n * @public\n */\nexport function createTrackDisplayWire(property: keyof Tagging): Wire<Taggable> {\n  return filter(\n    wireDispatch('track', ({ eventPayload: { tagging }, metadata }) => {\n      const taggingInfo: TaggingRequest = tagging[property]\n      const location = metadata.location as FeatureLocation\n\n      taggingInfo.params.location = location\n      taggingInfo.params.displayFamily = createOrigin({\n        feature: metadata.feature,\n        location,\n      })!\n      taggingInfo.params.q = (metadata as DisplayWireMetadata).displayOriginalQuery\n\n      return taggingInfo\n    }),\n    // eslint-disable-next-line ts/no-unsafe-member-access\n    ({ eventPayload: { tagging } }) => !!tagging?.[property]?.url,\n  )\n}\n\n/**\n * Update the tooling tagging params with the result information.\n *\n * @param taggingRequest - The tooling tagging request to be updated.\n * @param result - The clicked result.\n * @returns The tagging request updated.\n *\n * @internal\n */\nfunction updateToolingTaggingWithResult(\n  taggingRequest: TaggingRequest,\n  result: Result,\n): TaggingRequest {\n  taggingRequest.params.productId = result.id\n  taggingRequest.params.title = result.name!\n  taggingRequest.params.url = result.url!\n\n  return taggingRequest\n}\n\n/**\n * Factory helper to create a wire for the track of the tooling display click.\n *\n * @returns A new wire for the tooling display click of the taggable element.\n *\n * @public\n */\nexport function createTrackToolingDisplayWire(): Wire<Taggable> {\n  return filter(\n    wireDispatch('track', ({ eventPayload, metadata }) => {\n      const taggingInfo: TaggingRequest = metadata.toolingTagging as TaggingRequest\n      const resultInfo = eventPayload as Result\n\n      updateToolingTaggingWithResult(taggingInfo, resultInfo)\n\n      return taggingInfo\n    }),\n    ({ metadata }) => !!metadata?.toolingTagging,\n  )\n}\n\n/**\n * Factory helper to create a wire for the track of the tooling display add to cart.\n *\n * @returns A new wire for the tooling display add to cart of the taggable element.\n *\n * @public\n */\nexport function createTrackToolingAdd2CartWire(): Wire<Taggable> {\n  return filter(\n    wireDispatch('track', ({ eventPayload, metadata }) => {\n      const taggingInfo: TaggingRequest = metadata.toolingAdd2CartTagging as TaggingRequest\n      const resultInfo = eventPayload as Result\n\n      updateToolingTaggingWithResult(taggingInfo, resultInfo)\n\n      return taggingInfo\n    }),\n    ({ metadata }) => !!metadata?.toolingAdd2CartTagging,\n  )\n}\n\n/**\n * Factory helper to create a wire for the track of the tooling display click in a related prompt.\n *\n * @returns A new wire for the tooling display click of the taggable element.\n *\n * @public\n */\nexport function createTrackRelatedPromptToolingDisplayClickWire() {\n  return filter(\n    wireDispatch('track', ({ metadata }) => {\n      const relatedPrompt = metadata.relatedPrompt as RelatedPrompt\n      const taggingInfo = relatedPrompt.tagging!.toolingDisplayClickTagging as TaggingRequest\n\n      taggingInfo.params.productId = 'EXPAND'\n      taggingInfo.params.title = relatedPrompt.suggestionText\n      taggingInfo.params.url = 'none'\n\n      return taggingInfo\n    }),\n    ({ metadata }) => {\n      const relatedPrompt = metadata.relatedPrompt as RelatedPrompt | undefined\n      const isUnselected = metadata?.selectedPrompt === -1\n      const taggingInfo = relatedPrompt?.tagging?.toolingDisplayClickTagging\n      return isUnselected && !!taggingInfo\n    },\n  )\n}\n\n/**\n * Factory helper to create a wire to set the queryTagging.\n *\n * @returns A new wire for the query of a result of a queryPreview.\n *\n * @public\n */\nexport function createSetQueryTaggingFromQueryPreview(): Wire<Taggable> {\n  return filter(\n    wireCommit(\n      'setQueryTaggingInfo',\n      ({ metadata: { queryTagging } }) => queryTagging as TaggingRequest,\n    ),\n    ({ metadata: { queryTagging } }) => !!queryTagging,\n  )\n}\n\n/**\n * Tracks query tagging of the AI suggestions-search.\n * @public\n */\nexport const trackAiSuggestionsSearchWire = wireDispatch('track', ({ eventPayload }) =>\n  (eventPayload as AiSuggestionSearch[]).map(({ tagging }) => tagging.query),\n)\n\n/**\n * Wiring configuration for the {@link TaggingXModule | tagging module}.\n *\n * @internal\n */\nexport const taggingWiring = createWiring({\n  ConsentProvided: {\n    setConsent,\n  },\n  ConsentChanged: {\n    clearSessionWire,\n  },\n  PDPIsLoaded: {\n    moveClickedResultToSessionWire,\n  },\n  ResultURLTrackingEnabled: {\n    moveClickedResultToSessionWire,\n  },\n  SearchTaggingChanged: {\n    setQueryTaggingInfo,\n  },\n  SearchTaggingReceived: {\n    trackQueryWire,\n  },\n  TrackableElementDisplayed: {\n    trackElementDisplayedWire,\n  },\n  TaggingConfigProvided: {\n    setTaggingConfig,\n  },\n  UserClickedAResult: {\n    trackResultClickedWire,\n    storeClickedResultWire,\n  },\n  UserClickedResultAddToCart: {\n    trackAddToCartWire,\n    trackResultClickedWire,\n    storeAddToCartWire,\n  },\n  UserClickedPDPAddToCart: {\n    trackAddToCartFromSessionStorage,\n  },\n  UserClickedABanner: {\n    trackBannerClickedWire,\n  },\n  UserClickedAPromoted: {\n    trackPromotedClickedWire,\n  },\n  UserClickedADisplayResult: {\n    trackDisplayClickedWire,\n    setQueryTaggingFromQueryPreview,\n  },\n  SemanticQueriesResponseChanged: {\n    trackNoResultsQueryWithFallbackWireDebounced,\n  },\n  RelatedPromptsResponseChanged: {\n    trackNoResultsQueryWithFallbackWireDebounced,\n  },\n  ModuleRegistered: {\n    setNoResultsTaggingEnabledWire,\n  },\n  UserClickedARelatedPromptResult: {\n    trackToolingDisplayClickedWire,\n  },\n  UserClickedARelatedPromptAdd2Cart: {\n    trackToolingAdd2CartWire,\n  },\n  UserSelectedARelatedPrompt: {\n    trackRelatedPromptToolingDisplayClickWire,\n  },\n  AiSuggestionsSearchChanged: {\n    trackAiSuggestionsSearchWire,\n  },\n  UserClickedAiOverviewExpandButton: {\n    trackAiOverviewButtonClickedWire,\n  },\n  UserClickedAnAiOverviewResult: {\n    trackToolingDisplayClickedWire,\n  },\n  UserClickedAnAiOverviewAdd2Cart: {\n    trackToolingAdd2CartWire,\n  },\n})\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/tagging/wiring.ts"],"sourcesContent":["import type {\n  AiSuggestionSearch,\n  RelatedPrompt,\n  Result,\n  SemanticQuery,\n  Taggable,\n  Tagging,\n  TaggingRequest,\n} from '@empathyco/x-types'\nimport type { FeatureLocation } from '../../types/index'\nimport type { DisplayWireMetadata, Wire } from '../../wiring/wiring.types'\nimport { DefaultSessionService } from '@empathyco/x-utils'\nimport { createOrigin } from '../../utils/index'\nimport { namespacedWireCommit, namespacedWireDispatch } from '../../wiring/namespaced-wires.factory'\nimport { namespacedDebounce } from '../../wiring/namespaced-wires.operators'\nimport { wireService, wireServiceWithoutPayload } from '../../wiring/wires.factory'\nimport { filter, mapWire } from '../../wiring/wires.operators'\nimport { createWiring } from '../../wiring/wiring.utils'\nimport { DefaultExternalTaggingService } from './service/external-tagging.service'\n\n/**\n * `tagging` {@link XModuleName | XModule name}.\n *\n * @internal\n */\nconst moduleName = 'tagging'\n\n/**\n * Debounce function for the module.\n */\nconst moduleDebounce = namespacedDebounce(moduleName)\n\n/**\n * WireCommit for {@link TaggingXModule}.\n *\n * @internal\n */\nconst wireCommit = namespacedWireCommit(moduleName)\n\n/**\n * WireDispatch for {@link TaggingXModule}.\n *\n * @internal\n */\nconst wireDispatch = namespacedWireDispatch(moduleName)\n\n/**\n * Wires without payload factory for {@link DefaultSessionService}.\n */\nconst wireSessionServiceWithoutPayload = wireServiceWithoutPayload(DefaultSessionService.instance)\n\n/**\n * Wires factory for {@link DefaultExternalTaggingService}.\n */\nconst wireExternalTaggingService = wireService(DefaultExternalTaggingService.instance)\n\n/**\n * Stores the given result on the local storage.\n *\n * @public\n */\nconst storeClickedResultWire = wireExternalTaggingService('storeResultClicked')\n\n/**\n * Stores the result added to cart on the local storage.\n *\n * @public\n */\nconst storeAddToCartWire = wireExternalTaggingService('storeAddToCart')\n\n/**\n * Moves the result information from the local storage to session storage.\n *\n * @public\n */\nconst moveClickedResultToSessionWire = mapWire(\n  wireExternalTaggingService('moveToSessionStorage'),\n  (payload: string) => {\n    return payload === 'url' ? undefined : payload\n  },\n)\n\n/**\n * Triggers the add to cart tracking.\n *\n * @public\n */\nconst trackAddToCartFromSessionStorage = wireExternalTaggingService('trackAddToCart')\n\n/**\n * Clears the session id.\n *\n * @public\n */\nconst clearSessionWire = filter(\n  wireSessionServiceWithoutPayload('clearSessionId'),\n  ({ eventPayload: consent }) => !consent,\n)\n\n/**\n * Sets the tagging state `consent`.\n *\n * @public\n */\nexport const setConsent = wireCommit('setConsent')\n\n/**\n * Sets the tagging state `noResultsTaggingEnabled`.\n *\n * @public\n */\nexport const setNoResultsTaggingEnabledWire = wireCommit('setNoResultsTaggingEnabled')\n\n/**\n * Sets the tagging config state.\n *\n * @public\n */\nexport const setTaggingConfig = wireCommit('mergeConfig')\n\n/**\n * Tracks the tagging of the query.\n *\n * @public\n */\nexport const trackQueryWire = filter(\n  wireDispatch('track'),\n  ({ eventPayload, store }) =>\n    ((eventPayload as TaggingRequest).params.totalHits as number) > 0 ||\n    !store.state.x.tagging.noResultsTaggingEnabled,\n)\n\n/**\n * Sets the tagging state of the query tagging info using a debounce which ends if the user\n * accepts a query.\n *\n * @public\n */\nexport const setQueryTaggingInfo = moduleDebounce(\n  wireCommit('setQueryTaggingInfo'),\n  ({ state }) => state.config.queryTaggingDebounceMs,\n  {\n    cancelOn: 'UserClearedQuery',\n    forceOn: [\n      'UserClickedAResult',\n      'UserClickedAPromoted',\n      'UserClickedABanner',\n      'UserClickedARedirection',\n      'UserReachedResultsListEnd',\n    ],\n  },\n)\n\n/**\n * Sets the tagging state of the query tagging info using.\n *\n * @public\n */\nexport const setQueryTaggingFromQueryPreview = createSetQueryTaggingFromQueryPreview()\n\n/**\n * Tracks the tagging of the result.\n *\n * @public\n */\nexport const trackResultClickedWire = createTrackWire('click')\n\n/**\n * Tracks the tagging of the banner.\n *\n * @public\n */\nexport const trackBannerClickedWire = createTrackWire('click')\n\n/**\n * Tracks the click on a promoted result.\n *\n * @public\n */\nexport const trackPromotedClickedWire = createTrackWire('click')\n\n/**\n * Performs a track of a result added to the cart.\n *\n * @public\n */\nexport const trackAddToCartWire = createTrackWire('add2cart')\n\n/**\n * Performs a track of a display result being clicked.\n *\n * @public\n */\nexport const trackDisplayClickedWire = createTrackDisplayWire('displayClick')\n\n/**\n * Performs a track of a display result being clicked.\n *\n * @public\n */\nexport const trackToolingDisplayClickedWire = createTrackToolingDisplayWire()\n\n/**\n * Performs a track of a display result being clicked.\n *\n * @public\n */\nexport const trackToolingAdd2CartWire = createTrackToolingAdd2CartWire()\n\n/**\n * Performs a track of a clicked related prompt.\n *\n * @public\n */\nexport const trackRelatedPromptToolingDisplayClickWire =\n  createTrackRelatedPromptToolingDisplayClickWire()\n\n/**\n * Performs a track of a display element appearing.\n *\n * @public\n */\nexport const trackElementDisplayedWire = createTrackDisplayWire('display')\n\n/**\n * Factory helper to create a wire for the track of a taggable element.\n *\n * @param property - Key of the tagging object to track.\n * @returns A new wire for the given property of the taggable element.\n *\n * @public\n */\nexport function createTrackWire(property: keyof Tagging): Wire<Taggable> {\n  return filter(\n    wireDispatch('track', ({ eventPayload: { tagging }, metadata: { location } }) => {\n      const taggingInfo: TaggingRequest = tagging[property]\n      taggingInfo.params.location = location as string\n      return taggingInfo\n    }),\n    ({ eventPayload: { tagging }, metadata: { ignoreInModules } }) =>\n      // eslint-disable-next-line ts/no-unsafe-member-access\n      !!tagging?.[property] && !ignoreInModules?.includes(moduleName),\n  )\n}\n\n/**\n * Performs a track of a query with no results that used related prompts or semantic queries as fallback.\n * The totalHits will be changed to -1 if related prompts or semantic queries are found in order to differentiate\n * it from scenarios where the user encounters a no-results page without any related prompts or semantic queries.\n *\n * @public\n */\nexport const trackNoResultsQueryWithFallbackWire = filter(\n  wireDispatch('track', ({ eventPayload, state }) => {\n    const { queryTaggingInfo } = state\n    const totalHits = (eventPayload as RelatedPrompt[] | SemanticQuery[]).length > 0 ? -1 : 0\n    return {\n      params: { ...queryTaggingInfo?.params, totalHits },\n      url: queryTaggingInfo?.url ?? '',\n    }\n  }),\n  ({ store }) => Number(store.state.x.tagging.queryTaggingInfo?.params.totalHits) === 0,\n)\n\n/**.\n * Debounced version of {@link trackNoResultsQueryWithFallbackWire}\n *\n * @public\n */\nexport const trackNoResultsQueryWithFallbackWireDebounced = moduleDebounce(\n  trackNoResultsQueryWithFallbackWire,\n  ({ state }) => state.config.queryTaggingDebounceMs,\n  { cancelOn: ['QueryPreviewUnmounted', 'RelatedPromptsUnmounted'] },\n)\n\n/**\n * Performs a track of a query with no results that used semantic queries as fallback.\n * The totalHits will be changed to -1 if semantic queries are found in order to differentiate\n * it from scenarios where the user encounters a no-results page without any semantic queries.\n *\n * @public\n * @deprecated - Use {@link trackNoResultsQueryWithFallbackWire} instead.\n */\nexport const trackNoResultsQueryWithSemanticsWire = trackNoResultsQueryWithFallbackWire\n\n/**\n * Debounced version of {@link trackNoResultsQueryWithFallbackWire}\n *\n * @public\n * @deprecated - Use {@link trackNoResultsQueryWithFallbackWireDebounced} instead.\n */\nexport const trackNoResultsQueryWithSemanticsWireDebounced =\n  trackNoResultsQueryWithFallbackWireDebounced\n\n/**\n * Factory helper to create a wire for the track of the display click.\n *\n * @param property - Key of the tagging object to track.\n * @returns A new wire for the display click of the taggable element.\n *\n * @public\n */\nexport function createTrackDisplayWire(property: keyof Tagging): Wire<Taggable> {\n  return filter(\n    wireDispatch('track', ({ eventPayload: { tagging }, metadata }) => {\n      const taggingInfo: TaggingRequest = tagging[property]\n      const location = metadata.location as FeatureLocation\n\n      taggingInfo.params.location = location\n      taggingInfo.params.displayFamily = createOrigin({\n        feature: metadata.feature,\n        location,\n      })!\n      taggingInfo.params.q = (metadata as DisplayWireMetadata).displayOriginalQuery\n\n      return taggingInfo\n    }),\n    // eslint-disable-next-line ts/no-unsafe-member-access\n    ({ eventPayload: { tagging } }) => !!tagging?.[property]?.url,\n  )\n}\n\n/**\n * Update the tooling tagging params with the result information.\n *\n * @param taggingRequest - The tooling tagging request to be updated.\n * @param result - The clicked result.\n * @returns The tagging request updated.\n *\n * @internal\n */\nfunction updateToolingTaggingWithResult(\n  taggingRequest: TaggingRequest,\n  result: Result,\n): TaggingRequest {\n  taggingRequest.params.productId = result.id\n  taggingRequest.params.title = result.name!\n  taggingRequest.params.url = result.url!\n\n  return taggingRequest\n}\n\n/**\n * Factory helper to create a wire for the track of the tooling display click.\n *\n * @returns A new wire for the tooling display click of the taggable element.\n *\n * @public\n */\nexport function createTrackToolingDisplayWire(): Wire<Taggable> {\n  return filter(\n    wireDispatch('track', ({ eventPayload, metadata }) => {\n      const taggingInfo: TaggingRequest = metadata.toolingTagging as TaggingRequest\n      const resultInfo = eventPayload as Result\n\n      updateToolingTaggingWithResult(taggingInfo, resultInfo)\n\n      return taggingInfo\n    }),\n    ({ metadata }) => !!metadata?.toolingTagging,\n  )\n}\n\n/**\n * Factory helper to create a wire for the track of the tooling display add to cart.\n *\n * @returns A new wire for the tooling display add to cart of the taggable element.\n *\n * @public\n */\nexport function createTrackToolingAdd2CartWire(): Wire<Taggable> {\n  return filter(\n    wireDispatch('track', ({ eventPayload, metadata }) => {\n      const taggingInfo: TaggingRequest = metadata.toolingAdd2CartTagging as TaggingRequest\n      const resultInfo = eventPayload as Result\n\n      updateToolingTaggingWithResult(taggingInfo, resultInfo)\n\n      return taggingInfo\n    }),\n    ({ metadata }) => !!metadata?.toolingAdd2CartTagging,\n  )\n}\n\n/**\n * Factory helper to create a wire for the track of the tooling display click in a related prompt.\n *\n * @returns A new wire for the tooling display click of the taggable element.\n *\n * @public\n */\nexport function createTrackRelatedPromptToolingDisplayClickWire() {\n  return filter(\n    wireDispatch('track', ({ metadata }) => {\n      const relatedPrompt = metadata.relatedPrompt as RelatedPrompt\n      const taggingInfo = relatedPrompt.tagging!.toolingDisplayClickTagging as TaggingRequest\n\n      taggingInfo.params.productId = 'EXPAND'\n      taggingInfo.params.title = relatedPrompt.suggestionText\n      taggingInfo.params.url = 'none'\n\n      return taggingInfo\n    }),\n    ({ metadata }) => {\n      const relatedPrompt = metadata.relatedPrompt as RelatedPrompt | undefined\n      const isUnselected = metadata?.selectedPrompt === -1\n      const taggingInfo = relatedPrompt?.tagging?.toolingDisplayClickTagging\n      return isUnselected && !!taggingInfo\n    },\n  )\n}\n\n/**\n * Factory helper to create a wire to set the queryTagging.\n *\n * @returns A new wire for the query of a result of a queryPreview.\n *\n * @public\n */\nexport function createSetQueryTaggingFromQueryPreview(): Wire<Taggable> {\n  return filter(\n    wireCommit(\n      'setQueryTaggingInfo',\n      ({ metadata: { queryTagging } }) => queryTagging as TaggingRequest,\n    ),\n    ({ metadata: { queryTagging } }) => !!queryTagging,\n  )\n}\n\n/**\n * Tracks query tagging of the AI suggestions-search.\n * @public\n */\nexport const trackAiSuggestionsSearchWire = wireDispatch('track', ({ eventPayload }) =>\n  (eventPayload as AiSuggestionSearch[]).map(({ tagging }) => tagging.query),\n)\n\n/**\n * Wiring configuration for the {@link TaggingXModule | tagging module}.\n *\n * @internal\n */\nexport const taggingWiring = createWiring({\n  ConsentProvided: {\n    setConsent,\n  },\n  ConsentChanged: {\n    clearSessionWire,\n  },\n  PDPIsLoaded: {\n    moveClickedResultToSessionWire,\n  },\n  ResultURLTrackingEnabled: {\n    moveClickedResultToSessionWire,\n  },\n  SearchTaggingChanged: {\n    setQueryTaggingInfo,\n  },\n  SearchTaggingReceived: {\n    trackQueryWire,\n  },\n  TrackableElementDisplayed: {\n    trackElementDisplayedWire,\n  },\n  TaggingConfigProvided: {\n    setTaggingConfig,\n  },\n  UserClickedAResult: {\n    trackResultClickedWire,\n    storeClickedResultWire,\n  },\n  UserClickedResultAddToCart: {\n    trackAddToCartWire,\n    trackResultClickedWire,\n    storeAddToCartWire,\n  },\n  UserClickedPDPAddToCart: {\n    trackAddToCartFromSessionStorage,\n  },\n  UserClickedABanner: {\n    trackBannerClickedWire,\n  },\n  UserClickedAPromoted: {\n    trackPromotedClickedWire,\n  },\n  UserClickedADisplayResult: {\n    trackDisplayClickedWire,\n    setQueryTaggingFromQueryPreview,\n  },\n  SemanticQueriesResponseChanged: {\n    trackNoResultsQueryWithFallbackWireDebounced,\n  },\n  RelatedPromptsResponseChanged: {\n    trackNoResultsQueryWithFallbackWireDebounced,\n  },\n  ModuleRegistered: {\n    setNoResultsTaggingEnabledWire,\n  },\n  UserClickedARelatedPromptResult: {\n    trackToolingDisplayClickedWire,\n  },\n  UserClickedARelatedPromptAdd2Cart: {\n    trackToolingAdd2CartWire,\n  },\n  UserSelectedARelatedPrompt: {\n    trackRelatedPromptToolingDisplayClickWire,\n  },\n  AiSuggestionsSearchChanged: {\n    trackAiSuggestionsSearchWire,\n  },\n  UserClickedAnAiOverviewResult: {\n    trackToolingDisplayClickedWire,\n  },\n  UserClickedAnAiOverviewAdd2Cart: {\n    trackToolingAdd2CartWire,\n  },\n})\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "6.0.0-alpha.237",
+  "version": "6.0.0-alpha.239",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -83,9 +83,10 @@
   },
   "devDependencies": {
     "@babel/preset-env": "7.29.2",
-    "@empathyco/x-tailwindcss": "2.0.0-alpha.37",
+    "@empathyco/x-design-system": "0.1.0-alpha.3",
     "@microsoft/api-documenter": "7.29.9",
     "@microsoft/api-extractor": "7.58.0",
+    "@tailwindcss/vite": "4.2.2",
     "@testing-library/vue": "8.1.0",
     "@types/aria-query": "5.0.4",
     "@types/node": "24.12.2",
@@ -93,13 +94,9 @@
     "@vitest/browser": "4.1.2",
     "@vitest/ui": "4.1.2",
     "@vue/test-utils": "2.4.6",
-    "autoprefixer": "10.4.27",
     "convert-source-map": "2.0.0",
     "esbuild": "0.28.0",
     "jsdom": "28.1.0",
-    "postcss": "8.5.8",
-    "postcss-dir-pseudo-class": "7.0.2",
-    "postcss-logical": "4.0.2",
     "rollup": "4.60.1",
     "rollup-plugin-copy": "3.5.0",
     "rollup-plugin-delete": "2.2.0",
@@ -107,10 +104,10 @@
     "rollup-plugin-typescript2": "0.37.0",
     "rollup-plugin-vue": "6.0.0",
     "start-server-and-test": "2.1.5",
-    "tailwindcss": "3.4.19",
+    "tailwindcss": "4.2.2",
     "ts-node": "10.9.2",
     "typescript": "5.9.3",
-    "vite": "6.4.1",
+    "vite": "6.4.2",
     "vite-plugin-vue-inspector": "5.4.0",
     "vitest": "4.1.2",
     "vue": "3.5.32",
@@ -122,5 +119,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "96d07b75fdd64819705117d90f6f9652a094db40"
+  "gitHead": "cb1002d210e4731704977a5d86193fcc5f2d0406"
 }