@empathyco/x-components 3.0.0-alpha.34 → 3.0.0-alpha.35

package/js/x-modules/scroll/components/main-scroll-item.vue_rollup-plugin-vue=script.js

@@ -8,7 +8,7 @@ import '../../../components/animations/collapse-height.vue.js';
 import '../../../components/animations/collapse-width.vue.js';
 import '../../../components/animations/cross-fade.vue.js';
 import '../../../components/animations/fade-and-slide.vue.js';
-import '../../../components/staggering-transition-group.vue.js';
+import '../../../components/animations/staggering-transition-group.vue.js';
 import '../../../components/animations/staggered-fade-and-slide.vue.js';
 import '../../../components/animations/translate-from-left.vue.js';
 import '../../../components/animations/translate-from-right.vue.js';
@@ -69,16 +69,26 @@ import '../../../components/icons/trash.vue.js';
 import '../../../components/icons/trending-tiny.vue.js';
 import '../../../components/icons/trending.vue.js';
 import '../../../components/icons/user.vue.js';
-import '../../../components/modals/base-events-modal-close.vue.js';
+import { State } from '../../../components/decorators/store.decorators.js';
+import '../../../components/x-component.utils.js';
+import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import { scrollXModule } from '../x-module.js';
+import { ScrollObserverKey } from './scroll.const.js';
 import '../../../components/modals/base-modal.vue.js';
+import '../../../components/modals/base-id-modal.vue.js';
+import '../../../components/scroll/scroll.mixin.js';
+import '../../../components/scroll/base-scroll.vue.js';
+import '../../../components/layouts/fixed-header-and-asides-layout.vue.js';
+import '../../../components/panels/base-toggle-panel.vue.js';
+import '../../../components/panels/base-id-toggle-panel.vue.js';
+import '../../../components/layouts/multi-column-max-width-layout.vue.js';
+import '../../../components/layouts/single-column-layout.vue.js';
+import '../../../components/modals/base-events-modal-close.vue.js';
 import '../../../components/modals/base-events-modal.vue.js';
 import '../../../components/modals/base-events-modal-open.vue.js';
-import '../../../components/modals/base-id-modal.vue.js';
 import '../../../components/modals/base-id-modal-close.vue.js';
 import '../../../components/modals/base-id-modal-open.vue.js';
-import '../../../components/panels/base-toggle-panel.vue.js';
 import '../../../components/panels/base-header-toggle-panel.vue.js';
-import '../../../components/panels/base-id-toggle-panel.vue.js';
 import '../../../components/panels/base-id-toggle-panel-button.vue.js';
 import '../../../components/result/base-result-add-to-cart.vue.js';
 import '../../../components/result/base-result-current-price.vue.js';
@@ -87,8 +97,6 @@ import '../../../components/result/base-result-link.vue.js';
 import '../../../components/result/base-result-previous-price.vue.js';
 import '../../../components/result/base-result-fallback-image.vue.js';
 import '../../../components/result/base-result-placeholder-image.vue.js';
-import '../../../components/scroll/scroll.mixin.js';
-import '../../../components/scroll/base-scroll.vue.js';
 import '../../../components/suggestions/base-suggestion.vue.js';
 import '../../../components/suggestions/base-suggestions.vue.js';
 import '../../../components/auto-progress-bar.vue.js';
@@ -99,13 +107,6 @@ import '../../../components/base-variable-column-grid.vue.js';
 import '../../../components/decorators/debounce.decorators.js';
 import '../../../components/sliding-panel.vue.js';
 import '../../../components/items-list.vue.js';
-import { State } from '../../../components/decorators/store.decorators.js';
-import '../../../components/x-component.utils.js';
-import { xComponentMixin } from '../../../components/x-component.mixin.js';
-import { scrollXModule } from '../x-module.js';
-import { ScrollObserverKey } from './scroll.const.js';
-import '../../../components/layouts/multi-column-max-width-layout.vue.js';
-import '../../../components/layouts/single-column-layout.vue.js';
 import '../../../components/location-provider.vue.js';
 import '../../../components/global-x-bus.vue.js';
 import '../../../components/snippet-callbacks.vue.js';

package/js/x-modules/scroll/components/main-scroll-item.vue_rollup-plugin-vue=script.js.map

@@ -1 +1 @@
-{"version":3,"file":"main-scroll-item.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/scroll/components/main-scroll-item.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\nimport { Identifiable } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { NoElement, State, xComponentMixin } from '../../../components';\nimport { XInject } from '../../../components/decorators/injection.decorators';\nimport { scrollXModule } from '../x-module';\nimport { ScrollObserverKey } from './scroll.const';\nimport { ScrollVisibilityObserver } from './scroll.types';\n\n/**\n * Wrapper for elements contained in the {@link MainScroll} that should store/restore its\n * position.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(scrollXModule)]\n})\nexport default class MainScrollItem extends Vue {\n  /**\n   * Rendered HTML node.\n   *\n   * @public\n   */\n  public $el!: HTMLElement;\n\n  /**\n   * The item data. Used to set the scroll identifier.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  public item!: Identifiable;\n\n  /**\n   * The tag to render.\n   *\n   * @public\n   */\n  @Prop({ default: () => NoElement })\n  public tag!: string | typeof Vue;\n\n  /**\n   * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem.item}\n   * `id` property, this component should be scrolled into view.\n   *\n   * @internal\n   */\n  @State('scroll', 'pendingScrollTo')\n  public pendingScrollTo!: string;\n\n  /**\n   * Observer to detect the first visible element.\n   *\n   * @internal\n   */\n  @XInject(ScrollObserverKey)\n  public firstVisibleItemObserver!: ScrollVisibilityObserver | null;\n\n  /**\n   * Initialise scroll behavior.\n   * - Observes the rendered element to detect if it is the first visible item.\n   * - If the rendered element matches the {@link MainScrollItem.pendingScrollTo}, scrolls the\n   * element into the first position of the view.\n   *\n   * @internal\n   */\n  async mounted(): Promise<void> {\n    await this.$nextTick(); // Mounted does not guarantee that child components are mounted too\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    this.$watch('firstVisibleItemObserver', this.observeItem, { immediate: true });\n  }\n\n  /**\n   * Detaches the observer from the rendered element to prevent memory leaks.\n   *\n   * @internal\n   */\n  beforeDestroy(): void {\n    this.firstVisibleItemObserver?.unobserve(this.$el);\n  }\n\n  /**\n   * Initialises the element visibility observation, stopping the previous one if it has.\n   *\n   * @param newObserver - The new observer for the HTML element.\n   * @param oldObserver - The old observer for the HTML element.\n   */\n  observeItem(\n    newObserver: ScrollVisibilityObserver | null,\n    oldObserver: ScrollVisibilityObserver | null\n  ): void {\n    oldObserver?.unobserve(this.$el);\n    newObserver?.observe(this.$el);\n    if (this.pendingScrollTo === this.item.id) {\n      this.$el.scrollIntoView();\n      this.$x.emit('ScrollRestoreSucceeded');\n    }\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA;;;;;;AASA;IAA4C,kCAAG;IAA/C;;KAiFC;;;;;;;;;IAhCO,gCAAO,GAAb;;;;4BACE,qBAAM,IAAI,CAAC,SAAS,EAAE,EAAA;;wBAAtB,SAAsB,CAAC;;wBAEvB,IAAI,CAAC,MAAM,CAAC,0BAA0B,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;;;;;KAChF;;;;;;IAOD,sCAAa,GAAb;;QACE,MAAA,IAAI,CAAC,wBAAwB,0CAAE,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACpD;;;;;;;IAQD,oCAAW,GAAX,UACE,WAA4C,EAC5C,WAA4C;QAE5C,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACjC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC/B,IAAI,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE;YACzC,IAAI,CAAC,GAAG,CAAC,cAAc,EAAE,CAAC;YAC1B,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;SACxC;KACF;IAlED;QADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;gDACE;IAQ3B;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,cAAM,OAAA,SAAS,GAAA,EAAE,CAAC;+CACF;IASjC;QADC,KAAK,CAAC,QAAQ,EAAE,iBAAiB,CAAC;2DACH;IAQhC;QADC,OAAO,CAAC,iBAAiB,CAAC;oEACuC;IAvC/C,cAAc;QAHlC,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;SACzC,CAAC;OACmB,cAAc,CAiFlC;IAAD,qBAAC;CAAA,CAjF2C,GAAG;;;;"}
+{"version":3,"file":"main-scroll-item.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/scroll/components/main-scroll-item.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\nimport { Identifiable } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { NoElement, State, xComponentMixin } from '../../../components';\nimport { XInject } from '../../../components/decorators/injection.decorators';\nimport { scrollXModule } from '../x-module';\nimport { ScrollObserverKey } from './scroll.const';\nimport { ScrollVisibilityObserver } from './scroll.types';\n\n/**\n * Wrapper for elements contained in the {@link MainScroll} that should store/restore its\n * position.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(scrollXModule)]\n})\nexport default class MainScrollItem extends Vue {\n  /**\n   * Rendered HTML node.\n   *\n   * @public\n   */\n  public $el!: HTMLElement;\n\n  /**\n   * The item data. Used to set the scroll identifier.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  public item!: Identifiable;\n\n  /**\n   * The tag to render.\n   *\n   * @public\n   */\n  @Prop({ default: () => NoElement })\n  public tag!: string | typeof Vue;\n\n  /**\n   * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem.item}\n   * `id` property, this component should be scrolled into view.\n   *\n   * @internal\n   */\n  @State('scroll', 'pendingScrollTo')\n  public pendingScrollTo!: string;\n\n  /**\n   * Observer to detect the first visible element.\n   *\n   * @internal\n   */\n  @XInject(ScrollObserverKey)\n  public firstVisibleItemObserver!: ScrollVisibilityObserver | null;\n\n  /**\n   * Initialise scroll behavior.\n   * - Observes the rendered element to detect if it is the first visible item.\n   * - If the rendered element matches the {@link MainScrollItem.pendingScrollTo}, scrolls the\n   * element into the first position of the view.\n   *\n   * @internal\n   */\n  async mounted(): Promise<void> {\n    await this.$nextTick(); // Mounted does not guarantee that child components are mounted too\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    this.$watch('firstVisibleItemObserver', this.observeItem, { immediate: true });\n  }\n\n  /**\n   * Detaches the observer from the rendered element to prevent memory leaks.\n   *\n   * @internal\n   */\n  beforeDestroy(): void {\n    this.firstVisibleItemObserver?.unobserve(this.$el);\n  }\n\n  /**\n   * Initialises the element visibility observation, stopping the previous one if it has.\n   *\n   * @param newObserver - The new observer for the HTML element.\n   * @param oldObserver - The old observer for the HTML element.\n   */\n  observeItem(\n    newObserver: ScrollVisibilityObserver | null,\n    oldObserver: ScrollVisibilityObserver | null\n  ): void {\n    oldObserver?.unobserve(this.$el);\n    newObserver?.observe(this.$el);\n    if (this.pendingScrollTo === this.item.id) {\n      this.$el.scrollIntoView();\n      this.$x.emit('ScrollRestoreSucceeded');\n    }\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA;;;;;;AASA;IAA4C,kCAAG;IAA/C;;KAiFC;;;;;;;;;IAhCO,gCAAO,GAAb;;;;4BACE,qBAAM,IAAI,CAAC,SAAS,EAAE,EAAA;;wBAAtB,SAAsB,CAAC;;wBAEvB,IAAI,CAAC,MAAM,CAAC,0BAA0B,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;;;;;KAChF;;;;;;IAOD,sCAAa,GAAb;;QACE,MAAA,IAAI,CAAC,wBAAwB,0CAAE,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACpD;;;;;;;IAQD,oCAAW,GAAX,UACE,WAA4C,EAC5C,WAA4C;QAE5C,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACjC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC/B,IAAI,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE;YACzC,IAAI,CAAC,GAAG,CAAC,cAAc,EAAE,CAAC;YAC1B,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;SACxC;KACF;IAlED;QADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;gDACE;IAQ3B;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,cAAM,OAAA,SAAS,GAAA,EAAE,CAAC;+CACF;IASjC;QADC,KAAK,CAAC,QAAQ,EAAE,iBAAiB,CAAC;2DACH;IAQhC;QADC,OAAO,CAAC,iBAAiB,CAAC;oEACuC;IAvC/C,cAAc;QAHlC,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;SACzC,CAAC;OACmB,cAAc,CAiFlC;IAAD,qBAAC;CAAA,CAjF2C,GAAG;;;;"}

package/js/x-modules/scroll/components/scroll-to-top.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-to-top.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      v-on=\"$listeners\"\n      class=\"x-button x-scroll-to-top\"\n      data-test=\"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\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { State, xComponentMixin } from '../../../components';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { NoElement } from '../../../components/no-element';\n  import { Dictionary } from '../../../utils';\n  import { XEventsTypes } from '../../../wiring';\n  import { ScrollComponentState } from '../store';\n  import { scrollXModule } from '../x-module';\n  import { 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   */\n  @Component({\n    mixins: [xComponentMixin(scrollXModule)],\n    components: { BaseEventButton }\n  })\n  export default class ScrollToTop extends Vue {\n    /**\n     * Animation to use for showing/hiding the button.\n     *\n     * @public\n     */\n    @Prop({ default: () => NoElement })\n    public animation!: Vue | string;\n\n    /**\n     * Threshold in pixels from the top to show the button.\n     *\n     * @public\n     */\n    @Prop()\n    public thresholdPx?: number;\n\n    /**\n     * Id of the target scroll component.\n     *\n     * @public\n     */\n    @Prop({ default: MainScrollId })\n    public scrollId!: string;\n\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    @State('scroll', 'data')\n    public scrollPositionsMap!: Dictionary<ScrollComponentState>;\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    protected get scrollData(): ScrollComponentState {\n      return this.scrollId && this.scrollPositionsMap[this.scrollId]\n        ? this.scrollPositionsMap[this.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    protected get events(): Partial<XEventsTypes> {\n      return { UserClickedScrollToTop: this.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    protected get useThresholdStrategy(): boolean {\n      return typeof this.thresholdPx === 'number';\n    }\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    protected get isThresholdReached(): boolean {\n      return this.useThresholdStrategy && this.scrollData.position > this.thresholdPx!;\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    protected get isVisible(): boolean {\n      return this.useThresholdStrategy ? this.isThresholdReached : this.hasAlmostReachedScrollEnd;\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    protected get hasAlmostReachedScrollEnd(): boolean {\n      return this.scrollData.hasAlmostReachedEnd && this.scrollData.direction === 'DOWN';\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\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>\n  import { ScrollToTop } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'ScrollToTopTest',\n    components: {\n      ScrollToTop\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedScrollToTop`: the event is emitted after the user clicks the button. The event payload\n  is the id of the scroll that it going to be scrolled.\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"scroll-to-top.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      v-on=\"$listeners\"\n      class=\"x-button x-scroll-to-top\"\n      data-test=\"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\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { State, xComponentMixin } from '../../../components';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { NoElement } from '../../../components/no-element';\n  import { Dictionary } from '../../../utils';\n  import { XEventsTypes } from '../../../wiring';\n  import { ScrollComponentState } from '../store';\n  import { scrollXModule } from '../x-module';\n  import { 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   */\n  @Component({\n    mixins: [xComponentMixin(scrollXModule)],\n    components: { BaseEventButton }\n  })\n  export default class ScrollToTop extends Vue {\n    /**\n     * Animation to use for showing/hiding the button.\n     *\n     * @public\n     */\n    @Prop({ default: () => NoElement })\n    public animation!: Vue | string;\n\n    /**\n     * Threshold in pixels from the top to show the button.\n     *\n     * @public\n     */\n    @Prop()\n    public thresholdPx?: number;\n\n    /**\n     * Id of the target scroll component.\n     *\n     * @public\n     */\n    @Prop({ default: MainScrollId })\n    public scrollId!: string;\n\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    @State('scroll', 'data')\n    public scrollPositionsMap!: Dictionary<ScrollComponentState>;\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    protected get scrollData(): ScrollComponentState {\n      return this.scrollId && this.scrollPositionsMap[this.scrollId]\n        ? this.scrollPositionsMap[this.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    protected get events(): Partial<XEventsTypes> {\n      return { UserClickedScrollToTop: this.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    protected get useThresholdStrategy(): boolean {\n      return typeof this.thresholdPx === 'number';\n    }\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    protected get isThresholdReached(): boolean {\n      return this.useThresholdStrategy && this.scrollData.position > this.thresholdPx!;\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    protected get isVisible(): boolean {\n      return this.useThresholdStrategy ? this.isThresholdReached : this.hasAlmostReachedScrollEnd;\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    protected get hasAlmostReachedScrollEnd(): boolean {\n      return this.scrollData.hasAlmostReachedEnd && this.scrollData.direction === 'DOWN';\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\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>\n  import { ScrollToTop } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'ScrollToTopTest',\n    components: {\n      ScrollToTop\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedScrollToTop`: the event is emitted after the user clicks the button. The event payload\n  is the id of the scroll that it going to be scrolled.\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/scroll/components/scroll-to-top.vue_rollup-plugin-vue=script.js

@@ -8,7 +8,7 @@ import '../../../components/animations/collapse-height.vue.js';
 import '../../../components/animations/collapse-width.vue.js';
 import '../../../components/animations/cross-fade.vue.js';
 import '../../../components/animations/fade-and-slide.vue.js';
-import '../../../components/staggering-transition-group.vue.js';
+import '../../../components/animations/staggering-transition-group.vue.js';
 import '../../../components/animations/staggered-fade-and-slide.vue.js';
 import '../../../components/animations/translate-from-left.vue.js';
 import '../../../components/animations/translate-from-right.vue.js';
@@ -69,16 +69,26 @@ import '../../../components/icons/trash.vue.js';
 import '../../../components/icons/trending-tiny.vue.js';
 import '../../../components/icons/trending.vue.js';
 import '../../../components/icons/user.vue.js';
-import '../../../components/modals/base-events-modal-close.vue.js';
+import { State } from '../../../components/decorators/store.decorators.js';
+import '../../../components/x-component.utils.js';
+import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import { scrollXModule } from '../x-module.js';
+import { MainScrollId } from './scroll.const.js';
 import '../../../components/modals/base-modal.vue.js';
+import '../../../components/modals/base-id-modal.vue.js';
+import '../../../components/scroll/scroll.mixin.js';
+import '../../../components/scroll/base-scroll.vue.js';
+import '../../../components/layouts/fixed-header-and-asides-layout.vue.js';
+import '../../../components/panels/base-toggle-panel.vue.js';
+import '../../../components/panels/base-id-toggle-panel.vue.js';
+import '../../../components/layouts/multi-column-max-width-layout.vue.js';
+import '../../../components/layouts/single-column-layout.vue.js';
+import '../../../components/modals/base-events-modal-close.vue.js';
 import '../../../components/modals/base-events-modal.vue.js';
 import '../../../components/modals/base-events-modal-open.vue.js';
-import '../../../components/modals/base-id-modal.vue.js';
 import '../../../components/modals/base-id-modal-close.vue.js';
 import '../../../components/modals/base-id-modal-open.vue.js';
-import '../../../components/panels/base-toggle-panel.vue.js';
 import '../../../components/panels/base-header-toggle-panel.vue.js';
-import '../../../components/panels/base-id-toggle-panel.vue.js';
 import '../../../components/panels/base-id-toggle-panel-button.vue.js';
 import '../../../components/result/base-result-add-to-cart.vue.js';
 import '../../../components/result/base-result-current-price.vue.js';
@@ -87,8 +97,6 @@ import '../../../components/result/base-result-link.vue.js';
 import '../../../components/result/base-result-previous-price.vue.js';
 import '../../../components/result/base-result-fallback-image.vue.js';
 import '../../../components/result/base-result-placeholder-image.vue.js';
-import '../../../components/scroll/scroll.mixin.js';
-import '../../../components/scroll/base-scroll.vue.js';
 import '../../../components/suggestions/base-suggestion.vue.js';
 import '../../../components/suggestions/base-suggestions.vue.js';
 import '../../../components/auto-progress-bar.vue.js';
@@ -99,13 +107,6 @@ import '../../../components/base-variable-column-grid.vue.js';
 import '../../../components/decorators/debounce.decorators.js';
 import '../../../components/sliding-panel.vue.js';
 import '../../../components/items-list.vue.js';
-import { State } from '../../../components/decorators/store.decorators.js';
-import '../../../components/x-component.utils.js';
-import { xComponentMixin } from '../../../components/x-component.mixin.js';
-import { scrollXModule } from '../x-module.js';
-import { MainScrollId } from './scroll.const.js';
-import '../../../components/layouts/multi-column-max-width-layout.vue.js';
-import '../../../components/layouts/single-column-layout.vue.js';
 import '../../../components/location-provider.vue.js';
 import '../../../components/global-x-bus.vue.js';
 import '../../../components/snippet-callbacks.vue.js';

package/js/x-modules/scroll/components/scroll-to-top.vue_rollup-plugin-vue=script.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-to-top.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/scroll/components/scroll-to-top.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { State, xComponentMixin } from '../../../components';\nimport BaseEventButton from '../../../components/base-event-button.vue';\nimport { NoElement } from '../../../components/no-element';\nimport { Dictionary } from '../../../utils';\nimport { XEventsTypes } from '../../../wiring';\nimport { ScrollComponentState } from '../store';\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 */\n@Component({\n  mixins: [xComponentMixin(scrollXModule)],\n  components: { BaseEventButton }\n})\nexport default class ScrollToTop extends Vue {\n  /**\n   * Animation to use for showing/hiding the button.\n   *\n   * @public\n   */\n  @Prop({ default: () => NoElement })\n  public animation!: Vue | string;\n\n  /**\n   * Threshold in pixels from the top to show the button.\n   *\n   * @public\n   */\n  @Prop()\n  public thresholdPx?: number;\n\n  /**\n   * Id of the target scroll component.\n   *\n   * @public\n   */\n  @Prop({ default: MainScrollId })\n  public scrollId!: string;\n\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  @State('scroll', 'data')\n  public scrollPositionsMap!: Dictionary<ScrollComponentState>;\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  protected get scrollData(): ScrollComponentState {\n    return this.scrollId && this.scrollPositionsMap[this.scrollId]\n      ? this.scrollPositionsMap[this.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  protected get events(): Partial<XEventsTypes> {\n    return { UserClickedScrollToTop: this.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  protected get useThresholdStrategy(): boolean {\n    return typeof this.thresholdPx === 'number';\n  }\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  protected get isThresholdReached(): boolean {\n    return this.useThresholdStrategy && this.scrollData.position > this.thresholdPx!;\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  protected get isVisible(): boolean {\n    return this.useThresholdStrategy ? this.isThresholdReached : this.hasAlmostReachedScrollEnd;\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  protected get hasAlmostReachedScrollEnd(): boolean {\n    return this.scrollData.hasAlmostReachedEnd && this.scrollData.direction === 'DOWN';\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA;;;;;;AAUA;IAAyC,+BAAG;IAA5C;;KAsGC;IA7DC,sBAAc,mCAAU;;;;;;;;aAAxB;YACE,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC;kBAC1D,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC;kBACtC;oBACE,QAAQ,EAAE,CAAC;oBACX,SAAS,EAAE,IAAI;oBACf,eAAe,EAAE,KAAK;oBACtB,mBAAmB,EAAE,KAAK;oBAC1B,aAAa,EAAE,KAAK;iBACrB,CAAC;SACP;;;OAAA;IAQD,sBAAc,+BAAM;;;;;;;aAApB;YACE,OAAO,EAAE,sBAAsB,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;SAClD;;;OAAA;IAQD,sBAAc,6CAAoB;;;;;;;aAAlC;YACE,OAAO,OAAO,IAAI,CAAC,WAAW,KAAK,QAAQ,CAAC;SAC7C;;;OAAA;IAQD,sBAAc,2CAAkB;;;;;;;aAAhC;YACE,OAAO,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,UAAU,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAY,CAAC;SAClF;;;OAAA;IAQD,sBAAc,kCAAS;;;;;;;aAAvB;YACE,OAAO,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,yBAAyB,CAAC;SAC7F;;;OAAA;IAQD,sBAAc,kDAAyB;;;;;;;aAAvC;YACE,OAAO,IAAI,CAAC,UAAU,CAAC,mBAAmB,IAAI,IAAI,CAAC,UAAU,CAAC,SAAS,KAAK,MAAM,CAAC;SACpF;;;OAAA;IA9FD;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,cAAM,OAAA,SAAS,GAAA,EAAE,CAAC;kDACH;IAQhC;QADC,IAAI,EAAE;oDACqB;IAQ5B;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC;iDACP;IASzB;QADC,KAAK,CAAC,QAAQ,EAAE,MAAM,CAAC;2DACqC;IAhC1C,WAAW;QAJ/B,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;YACxC,UAAU,EAAE,EAAE,eAAe,iBAAA,EAAE;SAChC,CAAC;OACmB,WAAW,CAsG/B;IAAD,kBAAC;CAAA,CAtGwC,GAAG;;;;"}
+{"version":3,"file":"scroll-to-top.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/scroll/components/scroll-to-top.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { State, xComponentMixin } from '../../../components';\nimport BaseEventButton from '../../../components/base-event-button.vue';\nimport { NoElement } from '../../../components/no-element';\nimport { Dictionary } from '../../../utils';\nimport { XEventsTypes } from '../../../wiring';\nimport { ScrollComponentState } from '../store';\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 */\n@Component({\n  mixins: [xComponentMixin(scrollXModule)],\n  components: { BaseEventButton }\n})\nexport default class ScrollToTop extends Vue {\n  /**\n   * Animation to use for showing/hiding the button.\n   *\n   * @public\n   */\n  @Prop({ default: () => NoElement })\n  public animation!: Vue | string;\n\n  /**\n   * Threshold in pixels from the top to show the button.\n   *\n   * @public\n   */\n  @Prop()\n  public thresholdPx?: number;\n\n  /**\n   * Id of the target scroll component.\n   *\n   * @public\n   */\n  @Prop({ default: MainScrollId })\n  public scrollId!: string;\n\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  @State('scroll', 'data')\n  public scrollPositionsMap!: Dictionary<ScrollComponentState>;\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  protected get scrollData(): ScrollComponentState {\n    return this.scrollId && this.scrollPositionsMap[this.scrollId]\n      ? this.scrollPositionsMap[this.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  protected get events(): Partial<XEventsTypes> {\n    return { UserClickedScrollToTop: this.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  protected get useThresholdStrategy(): boolean {\n    return typeof this.thresholdPx === 'number';\n  }\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  protected get isThresholdReached(): boolean {\n    return this.useThresholdStrategy && this.scrollData.position > this.thresholdPx!;\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  protected get isVisible(): boolean {\n    return this.useThresholdStrategy ? this.isThresholdReached : this.hasAlmostReachedScrollEnd;\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  protected get hasAlmostReachedScrollEnd(): boolean {\n    return this.scrollData.hasAlmostReachedEnd && this.scrollData.direction === 'DOWN';\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA;;;;;;AAUA;IAAyC,+BAAG;IAA5C;;KAsGC;IA7DC,sBAAc,mCAAU;;;;;;;;aAAxB;YACE,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC;kBAC1D,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC;kBACtC;oBACE,QAAQ,EAAE,CAAC;oBACX,SAAS,EAAE,IAAI;oBACf,eAAe,EAAE,KAAK;oBACtB,mBAAmB,EAAE,KAAK;oBAC1B,aAAa,EAAE,KAAK;iBACrB,CAAC;SACP;;;OAAA;IAQD,sBAAc,+BAAM;;;;;;;aAApB;YACE,OAAO,EAAE,sBAAsB,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;SAClD;;;OAAA;IAQD,sBAAc,6CAAoB;;;;;;;aAAlC;YACE,OAAO,OAAO,IAAI,CAAC,WAAW,KAAK,QAAQ,CAAC;SAC7C;;;OAAA;IAQD,sBAAc,2CAAkB;;;;;;;aAAhC;YACE,OAAO,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,UAAU,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAY,CAAC;SAClF;;;OAAA;IAQD,sBAAc,kCAAS;;;;;;;aAAvB;YACE,OAAO,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,yBAAyB,CAAC;SAC7F;;;OAAA;IAQD,sBAAc,kDAAyB;;;;;;;aAAvC;YACE,OAAO,IAAI,CAAC,UAAU,CAAC,mBAAmB,IAAI,IAAI,CAAC,UAAU,CAAC,SAAS,KAAK,MAAM,CAAC;SACpF;;;OAAA;IA9FD;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,cAAM,OAAA,SAAS,GAAA,EAAE,CAAC;kDACH;IAQhC;QADC,IAAI,EAAE;oDACqB;IAQ5B;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC;iDACP;IASzB;QADC,KAAK,CAAC,QAAQ,EAAE,MAAM,CAAC;2DACqC;IAhC1C,WAAW;QAJ/B,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;YACxC,UAAU,EAAE,EAAE,eAAe,iBAAA,EAAE;SAChC,CAAC;OACmB,WAAW,CAsG/B;IAAD,kBAAC;CAAA,CAtGwC,GAAG;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"scroll.vue.js","sources":["../../../../../src/x-modules/scroll/components/scroll.vue"],"sourcesContent":["<template>\n  <BaseScroll\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    v-on=\"$listeners\"\n    :id=\"id\"\n    :throttleMs=\"throttleMs\"\n    :distanceToBottom=\"distanceToBottom\"\n  >\n    <slot />\n  </BaseScroll>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { XOn } from '../../../components/decorators/bus.decorators';\n  import BaseScroll from '../../../components/scroll/base-scroll.vue';\n  import { ScrollDirection } from '../../../components/scroll/scroll.types';\n  import { scrollXModule } from '../x-module';\n  import { MainScrollId } from './scroll.const';\n\n  /**\n   * Base scroll component that depending on base scroll component and the user interaction emits\n   * different x events for knowing when the user scrolls, the direction of scroll and if user\n   * reaches the start or end.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(scrollXModule)],\n    components: { BaseScroll }\n  })\n  export default class Scroll extends Vue {\n    /**\n     * Time duration to ignore the subsequent scroll events after an emission.\n     * Higher values will decrease events precision but can prevent performance issues.\n     *\n     * @public\n     */\n    @Prop()\n    public throttleMs!: number;\n\n    /**\n     * Distance to the end of the scroll that when reached will emit the\n     * `scroll:about-to-end` event.\n     *\n     * @public\n     */\n    @Prop()\n    public distanceToBottom!: number;\n\n    /**\n     * Id to identify the component.\n     *\n     * @public\n     */\n    @Prop({ default: MainScrollId })\n    public id!: string;\n\n    /**\n     * Emits the `UserScrolled` event.\n     *\n     * @param position - The new position of scroll.\n     * @internal\n     */\n    protected emitScroll(position: number): void {\n      this.$x.emit('UserScrolled', position, this.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    protected emitScrollDirectionChange(direction: ScrollDirection): void {\n      this.$x.emit('UserChangedScrollDirection', direction, this.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    protected emitScrollAtStart(isAtStart: boolean): void {\n      this.$x.emit('UserReachedScrollStart', isAtStart, this.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    protected emitScrollAlmostAtEnd(isAlmostAtEnd: boolean): void {\n      this.$x.emit('UserAlmostReachedScrollEnd', isAlmostAtEnd, this.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    protected emitScrollAtEnd(isAtEnd: boolean): void {\n      this.$x.emit('UserReachedScrollEnd', isAtEnd, this.createEventMetadata());\n    }\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    protected createEventMetadata(): Partial<WireMetadata> {\n      return { target: this.$el as HTMLElement, id: this.id };\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    @XOn('UserClickedScrollToTop')\n    scrollToTop(scrollId: string): void {\n      if (scrollId === this.id && this.$el) {\n        this.$el?.scrollTo({ top: 0, behavior: 'smooth' });\n      }\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n# Example\n\nThe Scroll is a component that wraps the BaseScroll and provides it for a unique id.\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserScrolled`: emitted after the user scrolls in this container. The payload is the scroll top\n  distance in pixels.\n- `UserChangedScrollDirection`: emitted when the user changes the scroll direction. The payload is\n  the new scrolling direction.\n- `UserReachedScrollStart`: emitted when the user scrolls up to the initial position of the scroll.\n- `UserAlmostReachedScrollEnd`: emitted when the user is about to reach the bottom part of the\n  scroll.\n- `UserReachedScrollEnd`: emitted when the user has reached the bottom part of the scroll.\n\n## Customized 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>content1</span>\n    </div>\n  </Scroll>\n</template>\n\n<script>\n  import { Scroll } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'ScrollIdTest',\n    components: {\n      Scroll\n    }\n  };\n</script>\n```\n\n## Customized usage\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>content1</span>\n    </div>\n  </Scroll>\n</template>\n\n<script>\n  import { Scroll } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'ScrollIdTest',\n    components: {\n      Scroll\n    },\n    methods: {\n      scroll(position) {\n        console.log('scroll', position);\n      },\n      scrollDirectionChange(direction) {\n        console.log('scroll:direction-change', direction);\n      },\n      scrollAtStart(isAtStart) {\n        console.log('scroll:at-start', isAtStart);\n      },\n      scrollAlmostAtEnd(isAlmostAtEnd) {\n        console.log('scroll:almost-at-end', isAlmostAtEnd);\n      },\n      scrollAtEnd(isAtEnd) {\n        console.log('scroll:at-end', isAtEnd);\n      }\n    }\n  };\n</script>\n```\n\n## Customized usage\n\n### Using XEvents.\n\nYou can use the XEvents subscribing to them.\n\n```vue\n<template>\n  <Scroll throttleMs=\"50\" distanceToBottom=\"300\">\n    <div class=\"content-scroll\">\n      <span>content1</span>\n      <span>content1</span>\n    </div>\n  </Scroll>\n</template>\n\n<script>\n  import { Scroll } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'ScrollIdTest',\n    components: {\n      Scroll\n    },\n    mounted() {\n      this.$x.on('UserScrolled').subscribe(distance => {\n        console.log(distance);\n      });\n      this.$x.on('UserChangedScrollDirection').subscribe(direction => {\n        console.log(direction);\n      });\n      this.$x.on('UserReachedScrollStart').subscribe(isAtStart => {\n        console.log(isAtStart);\n      });\n      this.$x.on('UserAlmostReachedScrollEnd').subscribe(isAlmostAtEnd => {\n        console.log(isAlmostAtEnd);\n      });\n      this.$x.on('UserReachedScrollEnd').subscribe(isAtEnd => {\n        console.log(isAtEnd);\n      });\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"scroll.vue.js","sources":["../../../../../src/x-modules/scroll/components/scroll.vue"],"sourcesContent":["<template>\n  <BaseScroll\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    v-on=\"$listeners\"\n    :id=\"id\"\n    :throttleMs=\"throttleMs\"\n    :distanceToBottom=\"distanceToBottom\"\n  >\n    <slot />\n  </BaseScroll>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { XOn } from '../../../components/decorators/bus.decorators';\n  import BaseScroll from '../../../components/scroll/base-scroll.vue';\n  import { ScrollDirection } from '../../../components/scroll/scroll.types';\n  import { scrollXModule } from '../x-module';\n  import { MainScrollId } from './scroll.const';\n\n  /**\n   * Base scroll component that depending on base scroll component and the user interaction emits\n   * different x events for knowing when the user scrolls, the direction of scroll and if user\n   * reaches the start or end.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(scrollXModule)],\n    components: { BaseScroll }\n  })\n  export default class Scroll extends Vue {\n    /**\n     * Time duration to ignore the subsequent scroll events after an emission.\n     * Higher values will decrease events precision but can prevent performance issues.\n     *\n     * @public\n     */\n    @Prop()\n    public throttleMs!: number;\n\n    /**\n     * Distance to the end of the scroll that when reached will emit the\n     * `scroll:about-to-end` event.\n     *\n     * @public\n     */\n    @Prop()\n    public distanceToBottom!: number;\n\n    /**\n     * Id to identify the component.\n     *\n     * @public\n     */\n    @Prop({ default: MainScrollId })\n    public id!: string;\n\n    /**\n     * Emits the `UserScrolled` event.\n     *\n     * @param position - The new position of scroll.\n     * @internal\n     */\n    protected emitScroll(position: number): void {\n      this.$x.emit('UserScrolled', position, this.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    protected emitScrollDirectionChange(direction: ScrollDirection): void {\n      this.$x.emit('UserChangedScrollDirection', direction, this.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    protected emitScrollAtStart(isAtStart: boolean): void {\n      this.$x.emit('UserReachedScrollStart', isAtStart, this.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    protected emitScrollAlmostAtEnd(isAlmostAtEnd: boolean): void {\n      this.$x.emit('UserAlmostReachedScrollEnd', isAlmostAtEnd, this.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    protected emitScrollAtEnd(isAtEnd: boolean): void {\n      this.$x.emit('UserReachedScrollEnd', isAtEnd, this.createEventMetadata());\n    }\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    protected createEventMetadata(): Partial<WireMetadata> {\n      return { target: this.$el as HTMLElement, id: this.id };\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    @XOn('UserClickedScrollToTop')\n    scrollToTop(scrollId: string): void {\n      if (scrollId === this.id && this.$el) {\n        this.$el?.scrollTo({ top: 0, behavior: 'smooth' });\n      }\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nThe Scroll is a component that wraps the BaseScroll and provides it for a unique id.\n\n### Customized 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>content1</span>\n    </div>\n  </Scroll>\n</template>\n\n<script>\n  import { Scroll } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'ScrollIdTest',\n    components: {\n      Scroll\n    }\n  };\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>content1</span>\n    </div>\n  </Scroll>\n</template>\n\n<script>\n  import { Scroll } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'ScrollIdTest',\n    components: {\n      Scroll\n    },\n    methods: {\n      scroll(position) {\n        console.log('scroll', position);\n      },\n      scrollDirectionChange(direction) {\n        console.log('scroll:direction-change', direction);\n      },\n      scrollAtStart(isAtStart) {\n        console.log('scroll:at-start', isAtStart);\n      },\n      scrollAlmostAtEnd(isAlmostAtEnd) {\n        console.log('scroll:almost-at-end', isAlmostAtEnd);\n      },\n      scrollAtEnd(isAtEnd) {\n        console.log('scroll:at-end', isAtEnd);\n      }\n    }\n  };\n</script>\n```\n\n#### Using XEvents.\n\nYou can use the XEvents subscribing to them.\n\n```vue\n<template>\n  <Scroll throttleMs=\"50\" distanceToBottom=\"300\">\n    <div class=\"content-scroll\">\n      <span>content1</span>\n      <span>content1</span>\n    </div>\n  </Scroll>\n</template>\n\n<script>\n  import { Scroll } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'ScrollIdTest',\n    components: {\n      Scroll\n    },\n    mounted() {\n      this.$x.on('UserScrolled').subscribe(distance => {\n        console.log(distance);\n      });\n      this.$x.on('UserChangedScrollDirection').subscribe(direction => {\n        console.log(direction);\n      });\n      this.$x.on('UserReachedScrollStart').subscribe(isAtStart => {\n        console.log(isAtStart);\n      });\n      this.$x.on('UserAlmostReachedScrollEnd').subscribe(isAlmostAtEnd => {\n        console.log(isAlmostAtEnd);\n      });\n      this.$x.on('UserReachedScrollEnd').subscribe(isAtEnd => {\n        console.log(isAtEnd);\n      });\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserScrolled`: emitted after the user scrolls in this container. The payload is the scroll top\n  distance in pixels.\n- `UserChangedScrollDirection`: emitted when the user changes the scroll direction. The payload is\n  the new scrolling direction.\n- `UserReachedScrollStart`: emitted when the user scrolls up to the initial position of the scroll.\n- `UserAlmostReachedScrollEnd`: emitted when the user is about to reach the bottom part of the\n  scroll.\n- `UserReachedScrollEnd`: emitted when the user has reached the bottom part of the scroll.\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/scroll/components/scroll.vue_rollup-plugin-vue=script.js

@@ -2,10 +2,10 @@ import { __extends, __decorate } from 'tslib';
 import Vue from 'vue';
 import { Prop, Component } from 'vue-property-decorator';
 import { XOn } from '../../../components/decorators/bus.decorators.js';
-import BaseScroll from '../../../components/scroll/base-scroll.vue.js';
 import { xComponentMixin } from '../../../components/x-component.mixin.js';
 import { scrollXModule } from '../x-module.js';
 import { MainScrollId } from './scroll.const.js';
+import BaseScroll from '../../../components/scroll/base-scroll.vue.js';
 
 /**
  * Base scroll component that depending on base scroll component and the user interaction emits

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

@@ -1 +1 @@
-{"version":3,"file":"window-scroll.vue.js","sources":["../../../../../src/x-modules/scroll/components/window-scroll.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { mixins } from 'vue-class-component';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { ScrollDirection, ScrollMixin, xComponentMixin } from '../../../components';\n  import { WireMetadata } from '../../../wiring';\n  import { scrollXModule } from '../x-module';\n  import { MainScrollId } from './scroll.const';\n\n  type ScrollableElement = 'html' | 'body';\n\n  /**\n   * The `WindowScroll` component listens to either the `html` or `body` DOM scroll events, and\n   * re-emits them as X Events. Additionally it also emits events related to the direction or\n   * current position of these elements scroll.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(scrollXModule)]\n  })\n  export default class WindowScroll extends mixins(ScrollMixin) {\n    /**\n     * Tag to identify the main scrollable element.\n     *\n     * @public\n     */\n    @Prop({ default: 'html' })\n    protected scrollableElement!: ScrollableElement;\n    /**\n     * Id to identify the component.\n     *\n     * @public\n     */\n    @Prop({ default: MainScrollId })\n    protected id!: string;\n\n    mounted(): void {\n      this.initAndListenElement();\n      this.$on('scroll', (position: number) => {\n        this.$x.emit('UserScrolled', position, this.createXEventMetadata());\n      });\n      this.$on('scroll:direction-change', (direction: ScrollDirection) => {\n        this.$x.emit('UserChangedScrollDirection', direction, this.createXEventMetadata());\n      });\n      this.$on('scroll:at-start', (hasReachedStart: boolean) => {\n        this.$x.emit('UserReachedScrollStart', hasReachedStart, this.createXEventMetadata());\n      });\n      this.$on('scroll:almost-at-end', (hasAlmostReachedEnd: boolean) => {\n        this.$x.emit(\n          'UserAlmostReachedScrollEnd',\n          hasAlmostReachedEnd,\n          this.createXEventMetadata()\n        );\n      });\n      this.$on('scroll:at-end', (hasReachedEnd: boolean) => {\n        this.$x.emit('UserReachedScrollEnd', hasReachedEnd, this.createXEventMetadata());\n      });\n    }\n\n    /**\n     * Sets the HTML element depending on {@link WindowScroll.scrollableElement}, and initialises\n     * its events.\n     *\n     * @internal\n     */\n    protected initAndListenElement(): void {\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-expect-error\n      this.$el = this.scrollableElement === 'body' ? document.body : document.documentElement;\n      this.$el.addEventListener('scroll', this.throttledStoreScrollData);\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    render(): void {}\n\n    /**\n     * Cleanup listeners.\n     */\n    beforeDestroy(): void {\n      this.$el.removeEventListener('scroll', this.throttledStoreScrollData);\n    }\n\n    /**\n     * Creates the metadata for the events of this component.\n     *\n     * @returns A {@link WireMetadata} for the events emitted by this component.\n     * @internal\n     */\n    protected createXEventMetadata(): Partial<WireMetadata> {\n      return { target: this.$el, id: this.id };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n# Example\n\nThe `WindowScroll` component manages the scroll state of the `body` or `html` elements. It does the\nnecessary calculations for knowing the direction of scroll, if the scroll has reached its starting\nposition, if it is about to reach its ending position or if it has already reached it end. Whenever\nthis state changes, it emits the appropiate X Event to the rest of the application\n\n## Custom usage\n\n### Overriding the properties and using document scroll events.\n\n```vue\n<template>\n  <WindowScroll\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=\"example-main-scroll\"\n    throttleMs=\"100\"\n    distanceToBottom=\"300\"\n    scrollableElement=\"body\"\n  />\n</template>\n\n<script>\n  import { WindowScroll } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'ScrollIdTest',\n    components: {\n      WindowScroll\n    },\n    methods: {\n      scroll(position) {\n        console.log('scroll', position);\n      },\n      scrollDirectionChange(direction) {\n        console.log('scroll:direction-change', direction);\n      },\n      scrollAtStart() {\n        console.log('scroll:at-start', isAtStart);\n      },\n      scrollAlmostAtEnd(isAlmostAtEnd) {\n        console.log('scroll:almost-at-end', isAlmostAtEnd);\n      },\n      scrollAtEnd(isAtEnd) {\n        console.log('scroll:at-end', isAtEnd);\n      }\n    }\n  };\n</script>\n```\n\n## Customized usage\n\n### Using body and XEvents.\n\nIf we want to listen scroll body we should do some changes in css for body. This is an example, so\ntherefore the height of body can be get any value that you want. The template style should have a\nsimilar styles the corresponding style for tag body like in the next example.\n\n```vue\n<template>\n  <WindowScroll\n    id=\"example-main-scroll\"\n    throttleMs=\"100\"\n    distanceToBottom=\"300\"\n    scrollableElement=\"body\"\n  />\n</template>\n\n<script>\n  import { WindowScroll } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'MainComponent',\n    components: {\n      WindowScroll\n    },\n    mounted() {\n      this.$x.on('UserScrolled').subscribe(distance => {\n        console.log(distance);\n      });\n      this.$x.on('UserChangedScrollDirection').subscribe(direction => {\n        console.log(direction);\n      });\n      this.$x.on('UserReachedScrollStart').subscribe(isAtStart => {\n        console.log(isAtStart);\n      });\n      this.$x.on('UserAlmostReachedScrollEnd').subscribe(isAlmostAtEnd => {\n        console.log(isAlmostAtEnd);\n      });\n      this.$x.on('UserReachedScrollEnd').subscribe(isAtEnd => {\n        console.log(isAtEnd);\n      });\n    }\n  };\n</script>\n<style lang=\"scss\">\n  html {\n    overflow: hidden;\n  }\n\n  body {\n    overflow-y: auto;\n    height: 100vh;\n  }\n</style>\n```\n\n## Vue Events:\n\n- `scroll`: the event is emitted after the user scrolls in this container. The payload is the scroll\n  top distance in pixels.\n- `scroll:direction-change`: the event is emitted when the user changes the scroll direction. The\n  payload is the new scrolling direction.\n- `scroll:at-start`: the event is emitted when the user scrolls up to the initial position of the\n  scroll.\n- `scroll:almost-at-end`: the event is emitted when the user is about to reach the bottom part of\n  the scroll.\n- `scroll:at-end`: the event is emitted when the user has reached the bottom part of the scroll.\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserScrolled`: the event is emitted after the user scrolls in this container. The payload is the\n  scroll top distance in pixels.\n- `UserChangedScrollDirection`: the event is emitted when the user changes the scroll direction. The\n  payload is the new scrolling direction.\n- `UserReachedScrollStart`: the event is emitted when the user scrolls up to the initial position of\n  the scroll.\n- `UserAlmostReachedScrollEnd`: the event is emitted when the user is about to reach the bottom part\n  of the scroll.\n- `UserReachedScrollEnd`: the event is emitted when the user has reached the bottom part of the\n  scroll.\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"window-scroll.vue.js","sources":["../../../../../src/x-modules/scroll/components/window-scroll.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { mixins } from 'vue-class-component';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { ScrollDirection, ScrollMixin, xComponentMixin } from '../../../components';\n  import { WireMetadata } from '../../../wiring';\n  import { scrollXModule } from '../x-module';\n  import { MainScrollId } from './scroll.const';\n\n  type ScrollableElement = 'html' | 'body';\n\n  /**\n   * The `WindowScroll` component listens to either the `html` or `body` DOM scroll events, and\n   * re-emits them as X Events. Additionally it also emits events related to the direction or\n   * current position of these elements scroll.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(scrollXModule)]\n  })\n  export default class WindowScroll extends mixins(ScrollMixin) {\n    /**\n     * Tag to identify the main scrollable element.\n     *\n     * @public\n     */\n    @Prop({ default: 'html' })\n    protected scrollableElement!: ScrollableElement;\n    /**\n     * Id to identify the component.\n     *\n     * @public\n     */\n    @Prop({ default: MainScrollId })\n    protected id!: string;\n\n    mounted(): void {\n      this.initAndListenElement();\n      this.$on('scroll', (position: number) => {\n        this.$x.emit('UserScrolled', position, this.createXEventMetadata());\n      });\n      this.$on('scroll:direction-change', (direction: ScrollDirection) => {\n        this.$x.emit('UserChangedScrollDirection', direction, this.createXEventMetadata());\n      });\n      this.$on('scroll:at-start', (hasReachedStart: boolean) => {\n        this.$x.emit('UserReachedScrollStart', hasReachedStart, this.createXEventMetadata());\n      });\n      this.$on('scroll:almost-at-end', (hasAlmostReachedEnd: boolean) => {\n        this.$x.emit(\n          'UserAlmostReachedScrollEnd',\n          hasAlmostReachedEnd,\n          this.createXEventMetadata()\n        );\n      });\n      this.$on('scroll:at-end', (hasReachedEnd: boolean) => {\n        this.$x.emit('UserReachedScrollEnd', hasReachedEnd, this.createXEventMetadata());\n      });\n    }\n\n    /**\n     * Sets the HTML element depending on {@link WindowScroll.scrollableElement}, and initialises\n     * its events.\n     *\n     * @internal\n     */\n    protected initAndListenElement(): void {\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-expect-error\n      this.$el = this.scrollableElement === 'body' ? document.body : document.documentElement;\n      this.$el.addEventListener('scroll', this.throttledStoreScrollData);\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    render(): void {}\n\n    /**\n     * Cleanup listeners.\n     */\n    beforeDestroy(): void {\n      this.$el.removeEventListener('scroll', this.throttledStoreScrollData);\n    }\n\n    /**\n     * Creates the metadata for the events of this component.\n     *\n     * @returns A {@link WireMetadata} for the events emitted by this component.\n     * @internal\n     */\n    protected createXEventMetadata(): Partial<WireMetadata> {\n      return { target: this.$el, id: this.id };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `WindowScroll` component manages the scroll state of the `body` or `html` elements. It does the\nnecessary calculations for knowing the direction of scroll, if the scroll has reached its starting\nposition, if it is about to reach its ending position or if it has already reached it end. Whenever\nthis state changes, it emits the appropiate X Event to the rest of the application\n\n### Custom usage\n\n#### Overriding the properties and using document scroll events.\n\n```vue\n<template>\n  <WindowScroll\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=\"example-main-scroll\"\n    throttleMs=\"100\"\n    distanceToBottom=\"300\"\n    scrollableElement=\"body\"\n  />\n</template>\n\n<script>\n  import { WindowScroll } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'ScrollIdTest',\n    components: {\n      WindowScroll\n    },\n    methods: {\n      scroll(position) {\n        console.log('scroll', position);\n      },\n      scrollDirectionChange(direction) {\n        console.log('scroll:direction-change', direction);\n      },\n      scrollAtStart() {\n        console.log('scroll:at-start', isAtStart);\n      },\n      scrollAlmostAtEnd(isAlmostAtEnd) {\n        console.log('scroll:almost-at-end', isAlmostAtEnd);\n      },\n      scrollAtEnd(isAtEnd) {\n        console.log('scroll:at-end', isAtEnd);\n      }\n    }\n  };\n</script>\n```\n\n#### Using body and XEvents.\n\nIf we want to listen scroll body we should do some changes in css for body. This is an example, so\ntherefore the height of body can be get any value that you want. The template style should have a\nsimilar styles the corresponding style for tag body like in the next example.\n\n```vue\n<template>\n  <WindowScroll\n    id=\"example-main-scroll\"\n    throttleMs=\"100\"\n    distanceToBottom=\"300\"\n    scrollableElement=\"body\"\n  />\n</template>\n\n<script>\n  import { WindowScroll } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'MainComponent',\n    components: {\n      WindowScroll\n    },\n    mounted() {\n      this.$x.on('UserScrolled').subscribe(distance => {\n        console.log(distance);\n      });\n      this.$x.on('UserChangedScrollDirection').subscribe(direction => {\n        console.log(direction);\n      });\n      this.$x.on('UserReachedScrollStart').subscribe(isAtStart => {\n        console.log(isAtStart);\n      });\n      this.$x.on('UserAlmostReachedScrollEnd').subscribe(isAlmostAtEnd => {\n        console.log(isAlmostAtEnd);\n      });\n      this.$x.on('UserReachedScrollEnd').subscribe(isAtEnd => {\n        console.log(isAtEnd);\n      });\n    }\n  };\n</script>\n<style lang=\"scss\">\n  html {\n    overflow: hidden;\n  }\n\n  body {\n    overflow-y: auto;\n    height: 100vh;\n  }\n</style>\n```\n\n## Vue Events\n\n- `scroll`: the event is emitted after the user scrolls in this container. The payload is the scroll\n  top distance in pixels.\n- `scroll:direction-change`: the event is emitted when the user changes the scroll direction. The\n  payload is the new scrolling direction.\n- `scroll:at-start`: the event is emitted when the user scrolls up to the initial position of the\n  scroll.\n- `scroll:almost-at-end`: the event is emitted when the user is about to reach the bottom part of\n  the scroll.\n- `scroll:at-end`: the event is emitted when the user has reached the bottom part of the scroll.\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserScrolled`: the event is emitted after the user scrolls in this container. The payload is the\n  scroll top distance in pixels.\n- `UserChangedScrollDirection`: the event is emitted when the user changes the scroll direction. The\n  payload is the new scrolling direction.\n- `UserReachedScrollStart`: the event is emitted when the user scrolls up to the initial position of\n  the scroll.\n- `UserAlmostReachedScrollEnd`: the event is emitted when the user is about to reach the bottom part\n  of the scroll.\n- `UserReachedScrollEnd`: the event is emitted when the user has reached the bottom part of the\n  scroll.\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/scroll/components/window-scroll.vue_rollup-plugin-vue=script.js

@@ -7,7 +7,7 @@ import '../../../components/animations/collapse-height.vue.js';
 import '../../../components/animations/collapse-width.vue.js';
 import '../../../components/animations/cross-fade.vue.js';
 import '../../../components/animations/fade-and-slide.vue.js';
-import '../../../components/staggering-transition-group.vue.js';
+import '../../../components/animations/staggering-transition-group.vue.js';
 import '../../../components/animations/staggered-fade-and-slide.vue.js';
 import '../../../components/animations/translate-from-left.vue.js';
 import '../../../components/animations/translate-from-right.vue.js';
@@ -69,16 +69,26 @@ import '../../../components/icons/trash.vue.js';
 import '../../../components/icons/trending-tiny.vue.js';
 import '../../../components/icons/trending.vue.js';
 import '../../../components/icons/user.vue.js';
-import '../../../components/modals/base-events-modal-close.vue.js';
+import '../../../components/decorators/store.decorators.js';
+import '../../../components/x-component.utils.js';
+import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import { scrollXModule } from '../x-module.js';
+import { MainScrollId } from './scroll.const.js';
 import '../../../components/modals/base-modal.vue.js';
+import '../../../components/modals/base-id-modal.vue.js';
+import ScrollMixin from '../../../components/scroll/scroll.mixin.js';
+import '../../../components/scroll/base-scroll.vue.js';
+import '../../../components/layouts/fixed-header-and-asides-layout.vue.js';
+import '../../../components/panels/base-toggle-panel.vue.js';
+import '../../../components/panels/base-id-toggle-panel.vue.js';
+import '../../../components/layouts/multi-column-max-width-layout.vue.js';
+import '../../../components/layouts/single-column-layout.vue.js';
+import '../../../components/modals/base-events-modal-close.vue.js';
 import '../../../components/modals/base-events-modal.vue.js';
 import '../../../components/modals/base-events-modal-open.vue.js';
-import '../../../components/modals/base-id-modal.vue.js';
 import '../../../components/modals/base-id-modal-close.vue.js';
 import '../../../components/modals/base-id-modal-open.vue.js';
-import '../../../components/panels/base-toggle-panel.vue.js';
 import '../../../components/panels/base-header-toggle-panel.vue.js';
-import '../../../components/panels/base-id-toggle-panel.vue.js';
 import '../../../components/panels/base-id-toggle-panel-button.vue.js';
 import '../../../components/result/base-result-add-to-cart.vue.js';
 import '../../../components/result/base-result-current-price.vue.js';
@@ -87,8 +97,6 @@ import '../../../components/result/base-result-link.vue.js';
 import '../../../components/result/base-result-previous-price.vue.js';
 import '../../../components/result/base-result-fallback-image.vue.js';
 import '../../../components/result/base-result-placeholder-image.vue.js';
-import ScrollMixin from '../../../components/scroll/scroll.mixin.js';
-import '../../../components/scroll/base-scroll.vue.js';
 import '../../../components/suggestions/base-suggestion.vue.js';
 import '../../../components/suggestions/base-suggestions.vue.js';
 import '../../../components/auto-progress-bar.vue.js';
@@ -99,13 +107,6 @@ import '../../../components/base-variable-column-grid.vue.js';
 import '../../../components/decorators/debounce.decorators.js';
 import '../../../components/sliding-panel.vue.js';
 import '../../../components/items-list.vue.js';
-import '../../../components/decorators/store.decorators.js';
-import '../../../components/x-component.utils.js';
-import { xComponentMixin } from '../../../components/x-component.mixin.js';
-import { scrollXModule } from '../x-module.js';
-import { MainScrollId } from './scroll.const.js';
-import '../../../components/layouts/multi-column-max-width-layout.vue.js';
-import '../../../components/layouts/single-column-layout.vue.js';
 import '../../../components/location-provider.vue.js';
 import '../../../components/global-x-bus.vue.js';
 import '../../../components/snippet-callbacks.vue.js';

package/js/x-modules/scroll/components/window-scroll.vue_rollup-plugin-vue=script.js.map

@@ -1 +1 @@
-{"version":3,"file":"window-scroll.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/scroll/components/window-scroll.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\nimport { mixins } from 'vue-class-component';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { ScrollDirection, ScrollMixin, xComponentMixin } from '../../../components';\nimport { WireMetadata } from '../../../wiring';\nimport { scrollXModule } from '../x-module';\nimport { MainScrollId } from './scroll.const';\n\ntype ScrollableElement = 'html' | 'body';\n\n/**\n * The `WindowScroll` component listens to either the `html` or `body` DOM scroll events, and\n * re-emits them as X Events. Additionally it also emits events related to the direction or\n * current position of these elements scroll.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(scrollXModule)]\n})\nexport default class WindowScroll extends mixins(ScrollMixin) {\n  /**\n   * Tag to identify the main scrollable element.\n   *\n   * @public\n   */\n  @Prop({ default: 'html' })\n  protected scrollableElement!: ScrollableElement;\n  /**\n   * Id to identify the component.\n   *\n   * @public\n   */\n  @Prop({ default: MainScrollId })\n  protected id!: string;\n\n  mounted(): void {\n    this.initAndListenElement();\n    this.$on('scroll', (position: number) => {\n      this.$x.emit('UserScrolled', position, this.createXEventMetadata());\n    });\n    this.$on('scroll:direction-change', (direction: ScrollDirection) => {\n      this.$x.emit('UserChangedScrollDirection', direction, this.createXEventMetadata());\n    });\n    this.$on('scroll:at-start', (hasReachedStart: boolean) => {\n      this.$x.emit('UserReachedScrollStart', hasReachedStart, this.createXEventMetadata());\n    });\n    this.$on('scroll:almost-at-end', (hasAlmostReachedEnd: boolean) => {\n      this.$x.emit(\n        'UserAlmostReachedScrollEnd',\n        hasAlmostReachedEnd,\n        this.createXEventMetadata()\n      );\n    });\n    this.$on('scroll:at-end', (hasReachedEnd: boolean) => {\n      this.$x.emit('UserReachedScrollEnd', hasReachedEnd, this.createXEventMetadata());\n    });\n  }\n\n  /**\n   * Sets the HTML element depending on {@link WindowScroll.scrollableElement}, and initialises\n   * its events.\n   *\n   * @internal\n   */\n  protected initAndListenElement(): void {\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-expect-error\n    this.$el = this.scrollableElement === 'body' ? document.body : document.documentElement;\n    this.$el.addEventListener('scroll', this.throttledStoreScrollData);\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  render(): void {}\n\n  /**\n   * Cleanup listeners.\n   */\n  beforeDestroy(): void {\n    this.$el.removeEventListener('scroll', this.throttledStoreScrollData);\n  }\n\n  /**\n   * Creates the metadata for the events of this component.\n   *\n   * @returns A {@link WireMetadata} for the events emitted by this component.\n   * @internal\n   */\n  protected createXEventMetadata(): Partial<WireMetadata> {\n    return { target: this.$el, id: this.id };\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA;;;;;;;AAUA;IAA0C,gCAAmB;IAA7D;;KAuEC;IAvDC,8BAAO,GAAP;QAAA,iBAqBC;QApBC,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,QAAgB;YAClC,KAAI,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,QAAQ,EAAE,KAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;SACrE,CAAC,CAAC;QACH,IAAI,CAAC,GAAG,CAAC,yBAAyB,EAAE,UAAC,SAA0B;YAC7D,KAAI,CAAC,EAAE,CAAC,IAAI,CAAC,4BAA4B,EAAE,SAAS,EAAE,KAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;SACpF,CAAC,CAAC;QACH,IAAI,CAAC,GAAG,CAAC,iBAAiB,EAAE,UAAC,eAAwB;YACnD,KAAI,CAAC,EAAE,CAAC,IAAI,CAAC,wBAAwB,EAAE,eAAe,EAAE,KAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;SACtF,CAAC,CAAC;QACH,IAAI,CAAC,GAAG,CAAC,sBAAsB,EAAE,UAAC,mBAA4B;YAC5D,KAAI,CAAC,EAAE,CAAC,IAAI,CACV,4BAA4B,EAC5B,mBAAmB,EACnB,KAAI,CAAC,oBAAoB,EAAE,CAC5B,CAAC;SACH,CAAC,CAAC;QACH,IAAI,CAAC,GAAG,CAAC,eAAe,EAAE,UAAC,aAAsB;YAC/C,KAAI,CAAC,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,aAAa,EAAE,KAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;SAClF,CAAC,CAAC;KACJ;;;;;;;IAQS,2CAAoB,GAA9B;;;QAGE,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,iBAAiB,KAAK,MAAM,GAAG,QAAQ,CAAC,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC;QACxF,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,wBAAwB,CAAC,CAAC;KACpE;;IAGD,6BAAM,GAAN,eAAiB;;;;IAKjB,oCAAa,GAAb;QACE,IAAI,CAAC,GAAG,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,wBAAwB,CAAC,CAAC;KACvE;;;;;;;IAQS,2CAAoB,GAA9B;QACE,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC;KAC1C;IA/DD;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC;2DACsB;IAOhD;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC;4CACV;IAdH,YAAY;QAHhC,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;SACzC,CAAC;OACmB,YAAY,CAuEhC;IAAD,mBAAC;CAvED,CAA0C,MAAM,CAAC,WAAW,CAAC;;;;"}
+{"version":3,"file":"window-scroll.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/scroll/components/window-scroll.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\nimport { mixins } from 'vue-class-component';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { ScrollDirection, ScrollMixin, xComponentMixin } from '../../../components';\nimport { WireMetadata } from '../../../wiring';\nimport { scrollXModule } from '../x-module';\nimport { MainScrollId } from './scroll.const';\n\ntype ScrollableElement = 'html' | 'body';\n\n/**\n * The `WindowScroll` component listens to either the `html` or `body` DOM scroll events, and\n * re-emits them as X Events. Additionally it also emits events related to the direction or\n * current position of these elements scroll.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(scrollXModule)]\n})\nexport default class WindowScroll extends mixins(ScrollMixin) {\n  /**\n   * Tag to identify the main scrollable element.\n   *\n   * @public\n   */\n  @Prop({ default: 'html' })\n  protected scrollableElement!: ScrollableElement;\n  /**\n   * Id to identify the component.\n   *\n   * @public\n   */\n  @Prop({ default: MainScrollId })\n  protected id!: string;\n\n  mounted(): void {\n    this.initAndListenElement();\n    this.$on('scroll', (position: number) => {\n      this.$x.emit('UserScrolled', position, this.createXEventMetadata());\n    });\n    this.$on('scroll:direction-change', (direction: ScrollDirection) => {\n      this.$x.emit('UserChangedScrollDirection', direction, this.createXEventMetadata());\n    });\n    this.$on('scroll:at-start', (hasReachedStart: boolean) => {\n      this.$x.emit('UserReachedScrollStart', hasReachedStart, this.createXEventMetadata());\n    });\n    this.$on('scroll:almost-at-end', (hasAlmostReachedEnd: boolean) => {\n      this.$x.emit(\n        'UserAlmostReachedScrollEnd',\n        hasAlmostReachedEnd,\n        this.createXEventMetadata()\n      );\n    });\n    this.$on('scroll:at-end', (hasReachedEnd: boolean) => {\n      this.$x.emit('UserReachedScrollEnd', hasReachedEnd, this.createXEventMetadata());\n    });\n  }\n\n  /**\n   * Sets the HTML element depending on {@link WindowScroll.scrollableElement}, and initialises\n   * its events.\n   *\n   * @internal\n   */\n  protected initAndListenElement(): void {\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-expect-error\n    this.$el = this.scrollableElement === 'body' ? document.body : document.documentElement;\n    this.$el.addEventListener('scroll', this.throttledStoreScrollData);\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  render(): void {}\n\n  /**\n   * Cleanup listeners.\n   */\n  beforeDestroy(): void {\n    this.$el.removeEventListener('scroll', this.throttledStoreScrollData);\n  }\n\n  /**\n   * Creates the metadata for the events of this component.\n   *\n   * @returns A {@link WireMetadata} for the events emitted by this component.\n   * @internal\n   */\n  protected createXEventMetadata(): Partial<WireMetadata> {\n    return { target: this.$el, id: this.id };\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA;;;;;;;AAUA;IAA0C,gCAAmB;IAA7D;;KAuEC;IAvDC,8BAAO,GAAP;QAAA,iBAqBC;QApBC,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,QAAgB;YAClC,KAAI,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,QAAQ,EAAE,KAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;SACrE,CAAC,CAAC;QACH,IAAI,CAAC,GAAG,CAAC,yBAAyB,EAAE,UAAC,SAA0B;YAC7D,KAAI,CAAC,EAAE,CAAC,IAAI,CAAC,4BAA4B,EAAE,SAAS,EAAE,KAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;SACpF,CAAC,CAAC;QACH,IAAI,CAAC,GAAG,CAAC,iBAAiB,EAAE,UAAC,eAAwB;YACnD,KAAI,CAAC,EAAE,CAAC,IAAI,CAAC,wBAAwB,EAAE,eAAe,EAAE,KAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;SACtF,CAAC,CAAC;QACH,IAAI,CAAC,GAAG,CAAC,sBAAsB,EAAE,UAAC,mBAA4B;YAC5D,KAAI,CAAC,EAAE,CAAC,IAAI,CACV,4BAA4B,EAC5B,mBAAmB,EACnB,KAAI,CAAC,oBAAoB,EAAE,CAC5B,CAAC;SACH,CAAC,CAAC;QACH,IAAI,CAAC,GAAG,CAAC,eAAe,EAAE,UAAC,aAAsB;YAC/C,KAAI,CAAC,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,aAAa,EAAE,KAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;SAClF,CAAC,CAAC;KACJ;;;;;;;IAQS,2CAAoB,GAA9B;;;QAGE,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,iBAAiB,KAAK,MAAM,GAAG,QAAQ,CAAC,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC;QACxF,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,wBAAwB,CAAC,CAAC;KACpE;;IAGD,6BAAM,GAAN,eAAiB;;;;IAKjB,oCAAa,GAAb;QACE,IAAI,CAAC,GAAG,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,wBAAwB,CAAC,CAAC;KACvE;;;;;;;IAQS,2CAAoB,GAA9B;QACE,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC;KAC1C;IA/DD;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC;2DACsB;IAOhD;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC;4CACV;IAdH,YAAY;QAHhC,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;SACzC,CAAC;OACmB,YAAY,CAuEhC;IAAD,mBAAC;CAvED,CAA0C,MAAM,CAAC,WAAW,CAAC;;;;"}

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

@@ -15,6 +15,7 @@ var __vue_render__ = function () {
     {
       staticClass: "x-banner",
       attrs: { href: _vm.banner.url, "data-test": "banner" },
+      on: { click: _vm.emitClickEvent },
     },
     [
       _c("img", {
@@ -32,7 +33,7 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-a58e5072_0", { source: ".x-banner {\n  display: flex;\n  flex-flow: column nowrap;\n  text-decoration: none;\n}\n.x-banner__image {\n  width: 100%;\n  object-fit: contain;\n}", map: undefined, media: undefined });
+    inject("data-v-134380e3_0", { source: ".x-banner {\n  display: flex;\n  flex-flow: column nowrap;\n  text-decoration: none;\n}\n.x-banner__image {\n  width: 100%;\n  object-fit: contain;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */

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

@@ -1 +1 @@
-{"version":3,"file":"banner.vue.js","sources":["../../../../../src/x-modules/search/components/banner.vue"],"sourcesContent":["<template>\n  <a :href=\"banner.url\" class=\"x-banner\" data-test=\"banner\">\n    <img :src=\"banner.image\" class=\"x-banner__image\" alt=\"\" />\n    <h2 class=\"x-banner__title\">{{ banner.title }}</h2>\n  </a>\n</template>\n\n<script lang=\"ts\">\n  import { Banner as BannerModel } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { searchXModule } from '../x-module';\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. It just contains a link to the banner content, an image\n   * and a title.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(searchXModule)]\n  })\n  export default class Banner extends Vue {\n    /**\n     * The banner data.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    public banner!: BannerModel;\n  }\n</script>\n\n<style lang=\"scss\">\n  .x-banner {\n    display: flex;\n    flex-flow: column nowrap;\n    text-decoration: none;\n\n    &__image {\n      width: 100%;\n      object-fit: contain;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nIn this example banned 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>\n  import { Banner } from '@empathyco/x-components/search';\n  export default {\n    name: 'BannerDemo',\n    components: {\n      Banner\n    },\n    data() {\n      return {\n        banner: {\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        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"banner.vue.js","sources":["../../../../../src/x-modules/search/components/banner.vue"],"sourcesContent":["<template>\n  <a @click=\"emitClickEvent\" :href=\"banner.url\" class=\"x-banner\" data-test=\"banner\">\n    <img :src=\"banner.image\" class=\"x-banner__image\" alt=\"\" />\n    <h2 class=\"x-banner__title\">{{ banner.title }}</h2>\n  </a>\n</template>\n\n<script lang=\"ts\">\n  import { Banner as BannerModel } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { searchXModule } from '../x-module';\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. It just contains a link to the banner content, an image\n   * and a title.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(searchXModule)]\n  })\n  export default class Banner extends Vue {\n    /**\n     * The banner data.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    public banner!: BannerModel;\n\n    /**\n     * Emits the banner click event.\n     *\n     * @internal\n     */\n    protected emitClickEvent(): void {\n      this.$x.emit('UserClickedABanner', this.banner);\n    }\n  }\n</script>\n\n<style lang=\"scss\">\n  .x-banner {\n    display: flex;\n    flex-flow: column nowrap;\n    text-decoration: none;\n\n    &__image {\n      width: 100%;\n      object-fit: contain;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nIn this example banned 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>\n  import { Banner } from '@empathyco/x-components/search';\n  export default {\n    name: 'BannerDemo',\n    components: {\n      Banner\n    },\n    data() {\n      return {\n        banner: {\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        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/search/components/banner.vue_rollup-plugin-vue=script.js

@@ -17,6 +17,14 @@ var Banner = /** @class */ (function (_super) {
     function Banner() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
+    /**
+     * Emits the banner click event.
+     *
+     * @internal
+     */
+    Banner.prototype.emitClickEvent = function () {
+        this.$x.emit('UserClickedABanner', this.banner);
+    };
     __decorate([
         Prop({ required: true })
     ], Banner.prototype, "banner", void 0);

package/js/x-modules/search/components/banner.vue_rollup-plugin-vue=script.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/search/components/banner.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\nimport { Banner as BannerModel } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { searchXModule } from '../x-module';\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. It just contains a link to the banner content, an image\n * and a title.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(searchXModule)]\n})\nexport default class Banner extends Vue {\n  /**\n   * The banner data.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  public banner!: BannerModel;\n}\n"],"names":[],"mappings":";;;;;;AAaA;;;;;;;;AAWA;IAAoC,0BAAG;IAAvC;;KAQC;IADC;QADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;0CACG;IAPT,MAAM;QAH1B,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;SACzC,CAAC;OACmB,MAAM,CAQ1B;IAAD,aAAC;CAAA,CARmC,GAAG;;;;"}
+{"version":3,"file":"banner.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/search/components/banner.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\nimport { Banner as BannerModel } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { searchXModule } from '../x-module';\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. It just contains a link to the banner content, an image\n * and a title.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(searchXModule)]\n})\nexport default class Banner extends Vue {\n  /**\n   * The banner data.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  public banner!: BannerModel;\n\n  /**\n   * Emits the banner click event.\n   *\n   * @internal\n   */\n  protected emitClickEvent(): void {\n    this.$x.emit('UserClickedABanner', this.banner);\n  }\n}\n"],"names":[],"mappings":";;;;;;AAaA;;;;;;;;AAWA;IAAoC,0BAAG;IAAvC;;KAiBC;;;;;;IAHW,+BAAc,GAAxB;QACE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;KACjD;IATD;QADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;0CACG;IAPT,MAAM;QAH1B,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;SACzC,CAAC;OACmB,MAAM,CAiB1B;IAAD,aAAC;CAAA,CAjBmC,GAAG;;;;"}

package/js/x-modules/search/components/banners-list.vue_rollup-plugin-vue=script.js

@@ -1,9 +1,9 @@
 import { __extends, __spreadArray, __decorate } from 'tslib';
 import { Prop, Component } from 'vue-property-decorator';
 import { NoElement } from '../../../components/no-element.js';
-import ItemsList from '../../../components/items-list.vue.js';
 import { State } from '../../../components/decorators/store.decorators.js';
 import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import ItemsList from '../../../components/items-list.vue.js';
 import { ItemsListInjectionMixin } from '../../../components/items-list-injection.mixin.js';
 import { searchXModule } from '../x-module.js';
 

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

@@ -1 +1 @@
-{"version":3,"file":"partial-query-button.vue.js","sources":["../../../../../src/x-modules/search/components/partial-query-button.vue"],"sourcesContent":["<template>\n  <button\n    @click=\"emitEvents\"\n    class=\"x-button x-partial-query-button\"\n    data-test=\"partial-query-button\"\n  >\n    <slot v-bind=\"{ query }\">{{ query }}</slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { 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   */\n  @Component({\n    mixins: [xComponentMixin(searchXModule)]\n  })\n  export default class PartialQueryButton extends Vue {\n    /**\n     * The query property.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    public query!: string;\n\n    /**\n     * Generates the {@link WireMetadata | event metadata} object omitting the moduleName.\n     *\n     * @returns The {@link WireMetadata} object omitting the moduleName.\n     * @internal\n     */\n    protected createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n      return {\n        target: this.$el as HTMLElement,\n        feature: 'partial_result'\n      };\n    }\n\n    /**\n     * Emits events when the button is clicked.\n     *\n     * @public\n     */\n    protected emitEvents(): void {\n      this.$x.emit('UserAcceptedAQuery', this.query, this.createEventMetadata());\n      this.$x.emit('UserClickedPartialQuery', this.query, this.createEventMetadata());\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n# Examples\n\n## Basic example\n\nA button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery} and {@link\nSearchXEvents.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\n## Customizing its contents\n\n```vue\n<template>\n  <PartialQueryButton>\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>\n  import { PartialQueryButton } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      PartialQueryButton\n    }\n  };\n</script>\n```\n\n## Events\n\nThis component emits 2 different events:\n\n- UserAcceptedAQuery: the event is emitted after the user clicks the partial query. The event\n  payload is the partial query data.\n- UserClickedPartialQuery: the event is emitted after the user clicks the partial query. The event\n  payload is the partial query data.\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"partial-query-button.vue.js","sources":["../../../../../src/x-modules/search/components/partial-query-button.vue"],"sourcesContent":["<template>\n  <button\n    @click=\"emitEvents\"\n    class=\"x-button x-partial-query-button\"\n    data-test=\"partial-query-button\"\n  >\n    <slot v-bind=\"{ query }\">{{ query }}</slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { 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   */\n  @Component({\n    mixins: [xComponentMixin(searchXModule)]\n  })\n  export default class PartialQueryButton extends Vue {\n    /**\n     * The query property.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    public query!: string;\n\n    /**\n     * Generates the {@link WireMetadata | event metadata} object omitting the moduleName.\n     *\n     * @returns The {@link WireMetadata} object omitting the moduleName.\n     * @internal\n     */\n    protected createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n      return {\n        target: this.$el as HTMLElement,\n        feature: 'partial_result'\n      };\n    }\n\n    /**\n     * Emits events when the button is clicked.\n     *\n     * @public\n     */\n    protected emitEvents(): void {\n      this.$x.emit('UserAcceptedAQuery', this.query, this.createEventMetadata());\n      this.$x.emit('UserClickedPartialQuery', this.query, this.createEventMetadata());\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nA button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery} and {@link\nSearchXEvents.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\n### Customizing its contents\n\n```vue\n<template>\n  <PartialQueryButton>\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>\n  import { PartialQueryButton } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      PartialQueryButton\n    }\n  };\n</script>\n```\n\n## Events\n\nThis component emits 2 different events:\n\n- UserAcceptedAQuery: the event is emitted after the user clicks the partial query. The event\n  payload is the partial query data.\n- UserClickedPartialQuery: the event is emitted after the user clicks the partial query. The event\n  payload is the partial query data.\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -40,11 +40,11 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-7c9cdc3c_0", { source: ".x-partial-results[data-v-7c9cdc3c] {\n  list-style-type: none;\n  padding: 0;\n}", map: undefined, media: undefined });
+    inject("data-v-91d70c6c_0", { source: ".x-partial-results[data-v-91d70c6c] {\n  list-style-type: none;\n  padding: 0;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-7c9cdc3c";
+  var __vue_scope_id__ = "data-v-91d70c6c";
   /* module identifier */
   var __vue_module_identifier__ = undefined;
   /* functional template */

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

@@ -1 +1 @@
-{"version":3,"file":"partial-results-list.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-list 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 :partialResult=\"partialResult\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { PartialResult } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { 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   */\n  @Component({\n    mixins: [xComponentMixin(searchXModule)]\n  })\n  export default class PartialResultsList extends Vue {\n    /**\n     * Animation component that will be used to animate the partial results.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue | string;\n    /**\n     * The partials results from the search state.\n     *\n     * @public\n     */\n    @State('search', 'partialResults')\n    public items!: PartialResult[];\n    /**\n     * Maximum number of partial results to show.\n     *\n     * @public\n     */\n    @Prop({ default: 5 })\n    protected maxItemsToRender!: number;\n    /**\n     * A limited number of partial results.\n     *\n     * @returns The partial results sliced by the maxItemsToRender.\n     *\n     * @internal\n     */\n    protected get partialResults(): PartialResult[] {\n      return this.items.slice(0, this.maxItemsToRender);\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-partial-results {\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 an exposed a slot to use 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\n## Configuring the number of partials\n\nIt sets 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\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</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"partial-results-list.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-list 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 :partialResult=\"partialResult\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { PartialResult } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { 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   */\n  @Component({\n    mixins: [xComponentMixin(searchXModule)]\n  })\n  export default class PartialResultsList extends Vue {\n    /**\n     * Animation component that will be used to animate the partial results.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue | string;\n    /**\n     * The partials results from the search state.\n     *\n     * @public\n     */\n    @State('search', 'partialResults')\n    public items!: PartialResult[];\n    /**\n     * Maximum number of partial results to show.\n     *\n     * @public\n     */\n    @Prop({ default: 5 })\n    protected maxItemsToRender!: number;\n    /**\n     * A limited number of partial results.\n     *\n     * @returns The partial results sliced by the maxItemsToRender.\n     *\n     * @internal\n     */\n    protected get partialResults(): PartialResult[] {\n      return this.items.slice(0, this.maxItemsToRender);\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-partial-results {\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 an exposed a slot to use 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\n### Configuring the number of partials\n\nIt sets 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\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</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -15,6 +15,7 @@ var __vue_render__ = function () {
     {
       staticClass: "x-promoted",
       attrs: { href: _vm.promoted.url, "data-test": "promoted" },
+      on: { click: _vm.emitClickEvent },
     },
     [
       _c("img", {
@@ -32,7 +33,7 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-2097a69a_0", { source: ".x-promoted {\n  display: flex;\n  flex-flow: column nowrap;\n  text-decoration: none;\n}\n.x-promoted__image {\n  width: 100%;\n  object-fit: contain;\n}", map: undefined, media: undefined });
+    inject("data-v-344a5de2_0", { source: ".x-promoted {\n  display: flex;\n  flex-flow: column nowrap;\n  text-decoration: none;\n}\n.x-promoted__image {\n  width: 100%;\n  object-fit: contain;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */

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

@@ -1 +1 @@
-{"version":3,"file":"promoted.vue.js","sources":["../../../../../src/x-modules/search/components/promoted.vue"],"sourcesContent":["<template>\n  <a :href=\"promoted.url\" class=\"x-promoted\" data-test=\"promoted\">\n    <img :src=\"promoted.image\" class=\"x-promoted__image\" alt=\"\" />\n    <h2 class=\"x-promoted__title\">{{ promoted.title }}</h2>\n  </a>\n</template>\n\n<script lang=\"ts\">\n  import { Promoted as PromotedModel } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { 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   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(searchXModule)]\n  })\n  export default class Promoted extends Vue {\n    /**\n     * The promoted data.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    public promoted!: PromotedModel;\n  }\n</script>\n\n<style lang=\"scss\">\n  .x-promoted {\n    display: flex;\n    flex-flow: column nowrap;\n    text-decoration: none;\n\n    &__image {\n      width: 100%;\n      object-fit: contain;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\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>\n  import { Promoted } from '@empathyco/x-components/search';\n\n  export default {\n    name: 'PromotedDemo',\n    components: {\n      Promoted\n    },\n    data() {\n      return {\n        promoted: {\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        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"promoted.vue.js","sources":["../../../../../src/x-modules/search/components/promoted.vue"],"sourcesContent":["<template>\n  <a @click=\"emitClickEvent\" :href=\"promoted.url\" class=\"x-promoted\" data-test=\"promoted\">\n    <img :src=\"promoted.image\" class=\"x-promoted__image\" alt=\"\" />\n    <h2 class=\"x-promoted__title\">{{ promoted.title }}</h2>\n  </a>\n</template>\n\n<script lang=\"ts\">\n  import { Promoted as PromotedModel } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { 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   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(searchXModule)]\n  })\n  export default class Promoted extends Vue {\n    /**\n     * The promoted data.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    public promoted!: PromotedModel;\n\n    /**\n     * Emits the promoted click event.\n     *\n     * @internal\n     */\n    protected emitClickEvent(): void {\n      this.$x.emit('UserClickedAPromoted', this.promoted);\n    }\n  }\n</script>\n\n<style lang=\"scss\">\n  .x-promoted {\n    display: flex;\n    flex-flow: column nowrap;\n    text-decoration: none;\n\n    &__image {\n      width: 100%;\n      object-fit: contain;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\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>\n  import { Promoted } from '@empathyco/x-components/search';\n\n  export default {\n    name: 'PromotedDemo',\n    components: {\n      Promoted\n    },\n    data() {\n      return {\n        promoted: {\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        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}