@empathyco/x-components 5.0.0-alpha.9 → 6.0.0-alpha.2

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

@@ -1,247 +1,6 @@
-import { defineComponent, ref, computed, provide, onMounted, onBeforeUnmount, watch } from 'vue';
-import { scrollXModule } from '../x-module.js';
-import { DISABLE_ANIMATIONS_KEY } from '../../../components/decorators/injection.consts.js';
-import { useRegisterXModule } from '../../../composables/use-register-x-module.js';
-import { useState } from '../../../composables/use-state.js';
-import { useXBus } from '../../../composables/use-x-bus.js';
-import { ScrollObserverKey } from './scroll.const.js';
+import _sfc_main from './main-scroll.vue.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
- */
-var script = defineComponent({
-    name: 'MainScroll',
-    xModule: scrollXModule.name,
-    props: {
-        /**
-         * If `true`, sets this scroll instance to the main of the application. Being the main
-         * scroll implies that features like restoring the scroll when the query changes, or storing
-         * the scroll position in the URL will be enabled for this container.
-         *
-         * @public
-         */
-        useWindow: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         * Timeout in milliseconds to abort trying to restore the scroll position to the target
-         * element.
-         *
-         * @public
-         */
-        restoreScrollTimeoutMs: {
-            type: Number,
-            default: 5000
-        },
-        /**
-         * Intersection percentage to consider an element visible.
-         *
-         * @public
-         */
-        threshold: {
-            type: Number,
-            default: 0.3
-        },
-        /**
-         * Adjusts the size of the scroll container bounds.
-         *
-         * @public
-         */
-        margin: {
-            type: String,
-            default: '0px'
-        }
-    },
-    setup(props) {
-        useRegisterXModule(scrollXModule);
-        const xBus = useXBus();
-        /**
-         * The elements that are currently considered visible.
-         *
-         * @internal
-         */
-        const intersectingElements = ref([]);
-        /**
-         * The reference to the root element of the component.
-         *
-         * @internal
-         */
-        const rootRef = ref(null);
-        /**
-         * Intersection observer to determine visibility of the elements.
-         *
-         * @returns An intersection observer to detect elements visibility.
-         * @internal
-         */
-        let intersectionObserver = ref(null);
-        /**
-         * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem} item
-         * `id` property, this component should be scrolled into view.
-         *
-         * @internal
-         */
-        const { pendingScrollTo } = useState('scroll', ['pendingScrollTo']);
-        /**
-         * Disables the animations.
-         *
-         * @returns A boolean to disable the animations.
-         * @internal
-         */
-        const disableAnimations = computed(() => !!pendingScrollTo.value);
-        provide(DISABLE_ANIMATIONS_KEY, disableAnimations);
-        /**
-         * Removes an element from the {@link MainScroll.intersectingElements} list.
-         *
-         * @param element - The element to remove from the visible elements.
-         * @internal
-         */
-        const removeVisibleElement = (element) => {
-            const index = intersectingElements.value.indexOf(element);
-            if (index !== -1) {
-                intersectingElements.value.splice(index, 1);
-            }
-        };
-        /**
-         * 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
-         */
-        const visibleElementsObserver = computed(() => {
-            const observer = intersectionObserver.value;
-            return observer
-                ? {
-                    observe: observer.observe.bind(observer),
-                    unobserve: element => {
-                        removeVisibleElement(element);
-                        observer.unobserve(element);
-                    }
-                }
-                : null;
-        });
-        provide(ScrollObserverKey, visibleElementsObserver);
-        /**
-         * Updates the visible elements given a list of intersection observer entries.
-         *
-         * @param entries - The entries from whom update the visibility.
-         * @internal
-         */
-        const updateVisibleElements = (entries) => {
-            entries.forEach(entry => {
-                const target = entry.target;
-                if (entry.isIntersecting) {
-                    intersectingElements.value.push(target);
-                }
-                else {
-                    removeVisibleElement(target);
-                }
-            });
-        };
-        /**
-         * Initialise the observer after mounting the component.
-         */
-        onMounted(() => {
-            intersectionObserver.value = new IntersectionObserver(updateVisibleElements, {
-                root: props.useWindow ? document : rootRef.value,
-                threshold: props.threshold,
-                rootMargin: props.margin
-            });
-        });
-        /**
-         * Disconnects the intersection observer.
-         *
-         * @internal
-         */
-        onBeforeUnmount(() => {
-            intersectionObserver.value?.disconnect();
-            xBus.emit('UserScrolledToElement', '');
-        });
-        /**
-         * Disconnects the previous observer.
-         *
-         * @param _new - The new `IntersectionObserver`.
-         * @param old - The new `IntersectionObserver`.
-         * @internal
-         */
-        watch(intersectionObserver, (_new, old) => {
-            old?.disconnect();
-        });
-        /**
-         * Stores the identifier of the timeout that will consider the scroll failed to restore.
-         *
-         * @internal
-         */
-        let restoreScrollFailTimeoutId;
-        /**
-         * 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
-         */
-        watch(pendingScrollTo, () => {
-            // TODO Move this logic to the wiring. A cancelable delay operator is needed
-            clearTimeout(restoreScrollFailTimeoutId);
-            if (pendingScrollTo.value) {
-                restoreScrollFailTimeoutId = window.setTimeout(() => {
-                    xBus.emit('ScrollRestoreFailed');
-                }, props.restoreScrollTimeoutMs);
-            }
-        });
-        /**
-         * Adds the dynamic css classes to the component.
-         *
-         * @returns The class to be added to the component.
-         *
-         * @internal
-         */
-        const dynamicClasses = computed(() => {
-            return {
-                'x-main-scroll--no-transition': !!pendingScrollTo.value
-            };
-        });
-        /**
-         * The first visible element contained in this component.
-         *
-         * @returns The first visible element in this component.
-         * @internal
-         */
-        const firstVisibleElement = computed(() => {
-            if (intersectingElements.value.length === 0) {
-                return '';
-            }
-            const firstVisibleElement = intersectingElements.value.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 === rootRef.value?.querySelector('[data-scroll]')
-                ? ''
-                : firstVisibleElement.dataset.scroll;
-        });
-        watch(firstVisibleElement, () => {
-            xBus.emit('UserScrolledToElement', firstVisibleElement.value);
-        }, { immediate: true });
-        return {
-            rootRef,
-            dynamicClasses,
-            firstVisibleElement,
-            visibleElementsObserver,
-            intersectingElements
-        };
-    }
-});
 
-export { script as default };
+
+export { _sfc_main as default };
 //# sourceMappingURL=main-scroll.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"main-scroll.vue2.js","sources":["../../../../../src/x-modules/scroll/components/main-scroll.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n  import { computed, defineComponent, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { scrollXModule } from '../x-module';\n  import { DISABLE_ANIMATIONS_KEY } from '../../../components/decorators/injection.consts';\n  import { useRegisterXModule } from '../../../composables/use-register-x-module';\n  import { useState } from '../../../composables/use-state';\n  import { useXBus } from '../../../composables/use-x-bus';\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  export default defineComponent({\n    name: 'MainScroll',\n    xModule: scrollXModule.name,\n    props: {\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      useWindow: {\n        type: Boolean,\n        default: false\n      },\n      /**\n       * Timeout in milliseconds to abort trying to restore the scroll position to the target\n       * element.\n       *\n       * @public\n       */\n      restoreScrollTimeoutMs: {\n        type: Number,\n        default: 5000\n      },\n      /**\n       * Intersection percentage to consider an element visible.\n       *\n       * @public\n       */\n      threshold: {\n        type: Number,\n        default: 0.3\n      },\n      /**\n       * Adjusts the size of the scroll container bounds.\n       *\n       * @public\n       */\n      margin: {\n        type: String,\n        default: '0px'\n      }\n    },\n    setup(props) {\n      useRegisterXModule(scrollXModule);\n\n      const xBus = useXBus();\n\n      /**\n       * The elements that are currently considered visible.\n       *\n       * @internal\n       */\n      const intersectingElements = ref<HTMLElement[]>([]);\n      /**\n       * The reference to the root element of the component.\n       *\n       * @internal\n       */\n      const rootRef = ref<HTMLDivElement | null>(null);\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      let intersectionObserver = ref<IntersectionObserver | null>(null);\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      const { pendingScrollTo } = useState('scroll', ['pendingScrollTo']);\n\n      /**\n       * Disables the animations.\n       *\n       * @returns A boolean to disable the animations.\n       * @internal\n       */\n      const disableAnimations = computed((): boolean => !!pendingScrollTo.value);\n      provide(DISABLE_ANIMATIONS_KEY as string, disableAnimations);\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      const removeVisibleElement = (element: HTMLElement): void => {\n        const index = intersectingElements.value.indexOf(element);\n        if (index !== -1) {\n          intersectingElements.value.splice(index, 1);\n        }\n      };\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      const visibleElementsObserver = computed((): ScrollVisibilityObserver | null => {\n        const observer = intersectionObserver.value;\n        return observer\n          ? {\n              observe: observer.observe.bind(observer),\n              unobserve: element => {\n                removeVisibleElement(element);\n                observer.unobserve(element);\n              }\n            }\n          : null;\n      });\n      provide(ScrollObserverKey as string, visibleElementsObserver);\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      const updateVisibleElements = (entries: IntersectionObserverEntry[]): void => {\n        entries.forEach(entry => {\n          const target = entry.target as HTMLElement;\n          if (entry.isIntersecting) {\n            intersectingElements.value.push(target);\n          } else {\n            removeVisibleElement(target);\n          }\n        });\n      };\n\n      /**\n       * Initialise the observer after mounting the component.\n       */\n      onMounted(() => {\n        intersectionObserver.value = new IntersectionObserver(updateVisibleElements, {\n          root: props.useWindow ? document : rootRef.value,\n          threshold: props.threshold,\n          rootMargin: props.margin\n        });\n      });\n\n      /**\n       * Disconnects the intersection observer.\n       *\n       * @internal\n       */\n      onBeforeUnmount(() => {\n        intersectionObserver.value?.disconnect();\n        xBus.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(\n        intersectionObserver,\n        (_new: IntersectionObserver | null, old: IntersectionObserver | null) => {\n          old?.disconnect();\n        }\n      );\n\n      /**\n       * Stores the identifier of the timeout that will consider the scroll failed to restore.\n       *\n       * @internal\n       */\n      let restoreScrollFailTimeoutId: number;\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        // TODO Move this logic to the wiring. A cancelable delay operator is needed\n        clearTimeout(restoreScrollFailTimeoutId);\n        if (pendingScrollTo.value) {\n          restoreScrollFailTimeoutId = window.setTimeout(() => {\n            xBus.emit('ScrollRestoreFailed');\n          }, props.restoreScrollTimeoutMs);\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      const dynamicClasses = computed((): VueCSSClasses => {\n        return {\n          'x-main-scroll--no-transition': !!pendingScrollTo.value\n        };\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      const firstVisibleElement = computed((): string | '' => {\n        if (intersectingElements.value.length === 0) {\n          return '';\n        }\n        const firstVisibleElement = intersectingElements.value.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        return firstVisibleElement === rootRef.value?.querySelector('[data-scroll]')\n          ? ''\n          : firstVisibleElement.dataset.scroll!;\n      });\n      watch(\n        firstVisibleElement,\n        () => {\n          xBus.emit('UserScrolledToElement', firstVisibleElement.value);\n        },\n        { immediate: true }\n      );\n\n      return {\n        rootRef,\n        dynamicClasses,\n        firstVisibleElement,\n        visibleElementsObserver,\n        intersectingElements\n      };\n    }\n  });\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"main-scroll.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

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

@@ -1,71 +1,31 @@
-import script from './scroll-to-top.vue2.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _sfc_main from './scroll-to-top.vue2.js';
+import { resolveComponent, openBlock, createBlock, resolveDynamicComponent, withCtx, createCommentVNode, renderSlot } from 'vue';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_BaseEventButton = resolveComponent("BaseEventButton");
+  return openBlock(), createBlock(resolveDynamicComponent(_ctx.animation), null, {
+    default: withCtx(() => [
+      _ctx.isVisible ? (openBlock(), createBlock(_component_BaseEventButton, {
+        key: 0,
+        class: "x-scroll-to-top x-button",
+        "data-test": "scroll-to-top",
+        "aria-label": "Scroll to top",
+        events: _ctx.events
+      }, {
+        default: withCtx(() => [
+          createCommentVNode(" @slot (Required) Button content with a text, an icon or both "),
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["events"])) : createCommentVNode("v-if", true)
+    ]),
+    _: 3
+    /* FORWARDED */
+  });
+}
+var scrollToTop = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-/* 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-scroll-to-top x-button",
-                attrs: {
-                  "data-test": "scroll-to-top",
-                  "aria-label": "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 };
+export { scrollToTop as default };
 //# sourceMappingURL=scroll-to-top.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"scroll-to-top.vue.js","sources":["../../../../../src/x-modules/scroll/components/scroll-to-top.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\">\n    <BaseEventButton\n      v-if=\"isVisible\"\n      v-on=\"$listeners\"\n      class=\"x-scroll-to-top x-button\"\n      data-test=\"scroll-to-top\"\n      aria-label=\"Scroll to top\"\n      :events=\"events\"\n    >\n      <!-- @slot (Required) Button content with a text, an icon or both -->\n      <slot />\n    </BaseEventButton>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { Dictionary } from '@empathyco/x-utils';\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 { 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## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedScrollToTop`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the id of the scroll\n  that it going to be scrolled.\n\n## Examples\n\n### Basic example\n\nThe component renders whatever is passed to it in the default slot and scrolls to top the scroll\nwith an id `scrollId`.\n\nIt also receives an optional threshold in pixels. When the threshold is reached from the top, the\ncomponent will be shown once the user scrolls `UP`.\n\nIf this parameter is not provided the button will be visible when the user almost reaches the end of\nthe scroll.\n\n```vue\n<template>\n  <div>\n    <ScrollToTop scroll-id=\"scrollId\" :threshold-px=\"1000\">\n      <span>Scroll to top</span>\n    </ScrollToTop>\n  </div>\n</template>\n\n<script>\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</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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      class=\"x-scroll-to-top x-button\"\n      data-test=\"scroll-to-top\"\n      aria-label=\"Scroll to top\"\n      :events=\"events\"\n    >\n      <!-- @slot (Required) Button content with a text, an icon or both -->\n      <slot />\n    </BaseEventButton>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent } from 'vue';\n  import { NoAnimation, BaseEventButton } from '../../../components';\n  import { XEventsTypes } from '../../../wiring';\n  import { scrollXModule } from '../x-module';\n  import { AnimationProp } from '../../../types';\n  import { useState } from '../../../composables';\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  export default defineComponent({\n    name: 'ScrollToTop',\n    xModule: scrollXModule.name,\n    components: { BaseEventButton },\n    props: {\n      /**\n       * Animation to use for showing/hiding the button.\n       *\n       * @public\n       */\n      animation: {\n        type: AnimationProp,\n        default: () => NoAnimation\n      },\n      /**\n       * Threshold in pixels from the top to show the button.\n       *\n       * @public\n       */\n      thresholdPx: Number,\n      /**\n       * Id of the target scroll component.\n       *\n       * @public\n       */\n      scrollId: {\n        type: String,\n        default: MainScrollId\n      }\n    },\n    setup(props) {\n      /**\n       * State of all the scroll components in this module.\n       *\n       * @internal\n       */\n      // TODO: Directly retrieve the needed data in this computed property\n      const { data } = useState('scroll', ['data']);\n\n      /**\n       * The scroll data retrieved for this component.\n       *\n       * @returns The scroll data for this component if a valid {@link ScrollToTop.scrollId} has been\n       * passed. Otherwise it returns `null`.\n       * @internal\n       */\n      const scrollData = computed(() => {\n        return props.scrollId && data.value[props.scrollId]\n          ? data.value[props.scrollId]\n          : {\n              position: 0,\n              direction: 'UP',\n              hasReachedStart: false,\n              hasAlmostReachedEnd: false,\n              hasReachedEnd: false\n            };\n      });\n\n      /**\n       * Event that will be emitted when the scroll to top is clicked.\n       *\n       * @returns The event to be emitted when the scroll to top is clicked. The id as a payload.\n       * @internal\n       */\n      const events = computed(\n        (): Partial<XEventsTypes> => ({ UserClickedScrollToTop: props.scrollId })\n      );\n\n      /**\n       * Checks if the thresholdPx prop has been provided and if it is a number.\n       *\n       * @returns If the thresholdPx is a number or not.\n       * @internal\n       */\n      const useThresholdStrategy = computed(() => typeof props.thresholdPx === 'number');\n\n      /**\n       * Checks if the threshold has been reached in case the threshold strategy is in use.\n       *\n       * @returns If the scrollTop is bigger than the thresholdPx.\n       * @internal\n       */\n      const isThresholdReached = computed(\n        () => useThresholdStrategy.value && scrollData.value.position > props.thresholdPx!\n      );\n\n      /**\n       * Returns if the scroll has almost reached its end or not.\n       *\n       * @returns True if the scroll has almost reached the end and the user is still scrolling down.\n       * @internal\n       */\n      const hasAlmostReachedScrollEnd = computed(\n        () => scrollData.value.hasAlmostReachedEnd && scrollData.value.direction === 'DOWN'\n      );\n\n      /**\n       * Whether if the button is visible or not depending on the strategy being used.\n       *\n       * @returns If the button should be visible or not.\n       * @internal\n       */\n      const isVisible = computed(() =>\n        useThresholdStrategy.value ? isThresholdReached.value : hasAlmostReachedScrollEnd.value\n      );\n\n      return {\n        events,\n        isVisible\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedScrollToTop`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the id of the scroll\n  that it going to be scrolled.\n\n## Examples\n\n### Basic example\n\nThe component renders whatever is passed to it in the default slot and scrolls to top the scroll\nwith an id `scrollId`.\n\nIt also receives an optional threshold in pixels. When the threshold is reached from the top, the\ncomponent will be shown once the user scrolls `UP`.\n\nIf this parameter is not provided the button will be visible when the user almost reaches the end of\nthe scroll.\n\n```vue\n<template>\n  <div>\n    <ScrollToTop scroll-id=\"scrollId\" :threshold-px=\"1000\">\n      <span>Scroll to top</span>\n    </ScrollToTop>\n  </div>\n</template>\n\n<script>\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</docs>\n"],"names":["_resolveComponent","animation","isVisible","_createBlock","_resolveDynamicComponent","_withCtx","events","_createCommentVNode","_renderSlot"],"mappings":";;;;;AAYc,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAZd,iBACkBC,CAAAA,CAAAA;SAENC,SAAS,EAAA,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA,IAAA,EAAA;AAAA,IADjB,OAAA,EAAAC,OAAA,CAAA,MAAA;AAAA,MAAA,IAAA,CAFJ,wBAIsC,EAAAF,WAAA,CAAA,0BAAA,EAAA;AAAA,QAChC,GAAA,EAAA,CAAA;AAAA,QACA,KAAA,EAAA,0BAAA;AAAA,QACC,WAAQG,EAAAA,eAAAA;AAAAA,QAAAA,YAAAA,EAAAA,eAAAA;AAPf,QAAA,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,OAAA,EAAA;iBAUMD,OAAQ,CAAA,MAAA;AAAA,UAAAE,kBAAA,CAAA,gEAAA,CAAA;AAVd,UAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,SAAA,CAAA;AAAA,QAAA,CAAA,EAAA,CAAA;AAAA;AAAA,OAAA,EAAA,CAAA,EAAA,CAAA,QAAA,CAAA,CAAA,IAAAD,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}