@empathyco/x-components 6.0.0-alpha.62 → 6.0.0-alpha.64

package/js/x-modules/search/components/sort-list.vue2.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 x-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 { PropType } from 'vue'\nimport type Vue 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 | typeof Vue>,\n      default: () => 'ul',\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const { sort: selectedSort } = useState('search', ['sort'])\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 `value` 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 suggest, 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 #item=\"{ item, isSelected }\">Item: {{ item }}</template>\n  </SortList>\n</template>\n\n<script>\nimport { SortList } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    SortList,\n  },\n  data() {\n    return { sortValues: ['Relevance', 'Price asc', 'Price desc'] }\n  },\n}\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortList v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      {{ item }}\n    </template>\n  </SortList>\n</template>\n\n<script>\nimport { SortList } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    SortList,\n  },\n  data() {\n    return {\n      selectedSort: 'Price asc',\n      sortValues: ['Relevance', 'Price asc', 'Price desc'],\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AA0CA;;;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,CAAkC;AACvD,YAAA,OAAO,EAAE,MAAM,IAAI;AACpB,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;AAEjB,QAAA,MAAM,EAAE,IAAI,EAAE,YAAW,EAAI,GAAE,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAA,CAAA;AAE1D,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,CAAA;AAED;;;;AAIE;AACF,QAAA,MAAM,SAAU,GAAE,QAAQ,CAAiB,MACzC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAG,KAAM;YACvB,IAAI;AACJ,YAAA,UAAU,EAAE;AACV,gBAAA,gCAAgC,EAAE,IAAK,KAAI,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,CAAA;QAEA,OAAO;YACL,SAAS;YACT,YAAY;SACd,CAAA;KACD;AACF,CAAA,CAAA;;;;"}
+{"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 x-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 { PropType } from 'vue'\nimport type Vue 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 | typeof Vue>,\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 `value` 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 suggest, 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 #item=\"{ item, isSelected }\">Item: {{ item }}</template>\n  </SortList>\n</template>\n\n<script>\nimport { SortList } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    SortList,\n  },\n  data() {\n    return { sortValues: ['Relevance', 'Price asc', 'Price desc'] }\n  },\n}\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortList v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      {{ item }}\n    </template>\n  </SortList>\n</template>\n\n<script>\nimport { SortList } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    SortList,\n  },\n  data() {\n    return {\n      selectedSort: 'Price asc',\n      sortValues: ['Relevance', 'Price asc', 'Price desc'],\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AA0CA;;;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,CAAkC;AACvD,YAAA,OAAO,EAAE,MAAM,IAAI;AACpB,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;QAEjB,MAAM,EAAE,IAAI,EAAE,YAAW,KAAM,QAAQ,CAAC,QAAQ,CAAA,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,CAAA;AAED;;;;AAIE;AACF,QAAA,MAAM,SAAU,GAAE,QAAQ,CAAiB,MACzC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAG,KAAM;YACvB,IAAI;AACJ,YAAA,UAAU,EAAE;AACV,gBAAA,gCAAgC,EAAE,IAAK,KAAI,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,CAAA;QAEA,OAAO;YACL,SAAS;YACT,YAAY;SACd,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"sort-picker-list.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 { PropType } from 'vue'\nimport type Vue 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 Picker item options.\n */\ninterface SortPickerItem {\n  item: Sort\n  cssClasses: VueCSSClasses\n  event: Partial<XEventsTypes>\n}\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 | typeof Vue>,\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', ['sort'])\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          'x-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 `value` 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 suggest, 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 #item=\"{ item, isSelected }\">Item: {{ item }}</template>\n  </SortPickerList>\n</template>\n\n<script>\nimport { SortPickerList } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    SortPickerList,\n  },\n  data() {\n    return { sortValues: ['Relevance', 'Price asc', 'Price desc'] }\n  },\n}\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortPickerList v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      {{ item }}\n    </template>\n  </SortPickerList>\n</template>\n\n<script>\nimport { SortPickerList } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    SortPickerList,\n  },\n  data() {\n    return {\n      selectedSort: 'Price asc',\n      sortValues: ['Relevance', 'Price asc', 'Price desc'],\n    }\n  },\n}\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>\nimport { SortPickerList } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    SortPickerList,\n  },\n  data() {\n    return { sortValues: ['Relevance', 'Price asc', 'Price desc'] }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","animation","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_normalizeClass","_withCtx","_renderSlot","_mergeProps"],"mappings":";;;;;AAqBc,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CArBd,iBAESC,CAAAA,CAAAA;AAEA,EAAA,OAAAC,SAAA,EAAqB,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IAC1B,GAAA,EAAA,KAAA;AAAA,IACA,KAAK,EAAA,oBAAA;AAAA,IAAA,WAAA,EAAA,aAAA;AANT,IAAA,IAAA,EAAA,MAAA;AAAA,GAAA,EAAA;;iBAUY,IAAI,CAAA,EAAAC,kBAAA;AAAA,QAAAC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,KAAA;AACJ,UAAA,OAAAL,SAAA,gBAAG,0BAAuB,EAAA;AAAA,YAChC,GAAA,EAAA,IAAA;AAAA,YACC,OAAMM,cAAO,CAAA,CAAA,UAAA,EAAA,IAAA,CAAA,WAAA,CAAA,CAAA;AAAA,YACb,WAAA,EAAA,oBAAA;AAAA,YACD,MAAK,EAAA,KAAA;AAAA,YAAA,cAAA,EAAA,IAAA,KAAA,IAAA,CAAA,YAAA,IAAA,IAAA;AAfX,YAAA,IAAA,EAAA,UAAA;AAAA,WAAA,EAAA;AAAA,YAAA,OAAA,EAAAC,OAAA,CAAA,MAAA;AAAA,cAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,KAAA,IAAA,CAAA,YAAA,EAAA,CAAA,EAAA,MAAA;;;;;;AAAA,eAAA,CAAA;AAAA,aAAA,CAAA;;;;AAAA,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"sort-picker-list.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 { PropType } from 'vue'\nimport type Vue 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 Picker item options.\n */\ninterface SortPickerItem {\n  item: Sort\n  cssClasses: VueCSSClasses\n  event: Partial<XEventsTypes>\n}\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 | typeof Vue>,\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          'x-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 `value` 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 suggest, 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 #item=\"{ item, isSelected }\">Item: {{ item }}</template>\n  </SortPickerList>\n</template>\n\n<script>\nimport { SortPickerList } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    SortPickerList,\n  },\n  data() {\n    return { sortValues: ['Relevance', 'Price asc', 'Price desc'] }\n  },\n}\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortPickerList v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      {{ item }}\n    </template>\n  </SortPickerList>\n</template>\n\n<script>\nimport { SortPickerList } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    SortPickerList,\n  },\n  data() {\n    return {\n      selectedSort: 'Price asc',\n      sortValues: ['Relevance', 'Price asc', 'Price desc'],\n    }\n  },\n}\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>\nimport { SortPickerList } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    SortPickerList,\n  },\n  data() {\n    return { sortValues: ['Relevance', 'Price asc', 'Price desc'] }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","animation","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_normalizeClass","_withCtx","_renderSlot","_mergeProps"],"mappings":";;;;;AAqBc,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CArBd,iBAESC,CAAAA,CAAAA;AAEA,EAAA,OAAAC,SAAA,EAAqB,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IAC1B,GAAA,EAAA,KAAA;AAAA,IACA,KAAK,EAAA,oBAAA;AAAA,IAAA,WAAA,EAAA,aAAA;AANT,IAAA,IAAA,EAAA,MAAA;AAAA,GAAA,EAAA;;iBAUY,IAAI,CAAA,EAAAC,kBAAA;AAAA,QAAAC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,KAAA;AACJ,UAAA,OAAAL,SAAA,gBAAG,0BAAuB,EAAA;AAAA,YAChC,GAAA,EAAA,IAAA;AAAA,YACC,OAAMM,cAAO,CAAA,CAAA,UAAA,EAAA,IAAA,CAAA,WAAA,CAAA,CAAA;AAAA,YACb,WAAA,EAAA,oBAAA;AAAA,YACD,MAAK,EAAA,KAAA;AAAA,YAAA,cAAA,EAAA,IAAA,KAAA,IAAA,CAAA,YAAA,IAAA,IAAA;AAfX,YAAA,IAAA,EAAA,UAAA;AAAA,WAAA,EAAA;AAAA,YAAA,OAAA,EAAAC,OAAA,CAAA,MAAA;AAAA,cAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,KAAA,IAAA,CAAA,YAAA,EAAA,CAAA,EAAA,MAAA;;;;;;AAAA,eAAA,CAAA;AAAA,aAAA,CAAA;;;;AAAA,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

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

@@ -28,7 +28,7 @@ var _sfc_main = defineComponent({
     },
     setup(props) {
         const $x = use$x();
-        const { sort: selectedSort } = useState('search', ['sort']);
+        const { sort: selectedSort } = useState('search');
         watch(selectedSort, (value) => $x.emit('SelectedSortProvided', value), {
             immediate: true,
         });

package/js/x-modules/search/components/sort-picker-list.vue2.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 { PropType } from 'vue'\nimport type Vue 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 Picker item options.\n */\ninterface SortPickerItem {\n  item: Sort\n  cssClasses: VueCSSClasses\n  event: Partial<XEventsTypes>\n}\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 | typeof Vue>,\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', ['sort'])\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          'x-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 `value` 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 suggest, 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 #item=\"{ item, isSelected }\">Item: {{ item }}</template>\n  </SortPickerList>\n</template>\n\n<script>\nimport { SortPickerList } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    SortPickerList,\n  },\n  data() {\n    return { sortValues: ['Relevance', 'Price asc', 'Price desc'] }\n  },\n}\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortPickerList v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      {{ item }}\n    </template>\n  </SortPickerList>\n</template>\n\n<script>\nimport { SortPickerList } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    SortPickerList,\n  },\n  data() {\n    return {\n      selectedSort: 'Price asc',\n      sortValues: ['Relevance', 'Price asc', 'Price desc'],\n    }\n  },\n}\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>\nimport { SortPickerList } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    SortPickerList,\n  },\n  data() {\n    return { sortValues: ['Relevance', 'Price asc', 'Price desc'] }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AA6CA;;;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,CAAkC;AACvD,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,CAAA;AAEjB,QAAA,MAAM,EAAE,IAAI,EAAE,YAAW,EAAI,GAAE,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAA,CAAA;AAE1D,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,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,YAAY,EAAE,SAAS,YAAY,CAAC,KAAK;AAC1C,aAAA;AACD,YAAA,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAG,EAAG;SAClC,CAAC,CAAC,CACL,CAAA;QAEA,OAAO;YACL,SAAS;YACT,YAAY;SACd,CAAA;KACD;AACF,CAAA,CAAA;;;;"}
+{"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 { PropType } from 'vue'\nimport type Vue 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 Picker item options.\n */\ninterface SortPickerItem {\n  item: Sort\n  cssClasses: VueCSSClasses\n  event: Partial<XEventsTypes>\n}\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 | typeof Vue>,\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          'x-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 `value` 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 suggest, 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 #item=\"{ item, isSelected }\">Item: {{ item }}</template>\n  </SortPickerList>\n</template>\n\n<script>\nimport { SortPickerList } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    SortPickerList,\n  },\n  data() {\n    return { sortValues: ['Relevance', 'Price asc', 'Price desc'] }\n  },\n}\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortPickerList v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      {{ item }}\n    </template>\n  </SortPickerList>\n</template>\n\n<script>\nimport { SortPickerList } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    SortPickerList,\n  },\n  data() {\n    return {\n      selectedSort: 'Price asc',\n      sortValues: ['Relevance', 'Price asc', 'Price desc'],\n    }\n  },\n}\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>\nimport { SortPickerList } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    SortPickerList,\n  },\n  data() {\n    return { sortValues: ['Relevance', 'Price asc', 'Price desc'] }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AA6CA;;;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,CAAkC;AACvD,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,CAAA;QAEjB,MAAM,EAAE,IAAI,EAAE,YAAW,KAAM,QAAQ,CAAC,QAAQ,CAAA,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,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,YAAY,EAAE,SAAS,YAAY,CAAC,KAAK;AAC1C,aAAA;AACD,YAAA,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAG,EAAG;SAClC,CAAC,CAAC,CACL,CAAA;QAEA,OAAO;YACL,SAAS;YACT,YAAY;SACd,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"spellcheck-button.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', ['spellcheckedQuery'])\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<SpellcheckButton />\n```\n\n### Customizing its contents\n\n```vue\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```\n</docs>\n"],"names":["_openBlock","_createElementBlock"],"mappings":";;;;qBACE,IAQS,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SATX,IAGY,CAAA,iBAAA,IAAAA,SAAA,EAAA,EAAAC,kBAAA;AAAA,IAAA,QAAA;AAAA,IAAA;AAAA,MACR,GAAK,EAAA,CAAA;AAAA,MACL,GAAA,EAAA,IAAA;AAAA,MACC,KAAK,EAAA,qBAAA;AAAA,MAAA,WAAA,EAAA,gBAAA;AAEN,MAAA,OAAA,EAAA,MAAA,CAAmE,CARvE,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,KAAA;;;;;;;;AAAA,OAAA,CAAA;AAAA,KAAA;;;;;;;;;"}
+{"version":3,"file":"spellcheck-button.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<SpellcheckButton />\n```\n\n### Customizing its contents\n\n```vue\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```\n</docs>\n"],"names":["_openBlock","_createElementBlock"],"mappings":";;;;qBACE,IAQS,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SATX,IAGY,CAAA,iBAAA,IAAAA,SAAA,EAAA,EAAAC,kBAAA;AAAA,IAAA,QAAA;AAAA,IAAA;AAAA,MACR,GAAK,EAAA,CAAA;AAAA,MACL,GAAA,EAAA,IAAA;AAAA,MACC,KAAK,EAAA,qBAAA;AAAA,MAAA,WAAA,EAAA,gBAAA;AAEN,MAAA,OAAA,EAAA,MAAA,CAAmE,CARvE,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,KAAA;;;;;;;;AAAA,OAAA,CAAA;AAAA,KAAA;;;;;;;;;"}

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

@@ -21,7 +21,7 @@ var _sfc_main = defineComponent({
          *
          * @public
          */
-        const { spellcheckedQuery } = useState('search', ['spellcheckedQuery']);
+        const { spellcheckedQuery } = useState('search');
         /**
          * Generates the {@link WireMetadata} object omitting the moduleName.
          *

package/js/x-modules/search/components/spellcheck-button.vue2.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', ['spellcheckedQuery'])\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<SpellcheckButton />\n```\n\n### Customizing its contents\n\n```vue\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```\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,CAAA;AAEjB,QAAA,MAAM,EAAG,GAAE,GAAG,EAAc,CAAA;AAE5B;;;;AAIE;AACF,QAAA,MAAM,EAAE,iBAAgB,EAAI,GAAE,QAAQ,CAAC,QAAQ,EAAE,CAAC,mBAAmB,CAAC,CAAA,CAAA;AAEtE;;;;;AAKE;AACF,QAAA,MAAM,mBAAoB,GAAE,OAAyC;YACnE,MAAM,EAAE,EAAE,CAAC,KAAoB;AAC/B,YAAA,OAAO,EAAE,YAAY;AACtB,SAAA,CAAA,CAAA;AAED;;;;AAIE;QACF,MAAM,UAAS,GAAI,MAAM;AACvB,YAAA,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,iBAAiB,CAAC,KAAe,EAAE,mBAAmB,EAAE,CAAA,CAAA;AACtF,YAAA,EAAE,CAAC,IAAI,CACL,6BAA6B,EAC7B,iBAAiB,CAAC,KAAe,EACjC,mBAAmB,EAAE,CACvB,CAAA;AACF,SAAA,CAAA;QAEA,OAAO;YACL,EAAE;YACF,iBAAiB;YACjB,UAAU;SACZ,CAAA;KACD;AACF,CAAA,CAAA;;;;"}
+{"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<SpellcheckButton />\n```\n\n### Customizing its contents\n\n```vue\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```\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,CAAA;AAEjB,QAAA,MAAM,EAAG,GAAE,GAAG,EAAc,CAAA;AAE5B;;;;AAIE;QACF,MAAM,EAAE,iBAAgB,KAAM,QAAQ,CAAC,QAAQ,CAAA,CAAA;AAE/C;;;;;AAKE;AACF,QAAA,MAAM,mBAAoB,GAAE,OAAyC;YACnE,MAAM,EAAE,EAAE,CAAC,KAAoB;AAC/B,YAAA,OAAO,EAAE,YAAY;AACtB,SAAA,CAAA,CAAA;AAED;;;;AAIE;QACF,MAAM,UAAS,GAAI,MAAM;AACvB,YAAA,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,iBAAiB,CAAC,KAAe,EAAE,mBAAmB,EAAE,CAAA,CAAA;AACtF,YAAA,EAAE,CAAC,IAAI,CACL,6BAA6B,EAC7B,iBAAiB,CAAC,KAAe,EACjC,mBAAmB,EAAE,CACvB,CAAA;AACF,SAAA,CAAA;QAEA,OAAO;YACL,EAAE;YACF,iBAAiB;YACjB,UAAU;SACZ,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"spellcheck.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', ['query', 'spellcheckedQuery'])\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<Spellcheck />\n```\n\n### Customizing its contents\n\n```vue\n<Spellcheck>\n  <template #default=\"{ query, spellcheckedQuery }\">\n    No results found for '{{ query }}'. We show you results for '{{ spellcheckedQuery }}'\n  </template>\n</Spellcheck>\n\n<script>\nimport { Spellcheck } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    Spellcheck,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","query","_renderSlot","_normalizeProps","_guardReactiveProps","_createCommentVNode"],"mappings":";;;;MACgC,UAAM,GAAA;AAAA,EAAe,GAAA,EAAA,CAAA;AAAA,EAAA,KAAA,EAAA,cAAA;;;AAAnD,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAEM,QAFN,KAEM,EAAA,QAAA,EAAA;AADJ,EAAA,OAAA,IAAA,CAAA,iBAAA,IAAAA,SAAA,8BAA+CC,UAAQ,EAAA;AAAA,IAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,KAAA,EAAA,IAAA,CAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,CAAA,iBAAA,EAAA,CAAA,CAAA,EAAA,MAAA;;;;;;AAF3D,KAAA,CAAA;AAAA,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"spellcheck.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<Spellcheck />\n```\n\n### Customizing its contents\n\n```vue\n<Spellcheck>\n  <template #default=\"{ query, spellcheckedQuery }\">\n    No results found for '{{ query }}'. We show you results for '{{ spellcheckedQuery }}'\n  </template>\n</Spellcheck>\n\n<script>\nimport { Spellcheck } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    Spellcheck,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","query","_renderSlot","_normalizeProps","_guardReactiveProps","_createCommentVNode"],"mappings":";;;;MACgC,UAAM,GAAA;AAAA,EAAe,GAAA,EAAA,CAAA;AAAA,EAAA,KAAA,EAAA,cAAA;;;AAAnD,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAEM,QAFN,KAEM,EAAA,QAAA,EAAA;AADJ,EAAA,OAAA,IAAA,CAAA,iBAAA,IAAAA,SAAA,8BAA+CC,UAAQ,EAAA;AAAA,IAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,KAAA,EAAA,IAAA,CAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,CAAA,iBAAA,EAAA,CAAA,CAAA,EAAA,MAAA;;;;;;AAF3D,KAAA,CAAA;AAAA,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

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

@@ -21,7 +21,7 @@ var _sfc_main = defineComponent({
          *
          * @public
          */
-        const { query, spellcheckedQuery } = useState('search', ['query', 'spellcheckedQuery']);
+        const { query, spellcheckedQuery } = useState('search');
         return {
             query,
             spellcheckedQuery,

package/js/x-modules/search/components/spellcheck.vue2.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', ['query', 'spellcheckedQuery'])\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<Spellcheck />\n```\n\n### Customizing its contents\n\n```vue\n<Spellcheck>\n  <template #default=\"{ query, spellcheckedQuery }\">\n    No results found for '{{ query }}'. We show you results for '{{ spellcheckedQuery }}'\n  </template>\n</Spellcheck>\n\n<script>\nimport { Spellcheck } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    Spellcheck,\n  },\n}\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;AACF,QAAA,MAAM,EAAE,KAAK,EAAE,iBAAgB,EAAI,GAAE,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAA,CAAA;QAEtF,OAAO;YACL,KAAK;YACL,iBAAiB;SACnB,CAAA;KACD;AACF,CAAA,CAAA;;;;"}
+{"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<Spellcheck />\n```\n\n### Customizing its contents\n\n```vue\n<Spellcheck>\n  <template #default=\"{ query, spellcheckedQuery }\">\n    No results found for '{{ query }}'. We show you results for '{{ spellcheckedQuery }}'\n  </template>\n</Spellcheck>\n\n<script>\nimport { Spellcheck } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    Spellcheck,\n  },\n}\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,iBAAkB,EAAA,GAAI,QAAQ,CAAC,QAAQ,CAAA,CAAA;QAEtD,OAAO;YACL,KAAK;YACL,iBAAiB;SACnB,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"clear-search-input.vue.js","sources":["../../../../../src/x-modules/search-box/components/clear-search-input.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    class=\"x-clear-search-input x-button\"\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', ['query'])\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>\nimport { ClearSearchInput, SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'ClearSearchInputDemo',\n  components: {\n    ClearSearchInput,\n    SearchInput,\n  },\n}\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>\nimport { ClearSearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'ClearSearchInputDemo',\n  components: {\n    ClearSearchInput,\n  },\n}\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>\nimport { ClearSearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'ClearSearchInputDemo',\n  components: {\n    ClearSearchInput,\n  },\n  data() {\n    return {\n      message: '',\n    }\n  },\n}\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>\nimport { SearchInput, ClearSearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'ClearSearchInputDemo',\n  components: {\n    SearchInput,\n    ClearSearchInput,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_renderSlot"],"mappings":";;;;;AASoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AALT,EAAA,OAAAC,SAAA,EAAwB,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IAC/B,sBAAU,CAAoB,+BAAA,EAAA,IAAA,CAAA,cAAA,CAAA,CAAA;AAAA,IAAA,MAAA,EAAA,IAAA,CAAA,sBAAA;AALlC,IAAA,WAAA,EAAA,oBAAA;AAAA,GAAA,EAAA;aAAAC,OAQW,CAAA,MAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,EAAA,MAAA;;AARX,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"clear-search-input.vue.js","sources":["../../../../../src/x-modules/search-box/components/clear-search-input.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    class=\"x-clear-search-input x-button\"\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>\nimport { ClearSearchInput, SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'ClearSearchInputDemo',\n  components: {\n    ClearSearchInput,\n    SearchInput,\n  },\n}\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>\nimport { ClearSearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'ClearSearchInputDemo',\n  components: {\n    ClearSearchInput,\n  },\n}\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>\nimport { ClearSearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'ClearSearchInputDemo',\n  components: {\n    ClearSearchInput,\n  },\n  data() {\n    return {\n      message: '',\n    }\n  },\n}\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>\nimport { SearchInput, ClearSearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'ClearSearchInputDemo',\n  components: {\n    SearchInput,\n    ClearSearchInput,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_renderSlot"],"mappings":";;;;;AASoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AALT,EAAA,OAAAC,SAAA,EAAwB,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IAC/B,sBAAU,CAAoB,+BAAA,EAAA,IAAA,CAAA,cAAA,CAAA,CAAA;AAAA,IAAA,MAAA,EAAA,IAAA,CAAA,sBAAA;AALlC,IAAA,WAAA,EAAA,oBAAA;AAAA,GAAA,EAAA;aAAAC,OAQW,CAAA,MAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,EAAA,MAAA;;AARX,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

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

@@ -19,7 +19,7 @@ var _sfc_main = defineComponent({
     components: { BaseEventButton },
     xModule: searchBoxXModule.name,
     setup() {
-        const { query } = useState('searchBox', ['query']);
+        const { query } = useState('searchBox');
         /**
          * The events dictionary that are going to be emitted when the button is pressed.
          *

package/js/x-modules/search-box/components/clear-search-input.vue2.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 x-button\"\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', ['query'])\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>\nimport { ClearSearchInput, SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'ClearSearchInputDemo',\n  components: {\n    ClearSearchInput,\n    SearchInput,\n  },\n}\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>\nimport { ClearSearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'ClearSearchInputDemo',\n  components: {\n    ClearSearchInput,\n  },\n}\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>\nimport { ClearSearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'ClearSearchInputDemo',\n  components: {\n    ClearSearchInput,\n  },\n  data() {\n    return {\n      message: '',\n    }\n  },\n}\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>\nimport { SearchInput, ClearSearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'ClearSearchInputDemo',\n  components: {\n    SearchInput,\n    ClearSearchInput,\n  },\n}\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;AACH,QAAA,MAAM,EAAE,KAAM,EAAA,GAAI,QAAQ,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,CAAA,CAAA;AAEjD;;;;AAIE;QACF,MAAM,sBAAuB,GAAE,GAAG,CAAC;AACjC,YAAA,+BAA+B,EAAE,SAAS;AAC3C,SAAA,CAAA,CAAA;AAED,QAAA,MAAM,YAAW,GAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,KAAK,CAAC,MAAO,KAAI,CAAC,CAAA,CAAA;AAE5D,QAAA,MAAM,cAAe,GAAE,QAAQ,CAAgB,OAAO;YACpD,uCAAuC,EAAE,YAAY,CAAC,KAAK;AAC5D,SAAA,CAAC,CAAA,CAAA;QAEF,OAAO;YACL,cAAc;YACd,sBAAsB;SACxB,CAAA;KACD;AACF,CAAA,CAAA;;;;"}
+{"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 x-button\"\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>\nimport { ClearSearchInput, SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'ClearSearchInputDemo',\n  components: {\n    ClearSearchInput,\n    SearchInput,\n  },\n}\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>\nimport { ClearSearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'ClearSearchInputDemo',\n  components: {\n    ClearSearchInput,\n  },\n}\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>\nimport { ClearSearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'ClearSearchInputDemo',\n  components: {\n    ClearSearchInput,\n  },\n  data() {\n    return {\n      message: '',\n    }\n  },\n}\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>\nimport { SearchInput, ClearSearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'ClearSearchInputDemo',\n  components: {\n    SearchInput,\n    ClearSearchInput,\n  },\n}\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,EAAI,GAAE,QAAQ,CAAC,WAAW,CAAA,CAAA;AAEtC;;;;AAIE;QACF,MAAM,sBAAuB,GAAE,GAAG,CAAC;AACjC,YAAA,+BAA+B,EAAE,SAAS;AAC3C,SAAA,CAAA,CAAA;AAED,QAAA,MAAM,YAAW,GAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,KAAK,CAAC,MAAO,KAAI,CAAC,CAAA,CAAA;AAE5D,QAAA,MAAM,cAAe,GAAE,QAAQ,CAAgB,OAAO;YACpD,uCAAuC,EAAE,YAAY,CAAC,KAAK;AAC5D,SAAA,CAAC,CAAA,CAAA;QAEF,OAAO;YACL,cAAc;YACd,sBAAsB;SACxB,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"search-button.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-button.vue"],"sourcesContent":["<template>\n  <button\n    ref=\"buttonRef\"\n    class=\"x-search-button x-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=\"x-icon\">⌕</span></slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport type { ComputedRef } from 'vue'\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: ComputedRef<string> = useState('searchBox', ['query']).query\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>\nimport { SearchButton } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'SearchButtonDemo',\n  components: {\n    SearchButton,\n  },\n}\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>\nimport { SearchButton } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'SearchButtonDemo',\n  components: {\n    SearchButton,\n  },\n}\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>\nimport { SearchInput, SearchButton } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'SearchButtonDemo',\n  components: {\n    SearchInput,\n    SearchButton,\n  },\n  data() {\n    return {\n      message: '',\n    }\n  },\n}\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 @UserAcceptedAQuery=\"message = 'looking for results'\">Search</SearchButton>\n    </div>\n    {{ message }}\n  </div>\n</template>\n\n<script>\nimport { SearchButton, SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'SearchButtonDemo',\n  components: {\n    SearchButton,\n    SearchInput,\n  },\n  data() {\n    return {\n      message: '',\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass"],"mappings":";;;;;;;;;;;SAEQ,WAAW,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SACVA,SAHT,EAAA,EAAAC,kBAAA;AAAA,IAGU,QAAA;AAAA,IAA0B;AAAA,MAEhC,GAAA,EAAA,WAAA;AAAA,MACC,OAAKC,cAAE,CAAA,CAAA,0BAAA,EAAA,IAAA,CAAA,cAAA,CAAA,CAAA;AAAA,MAAA,WAAA,EAAA,eAAA;MAGR,OAA0C,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,KAAA;;;;;;;;;;;;;;"}
+{"version":3,"file":"search-button.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-button.vue"],"sourcesContent":["<template>\n  <button\n    ref=\"buttonRef\"\n    class=\"x-search-button x-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=\"x-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>\nimport { SearchButton } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'SearchButtonDemo',\n  components: {\n    SearchButton,\n  },\n}\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>\nimport { SearchButton } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'SearchButtonDemo',\n  components: {\n    SearchButton,\n  },\n}\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>\nimport { SearchInput, SearchButton } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'SearchButtonDemo',\n  components: {\n    SearchInput,\n    SearchButton,\n  },\n  data() {\n    return {\n      message: '',\n    }\n  },\n}\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 @UserAcceptedAQuery=\"message = 'looking for results'\">Search</SearchButton>\n    </div>\n    {{ message }}\n  </div>\n</template>\n\n<script>\nimport { SearchButton, SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'SearchButtonDemo',\n  components: {\n    SearchButton,\n    SearchInput,\n  },\n  data() {\n    return {\n      message: '',\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass"],"mappings":";;;;;;;;;;;SAEQ,WAAW,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SACVA,SAHT,EAAA,EAAAC,kBAAA;AAAA,IAGU,QAAA;AAAA,IAA0B;AAAA,MAEhC,GAAA,EAAA,WAAA;AAAA,MACC,OAAKC,cAAE,CAAA,CAAA,0BAAA,EAAA,IAAA,CAAA,cAAA,CAAA,CAAA;AAAA,MAAA,WAAA,EAAA,eAAA;MAGR,OAA0C,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,KAAA;;;;;;;;;;;;;;"}

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

@@ -19,7 +19,7 @@ var _sfc_main = defineComponent({
     setup() {
         const $x = use$x();
         const buttonRef = ref(null);
-        const query = useState('searchBox', ['query']).query;
+        const { query } = useState('searchBox');
         const isQueryEmpty = computed(() => query.value.length === 0);
         const dynamicClasses = computed(() => ({
             'x-search-button--has-empty-query': isQueryEmpty.value,

package/js/x-modules/search-box/components/search-button.vue2.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 x-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=\"x-icon\">⌕</span></slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport type { ComputedRef } from 'vue'\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: ComputedRef<string> = useState('searchBox', ['query']).query\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>\nimport { SearchButton } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'SearchButtonDemo',\n  components: {\n    SearchButton,\n  },\n}\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>\nimport { SearchButton } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'SearchButtonDemo',\n  components: {\n    SearchButton,\n  },\n}\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>\nimport { SearchInput, SearchButton } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'SearchButtonDemo',\n  components: {\n    SearchInput,\n    SearchButton,\n  },\n  data() {\n    return {\n      message: '',\n    }\n  },\n}\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 @UserAcceptedAQuery=\"message = 'looking for results'\">Search</SearchButton>\n    </div>\n    {{ message }}\n  </div>\n</template>\n\n<script>\nimport { SearchButton, SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'SearchButtonDemo',\n  components: {\n    SearchButton,\n    SearchInput,\n  },\n  data() {\n    return {\n      message: '',\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAsBA;;;;;;;;;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,CAAA;AAEjB,QAAA,MAAM,SAAQ,GAAI,GAAG,CAAqB,IAAI,CAAA,CAAA;AAE9C,QAAA,MAAM,KAAK,GAAwB,QAAQ,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,KAAI,CAAA;AAExE,QAAA,MAAM,YAAW,GAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,KAAK,CAAC,MAAO,KAAI,CAAC,CAAA,CAAA;AAE5D,QAAA,MAAM,cAAe,GAAE,QAAQ,CAAgB,OAAO;YACpD,kCAAkC,EAAE,YAAY,CAAC,KAAK;AACvD,SAAA,CAAC,CAAA,CAAA;AAEF;;;;;AAKE;AACF,QAAA,SAAS,mBAAmB,GAAA;YAC1B,OAAO;gBACL,MAAM,EAAE,SAAS,CAAC,KAAK;AACvB,gBAAA,OAAO,EAAE,YAAY;aACvB,CAAA;SACF;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,CAAA;AAChE,gBAAA,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,KAAK,CAAC,KAAK,EAAE,mBAAmB,EAAE,CAAA,CAAA;AACvE,aAAA;SACF;QAEA,OAAO;YACL,cAAc;YACd,SAAS;YACT,UAAU;SACZ,CAAA;KACD;AACF,CAAA,CAAA;;;;"}
+{"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 x-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=\"x-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>\nimport { SearchButton } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'SearchButtonDemo',\n  components: {\n    SearchButton,\n  },\n}\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>\nimport { SearchButton } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'SearchButtonDemo',\n  components: {\n    SearchButton,\n  },\n}\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>\nimport { SearchInput, SearchButton } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'SearchButtonDemo',\n  components: {\n    SearchInput,\n    SearchButton,\n  },\n  data() {\n    return {\n      message: '',\n    }\n  },\n}\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 @UserAcceptedAQuery=\"message = 'looking for results'\">Search</SearchButton>\n    </div>\n    {{ message }}\n  </div>\n</template>\n\n<script>\nimport { SearchButton, SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'SearchButtonDemo',\n  components: {\n    SearchButton,\n    SearchInput,\n  },\n  data() {\n    return {\n      message: '',\n    }\n  },\n}\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,CAAA;AAEjB,QAAA,MAAM,SAAQ,GAAI,GAAG,CAAqB,IAAI,CAAA,CAAA;QAE9C,MAAM,EAAE,KAAI,EAAI,GAAE,QAAQ,CAAC,WAAW,CAAA,CAAA;AAEtC,QAAA,MAAM,YAAW,GAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,KAAK,CAAC,MAAO,KAAI,CAAC,CAAA,CAAA;AAE5D,QAAA,MAAM,cAAe,GAAE,QAAQ,CAAgB,OAAO;YACpD,kCAAkC,EAAE,YAAY,CAAC,KAAK;AACvD,SAAA,CAAC,CAAA,CAAA;AAEF;;;;;AAKE;AACF,QAAA,SAAS,mBAAmB,GAAA;YAC1B,OAAO;gBACL,MAAM,EAAE,SAAS,CAAC,KAAK;AACvB,gBAAA,OAAO,EAAE,YAAY;aACvB,CAAA;SACF;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,CAAA;AAChE,gBAAA,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,KAAK,CAAC,KAAK,EAAE,mBAAmB,EAAE,CAAA,CAAA;AACvE,aAAA;SACF;QAEA,OAAO;YACL,cAAc;YACd,SAAS;YACT,UAAU;SACZ,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"search-input-placeholder.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-input-placeholder.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"isVisible\"\n    class=\"x-input-placeholder x-search-input-placeholder\"\n    mode=\"out-in\"\n  >\n    <span :key=\"message\" data-test=\"search-input-placeholder\">\n      {{ message }}\n    </span>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, onBeforeUnmount, ref, watch } from 'vue'\nimport { animateTranslate } from '../../../components/animations/animate-translate/animate-translate.factory'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types'\nimport { searchBoxXModule } from '../x-module'\n\n/**.\n * This component renders an animated placeholder for the search input in the shape of a list of\n * iterating messages that can be configured to happen always or only when hovering the input\n *\n * @public\n */\nexport default defineComponent({\n  name: 'SearchInputPlaceholder',\n  xModule: searchBoxXModule.name,\n  props: {\n    /**\n     * List of messages to animate.\n     *\n     * @public\n     */\n    messages: {\n      type: Array as PropType<string[]>,\n      required: true,\n    },\n    /**\n     * Animation component used for the messages.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: () => animateTranslate('bottom-to-top'),\n    },\n    /**\n     * Time in milliseconds during which each message is visible.\n     *\n     * @public\n     */\n    animationIntervalMs: {\n      type: Number,\n      default: 1500,\n    },\n    /**\n     * Whether the messages animation is active only when hovering the search input or always.\n     *\n     * @public\n     */\n    animateOnlyOnHover: Boolean,\n  },\n  setup(props) {\n    const $x = use$x()\n\n    /**.\n     * The search box written query\n     *\n     * @internal\n     */\n    const { query } = useState('searchBox', ['query'])\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>\nimport { SearchInput, SearchInputPlaceholder } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'SearchInputPlaceholderDemo',\n  components: {\n    SearchInput,\n    SearchInputPlaceholder,\n  },\n  data: function () {\n    return {\n      placeholderMessages: [\n        'Find shirts',\n        'Find shoes',\n        'Find watches',\n        'Find handbags',\n        'Find sunglasses',\n      ],\n    }\n  },\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>\nimport { SearchInput, SearchInputPlaceholder } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'SearchInputPlaceholderDemo',\n  components: {\n    SearchInput,\n    SearchInputPlaceholder,\n  },\n  data: function () {\n    return {\n      placeholderMessages: [\n        'Find shirts',\n        'Find shoes',\n        'Find watches',\n        'Find handbags',\n        'Find sunglasses',\n      ],\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["animation","_openBlock","_createBlock","_resolveDynamicComponent","message","_createElementBlock","_toDisplayString","_createCommentVNode"],"mappings":";;;;;;AACE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EADF,MAESA,EAAAA,MAAAA,EAAAA,KAAAA,EAAAA,QAAAA,EAAAA;AAFT,EAAA,OAAA,IAAA,CAAA,SAAA,IAAAC,SAAA,EAI0D,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IACtD,GAAI,EAAA,CAAA;AAAA,IAAA,KAAA,EAAA,gDAAA;AALR,IAAA,IAAA,EAAA,QAAA;AAAA,GAAA,EAAA;aAOgBC,OAAO,CAAA,MAAA;AAAA,OAAAH,SAAA,EAAY,EAAAI,kBAAA;AAAA,QAAA,MAAA;AAAA,QAA0B;AAAA,UAAA,GAAA,EAAA,IAAA,CAAA,OAAA;;AAP7D,SAAA;AAAA,QAAAC,eAAA,CAAA,IAAA,CAAA,OAAA,CAAA;AAAA,QAAA,CAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"search-input-placeholder.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-input-placeholder.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"isVisible\"\n    class=\"x-input-placeholder x-search-input-placeholder\"\n    mode=\"out-in\"\n  >\n    <span :key=\"message\" data-test=\"search-input-placeholder\">\n      {{ message }}\n    </span>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, onBeforeUnmount, ref, watch } from 'vue'\nimport { animateTranslate } from '../../../components/animations/animate-translate/animate-translate.factory'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types'\nimport { searchBoxXModule } from '../x-module'\n\n/**.\n * This component renders an animated placeholder for the search input in the shape of a list of\n * iterating messages that can be configured to happen always or only when hovering the input\n *\n * @public\n */\nexport default defineComponent({\n  name: 'SearchInputPlaceholder',\n  xModule: searchBoxXModule.name,\n  props: {\n    /**\n     * List of messages to animate.\n     *\n     * @public\n     */\n    messages: {\n      type: Array as PropType<string[]>,\n      required: true,\n    },\n    /**\n     * Animation component used for the messages.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: () => animateTranslate('bottom-to-top'),\n    },\n    /**\n     * Time in milliseconds during which each message is visible.\n     *\n     * @public\n     */\n    animationIntervalMs: {\n      type: Number,\n      default: 1500,\n    },\n    /**\n     * Whether the messages animation is active only when hovering the search input or always.\n     *\n     * @public\n     */\n    animateOnlyOnHover: Boolean,\n  },\n  setup(props) {\n    const $x = use$x()\n\n    /**.\n     * The search box written query\n     *\n     * @internal\n     */\n    const { query } = useState('searchBox')\n\n    /**.\n     * The search box hover status\n     *\n     * @internal\n     */\n    const isSearchBoxHovered = ref(false)\n\n    /**.\n     * The search box focus status\n     *\n     * @internal\n     */\n    const isSearchBoxFocused = ref(false)\n\n    /**\n     * The index used to point to the current animation message in the list.\n     *\n     * @internal\n     */\n    const animationMessageIndex = ref(0)\n\n    /**\n     * The interval used for the animation.\n     *\n     * @internal\n     */\n    const animationInterval = ref<number | undefined>(undefined)\n\n    /**\n     * The visibility state of the component.\n     *\n     * @returns The visibility state based on the search input state (query & focus).\n     *\n     * @internal\n     */\n    const isVisible = computed((): boolean => !query.value && !isSearchBoxFocused.value)\n\n    /**\n     * The animation state of the component.\n     *\n     * @returns Whether the animation is active or not.\n     *\n     * @internal\n     */\n    const isBeingAnimated = computed(\n      (): boolean => isVisible.value && (!props.animateOnlyOnHover || isSearchBoxHovered.value),\n    )\n\n    /**\n     * The current placeholder message.\n     *\n     * @returns The message to display as placeholder at any moment.\n     *\n     * @internal\n     */\n    const message = computed((): string | undefined =>\n      isBeingAnimated.value ? props.messages[animationMessageIndex.value] : props.messages[0],\n    )\n\n    /**\n     * Clears the interval used for the animation.\n     *\n     * @internal\n     */\n    const stopAnimationInterval = (): void => {\n      if (animationInterval.value) {\n        clearInterval(animationInterval.value)\n        animationInterval.value = undefined\n      }\n    }\n\n    /**\n     * Increments animation message index; if the new index exceeds the messages list length, it is\n     * reset to 0.\n     *\n     * @internal\n     */\n    const incrementAnimationMessageIndex = (): void => {\n      animationMessageIndex.value = (animationMessageIndex.value + 1) % props.messages.length\n    }\n\n    $x.on('UserHoveredInSearchBox', false).subscribe(() => (isSearchBoxHovered.value = true))\n\n    $x.on('UserHoveredOutSearchBox', false).subscribe(() => (isSearchBoxHovered.value = false))\n\n    $x.on('UserFocusedSearchBox', false).subscribe(() => (isSearchBoxFocused.value = true))\n\n    $x.on('UserBlurredSearchBox', false).subscribe(() => (isSearchBoxFocused.value = false))\n\n    /**\n     * Starts or stops the animation depending on the current animation state.\n     *\n     * @internal\n     */\n    const resetAnimation = (): void => {\n      stopAnimationInterval()\n      if (isBeingAnimated.value) {\n        animationInterval.value = window.setInterval((): void => {\n          incrementAnimationMessageIndex()\n        }, props.animationIntervalMs)\n      }\n    }\n\n    watch(() => 'animationIntervalMs', resetAnimation)\n\n    /**\n     * Resets the animation message index to zero.\n     *\n     * @internal\n     */\n    const resetAnimationMessageIndex = (): void => {\n      animationMessageIndex.value = 0\n    }\n\n    watch(\n      () => props.messages,\n      () => {\n        resetAnimationMessageIndex()\n        resetAnimation()\n      },\n      { deep: true },\n    )\n\n    /**\n     * Sets the animation message index with the right value for the next future iteration when the\n     * current one stops,assuring the user will see always a new message on each animation state\n     * change.\n     *\n     * @internal\n     */\n    watch(\n      isBeingAnimated,\n      () => {\n        if (!isBeingAnimated.value) {\n          if (props.animateOnlyOnHover) {\n            resetAnimationMessageIndex()\n          }\n          incrementAnimationMessageIndex()\n        }\n        resetAnimation()\n      },\n      { immediate: true },\n    )\n\n    onBeforeUnmount(() => {\n      stopAnimationInterval()\n    })\n\n    return {\n      isVisible,\n      message,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-search-input-placeholder-container {\n  position: relative;\n}\n</style>\n\n<style lang=\"css\" scoped>\n.x-search-input-placeholder {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## See it in action\n\nHere a basic example of how the animated search input placeholder is rendered.\n\n```vue live\n<template>\n  <div style=\"position: relative; overflow: hidden;\">\n    <SearchInputPlaceholder\n      style=\"position: absolute; height: 100%; pointer-events: none;\"\n      :messages=\"placeholderMessages\"\n    />\n    <SearchInput />\n  </div>\n</template>\n\n<script>\nimport { SearchInput, SearchInputPlaceholder } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'SearchInputPlaceholderDemo',\n  components: {\n    SearchInput,\n    SearchInputPlaceholder,\n  },\n  data: function () {\n    return {\n      placeholderMessages: [\n        'Find shirts',\n        'Find shoes',\n        'Find watches',\n        'Find handbags',\n        'Find sunglasses',\n      ],\n    }\n  },\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>\nimport { SearchInput, SearchInputPlaceholder } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'SearchInputPlaceholderDemo',\n  components: {\n    SearchInput,\n    SearchInputPlaceholder,\n  },\n  data: function () {\n    return {\n      placeholderMessages: [\n        'Find shirts',\n        'Find shoes',\n        'Find watches',\n        'Find handbags',\n        'Find sunglasses',\n      ],\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["animation","_openBlock","_createBlock","_resolveDynamicComponent","message","_createElementBlock","_toDisplayString","_createCommentVNode"],"mappings":";;;;;;AACE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EADF,MAESA,EAAAA,MAAAA,EAAAA,KAAAA,EAAAA,QAAAA,EAAAA;AAFT,EAAA,OAAA,IAAA,CAAA,SAAA,IAAAC,SAAA,EAI0D,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IACtD,GAAI,EAAA,CAAA;AAAA,IAAA,KAAA,EAAA,gDAAA;AALR,IAAA,IAAA,EAAA,QAAA;AAAA,GAAA,EAAA;aAOgBC,OAAO,CAAA,MAAA;AAAA,OAAAH,SAAA,EAAY,EAAAI,kBAAA;AAAA,QAAA,MAAA;AAAA,QAA0B;AAAA,UAAA,GAAA,EAAA,IAAA,CAAA,OAAA;;AAP7D,SAAA;AAAA,QAAAC,eAAA,CAAA,IAAA,CAAA,OAAA,CAAA;AAAA,QAAA,CAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

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

@@ -56,7 +56,7 @@ var _sfc_main = defineComponent({
          *
          * @internal
          */
-        const { query } = useState('searchBox', ['query']);
+        const { query } = useState('searchBox');
         /**.
          * The search box hover status
          *

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

@@ -1 +1 @@
-{"version":3,"file":"search-input-placeholder.vue2.js","sources":["../../../../../src/x-modules/search-box/components/search-input-placeholder.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"isVisible\"\n    class=\"x-input-placeholder x-search-input-placeholder\"\n    mode=\"out-in\"\n  >\n    <span :key=\"message\" data-test=\"search-input-placeholder\">\n      {{ message }}\n    </span>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, onBeforeUnmount, ref, watch } from 'vue'\nimport { animateTranslate } from '../../../components/animations/animate-translate/animate-translate.factory'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types'\nimport { searchBoxXModule } from '../x-module'\n\n/**.\n * This component renders an animated placeholder for the search input in the shape of a list of\n * iterating messages that can be configured to happen always or only when hovering the input\n *\n * @public\n */\nexport default defineComponent({\n  name: 'SearchInputPlaceholder',\n  xModule: searchBoxXModule.name,\n  props: {\n    /**\n     * List of messages to animate.\n     *\n     * @public\n     */\n    messages: {\n      type: Array as PropType<string[]>,\n      required: true,\n    },\n    /**\n     * Animation component used for the messages.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: () => animateTranslate('bottom-to-top'),\n    },\n    /**\n     * Time in milliseconds during which each message is visible.\n     *\n     * @public\n     */\n    animationIntervalMs: {\n      type: Number,\n      default: 1500,\n    },\n    /**\n     * Whether the messages animation is active only when hovering the search input or always.\n     *\n     * @public\n     */\n    animateOnlyOnHover: Boolean,\n  },\n  setup(props) {\n    const $x = use$x()\n\n    /**.\n     * The search box written query\n     *\n     * @internal\n     */\n    const { query } = useState('searchBox', ['query'])\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>\nimport { SearchInput, SearchInputPlaceholder } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'SearchInputPlaceholderDemo',\n  components: {\n    SearchInput,\n    SearchInputPlaceholder,\n  },\n  data: function () {\n    return {\n      placeholderMessages: [\n        'Find shirts',\n        'Find shoes',\n        'Find watches',\n        'Find handbags',\n        'Find sunglasses',\n      ],\n    }\n  },\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>\nimport { SearchInput, SearchInputPlaceholder } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'SearchInputPlaceholderDemo',\n  components: {\n    SearchInput,\n    SearchInputPlaceholder,\n  },\n  data: function () {\n    return {\n      placeholderMessages: [\n        'Find shirts',\n        'Find shoes',\n        'Find watches',\n        'Find handbags',\n        'Find sunglasses',\n      ],\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;AAsBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,wBAAwB;IAC9B,OAAO,EAAE,gBAAgB,CAAC,IAAI;AAC9B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,KAA2B;AACjC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,MAAM,gBAAgB,CAAC,eAAe,CAAC;AACjD,SAAA;AACD;;;;AAIE;AACF,QAAA,mBAAmB,EAAE;AACnB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,kBAAkB,EAAE,OAAO;AAC5B,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;AAEjB;;;;AAIE;AACF,QAAA,MAAM,EAAE,KAAM,EAAA,GAAI,QAAQ,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,CAAA,CAAA;AAEjD;;;;AAIE;AACF,QAAA,MAAM,qBAAqB,GAAG,CAAC,KAAK,CAAA,CAAA;AAEpC;;;;AAIE;AACF,QAAA,MAAM,qBAAqB,GAAG,CAAC,KAAK,CAAA,CAAA;AAEpC;;;;AAIE;AACF,QAAA,MAAM,qBAAoB,GAAI,GAAG,CAAC,CAAC,CAAA,CAAA;AAEnC;;;;AAIE;AACF,QAAA,MAAM,iBAAkB,GAAE,GAAG,CAAqB,SAAS,CAAA,CAAA;AAE3D;;;;;;AAME;AACF,QAAA,MAAM,SAAU,GAAE,QAAQ,CAAC,MAAe,CAAC,KAAK,CAAC,KAAI,IAAK,CAAC,kBAAkB,CAAC,KAAK,CAAA,CAAA;AAEnF;;;;;;AAME;QACF,MAAM,eAAc,GAAI,QAAQ,CAC9B,MAAe,SAAS,CAAC,KAAI,KAAM,CAAC,KAAK,CAAC,kBAAmB,IAAG,kBAAkB,CAAC,KAAK,CAAC,CAC3F,CAAA;AAEA;;;;;;AAME;AACF,QAAA,MAAM,OAAM,GAAI,QAAQ,CAAC,MACvB,eAAe,CAAC,KAAM,GAAE,KAAK,CAAC,QAAQ,CAAC,qBAAqB,CAAC,KAAK,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CACzF,CAAA;AAEA;;;;AAIE;QACF,MAAM,qBAAsB,GAAE,MAAY;YACxC,IAAI,iBAAiB,CAAC,KAAK,EAAE;AAC3B,gBAAA,aAAa,CAAC,iBAAiB,CAAC,KAAK,CAAA,CAAA;AACrC,gBAAA,iBAAiB,CAAC,KAAM,GAAE,SAAQ,CAAA;AACpC,aAAA;AACF,SAAA,CAAA;AAEA;;;;;AAKE;QACF,MAAM,iCAAiC,MAAY;AACjD,YAAA,qBAAqB,CAAC,QAAQ,CAAC,qBAAqB,CAAC,KAAM,GAAE,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,MAAK,CAAA;AACxF,SAAA,CAAA;QAEA,EAAE,CAAC,EAAE,CAAC,wBAAwB,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,OAAO,kBAAkB,CAAC,KAAM,GAAE,IAAI,CAAC,CAAA,CAAA;QAExF,EAAE,CAAC,EAAE,CAAC,yBAAyB,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,OAAO,kBAAkB,CAAC,QAAQ,KAAK,CAAC,CAAA,CAAA;QAE1F,EAAE,CAAC,EAAE,CAAC,sBAAsB,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,OAAO,kBAAkB,CAAC,KAAM,GAAE,IAAI,CAAC,CAAA,CAAA;QAEtF,EAAE,CAAC,EAAE,CAAC,sBAAsB,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,OAAO,kBAAkB,CAAC,QAAQ,KAAK,CAAC,CAAA,CAAA;AAEvF;;;;AAIE;QACF,MAAM,cAAe,GAAE,MAAY;AACjC,YAAA,qBAAqB,EAAC,CAAA;YACtB,IAAI,eAAe,CAAC,KAAK,EAAE;gBACzB,iBAAiB,CAAC,KAAM,GAAE,MAAM,CAAC,WAAW,CAAC,MAAY;AACvD,oBAAA,8BAA8B,EAAC,CAAA;AACjC,iBAAC,EAAE,KAAK,CAAC,mBAAmB,CAAA,CAAA;AAC9B,aAAA;AACF,SAAA,CAAA;QAEA,KAAK,CAAC,MAAM,qBAAqB,EAAE,cAAc,CAAA,CAAA;AAEjD;;;;AAIE;QACF,MAAM,0BAAyB,GAAI,MAAY;AAC7C,YAAA,qBAAqB,CAAC,KAAI,GAAI,CAAA,CAAA;AAChC,SAAA,CAAA;QAEA,KAAK,CACH,MAAM,KAAK,CAAC,QAAQ,EACpB,MAAM;AACJ,YAAA,0BAA0B,EAAC,CAAA;AAC3B,YAAA,cAAc,EAAC,CAAA;AACjB,SAAC,EACD,EAAE,IAAI,EAAE,IAAG,EAAG,CAChB,CAAA;AAEA;;;;;;AAME;AACF,QAAA,KAAK,CACH,eAAe,EACf,MAAM;AACJ,YAAA,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE;gBAC1B,IAAI,KAAK,CAAC,kBAAkB,EAAE;AAC5B,oBAAA,0BAA0B,EAAC,CAAA;AAC7B,iBAAA;AACA,gBAAA,8BAA8B,EAAC,CAAA;AACjC,aAAA;AACA,YAAA,cAAc,EAAC,CAAA;AACjB,SAAC,EACD,EAAE,SAAS,EAAE,MAAM,CACrB,CAAA;QAEA,eAAe,CAAC,MAAM;AACpB,YAAA,qBAAqB,EAAC,CAAA;AACxB,SAAC,CAAA,CAAA;QAED,OAAO;YACL,SAAS;YACT,OAAO;SACT,CAAA;KACD;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"search-input-placeholder.vue2.js","sources":["../../../../../src/x-modules/search-box/components/search-input-placeholder.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"isVisible\"\n    class=\"x-input-placeholder x-search-input-placeholder\"\n    mode=\"out-in\"\n  >\n    <span :key=\"message\" data-test=\"search-input-placeholder\">\n      {{ message }}\n    </span>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, onBeforeUnmount, ref, watch } from 'vue'\nimport { animateTranslate } from '../../../components/animations/animate-translate/animate-translate.factory'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types'\nimport { searchBoxXModule } from '../x-module'\n\n/**.\n * This component renders an animated placeholder for the search input in the shape of a list of\n * iterating messages that can be configured to happen always or only when hovering the input\n *\n * @public\n */\nexport default defineComponent({\n  name: 'SearchInputPlaceholder',\n  xModule: searchBoxXModule.name,\n  props: {\n    /**\n     * List of messages to animate.\n     *\n     * @public\n     */\n    messages: {\n      type: Array as PropType<string[]>,\n      required: true,\n    },\n    /**\n     * Animation component used for the messages.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: () => animateTranslate('bottom-to-top'),\n    },\n    /**\n     * Time in milliseconds during which each message is visible.\n     *\n     * @public\n     */\n    animationIntervalMs: {\n      type: Number,\n      default: 1500,\n    },\n    /**\n     * Whether the messages animation is active only when hovering the search input or always.\n     *\n     * @public\n     */\n    animateOnlyOnHover: Boolean,\n  },\n  setup(props) {\n    const $x = use$x()\n\n    /**.\n     * The search box written query\n     *\n     * @internal\n     */\n    const { query } = useState('searchBox')\n\n    /**.\n     * The search box hover status\n     *\n     * @internal\n     */\n    const isSearchBoxHovered = ref(false)\n\n    /**.\n     * The search box focus status\n     *\n     * @internal\n     */\n    const isSearchBoxFocused = ref(false)\n\n    /**\n     * The index used to point to the current animation message in the list.\n     *\n     * @internal\n     */\n    const animationMessageIndex = ref(0)\n\n    /**\n     * The interval used for the animation.\n     *\n     * @internal\n     */\n    const animationInterval = ref<number | undefined>(undefined)\n\n    /**\n     * The visibility state of the component.\n     *\n     * @returns The visibility state based on the search input state (query & focus).\n     *\n     * @internal\n     */\n    const isVisible = computed((): boolean => !query.value && !isSearchBoxFocused.value)\n\n    /**\n     * The animation state of the component.\n     *\n     * @returns Whether the animation is active or not.\n     *\n     * @internal\n     */\n    const isBeingAnimated = computed(\n      (): boolean => isVisible.value && (!props.animateOnlyOnHover || isSearchBoxHovered.value),\n    )\n\n    /**\n     * The current placeholder message.\n     *\n     * @returns The message to display as placeholder at any moment.\n     *\n     * @internal\n     */\n    const message = computed((): string | undefined =>\n      isBeingAnimated.value ? props.messages[animationMessageIndex.value] : props.messages[0],\n    )\n\n    /**\n     * Clears the interval used for the animation.\n     *\n     * @internal\n     */\n    const stopAnimationInterval = (): void => {\n      if (animationInterval.value) {\n        clearInterval(animationInterval.value)\n        animationInterval.value = undefined\n      }\n    }\n\n    /**\n     * Increments animation message index; if the new index exceeds the messages list length, it is\n     * reset to 0.\n     *\n     * @internal\n     */\n    const incrementAnimationMessageIndex = (): void => {\n      animationMessageIndex.value = (animationMessageIndex.value + 1) % props.messages.length\n    }\n\n    $x.on('UserHoveredInSearchBox', false).subscribe(() => (isSearchBoxHovered.value = true))\n\n    $x.on('UserHoveredOutSearchBox', false).subscribe(() => (isSearchBoxHovered.value = false))\n\n    $x.on('UserFocusedSearchBox', false).subscribe(() => (isSearchBoxFocused.value = true))\n\n    $x.on('UserBlurredSearchBox', false).subscribe(() => (isSearchBoxFocused.value = false))\n\n    /**\n     * Starts or stops the animation depending on the current animation state.\n     *\n     * @internal\n     */\n    const resetAnimation = (): void => {\n      stopAnimationInterval()\n      if (isBeingAnimated.value) {\n        animationInterval.value = window.setInterval((): void => {\n          incrementAnimationMessageIndex()\n        }, props.animationIntervalMs)\n      }\n    }\n\n    watch(() => 'animationIntervalMs', resetAnimation)\n\n    /**\n     * Resets the animation message index to zero.\n     *\n     * @internal\n     */\n    const resetAnimationMessageIndex = (): void => {\n      animationMessageIndex.value = 0\n    }\n\n    watch(\n      () => props.messages,\n      () => {\n        resetAnimationMessageIndex()\n        resetAnimation()\n      },\n      { deep: true },\n    )\n\n    /**\n     * Sets the animation message index with the right value for the next future iteration when the\n     * current one stops,assuring the user will see always a new message on each animation state\n     * change.\n     *\n     * @internal\n     */\n    watch(\n      isBeingAnimated,\n      () => {\n        if (!isBeingAnimated.value) {\n          if (props.animateOnlyOnHover) {\n            resetAnimationMessageIndex()\n          }\n          incrementAnimationMessageIndex()\n        }\n        resetAnimation()\n      },\n      { immediate: true },\n    )\n\n    onBeforeUnmount(() => {\n      stopAnimationInterval()\n    })\n\n    return {\n      isVisible,\n      message,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-search-input-placeholder-container {\n  position: relative;\n}\n</style>\n\n<style lang=\"css\" scoped>\n.x-search-input-placeholder {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## See it in action\n\nHere a basic example of how the animated search input placeholder is rendered.\n\n```vue live\n<template>\n  <div style=\"position: relative; overflow: hidden;\">\n    <SearchInputPlaceholder\n      style=\"position: absolute; height: 100%; pointer-events: none;\"\n      :messages=\"placeholderMessages\"\n    />\n    <SearchInput />\n  </div>\n</template>\n\n<script>\nimport { SearchInput, SearchInputPlaceholder } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'SearchInputPlaceholderDemo',\n  components: {\n    SearchInput,\n    SearchInputPlaceholder,\n  },\n  data: function () {\n    return {\n      placeholderMessages: [\n        'Find shirts',\n        'Find shoes',\n        'Find watches',\n        'Find handbags',\n        'Find sunglasses',\n      ],\n    }\n  },\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>\nimport { SearchInput, SearchInputPlaceholder } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'SearchInputPlaceholderDemo',\n  components: {\n    SearchInput,\n    SearchInputPlaceholder,\n  },\n  data: function () {\n    return {\n      placeholderMessages: [\n        'Find shirts',\n        'Find shoes',\n        'Find watches',\n        'Find handbags',\n        'Find sunglasses',\n      ],\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;AAsBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,wBAAwB;IAC9B,OAAO,EAAE,gBAAgB,CAAC,IAAI;AAC9B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,KAA2B;AACjC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,MAAM,gBAAgB,CAAC,eAAe,CAAC;AACjD,SAAA;AACD;;;;AAIE;AACF,QAAA,mBAAmB,EAAE;AACnB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,kBAAkB,EAAE,OAAO;AAC5B,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;AAEjB;;;;AAIE;QACF,MAAM,EAAE,KAAI,EAAI,GAAE,QAAQ,CAAC,WAAW,CAAA,CAAA;AAEtC;;;;AAIE;AACF,QAAA,MAAM,qBAAqB,GAAG,CAAC,KAAK,CAAA,CAAA;AAEpC;;;;AAIE;AACF,QAAA,MAAM,qBAAqB,GAAG,CAAC,KAAK,CAAA,CAAA;AAEpC;;;;AAIE;AACF,QAAA,MAAM,qBAAoB,GAAI,GAAG,CAAC,CAAC,CAAA,CAAA;AAEnC;;;;AAIE;AACF,QAAA,MAAM,iBAAkB,GAAE,GAAG,CAAqB,SAAS,CAAA,CAAA;AAE3D;;;;;;AAME;AACF,QAAA,MAAM,SAAU,GAAE,QAAQ,CAAC,MAAe,CAAC,KAAK,CAAC,KAAI,IAAK,CAAC,kBAAkB,CAAC,KAAK,CAAA,CAAA;AAEnF;;;;;;AAME;QACF,MAAM,eAAc,GAAI,QAAQ,CAC9B,MAAe,SAAS,CAAC,KAAI,KAAM,CAAC,KAAK,CAAC,kBAAmB,IAAG,kBAAkB,CAAC,KAAK,CAAC,CAC3F,CAAA;AAEA;;;;;;AAME;AACF,QAAA,MAAM,OAAM,GAAI,QAAQ,CAAC,MACvB,eAAe,CAAC,KAAM,GAAE,KAAK,CAAC,QAAQ,CAAC,qBAAqB,CAAC,KAAK,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CACzF,CAAA;AAEA;;;;AAIE;QACF,MAAM,qBAAsB,GAAE,MAAY;YACxC,IAAI,iBAAiB,CAAC,KAAK,EAAE;AAC3B,gBAAA,aAAa,CAAC,iBAAiB,CAAC,KAAK,CAAA,CAAA;AACrC,gBAAA,iBAAiB,CAAC,KAAM,GAAE,SAAQ,CAAA;AACpC,aAAA;AACF,SAAA,CAAA;AAEA;;;;;AAKE;QACF,MAAM,iCAAiC,MAAY;AACjD,YAAA,qBAAqB,CAAC,QAAQ,CAAC,qBAAqB,CAAC,KAAM,GAAE,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,MAAK,CAAA;AACxF,SAAA,CAAA;QAEA,EAAE,CAAC,EAAE,CAAC,wBAAwB,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,OAAO,kBAAkB,CAAC,KAAM,GAAE,IAAI,CAAC,CAAA,CAAA;QAExF,EAAE,CAAC,EAAE,CAAC,yBAAyB,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,OAAO,kBAAkB,CAAC,QAAQ,KAAK,CAAC,CAAA,CAAA;QAE1F,EAAE,CAAC,EAAE,CAAC,sBAAsB,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,OAAO,kBAAkB,CAAC,KAAM,GAAE,IAAI,CAAC,CAAA,CAAA;QAEtF,EAAE,CAAC,EAAE,CAAC,sBAAsB,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,OAAO,kBAAkB,CAAC,QAAQ,KAAK,CAAC,CAAA,CAAA;AAEvF;;;;AAIE;QACF,MAAM,cAAe,GAAE,MAAY;AACjC,YAAA,qBAAqB,EAAC,CAAA;YACtB,IAAI,eAAe,CAAC,KAAK,EAAE;gBACzB,iBAAiB,CAAC,KAAM,GAAE,MAAM,CAAC,WAAW,CAAC,MAAY;AACvD,oBAAA,8BAA8B,EAAC,CAAA;AACjC,iBAAC,EAAE,KAAK,CAAC,mBAAmB,CAAA,CAAA;AAC9B,aAAA;AACF,SAAA,CAAA;QAEA,KAAK,CAAC,MAAM,qBAAqB,EAAE,cAAc,CAAA,CAAA;AAEjD;;;;AAIE;QACF,MAAM,0BAAyB,GAAI,MAAY;AAC7C,YAAA,qBAAqB,CAAC,KAAI,GAAI,CAAA,CAAA;AAChC,SAAA,CAAA;QAEA,KAAK,CACH,MAAM,KAAK,CAAC,QAAQ,EACpB,MAAM;AACJ,YAAA,0BAA0B,EAAC,CAAA;AAC3B,YAAA,cAAc,EAAC,CAAA;AACjB,SAAC,EACD,EAAE,IAAI,EAAE,IAAG,EAAG,CAChB,CAAA;AAEA;;;;;;AAME;AACF,QAAA,KAAK,CACH,eAAe,EACf,MAAM;AACJ,YAAA,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE;gBAC1B,IAAI,KAAK,CAAC,kBAAkB,EAAE;AAC5B,oBAAA,0BAA0B,EAAC,CAAA;AAC7B,iBAAA;AACA,gBAAA,8BAA8B,EAAC,CAAA;AACjC,aAAA;AACA,YAAA,cAAc,EAAC,CAAA;AACjB,SAAC,EACD,EAAE,SAAS,EAAE,MAAM,CACrB,CAAA;QAEA,eAAe,CAAC,MAAM;AACpB,YAAA,qBAAqB,EAAC,CAAA;AACxB,SAAC,CAAA,CAAA;QAED,OAAO;YACL,SAAS;YACT,OAAO;SACT,CAAA;KACD;AACF,CAAA,CAAA;;;;"}