@empathyco/x-components 7.2.1 → 7.2.3

package/js/x-modules/search/components/{redirection.vue2.js.map → redirection2.vue.js.map}

@@ -1 +1 @@
-{"version":3,"file":"redirection.vue2.js","sources":["../../../../../src/x-modules/search/components/redirection.vue"],"sourcesContent":["<template>\n  <div v-if=\"redirection && slots.default\" class=\"x-redirection\" data-test=\"redirection\">\n    <slot v-bind=\"{ redirection, redirect, abortRedirect, isRedirecting, delayInSeconds }\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { Redirection as RedirectionModel } from '@empathyco/x-types'\nimport type { PropType, Ref } from 'vue'\nimport type { XEvent } from '../../../wiring/events.types'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/**\n * A redirection is a component that sends the user to a link in the website. It is helpful when\n * there are queries like `help`, `shipping costs`, `my account`, where a link to a section in the\n * website will be more helpful than the set of results returned.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Redirection',\n  xModule: searchXModule.name,\n  props: {\n    /**\n     * The redirection mode. Auto for auto redirection and manual for an user interaction.\n     *\n     * @public\n     */\n    mode: {\n      type: String as PropType<'auto' | 'manual'>,\n      default: 'auto',\n    },\n    /**\n     * The waiting time in seconds until the redirection is made.\n     *\n     * @remarks this delay only works in auto mode.\n     *\n     * @public\n     */\n    delayInSeconds: {\n      type: Number,\n      default: 0,\n    },\n  },\n  setup(props, { slots }) {\n    const $x = use$x()\n\n    const { redirections } = useState('search')\n\n    /**\n     * List of events to stop the animation.\n     */\n    const eventsToStopAnimation: XEvent[] = [\n      'UserAcceptedAQuery',\n      'UserClearedQuery',\n      'UserSelectedARelatedTag',\n    ]\n\n    /**\n     * The timeout id, used to cancel the redirection.\n     *\n     * @internal\n     */\n    const timeoutId: Ref<number> = ref(0)\n\n    /**\n     * Boolean flag which indicates if the redirection is running.\n     *\n     * @public\n     */\n    const isRedirecting = ref(true)\n\n    /**\n     * Computed property which returns the first recommendation of the state, if any returns null.\n     *\n     * @returns The first redirection of the state.\n     *\n     * @internal\n     */\n    const redirection = computed((): RedirectionModel | null => redirections?.value[0] ?? null)\n\n    /**\n     * Stops the animation if the user search another query.\n     *\n     * @internal\n     */\n    const cancelRedirect = () => {\n      clearTimeout(timeoutId.value)\n      isRedirecting.value = false\n    }\n\n    eventsToStopAnimation.forEach(event => $x.on(event, false).subscribe(cancelRedirect))\n\n    /**\n     * Dispatches the redirection, updating the url.\n     *\n     * @public\n     */\n    const redirect = () => {\n      clearTimeout(timeoutId.value)\n      $x.emit('UserClickedARedirection', redirection.value!)\n      window.location.replace(redirection.value!.url)\n    }\n\n    /**\n     * Stops the redirection, emitting `UserClickedAbortARedirection` event.\n     *\n     * @public\n     */\n    const abortRedirect = () => {\n      cancelRedirect()\n      $x.emit('UserClickedAbortARedirection')\n    }\n\n    /**\n     * Watcher function which adds a setTimeout to the redirect method is the component\n     * is in auto mode and there are redirections.\n     *\n     * @internal\n     */\n    watch(\n      redirections,\n      () => {\n        isRedirecting.value = true\n        if (props.mode === 'auto' && redirection.value) {\n          timeoutId.value = window.setTimeout(redirect, props.delayInSeconds * 1000)\n        }\n      },\n      { immediate: true },\n    )\n\n    return {\n      redirection,\n      redirect,\n      abortRedirect,\n      isRedirecting,\n      slots,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n  after the user clicks the redirection button.\n- [`UserClickedAbortARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n  after the user clicks the abort redirection button.\n\n## Play with the component\n\nIn this example, a query has been searched in the search input resulting in a case where the\nresponse has a redirection.\n\nA text box appears below the search box indicating that you're going to be redirected to another\nweb page.\n\nThis component has two modes:\n\n- Auto mode means that the redirection will occur after a certain number of seconds passed as a\n  property.\n- If the value is 0 the redirection will be instant.\n- Manual mode means that the user has to click the redirect button or nothing will happen.\n\n_Type any term in the input field to try it out!_\n\n```vue\n<template>\n  <Redirection #default=\"{ redirection, redirect, abortRedirect }\">\n    <span>In a few seconds you're going to be redirected!</span>\n    <span>{{ redirection.url }}</span>\n    <button @click=\"redirect\">Redirect now!</button>\n    <button @click=\"abortRedirect\">Abort redirection!</button>\n  </Redirection>\n</template>\n\n<script setup>\nimport { Redirection } from '@empathyco/x-components/search'\n</script>\n```\n\n## Extending the component\n\nComponents behaviour can be changed, in this example the mode of the component will be manual\nforcing the user to accept the redirection\n\n```vue\n<template>\n  <Redirection mode=\"manual\" #default=\"{ redirection, redirect }\">\n    <span>{{ redirection.url }}</span>\n    <button @click=\"redirect\">Redirect now!</button>\n  </Redirection>\n</template>\n\n<script setup>\nimport { Redirection } from '@empathyco/x-components/search'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAeA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,MAAqC;AAC3C,YAAA,OAAO,EAAE,MAAM;AAChB,SAAA;AACD;;;;;;AAME;AACF,QAAA,cAAc,EAAE;AACd,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;QAEjB,MAAM,EAAE,YAAW,EAAE,GAAI,QAAQ,CAAC,QAAQ,CAAA;AAE1C;;AAEE;AACF,QAAA,MAAM,qBAAqB,GAAa;YACtC,oBAAoB;YACpB,kBAAkB;YAClB,yBAAyB;SAC3B;AAEA;;;;AAIE;AACF,QAAA,MAAM,SAAS,GAAgB,GAAG,CAAC,CAAC,CAAA;AAEpC;;;;AAIE;AACF,QAAA,MAAM,aAAY,GAAI,GAAG,CAAC,IAAI,CAAA;AAE9B;;;;;;AAME;AACF,QAAA,MAAM,WAAU,GAAI,QAAQ,CAAC,MAA+B,YAAY,EAAE,KAAK,CAAC,CAAC,CAAA,IAAK,IAAI,CAAA;AAE1F;;;;AAIE;QACF,MAAM,iBAAiB,MAAI;AACzB,YAAA,YAAY,CAAC,SAAS,CAAC,KAAK,CAAA;AAC5B,YAAA,aAAa,CAAC,QAAQ,KAAI;AAC5B,QAAA,CAAA;QAEA,qBAAqB,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;AAEpF;;;;AAIE;QACF,MAAM,QAAO,GAAI,MAAI;AACnB,YAAA,YAAY,CAAC,SAAS,CAAC,KAAK,CAAA;YAC5B,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,WAAW,CAAC,KAAM,CAAA;YACrD,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,WAAW,CAAC,KAAM,CAAC,GAAG,CAAA;AAChD,QAAA,CAAA;AAEA;;;;AAIE;QACF,MAAM,gBAAgB,MAAI;AACxB,YAAA,cAAc,EAAC;AACf,YAAA,EAAE,CAAC,IAAI,CAAC,8BAA8B,CAAA;AACxC,QAAA,CAAA;AAEA;;;;;AAKE;AACF,QAAA,KAAK,CACH,YAAY,EACZ,MAAI;AACF,YAAA,aAAa,CAAC,KAAI,GAAI,IAAG;YACzB,IAAI,KAAK,CAAC,SAAS,MAAK,IAAK,WAAW,CAAC,KAAK,EAAE;AAC9C,gBAAA,SAAS,CAAC,KAAI,GAAI,MAAM,CAAC,UAAU,CAAC,QAAQ,EAAE,KAAK,CAAC,cAAa,GAAI,IAAI,CAAA;YAC3E;AACF,QAAA,CAAC,EACD,EAAE,SAAS,EAAE,MAAM,CACrB;QAEA,OAAO;YACL,WAAW;YACX,QAAQ;YACR,aAAa;YACb,aAAa;YACb,KAAK;SACP;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"redirection2.vue.js","sources":["../../../../../src/x-modules/search/components/redirection.vue"],"sourcesContent":["<template>\n  <div v-if=\"redirection && slots.default\" class=\"x-redirection\" data-test=\"redirection\">\n    <slot v-bind=\"{ redirection, redirect, abortRedirect, isRedirecting, delayInSeconds }\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { Redirection as RedirectionModel } from '@empathyco/x-types'\nimport type { PropType, Ref } from 'vue'\nimport type { XEvent } from '../../../wiring/events.types'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/**\n * A redirection is a component that sends the user to a link in the website. It is helpful when\n * there are queries like `help`, `shipping costs`, `my account`, where a link to a section in the\n * website will be more helpful than the set of results returned.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Redirection',\n  xModule: searchXModule.name,\n  props: {\n    /**\n     * The redirection mode. Auto for auto redirection and manual for an user interaction.\n     *\n     * @public\n     */\n    mode: {\n      type: String as PropType<'auto' | 'manual'>,\n      default: 'auto',\n    },\n    /**\n     * The waiting time in seconds until the redirection is made.\n     *\n     * @remarks this delay only works in auto mode.\n     *\n     * @public\n     */\n    delayInSeconds: {\n      type: Number,\n      default: 0,\n    },\n  },\n  setup(props, { slots }) {\n    const $x = use$x()\n\n    const { redirections } = useState('search')\n\n    /**\n     * List of events to stop the animation.\n     */\n    const eventsToStopAnimation: XEvent[] = [\n      'UserAcceptedAQuery',\n      'UserClearedQuery',\n      'UserSelectedARelatedTag',\n    ]\n\n    /**\n     * The timeout id, used to cancel the redirection.\n     *\n     * @internal\n     */\n    const timeoutId: Ref<number> = ref(0)\n\n    /**\n     * Boolean flag which indicates if the redirection is running.\n     *\n     * @public\n     */\n    const isRedirecting = ref(true)\n\n    /**\n     * Computed property which returns the first recommendation of the state, if any returns null.\n     *\n     * @returns The first redirection of the state.\n     *\n     * @internal\n     */\n    const redirection = computed((): RedirectionModel | null => redirections?.value[0] ?? null)\n\n    /**\n     * Stops the animation if the user search another query.\n     *\n     * @internal\n     */\n    const cancelRedirect = () => {\n      clearTimeout(timeoutId.value)\n      isRedirecting.value = false\n    }\n\n    eventsToStopAnimation.forEach(event => $x.on(event, false).subscribe(cancelRedirect))\n\n    /**\n     * Dispatches the redirection, updating the url.\n     *\n     * @public\n     */\n    const redirect = () => {\n      clearTimeout(timeoutId.value)\n      $x.emit('UserClickedARedirection', redirection.value!)\n      window.location.replace(redirection.value!.url)\n    }\n\n    /**\n     * Stops the redirection, emitting `UserClickedAbortARedirection` event.\n     *\n     * @public\n     */\n    const abortRedirect = () => {\n      cancelRedirect()\n      $x.emit('UserClickedAbortARedirection')\n    }\n\n    /**\n     * Watcher function which adds a setTimeout to the redirect method is the component\n     * is in auto mode and there are redirections.\n     *\n     * @internal\n     */\n    watch(\n      redirections,\n      () => {\n        isRedirecting.value = true\n        if (props.mode === 'auto' && redirection.value) {\n          timeoutId.value = window.setTimeout(redirect, props.delayInSeconds * 1000)\n        }\n      },\n      { immediate: true },\n    )\n\n    return {\n      redirection,\n      redirect,\n      abortRedirect,\n      isRedirecting,\n      slots,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n  after the user clicks the redirection button.\n- [`UserClickedAbortARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n  after the user clicks the abort redirection button.\n\n## Play with the component\n\nIn this example, a query has been searched in the search input resulting in a case where the\nresponse has a redirection.\n\nA text box appears below the search box indicating that you're going to be redirected to another\nweb page.\n\nThis component has two modes:\n\n- Auto mode means that the redirection will occur after a certain number of seconds passed as a\n  property.\n- If the value is 0 the redirection will be instant.\n- Manual mode means that the user has to click the redirect button or nothing will happen.\n\n_Type any term in the input field to try it out!_\n\n```vue\n<template>\n  <Redirection #default=\"{ redirection, redirect, abortRedirect }\">\n    <span>In a few seconds you're going to be redirected!</span>\n    <span>{{ redirection.url }}</span>\n    <button @click=\"redirect\">Redirect now!</button>\n    <button @click=\"abortRedirect\">Abort redirection!</button>\n  </Redirection>\n</template>\n\n<script setup>\nimport { Redirection } from '@empathyco/x-components/search'\n</script>\n```\n\n## Extending the component\n\nComponents behaviour can be changed, in this example the mode of the component will be manual\nforcing the user to accept the redirection\n\n```vue\n<template>\n  <Redirection mode=\"manual\" #default=\"{ redirection, redirect }\">\n    <span>{{ redirection.url }}</span>\n    <button @click=\"redirect\">Redirect now!</button>\n  </Redirection>\n</template>\n\n<script setup>\nimport { Redirection } from '@empathyco/x-components/search'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAeA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,MAAqC;AAC3C,YAAA,OAAO,EAAE,MAAM;AAChB,SAAA;AACD;;;;;;AAME;AACF,QAAA,cAAc,EAAE;AACd,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;QAEjB,MAAM,EAAE,YAAW,EAAE,GAAI,QAAQ,CAAC,QAAQ,CAAA;AAE1C;;AAEE;AACF,QAAA,MAAM,qBAAqB,GAAa;YACtC,oBAAoB;YACpB,kBAAkB;YAClB,yBAAyB;SAC3B;AAEA;;;;AAIE;AACF,QAAA,MAAM,SAAS,GAAgB,GAAG,CAAC,CAAC,CAAA;AAEpC;;;;AAIE;AACF,QAAA,MAAM,aAAY,GAAI,GAAG,CAAC,IAAI,CAAA;AAE9B;;;;;;AAME;AACF,QAAA,MAAM,WAAU,GAAI,QAAQ,CAAC,MAA+B,YAAY,EAAE,KAAK,CAAC,CAAC,CAAA,IAAK,IAAI,CAAA;AAE1F;;;;AAIE;QACF,MAAM,iBAAiB,MAAI;AACzB,YAAA,YAAY,CAAC,SAAS,CAAC,KAAK,CAAA;AAC5B,YAAA,aAAa,CAAC,QAAQ,KAAI;AAC5B,QAAA,CAAA;QAEA,qBAAqB,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;AAEpF;;;;AAIE;QACF,MAAM,QAAO,GAAI,MAAI;AACnB,YAAA,YAAY,CAAC,SAAS,CAAC,KAAK,CAAA;YAC5B,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,WAAW,CAAC,KAAM,CAAA;YACrD,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,WAAW,CAAC,KAAM,CAAC,GAAG,CAAA;AAChD,QAAA,CAAA;AAEA;;;;AAIE;QACF,MAAM,gBAAgB,MAAI;AACxB,YAAA,cAAc,EAAC;AACf,YAAA,EAAE,CAAC,IAAI,CAAC,8BAA8B,CAAA;AACxC,QAAA,CAAA;AAEA;;;;;AAKE;AACF,QAAA,KAAK,CACH,YAAY,EACZ,MAAI;AACF,YAAA,aAAa,CAAC,KAAI,GAAI,IAAG;YACzB,IAAI,KAAK,CAAC,SAAS,MAAK,IAAK,WAAW,CAAC,KAAK,EAAE;AAC9C,gBAAA,SAAS,CAAC,KAAI,GAAI,MAAM,CAAC,UAAU,CAAC,QAAQ,EAAE,KAAK,CAAC,cAAa,GAAI,IAAI,CAAA;YAC3E;AACF,QAAA,CAAC,EACD,EAAE,SAAS,EAAE,MAAM,CACrB;QAEA,OAAO;YACL,WAAW;YACX,QAAQ;YACR,aAAa;YACb,aAAa;YACb,KAAK;SACP;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/search/components/{results-list.vue2.js → results-list2.vue.js}

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

package/js/x-modules/search/components/results-list2.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"results-list2.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/js/x-modules/search/components/sort-dropdown.vue.js

@@ -1,4 +1,4 @@
-import _sfc_main from './sort-dropdown.vue2.js';
+import _sfc_main from './sort-dropdown2.vue.js';
 import { resolveComponent, openBlock, createBlock, withCtx, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 

package/js/x-modules/search/components/{sort-dropdown.vue2.js → sort-dropdown2.vue.js}

@@ -50,4 +50,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=sort-dropdown.vue2.js.map
+//# sourceMappingURL=sort-dropdown2.vue.js.map

package/js/x-modules/search/components/{sort-dropdown.vue2.js.map → sort-dropdown2.vue.js.map}

@@ -1 +1 @@
-{"version":3,"file":"sort-dropdown.vue2.js","sources":["../../../../../src/x-modules/search/components/sort-dropdown.vue"],"sourcesContent":["<template>\n  <BaseDropdown\n    ref=\"rootRef\"\n    :items=\"items\"\n    :model-value=\"selectedSort\"\n    :animation=\"animation\"\n    class=\"x-sort-dropdown\"\n    data-test=\"sort-dropdown\"\n    aria-label=\"Select sorting\"\n    @update:model-value=\"emitUserClickedASort\"\n  >\n    <template #toggle=\"{ isOpen, item }\">\n      <!--\n       @slot Used to render the contents of the dropdown toggle button. If not provided, it uses\n       the item slot as fallback.\n       @binding {Sort} item - The sort data to render.\n       @binding {boolean} isOpen - True if the dropdown is opened, and false if it is closed.\n      -->\n      <slot v-bind=\"{ isOpen, item }\" name=\"toggle\">{{ item }}</slot>\n    </template>\n    <template #item=\"{ item, isHighlighted, isSelected }\">\n      <!--\n        @slot (required) Used to render each one of the items content, and as fallback\n        for the toggle button content slot if it is not provided.\n        @binding {Sort} item - Sort to render\n        @binding {boolean} isHighlighted - True when the item has the focus.\n        @binding {boolean} isSelected - True when the item is selected.\n      -->\n      <slot v-bind=\"{ item, isHighlighted, isSelected }\" name=\"item\">{{ item }}</slot>\n    </template>\n  </BaseDropdown>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { Component, PropType } from 'vue'\nimport { defineComponent, ref, watch } from 'vue'\n\nimport BaseDropdown from '../../../components/base-dropdown.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/**\n * The `SortDropdown` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n */\nexport default defineComponent({\n  name: 'SortDropdown',\n  xModule: searchXModule.name,\n  components: { BaseDropdown },\n  props: {\n    /** The list of possible sort values. */\n    items: {\n      type: Array as PropType<Sort[]>,\n      required: true,\n    },\n    /** The transition to use for opening and closing the dropdown. */\n    animation: [String, Object] as PropType<string | Component>,\n  },\n  emits: ['change'],\n  setup(_, { emit }) {\n    const $x = use$x()\n\n    const { sort: selectedSort } = useState('search')\n    const rootRef = ref<typeof BaseDropdown>()\n\n    watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n      immediate: true,\n    })\n\n    /**\n     * Emits the events related to the selection of a sort value.\n     *\n     * @remarks `(rootRef.value as any)?.$el` because rollup-plugin-vue understands\n     * `ref<typeof BaseDropdown>` as VueConstructor which doesn't contain $el.\n     *\n     * @param sort - The selected sort.\n     */\n    function emitUserClickedASort(sort: Sort) {\n      $x.emit('UserClickedASort', sort, { target: (rootRef.value as any)?.$el })\n      emit('change', sort)\n    }\n\n    return {\n      emitUserClickedASort,\n      rootRef,\n      selectedSort,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Sort Dropdown\n\nThe `SortDropdown` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can be received then in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `v-model` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing both the toggle button and each one of the possible sort\nvalues. This can be done with the `toggle` and `item` slots.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  To sync the selected sort with the store state value. This event is emitted as soon as the list of\n  items is received, whenever this list changes if there is no provided value, and when the provided\n  value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  As its name suggests, the event is emitted after the user clicks one of the sort options. This does\n  not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n  <SortDropdown :items=\"sortValues\">\n    <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>\n    <template #item=\"{ item, isHighlighted, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      <span v-if=\"isHighlighted\">🟢</span>\n      {{ item }}\n    </template>\n  </SortDropdown>\n</template>\n\n<script setup>\nimport { SortDropdown } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortDropdown v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>\n    <template #item=\"{ item, isHighlighted, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      <span v-if=\"isHighlighted\">🟢</span>\n      {{ item }}\n    </template>\n  </SortDropdown>\n</template>\n\n<script setup>\nimport { SortDropdown } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst selectedSort = ref('Price asc')\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AA2CA;;;AAGE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;IACpB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,YAAW,EAAG;AAC5B,IAAA,KAAK,EAAE;;AAEL,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,KAAyB;AAC/B,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,CAAiC;AAC5D,KAAA;IACD,KAAK,EAAE,CAAC,QAAQ,CAAC;AACjB,IAAA,KAAK,CAAC,CAAC,EAAE,EAAE,IAAG,EAAG,EAAA;AACf,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;QAEjB,MAAM,EAAE,IAAI,EAAE,YAAW,KAAM,QAAQ,CAAC,QAAQ,CAAA;AAChD,QAAA,MAAM,OAAM,GAAI,GAAG,EAAsB;AAEzC,QAAA,KAAK,CAAC,YAAY,EAAE,CAAC,KAAW,KAAK,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE;AAC3E,YAAA,SAAS,EAAE,IAAI;AAChB,SAAA,CAAA;AAED;;;;;;;AAOE;QACF,SAAS,oBAAoB,CAAC,IAAU,EAAA;AACtC,YAAA,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE,IAAI,EAAE,EAAE,MAAM,EAAG,OAAO,CAAC,KAAa,EAAE,KAAK,CAAA;AACzE,YAAA,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAA;QACrB;QAEA,OAAO;YACL,oBAAoB;YACpB,OAAO;YACP,YAAY;SACd;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"sort-dropdown2.vue.js","sources":["../../../../../src/x-modules/search/components/sort-dropdown.vue"],"sourcesContent":["<template>\n  <BaseDropdown\n    ref=\"rootRef\"\n    :items=\"items\"\n    :model-value=\"selectedSort\"\n    :animation=\"animation\"\n    class=\"x-sort-dropdown\"\n    data-test=\"sort-dropdown\"\n    aria-label=\"Select sorting\"\n    @update:model-value=\"emitUserClickedASort\"\n  >\n    <template #toggle=\"{ isOpen, item }\">\n      <!--\n       @slot Used to render the contents of the dropdown toggle button. If not provided, it uses\n       the item slot as fallback.\n       @binding {Sort} item - The sort data to render.\n       @binding {boolean} isOpen - True if the dropdown is opened, and false if it is closed.\n      -->\n      <slot v-bind=\"{ isOpen, item }\" name=\"toggle\">{{ item }}</slot>\n    </template>\n    <template #item=\"{ item, isHighlighted, isSelected }\">\n      <!--\n        @slot (required) Used to render each one of the items content, and as fallback\n        for the toggle button content slot if it is not provided.\n        @binding {Sort} item - Sort to render\n        @binding {boolean} isHighlighted - True when the item has the focus.\n        @binding {boolean} isSelected - True when the item is selected.\n      -->\n      <slot v-bind=\"{ item, isHighlighted, isSelected }\" name=\"item\">{{ item }}</slot>\n    </template>\n  </BaseDropdown>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { Component, PropType } from 'vue'\nimport { defineComponent, ref, watch } from 'vue'\n\nimport BaseDropdown from '../../../components/base-dropdown.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/**\n * The `SortDropdown` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n */\nexport default defineComponent({\n  name: 'SortDropdown',\n  xModule: searchXModule.name,\n  components: { BaseDropdown },\n  props: {\n    /** The list of possible sort values. */\n    items: {\n      type: Array as PropType<Sort[]>,\n      required: true,\n    },\n    /** The transition to use for opening and closing the dropdown. */\n    animation: [String, Object] as PropType<string | Component>,\n  },\n  emits: ['change'],\n  setup(_, { emit }) {\n    const $x = use$x()\n\n    const { sort: selectedSort } = useState('search')\n    const rootRef = ref<typeof BaseDropdown>()\n\n    watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n      immediate: true,\n    })\n\n    /**\n     * Emits the events related to the selection of a sort value.\n     *\n     * @remarks `(rootRef.value as any)?.$el` because rollup-plugin-vue understands\n     * `ref<typeof BaseDropdown>` as VueConstructor which doesn't contain $el.\n     *\n     * @param sort - The selected sort.\n     */\n    function emitUserClickedASort(sort: Sort) {\n      $x.emit('UserClickedASort', sort, { target: (rootRef.value as any)?.$el })\n      emit('change', sort)\n    }\n\n    return {\n      emitUserClickedASort,\n      rootRef,\n      selectedSort,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Sort Dropdown\n\nThe `SortDropdown` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can be received then in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `v-model` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing both the toggle button and each one of the possible sort\nvalues. This can be done with the `toggle` and `item` slots.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  To sync the selected sort with the store state value. This event is emitted as soon as the list of\n  items is received, whenever this list changes if there is no provided value, and when the provided\n  value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  As its name suggests, the event is emitted after the user clicks one of the sort options. This does\n  not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n  <SortDropdown :items=\"sortValues\">\n    <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>\n    <template #item=\"{ item, isHighlighted, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      <span v-if=\"isHighlighted\">🟢</span>\n      {{ item }}\n    </template>\n  </SortDropdown>\n</template>\n\n<script setup>\nimport { SortDropdown } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortDropdown v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>\n    <template #item=\"{ item, isHighlighted, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      <span v-if=\"isHighlighted\">🟢</span>\n      {{ item }}\n    </template>\n  </SortDropdown>\n</template>\n\n<script setup>\nimport { SortDropdown } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst selectedSort = ref('Price asc')\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AA2CA;;;AAGE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;IACpB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,YAAW,EAAG;AAC5B,IAAA,KAAK,EAAE;;AAEL,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,KAAyB;AAC/B,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,CAAiC;AAC5D,KAAA;IACD,KAAK,EAAE,CAAC,QAAQ,CAAC;AACjB,IAAA,KAAK,CAAC,CAAC,EAAE,EAAE,IAAG,EAAG,EAAA;AACf,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;QAEjB,MAAM,EAAE,IAAI,EAAE,YAAW,KAAM,QAAQ,CAAC,QAAQ,CAAA;AAChD,QAAA,MAAM,OAAM,GAAI,GAAG,EAAsB;AAEzC,QAAA,KAAK,CAAC,YAAY,EAAE,CAAC,KAAW,KAAK,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE;AAC3E,YAAA,SAAS,EAAE,IAAI;AAChB,SAAA,CAAA;AAED;;;;;;;AAOE;QACF,SAAS,oBAAoB,CAAC,IAAU,EAAA;AACtC,YAAA,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE,IAAI,EAAE,EAAE,MAAM,EAAG,OAAO,CAAC,KAAa,EAAE,KAAK,CAAA;AACzE,YAAA,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAA;QACrB;QAEA,OAAO;YACL,oBAAoB;YACpB,OAAO;YACP,YAAY;SACd;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/search/components/sort-list.vue.js

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

package/js/x-modules/search/components/{sort-list.vue2.js → sort-list2.vue.js}

@@ -51,4 +51,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=sort-list.vue2.js.map
+//# sourceMappingURL=sort-list2.vue.js.map

package/js/x-modules/search/components/{sort-list.vue2.js.map → sort-list2.vue.js.map}

@@ -1 +1 @@
-{"version":3,"file":"sort-list.vue2.js","sources":["../../../../../src/x-modules/search/components/sort-list.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" tag=\"ul\" class=\"x-option-list x-sort-list\" data-test=\"sort-list\">\n    <li\n      v-for=\"{ item, cssClasses, event } in listItems\"\n      :key=\"item\"\n      :class=\"cssClasses\"\n      class=\"x-option-list__item x-sort-list__item\"\n    >\n      <BaseEventButton\n        class=\"x-sort-list__button xds:button\"\n        data-test=\"x-sort-button\"\n        :events=\"event\"\n      >\n        <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n          {{ item }}\n        </slot>\n      </BaseEventButton>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { Component, PropType } from 'vue'\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent, watch } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/**\n * Sort list item options.\n */\ninterface SortListItem {\n  item: Sort\n  cssClasses: VueCSSClasses\n  event: Partial<XEventsTypes>\n}\n\n/**\n * The `SortList` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n */\nexport default defineComponent({\n  name: 'SortList',\n  xModule: searchXModule.name,\n  components: { BaseEventButton },\n  props: {\n    /** The list of possible sort values. */\n    items: {\n      type: Array as PropType<Sort[]>,\n      required: true,\n    },\n    /** The transition to use for rendering the list. */\n    animation: {\n      type: [String, Object] as PropType<string | Component>,\n      default: () => 'ul',\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const { sort: selectedSort } = useState('search')\n\n    watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n      immediate: true,\n    })\n\n    /**\n     * Sort list items.\n     *\n     * @returns A list of items with their css class and the event associate to it.\n     */\n    const listItems = computed<SortListItem[]>(() =>\n      props.items.map(item => ({\n        item,\n        cssClasses: {\n          'x-sort-list__item--is-selected': item === selectedSort.value,\n          'x-option-list__item--is-selected': item === selectedSort.value,\n        },\n        event: { UserClickedASort: item },\n      })),\n    )\n\n    return {\n      listItems,\n      selectedSort,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-sort-list {\n  list-style-type: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Sort List\n\nThe `SortList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `v-model` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe default slot.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  To sync the selected sort with the store state value. This event is emitted as soon as the list of\n  items is received, whenever this list changes if there is no provided value, and when the provided\n  value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  As its name suggests, the event is emitted after the user clicks one of the sort options. This does\n  not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n  <SortList :items=\"sortValues\">\n    <template #default=\"{ item, isSelected }\">Item: {{ item }}</template>\n  </SortList>\n</template>\n\n<script setup>\nimport { SortList } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortList v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #default=\"{ item, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      {{ item }}\n    </template>\n  </SortList>\n</template>\n\n<script setup>\nimport { SortList } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst selectedSort = ref('Price asc')\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAyCA;;;AAGE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,UAAU;IAChB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;;AAEL,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,KAAyB;AAC/B,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAiC;AACtD,YAAA,OAAO,EAAE,MAAM,IAAI;AACpB,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;QAEjB,MAAM,EAAE,IAAI,EAAE,YAAW,KAAM,QAAQ,CAAC,QAAQ,CAAA;AAEhD,QAAA,KAAK,CAAC,YAAY,EAAE,CAAC,KAAW,KAAK,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE;AAC3E,YAAA,SAAS,EAAE,IAAI;AAChB,SAAA,CAAA;AAED;;;;AAIE;AACF,QAAA,MAAM,SAAQ,GAAI,QAAQ,CAAiB,MACzC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAG,KAAM;YACvB,IAAI;AACJ,YAAA,UAAU,EAAE;AACV,gBAAA,gCAAgC,EAAE,IAAG,KAAM,YAAY,CAAC,KAAK;AAC7D,gBAAA,kCAAkC,EAAE,IAAG,KAAM,YAAY,CAAC,KAAK;AAChE,aAAA;AACD,YAAA,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAG,EAAG;SAClC,CAAC,CAAC,CACL;QAEA,OAAO;YACL,SAAS;YACT,YAAY;SACd;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"sort-list2.vue.js","sources":["../../../../../src/x-modules/search/components/sort-list.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" tag=\"ul\" class=\"x-option-list x-sort-list\" data-test=\"sort-list\">\n    <li\n      v-for=\"{ item, cssClasses, event } in listItems\"\n      :key=\"item\"\n      :class=\"cssClasses\"\n      class=\"x-option-list__item x-sort-list__item\"\n    >\n      <BaseEventButton\n        class=\"x-sort-list__button xds:button\"\n        data-test=\"x-sort-button\"\n        :events=\"event\"\n      >\n        <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n          {{ item }}\n        </slot>\n      </BaseEventButton>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { Component, PropType } from 'vue'\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent, watch } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/**\n * Sort list item options.\n */\ninterface SortListItem {\n  item: Sort\n  cssClasses: VueCSSClasses\n  event: Partial<XEventsTypes>\n}\n\n/**\n * The `SortList` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n */\nexport default defineComponent({\n  name: 'SortList',\n  xModule: searchXModule.name,\n  components: { BaseEventButton },\n  props: {\n    /** The list of possible sort values. */\n    items: {\n      type: Array as PropType<Sort[]>,\n      required: true,\n    },\n    /** The transition to use for rendering the list. */\n    animation: {\n      type: [String, Object] as PropType<string | Component>,\n      default: () => 'ul',\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const { sort: selectedSort } = useState('search')\n\n    watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n      immediate: true,\n    })\n\n    /**\n     * Sort list items.\n     *\n     * @returns A list of items with their css class and the event associate to it.\n     */\n    const listItems = computed<SortListItem[]>(() =>\n      props.items.map(item => ({\n        item,\n        cssClasses: {\n          'x-sort-list__item--is-selected': item === selectedSort.value,\n          'x-option-list__item--is-selected': item === selectedSort.value,\n        },\n        event: { UserClickedASort: item },\n      })),\n    )\n\n    return {\n      listItems,\n      selectedSort,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-sort-list {\n  list-style-type: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Sort List\n\nThe `SortList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `v-model` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe default slot.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  To sync the selected sort with the store state value. This event is emitted as soon as the list of\n  items is received, whenever this list changes if there is no provided value, and when the provided\n  value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  As its name suggests, the event is emitted after the user clicks one of the sort options. This does\n  not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n  <SortList :items=\"sortValues\">\n    <template #default=\"{ item, isSelected }\">Item: {{ item }}</template>\n  </SortList>\n</template>\n\n<script setup>\nimport { SortList } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortList v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #default=\"{ item, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      {{ item }}\n    </template>\n  </SortList>\n</template>\n\n<script setup>\nimport { SortList } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst selectedSort = ref('Price asc')\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAyCA;;;AAGE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,UAAU;IAChB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;;AAEL,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,KAAyB;AAC/B,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAiC;AACtD,YAAA,OAAO,EAAE,MAAM,IAAI;AACpB,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;QAEjB,MAAM,EAAE,IAAI,EAAE,YAAW,KAAM,QAAQ,CAAC,QAAQ,CAAA;AAEhD,QAAA,KAAK,CAAC,YAAY,EAAE,CAAC,KAAW,KAAK,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE;AAC3E,YAAA,SAAS,EAAE,IAAI;AAChB,SAAA,CAAA;AAED;;;;AAIE;AACF,QAAA,MAAM,SAAQ,GAAI,QAAQ,CAAiB,MACzC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAG,KAAM;YACvB,IAAI;AACJ,YAAA,UAAU,EAAE;AACV,gBAAA,gCAAgC,EAAE,IAAG,KAAM,YAAY,CAAC,KAAK;AAC7D,gBAAA,kCAAkC,EAAE,IAAG,KAAM,YAAY,CAAC,KAAK;AAChE,aAAA;AACD,YAAA,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAG,EAAG;SAClC,CAAC,CAAC,CACL;QAEA,OAAO;YACL,SAAS;YACT,YAAY;SACd;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/search/components/{sort-list.vue3.js → sort-list3.vue.js}

@@ -4,4 +4,4 @@ var css = ".x-sort-list[data-v-834b0328]{list-style-type:none}";
 injectCss(css);
 
 export { css };
-//# sourceMappingURL=sort-list.vue3.js.map
+//# sourceMappingURL=sort-list3.vue.js.map

package/js/x-modules/search/components/sort-list3.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort-list3.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/js/x-modules/search/components/sort-picker-list.vue.js

@@ -1,4 +1,4 @@
-import _sfc_main from './sort-picker-list.vue2.js';
+import _sfc_main from './sort-picker-list2.vue.js';
 import { resolveComponent, openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, normalizeClass, renderSlot, mergeProps, createTextVNode, toDisplayString } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 

package/js/x-modules/search/components/{sort-picker-list.vue2.js → sort-picker-list2.vue.js}

@@ -52,4 +52,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=sort-picker-list.vue2.js.map
+//# sourceMappingURL=sort-picker-list2.vue.js.map

package/js/x-modules/search/components/{sort-picker-list.vue2.js.map → sort-picker-list2.vue.js.map}

@@ -1 +1 @@
-{"version":3,"file":"sort-picker-list.vue2.js","sources":["../../../../../src/x-modules/search/components/sort-picker-list.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    tag=\"div\"\n    class=\"x-sort-picker-list\"\n    data-test=\"sort-picker\"\n    role=\"list\"\n  >\n    <BaseEventButton\n      v-for=\"{ item, cssClasses, event } in listItems\"\n      :key=\"item\"\n      :class=\"[cssClasses, buttonClass]\"\n      data-test=\"sort-picker-button\"\n      :events=\"event\"\n      :aria-pressed=\"item === selectedSort || null\"\n      role=\"listitem\"\n    >\n      <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n        {{ item }}\n      </slot>\n    </BaseEventButton>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { Component, PropType } from 'vue'\nimport type { SortPickerItem } from './sort-picker-list.types'\nimport { computed, defineComponent, watch } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/**\n * The `SortPickerList` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n */\nexport default defineComponent({\n  name: 'SortPickerList',\n  xModule: searchXModule.name,\n  components: { BaseEventButton },\n  props: {\n    /** The list of possible sort values. */\n    items: {\n      type: Array as PropType<Sort[]>,\n      required: true,\n    },\n    /** The transition to use for rendering the list. */\n    animation: {\n      type: [String, Object] as PropType<string | Component>,\n      default: () => 'div',\n    },\n    /** Class inherited by each sort button. */\n    buttonClass: String,\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const { sort: selectedSort } = useState('search')\n\n    watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n      immediate: true,\n    })\n\n    /**\n     * Sort list items.\n     *\n     * @returns A list of items with their css class and the event associate to it.\n     */\n    const listItems = computed<SortPickerItem[]>(() =>\n      props.items.map(item => ({\n        item,\n        cssClasses: {\n          'xds:selected': item === selectedSort.value,\n        },\n        event: { UserClickedASort: item },\n      })),\n    )\n\n    return {\n      listItems,\n      selectedSort,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Sort Picker List\n\nThe `SortPickerList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `v-model` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe default slot.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  To sync the selected sort with the store state value. This event is emitted as soon as the list of\n  items is received, whenever this list changes if there is no provided value, and when the provided\n  value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  As its name suggests, the event is emitted after the user clicks one of the sort options. This does\n  not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n  <SortPickerList :items=\"sortValues\">\n    <template #default=\"{ item, isSelected }\">Item: {{ item }}</template>\n  </SortPickerList>\n</template>\n\n<script setup>\nimport { SortPickerList } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortPickerList v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #default=\"{ item, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      {{ item }}\n    </template>\n  </SortPickerList>\n</template>\n\n<script setup>\nimport { SortPickerList } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst selectedSort = ref('Price asc')\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n\n### Customizing the items with classes\n\nThe `buttonClass` prop can be used to add classes to the sort items.\n\n```vue\n<template>\n  <SortPickerList :items=\"sortValues\" buttonClass=\"x-button-outlined\" />\n</template>\n\n<script setup>\nimport { SortPickerList } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAkCA;;;AAGE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;IACtB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;;AAEL,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,KAAyB;AAC/B,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAiC;AACtD,YAAA,OAAO,EAAE,MAAM,KAAK;AACrB,SAAA;;AAED,QAAA,WAAW,EAAE,MAAM;AACpB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;QAEjB,MAAM,EAAE,IAAI,EAAE,YAAW,KAAM,QAAQ,CAAC,QAAQ,CAAA;AAEhD,QAAA,KAAK,CAAC,YAAY,EAAE,CAAC,KAAW,KAAK,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE;AAC3E,YAAA,SAAS,EAAE,IAAI;AAChB,SAAA,CAAA;AAED;;;;AAIE;AACF,QAAA,MAAM,YAAY,QAAQ,CAAmB,MAC3C,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAG,KAAM;YACvB,IAAI;AACJ,YAAA,UAAU,EAAE;AACV,gBAAA,cAAc,EAAE,IAAG,KAAM,YAAY,CAAC,KAAK;AAC5C,aAAA;AACD,YAAA,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAG,EAAG;SAClC,CAAC,CAAC,CACL;QAEA,OAAO;YACL,SAAS;YACT,YAAY;SACd;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"sort-picker-list2.vue.js","sources":["../../../../../src/x-modules/search/components/sort-picker-list.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    tag=\"div\"\n    class=\"x-sort-picker-list\"\n    data-test=\"sort-picker\"\n    role=\"list\"\n  >\n    <BaseEventButton\n      v-for=\"{ item, cssClasses, event } in listItems\"\n      :key=\"item\"\n      :class=\"[cssClasses, buttonClass]\"\n      data-test=\"sort-picker-button\"\n      :events=\"event\"\n      :aria-pressed=\"item === selectedSort || null\"\n      role=\"listitem\"\n    >\n      <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n        {{ item }}\n      </slot>\n    </BaseEventButton>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { Component, PropType } from 'vue'\nimport type { SortPickerItem } from './sort-picker-list.types'\nimport { computed, defineComponent, watch } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/**\n * The `SortPickerList` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n */\nexport default defineComponent({\n  name: 'SortPickerList',\n  xModule: searchXModule.name,\n  components: { BaseEventButton },\n  props: {\n    /** The list of possible sort values. */\n    items: {\n      type: Array as PropType<Sort[]>,\n      required: true,\n    },\n    /** The transition to use for rendering the list. */\n    animation: {\n      type: [String, Object] as PropType<string | Component>,\n      default: () => 'div',\n    },\n    /** Class inherited by each sort button. */\n    buttonClass: String,\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const { sort: selectedSort } = useState('search')\n\n    watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n      immediate: true,\n    })\n\n    /**\n     * Sort list items.\n     *\n     * @returns A list of items with their css class and the event associate to it.\n     */\n    const listItems = computed<SortPickerItem[]>(() =>\n      props.items.map(item => ({\n        item,\n        cssClasses: {\n          'xds:selected': item === selectedSort.value,\n        },\n        event: { UserClickedASort: item },\n      })),\n    )\n\n    return {\n      listItems,\n      selectedSort,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Sort Picker List\n\nThe `SortPickerList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `v-model` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe default slot.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  To sync the selected sort with the store state value. This event is emitted as soon as the list of\n  items is received, whenever this list changes if there is no provided value, and when the provided\n  value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  As its name suggests, the event is emitted after the user clicks one of the sort options. This does\n  not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n  <SortPickerList :items=\"sortValues\">\n    <template #default=\"{ item, isSelected }\">Item: {{ item }}</template>\n  </SortPickerList>\n</template>\n\n<script setup>\nimport { SortPickerList } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortPickerList v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #default=\"{ item, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      {{ item }}\n    </template>\n  </SortPickerList>\n</template>\n\n<script setup>\nimport { SortPickerList } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst selectedSort = ref('Price asc')\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n\n### Customizing the items with classes\n\nThe `buttonClass` prop can be used to add classes to the sort items.\n\n```vue\n<template>\n  <SortPickerList :items=\"sortValues\" buttonClass=\"x-button-outlined\" />\n</template>\n\n<script setup>\nimport { SortPickerList } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAkCA;;;AAGE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;IACtB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;;AAEL,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,KAAyB;AAC/B,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAiC;AACtD,YAAA,OAAO,EAAE,MAAM,KAAK;AACrB,SAAA;;AAED,QAAA,WAAW,EAAE,MAAM;AACpB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;QAEjB,MAAM,EAAE,IAAI,EAAE,YAAW,KAAM,QAAQ,CAAC,QAAQ,CAAA;AAEhD,QAAA,KAAK,CAAC,YAAY,EAAE,CAAC,KAAW,KAAK,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE;AAC3E,YAAA,SAAS,EAAE,IAAI;AAChB,SAAA,CAAA;AAED;;;;AAIE;AACF,QAAA,MAAM,YAAY,QAAQ,CAAmB,MAC3C,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAG,KAAM;YACvB,IAAI;AACJ,YAAA,UAAU,EAAE;AACV,gBAAA,cAAc,EAAE,IAAG,KAAM,YAAY,CAAC,KAAK;AAC5C,aAAA;AACD,YAAA,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAG,EAAG;SAClC,CAAC,CAAC,CACL;QAEA,OAAO;YACL,SAAS;YACT,YAAY;SACd;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/search/components/spellcheck-button.vue.js

@@ -1,4 +1,4 @@
-import _sfc_main from './spellcheck-button.vue2.js';
+import _sfc_main from './spellcheck-button2.vue.js';
 import { openBlock, createElementBlock, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 

package/js/x-modules/search/components/{spellcheck-button.vue2.js → spellcheck-button2.vue.js}

@@ -50,4 +50,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=spellcheck-button.vue2.js.map
+//# sourceMappingURL=spellcheck-button2.vue.js.map

package/js/x-modules/search/components/{spellcheck-button.vue2.js.map → spellcheck-button2.vue.js.map}

@@ -1 +1 @@
-{"version":3,"file":"spellcheck-button.vue2.js","sources":["../../../../../src/x-modules/search/components/spellcheck-button.vue"],"sourcesContent":["<template>\n  <button\n    v-if=\"spellcheckedQuery\"\n    ref=\"el\"\n    class=\"x-spellcheck-button\"\n    data-test=\"set-spellcheck\"\n    @click=\"emitEvents\"\n  >\n    <slot v-bind=\"{ spellcheckedQuery }\">{{ spellcheckedQuery }}</slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport type { WireMetadata } from '../../../wiring/wiring.types'\nimport { defineComponent, ref } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/**\n * A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}\n * and {@link XEventsTypes.UserAcceptedSpellcheckQuery} events, expressing the user\n * intention to set the spellchecked query.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'SpellcheckButton',\n  xModule: searchXModule.name,\n  setup() {\n    const $x = use$x()\n\n    const el = ref<HTMLElement>()\n\n    /**\n     * The spellcheckedQuery from the search state.\n     *\n     * @public\n     */\n    const { spellcheckedQuery } = useState('search')\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      target: el.value as HTMLElement,\n      feature: 'spellcheck',\n    })\n\n    /**\n     * Emits events when the button is clicked.\n     *\n     * @public\n     */\n    const emitEvents = () => {\n      $x.emit('UserAcceptedAQuery', spellcheckedQuery.value as string, createEventMetadata())\n      $x.emit(\n        'UserAcceptedSpellcheckQuery',\n        spellcheckedQuery.value as string,\n        createEventMetadata(),\n      )\n    }\n\n    return {\n      el,\n      spellcheckedQuery,\n      emitEvents,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits 2 different events:\n\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the spellchecked query\n  data.\n- [`UserAcceptedSpellcheckQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the spellchecked query\n  data.\n\n## Examples\n\n### Basic example\n\nThe component sets the current spellcheckedQuery as the new query and emits the `UserAcceptedAQuery`\nand `UserAcceptedSpellcheckQuery` events.\n\n```vue\n<template>\n  <SpellcheckButton />\n</template>\n\n<script setup>\nimport { SpellcheckButton } from '@empathyco/x-components/search'\n</script>\n```\n\n### Customizing its contents\n\n```vue\n<template>\n  <SpellcheckButton>\n    <template #default=\"{ spellcheckedQuery }\">\n      <span class=\"x-spellcheck__text\">\n        Set the Spellcheck as the new query: {{ spellcheckedQuery }}!\n      </span>\n    </template>\n  </SpellcheckButton>\n</template>\n\n<script setup>\nimport { SpellcheckButton } from '@empathyco/x-components/search'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAmBA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,kBAAkB;IACxB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,KAAK,GAAA;AACH,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AAEjB,QAAA,MAAM,EAAC,GAAI,GAAG,EAAc;AAE5B;;;;AAIE;QACF,MAAM,EAAE,iBAAgB,KAAM,QAAQ,CAAC,QAAQ,CAAA;AAE/C;;;;;AAKE;AACF,QAAA,MAAM,mBAAkB,GAAI,OAAyC;YACnE,MAAM,EAAE,EAAE,CAAC,KAAoB;AAC/B,YAAA,OAAO,EAAE,YAAY;AACtB,SAAA,CAAA;AAED;;;;AAIE;QACF,MAAM,UAAS,GAAI,MAAI;AACrB,YAAA,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,iBAAiB,CAAC,KAAe,EAAE,mBAAmB,EAAE,CAAA;AACtF,YAAA,EAAE,CAAC,IAAI,CACL,6BAA6B,EAC7B,iBAAiB,CAAC,KAAe,EACjC,mBAAmB,EAAE,CACvB;AACF,QAAA,CAAA;QAEA,OAAO;YACL,EAAE;YACF,iBAAiB;YACjB,UAAU;SACZ;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"spellcheck-button2.vue.js","sources":["../../../../../src/x-modules/search/components/spellcheck-button.vue"],"sourcesContent":["<template>\n  <button\n    v-if=\"spellcheckedQuery\"\n    ref=\"el\"\n    class=\"x-spellcheck-button\"\n    data-test=\"set-spellcheck\"\n    @click=\"emitEvents\"\n  >\n    <slot v-bind=\"{ spellcheckedQuery }\">{{ spellcheckedQuery }}</slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport type { WireMetadata } from '../../../wiring/wiring.types'\nimport { defineComponent, ref } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/**\n * A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}\n * and {@link XEventsTypes.UserAcceptedSpellcheckQuery} events, expressing the user\n * intention to set the spellchecked query.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'SpellcheckButton',\n  xModule: searchXModule.name,\n  setup() {\n    const $x = use$x()\n\n    const el = ref<HTMLElement>()\n\n    /**\n     * The spellcheckedQuery from the search state.\n     *\n     * @public\n     */\n    const { spellcheckedQuery } = useState('search')\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      target: el.value as HTMLElement,\n      feature: 'spellcheck',\n    })\n\n    /**\n     * Emits events when the button is clicked.\n     *\n     * @public\n     */\n    const emitEvents = () => {\n      $x.emit('UserAcceptedAQuery', spellcheckedQuery.value as string, createEventMetadata())\n      $x.emit(\n        'UserAcceptedSpellcheckQuery',\n        spellcheckedQuery.value as string,\n        createEventMetadata(),\n      )\n    }\n\n    return {\n      el,\n      spellcheckedQuery,\n      emitEvents,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits 2 different events:\n\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the spellchecked query\n  data.\n- [`UserAcceptedSpellcheckQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the spellchecked query\n  data.\n\n## Examples\n\n### Basic example\n\nThe component sets the current spellcheckedQuery as the new query and emits the `UserAcceptedAQuery`\nand `UserAcceptedSpellcheckQuery` events.\n\n```vue\n<template>\n  <SpellcheckButton />\n</template>\n\n<script setup>\nimport { SpellcheckButton } from '@empathyco/x-components/search'\n</script>\n```\n\n### Customizing its contents\n\n```vue\n<template>\n  <SpellcheckButton>\n    <template #default=\"{ spellcheckedQuery }\">\n      <span class=\"x-spellcheck__text\">\n        Set the Spellcheck as the new query: {{ spellcheckedQuery }}!\n      </span>\n    </template>\n  </SpellcheckButton>\n</template>\n\n<script setup>\nimport { SpellcheckButton } from '@empathyco/x-components/search'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAmBA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,kBAAkB;IACxB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,KAAK,GAAA;AACH,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AAEjB,QAAA,MAAM,EAAC,GAAI,GAAG,EAAc;AAE5B;;;;AAIE;QACF,MAAM,EAAE,iBAAgB,KAAM,QAAQ,CAAC,QAAQ,CAAA;AAE/C;;;;;AAKE;AACF,QAAA,MAAM,mBAAkB,GAAI,OAAyC;YACnE,MAAM,EAAE,EAAE,CAAC,KAAoB;AAC/B,YAAA,OAAO,EAAE,YAAY;AACtB,SAAA,CAAA;AAED;;;;AAIE;QACF,MAAM,UAAS,GAAI,MAAI;AACrB,YAAA,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,iBAAiB,CAAC,KAAe,EAAE,mBAAmB,EAAE,CAAA;AACtF,YAAA,EAAE,CAAC,IAAI,CACL,6BAA6B,EAC7B,iBAAiB,CAAC,KAAe,EACjC,mBAAmB,EAAE,CACvB;AACF,QAAA,CAAA;QAEA,OAAO;YACL,EAAE;YACF,iBAAiB;YACjB,UAAU;SACZ;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/search/components/spellcheck.vue.js

@@ -1,4 +1,4 @@
-import _sfc_main from './spellcheck.vue2.js';
+import _sfc_main from './spellcheck2.vue.js';
 import { openBlock, createElementBlock, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 

package/js/x-modules/search/components/{spellcheck.vue2.js → spellcheck2.vue.js}

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

package/js/x-modules/search/components/{spellcheck.vue2.js.map → spellcheck2.vue.js.map}

@@ -1 +1 @@
-{"version":3,"file":"spellcheck.vue2.js","sources":["../../../../../src/x-modules/search/components/spellcheck.vue"],"sourcesContent":["<template>\n  <div v-if=\"spellcheckedQuery\" class=\"x-spellcheck\" data-test=\"spellcheck\">\n    <slot v-bind=\"{ query, spellcheckedQuery }\">{{ query }} - {{ spellcheckedQuery }}</slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/**\n * The `Spellcheck` component allows to inform the user with a friendly message that he\n * might have misspelled the search query. This message can be set using the default slot\n * of the component, which gives access to the searched query using the `query` scope property,\n * and the spellchecked query proposal, using the `spellcheckedQuery` scope property.\n *\n * The component will only render itself if the `spellcheckedQuery` property has value.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Spellcheck',\n  xModule: searchXModule.name,\n  setup() {\n    /**\n     * The query and the spellcheckedQuery from the search state.\n     *\n     * @public\n     */\n    const { query, spellcheckedQuery } = useState('search')\n\n    return {\n      query,\n      spellcheckedQuery,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis default spellcheck component expects a query and a spellcheckedQuery to render and pass to its\ndefault slot.\n\nThis two props should be show like a message comparing them.\n\n### Basic usage\n\n```vue\n<template>\n  <Spellcheck />\n</template>\n\n<script setup>\nimport { Spellcheck } from '@empathyco/x-components/search'\n</script>\n```\n\n### Customizing its contents\n\n```vue\n<template>\n  <Spellcheck>\n    <template #default=\"{ query, spellcheckedQuery }\">\n      No results found for '{{ query }}'. We show you results for '{{ spellcheckedQuery }}'\n    </template>\n  </Spellcheck>\n</template>\n\n<script setup>\nimport { Spellcheck } from '@empathyco/x-components/search'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAWA;;;;;;;;;AASE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,YAAY;IAClB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,KAAK,GAAA;AACH;;;;AAIE;QACF,MAAM,EAAE,KAAK,EAAE,iBAAgB,EAAE,GAAI,QAAQ,CAAC,QAAQ,CAAA;QAEtD,OAAO;YACL,KAAK;YACL,iBAAiB;SACnB;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"spellcheck2.vue.js","sources":["../../../../../src/x-modules/search/components/spellcheck.vue"],"sourcesContent":["<template>\n  <div v-if=\"spellcheckedQuery\" class=\"x-spellcheck\" data-test=\"spellcheck\">\n    <slot v-bind=\"{ query, spellcheckedQuery }\">{{ query }} - {{ spellcheckedQuery }}</slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/**\n * The `Spellcheck` component allows to inform the user with a friendly message that he\n * might have misspelled the search query. This message can be set using the default slot\n * of the component, which gives access to the searched query using the `query` scope property,\n * and the spellchecked query proposal, using the `spellcheckedQuery` scope property.\n *\n * The component will only render itself if the `spellcheckedQuery` property has value.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Spellcheck',\n  xModule: searchXModule.name,\n  setup() {\n    /**\n     * The query and the spellcheckedQuery from the search state.\n     *\n     * @public\n     */\n    const { query, spellcheckedQuery } = useState('search')\n\n    return {\n      query,\n      spellcheckedQuery,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis default spellcheck component expects a query and a spellcheckedQuery to render and pass to its\ndefault slot.\n\nThis two props should be show like a message comparing them.\n\n### Basic usage\n\n```vue\n<template>\n  <Spellcheck />\n</template>\n\n<script setup>\nimport { Spellcheck } from '@empathyco/x-components/search'\n</script>\n```\n\n### Customizing its contents\n\n```vue\n<template>\n  <Spellcheck>\n    <template #default=\"{ query, spellcheckedQuery }\">\n      No results found for '{{ query }}'. We show you results for '{{ spellcheckedQuery }}'\n    </template>\n  </Spellcheck>\n</template>\n\n<script setup>\nimport { Spellcheck } from '@empathyco/x-components/search'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAWA;;;;;;;;;AASE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,YAAY;IAClB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,KAAK,GAAA;AACH;;;;AAIE;QACF,MAAM,EAAE,KAAK,EAAE,iBAAgB,EAAE,GAAI,QAAQ,CAAC,QAAQ,CAAA;QAEtD,OAAO;YACL,KAAK;YACL,iBAAiB;SACnB;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

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

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

package/js/x-modules/search-box/components/{clear-search-input.vue2.js → clear-search-input2.vue.js}

@@ -40,4 +40,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=clear-search-input.vue2.js.map
+//# sourceMappingURL=clear-search-input2.vue.js.map

package/js/x-modules/search-box/components/{clear-search-input.vue2.js.map → clear-search-input2.vue.js.map}

@@ -1 +1 @@
-{"version":3,"file":"clear-search-input.vue2.js","sources":["../../../../../src/x-modules/search-box/components/clear-search-input.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    class=\"x-clear-search-input\"\n    :class=\"dynamicClasses\"\n    :events=\"clearSearchInputEvents\"\n    data-test=\"clear-search-input\"\n  >\n    <!-- @slot _Required_. Button content (text, icon, or both) -->\n    <slot>✕</slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { VueCSSClasses } from '../../../utils/types'\nimport { computed, defineComponent, ref } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { useState } from '../../../composables/use-state'\nimport { searchBoxXModule } from '../x-module'\n\n/**\n * This component renders a button to delete the current query.\n *\n * @remarks\n * A button that when pressed emits the {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}\n * and {@link SearchBoxXEvents.UserClearedQuery} events, expressing the user intention to clear\n * the current query.\n * It also adds `x-clear-search-input--has-empty-query` as class when there is no query.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'ClearSearchInput',\n  components: { BaseEventButton },\n  xModule: searchBoxXModule.name,\n  setup() {\n    const { query } = useState('searchBox')\n\n    /**\n     * The events dictionary that are going to be emitted when the button is pressed.\n     *\n     * @internal\n     */\n    const clearSearchInputEvents = ref({\n      UserPressedClearSearchBoxButton: undefined,\n    })\n\n    const isQueryEmpty = computed(() => query.value.length === 0)\n\n    const dynamicClasses = computed<VueCSSClasses>(() => ({\n      'x-clear-search-input--has-empty-query': isQueryEmpty.value,\n    }))\n\n    return {\n      dynamicClasses,\n      clearSearchInputEvents,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserPressedClearSearchBoxButton`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserClearedQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nHere a basic example of how the clear button is rendered.\n\n_Type any term in the input field and then click the Clear button to try it out!_\n\n```vue live\n<template>\n  <div style=\"display: flex;\">\n    <SearchInput />\n    <ClearSearchInput />\n  </div>\n</template>\n\n<script setup>\nimport { ClearSearchInput, SearchInput } from '@empathyco/x-components/search-box'\n</script>\n```\n\n### Play with default slot\n\nIn this example, a custom text is passed in the default slot instead of the default text to\ncustomize the button content.\n\n_Click the icon button to try it out!_\n\n```vue live\n<template>\n  <ClearSearchInput>Clear</ClearSearchInput>\n</template>\n\n<script setup>\nimport { ClearSearchInput } from '@empathyco/x-components/search-box'\n</script>\n```\n\n### Play with events\n\nIn this example, the `UserPressedClearSearchBoxButton` event is implemented, triggering the message\n“clear” when the clear search input button is clicked.\n\n_Click the Clear button to try it out!_\n\n```vue live\n<template>\n  <div>\n    <ClearSearchInput @UserPressedClearSearchBoxButton=\"message = 'clear'\">Clear</ClearSearchInput>\n    {{ message }}\n  </div>\n</template>\n\n<script setup>\nimport { ClearSearchInput } from '@empathyco/x-components/search-box'\nimport { ref } from 'vue'\n\nconst message = ref('')\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `ClearSearchInput`\ncomponent communicates with the [`SearchInput`](./search-input.md), deleting the search term\nentered.\n\n_Type any term in the input field and then click the icon button to try it out!_\n\n```vue live\n<template>\n  <div style=\"display: flex;\">\n    <SearchInput />\n    <ClearSearchInput />\n  </div>\n</template>\n\n<script setup>\nimport { SearchInput, ClearSearchInput } from '@empathyco/x-components/search-box'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAmBA;;;;;;;;;;AAUE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,kBAAkB;IACxB,UAAU,EAAE,EAAE,eAAc,EAAG;IAC/B,OAAO,EAAE,gBAAgB,CAAC,IAAI;IAC9B,KAAK,GAAA;QACH,MAAM,EAAE,KAAI,EAAE,GAAI,QAAQ,CAAC,WAAW,CAAA;AAEtC;;;;AAIE;QACF,MAAM,sBAAqB,GAAI,GAAG,CAAC;AACjC,YAAA,+BAA+B,EAAE,SAAS;AAC3C,SAAA,CAAA;AAED,QAAA,MAAM,YAAW,GAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,KAAK,CAAC,MAAK,KAAM,CAAC,CAAA;AAE5D,QAAA,MAAM,cAAa,GAAI,QAAQ,CAAgB,OAAO;YACpD,uCAAuC,EAAE,YAAY,CAAC,KAAK;AAC5D,SAAA,CAAC,CAAA;QAEF,OAAO;YACL,cAAc;YACd,sBAAsB;SACxB;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"clear-search-input2.vue.js","sources":["../../../../../src/x-modules/search-box/components/clear-search-input.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    class=\"x-clear-search-input\"\n    :class=\"dynamicClasses\"\n    :events=\"clearSearchInputEvents\"\n    data-test=\"clear-search-input\"\n  >\n    <!-- @slot _Required_. Button content (text, icon, or both) -->\n    <slot>✕</slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { VueCSSClasses } from '../../../utils/types'\nimport { computed, defineComponent, ref } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { useState } from '../../../composables/use-state'\nimport { searchBoxXModule } from '../x-module'\n\n/**\n * This component renders a button to delete the current query.\n *\n * @remarks\n * A button that when pressed emits the {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}\n * and {@link SearchBoxXEvents.UserClearedQuery} events, expressing the user intention to clear\n * the current query.\n * It also adds `x-clear-search-input--has-empty-query` as class when there is no query.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'ClearSearchInput',\n  components: { BaseEventButton },\n  xModule: searchBoxXModule.name,\n  setup() {\n    const { query } = useState('searchBox')\n\n    /**\n     * The events dictionary that are going to be emitted when the button is pressed.\n     *\n     * @internal\n     */\n    const clearSearchInputEvents = ref({\n      UserPressedClearSearchBoxButton: undefined,\n    })\n\n    const isQueryEmpty = computed(() => query.value.length === 0)\n\n    const dynamicClasses = computed<VueCSSClasses>(() => ({\n      'x-clear-search-input--has-empty-query': isQueryEmpty.value,\n    }))\n\n    return {\n      dynamicClasses,\n      clearSearchInputEvents,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserPressedClearSearchBoxButton`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserClearedQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nHere a basic example of how the clear button is rendered.\n\n_Type any term in the input field and then click the Clear button to try it out!_\n\n```vue live\n<template>\n  <div style=\"display: flex;\">\n    <SearchInput />\n    <ClearSearchInput />\n  </div>\n</template>\n\n<script setup>\nimport { ClearSearchInput, SearchInput } from '@empathyco/x-components/search-box'\n</script>\n```\n\n### Play with default slot\n\nIn this example, a custom text is passed in the default slot instead of the default text to\ncustomize the button content.\n\n_Click the icon button to try it out!_\n\n```vue live\n<template>\n  <ClearSearchInput>Clear</ClearSearchInput>\n</template>\n\n<script setup>\nimport { ClearSearchInput } from '@empathyco/x-components/search-box'\n</script>\n```\n\n### Play with events\n\nIn this example, the `UserPressedClearSearchBoxButton` event is implemented, triggering the message\n“clear” when the clear search input button is clicked.\n\n_Click the Clear button to try it out!_\n\n```vue live\n<template>\n  <div>\n    <ClearSearchInput @UserPressedClearSearchBoxButton=\"message = 'clear'\">Clear</ClearSearchInput>\n    {{ message }}\n  </div>\n</template>\n\n<script setup>\nimport { ClearSearchInput } from '@empathyco/x-components/search-box'\nimport { ref } from 'vue'\n\nconst message = ref('')\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `ClearSearchInput`\ncomponent communicates with the [`SearchInput`](./search-input.md), deleting the search term\nentered.\n\n_Type any term in the input field and then click the icon button to try it out!_\n\n```vue live\n<template>\n  <div style=\"display: flex;\">\n    <SearchInput />\n    <ClearSearchInput />\n  </div>\n</template>\n\n<script setup>\nimport { SearchInput, ClearSearchInput } from '@empathyco/x-components/search-box'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAmBA;;;;;;;;;;AAUE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,kBAAkB;IACxB,UAAU,EAAE,EAAE,eAAc,EAAG;IAC/B,OAAO,EAAE,gBAAgB,CAAC,IAAI;IAC9B,KAAK,GAAA;QACH,MAAM,EAAE,KAAI,EAAE,GAAI,QAAQ,CAAC,WAAW,CAAA;AAEtC;;;;AAIE;QACF,MAAM,sBAAqB,GAAI,GAAG,CAAC;AACjC,YAAA,+BAA+B,EAAE,SAAS;AAC3C,SAAA,CAAA;AAED,QAAA,MAAM,YAAW,GAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,KAAK,CAAC,MAAK,KAAM,CAAC,CAAA;AAE5D,QAAA,MAAM,cAAa,GAAI,QAAQ,CAAgB,OAAO;YACpD,uCAAuC,EAAE,YAAY,CAAC,KAAK;AAC5D,SAAA,CAAC,CAAA;QAEF,OAAO;YACL,cAAc;YACd,sBAAsB;SACxB;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

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

@@ -1,4 +1,4 @@
-import _sfc_main from './search-button.vue2.js';
+import _sfc_main from './search-button2.vue.js';
 import { openBlock, createElementBlock, normalizeClass, renderSlot, createElementVNode } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 

package/js/x-modules/search-box/components/{search-button.vue2.js → search-button2.vue.js}

@@ -56,4 +56,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=search-button.vue2.js.map
+//# sourceMappingURL=search-button2.vue.js.map

package/js/x-modules/search-box/components/{search-button.vue2.js.map → search-button2.vue.js.map}

@@ -1 +1 @@
-{"version":3,"file":"search-button.vue2.js","sources":["../../../../../src/x-modules/search-box/components/search-button.vue"],"sourcesContent":["<template>\n  <button\n    ref=\"buttonRef\"\n    class=\"x-search-button xds:button\"\n    :class=\"dynamicClasses\"\n    data-test=\"search-button\"\n    @click=\"emitEvents\"\n  >\n    <!-- @slot _Required_. Button content (text, icon, or both) -->\n    <slot><span class=\"xds:icon\">⌕</span></slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { WireMetadata } from '../../../wiring/wiring.types'\nimport { computed, defineComponent, ref } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchBoxXModule } from '../x-module'\n\n/**\n * This component renders a button to submit the query.\n *\n * @remarks\n * If query is not empty, it emits {@link XEventsTypes.UserAcceptedAQuery} and\n * {@link SearchBoxXEvents.UserPressedSearchButton} events with the query as payload.\n * It also adds `x-search-button--has-empty-query` as class when there is no query.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'SearchButton',\n  xModule: searchBoxXModule.name,\n  setup() {\n    const $x = use$x()\n\n    const buttonRef = ref<HTMLElement | null>(null)\n\n    const { query } = useState('searchBox')\n\n    const isQueryEmpty = computed(() => query.value.length === 0)\n\n    const dynamicClasses = computed<VueCSSClasses>(() => ({\n      'x-search-button--has-empty-query': isQueryEmpty.value,\n    }))\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    function createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n      return {\n        target: buttonRef.value,\n        feature: 'search_box',\n      }\n    }\n\n    /**\n     * Emits events when the button is clicked.\n     *\n     * @public\n     */\n    function emitEvents() {\n      if (!isQueryEmpty.value) {\n        $x.emit('UserAcceptedAQuery', query.value, createEventMetadata())\n        $x.emit('UserPressedSearchButton', query.value, createEventMetadata())\n      }\n    }\n\n    return {\n      dynamicClasses,\n      buttonRef,\n      emitEvents,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPressedSearchButton`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n<!-- prettier-ignore-start -->\n:::warning\nNote that no events are emitted if the query is empty.\n:::\n<!-- prettier-ignore-end -->\n\n## Dynamic classes\n\n`SearchButton` uses the `x-search-button--has-empty-query` dynamic CSS class to modify the HTML\nbutton style when the query is empty.\n\n## See it in action\n\nIn this example, a clickable button is rendered.\n\n_Click the Search button to try it out!_\n\n```vue live\n<template>\n  <SearchButton />\n</template>\n\n<script setup>\nimport { SearchButton } from '@empathyco/x-components/search-box'\n</script>\n```\n\n### Play with default slot\n\nHere text is passed in the default slot instead of an icon to customize the button content.\n\n_Click the icon button to try it out!_\n\n```vue live\n<template>\n  <SearchButton>Search</SearchButton>\n</template>\n\n<script setup>\nimport { SearchButton } from '@empathyco/x-components/search-box'\n</script>\n```\n\n### Play with events\n\nIn this example, the `UserPressedSearchButton` event has been implemented so that when you enter a\nsearch term and click the Search button, the search term is displayed as a message.\n\n_Type any term in the input field and then click the Search button to try it out!_\n\n```vue live\n<template>\n  <div>\n    <div style=\"display: flex;\">\n      <SearchInput />\n      <SearchButton\n        @UserPressedSearchButton=\"\n          query => {\n            message = query\n          }\n        \"\n      />\n    </div>\n    {{ message }}\n  </div>\n</template>\n\n<script setup>\nimport { SearchInput, SearchButton } from '@empathyco/x-components/search-box'\nimport { ref } from 'vue'\n\nconst message = ref('')\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `SearchButton` component\ncommunicates with the [`SearchInput`](./search-input.md) to submit the query. In this example, when\nyou enter a search term and click the Search button, the “Looking for results” message is displayed.\n\n_Type any term in the input field and then click the Search button to try it out!_\n\n```vue live\n<template>\n  <div>\n    <div style=\"display: flex;\">\n      <SearchInput />\n      <SearchButton\n        @UserAcceptedAQuery=\"\n          () => {\n            message = 'looking for results'\n          }\n        \"\n        >Search</SearchButton\n      >\n    </div>\n    {{ message }}\n  </div>\n</template>\n\n<script setup>\nimport { SearchButton, SearchInput } from '@empathyco/x-components/search-box'\nimport { ref } from 'vue'\n\nconst message = ref('')\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAqBA;;;;;;;;;AASE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;IACpB,OAAO,EAAE,gBAAgB,CAAC,IAAI;IAC9B,KAAK,GAAA;AACH,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AAEjB,QAAA,MAAM,SAAQ,GAAI,GAAG,CAAqB,IAAI,CAAA;QAE9C,MAAM,EAAE,KAAI,EAAE,GAAI,QAAQ,CAAC,WAAW,CAAA;AAEtC,QAAA,MAAM,YAAW,GAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,KAAK,CAAC,MAAK,KAAM,CAAC,CAAA;AAE5D,QAAA,MAAM,cAAa,GAAI,QAAQ,CAAgB,OAAO;YACpD,kCAAkC,EAAE,YAAY,CAAC,KAAK;AACvD,SAAA,CAAC,CAAA;AAEF;;;;;AAKE;AACF,QAAA,SAAS,mBAAmB,GAAA;YAC1B,OAAO;gBACL,MAAM,EAAE,SAAS,CAAC,KAAK;AACvB,gBAAA,OAAO,EAAE,YAAY;aACvB;QACF;AAEA;;;;AAIE;AACF,QAAA,SAAS,UAAU,GAAA;AACjB,YAAA,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;AACvB,gBAAA,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC,KAAK,EAAE,mBAAmB,EAAE,CAAA;AAChE,gBAAA,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,KAAK,CAAC,KAAK,EAAE,mBAAmB,EAAE,CAAA;YACvE;QACF;QAEA,OAAO;YACL,cAAc;YACd,SAAS;YACT,UAAU;SACZ;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"search-button2.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-button.vue"],"sourcesContent":["<template>\n  <button\n    ref=\"buttonRef\"\n    class=\"x-search-button xds:button\"\n    :class=\"dynamicClasses\"\n    data-test=\"search-button\"\n    @click=\"emitEvents\"\n  >\n    <!-- @slot _Required_. Button content (text, icon, or both) -->\n    <slot><span class=\"xds:icon\">⌕</span></slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { WireMetadata } from '../../../wiring/wiring.types'\nimport { computed, defineComponent, ref } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchBoxXModule } from '../x-module'\n\n/**\n * This component renders a button to submit the query.\n *\n * @remarks\n * If query is not empty, it emits {@link XEventsTypes.UserAcceptedAQuery} and\n * {@link SearchBoxXEvents.UserPressedSearchButton} events with the query as payload.\n * It also adds `x-search-button--has-empty-query` as class when there is no query.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'SearchButton',\n  xModule: searchBoxXModule.name,\n  setup() {\n    const $x = use$x()\n\n    const buttonRef = ref<HTMLElement | null>(null)\n\n    const { query } = useState('searchBox')\n\n    const isQueryEmpty = computed(() => query.value.length === 0)\n\n    const dynamicClasses = computed<VueCSSClasses>(() => ({\n      'x-search-button--has-empty-query': isQueryEmpty.value,\n    }))\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    function createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n      return {\n        target: buttonRef.value,\n        feature: 'search_box',\n      }\n    }\n\n    /**\n     * Emits events when the button is clicked.\n     *\n     * @public\n     */\n    function emitEvents() {\n      if (!isQueryEmpty.value) {\n        $x.emit('UserAcceptedAQuery', query.value, createEventMetadata())\n        $x.emit('UserPressedSearchButton', query.value, createEventMetadata())\n      }\n    }\n\n    return {\n      dynamicClasses,\n      buttonRef,\n      emitEvents,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPressedSearchButton`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n<!-- prettier-ignore-start -->\n:::warning\nNote that no events are emitted if the query is empty.\n:::\n<!-- prettier-ignore-end -->\n\n## Dynamic classes\n\n`SearchButton` uses the `x-search-button--has-empty-query` dynamic CSS class to modify the HTML\nbutton style when the query is empty.\n\n## See it in action\n\nIn this example, a clickable button is rendered.\n\n_Click the Search button to try it out!_\n\n```vue live\n<template>\n  <SearchButton />\n</template>\n\n<script setup>\nimport { SearchButton } from '@empathyco/x-components/search-box'\n</script>\n```\n\n### Play with default slot\n\nHere text is passed in the default slot instead of an icon to customize the button content.\n\n_Click the icon button to try it out!_\n\n```vue live\n<template>\n  <SearchButton>Search</SearchButton>\n</template>\n\n<script setup>\nimport { SearchButton } from '@empathyco/x-components/search-box'\n</script>\n```\n\n### Play with events\n\nIn this example, the `UserPressedSearchButton` event has been implemented so that when you enter a\nsearch term and click the Search button, the search term is displayed as a message.\n\n_Type any term in the input field and then click the Search button to try it out!_\n\n```vue live\n<template>\n  <div>\n    <div style=\"display: flex;\">\n      <SearchInput />\n      <SearchButton\n        @UserPressedSearchButton=\"\n          query => {\n            message = query\n          }\n        \"\n      />\n    </div>\n    {{ message }}\n  </div>\n</template>\n\n<script setup>\nimport { SearchInput, SearchButton } from '@empathyco/x-components/search-box'\nimport { ref } from 'vue'\n\nconst message = ref('')\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `SearchButton` component\ncommunicates with the [`SearchInput`](./search-input.md) to submit the query. In this example, when\nyou enter a search term and click the Search button, the “Looking for results” message is displayed.\n\n_Type any term in the input field and then click the Search button to try it out!_\n\n```vue live\n<template>\n  <div>\n    <div style=\"display: flex;\">\n      <SearchInput />\n      <SearchButton\n        @UserAcceptedAQuery=\"\n          () => {\n            message = 'looking for results'\n          }\n        \"\n        >Search</SearchButton\n      >\n    </div>\n    {{ message }}\n  </div>\n</template>\n\n<script setup>\nimport { SearchButton, SearchInput } from '@empathyco/x-components/search-box'\nimport { ref } from 'vue'\n\nconst message = ref('')\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAqBA;;;;;;;;;AASE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;IACpB,OAAO,EAAE,gBAAgB,CAAC,IAAI;IAC9B,KAAK,GAAA;AACH,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AAEjB,QAAA,MAAM,SAAQ,GAAI,GAAG,CAAqB,IAAI,CAAA;QAE9C,MAAM,EAAE,KAAI,EAAE,GAAI,QAAQ,CAAC,WAAW,CAAA;AAEtC,QAAA,MAAM,YAAW,GAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,KAAK,CAAC,MAAK,KAAM,CAAC,CAAA;AAE5D,QAAA,MAAM,cAAa,GAAI,QAAQ,CAAgB,OAAO;YACpD,kCAAkC,EAAE,YAAY,CAAC,KAAK;AACvD,SAAA,CAAC,CAAA;AAEF;;;;;AAKE;AACF,QAAA,SAAS,mBAAmB,GAAA;YAC1B,OAAO;gBACL,MAAM,EAAE,SAAS,CAAC,KAAK;AACvB,gBAAA,OAAO,EAAE,YAAY;aACvB;QACF;AAEA;;;;AAIE;AACF,QAAA,SAAS,UAAU,GAAA;AACjB,YAAA,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;AACvB,gBAAA,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC,KAAK,EAAE,mBAAmB,EAAE,CAAA;AAChE,gBAAA,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,KAAK,CAAC,KAAK,EAAE,mBAAmB,EAAE,CAAA;YACvE;QACF;QAEA,OAAO;YACL,cAAc;YACd,SAAS;YACT,UAAU;SACZ;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

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

@@ -1,7 +1,7 @@
-import _sfc_main from './search-input-placeholder.vue2.js';
+import _sfc_main from './search-input-placeholder2.vue.js';
 import { openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, toDisplayString, createCommentVNode } from 'vue';
-import './search-input-placeholder.vue3.js';
-import './search-input-placeholder.vue4.js';
+import './search-input-placeholder3.vue.js';
+import './search-input-placeholder4.vue.js';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {

package/js/x-modules/search-box/components/{search-input-placeholder.vue2.js → search-input-placeholder2.vue.js}

@@ -1,6 +1,6 @@
 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 '../../../components/animations/animate-translate2.vue.js';
 import { use$x } from '../../../composables/use-_x.js';
 import { useState } from '../../../composables/use-state.js';
 import { AnimationProp } from '../../../types/animation-prop.js';
@@ -183,4 +183,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=search-input-placeholder.vue2.js.map
+//# sourceMappingURL=search-input-placeholder2.vue.js.map

package/js/x-modules/search-box/components/{search-input-placeholder.vue2.js.map → search-input-placeholder2.vue.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-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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"}
+{"version":3,"file":"search-input-placeholder2.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":["AnimateTranslate"],"mappings":"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"}

package/js/x-modules/search-box/components/{search-input-placeholder.vue3.js → search-input-placeholder3.vue.js}

@@ -4,4 +4,4 @@ var css = ".x-search-input-placeholder-container{position:relative}";
 injectCss(css);
 
 export { css };
-//# sourceMappingURL=search-input-placeholder.vue3.js.map
+//# sourceMappingURL=search-input-placeholder3.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"search-input-placeholder3.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/js/x-modules/search-box/components/{search-input-placeholder.vue4.js → search-input-placeholder4.vue.js}

@@ -4,4 +4,4 @@ var css = ".x-search-input-placeholder[data-v-db4f79d1]{align-items:center;displ
 injectCss(css);
 
 export { css };
-//# sourceMappingURL=search-input-placeholder.vue4.js.map
+//# sourceMappingURL=search-input-placeholder4.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"search-input-placeholder4.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

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

@@ -1,6 +1,6 @@
-import _sfc_main from './search-input.vue2.js';
+import _sfc_main from './search-input2.vue.js';
 import { openBlock, createElementBlock, withKeys, withModifiers } from 'vue';
-import './search-input.vue3.js';
+import './search-input3.vue.js';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
 const _hoisted_1 = ["maxlength", "value"];

package/js/x-modules/search-box/components/{search-input.vue2.js → search-input2.vue.js}

@@ -225,4 +225,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=search-input.vue2.js.map
+//# sourceMappingURL=search-input2.vue.js.map