@empathyco/x-components 3.0.0-alpha.7 → 3.0.0-alpha.70

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

@@ -0,0 +1,186 @@
+import { __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-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/animations/staggered-fade-and-slide.vue.js';
+import '../../../components/animations/staggering-transition-group.vue_rollup-plugin-vue_script.vue.js';
+import 'vue-runtime-helpers/dist/normalize-component.mjs';
+import 'vue-runtime-helpers/dist/inject-style/browser.mjs';
+import '../../../components/animations/animate-clip-path/animate-clip-path.style.scss.js';
+import '../../../components/animations/animate-scale/animate-scale.style.scss.js';
+import '../../../components/animations/animate-translate/animate-translate.style.scss.js';
+import '../../../components/column-picker/base-column-picker-dropdown.vue.js';
+import '../../../components/column-picker/base-column-picker-list.vue.js';
+import '../../../components/column-picker/column-picker.mixin.js';
+import '../../../components/currency/base-currency.vue.js';
+import '../../../components/filters/labels/base-price-filter-label.vue_rollup-plugin-vue_script.vue.js';
+import '../../../components/filters/labels/base-rating-filter-label.vue.js';
+import '../../../components/icons/arrow-down.vue.js';
+import '../../../components/icons/arrow-left.vue.js';
+import '../../../components/icons/arrow-right.vue.js';
+import '../../../components/icons/arrow-up.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/curated-check.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/grid-2-rows.vue.js';
+import '../../../components/icons/hide.vue.js';
+import '../../../components/icons/history-tiny.vue.js';
+import '../../../components/icons/history.vue.js';
+import '../../../components/icons/light-bulb-off.vue.js';
+import '../../../components/icons/light-bulb-on.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/star.vue.js';
+import '../../../components/icons/search-tiny.vue.js';
+import '../../../components/icons/tag.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/layouts/fixed-header-and-asides-layout.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-modal.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-header-toggle-panel.vue.js';
+import '../../../components/panels/base-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/result/base-result-rating.vue.js';
+import '../../../components/scroll/base-scroll.vue.js';
+import '../../../components/scroll/scroll.mixin.js';
+import '../../../components/suggestions/base-suggestion.vue.js';
+import '../../../components/suggestions/base-suggestions.vue.js';
+import '../../../components/auto-progress-bar.vue.js';
+import '../../../components/base-event-button.vue.js';
+import '../../../components/base-dropdown.vue.js';
+import '../../../components/base-grid.vue.js';
+import '../../../components/base-keyboard-navigation.vue.js';
+import '../../../components/base-rating.vue.js';
+import '../../../components/base-variable-column-grid.vue.js';
+import { NoElement } from '../../../components/no-element.js';
+import '../../../components/sliding-panel.vue.js';
+import '../../../components/items-list.vue.js';
+import '../../../components/location-provider.vue_rollup-plugin-vue_script.vue.js';
+import '../../../components/global-x-bus.vue_rollup-plugin-vue_script.vue.js';
+import '../../../components/snippet-callbacks.vue.js';
+import 'rxjs';
+import 'rxjs/operators';
+import 'vue-class-component';
+import { XInject } from '../../../components/decorators/injection.decorators.js';
+import { State } from '../../../components/decorators/store.decorators.js';
+import '../../../components/items-list-injection.mixin.js';
+import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import { scrollXModule } from '../x-module.js';
+import { ScrollObserverKey } from './scroll.const.js';
+
+/**
+ * Wrapper for elements contained in the {@link MainScroll} that should store/restore its
+ * position.
+ *
+ * @public
+ */
+let MainScrollItem = class MainScrollItem extends Vue {
+    /**
+     * Initialise scroll behavior.
+     * - Observes the rendered element to detect if it is the first visible item.
+     * - If the rendered element matches the {@link MainScrollItem.pendingScrollTo}, scrolls the
+     * element into the first position of the view.
+     *
+     * @internal
+     */
+    async mounted() {
+        await this.$nextTick(); // Mounted does not guarantee that child components are mounted too
+        // eslint-disable-next-line @typescript-eslint/unbound-method
+        this.$watch('firstVisibleItemObserver', this.observeItem, { immediate: true });
+    }
+    /**
+     * Detaches the observer from the rendered element to prevent memory leaks.
+     *
+     * @internal
+     */
+    beforeDestroy() {
+        this.firstVisibleItemObserver?.unobserve(this.$el);
+    }
+    /**
+     * Initialises the element visibility observation, stopping the previous one if it has.
+     *
+     * @param newObserver - The new observer for the HTML element.
+     * @param oldObserver - The old observer for the HTML element.
+     */
+    observeItem(newObserver, oldObserver) {
+        oldObserver?.unobserve(this.$el);
+        newObserver?.observe(this.$el);
+        if (this.pendingScrollTo === this.item.id) {
+            this.$el.scrollIntoView();
+            this.$x.emit('ScrollRestoreSucceeded');
+        }
+    }
+};
+__decorate([
+    Prop({ required: true })
+], MainScrollItem.prototype, "item", void 0);
+__decorate([
+    Prop({ default: () => NoElement })
+], MainScrollItem.prototype, "tag", void 0);
+__decorate([
+    State('scroll', 'pendingScrollTo')
+], MainScrollItem.prototype, "pendingScrollTo", void 0);
+__decorate([
+    XInject(ScrollObserverKey)
+], MainScrollItem.prototype, "firstVisibleItemObserver", void 0);
+MainScrollItem = __decorate([
+    Component({
+        mixins: [xComponentMixin(scrollXModule)]
+    })
+], MainScrollItem);
+var script = MainScrollItem;
+
+export { script as default };
+//# sourceMappingURL=main-scroll-item.vue_rollup-plugin-vue_script.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"main-scroll-item.vue_rollup-plugin-vue_script.vue.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,IAAqB,cAAc,GAAnC,MAAqB,cAAe,SAAQ,GAAG;;;;;;;;;IAiD7C,MAAM,OAAO;QACX,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;;QAEvB,IAAI,CAAC,MAAM,CAAC,0BAA0B,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;KAChF;;;;;;IAOD,aAAa;QACX,IAAI,CAAC,wBAAwB,EAAE,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACpD;;;;;;;IAQD,WAAW,CACT,WAA4C,EAC5C,WAA4C;QAE5C,WAAW,EAAE,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACjC,WAAW,EAAE,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;CACF,CAAA;AAnEC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;4CACE;AAQ3B;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,SAAS,EAAE,CAAC;2CACF;AASjC;IADC,KAAK,CAAC,QAAQ,EAAE,iBAAiB,CAAC;uDACH;AAQhC;IADC,OAAO,CAAC,iBAAiB,CAAC;gEACuC;AAvC/C,cAAc;IAHlC,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;KACzC,CAAC;GACmB,cAAc,CAiFlC;aAjFoB,cAAc;;;;"}

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

@@ -0,0 +1,50 @@
+import script from './main-scroll.vue_rollup-plugin-vue_script.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.mjs';
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("NoElement", { class: _vm.dynamicClasses }, [_vm._t("default")], 2)
+};
+var __vue_staticRenderFns__ = [];
+__vue_render__._withStripped = true;
+
+  /* style */
+  const __vue_inject_styles__ = function (inject) {
+    if (!inject) return
+    inject("data-v-033a89d3_0", { source: ".x-main-scroll--no-transition * {\n  transition: none !important;\n  transform: none !important;\n  opacity: 1 !important;\n}", map: undefined, media: undefined });
+
+  };
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    __vue_create_injector__,
+    undefined,
+    undefined
+  );
+
+export { __vue_component__ as default };
+//# sourceMappingURL=main-scroll.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"main-scroll.vue.js","sources":["../../../../../src/x-modules/scroll/components/main-scroll.vue"],"sourcesContent":["<template>\n  <NoElement :class=\"dynamicClasses\">\n    <slot />\n  </NoElement>\n</template>\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop, Watch } from 'vue-property-decorator';\n  import { XEmit } from '../../../components/decorators/bus.decorators';\n  import { XProvide } from '../../../components/decorators/injection.decorators';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { NoElement } from '../../../components/no-element';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { VueCSSClasses } from '../../../utils/index';\n  import { scrollXModule } from '../x-module';\n  import { ScrollObserverKey } from './scroll.const';\n  import { ScrollVisibilityObserver } from './scroll.types';\n\n  /**\n   * Extends the scroll making it able to sync the first visible element, and allowing\n   * the children position to be restored.\n   *\n   * Each child element that wants to have this support must be wrapped in a {@link MainScrollItem}\n   * component.\n   *\n   * @public\n   */\n  @Component({\n    components: { NoElement },\n    mixins: [xComponentMixin(scrollXModule)]\n  })\n  /* eslint-disable @typescript-eslint/unbound-method */\n  export default class MainScroll extends Vue {\n    /**\n     * If `true`, sets this scroll instance to the main of the application. Being the main\n     * scroll implies that features like restoring the scroll when the query changes, or storing\n     * the scroll position in the URL will be enabled for this container.\n     *\n     * @public\n     */\n    @Prop({ default: false, type: Boolean })\n    public useWindow!: boolean;\n\n    /**\n     * Timeout in milliseconds to abort trying to restore the scroll position to the target\n     * element.\n     *\n     * @public\n     */\n    @Prop({ default: 5000 })\n    public restoreScrollTimeoutMs!: number;\n\n    /**\n     * Intersection percentage to consider an element visible.\n     *\n     * @public\n     */\n    @Prop({ default: 0.3 })\n    public threshold!: number;\n\n    /**\n     * Adjusts the size of the scroll container bounds.\n     *\n     * @public\n     */\n    @Prop({ default: '0px' })\n    public margin!: string;\n\n    /**\n     * The elements that are currently considered visible.\n     *\n     * @internal\n     */\n    protected intersectingElements: HTMLElement[] = [];\n\n    /**\n     * Intersection observer to determine visibility of the elements.\n     *\n     * @returns An intersection observer to detect elements visibility.\n     * @internal\n     */\n    protected intersectionObserver: IntersectionObserver | null = null;\n\n    /**\n     * Stores the identifier of the timeout that will consider the scroll failed to restore.\n     *\n     * @internal\n     */\n    protected restoreScrollFailTimeoutId?: number;\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     * Creates an `IntersectionObserver` to detect the first visible elements. Children of this\n     * component should register themselves if they want to be observed.\n     *\n     * @returns The intersection observer.\n     * @public\n     */\n    @XProvide(ScrollObserverKey)\n    public get visibleElementsObserver(): ScrollVisibilityObserver | null {\n      const observer = this.intersectionObserver;\n      return observer\n        ? {\n            observe: observer.observe.bind(observer),\n            unobserve: element => {\n              this.removeVisibleElement(element);\n              observer.unobserve(element);\n            }\n          }\n        : null;\n    }\n\n    /**\n     * The first visible element contained in this component.\n     *\n     * @returns The first visible element in this component.\n     * @internal\n     */\n    @XEmit('UserScrolledToElement')\n    public get firstVisibleElement(): string | '' {\n      if (this.intersectingElements.length === 0) {\n        return '';\n      }\n      const firstVisibleElement = this.intersectingElements.reduce(\n        (firstVisibleElement, anotherElement) => {\n          // FIXME: This algorithm only takes into account LTR layouts\n          const firstVisibleElementBounds = firstVisibleElement.getBoundingClientRect();\n          const anotherElementBounds = anotherElement.getBoundingClientRect();\n          return anotherElementBounds.left <= firstVisibleElementBounds.left &&\n            anotherElementBounds.top <= firstVisibleElementBounds.top\n            ? anotherElement\n            : firstVisibleElement;\n        }\n      );\n\n      return firstVisibleElement === this.$el.querySelector('[data-scroll]')\n        ? ''\n        : firstVisibleElement.dataset.scroll!;\n    }\n\n    /**\n     * Initialise the observer after mounting the component.\n     */\n    mounted(): void {\n      this.intersectionObserver = new IntersectionObserver(this.updateVisibleElements, {\n        root: this.useWindow ? document : this.$el,\n        threshold: this.threshold,\n        rootMargin: this.margin\n      });\n    }\n\n    /**\n     * Disconnects the intersection observer.\n     *\n     * @internal\n     */\n    beforeDestroy(): void {\n      this.intersectionObserver?.disconnect();\n      this.$x.emit('UserScrolledToElement', '');\n    }\n\n    /**\n     * Disconnects the previous observer.\n     *\n     * @param _new - The new `IntersectionObserver`.\n     * @param old - The new `IntersectionObserver`.\n     * @internal\n     */\n    @Watch('intersectionObserver')\n    protected disconnectPreviousObserver(\n      _new: IntersectionObserver | null,\n      old: IntersectionObserver | null\n    ): void {\n      old?.disconnect();\n    }\n\n    /**\n     * If there is a pending scroll, starts a countdown to stop trying to restore the scroll.\n     *\n     * @param pendingScrollTo - The position the scroll should be restored to.\n     * @internal\n     */\n    @Watch('pendingScrollTo')\n    protected failRestoringScroll(pendingScrollTo: string | null): void {\n      // TODO Move this logic to the wiring. A cancelable delay operator is needed\n      clearTimeout(this.restoreScrollFailTimeoutId);\n      if (pendingScrollTo) {\n        this.restoreScrollFailTimeoutId = setTimeout(() => {\n          this.$x.emit('ScrollRestoreFailed');\n        }, this.restoreScrollTimeoutMs);\n      }\n    }\n\n    /**\n     * Removes an element from the {@link MainScroll.intersectingElements} list.\n     *\n     * @param element - The element to remove from the visible elements.\n     * @internal\n     */\n    protected removeVisibleElement(element: HTMLElement): void {\n      const index = this.intersectingElements.indexOf(element);\n      if (index !== -1) {\n        this.intersectingElements.splice(index, 1);\n      }\n    }\n\n    /**\n     * Updates the visible elements given a list of intersection observer entries.\n     *\n     * @param entries - The entries from whom update the visibility.\n     * @internal\n     */\n    protected updateVisibleElements(entries: IntersectionObserverEntry[]): void {\n      entries.forEach(entry => {\n        const target = entry.target as HTMLElement;\n        if (entry.isIntersecting) {\n          this.intersectingElements.push(target);\n        } else {\n          this.removeVisibleElement(target);\n        }\n      });\n    }\n\n    /**\n     * Adds the dynamic css classes to the component.\n     *\n     * @returns The class to be added to the component.\n     *\n     * @internal\n     */\n    protected get dynamicClasses(): VueCSSClasses {\n      return {\n        'x-main-scroll--no-transition': !!this.pendingScrollTo\n      };\n    }\n  }\n</script>\n<style lang=\"scss\">\n  .x-main-scroll--no-transition {\n    * {\n      transition: none !important;\n      transform: none !important;\n      opacity: 1 !important;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n[`UserScrolledToElement`](./../../api/x-components.scrollxevents.md)\n[`ScrollRestoreFailed`](./../../api/x-components.scrollxevents.md)\n\n## See it in action\n\nThe `MainScroll` component must be an ancestor of the `MainScrollItem` components. This is because\nit injects the needed utilities to determine the first visible item.\n\n```vue\n<template>\n  <MainScroll>\n    <ul>\n      <MainScrollItem v-for=\"item in 24\" tag=\"li\">Item {{ item }}</MainScrollItem>\n    </ul>\n  </MainScroll>\n</template>\n\n<script>\n  import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'MainScrollDemo',\n    components: {\n      MainScroll,\n      MainScrollItem\n    }\n  };\n</script>\n\n<style scoped>\n  ul {\n    overflow: auto;\n    max-height: 200px;\n  }\n\n  li {\n    height: 50px;\n    line-height: 50px;\n  }\n</style>\n```\n\n### Play with props\n\n#### Window scroll\n\nIn case you aren't using a custom scrolling element like the `Scroll` panel, and want to use the\ndefault browser scroll, you can do so by using the `useWindow` prop:\n\n```vue\n<template>\n  <MainScroll useWindow>\n    <ul>\n      <MainScrollItem v-for=\"item in 24\" tag=\"li\">Item {{ item }}</MainScrollItem>\n    </ul>\n  </MainScroll>\n</template>\n\n<script>\n  import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'MainScrollDemo',\n    components: {\n      MainScroll,\n      MainScrollItem\n    }\n  };\n</script>\n```\n\n#### Timeout for restoring scroll\n\nWhen your application is loaded, this component, together with the `MainScrollItem` will try to\nrestore the scroll to the provided position (if available). Because of the dynamic nature of\nJavaScript applications, the element that it tries to restore the scroll to might not be available\nanymore. For this reason after a defined time, the scroll restoration will be considered failed.\n\nThis time can be configured through the `restore-scroll-timeout-ms` prop. This is specially useful\nwhen combined with the URL X Module.\n\n```vue\n<template>\n  <MainScroll :restoreScrollTimeoutMs=\"1000\">\n    <ul>\n      <MainScrollItem v-for=\"item in 24\" tag=\"li\">Item {{ item }}</MainScrollItem>\n    </ul>\n  </MainScroll>\n</template>\n\n<script>\n  import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'MainScrollDemo',\n    components: {\n      MainScroll,\n      MainScrollItem\n    }\n  };\n</script>\n```\n\n#### Adjust first visible item\n\nBy default this component will consider the first visible item, the first element that is at least\nintersecting a 50% with its container. However this arbitrary number might not always be the best.\n\nTo configure this, you can use the `margin` and `threshold` props, which work exactly like in the\n`IntersectionObserver` API. In this example we are reducing the bounds of the intersection by 50px,\nand adjusting the element to be at least 75% intersecting.\n\n```vue\n<template>\n  <MainScroll :threshold=\"0.75\" margin=\"-50px\">\n    <ul>\n      <MainScrollItem v-for=\"item in 24\" tag=\"li\">Item {{ item }}</MainScrollItem>\n    </ul>\n  </MainScroll>\n</template>\n\n<script>\n  import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'MainScrollDemo',\n    components: {\n      MainScroll,\n      MainScrollItem\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/scroll/components/main-scroll.vue_rollup-plugin-vue_script.vue.js

@@ -0,0 +1,205 @@
+import { __decorate } from 'tslib';
+import Vue from 'vue';
+import { Prop, Watch, Component } from 'vue-property-decorator';
+import { XEmit } from '../../../components/decorators/bus.decorators.js';
+import { XProvide } from '../../../components/decorators/injection.decorators.js';
+import { State } from '../../../components/decorators/store.decorators.js';
+import { NoElement } from '../../../components/no-element.js';
+import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import { scrollXModule } from '../x-module.js';
+import { ScrollObserverKey } from './scroll.const.js';
+
+/**
+ * Extends the scroll making it able to sync the first visible element, and allowing
+ * the children position to be restored.
+ *
+ * Each child element that wants to have this support must be wrapped in a {@link MainScrollItem}
+ * component.
+ *
+ * @public
+ */
+let MainScroll = 
+/* eslint-disable @typescript-eslint/unbound-method */
+class MainScroll extends Vue {
+    constructor() {
+        super(...arguments);
+        /**
+         * The elements that are currently considered visible.
+         *
+         * @internal
+         */
+        this.intersectingElements = [];
+        /**
+         * Intersection observer to determine visibility of the elements.
+         *
+         * @returns An intersection observer to detect elements visibility.
+         * @internal
+         */
+        this.intersectionObserver = null;
+    }
+    /**
+     * Creates an `IntersectionObserver` to detect the first visible elements. Children of this
+     * component should register themselves if they want to be observed.
+     *
+     * @returns The intersection observer.
+     * @public
+     */
+    get visibleElementsObserver() {
+        const observer = this.intersectionObserver;
+        return observer
+            ? {
+                observe: observer.observe.bind(observer),
+                unobserve: element => {
+                    this.removeVisibleElement(element);
+                    observer.unobserve(element);
+                }
+            }
+            : null;
+    }
+    /**
+     * The first visible element contained in this component.
+     *
+     * @returns The first visible element in this component.
+     * @internal
+     */
+    get firstVisibleElement() {
+        if (this.intersectingElements.length === 0) {
+            return '';
+        }
+        const firstVisibleElement = this.intersectingElements.reduce((firstVisibleElement, anotherElement) => {
+            // FIXME: This algorithm only takes into account LTR layouts
+            const firstVisibleElementBounds = firstVisibleElement.getBoundingClientRect();
+            const anotherElementBounds = anotherElement.getBoundingClientRect();
+            return anotherElementBounds.left <= firstVisibleElementBounds.left &&
+                anotherElementBounds.top <= firstVisibleElementBounds.top
+                ? anotherElement
+                : firstVisibleElement;
+        });
+        return firstVisibleElement === this.$el.querySelector('[data-scroll]')
+            ? ''
+            : firstVisibleElement.dataset.scroll;
+    }
+    /**
+     * Initialise the observer after mounting the component.
+     */
+    mounted() {
+        this.intersectionObserver = new IntersectionObserver(this.updateVisibleElements, {
+            root: this.useWindow ? document : this.$el,
+            threshold: this.threshold,
+            rootMargin: this.margin
+        });
+    }
+    /**
+     * Disconnects the intersection observer.
+     *
+     * @internal
+     */
+    beforeDestroy() {
+        this.intersectionObserver?.disconnect();
+        this.$x.emit('UserScrolledToElement', '');
+    }
+    /**
+     * Disconnects the previous observer.
+     *
+     * @param _new - The new `IntersectionObserver`.
+     * @param old - The new `IntersectionObserver`.
+     * @internal
+     */
+    disconnectPreviousObserver(_new, old) {
+        old?.disconnect();
+    }
+    /**
+     * If there is a pending scroll, starts a countdown to stop trying to restore the scroll.
+     *
+     * @param pendingScrollTo - The position the scroll should be restored to.
+     * @internal
+     */
+    failRestoringScroll(pendingScrollTo) {
+        // TODO Move this logic to the wiring. A cancelable delay operator is needed
+        clearTimeout(this.restoreScrollFailTimeoutId);
+        if (pendingScrollTo) {
+            this.restoreScrollFailTimeoutId = setTimeout(() => {
+                this.$x.emit('ScrollRestoreFailed');
+            }, this.restoreScrollTimeoutMs);
+        }
+    }
+    /**
+     * Removes an element from the {@link MainScroll.intersectingElements} list.
+     *
+     * @param element - The element to remove from the visible elements.
+     * @internal
+     */
+    removeVisibleElement(element) {
+        const index = this.intersectingElements.indexOf(element);
+        if (index !== -1) {
+            this.intersectingElements.splice(index, 1);
+        }
+    }
+    /**
+     * Updates the visible elements given a list of intersection observer entries.
+     *
+     * @param entries - The entries from whom update the visibility.
+     * @internal
+     */
+    updateVisibleElements(entries) {
+        entries.forEach(entry => {
+            const target = entry.target;
+            if (entry.isIntersecting) {
+                this.intersectingElements.push(target);
+            }
+            else {
+                this.removeVisibleElement(target);
+            }
+        });
+    }
+    /**
+     * Adds the dynamic css classes to the component.
+     *
+     * @returns The class to be added to the component.
+     *
+     * @internal
+     */
+    get dynamicClasses() {
+        return {
+            'x-main-scroll--no-transition': !!this.pendingScrollTo
+        };
+    }
+};
+__decorate([
+    Prop({ default: false, type: Boolean })
+], MainScroll.prototype, "useWindow", void 0);
+__decorate([
+    Prop({ default: 5000 })
+], MainScroll.prototype, "restoreScrollTimeoutMs", void 0);
+__decorate([
+    Prop({ default: 0.3 })
+], MainScroll.prototype, "threshold", void 0);
+__decorate([
+    Prop({ default: '0px' })
+], MainScroll.prototype, "margin", void 0);
+__decorate([
+    State('scroll', 'pendingScrollTo')
+], MainScroll.prototype, "pendingScrollTo", void 0);
+__decorate([
+    XProvide(ScrollObserverKey)
+], MainScroll.prototype, "visibleElementsObserver", null);
+__decorate([
+    XEmit('UserScrolledToElement')
+], MainScroll.prototype, "firstVisibleElement", null);
+__decorate([
+    Watch('intersectionObserver')
+], MainScroll.prototype, "disconnectPreviousObserver", null);
+__decorate([
+    Watch('pendingScrollTo')
+], MainScroll.prototype, "failRestoringScroll", null);
+MainScroll = __decorate([
+    Component({
+        components: { NoElement },
+        mixins: [xComponentMixin(scrollXModule)]
+    })
+    /* eslint-disable @typescript-eslint/unbound-method */
+], MainScroll);
+var script = MainScroll;
+
+export { script as default };
+//# sourceMappingURL=main-scroll.vue_rollup-plugin-vue_script.vue.js.map

package/js/x-modules/scroll/components/main-scroll.vue_rollup-plugin-vue_script.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main-scroll.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/scroll/components/main-scroll.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop, Watch } from 'vue-property-decorator';\nimport { XEmit } from '../../../components/decorators/bus.decorators';\nimport { XProvide } from '../../../components/decorators/injection.decorators';\nimport { State } from '../../../components/decorators/store.decorators';\nimport { NoElement } from '../../../components/no-element';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { VueCSSClasses } from '../../../utils/index';\nimport { scrollXModule } from '../x-module';\nimport { ScrollObserverKey } from './scroll.const';\nimport { ScrollVisibilityObserver } from './scroll.types';\n\n/**\n * Extends the scroll making it able to sync the first visible element, and allowing\n * the children position to be restored.\n *\n * Each child element that wants to have this support must be wrapped in a {@link MainScrollItem}\n * component.\n *\n * @public\n */\n@Component({\n  components: { NoElement },\n  mixins: [xComponentMixin(scrollXModule)]\n})\n/* eslint-disable @typescript-eslint/unbound-method */\nexport default class MainScroll extends Vue {\n  /**\n   * If `true`, sets this scroll instance to the main of the application. Being the main\n   * scroll implies that features like restoring the scroll when the query changes, or storing\n   * the scroll position in the URL will be enabled for this container.\n   *\n   * @public\n   */\n  @Prop({ default: false, type: Boolean })\n  public useWindow!: boolean;\n\n  /**\n   * Timeout in milliseconds to abort trying to restore the scroll position to the target\n   * element.\n   *\n   * @public\n   */\n  @Prop({ default: 5000 })\n  public restoreScrollTimeoutMs!: number;\n\n  /**\n   * Intersection percentage to consider an element visible.\n   *\n   * @public\n   */\n  @Prop({ default: 0.3 })\n  public threshold!: number;\n\n  /**\n   * Adjusts the size of the scroll container bounds.\n   *\n   * @public\n   */\n  @Prop({ default: '0px' })\n  public margin!: string;\n\n  /**\n   * The elements that are currently considered visible.\n   *\n   * @internal\n   */\n  protected intersectingElements: HTMLElement[] = [];\n\n  /**\n   * Intersection observer to determine visibility of the elements.\n   *\n   * @returns An intersection observer to detect elements visibility.\n   * @internal\n   */\n  protected intersectionObserver: IntersectionObserver | null = null;\n\n  /**\n   * Stores the identifier of the timeout that will consider the scroll failed to restore.\n   *\n   * @internal\n   */\n  protected restoreScrollFailTimeoutId?: number;\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   * Creates an `IntersectionObserver` to detect the first visible elements. Children of this\n   * component should register themselves if they want to be observed.\n   *\n   * @returns The intersection observer.\n   * @public\n   */\n  @XProvide(ScrollObserverKey)\n  public get visibleElementsObserver(): ScrollVisibilityObserver | null {\n    const observer = this.intersectionObserver;\n    return observer\n      ? {\n          observe: observer.observe.bind(observer),\n          unobserve: element => {\n            this.removeVisibleElement(element);\n            observer.unobserve(element);\n          }\n        }\n      : null;\n  }\n\n  /**\n   * The first visible element contained in this component.\n   *\n   * @returns The first visible element in this component.\n   * @internal\n   */\n  @XEmit('UserScrolledToElement')\n  public get firstVisibleElement(): string | '' {\n    if (this.intersectingElements.length === 0) {\n      return '';\n    }\n    const firstVisibleElement = this.intersectingElements.reduce(\n      (firstVisibleElement, anotherElement) => {\n        // FIXME: This algorithm only takes into account LTR layouts\n        const firstVisibleElementBounds = firstVisibleElement.getBoundingClientRect();\n        const anotherElementBounds = anotherElement.getBoundingClientRect();\n        return anotherElementBounds.left <= firstVisibleElementBounds.left &&\n          anotherElementBounds.top <= firstVisibleElementBounds.top\n          ? anotherElement\n          : firstVisibleElement;\n      }\n    );\n\n    return firstVisibleElement === this.$el.querySelector('[data-scroll]')\n      ? ''\n      : firstVisibleElement.dataset.scroll!;\n  }\n\n  /**\n   * Initialise the observer after mounting the component.\n   */\n  mounted(): void {\n    this.intersectionObserver = new IntersectionObserver(this.updateVisibleElements, {\n      root: this.useWindow ? document : this.$el,\n      threshold: this.threshold,\n      rootMargin: this.margin\n    });\n  }\n\n  /**\n   * Disconnects the intersection observer.\n   *\n   * @internal\n   */\n  beforeDestroy(): void {\n    this.intersectionObserver?.disconnect();\n    this.$x.emit('UserScrolledToElement', '');\n  }\n\n  /**\n   * Disconnects the previous observer.\n   *\n   * @param _new - The new `IntersectionObserver`.\n   * @param old - The new `IntersectionObserver`.\n   * @internal\n   */\n  @Watch('intersectionObserver')\n  protected disconnectPreviousObserver(\n    _new: IntersectionObserver | null,\n    old: IntersectionObserver | null\n  ): void {\n    old?.disconnect();\n  }\n\n  /**\n   * If there is a pending scroll, starts a countdown to stop trying to restore the scroll.\n   *\n   * @param pendingScrollTo - The position the scroll should be restored to.\n   * @internal\n   */\n  @Watch('pendingScrollTo')\n  protected failRestoringScroll(pendingScrollTo: string | null): void {\n    // TODO Move this logic to the wiring. A cancelable delay operator is needed\n    clearTimeout(this.restoreScrollFailTimeoutId);\n    if (pendingScrollTo) {\n      this.restoreScrollFailTimeoutId = setTimeout(() => {\n        this.$x.emit('ScrollRestoreFailed');\n      }, this.restoreScrollTimeoutMs);\n    }\n  }\n\n  /**\n   * Removes an element from the {@link MainScroll.intersectingElements} list.\n   *\n   * @param element - The element to remove from the visible elements.\n   * @internal\n   */\n  protected removeVisibleElement(element: HTMLElement): void {\n    const index = this.intersectingElements.indexOf(element);\n    if (index !== -1) {\n      this.intersectingElements.splice(index, 1);\n    }\n  }\n\n  /**\n   * Updates the visible elements given a list of intersection observer entries.\n   *\n   * @param entries - The entries from whom update the visibility.\n   * @internal\n   */\n  protected updateVisibleElements(entries: IntersectionObserverEntry[]): void {\n    entries.forEach(entry => {\n      const target = entry.target as HTMLElement;\n      if (entry.isIntersecting) {\n        this.intersectingElements.push(target);\n      } else {\n        this.removeVisibleElement(target);\n      }\n    });\n  }\n\n  /**\n   * Adds the dynamic css classes to the component.\n   *\n   * @returns The class to be added to the component.\n   *\n   * @internal\n   */\n  protected get dynamicClasses(): VueCSSClasses {\n    return {\n      'x-main-scroll--no-transition': !!this.pendingScrollTo\n    };\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,67 @@
+import script from './scroll-to-top.vue_rollup-plugin-vue_script.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c(
+    _vm.animation,
+    { tag: "component" },
+    [
+      _vm.isVisible
+        ? _c(
+            "BaseEventButton",
+            _vm._g(
+              {
+                staticClass: "x-button x-scroll-to-top",
+                attrs: { "data-test": "scroll-to-top", events: _vm.events },
+              },
+              _vm.$listeners
+            ),
+            [_vm._t("default")],
+            2
+          )
+        : _vm._e(),
+    ],
+    1
+  )
+};
+var __vue_staticRenderFns__ = [];
+__vue_render__._withStripped = true;
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export { __vue_component__ as default };
+//# sourceMappingURL=scroll-to-top.vue.js.map

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

@@ -0,0 +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":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}