@empathyco/x-components 7.2.1 → 7.2.3

package/js/x-modules/scroll/components/{scroll-to-top.vue2.js → scroll-to-top2.vue.js}

@@ -1,98 +1,98 @@
 import { defineComponent, computed } from 'vue';
-import '../../../components/animations/animate-clip-path.vue2.js';
-import '../../../components/animations/animate-scale.vue2.js';
-import '../../../components/animations/animate-translate.vue2.js';
-import '../../../components/animations/animate-width.vue2.js';
-import '../../../components/animations/animate-width.vue3.js';
-import '../../../components/animations/change-height.vue2.js';
-import '../../../components/animations/change-height.vue3.js';
-import '../../../components/animations/collapse-height.vue2.js';
-import '../../../components/animations/collapse-height.vue3.js';
-import '../../../components/animations/collapse-width.vue2.js';
-import '../../../components/animations/collapse-width.vue3.js';
-import '../../../components/animations/cross-fade.vue2.js';
-import '../../../components/animations/cross-fade.vue3.js';
-import '../../../components/animations/fade-and-slide.vue2.js';
-import '../../../components/animations/fade-and-slide.vue3.js';
-import '../../../components/animations/fade.vue2.js';
-import '../../../components/animations/fade.vue3.js';
+import '../../../components/animations/animate-clip-path2.vue.js';
+import '../../../components/animations/animate-scale2.vue.js';
+import '../../../components/animations/animate-translate2.vue.js';
+import '../../../components/animations/animate-width2.vue.js';
+import '../../../components/animations/animate-width3.vue.js';
+import '../../../components/animations/change-height2.vue.js';
+import '../../../components/animations/change-height3.vue.js';
+import '../../../components/animations/collapse-height2.vue.js';
+import '../../../components/animations/collapse-height3.vue.js';
+import '../../../components/animations/collapse-width2.vue.js';
+import '../../../components/animations/collapse-width3.vue.js';
+import '../../../components/animations/cross-fade2.vue.js';
+import '../../../components/animations/cross-fade3.vue.js';
+import '../../../components/animations/fade-and-slide2.vue.js';
+import '../../../components/animations/fade-and-slide3.vue.js';
+import '../../../components/animations/fade2.vue.js';
+import '../../../components/animations/fade3.vue.js';
 import _sfc_main$1 from '../../../components/animations/no-animation.vue.js';
-import '../../../components/animations/staggered-fade-and-slide.vue2.js';
-import '../../../components/animations/staggered-fade-and-slide.vue3.js';
-import '../../../components/auto-progress-bar.vue2.js';
-import '../../../components/auto-progress-bar.vue3.js';
-import '../../../components/base-dropdown.vue2.js';
-import '../../../components/base-dropdown.vue3.js';
+import '../../../components/animations/staggered-fade-and-slide2.vue.js';
+import '../../../components/animations/staggered-fade-and-slide3.vue.js';
+import '../../../components/auto-progress-bar2.vue.js';
+import '../../../components/auto-progress-bar3.vue.js';
+import '../../../components/base-dropdown2.vue.js';
+import '../../../components/base-dropdown3.vue.js';
 import BaseEventButton from '../../../components/base-event-button.vue.js';
-import '../../../components/base-grid.vue2.js';
-import '../../../components/base-grid.vue3.js';
-import '../../../components/base-keyboard-navigation.vue2.js';
-import '../../../components/base-rating.vue2.js';
-import '../../../components/base-rating.vue3.js';
-import '../../../components/base-slider.vue2.js';
-import '../../../components/base-slider.vue3.js';
-import '../../../components/base-switch.vue2.js';
-import '../../../components/base-switch.vue3.js';
-import '../../../components/base-teleport.vue2.js';
-import '../../../components/base-variable-column-grid.vue2.js';
-import '../../../components/column-picker/base-column-picker-dropdown.vue2.js';
-import '../../../components/column-picker/base-column-picker-list.vue2.js';
-import '../../../components/currency/base-currency.vue2.js';
+import '../../../components/base-grid2.vue.js';
+import '../../../components/base-grid3.vue.js';
+import '../../../components/base-keyboard-navigation2.vue.js';
+import '../../../components/base-rating2.vue.js';
+import '../../../components/base-rating3.vue.js';
+import '../../../components/base-slider2.vue.js';
+import '../../../components/base-slider3.vue.js';
+import '../../../components/base-switch2.vue.js';
+import '../../../components/base-switch3.vue.js';
+import '../../../components/base-teleport2.vue.js';
+import '../../../components/base-variable-column-grid2.vue.js';
+import '../../../components/column-picker/base-column-picker-dropdown2.vue.js';
+import '../../../components/column-picker/base-column-picker-list2.vue.js';
+import '../../../components/currency/base-currency2.vue.js';
 import '../../../components/display-click-provider.vue.js';
 import '../../../components/display-emitter.vue.js';
 import '../../../components/filters/labels/base-price-filter-label.vue.js';
-import '../../../components/filters/labels/base-rating-filter-label.vue2.js';
+import '../../../components/filters/labels/base-rating-filter-label2.vue.js';
 import '../../../components/global-x-bus.vue.js';
-import '../../../components/highlight.vue2.js';
-import '../../../components/items-list.vue2.js';
+import '../../../components/highlight2.vue.js';
+import '../../../components/items-list2.vue.js';
 import '../../../components/location-provider.vue.js';
 import { AnimationProp } from '../../../types/animation-prop.js';
-import '../../../components/modals/base-events-modal-close.vue2.js';
-import '../../../components/modals/base-events-modal-open.vue2.js';
-import '../../../components/modals/base-events-modal.vue2.js';
-import '../../../components/modals/base-id-modal-close.vue2.js';
-import '../../../components/modals/base-id-modal-open.vue2.js';
-import '../../../components/modals/base-id-modal.vue2.js';
-import '../../../components/modals/base-modal.vue2.js';
-import '../../../components/modals/base-modal.vue3.js';
-import '../../../components/modals/close-main-modal.vue2.js';
-import '../../../components/modals/main-modal.vue2.js';
-import '../../../components/modals/open-main-modal.vue2.js';
-import '../../../components/page-loader-button.vue2.js';
-import '../../../components/page-loader-button.vue3.js';
-import '../../../components/page-selector.vue2.js';
-import '../../../components/page-selector.vue3.js';
-import '../../../components/panels/base-header-toggle-panel.vue2.js';
-import '../../../components/panels/base-header-toggle-panel.vue3.js';
-import '../../../components/panels/base-id-toggle-panel-button.vue2.js';
-import '../../../components/panels/base-id-toggle-panel.vue2.js';
-import '../../../components/panels/base-tabs-panel.vue2.js';
-import '../../../components/panels/base-tabs-panel.vue3.js';
-import '../../../components/panels/base-toggle-panel.vue2.js';
-import '../../../components/result/base-result-add-to-cart.vue2.js';
-import '../../../components/result/base-result-current-price.vue2.js';
-import '../../../components/result/base-result-image.vue2.js';
-import '../../../components/result/base-result-image.vue3.js';
-import '../../../components/result/base-result-link.vue2.js';
-import '../../../components/result/base-result-link.vue3.js';
-import '../../../components/result/base-result-previous-price.vue2.js';
-import '../../../components/result/base-result-rating.vue2.js';
-import '../../../components/result/base-result-rating.vue3.js';
-import '../../../components/result/result-variant-selector.vue2.js';
-import '../../../components/result/result-variant-selector.vue3.js';
+import '../../../components/modals/base-events-modal-close2.vue.js';
+import '../../../components/modals/base-events-modal-open2.vue.js';
+import '../../../components/modals/base-events-modal2.vue.js';
+import '../../../components/modals/base-id-modal-close2.vue.js';
+import '../../../components/modals/base-id-modal-open2.vue.js';
+import '../../../components/modals/base-id-modal2.vue.js';
+import '../../../components/modals/base-modal2.vue.js';
+import '../../../components/modals/base-modal3.vue.js';
+import '../../../components/modals/close-main-modal2.vue.js';
+import '../../../components/modals/main-modal2.vue.js';
+import '../../../components/modals/open-main-modal2.vue.js';
+import '../../../components/page-loader-button2.vue.js';
+import '../../../components/page-loader-button3.vue.js';
+import '../../../components/page-selector2.vue.js';
+import '../../../components/page-selector3.vue.js';
+import '../../../components/panels/base-header-toggle-panel2.vue.js';
+import '../../../components/panels/base-header-toggle-panel3.vue.js';
+import '../../../components/panels/base-id-toggle-panel-button2.vue.js';
+import '../../../components/panels/base-id-toggle-panel2.vue.js';
+import '../../../components/panels/base-tabs-panel2.vue.js';
+import '../../../components/panels/base-tabs-panel3.vue.js';
+import '../../../components/panels/base-toggle-panel2.vue.js';
+import '../../../components/result/base-result-add-to-cart2.vue.js';
+import '../../../components/result/base-result-current-price2.vue.js';
+import '../../../components/result/base-result-image2.vue.js';
+import '../../../components/result/base-result-image3.vue.js';
+import '../../../components/result/base-result-link2.vue.js';
+import '../../../components/result/base-result-link3.vue.js';
+import '../../../components/result/base-result-previous-price2.vue.js';
+import '../../../components/result/base-result-rating2.vue.js';
+import '../../../components/result/base-result-rating3.vue.js';
+import '../../../components/result/result-variant-selector2.vue.js';
+import '../../../components/result/result-variant-selector3.vue.js';
 import '../../../components/result/result-variants-provider.vue.js';
-import '../../../components/scroll/base-scroll.vue2.js';
+import '../../../components/scroll/base-scroll2.vue.js';
 import '@empathyco/x-utils';
 import 'vuex';
 import '../../../plugins/x-bus.js';
 import '../../../plugins/x-plugin.js';
 import 'rxjs';
-import '../../../components/sliding-panel.vue2.js';
-import '../../../components/sliding-panel.vue3.js';
-import '../../../components/snippet-callbacks.vue2.js';
-import '../../../components/suggestions/base-suggestion.vue2.js';
-import '../../../components/suggestions/base-suggestions.vue2.js';
-import '../../../components/suggestions/base-suggestions.vue3.js';
+import '../../../components/sliding-panel2.vue.js';
+import '../../../components/sliding-panel3.vue.js';
+import '../../../components/snippet-callbacks2.vue.js';
+import '../../../components/suggestions/base-suggestion2.vue.js';
+import '../../../components/suggestions/base-suggestions2.vue.js';
+import '../../../components/suggestions/base-suggestions3.vue.js';
 import '../../../composables/create-use-device.js';
 import '@vueuse/core';
 import { useState } from '../../../composables/use-state.js';
@@ -204,4 +204,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=scroll-to-top.vue2.js.map
+//# sourceMappingURL=scroll-to-top2.vue.js.map

package/js/x-modules/scroll/components/{scroll-to-top.vue2.js.map → scroll-to-top2.vue.js.map}

@@ -1 +1 @@
-{"version":3,"file":"scroll-to-top.vue2.js","sources":["../../../../../src/x-modules/scroll/components/scroll-to-top.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\">\n    <BaseEventButton\n      v-if=\"isVisible\"\n      class=\"x-scroll-to-top xds:button\"\n      data-test=\"scroll-to-top\"\n      aria-label=\"Scroll to top\"\n      :events=\"events\"\n    >\n      <!-- @slot (Required) Button content with a text, an icon or both -->\n      <slot />\n    </BaseEventButton>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { XEventsTypes } from '../../../wiring'\nimport { computed, defineComponent } from 'vue'\nimport { BaseEventButton, NoAnimation } from '../../../components'\nimport { useState } from '../../../composables'\nimport { AnimationProp } from '../../../types'\nimport { scrollXModule } from '../x-module'\nimport { MainScrollId } from './scroll.const'\n\n/**\n * The `ScrollToTop` component is a button that the user can click to make a container scroll\n * up to its initial position.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'ScrollToTop',\n  xModule: scrollXModule.name,\n  components: { BaseEventButton },\n  props: {\n    /**\n     * Animation to use for showing/hiding the button.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: () => NoAnimation,\n    },\n    /**\n     * Threshold in pixels from the top to show the button.\n     *\n     * @public\n     */\n    thresholdPx: Number,\n    /**\n     * Id of the target scroll component.\n     *\n     * @public\n     */\n    scrollId: {\n      type: String,\n      default: MainScrollId,\n    },\n  },\n  setup(props) {\n    /**\n     * State of all the scroll components in this module.\n     *\n     * @internal\n     */\n    // TODO: Directly retrieve the needed data in this computed property\n    const { data } = useState('scroll')\n\n    /**\n     * The scroll data retrieved for this component.\n     *\n     * @returns The scroll data for this component if a valid {@link ScrollToTop.scrollId} has been\n     * passed. Otherwise it returns `null`.\n     * @internal\n     */\n    const scrollData = computed(() => {\n      return props.scrollId && data.value[props.scrollId]\n        ? data.value[props.scrollId]\n        : {\n            position: 0,\n            direction: 'UP',\n            hasReachedStart: false,\n            hasAlmostReachedEnd: false,\n            hasReachedEnd: false,\n          }\n    })\n\n    /**\n     * Event that will be emitted when the scroll to top is clicked.\n     *\n     * @returns The event to be emitted when the scroll to top is clicked. The id as a payload.\n     * @internal\n     */\n    const events = computed(\n      (): Partial<XEventsTypes> => ({ UserClickedScrollToTop: props.scrollId }),\n    )\n\n    /**\n     * Checks if the thresholdPx prop has been provided and if it is a number.\n     *\n     * @returns If the thresholdPx is a number or not.\n     * @internal\n     */\n    const useThresholdStrategy = computed(() => typeof props.thresholdPx === 'number')\n\n    /**\n     * Checks if the threshold has been reached in case the threshold strategy is in use.\n     *\n     * @returns If the scrollTop is bigger than the thresholdPx.\n     * @internal\n     */\n    const isThresholdReached = computed(\n      () => useThresholdStrategy.value && scrollData.value.position > props.thresholdPx!,\n    )\n\n    /**\n     * Returns if the scroll has almost reached its end or not.\n     *\n     * @returns True if the scroll has almost reached the end and the user is still scrolling down.\n     * @internal\n     */\n    const hasAlmostReachedScrollEnd = computed(\n      () => scrollData.value.hasAlmostReachedEnd && scrollData.value.direction === 'DOWN',\n    )\n\n    /**\n     * Whether if the button is visible or not depending on the strategy being used.\n     *\n     * @returns If the button should be visible or not.\n     * @internal\n     */\n    const isVisible = computed(() =>\n      useThresholdStrategy.value ? isThresholdReached.value : hasAlmostReachedScrollEnd.value,\n    )\n\n    return {\n      events,\n      isVisible,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedScrollToTop`](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 id of the scroll\n  that is going to be scrolled.\n\n## Examples\n\n### Basic example\n\nThe component renders whatever is passed to it in the default slot and scrolls to top the scroll\nwith an id `scrollId`.\n\nIt also receives an optional threshold in pixels. When the threshold is reached from the top, the\ncomponent will be shown once the user scrolls `UP`.\n\nIf this parameter is not provided the button will be visible when the user almost reaches the end of\nthe scroll.\n\n```vue\n<template>\n  <div>\n    <ScrollToTop scroll-id=\"scrollId\" :threshold-px=\"1000\">\n      <span>Scroll to top</span>\n    </ScrollToTop>\n  </div>\n</template>\n\n<script setup>\nimport { ScrollToTop } from '@empathyco/x-components/scroll'\n</script>\n```\n</docs>\n"],"names":["NoAnimation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,MAAMA,WAAW;AAC3B,SAAA;AACD;;;;AAIE;AACF,QAAA,WAAW,EAAE,MAAM;AACnB;;;;AAIE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,YAAY;AACtB,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;;QAEF,MAAM,EAAE,IAAG,EAAE,GAAI,QAAQ,CAAC,QAAQ,CAAA;AAElC;;;;;;AAME;AACF,QAAA,MAAM,UAAS,GAAI,QAAQ,CAAC,MAAI;YAC9B,OAAO,KAAK,CAAC,QAAO,IAAK,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ;kBAC9C,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ;AAC3B,kBAAE;AACE,oBAAA,QAAQ,EAAE,CAAC;AACX,oBAAA,SAAS,EAAE,IAAI;AACf,oBAAA,eAAe,EAAE,KAAK;AACtB,oBAAA,mBAAmB,EAAE,KAAK;AAC1B,oBAAA,aAAa,EAAE,KAAK;iBACtB;AACN,QAAA,CAAC,CAAA;AAED;;;;;AAKE;AACF,QAAA,MAAM,MAAK,GAAI,QAAQ,CACrB,OAA8B,EAAE,sBAAsB,EAAE,KAAK,CAAC,QAAO,EAAG,CAAC,CAC3E;AAEA;;;;;AAKE;AACF,QAAA,MAAM,oBAAmB,GAAI,QAAQ,CAAC,MAAM,OAAO,KAAK,CAAC,gBAAgB,QAAQ,CAAA;AAEjF;;;;;AAKE;QACF,MAAM,kBAAiB,GAAI,QAAQ,CACjC,MAAM,oBAAoB,CAAC,KAAI,IAAK,UAAU,CAAC,KAAK,CAAC,QAAO,GAAI,KAAK,CAAC,WAAY,CACpF;AAEA;;;;;AAKE;QACF,MAAM,yBAAwB,GAAI,QAAQ,CACxC,MAAM,UAAU,CAAC,KAAK,CAAC,mBAAkB,IAAK,UAAU,CAAC,KAAK,CAAC,SAAQ,KAAM,MAAM,CACrF;AAEA;;;;;AAKE;QACF,MAAM,YAAY,QAAQ,CAAC,MACzB,oBAAoB,CAAC,KAAI,GAAI,kBAAkB,CAAC,KAAI,GAAI,yBAAyB,CAAC,KAAK,CACzF;QAEA,OAAO;YACL,MAAM;YACN,SAAS;SACX;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"scroll-to-top2.vue.js","sources":["../../../../../src/x-modules/scroll/components/scroll-to-top.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\">\n    <BaseEventButton\n      v-if=\"isVisible\"\n      class=\"x-scroll-to-top xds:button\"\n      data-test=\"scroll-to-top\"\n      aria-label=\"Scroll to top\"\n      :events=\"events\"\n    >\n      <!-- @slot (Required) Button content with a text, an icon or both -->\n      <slot />\n    </BaseEventButton>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { XEventsTypes } from '../../../wiring'\nimport { computed, defineComponent } from 'vue'\nimport { BaseEventButton, NoAnimation } from '../../../components'\nimport { useState } from '../../../composables'\nimport { AnimationProp } from '../../../types'\nimport { scrollXModule } from '../x-module'\nimport { MainScrollId } from './scroll.const'\n\n/**\n * The `ScrollToTop` component is a button that the user can click to make a container scroll\n * up to its initial position.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'ScrollToTop',\n  xModule: scrollXModule.name,\n  components: { BaseEventButton },\n  props: {\n    /**\n     * Animation to use for showing/hiding the button.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: () => NoAnimation,\n    },\n    /**\n     * Threshold in pixels from the top to show the button.\n     *\n     * @public\n     */\n    thresholdPx: Number,\n    /**\n     * Id of the target scroll component.\n     *\n     * @public\n     */\n    scrollId: {\n      type: String,\n      default: MainScrollId,\n    },\n  },\n  setup(props) {\n    /**\n     * State of all the scroll components in this module.\n     *\n     * @internal\n     */\n    // TODO: Directly retrieve the needed data in this computed property\n    const { data } = useState('scroll')\n\n    /**\n     * The scroll data retrieved for this component.\n     *\n     * @returns The scroll data for this component if a valid {@link ScrollToTop.scrollId} has been\n     * passed. Otherwise it returns `null`.\n     * @internal\n     */\n    const scrollData = computed(() => {\n      return props.scrollId && data.value[props.scrollId]\n        ? data.value[props.scrollId]\n        : {\n            position: 0,\n            direction: 'UP',\n            hasReachedStart: false,\n            hasAlmostReachedEnd: false,\n            hasReachedEnd: false,\n          }\n    })\n\n    /**\n     * Event that will be emitted when the scroll to top is clicked.\n     *\n     * @returns The event to be emitted when the scroll to top is clicked. The id as a payload.\n     * @internal\n     */\n    const events = computed(\n      (): Partial<XEventsTypes> => ({ UserClickedScrollToTop: props.scrollId }),\n    )\n\n    /**\n     * Checks if the thresholdPx prop has been provided and if it is a number.\n     *\n     * @returns If the thresholdPx is a number or not.\n     * @internal\n     */\n    const useThresholdStrategy = computed(() => typeof props.thresholdPx === 'number')\n\n    /**\n     * Checks if the threshold has been reached in case the threshold strategy is in use.\n     *\n     * @returns If the scrollTop is bigger than the thresholdPx.\n     * @internal\n     */\n    const isThresholdReached = computed(\n      () => useThresholdStrategy.value && scrollData.value.position > props.thresholdPx!,\n    )\n\n    /**\n     * Returns if the scroll has almost reached its end or not.\n     *\n     * @returns True if the scroll has almost reached the end and the user is still scrolling down.\n     * @internal\n     */\n    const hasAlmostReachedScrollEnd = computed(\n      () => scrollData.value.hasAlmostReachedEnd && scrollData.value.direction === 'DOWN',\n    )\n\n    /**\n     * Whether if the button is visible or not depending on the strategy being used.\n     *\n     * @returns If the button should be visible or not.\n     * @internal\n     */\n    const isVisible = computed(() =>\n      useThresholdStrategy.value ? isThresholdReached.value : hasAlmostReachedScrollEnd.value,\n    )\n\n    return {\n      events,\n      isVisible,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedScrollToTop`](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 id of the scroll\n  that is going to be scrolled.\n\n## Examples\n\n### Basic example\n\nThe component renders whatever is passed to it in the default slot and scrolls to top the scroll\nwith an id `scrollId`.\n\nIt also receives an optional threshold in pixels. When the threshold is reached from the top, the\ncomponent will be shown once the user scrolls `UP`.\n\nIf this parameter is not provided the button will be visible when the user almost reaches the end of\nthe scroll.\n\n```vue\n<template>\n  <div>\n    <ScrollToTop scroll-id=\"scrollId\" :threshold-px=\"1000\">\n      <span>Scroll to top</span>\n    </ScrollToTop>\n  </div>\n</template>\n\n<script setup>\nimport { ScrollToTop } from '@empathyco/x-components/scroll'\n</script>\n```\n</docs>\n"],"names":["NoAnimation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,MAAMA,WAAW;AAC3B,SAAA;AACD;;;;AAIE;AACF,QAAA,WAAW,EAAE,MAAM;AACnB;;;;AAIE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,YAAY;AACtB,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;;QAEF,MAAM,EAAE,IAAG,EAAE,GAAI,QAAQ,CAAC,QAAQ,CAAA;AAElC;;;;;;AAME;AACF,QAAA,MAAM,UAAS,GAAI,QAAQ,CAAC,MAAI;YAC9B,OAAO,KAAK,CAAC,QAAO,IAAK,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ;kBAC9C,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ;AAC3B,kBAAE;AACE,oBAAA,QAAQ,EAAE,CAAC;AACX,oBAAA,SAAS,EAAE,IAAI;AACf,oBAAA,eAAe,EAAE,KAAK;AACtB,oBAAA,mBAAmB,EAAE,KAAK;AAC1B,oBAAA,aAAa,EAAE,KAAK;iBACtB;AACN,QAAA,CAAC,CAAA;AAED;;;;;AAKE;AACF,QAAA,MAAM,MAAK,GAAI,QAAQ,CACrB,OAA8B,EAAE,sBAAsB,EAAE,KAAK,CAAC,QAAO,EAAG,CAAC,CAC3E;AAEA;;;;;AAKE;AACF,QAAA,MAAM,oBAAmB,GAAI,QAAQ,CAAC,MAAM,OAAO,KAAK,CAAC,gBAAgB,QAAQ,CAAA;AAEjF;;;;;AAKE;QACF,MAAM,kBAAiB,GAAI,QAAQ,CACjC,MAAM,oBAAoB,CAAC,KAAI,IAAK,UAAU,CAAC,KAAK,CAAC,QAAO,GAAI,KAAK,CAAC,WAAY,CACpF;AAEA;;;;;AAKE;QACF,MAAM,yBAAwB,GAAI,QAAQ,CACxC,MAAM,UAAU,CAAC,KAAK,CAAC,mBAAkB,IAAK,UAAU,CAAC,KAAK,CAAC,SAAQ,KAAM,MAAM,CACrF;AAEA;;;;;AAKE;QACF,MAAM,YAAY,QAAQ,CAAC,MACzB,oBAAoB,CAAC,KAAI,GAAI,kBAAkB,CAAC,KAAI,GAAI,yBAAyB,CAAC,KAAK,CACzF;QAEA,OAAO;YACL,MAAM;YACN,SAAS;SACX;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

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

@@ -1,4 +1,4 @@
-import _sfc_main from './scroll.vue2.js';
+import _sfc_main from './scroll2.vue.js';
 import { resolveComponent, openBlock, createBlock, withCtx, renderSlot } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 

package/js/x-modules/scroll/components/{scroll.vue2.js → scroll2.vue.js}

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

package/js/x-modules/scroll/components/{scroll.vue2.js.map → scroll2.vue.js.map}

@@ -1 +1 @@
-{"version":3,"file":"scroll.vue2.js","sources":["../../../../../src/x-modules/scroll/components/scroll.vue"],"sourcesContent":["<template>\n  <BaseScroll\n    :id=\"id\"\n    ref=\"scrollRef\"\n    @scroll=\"emitScroll\"\n    @scroll:direction-change=\"emitScrollDirectionChange\"\n    @scroll:at-start=\"emitScrollAtStart\"\n    @scroll:almost-at-end=\"emitScrollAlmostAtEnd\"\n    @scroll:at-end=\"emitScrollAtEnd\"\n  >\n    <slot />\n  </BaseScroll>\n</template>\n\n<script lang=\"ts\">\nimport type { ComponentPublicInstance } from 'vue'\nimport type { ScrollDirection } from '../../../components/scroll/scroll.types'\nimport type { WireMetadata } from '../../../wiring/wiring.types'\nimport { defineComponent, ref } from 'vue'\nimport BaseScroll from '../../../components/scroll/base-scroll.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { scrollXModule } from '../x-module'\nimport { MainScrollId } from './scroll.const'\n\n/**\n * Scrollable container that emits scroll related X Events. It exposes all the listeners\n * and props from the {@link BaseScroll} component.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Scroll',\n  xModule: scrollXModule.name,\n  components: { BaseScroll },\n  props: {\n    /**\n     * Id to identify the component.\n     *\n     * @public\n     */\n    id: {\n      type: String,\n      default: MainScrollId,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const scrollRef = ref<ComponentPublicInstance>()\n\n    /**\n     * Creates a {@link WireMetadata} metadata object for all the emitted events.\n     *\n     * @internal\n     * @returns A new {@link WireMetadata} object.\n     */\n    const createEventMetadata = (): Partial<WireMetadata> => {\n      return {\n        target: scrollRef.value?.$el as HTMLElement,\n        id: props.id,\n      }\n    }\n\n    /**\n     * Emits the `UserScrolled` event.\n     *\n     * @param position - The new position of scroll.\n     * @internal\n     */\n    const emitScroll = (position: number) => {\n      $x.emit('UserScrolled', position, createEventMetadata())\n    }\n\n    /**\n     * Emits the `UserChangedScrollDirection` event when the scrolling direction has changed.\n     *\n     * @param direction - The new direction of scroll.\n     * @internal\n     */\n    const emitScrollDirectionChange = (direction: ScrollDirection) => {\n      $x.emit('UserChangedScrollDirection', direction, createEventMetadata())\n    }\n\n    /**\n     * Emits the 'UserReachedScrollStart' event when the user reaches the start.\n     *\n     * @param isAtStart - A boolean indicating if the scroll is at the ending position.\n     * @internal\n     */\n    const emitScrollAtStart = (isAtStart: boolean) => {\n      $x.emit('UserReachedScrollStart', isAtStart, createEventMetadata())\n    }\n\n    /**\n     * Emits the 'UserAlmostReachedScrollEnd' event when the user is about to reach to end.\n     *\n     * @param isAlmostAtEnd - A boolean indicating if the scroll is almost at its ending position.\n     * @internal\n     */\n    const emitScrollAlmostAtEnd = (isAlmostAtEnd: boolean) => {\n      $x.emit('UserAlmostReachedScrollEnd', isAlmostAtEnd, createEventMetadata())\n    }\n\n    /**\n     * Emits the 'UserReachedScrollEnd' event when the user is about to reach to end.\n     *\n     * @param isAtEnd - A boolean indicating if the scroll is at the ending position.\n     * @internal\n     */\n    const emitScrollAtEnd = (isAtEnd: boolean) => {\n      $x.emit('UserReachedScrollEnd', isAtEnd, createEventMetadata())\n    }\n\n    /**\n     * Scrolls to initial position when the user has clicked the scroll to top button.\n     *\n     * @param scrollId - {@link XEventsTypes.UserClickedScrollToTop}.\n     * @internal\n     */\n    $x.on('UserClickedScrollToTop', false).subscribe((scrollId: string) => {\n      if (scrollId === props.id && scrollRef.value) {\n        ;(scrollRef.value.$el as HTMLElement).scrollTo({ top: 0, behavior: 'smooth' })\n      }\n    })\n\n    return {\n      scrollRef,\n      emitScrollAtEnd,\n      emitScrollAlmostAtEnd,\n      emitScrollAtStart,\n      emitScrollDirectionChange,\n      emitScroll,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserScrolled`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted after the user scrolls in this container. The payload is the scroll top distance in\n  pixels.\n- [`UserChangedScrollDirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted when the user changes the scroll direction. The payload is the new scrolling direction.\n- [`UserReachedScrollStart`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted when the user scrolls up to the initial position of the scroll.\n- [`UserAlmostReachedScrollEnd`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted when the user is about to reach the bottom part of the scroll.\n- [`UserReachedScrollEnd`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted when the user has reached the bottom part of the scroll.\n\n## Examples\n\nThe Scroll is a component that wraps the BaseScroll and provides it for a unique id.\n\n### Basic usage\n\n#### Overriding the properties\n\nIt renders an element with scroll, with the content passed in the `default slot`.\n\n```vue\n<template>\n  <Scroll id=\"exampleScrollId\" :throttleMs=\"50\" :distanceToBottom=\"300\">\n    <div class=\"content-scroll\">\n      <span>content1</span>\n      <span>content2</span>\n    </div>\n  </Scroll>\n</template>\n\n<script setup>\nimport { Scroll } from '@empathyco/x-components/scroll'\n</script>\n```\n\n#### Using scroll events.\n\n```vue\n<template>\n  <Scroll\n    @scroll=\"scroll\"\n    @scroll:direction-change=\"scrollDirectionChange\"\n    @scroll:at-start=\"scrollAtStart\"\n    @scroll:almost-at-end=\"scrollAlmostAtEnd\"\n    @scroll:at-end=\"scrollAtEnd\"\n    id=\"exampleScrollId\"\n    throttleMs=\"50\"\n    distanceToBottom=\"300\"\n  >\n    <div class=\"content-scroll\">\n      <span>content1</span>\n      <span>content2</span>\n    </div>\n  </Scroll>\n</template>\n\n<script setup>\nimport { Scroll } from '@empathyco/x-components/scroll'\n\nfunction scroll(position) {\n  console.log('scroll', position)\n}\nfunction scrollDirectionChange(direction) {\n  console.log('scroll:direction-change', direction)\n}\nfunction scrollAtStart(isAtStart) {\n  console.log('scroll:at-start', isAtStart)\n}\nfunction scrollAlmostAtEnd(isAlmostAtEnd) {\n  console.log('scroll:almost-at-end', isAlmostAtEnd)\n}\nfunction scrollAtEnd(isAtEnd) {\n  console.log('scroll:at-end', isAtEnd)\n}\n</script>\n```\n\n#### Using XEvents.\n\nYou can use the XEvents API to subscribe to events programmatically:\n\n```vue\n<template>\n  <Scroll throttleMs=\"50\" distanceToBottom=\"300\">\n    <div class=\"content-scroll\">\n      <span>content1</span>\n      <span>content2</span>\n    </div>\n  </Scroll>\n</template>\n\n<script setup>\nimport { onMounted } from 'vue'\nimport { Scroll } from '@empathyco/x-components/scroll'\nimport { use$x } from '../../../composables'\n\nconst x = use$x()\n\nonMounted(() => {\n  x.on('UserScrolled').subscribe(distance => {\n    console.log(distance)\n  })\n  x.on('UserChangedScrollDirection').subscribe(direction => {\n    console.log(direction)\n  })\n  x.on('UserReachedScrollStart').subscribe(isAtStart => {\n    console.log(isAtStart)\n  })\n  x.on('UserAlmostReachedScrollEnd').subscribe(isAlmostAtEnd => {\n    console.log(isAlmostAtEnd)\n  })\n  x.on('UserReachedScrollEnd').subscribe(isAtEnd => {\n    console.log(isAtEnd)\n  })\n})\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAwBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,UAAS,EAAG;AAC1B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,EAAE,EAAE;AACF,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,YAAY;AACtB,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AAEjB,QAAA,MAAM,YAAY,GAAG,EAA0B;AAE/C;;;;;AAKE;QACF,MAAM,mBAAkB,GAAI,MAA2B;YACrD,OAAO;AACL,gBAAA,MAAM,EAAE,SAAS,CAAC,KAAK,EAAE,GAAkB;gBAC3C,EAAE,EAAE,KAAK,CAAC,EAAE;aACd;AACF,QAAA,CAAA;AAEA;;;;;AAKE;AACF,QAAA,MAAM,aAAa,CAAC,QAAgB,KAAG;YACrC,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,QAAQ,EAAE,mBAAmB,EAAE,CAAA;AACzD,QAAA,CAAA;AAEA;;;;;AAKE;AACF,QAAA,MAAM,yBAAwB,GAAI,CAAC,SAA0B,KAAG;YAC9D,EAAE,CAAC,IAAI,CAAC,4BAA4B,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAA;AACxE,QAAA,CAAA;AAEA;;;;;AAKE;AACF,QAAA,MAAM,iBAAgB,GAAI,CAAC,SAAkB,KAAG;YAC9C,EAAE,CAAC,IAAI,CAAC,wBAAwB,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAA;AACpE,QAAA,CAAA;AAEA;;;;;AAKE;AACF,QAAA,MAAM,qBAAoB,GAAI,CAAC,aAAsB,KAAG;YACtD,EAAE,CAAC,IAAI,CAAC,4BAA4B,EAAE,aAAa,EAAE,mBAAmB,EAAE,CAAA;AAC5E,QAAA,CAAA;AAEA;;;;;AAKE;AACF,QAAA,MAAM,eAAc,GAAI,CAAC,OAAgB,KAAG;YAC1C,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,OAAO,EAAE,mBAAmB,EAAE,CAAA;AAChE,QAAA,CAAA;AAEA;;;;;AAKE;AACF,QAAA,EAAE,CAAC,EAAE,CAAC,wBAAwB,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,QAAgB,KAAG;YACnE,IAAI,QAAO,KAAM,KAAK,CAAC,EAAC,IAAK,SAAS,CAAC,KAAK,EAAE;AAC1C,gBAAA,SAAS,CAAC,KAAK,CAAC,GAAmB,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,UAAU,CAAA;YAC/E;AACF,QAAA,CAAC,CAAA;QAED,OAAO;YACL,SAAS;YACT,eAAe;YACf,qBAAqB;YACrB,iBAAiB;YACjB,yBAAyB;YACzB,UAAU;SACZ;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"scroll2.vue.js","sources":["../../../../../src/x-modules/scroll/components/scroll.vue"],"sourcesContent":["<template>\n  <BaseScroll\n    :id=\"id\"\n    ref=\"scrollRef\"\n    @scroll=\"emitScroll\"\n    @scroll:direction-change=\"emitScrollDirectionChange\"\n    @scroll:at-start=\"emitScrollAtStart\"\n    @scroll:almost-at-end=\"emitScrollAlmostAtEnd\"\n    @scroll:at-end=\"emitScrollAtEnd\"\n  >\n    <slot />\n  </BaseScroll>\n</template>\n\n<script lang=\"ts\">\nimport type { ComponentPublicInstance } from 'vue'\nimport type { ScrollDirection } from '../../../components/scroll/scroll.types'\nimport type { WireMetadata } from '../../../wiring/wiring.types'\nimport { defineComponent, ref } from 'vue'\nimport BaseScroll from '../../../components/scroll/base-scroll.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { scrollXModule } from '../x-module'\nimport { MainScrollId } from './scroll.const'\n\n/**\n * Scrollable container that emits scroll related X Events. It exposes all the listeners\n * and props from the {@link BaseScroll} component.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Scroll',\n  xModule: scrollXModule.name,\n  components: { BaseScroll },\n  props: {\n    /**\n     * Id to identify the component.\n     *\n     * @public\n     */\n    id: {\n      type: String,\n      default: MainScrollId,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const scrollRef = ref<ComponentPublicInstance>()\n\n    /**\n     * Creates a {@link WireMetadata} metadata object for all the emitted events.\n     *\n     * @internal\n     * @returns A new {@link WireMetadata} object.\n     */\n    const createEventMetadata = (): Partial<WireMetadata> => {\n      return {\n        target: scrollRef.value?.$el as HTMLElement,\n        id: props.id,\n      }\n    }\n\n    /**\n     * Emits the `UserScrolled` event.\n     *\n     * @param position - The new position of scroll.\n     * @internal\n     */\n    const emitScroll = (position: number) => {\n      $x.emit('UserScrolled', position, createEventMetadata())\n    }\n\n    /**\n     * Emits the `UserChangedScrollDirection` event when the scrolling direction has changed.\n     *\n     * @param direction - The new direction of scroll.\n     * @internal\n     */\n    const emitScrollDirectionChange = (direction: ScrollDirection) => {\n      $x.emit('UserChangedScrollDirection', direction, createEventMetadata())\n    }\n\n    /**\n     * Emits the 'UserReachedScrollStart' event when the user reaches the start.\n     *\n     * @param isAtStart - A boolean indicating if the scroll is at the ending position.\n     * @internal\n     */\n    const emitScrollAtStart = (isAtStart: boolean) => {\n      $x.emit('UserReachedScrollStart', isAtStart, createEventMetadata())\n    }\n\n    /**\n     * Emits the 'UserAlmostReachedScrollEnd' event when the user is about to reach to end.\n     *\n     * @param isAlmostAtEnd - A boolean indicating if the scroll is almost at its ending position.\n     * @internal\n     */\n    const emitScrollAlmostAtEnd = (isAlmostAtEnd: boolean) => {\n      $x.emit('UserAlmostReachedScrollEnd', isAlmostAtEnd, createEventMetadata())\n    }\n\n    /**\n     * Emits the 'UserReachedScrollEnd' event when the user is about to reach to end.\n     *\n     * @param isAtEnd - A boolean indicating if the scroll is at the ending position.\n     * @internal\n     */\n    const emitScrollAtEnd = (isAtEnd: boolean) => {\n      $x.emit('UserReachedScrollEnd', isAtEnd, createEventMetadata())\n    }\n\n    /**\n     * Scrolls to initial position when the user has clicked the scroll to top button.\n     *\n     * @param scrollId - {@link XEventsTypes.UserClickedScrollToTop}.\n     * @internal\n     */\n    $x.on('UserClickedScrollToTop', false).subscribe((scrollId: string) => {\n      if (scrollId === props.id && scrollRef.value) {\n        ;(scrollRef.value.$el as HTMLElement).scrollTo({ top: 0, behavior: 'smooth' })\n      }\n    })\n\n    return {\n      scrollRef,\n      emitScrollAtEnd,\n      emitScrollAlmostAtEnd,\n      emitScrollAtStart,\n      emitScrollDirectionChange,\n      emitScroll,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserScrolled`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted after the user scrolls in this container. The payload is the scroll top distance in\n  pixels.\n- [`UserChangedScrollDirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted when the user changes the scroll direction. The payload is the new scrolling direction.\n- [`UserReachedScrollStart`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted when the user scrolls up to the initial position of the scroll.\n- [`UserAlmostReachedScrollEnd`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted when the user is about to reach the bottom part of the scroll.\n- [`UserReachedScrollEnd`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted when the user has reached the bottom part of the scroll.\n\n## Examples\n\nThe Scroll is a component that wraps the BaseScroll and provides it for a unique id.\n\n### Basic usage\n\n#### Overriding the properties\n\nIt renders an element with scroll, with the content passed in the `default slot`.\n\n```vue\n<template>\n  <Scroll id=\"exampleScrollId\" :throttleMs=\"50\" :distanceToBottom=\"300\">\n    <div class=\"content-scroll\">\n      <span>content1</span>\n      <span>content2</span>\n    </div>\n  </Scroll>\n</template>\n\n<script setup>\nimport { Scroll } from '@empathyco/x-components/scroll'\n</script>\n```\n\n#### Using scroll events.\n\n```vue\n<template>\n  <Scroll\n    @scroll=\"scroll\"\n    @scroll:direction-change=\"scrollDirectionChange\"\n    @scroll:at-start=\"scrollAtStart\"\n    @scroll:almost-at-end=\"scrollAlmostAtEnd\"\n    @scroll:at-end=\"scrollAtEnd\"\n    id=\"exampleScrollId\"\n    throttleMs=\"50\"\n    distanceToBottom=\"300\"\n  >\n    <div class=\"content-scroll\">\n      <span>content1</span>\n      <span>content2</span>\n    </div>\n  </Scroll>\n</template>\n\n<script setup>\nimport { Scroll } from '@empathyco/x-components/scroll'\n\nfunction scroll(position) {\n  console.log('scroll', position)\n}\nfunction scrollDirectionChange(direction) {\n  console.log('scroll:direction-change', direction)\n}\nfunction scrollAtStart(isAtStart) {\n  console.log('scroll:at-start', isAtStart)\n}\nfunction scrollAlmostAtEnd(isAlmostAtEnd) {\n  console.log('scroll:almost-at-end', isAlmostAtEnd)\n}\nfunction scrollAtEnd(isAtEnd) {\n  console.log('scroll:at-end', isAtEnd)\n}\n</script>\n```\n\n#### Using XEvents.\n\nYou can use the XEvents API to subscribe to events programmatically:\n\n```vue\n<template>\n  <Scroll throttleMs=\"50\" distanceToBottom=\"300\">\n    <div class=\"content-scroll\">\n      <span>content1</span>\n      <span>content2</span>\n    </div>\n  </Scroll>\n</template>\n\n<script setup>\nimport { onMounted } from 'vue'\nimport { Scroll } from '@empathyco/x-components/scroll'\nimport { use$x } from '../../../composables'\n\nconst x = use$x()\n\nonMounted(() => {\n  x.on('UserScrolled').subscribe(distance => {\n    console.log(distance)\n  })\n  x.on('UserChangedScrollDirection').subscribe(direction => {\n    console.log(direction)\n  })\n  x.on('UserReachedScrollStart').subscribe(isAtStart => {\n    console.log(isAtStart)\n  })\n  x.on('UserAlmostReachedScrollEnd').subscribe(isAlmostAtEnd => {\n    console.log(isAlmostAtEnd)\n  })\n  x.on('UserReachedScrollEnd').subscribe(isAtEnd => {\n    console.log(isAtEnd)\n  })\n})\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAwBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,UAAS,EAAG;AAC1B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,EAAE,EAAE;AACF,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,YAAY;AACtB,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AAEjB,QAAA,MAAM,YAAY,GAAG,EAA0B;AAE/C;;;;;AAKE;QACF,MAAM,mBAAkB,GAAI,MAA2B;YACrD,OAAO;AACL,gBAAA,MAAM,EAAE,SAAS,CAAC,KAAK,EAAE,GAAkB;gBAC3C,EAAE,EAAE,KAAK,CAAC,EAAE;aACd;AACF,QAAA,CAAA;AAEA;;;;;AAKE;AACF,QAAA,MAAM,aAAa,CAAC,QAAgB,KAAG;YACrC,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,QAAQ,EAAE,mBAAmB,EAAE,CAAA;AACzD,QAAA,CAAA;AAEA;;;;;AAKE;AACF,QAAA,MAAM,yBAAwB,GAAI,CAAC,SAA0B,KAAG;YAC9D,EAAE,CAAC,IAAI,CAAC,4BAA4B,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAA;AACxE,QAAA,CAAA;AAEA;;;;;AAKE;AACF,QAAA,MAAM,iBAAgB,GAAI,CAAC,SAAkB,KAAG;YAC9C,EAAE,CAAC,IAAI,CAAC,wBAAwB,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAA;AACpE,QAAA,CAAA;AAEA;;;;;AAKE;AACF,QAAA,MAAM,qBAAoB,GAAI,CAAC,aAAsB,KAAG;YACtD,EAAE,CAAC,IAAI,CAAC,4BAA4B,EAAE,aAAa,EAAE,mBAAmB,EAAE,CAAA;AAC5E,QAAA,CAAA;AAEA;;;;;AAKE;AACF,QAAA,MAAM,eAAc,GAAI,CAAC,OAAgB,KAAG;YAC1C,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,OAAO,EAAE,mBAAmB,EAAE,CAAA;AAChE,QAAA,CAAA;AAEA;;;;;AAKE;AACF,QAAA,EAAE,CAAC,EAAE,CAAC,wBAAwB,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,QAAgB,KAAG;YACnE,IAAI,QAAO,KAAM,KAAK,CAAC,EAAC,IAAK,SAAS,CAAC,KAAK,EAAE;AAC1C,gBAAA,SAAS,CAAC,KAAK,CAAC,GAAmB,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,UAAU,CAAA;YAC/E;AACF,QAAA,CAAC,CAAA;QAED,OAAO;YACL,SAAS;YACT,eAAe;YACf,qBAAqB;YACrB,iBAAiB;YACjB,yBAAyB;YACzB,UAAU;SACZ;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

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

@@ -1,6 +1,6 @@
-import _sfc_main from './banner.vue2.js';
+import _sfc_main from './banner2.vue.js';
 import { openBlock, createBlock, resolveDynamicComponent, mergeProps, toHandlers, withCtx, createElementVNode, createElementBlock, normalizeClass, toDisplayString, createCommentVNode } from 'vue';
-import './banner.vue3.js';
+import './banner3.vue.js';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
 const _hoisted_1 = ["src", "alt"];

package/js/x-modules/search/components/{banner.vue2.js → banner2.vue.js}

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

package/js/x-modules/search/components/{banner.vue2.js.map → banner2.vue.js.map}

@@ -1 +1 @@
-{"version":3,"file":"banner.vue2.js","sources":["../../../../../src/x-modules/search/components/banner.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"banner.url ? 'a' : 'figure'\"\n    v-if=\"!imageFailed\"\n    :href=\"banner.url\"\n    class=\"x-banner\"\n    data-test=\"banner\"\n    v-on=\"banner.url ? anchorEvents() : {}\"\n  >\n    <img\n      :src=\"banner.image\"\n      :alt=\"banner.title ? banner.title : 'Banner'\"\n      class=\"x-banner__image\"\n      data-test=\"banner-image\"\n      @error=\"imageFailed = true\"\n    />\n    <h2 v-if=\"banner.title\" class=\"x-banner__title\" :class=\"titleClass\" data-test=\"banner-title\">\n      {{ banner.title }}\n    </h2>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Banner as BannerModel } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent, ref } from 'vue'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { searchXModule } from '../x-module'\n\n/**.\n * A banner result is just an item that has been inserted into the search results to advertise\n * something. Usually it is the first item in the grid or it can be placed in the middle of them\n * and fill the whole row where appears.\n * The banner may be clickable or non-clickable depending on whether it has an associated URL\n * or not. It contains an image and, optionally, a title. In case the image does not\n * load due to an error the banner will not be rendered.\n *\n * Additionally, this component exposes the following props to modify the classes of the\n * elements: `titleClass`.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Banner',\n  xModule: searchXModule.name,\n  props: {\n    /**\n     * The banner data.\n     *\n     * @public\n     */\n    banner: {\n      type: Object as PropType<BannerModel>,\n      required: true,\n    },\n    titleClass: String,\n  },\n  setup(props) {\n    const xBus = useXBus()\n\n    /**\n     * Flag to handle banner image errors.\n     *\n     * @public\n     */\n    const imageFailed = ref(false)\n\n    /**\n     * Emits the banner click event.\n     *\n     * @internal\n     */\n    const emitClickEvent = (): void => {\n      xBus.emit('UserClickedABanner', props.banner)\n    }\n\n    /**\n     * Returns the events supported by the anchor.\n     *\n     * @returns Events supported by the anchor.\n     *\n     * @internal\n     */\n    const anchorEvents = (): Partial<{\n      [key in keyof GlobalEventHandlersEventMap]: () => void\n    }> => ({\n      click: () => emitClickEvent(),\n      auxclick: () => emitClickEvent(),\n      contextmenu: () => emitClickEvent(),\n    })\n\n    return {\n      imageFailed,\n      anchorEvents,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-banner {\n  display: flex;\n  flex-flow: column nowrap;\n  text-decoration: none;\n}\n\n.x-banner__image {\n  width: 100%;\n  object-fit: contain;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following event:\n\n- [`UserClickedABanner`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted when the user clicks the banner (if it has a URL).\n\n## See it in action\n\nIn this example, banner data is passed as a prop.\n\n_Here you can see how the `Banner` component is rendered._\n\n```vue\n<template>\n  <Banner :banner=\"banner\" />\n</template>\n\n<script setup>\nimport { Banner } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst banner = ref({\n  modelName: 'Banner',\n  id: 'banner-example',\n  url: 'https://my-website.com/summer-shirts',\n  image: 'https://my-website.com/images/summer-shirts.jpg',\n  title: 'Trendy summer shirts',\n  position: 1,\n})\n</script>\n```\n\n### Customizing the items with classes\n\nThe `titleClass` prop can be used to add classes to the banner title.\n\n```vue\n<template>\n  <Banner :banner=\"banner\" titleClass=\"x-bg-neutral-50\" />\n</template>\n\n<script setup>\nimport { Banner } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst banner = ref({\n  modelName: 'Banner',\n  id: 'banner-example',\n  url: 'https://my-website.com/summer-shirts',\n  image: 'https://my-website.com/images/summer-shirts.jpg',\n  title: 'Trendy summer shirts',\n  position: 1,\n})\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AA6BA;;;;;;;;;;;;AAYE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA+B;AACrC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD,QAAA,UAAU,EAAE,MAAM;AACnB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,IAAG,GAAI,OAAO,EAAC;AAErB;;;;AAIE;AACF,QAAA,MAAM,WAAU,GAAI,GAAG,CAAC,KAAK,CAAA;AAE7B;;;;AAIE;QACF,MAAM,cAAa,GAAI,MAAU;YAC/B,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC,MAAM,CAAA;AAC9C,QAAA,CAAA;AAEA;;;;;;AAME;AACF,QAAA,MAAM,YAAW,GAAI,OAEd;AACL,YAAA,KAAK,EAAE,MAAM,cAAc,EAAE;AAC7B,YAAA,QAAQ,EAAE,MAAM,cAAc,EAAE;AAChC,YAAA,WAAW,EAAE,MAAM,cAAc,EAAE;AACpC,SAAA,CAAA;QAED,OAAO;YACL,WAAW;YACX,YAAY;SACd;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"banner2.vue.js","sources":["../../../../../src/x-modules/search/components/banner.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"banner.url ? 'a' : 'figure'\"\n    v-if=\"!imageFailed\"\n    :href=\"banner.url\"\n    class=\"x-banner\"\n    data-test=\"banner\"\n    v-on=\"banner.url ? anchorEvents() : {}\"\n  >\n    <img\n      :src=\"banner.image\"\n      :alt=\"banner.title ? banner.title : 'Banner'\"\n      class=\"x-banner__image\"\n      data-test=\"banner-image\"\n      @error=\"imageFailed = true\"\n    />\n    <h2 v-if=\"banner.title\" class=\"x-banner__title\" :class=\"titleClass\" data-test=\"banner-title\">\n      {{ banner.title }}\n    </h2>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Banner as BannerModel } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent, ref } from 'vue'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { searchXModule } from '../x-module'\n\n/**.\n * A banner result is just an item that has been inserted into the search results to advertise\n * something. Usually it is the first item in the grid or it can be placed in the middle of them\n * and fill the whole row where appears.\n * The banner may be clickable or non-clickable depending on whether it has an associated URL\n * or not. It contains an image and, optionally, a title. In case the image does not\n * load due to an error the banner will not be rendered.\n *\n * Additionally, this component exposes the following props to modify the classes of the\n * elements: `titleClass`.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Banner',\n  xModule: searchXModule.name,\n  props: {\n    /**\n     * The banner data.\n     *\n     * @public\n     */\n    banner: {\n      type: Object as PropType<BannerModel>,\n      required: true,\n    },\n    titleClass: String,\n  },\n  setup(props) {\n    const xBus = useXBus()\n\n    /**\n     * Flag to handle banner image errors.\n     *\n     * @public\n     */\n    const imageFailed = ref(false)\n\n    /**\n     * Emits the banner click event.\n     *\n     * @internal\n     */\n    const emitClickEvent = (): void => {\n      xBus.emit('UserClickedABanner', props.banner)\n    }\n\n    /**\n     * Returns the events supported by the anchor.\n     *\n     * @returns Events supported by the anchor.\n     *\n     * @internal\n     */\n    const anchorEvents = (): Partial<{\n      [key in keyof GlobalEventHandlersEventMap]: () => void\n    }> => ({\n      click: () => emitClickEvent(),\n      auxclick: () => emitClickEvent(),\n      contextmenu: () => emitClickEvent(),\n    })\n\n    return {\n      imageFailed,\n      anchorEvents,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-banner {\n  display: flex;\n  flex-flow: column nowrap;\n  text-decoration: none;\n}\n\n.x-banner__image {\n  width: 100%;\n  object-fit: contain;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following event:\n\n- [`UserClickedABanner`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted when the user clicks the banner (if it has a URL).\n\n## See it in action\n\nIn this example, banner data is passed as a prop.\n\n_Here you can see how the `Banner` component is rendered._\n\n```vue\n<template>\n  <Banner :banner=\"banner\" />\n</template>\n\n<script setup>\nimport { Banner } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst banner = ref({\n  modelName: 'Banner',\n  id: 'banner-example',\n  url: 'https://my-website.com/summer-shirts',\n  image: 'https://my-website.com/images/summer-shirts.jpg',\n  title: 'Trendy summer shirts',\n  position: 1,\n})\n</script>\n```\n\n### Customizing the items with classes\n\nThe `titleClass` prop can be used to add classes to the banner title.\n\n```vue\n<template>\n  <Banner :banner=\"banner\" titleClass=\"x-bg-neutral-50\" />\n</template>\n\n<script setup>\nimport { Banner } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst banner = ref({\n  modelName: 'Banner',\n  id: 'banner-example',\n  url: 'https://my-website.com/summer-shirts',\n  image: 'https://my-website.com/images/summer-shirts.jpg',\n  title: 'Trendy summer shirts',\n  position: 1,\n})\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AA6BA;;;;;;;;;;;;AAYE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA+B;AACrC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD,QAAA,UAAU,EAAE,MAAM;AACnB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,IAAG,GAAI,OAAO,EAAC;AAErB;;;;AAIE;AACF,QAAA,MAAM,WAAU,GAAI,GAAG,CAAC,KAAK,CAAA;AAE7B;;;;AAIE;QACF,MAAM,cAAa,GAAI,MAAU;YAC/B,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC,MAAM,CAAA;AAC9C,QAAA,CAAA;AAEA;;;;;;AAME;AACF,QAAA,MAAM,YAAW,GAAI,OAEd;AACL,YAAA,KAAK,EAAE,MAAM,cAAc,EAAE;AAC7B,YAAA,QAAQ,EAAE,MAAM,cAAc,EAAE;AAChC,YAAA,WAAW,EAAE,MAAM,cAAc,EAAE;AACpC,SAAA,CAAA;QAED,OAAO;YACL,WAAW;YACX,YAAY;SACd;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/search/components/{banner.vue3.js → banner3.vue.js}

@@ -4,4 +4,4 @@ var css = ".x-banner[data-v-569db620]{display:flex;flex-flow:column nowrap;text-
 injectCss(css);
 
 export { css };
-//# sourceMappingURL=banner.vue3.js.map
+//# sourceMappingURL=banner3.vue.js.map

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

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

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

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

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

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

package/js/x-modules/search/components/fallback-disclaimer.vue.js

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

package/js/x-modules/search/components/{fallback-disclaimer.vue2.js → fallback-disclaimer2.vue.js}

@@ -18,4 +18,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=fallback-disclaimer.vue2.js.map
+//# sourceMappingURL=fallback-disclaimer2.vue.js.map

package/js/x-modules/search/components/{fallback-disclaimer.vue2.js.map → fallback-disclaimer2.vue.js.map}

@@ -1 +1 @@
-{"version":3,"file":"fallback-disclaimer.vue2.js","sources":["../../../../../src/x-modules/search/components/fallback-disclaimer.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"fromNoResultsWithFilters\"\n    class=\"x-fallback-disclaimer\"\n    data-test=\"fallback-disclaimer\"\n  >\n    <slot v-bind=\"{ query }\">\n      No results found for {{ query }} with the selected filters. The filters have been unselected.\n    </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 `FallbackDisclaimer` component shows a message if the filters have been removed\n * from the current search because there were no results.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'FallbackDisclaimer',\n  xModule: searchXModule.name,\n  setup() {\n    const { query, fromNoResultsWithFilters } = useState('search')\n\n    return { query, fromNoResultsWithFilters }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis default fallback disclaimer component reads the query from the search state and passes it to\nits default slot. This component will be rendered if there is a no results with filters situation.\n\n### Basic usage\n\n```vue\n<template>\n  <FallbackDisclaimer />\n</template>\n\n<script setup>\nimport { FallbackDisclaimer } from '@empathyco/x-components/search'\n</script>\n```\n\n### Customizing its contents\n\n```vue\n<template>\n  <FallbackDisclaimer>\n    <template #default=\"{ query }\">\n      No results found for '{{ query }}' with the selected filters. The filters have been\n      unselected.\n    </template>\n  </FallbackDisclaimer>\n</template>\n\n<script setup>\nimport { FallbackDisclaimer } from '@empathyco/x-components/search'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAiBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,KAAK,GAAA;QACH,MAAM,EAAE,KAAK,EAAE,wBAAuB,EAAE,GAAI,QAAQ,CAAC,QAAQ,CAAA;AAE7D,QAAA,OAAO,EAAE,KAAK,EAAE,wBAAuB,EAAE;IAC3C,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"fallback-disclaimer2.vue.js","sources":["../../../../../src/x-modules/search/components/fallback-disclaimer.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"fromNoResultsWithFilters\"\n    class=\"x-fallback-disclaimer\"\n    data-test=\"fallback-disclaimer\"\n  >\n    <slot v-bind=\"{ query }\">\n      No results found for {{ query }} with the selected filters. The filters have been unselected.\n    </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 `FallbackDisclaimer` component shows a message if the filters have been removed\n * from the current search because there were no results.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'FallbackDisclaimer',\n  xModule: searchXModule.name,\n  setup() {\n    const { query, fromNoResultsWithFilters } = useState('search')\n\n    return { query, fromNoResultsWithFilters }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis default fallback disclaimer component reads the query from the search state and passes it to\nits default slot. This component will be rendered if there is a no results with filters situation.\n\n### Basic usage\n\n```vue\n<template>\n  <FallbackDisclaimer />\n</template>\n\n<script setup>\nimport { FallbackDisclaimer } from '@empathyco/x-components/search'\n</script>\n```\n\n### Customizing its contents\n\n```vue\n<template>\n  <FallbackDisclaimer>\n    <template #default=\"{ query }\">\n      No results found for '{{ query }}' with the selected filters. The filters have been\n      unselected.\n    </template>\n  </FallbackDisclaimer>\n</template>\n\n<script setup>\nimport { FallbackDisclaimer } from '@empathyco/x-components/search'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAiBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,KAAK,GAAA;QACH,MAAM,EAAE,KAAK,EAAE,wBAAuB,EAAE,GAAI,QAAQ,CAAC,QAAQ,CAAA;AAE7D,QAAA,OAAO,EAAE,KAAK,EAAE,wBAAuB,EAAE;IAC3C,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/search/components/partial-query-button.vue.js

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"partial-query-button.vue2.js","sources":["../../../../../src/x-modules/search/components/partial-query-button.vue"],"sourcesContent":["<template>\n  <button\n    ref=\"partialButtonEl\"\n    class=\"x-partial-query-button xds:button\"\n    data-test=\"partial-query-button\"\n    @click=\"emitEvents\"\n  >\n    <slot v-bind=\"{ query }\">{{ query }}</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 { searchXModule } from '../x-module'\n\n/**\n * A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}\n * and {@link SearchXEvents.UserClickedPartialQuery} events, expressing the user\n * intention to set the partial query.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'PartialQueryButton',\n  xModule: searchXModule.name,\n  props: {\n    /**\n     * The query property.\n     *\n     * @public\n     */\n    query: {\n      type: String,\n      required: true,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const partialButtonEl = ref<HTMLElement>()\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: partialButtonEl.value,\n      feature: 'partial_result',\n    })\n\n    /**\n     * Emits events when the button is clicked.\n     *\n     * @public\n     */\n    const emitEvents = () => {\n      $x.emit('UserAcceptedAQuery', props.query, createEventMetadata())\n      $x.emit('UserClickedPartialQuery', props.query, createEventMetadata())\n    }\n\n    return {\n      partialButtonEl,\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 partial query. The event payload is the partial\n  query data.\n- [`UserClickedPartialQuery`](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 partial query. The event payload is the partial\n  query data.\n\n## Examples\n\n### Basic example\n\nA button that when pressed emits the `XEventsTypes.UserAcceptedAQuery` and\n`SearchXEvents.UserClickedPartialQuery` events, expressing the user intention to set the partial\nquery.\n\nThe component sets the current query as the new query and emits the `UserAcceptedAQuery` and\n`UserClickedPartialQuery` events when is clicked.\n\n```vue\n<template>\n  <PartialQueryButton :query=\"query\" />\n</template>\n\n<script setup>\nimport { PartialQueryButton } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst query = ref('shoes')\n</script>\n```\n\n### Customizing its contents\n\n```vue\n<template>\n  <PartialQueryButton :query=\"query\">\n    <template #default=\"{ query }\">\n      <span class=\"x-partial-query-button__text\">\n        Set the Partial query as the new query: {{ query }}!\n      </span>\n    </template>\n  </PartialQueryButton>\n</template>\n\n<script setup>\nimport { PartialQueryButton } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst query = ref('bags')\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAiBA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AAEjB,QAAA,MAAM,eAAc,GAAI,GAAG,EAAc;AAEzC;;;;;AAKE;AACF,QAAA,MAAM,mBAAkB,GAAI,OAAyC;YACnE,MAAM,EAAE,eAAe,CAAC,KAAK;AAC7B,YAAA,OAAO,EAAE,gBAAgB;AAC1B,SAAA,CAAA;AAED;;;;AAIE;QACF,MAAM,UAAS,GAAI,MAAI;AACrB,YAAA,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC,KAAK,EAAE,mBAAmB,EAAE,CAAA;AAChE,YAAA,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,KAAK,CAAC,KAAK,EAAE,mBAAmB,EAAE,CAAA;AACvE,QAAA,CAAA;QAEA,OAAO;YACL,eAAe;YACf,UAAU;SACZ;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"partial-query-button2.vue.js","sources":["../../../../../src/x-modules/search/components/partial-query-button.vue"],"sourcesContent":["<template>\n  <button\n    ref=\"partialButtonEl\"\n    class=\"x-partial-query-button xds:button\"\n    data-test=\"partial-query-button\"\n    @click=\"emitEvents\"\n  >\n    <slot v-bind=\"{ query }\">{{ query }}</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 { searchXModule } from '../x-module'\n\n/**\n * A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}\n * and {@link SearchXEvents.UserClickedPartialQuery} events, expressing the user\n * intention to set the partial query.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'PartialQueryButton',\n  xModule: searchXModule.name,\n  props: {\n    /**\n     * The query property.\n     *\n     * @public\n     */\n    query: {\n      type: String,\n      required: true,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const partialButtonEl = ref<HTMLElement>()\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: partialButtonEl.value,\n      feature: 'partial_result',\n    })\n\n    /**\n     * Emits events when the button is clicked.\n     *\n     * @public\n     */\n    const emitEvents = () => {\n      $x.emit('UserAcceptedAQuery', props.query, createEventMetadata())\n      $x.emit('UserClickedPartialQuery', props.query, createEventMetadata())\n    }\n\n    return {\n      partialButtonEl,\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 partial query. The event payload is the partial\n  query data.\n- [`UserClickedPartialQuery`](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 partial query. The event payload is the partial\n  query data.\n\n## Examples\n\n### Basic example\n\nA button that when pressed emits the `XEventsTypes.UserAcceptedAQuery` and\n`SearchXEvents.UserClickedPartialQuery` events, expressing the user intention to set the partial\nquery.\n\nThe component sets the current query as the new query and emits the `UserAcceptedAQuery` and\n`UserClickedPartialQuery` events when is clicked.\n\n```vue\n<template>\n  <PartialQueryButton :query=\"query\" />\n</template>\n\n<script setup>\nimport { PartialQueryButton } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst query = ref('shoes')\n</script>\n```\n\n### Customizing its contents\n\n```vue\n<template>\n  <PartialQueryButton :query=\"query\">\n    <template #default=\"{ query }\">\n      <span class=\"x-partial-query-button__text\">\n        Set the Partial query as the new query: {{ query }}!\n      </span>\n    </template>\n  </PartialQueryButton>\n</template>\n\n<script setup>\nimport { PartialQueryButton } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst query = ref('bags')\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAiBA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AAEjB,QAAA,MAAM,eAAc,GAAI,GAAG,EAAc;AAEzC;;;;;AAKE;AACF,QAAA,MAAM,mBAAkB,GAAI,OAAyC;YACnE,MAAM,EAAE,eAAe,CAAC,KAAK;AAC7B,YAAA,OAAO,EAAE,gBAAgB;AAC1B,SAAA,CAAA;AAED;;;;AAIE;QACF,MAAM,UAAS,GAAI,MAAI;AACrB,YAAA,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC,KAAK,EAAE,mBAAmB,EAAE,CAAA;AAChE,YAAA,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,KAAK,CAAC,KAAK,EAAE,mBAAmB,EAAE,CAAA;AACvE,QAAA,CAAA;QAEA,OAAO;YACL,eAAe;YACf,UAAU;SACZ;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/search/components/partial-results-list.vue.js

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"partial-results-list.vue2.js","sources":["../../../../../src/x-modules/search/components/partial-results-list.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"partialResults.length\"\n    class=\"x-partial-results-list\"\n    data-test=\"partial-results\"\n    tag=\"ul\"\n  >\n    <li\n      v-for=\"(partialResult, index) in partialResults\"\n      :key=\"`${partialResult.query}-${index}`\"\n      class=\"x-partial-result\"\n      data-test=\"partial-result\"\n    >\n      <!--\n       @slot (Required) Partial results item content\n           @binding {Partial} partialResult - Partial Result data\n      -->\n      <slot :partial-result=\"partialResult\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types/animation-prop'\nimport { searchXModule } from '../x-module'\n\n/**\n * It renders a list of partial results from {@link SearchState.partialResults} by default.\n * It also provides the partial result slot to customize the item with the partial result bound.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'PartialResultsList',\n  xModule: searchXModule.name,\n  props: {\n    /**\n     * Animation component that will be used to animate the partial results.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n\n    /**\n     * Maximum number of partial results to show.\n     *\n     * @public\n     */\n    maxItemsToRender: {\n      type: Number,\n      default: 5,\n    },\n  },\n  setup(props) {\n    /**\n     * The partials results from the search state.\n     *\n     * @public\n     */\n    const items = useState('search').partialResults\n\n    /**\n     * A limited number of partial results.\n     *\n     * @returns The partial results sliced by the maxItemsToRender.\n     *\n     * @internal\n     */\n    const partialResults = computed(() => items.value.slice(0, props.maxItemsToRender))\n\n    return {\n      partialResults,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-partial-results-list {\n  display: flex;\n  flex-flow: column nowrap;\n  list-style-type: none;\n  padding: 0;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component loops through an array of partials and exposes a slot to customize each partial.\n\n### Basic example\n\nIt renders a list of partial results using the default slot:\n\n```vue\n<template>\n  <PartialResultsList>\n    <template #default=\"{ partialResult }\">\n      <ResultsList :results=\"partialResult.results\" />\n    </template>\n  </PartialResultsList>\n</template>\n\n<script setup>\nimport { PartialResultsList } from '@empathyco/x-components/search'\nimport { ResultsList } from '@empathyco/x-components/search'\n</script>\n```\n\n### Configuring the number of partials\n\nSet the maximum partials to show to 3.\n\n```vue\n<template>\n  <PartialResultsList :maxItemsToRender=\"3\">\n    <template #default=\"{ partialResult }\">\n      <ResultsList :results=\"partialResult.results\" />\n    </template>\n  </PartialResultsList>\n</template>\n\n<script setup>\nimport { PartialResultsList } from '@empathyco/x-components/search'\nimport { ResultsList } from '@empathyco/x-components/search'\n</script>\n```\n\n### Rendering usage\n\nIt renders a list of partial results using the default slot. It will show the query, the partial\nresults and a button to update the query with the partial one.\n\n```vue\n<template>\n  <PartialResultsList>\n    <template #default=\"{ partialResult }\">\n      <span>{{ partialResult.query }}</span>\n      <BaseGrid :columns=\"4\" :items=\"partialResult.results\">\n        <template #result=\"{ item }\">\n          <BaseResultLink :result=\"item\">\n            <template #default=\"{ item }\">\n              <BaseResultImage :result=\"item\" />\n              <span class=\"x-result__title\">{{ item.name }}</span>\n            </template>\n          </BaseResultLink>\n        </template>\n      </BaseGrid>\n      <PartialQueryButton :query=\"partialResult.query\">\n        <template #default=\"{ query }\">Ver todos {{ query }}</template>\n      </PartialQueryButton>\n    </template>\n  </PartialResultsList>\n</template>\n\n<script setup>\nimport { PartialResultsList } from '@empathyco/x-components/search'\nimport { BaseGrid, BaseResultLink, BaseResultImage } from '@empathyco/x-components'\nimport { PartialQueryButton } from '@empathyco/x-components/search'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AA6BA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AAED;;;;AAIE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;QACF,MAAM,KAAI,GAAI,QAAQ,CAAC,QAAQ,CAAC,CAAC,cAAa;AAE9C;;;;;;AAME;QACF,MAAM,cAAa,GAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAA;QAElF,OAAO;YACL,cAAc;SAChB;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"partial-results-list2.vue.js","sources":["../../../../../src/x-modules/search/components/partial-results-list.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"partialResults.length\"\n    class=\"x-partial-results-list\"\n    data-test=\"partial-results\"\n    tag=\"ul\"\n  >\n    <li\n      v-for=\"(partialResult, index) in partialResults\"\n      :key=\"`${partialResult.query}-${index}`\"\n      class=\"x-partial-result\"\n      data-test=\"partial-result\"\n    >\n      <!--\n       @slot (Required) Partial results item content\n           @binding {Partial} partialResult - Partial Result data\n      -->\n      <slot :partial-result=\"partialResult\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types/animation-prop'\nimport { searchXModule } from '../x-module'\n\n/**\n * It renders a list of partial results from {@link SearchState.partialResults} by default.\n * It also provides the partial result slot to customize the item with the partial result bound.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'PartialResultsList',\n  xModule: searchXModule.name,\n  props: {\n    /**\n     * Animation component that will be used to animate the partial results.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n\n    /**\n     * Maximum number of partial results to show.\n     *\n     * @public\n     */\n    maxItemsToRender: {\n      type: Number,\n      default: 5,\n    },\n  },\n  setup(props) {\n    /**\n     * The partials results from the search state.\n     *\n     * @public\n     */\n    const items = useState('search').partialResults\n\n    /**\n     * A limited number of partial results.\n     *\n     * @returns The partial results sliced by the maxItemsToRender.\n     *\n     * @internal\n     */\n    const partialResults = computed(() => items.value.slice(0, props.maxItemsToRender))\n\n    return {\n      partialResults,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-partial-results-list {\n  display: flex;\n  flex-flow: column nowrap;\n  list-style-type: none;\n  padding: 0;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component loops through an array of partials and exposes a slot to customize each partial.\n\n### Basic example\n\nIt renders a list of partial results using the default slot:\n\n```vue\n<template>\n  <PartialResultsList>\n    <template #default=\"{ partialResult }\">\n      <ResultsList :results=\"partialResult.results\" />\n    </template>\n  </PartialResultsList>\n</template>\n\n<script setup>\nimport { PartialResultsList } from '@empathyco/x-components/search'\nimport { ResultsList } from '@empathyco/x-components/search'\n</script>\n```\n\n### Configuring the number of partials\n\nSet the maximum partials to show to 3.\n\n```vue\n<template>\n  <PartialResultsList :maxItemsToRender=\"3\">\n    <template #default=\"{ partialResult }\">\n      <ResultsList :results=\"partialResult.results\" />\n    </template>\n  </PartialResultsList>\n</template>\n\n<script setup>\nimport { PartialResultsList } from '@empathyco/x-components/search'\nimport { ResultsList } from '@empathyco/x-components/search'\n</script>\n```\n\n### Rendering usage\n\nIt renders a list of partial results using the default slot. It will show the query, the partial\nresults and a button to update the query with the partial one.\n\n```vue\n<template>\n  <PartialResultsList>\n    <template #default=\"{ partialResult }\">\n      <span>{{ partialResult.query }}</span>\n      <BaseGrid :columns=\"4\" :items=\"partialResult.results\">\n        <template #result=\"{ item }\">\n          <BaseResultLink :result=\"item\">\n            <template #default=\"{ item }\">\n              <BaseResultImage :result=\"item\" />\n              <span class=\"x-result__title\">{{ item.name }}</span>\n            </template>\n          </BaseResultLink>\n        </template>\n      </BaseGrid>\n      <PartialQueryButton :query=\"partialResult.query\">\n        <template #default=\"{ query }\">Ver todos {{ query }}</template>\n      </PartialQueryButton>\n    </template>\n  </PartialResultsList>\n</template>\n\n<script setup>\nimport { PartialResultsList } from '@empathyco/x-components/search'\nimport { BaseGrid, BaseResultLink, BaseResultImage } from '@empathyco/x-components'\nimport { PartialQueryButton } from '@empathyco/x-components/search'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AA6BA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AAED;;;;AAIE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;QACF,MAAM,KAAI,GAAI,QAAQ,CAAC,QAAQ,CAAC,CAAC,cAAa;AAE9C;;;;;;AAME;QACF,MAAM,cAAa,GAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAA;QAElF,OAAO;YACL,cAAc;SAChB;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

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

@@ -4,4 +4,4 @@ var css = ".x-partial-results-list[data-v-c06ba696]{display:flex;flex-flow:colum
 injectCss(css);
 
 export { css };
-//# sourceMappingURL=partial-results-list.vue3.js.map
+//# sourceMappingURL=partial-results-list3.vue.js.map

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

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

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

@@ -1,6 +1,6 @@
-import _sfc_main from './promoted.vue2.js';
+import _sfc_main from './promoted2.vue.js';
 import { openBlock, createElementBlock, withModifiers, createElementVNode, normalizeClass, toDisplayString } from 'vue';
-import './promoted.vue3.js';
+import './promoted3.vue.js';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
 const _hoisted_1 = ["href"];

package/js/x-modules/search/components/{promoted.vue2.js → promoted2.vue.js}

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

package/js/x-modules/search/components/{promoted.vue2.js.map → promoted2.vue.js.map}

@@ -1 +1 @@
-{"version":3,"file":"promoted.vue2.js","sources":["../../../../../src/x-modules/search/components/promoted.vue"],"sourcesContent":["<template>\n  <a\n    :href=\"promoted.url\"\n    class=\"x-promoted\"\n    data-test=\"promoted\"\n    @click=\"emitUserClickedAPromoted\"\n    @click.right=\"emitUserClickedAPromoted\"\n    @click.middle=\"emitUserClickedAPromoted\"\n  >\n    <img :src=\"promoted.image\" class=\"x-promoted__image\" :alt=\"promoted.title\" />\n    <h2 class=\"x-promoted__title\" :class=\"titleClass\" data-test=\"promoted-title\">\n      {{ promoted.title }}\n    </h2>\n  </a>\n</template>\n\n<script lang=\"ts\">\nimport type { Promoted as PromotedModel } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent } from 'vue'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { searchXModule } from '../x-module'\n\n/**\n * A promoted result is just an item that has been inserted into the search results to advertise\n * something. Usually it is one of the first items in the grid, and has the same shape as a\n * result. It just contains a link to the promoted content, an image, and a title.\n *\n * Additionally, this component exposes the following props to modify the classes of the\n * elements: `titleClass`.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Promoted',\n  xModule: searchXModule.name,\n  props: {\n    /**\n     * The promoted data.\n     *\n     * @public\n     */\n    promoted: {\n      type: Object as PropType<PromotedModel>,\n      required: true,\n    },\n    titleClass: String,\n  },\n  setup(props) {\n    const xBus = useXBus()\n\n    /**\n     * Emits the promoted click event.\n     *\n     * @internal\n     */\n    const emitUserClickedAPromoted = () => {\n      xBus.emit('UserClickedAPromoted', props.promoted)\n    }\n\n    return {\n      emitUserClickedAPromoted,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-promoted {\n  display: flex;\n  flex-flow: column nowrap;\n  text-decoration: none;\n}\n\n.x-promoted__image {\n  width: 100%;\n  object-fit: contain;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following event:\n\n- [`UserClickedAPromoted`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted when the user clicks the promoted item (if it has a URL).\n\n## See it in action\n\nIn this example, promoted data is passed as a prop.\n\n_Here you can see how the `Promoted` component is rendered._\n\n```vue\n<template>\n  <Promoted :promoted=\"promoted\" />\n</template>\n\n<script setup>\nimport { Promoted } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst promoted = ref({\n  modelName: 'Promoted',\n  id: 'promoted-example',\n  url: 'https://my-website.com/summer-shirts',\n  image: 'https://my-website.com/images/summer-shirts.jpg',\n  title: 'Trendy summer shirts',\n  position: 1,\n})\n</script>\n```\n\n### Customizing the items with classes\n\nThe `titleClass` prop can be used to add classes to the promoted title.\n\n```vue\n<template>\n  <Promoted :promoted=\"promoted\" titleClass=\"x-bg-neutral-50\" />\n</template>\n\n<script setup>\nimport { Promoted } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst promoted = ref({\n  modelName: 'Promoted',\n  id: 'promoted-example',\n  url: 'https://my-website.com/summer-shirts',\n  image: 'https://my-website.com/images/summer-shirts.jpg',\n  title: 'Trendy summer shirts',\n  position: 1,\n})\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAuBA;;;;;;;;;AASE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,UAAU;IAChB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD,QAAA,UAAU,EAAE,MAAM;AACnB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,IAAG,GAAI,OAAO,EAAC;AAErB;;;;AAIE;QACF,MAAM,wBAAuB,GAAI,MAAI;YACnC,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,QAAQ,CAAA;AAClD,QAAA,CAAA;QAEA,OAAO;YACL,wBAAwB;SAC1B;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"promoted2.vue.js","sources":["../../../../../src/x-modules/search/components/promoted.vue"],"sourcesContent":["<template>\n  <a\n    :href=\"promoted.url\"\n    class=\"x-promoted\"\n    data-test=\"promoted\"\n    @click=\"emitUserClickedAPromoted\"\n    @click.right=\"emitUserClickedAPromoted\"\n    @click.middle=\"emitUserClickedAPromoted\"\n  >\n    <img :src=\"promoted.image\" class=\"x-promoted__image\" :alt=\"promoted.title\" />\n    <h2 class=\"x-promoted__title\" :class=\"titleClass\" data-test=\"promoted-title\">\n      {{ promoted.title }}\n    </h2>\n  </a>\n</template>\n\n<script lang=\"ts\">\nimport type { Promoted as PromotedModel } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent } from 'vue'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { searchXModule } from '../x-module'\n\n/**\n * A promoted result is just an item that has been inserted into the search results to advertise\n * something. Usually it is one of the first items in the grid, and has the same shape as a\n * result. It just contains a link to the promoted content, an image, and a title.\n *\n * Additionally, this component exposes the following props to modify the classes of the\n * elements: `titleClass`.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Promoted',\n  xModule: searchXModule.name,\n  props: {\n    /**\n     * The promoted data.\n     *\n     * @public\n     */\n    promoted: {\n      type: Object as PropType<PromotedModel>,\n      required: true,\n    },\n    titleClass: String,\n  },\n  setup(props) {\n    const xBus = useXBus()\n\n    /**\n     * Emits the promoted click event.\n     *\n     * @internal\n     */\n    const emitUserClickedAPromoted = () => {\n      xBus.emit('UserClickedAPromoted', props.promoted)\n    }\n\n    return {\n      emitUserClickedAPromoted,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-promoted {\n  display: flex;\n  flex-flow: column nowrap;\n  text-decoration: none;\n}\n\n.x-promoted__image {\n  width: 100%;\n  object-fit: contain;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following event:\n\n- [`UserClickedAPromoted`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted when the user clicks the promoted item (if it has a URL).\n\n## See it in action\n\nIn this example, promoted data is passed as a prop.\n\n_Here you can see how the `Promoted` component is rendered._\n\n```vue\n<template>\n  <Promoted :promoted=\"promoted\" />\n</template>\n\n<script setup>\nimport { Promoted } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst promoted = ref({\n  modelName: 'Promoted',\n  id: 'promoted-example',\n  url: 'https://my-website.com/summer-shirts',\n  image: 'https://my-website.com/images/summer-shirts.jpg',\n  title: 'Trendy summer shirts',\n  position: 1,\n})\n</script>\n```\n\n### Customizing the items with classes\n\nThe `titleClass` prop can be used to add classes to the promoted title.\n\n```vue\n<template>\n  <Promoted :promoted=\"promoted\" titleClass=\"x-bg-neutral-50\" />\n</template>\n\n<script setup>\nimport { Promoted } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst promoted = ref({\n  modelName: 'Promoted',\n  id: 'promoted-example',\n  url: 'https://my-website.com/summer-shirts',\n  image: 'https://my-website.com/images/summer-shirts.jpg',\n  title: 'Trendy summer shirts',\n  position: 1,\n})\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAuBA;;;;;;;;;AASE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,UAAU;IAChB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD,QAAA,UAAU,EAAE,MAAM;AACnB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,IAAG,GAAI,OAAO,EAAC;AAErB;;;;AAIE;QACF,MAAM,wBAAuB,GAAI,MAAI;YACnC,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,QAAQ,CAAA;AAClD,QAAA,CAAA;QAEA,OAAO;YACL,wBAAwB;SAC1B;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/search/components/{promoted.vue3.js → promoted3.vue.js}

@@ -4,4 +4,4 @@ var css = ".x-promoted[data-v-4a8fc4b3]{display:flex;flex-flow:column nowrap;tex
 injectCss(css);
 
 export { css };
-//# sourceMappingURL=promoted.vue3.js.map
+//# sourceMappingURL=promoted3.vue.js.map

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

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

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

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

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

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

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

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

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

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