@empathyco/x-components 3.0.0-alpha.29 → 3.0.0-alpha.32

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

@@ -0,0 +1,233 @@
+import { __extends, __decorate } from 'tslib';
+import Vue from 'vue';
+import { Prop, Component } from 'vue-property-decorator';
+import '../../../components/animations/animate-width.vue.js';
+import '../../../components/animations/collapse-from-top.vue.js';
+import '../../../components/animations/animations.mixin.js';
+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/staggered-fade-and-slide.vue.js';
+import '../../../components/animations/translate-from-left.vue.js';
+import '../../../components/animations/translate-from-right.vue.js';
+import BaseEventButton from '../../../components/base-event-button.vue.js';
+import { NoElement } from '../../../components/no-element.js';
+import '../../../components/base-dropdown.vue.js';
+import '../../../components/decorators/bus.decorators.js';
+import '../../../components/column-picker/column-picker.mixin.js';
+import '../../../components/column-picker/base-column-picker-dropdown.vue.js';
+import '../../../components/column-picker/base-column-picker-list.vue.js';
+import '../../../components/decorators/injection.decorators.js';
+import '../../../components/currency/base-currency.vue.js';
+import '../../../components/filters/labels/base-price-filter-label.vue.js';
+import '../../../components/icons/star.vue.js';
+import '../../../components/base-rating.vue.js';
+import '../../../components/filters/labels/base-rating-filter-label.vue.js';
+import '../../../components/icons/arrow.vue.js';
+import '../../../components/icons/bag.vue.js';
+import '../../../components/icons/bar-code.vue.js';
+import '../../../components/icons/barcode-tiny.vue.js';
+import '../../../components/icons/cart.vue.js';
+import '../../../components/icons/check-tiny.vue.js';
+import '../../../components/icons/check.vue.js';
+import '../../../components/icons/checkbox-card-selected.vue.js';
+import '../../../components/icons/checkbox-card-unselected.vue.js';
+import '../../../components/icons/checkbox-selected.vue.js';
+import '../../../components/icons/checkbox-unselected.vue.js';
+import '../../../components/icons/chevron-down.vue.js';
+import '../../../components/icons/chevron-left.vue.js';
+import '../../../components/icons/chevron-right.vue.js';
+import '../../../components/icons/chevron-tiny-down.vue.js';
+import '../../../components/icons/chevron-tiny-left.vue.js';
+import '../../../components/icons/chevron-tiny-right.vue.js';
+import '../../../components/icons/chevron-tiny-up.vue.js';
+import '../../../components/icons/chevron-up.vue.js';
+import '../../../components/icons/cross-tiny.vue.js';
+import '../../../components/icons/cross.vue.js';
+import '../../../components/icons/filters.vue.js';
+import '../../../components/icons/grid-1-col.vue.js';
+import '../../../components/icons/grid-2-col.vue.js';
+import '../../../components/icons/hide.vue.js';
+import '../../../components/icons/history-tiny.vue.js';
+import '../../../components/icons/history.vue.js';
+import '../../../components/icons/menu.vue.js';
+import '../../../components/icons/minus-tiny.vue.js';
+import '../../../components/icons/minus.vue.js';
+import '../../../components/icons/nq-1.vue.js';
+import '../../../components/icons/nq-2.vue.js';
+import '../../../components/icons/nq-3.vue.js';
+import '../../../components/icons/nq-4.vue.js';
+import '../../../components/icons/plus.vue.js';
+import '../../../components/icons/search.vue.js';
+import '../../../components/icons/show.vue.js';
+import '../../../components/icons/search-tiny.vue.js';
+import '../../../components/icons/trash-open.vue.js';
+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/modals/base-modal.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';
+import '../../../components/result/base-result-image.vue.js';
+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';
+import '../../../components/decorators/injection.consts.js';
+import '../../../components/base-grid.vue.js';
+import '../../../components/base-keyboard-navigation.vue.js';
+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';
+import '../../../components/items-list-injection.mixin.js';
+
+/**
+ * The `ScrollToTop` component is a button that the user can click to make a container scroll
+ * up to its initial position.
+ *
+ * @public
+ */
+var ScrollToTop = /** @class */ (function (_super) {
+    __extends(ScrollToTop, _super);
+    function ScrollToTop() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(ScrollToTop.prototype, "scrollData", {
+        /**
+         * The scroll data retrieved for this component.
+         *
+         * @returns The scroll data for this component if a valid {@link ScrollToTop.scrollId} has been
+         * passed. Otherwise it returns `null`.
+         * @internal
+         */
+        get: function () {
+            return this.scrollId && this.scrollPositionsMap[this.scrollId]
+                ? this.scrollPositionsMap[this.scrollId]
+                : {
+                    position: 0,
+                    direction: 'UP',
+                    hasReachedStart: false,
+                    hasAlmostReachedEnd: false,
+                    hasReachedEnd: false
+                };
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ScrollToTop.prototype, "events", {
+        /**
+         * Event that will be emitted when the scroll to top is clicked.
+         *
+         * @returns The event to be emitted when the scroll to top is clicked. The id as a payload.
+         * @internal
+         */
+        get: function () {
+            return { UserClickedScrollToTop: this.scrollId };
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ScrollToTop.prototype, "useThresholdStrategy", {
+        /**
+         * Checks if the thresholdPx prop has been provided and if it is a number.
+         *
+         * @returns If the thresholdPx is a number or not.
+         * @internal
+         */
+        get: function () {
+            return typeof this.thresholdPx === 'number';
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ScrollToTop.prototype, "isThresholdReached", {
+        /**
+         * Checks if the threshold has been reached in case the threshold strategy is in use.
+         *
+         * @returns If the scrollTop is bigger than the thresholdPx.
+         * @internal
+         */
+        get: function () {
+            return this.useThresholdStrategy && this.scrollData.position > this.thresholdPx;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ScrollToTop.prototype, "isVisible", {
+        /**
+         * Whether if the button is visible or not depending on the strategy being used.
+         *
+         * @returns If the button should be visible or not.
+         * @internal
+         */
+        get: function () {
+            return this.useThresholdStrategy ? this.isThresholdReached : this.hasAlmostReachedScrollEnd;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ScrollToTop.prototype, "hasAlmostReachedScrollEnd", {
+        /**
+         * Returns if the scroll has almost reached its end or not.
+         *
+         * @returns True if the scroll has almost reached the end and the user is still scrolling down.
+         * @internal
+         */
+        get: function () {
+            return this.scrollData.hasAlmostReachedEnd && this.scrollData.direction === 'DOWN';
+        },
+        enumerable: false,
+        configurable: true
+    });
+    __decorate([
+        Prop({ default: function () { return NoElement; } })
+    ], ScrollToTop.prototype, "animation", void 0);
+    __decorate([
+        Prop()
+    ], ScrollToTop.prototype, "thresholdPx", void 0);
+    __decorate([
+        Prop({ default: MainScrollId })
+    ], ScrollToTop.prototype, "scrollId", void 0);
+    __decorate([
+        State('scroll', 'data')
+    ], ScrollToTop.prototype, "scrollPositionsMap", void 0);
+    ScrollToTop = __decorate([
+        Component({
+            mixins: [xComponentMixin(scrollXModule)],
+            components: { BaseEventButton: BaseEventButton }
+        })
+    ], ScrollToTop);
+    return ScrollToTop;
+}(Vue));
+
+export default ScrollToTop;
+//# sourceMappingURL=scroll-to-top.vue_rollup-plugin-vue=script.js.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +1,15 @@
+/**
+ * Constant to inject the first visible item observer.
+ *
+ * @internal
+ */
+var ScrollObserverKey = 'ScrollObserverKey';
+/**
+ * The default scroll id for all the scroll components.
+ *
+ * @internal
+ */
+var MainScrollId = 'main-scroll';
+
+export { MainScrollId, ScrollObserverKey };
+//# sourceMappingURL=scroll.const.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scroll.const.js","sources":["../../../../../src/x-modules/scroll/components/scroll.const.ts"],"sourcesContent":["import { XInjectKey } from '../../../components/decorators/injection.decorators';\nimport { ScrollVisibilityObserver } from './scroll.types';\n\n/**\n * Constant to inject the first visible item observer.\n *\n * @internal\n */\nexport const ScrollObserverKey: XInjectKey<ScrollVisibilityObserver | null> = 'ScrollObserverKey';\n/**\n * The default scroll id for all the scroll components.\n *\n * @internal\n */\nexport const MainScrollId = 'main-scroll';\n"],"names":[],"mappings":"AAGA;;;;;IAKa,iBAAiB,GAAgD,oBAAoB;AAClG;;;;;IAKa,YAAY,GAAG;;;;"}

package/js/{components/scroll/base-id-scroll.vue.js → x-modules/scroll/components/scroll.vue.js}

@@ -1,11 +1,11 @@
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-import script from './base-id-scroll.vue_rollup-plugin-vue=script.js';
+import script from './scroll.vue_rollup-plugin-vue=script.js';
 
 /* script */
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -17,15 +17,14 @@ var __vue_render__ = function() {
           id: _vm.id,
           throttleMs: _vm.throttleMs,
           distanceToBottom: _vm.distanceToBottom,
-          resetOnQueryChange: _vm.resetOnQueryChange
         },
         on: {
-          scroll: _vm.scroll,
-          "scroll:direction-change": _vm.scrollDirectionChange,
-          "scroll:at-start": _vm.scrollAtStart,
-          "scroll:almost-at-end": _vm.scrollAlmostAtEnd,
-          "scroll:at-end": _vm.scrollAtEnd
-        }
+          scroll: _vm.emitScroll,
+          "scroll:direction-change": _vm.emitScrollDirectionChange,
+          "scroll:at-start": _vm.emitScrollAtStart,
+          "scroll:almost-at-end": _vm.emitScrollAlmostAtEnd,
+          "scroll:at-end": _vm.emitScrollAtEnd,
+        },
       },
       _vm.$listeners
     ),
@@ -66,4 +65,4 @@ __vue_render__._withStripped = true;
   );
 
 export default __vue_component__;
-//# sourceMappingURL=base-id-scroll.vue.js.map
+//# sourceMappingURL=scroll.vue.js.map

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

@@ -0,0 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,110 @@
+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';
+
+/**
+ * Base scroll component that depending on base scroll component and the user interaction emits
+ * different x events for knowing when the user scrolls, the direction of scroll and if user
+ * reaches the start or end.
+ *
+ * @public
+ */
+var Scroll = /** @class */ (function (_super) {
+    __extends(Scroll, _super);
+    function Scroll() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    /**
+     * Emits the `UserScrolled` event.
+     *
+     * @param position - The new position of scroll.
+     * @internal
+     */
+    Scroll.prototype.emitScroll = function (position) {
+        this.$x.emit('UserScrolled', position, this.createEventMetadata());
+    };
+    /**
+     * Emits the `UserChangedScrollDirection` event when the scrolling direction has changed.
+     *
+     * @param direction - The new direction of scroll.
+     * @internal
+     */
+    Scroll.prototype.emitScrollDirectionChange = function (direction) {
+        this.$x.emit('UserChangedScrollDirection', direction, this.createEventMetadata());
+    };
+    /**
+     * Emits the 'UserReachedScrollStart' event when the user reaches the start.
+     *
+     * @param isAtStart - A boolean indicating if the scroll is at the ending position.
+     * @internal
+     */
+    Scroll.prototype.emitScrollAtStart = function (isAtStart) {
+        this.$x.emit('UserReachedScrollStart', isAtStart, this.createEventMetadata());
+    };
+    /**
+     * Emits the 'UserAlmostReachedScrollEnd' event when the user is about to reach to end.
+     *
+     * @param isAlmostAtEnd - A boolean indicating if the scroll is almost at its ending position.
+     * @internal
+     */
+    Scroll.prototype.emitScrollAlmostAtEnd = function (isAlmostAtEnd) {
+        this.$x.emit('UserAlmostReachedScrollEnd', isAlmostAtEnd, this.createEventMetadata());
+    };
+    /**
+     * Emits the 'UserReachedScrollEnd' event when the user is about to reach to end.
+     *
+     * @param isAtEnd - A boolean indicating if the scroll is at the ending position.
+     * @internal
+     */
+    Scroll.prototype.emitScrollAtEnd = function (isAtEnd) {
+        this.$x.emit('UserReachedScrollEnd', isAtEnd, this.createEventMetadata());
+    };
+    /**
+     * Creates a {@link WireMetadata} metadata object for all the emitted events.
+     *
+     * @internal
+     * @returns A new {@link WireMetadata} object.
+     */
+    Scroll.prototype.createEventMetadata = function () {
+        return { target: this.$el, id: this.id };
+    };
+    /**
+     * Scrolls to initial position when the user has clicked the scroll to top button.
+     *
+     * @param scrollId - {@link XEventsTypes.UserClickedScrollToTop}.
+     * @internal
+     */
+    Scroll.prototype.scrollToTop = function (scrollId) {
+        var _a;
+        if (scrollId === this.id && this.$el) {
+            (_a = this.$el) === null || _a === void 0 ? void 0 : _a.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+    };
+    __decorate([
+        Prop()
+    ], Scroll.prototype, "throttleMs", void 0);
+    __decorate([
+        Prop()
+    ], Scroll.prototype, "distanceToBottom", void 0);
+    __decorate([
+        Prop({ default: MainScrollId })
+    ], Scroll.prototype, "id", void 0);
+    __decorate([
+        XOn('UserClickedScrollToTop')
+    ], Scroll.prototype, "scrollToTop", null);
+    Scroll = __decorate([
+        Component({
+            mixins: [xComponentMixin(scrollXModule)],
+            components: { BaseScroll: BaseScroll }
+        })
+    ], Scroll);
+    return Scroll;
+}(Vue));
+
+export default Scroll;
+//# sourceMappingURL=scroll.vue_rollup-plugin-vue=script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scroll.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/scroll/components/scroll.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\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 { xComponentMixin } from '../../../components/x-component.mixin';\nimport { WireMetadata } from '../../../wiring/wiring.types';\nimport { XOn } from '../../../components/decorators/bus.decorators';\nimport BaseScroll from '../../../components/scroll/base-scroll.vue';\nimport { ScrollDirection } from '../../../components/scroll/scroll.types';\nimport { scrollXModule } from '../x-module';\nimport { 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})\nexport 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"],"names":[],"mappings":";;;;;;;;;AA2BA;;;;;;;AAWA;IAAoC,0BAAG;IAAvC;;KAmGC;;;;;;;IAlEW,2BAAU,GAApB,UAAqB,QAAgB;QACnC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,QAAQ,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;KACpE;;;;;;;IAQS,0CAAyB,GAAnC,UAAoC,SAA0B;QAC5D,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,4BAA4B,EAAE,SAAS,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;KACnF;;;;;;;IAQS,kCAAiB,GAA3B,UAA4B,SAAkB;QAC5C,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,wBAAwB,EAAE,SAAS,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;KAC/E;;;;;;;IAQS,sCAAqB,GAA/B,UAAgC,aAAsB;QACpD,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,4BAA4B,EAAE,aAAa,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;KACvF;;;;;;;IAQS,gCAAe,GAAzB,UAA0B,OAAgB;QACxC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,OAAO,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;KAC3E;;;;;;;IAQS,oCAAmB,GAA7B;QACE,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,GAAkB,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC;KACzD;;;;;;;IASD,4BAAW,GAAX,UAAY,QAAgB;;QAC1B,IAAI,QAAQ,KAAK,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,GAAG,EAAE;YACpC,MAAA,IAAI,CAAC,GAAG,0CAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;SACpD;KACF;IA1FD;QADC,IAAI,EAAE;8CACoB;IAS3B;QADC,IAAI,EAAE;oDAC0B;IAQjC;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC;sCACb;IAqEnB;QADC,GAAG,CAAC,wBAAwB,CAAC;6CAK7B;IAlGkB,MAAM;QAJ1B,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;YACxC,UAAU,EAAE,EAAE,UAAU,YAAA,EAAE;SAC3B,CAAC;OACmB,MAAM,CAmG1B;IAAD,aAAC;CAAA,CAnGmC,GAAG;;;;"}

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

@@ -0,0 +1,39 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+import script from './window-scroll.vue_rollup-plugin-vue=script.js';
+
+/* script */
+var __vue_script__ = script;
+
+/* template */
+
+  /* style */
+  var __vue_inject_styles__ = undefined;
+  /* scoped */
+  var __vue_scope_id__ = undefined;
+  /* module identifier */
+  var __vue_module_identifier__ = undefined;
+  /* functional template */
+  var __vue_is_functional_template__ = undefined;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    {},
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
+//# sourceMappingURL=window-scroll.vue.js.map

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

@@ -0,0 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}