@empathyco/x-components 6.0.0-alpha.227 → 6.0.0-alpha.229

package/js/x-modules/queries-preview/components/query-preview.vue2.js

@@ -1,8 +1,8 @@
 import { deepEqual } from '@empathyco/x-utils';
 import { defineComponent, ref, computed, provide, inject, watch, onBeforeUnmount, h } from 'vue';
-import '../../../components/animations/animate-clip-path/animate-clip-path.style.css.js';
-import '../../../components/animations/animate-scale/animate-scale.style.css.js';
-import '../../../components/animations/animate-translate/animate-translate.style.css.js';
+import '../../../components/animations/animate-clip-path.vue2.js';
+import '../../../components/animations/animate-scale.vue2.js';
+import '../../../components/animations/animate-translate.vue2.js';
 import '../../../components/animations/animate-width.vue2.js';
 import '../../../components/animations/animate-width.vue3.js';
 import '../../../components/animations/change-height.vue2.js';

package/js/x-modules/scroll/components/scroll-to-top.vue2.js

@@ -1,7 +1,7 @@
 import { defineComponent, computed } from 'vue';
-import '../../../components/animations/animate-clip-path/animate-clip-path.style.css.js';
-import '../../../components/animations/animate-scale/animate-scale.style.css.js';
-import '../../../components/animations/animate-translate/animate-translate.style.css.js';
+import '../../../components/animations/animate-clip-path.vue2.js';
+import '../../../components/animations/animate-scale.vue2.js';
+import '../../../components/animations/animate-translate.vue2.js';
 import '../../../components/animations/animate-width.vue2.js';
 import '../../../components/animations/animate-width.vue3.js';
 import '../../../components/animations/change-height.vue2.js';

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, onBeforeUnmount, ref, watch } from 'vue'\nimport { animateTranslate } from '../../../components/animations/animate-translate/animate-translate.factory'\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: () => animateTranslate('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-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;;;;;;;;;"}

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

@@ -1,5 +1,6 @@
-import { defineComponent, ref, computed, watch, onBeforeUnmount } from 'vue';
-import { animateTranslate } from '../../../components/animations/animate-translate/animate-translate.factory.js';
+import { defineComponent, ref, computed, watch, onBeforeUnmount, h } from 'vue';
+import _sfc_main$1 from '../../../components/animations/animate-translate.vue.js';
+import '../../../components/animations/animate-translate.vue2.js';
 import { use$x } from '../../../composables/use-_x.js';
 import { useState } from '../../../composables/use-state.js';
 import { AnimationProp } from '../../../types/animation-prop.js';
@@ -31,7 +32,7 @@ var _sfc_main = defineComponent({
          */
         animation: {
             type: AnimationProp,
-            default: () => animateTranslate('bottom-to-top'),
+            default: () => h(_sfc_main$1, { animationOrigin: 'bottom-to-top' }),
         },
         /**
          * Time in milliseconds during which each message is visible.

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, onBeforeUnmount, ref, watch } from 'vue'\nimport { animateTranslate } from '../../../components/animations/animate-translate/animate-translate.factory'\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: () => animateTranslate('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":[],"mappings":";;;;;;;AAsBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,wBAAwB;IAC9B,OAAO,EAAE,gBAAgB,CAAC,IAAI;AAC9B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,KAA2B;AACjC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,MAAM,gBAAgB,CAAC,eAAe,CAAC;AACjD,SAAA;AACD;;;;AAIE;AACF,QAAA,mBAAmB,EAAE;AACnB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,kBAAkB,EAAE,OAAO;AAC5B,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AAEjB;;;;AAIE;QACF,MAAM,EAAE,KAAI,EAAE,GAAI,QAAQ,CAAC,WAAW,CAAA;AAEtC;;;;AAIE;AACF,QAAA,MAAM,qBAAqB,GAAG,CAAC,KAAK,CAAA;AAEpC;;;;AAIE;AACF,QAAA,MAAM,qBAAqB,GAAG,CAAC,KAAK,CAAA;AAEpC;;;;AAIE;AACF,QAAA,MAAM,qBAAoB,GAAI,GAAG,CAAC,CAAC,CAAA;AAEnC;;;;AAIE;AACF,QAAA,MAAM,iBAAgB,GAAI,GAAG,CAAqB,SAAS,CAAA;AAE3D;;;;;;AAME;AACF,QAAA,MAAM,SAAQ,GAAI,QAAQ,CAAC,MAAe,CAAC,KAAK,CAAC,KAAI,IAAK,CAAC,kBAAkB,CAAC,KAAK,CAAA;AAEnF;;;;;;AAME;QACF,MAAM,eAAc,GAAI,QAAQ,CAC9B,MAAe,SAAS,CAAC,KAAI,KAAM,CAAC,KAAK,CAAC,kBAAiB,IAAK,kBAAkB,CAAC,KAAK,CAAC,CAC3F;AAEA;;;;;;AAME;AACF,QAAA,MAAM,OAAM,GAAI,QAAQ,CAAC,MACvB,eAAe,CAAC,KAAI,GAAI,KAAK,CAAC,QAAQ,CAAC,qBAAqB,CAAC,KAAK,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CACzF;AAEA;;;;AAIE;QACF,MAAM,qBAAoB,GAAI,MAAU;AACtC,YAAA,IAAI,iBAAiB,CAAC,KAAK,EAAE;AAC3B,gBAAA,aAAa,CAAC,iBAAiB,CAAC,KAAK,CAAA;AACrC,gBAAA,iBAAiB,CAAC,KAAI,GAAI,SAAQ;YACpC;AACF,QAAA,CAAA;AAEA;;;;;AAKE;QACF,MAAM,iCAAiC,MAAU;AAC/C,YAAA,qBAAqB,CAAC,QAAQ,CAAC,qBAAqB,CAAC,KAAI,GAAI,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,MAAK;AACxF,QAAA,CAAA;QAEA,EAAE,CAAC,EAAE,CAAC,wBAAwB,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,OAAO,kBAAkB,CAAC,KAAI,GAAI,IAAI,CAAC,CAAA;QAExF,EAAE,CAAC,EAAE,CAAC,yBAAyB,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,OAAO,kBAAkB,CAAC,QAAQ,KAAK,CAAC,CAAA;QAE1F,EAAE,CAAC,EAAE,CAAC,sBAAsB,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,OAAO,kBAAkB,CAAC,KAAI,GAAI,IAAI,CAAC,CAAA;QAEtF,EAAE,CAAC,EAAE,CAAC,sBAAsB,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,OAAO,kBAAkB,CAAC,QAAQ,KAAK,CAAC,CAAA;AAEvF;;;;AAIE;QACF,MAAM,cAAa,GAAI,MAAU;AAC/B,YAAA,qBAAqB,EAAC;AACtB,YAAA,IAAI,eAAe,CAAC,KAAK,EAAE;gBACzB,iBAAiB,CAAC,KAAI,GAAI,MAAM,CAAC,WAAW,CAAC,MAAU;AACrD,oBAAA,8BAA8B,EAAC;AACjC,gBAAA,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAA;YAC9B;AACF,QAAA,CAAA;QAEA,KAAK,CAAC,MAAM,qBAAqB,EAAE,cAAc,CAAA;AAEjD;;;;AAIE;QACF,MAAM,0BAAyB,GAAI,MAAU;AAC3C,YAAA,qBAAqB,CAAC,KAAI,GAAI,CAAA;AAChC,QAAA,CAAA;QAEA,KAAK,CACH,MAAM,KAAK,CAAC,QAAQ,EACpB,MAAI;AACF,YAAA,0BAA0B,EAAC;AAC3B,YAAA,cAAc,EAAC;AACjB,QAAA,CAAC,EACD,EAAE,IAAI,EAAE,IAAG,EAAG,CAChB;AAEA;;;;;;AAME;AACF,QAAA,KAAK,CACH,eAAe,EACf,MAAI;AACF,YAAA,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE;AAC1B,gBAAA,IAAI,KAAK,CAAC,kBAAkB,EAAE;AAC5B,oBAAA,0BAA0B,EAAC;gBAC7B;AACA,gBAAA,8BAA8B,EAAC;YACjC;AACA,YAAA,cAAc,EAAC;AACjB,QAAA,CAAC,EACD,EAAE,SAAS,EAAE,MAAM,CACrB;QAEA,eAAe,CAAC,MAAI;AAClB,YAAA,qBAAqB,EAAC;AACxB,QAAA,CAAC,CAAA;QAED,OAAO;YACL,SAAS;YACT,OAAO;SACT;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"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":";;;;;;;;AAsBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,wBAAwB;IAC9B,OAAO,EAAE,gBAAgB,CAAC,IAAI;AAC9B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,KAA2B;AACjC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,MAAM,CAAC,CAACA,WAAgB,EAAE,EAAE,eAAe,EAAE,eAAc,EAAG,CAAC;AACzE,SAAA;AACD;;;;AAIE;AACF,QAAA,mBAAmB,EAAE;AACnB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,kBAAkB,EAAE,OAAO;AAC5B,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AAEjB;;;;AAIE;QACF,MAAM,EAAE,KAAI,EAAE,GAAI,QAAQ,CAAC,WAAW,CAAA;AAEtC;;;;AAIE;AACF,QAAA,MAAM,qBAAqB,GAAG,CAAC,KAAK,CAAA;AAEpC;;;;AAIE;AACF,QAAA,MAAM,qBAAqB,GAAG,CAAC,KAAK,CAAA;AAEpC;;;;AAIE;AACF,QAAA,MAAM,qBAAoB,GAAI,GAAG,CAAC,CAAC,CAAA;AAEnC;;;;AAIE;AACF,QAAA,MAAM,iBAAgB,GAAI,GAAG,CAAqB,SAAS,CAAA;AAE3D;;;;;;AAME;AACF,QAAA,MAAM,SAAQ,GAAI,QAAQ,CAAC,MAAe,CAAC,KAAK,CAAC,KAAI,IAAK,CAAC,kBAAkB,CAAC,KAAK,CAAA;AAEnF;;;;;;AAME;QACF,MAAM,eAAc,GAAI,QAAQ,CAC9B,MAAe,SAAS,CAAC,KAAI,KAAM,CAAC,KAAK,CAAC,kBAAiB,IAAK,kBAAkB,CAAC,KAAK,CAAC,CAC3F;AAEA;;;;;;AAME;AACF,QAAA,MAAM,OAAM,GAAI,QAAQ,CAAC,MACvB,eAAe,CAAC,KAAI,GAAI,KAAK,CAAC,QAAQ,CAAC,qBAAqB,CAAC,KAAK,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CACzF;AAEA;;;;AAIE;QACF,MAAM,qBAAoB,GAAI,MAAU;AACtC,YAAA,IAAI,iBAAiB,CAAC,KAAK,EAAE;AAC3B,gBAAA,aAAa,CAAC,iBAAiB,CAAC,KAAK,CAAA;AACrC,gBAAA,iBAAiB,CAAC,KAAI,GAAI,SAAQ;YACpC;AACF,QAAA,CAAA;AAEA;;;;;AAKE;QACF,MAAM,iCAAiC,MAAU;AAC/C,YAAA,qBAAqB,CAAC,QAAQ,CAAC,qBAAqB,CAAC,KAAI,GAAI,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,MAAK;AACxF,QAAA,CAAA;QAEA,EAAE,CAAC,EAAE,CAAC,wBAAwB,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,OAAO,kBAAkB,CAAC,KAAI,GAAI,IAAI,CAAC,CAAA;QAExF,EAAE,CAAC,EAAE,CAAC,yBAAyB,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,OAAO,kBAAkB,CAAC,QAAQ,KAAK,CAAC,CAAA;QAE1F,EAAE,CAAC,EAAE,CAAC,sBAAsB,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,OAAO,kBAAkB,CAAC,KAAI,GAAI,IAAI,CAAC,CAAA;QAEtF,EAAE,CAAC,EAAE,CAAC,sBAAsB,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,OAAO,kBAAkB,CAAC,QAAQ,KAAK,CAAC,CAAA;AAEvF;;;;AAIE;QACF,MAAM,cAAa,GAAI,MAAU;AAC/B,YAAA,qBAAqB,EAAC;AACtB,YAAA,IAAI,eAAe,CAAC,KAAK,EAAE;gBACzB,iBAAiB,CAAC,KAAI,GAAI,MAAM,CAAC,WAAW,CAAC,MAAU;AACrD,oBAAA,8BAA8B,EAAC;AACjC,gBAAA,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAA;YAC9B;AACF,QAAA,CAAA;QAEA,KAAK,CAAC,MAAM,qBAAqB,EAAE,cAAc,CAAA;AAEjD;;;;AAIE;QACF,MAAM,0BAAyB,GAAI,MAAU;AAC3C,YAAA,qBAAqB,CAAC,KAAI,GAAI,CAAA;AAChC,QAAA,CAAA;QAEA,KAAK,CACH,MAAM,KAAK,CAAC,QAAQ,EACpB,MAAI;AACF,YAAA,0BAA0B,EAAC;AAC3B,YAAA,cAAc,EAAC;AACjB,QAAA,CAAC,EACD,EAAE,IAAI,EAAE,IAAG,EAAG,CAChB;AAEA;;;;;;AAME;AACF,QAAA,KAAK,CACH,eAAe,EACf,MAAI;AACF,YAAA,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE;AAC1B,gBAAA,IAAI,KAAK,CAAC,kBAAkB,EAAE;AAC5B,oBAAA,0BAA0B,EAAC;gBAC7B;AACA,gBAAA,8BAA8B,EAAC;YACjC;AACA,YAAA,cAAc,EAAC;AACjB,QAAA,CAAC,EACD,EAAE,SAAS,EAAE,MAAM,CACrB;QAEA,eAAe,CAAC,MAAI;AAClB,YAAA,qBAAqB,EAAC;AACxB,QAAA,CAAC,CAAA;QAED,OAAO;YACL,SAAS;YACT,OAAO;SACT;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "6.0.0-alpha.227",
+  "version": "6.0.0-alpha.229",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -68,7 +68,7 @@
   },
   "dependencies": {
     "@empathyco/x-adapter": "8.1.0-alpha.22",
-    "@empathyco/x-adapter-platform": "1.1.0-alpha.62",
+    "@empathyco/x-adapter-platform": "1.1.0-alpha.63",
     "@empathyco/x-types": "10.1.0-alpha.52",
     "@empathyco/x-utils": "1.0.3-alpha.17",
     "@vue/devtools-api": "~6.6.4",
@@ -122,5 +122,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "be353118c547c96aca1b96579e005b6fa4931aec"
+  "gitHead": "3c136a5075f98aaf9c350a7fd46c4dae5f2115b6"
 }