@empathyco/x-components 6.0.0-alpha.99 → 6.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"main-scroll.vue.js","sources":["../../../../../src/x-modules/scroll/components/main-scroll.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ScrollVisibilityObserver } from './scroll.types'\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  onBeforeUnmount,\n  onMounted,\n  provide,\n  ref,\n  watch,\n} from 'vue'\nimport { DISABLE_ANIMATIONS_KEY } from '../../../components/decorators/injection.consts'\nimport { useState } from '../../../composables/use-state'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { scrollXModule } from '../x-module'\nimport { ScrollObserverKey } from './scroll.const'\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 */\nexport 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    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    restoreScrollTimeoutMs: {\n      type: Number,\n      default: 5000,\n    },\n    /** Intersection percentage to consider an element visible. */\n    threshold: {\n      type: Number,\n      default: 0.3,\n    },\n    /** Adjusts the size of the scroll container bounds. */\n    margin: {\n      type: String,\n      default: '0px',\n    },\n  },\n  setup(props, { slots }) {\n    const xBus = useXBus()\n\n    /** The reference to the root element of the component. */\n    const rootRef = ref<Element>()\n    /** The elements that are currently considered visible. */\n    const intersectingElements = ref<HTMLElement[]>([])\n\n    /** Intersection observer to determine visibility of the elements. */\n    const 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    const { pendingScrollTo } = useState('scroll')\n\n    /** Disables the animations. */\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     */\n    const removeVisibleElement = (element: HTMLElement) => {\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     */\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     */\n    const updateVisibleElements = (entries: IntersectionObserverEntry[]) => {\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    /** Stores the root element and initialise the observer after mounting the component. */\n    onMounted(() => {\n      rootRef.value = getCurrentInstance()?.proxy?.$el\n      if (rootRef.value) {\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    onBeforeUnmount(() => {\n      intersectionObserver.value?.disconnect()\n      xBus.emit('UserScrolledToElement', '')\n    })\n\n    /** Disconnects the previous observer. */\n    watch(intersectionObserver, (_new, old) => old?.disconnect())\n\n    /** Stores the identifier of the timeout that will consider the scroll failed to restore. */\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     */\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     * The first visible element contained in this component.\n     *\n     * @returns The first visible element in this component.\n     */\n    const firstVisibleElement = computed(() => {\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\n    watch(\n      firstVisibleElement,\n      () => xBus.emit('UserScrolledToElement', firstVisibleElement.value),\n      { immediate: true },\n    )\n\n    /*\n     * Obtains the vNodes array of the default slot and renders only the first one.\n     * It avoids to render a `Fragment` with the vNodes in Vue3 and the same behaviour in Vue2\n     * because Vue2 only allows a single root node. Then, `getCurrentInstance()?.proxy?.$el` to\n     * retrieve the HTML element in both versions.\n     */\n    return () => slots.default?.()[0] ?? ''\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserScrolledToElement`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`ScrollRestoreFailed`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\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>\nimport { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll'\n\nexport default {\n  name: 'MainScrollDemo',\n  components: {\n    MainScroll,\n    MainScrollItem,\n  },\n}\n</script>\n\n<style lang=\"css\" scoped>\nul {\n  overflow: auto;\n  max-height: 200px;\n}\n\nli {\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>\nimport { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll'\n\nexport 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>\nimport { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll'\n\nexport 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>\nimport { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll'\n\nexport default {\n  name: 'MainScrollDemo',\n  components: {\n    MainScroll,\n    MainScrollItem,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"main-scroll.vue.js","sources":["../../../../../src/x-modules/scroll/components/main-scroll.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ScrollVisibilityObserver } from './scroll.types'\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  onBeforeUnmount,\n  onMounted,\n  provide,\n  ref,\n  watch,\n} from 'vue'\nimport { DISABLE_ANIMATIONS_KEY } from '../../../components/decorators/injection.consts'\nimport { useState } from '../../../composables/use-state'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { scrollXModule } from '../x-module'\nimport { ScrollObserverKey } from './scroll.const'\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 */\nexport 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    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    restoreScrollTimeoutMs: {\n      type: Number,\n      default: 5000,\n    },\n    /** Intersection percentage to consider an element visible. */\n    threshold: {\n      type: Number,\n      default: 0.3,\n    },\n    /** Adjusts the size of the scroll container bounds. */\n    margin: {\n      type: String,\n      default: '0px',\n    },\n  },\n  setup(props, { slots }) {\n    const xBus = useXBus()\n\n    /** The reference to the root element of the component. */\n    const rootRef = ref<Element>()\n    /** The elements that are currently considered visible. */\n    const intersectingElements = ref<HTMLElement[]>([])\n\n    /** Intersection observer to determine visibility of the elements. */\n    const 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    const { pendingScrollTo } = useState('scroll')\n\n    /** Disables the animations. */\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     */\n    const removeVisibleElement = (element: HTMLElement) => {\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     */\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     */\n    const updateVisibleElements = (entries: IntersectionObserverEntry[]) => {\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    /** Stores the root element and initialise the observer after mounting the component. */\n    onMounted(() => {\n      rootRef.value = getCurrentInstance()?.proxy?.$el\n      if (rootRef.value) {\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    onBeforeUnmount(() => {\n      intersectionObserver.value?.disconnect()\n      xBus.emit('UserScrolledToElement', '')\n    })\n\n    /** Disconnects the previous observer. */\n    watch(intersectionObserver, (_new, old) => old?.disconnect())\n\n    /** Stores the identifier of the timeout that will consider the scroll failed to restore. */\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     */\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     * The first visible element contained in this component.\n     *\n     * @returns The first visible element in this component.\n     */\n    const firstVisibleElement = computed(() => {\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\n    watch(\n      firstVisibleElement,\n      () => xBus.emit('UserScrolledToElement', firstVisibleElement.value),\n      { immediate: true },\n    )\n\n    /*\n     * Obtains the vNodes array of the default slot and renders only the first one.\n     * It avoids to render a `Fragment` with the vNodes in Vue3 and the same behaviour in Vue2\n     * because Vue2 only allows a single root node. Then, `getCurrentInstance()?.proxy?.$el` to\n     * retrieve the HTML element in both versions.\n     */\n    return () => slots.default?.()[0] ?? ''\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserScrolledToElement`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`ScrollRestoreFailed`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\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\" :key=\"item\" tag=\"li\">Item {{ item }}</MainScrollItem>\n    </ul>\n  </MainScroll>\n</template>\n\n<script setup>\nimport { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll'\n</script>\n\n<style scoped>\nul {\n  overflow: auto;\n  max-height: 200px;\n}\n\nli {\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\" :key=\"item\" tag=\"li\">Item {{ item }}</MainScrollItem>\n    </ul>\n  </MainScroll>\n</template>\n\n<script setup>\nimport { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll'\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\" :key=\"item\" tag=\"li\">Item {{ item }}</MainScrollItem>\n    </ul>\n  </MainScroll>\n</template>\n\n<script setup>\nimport { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll'\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\" :key=\"item\" tag=\"li\">Item {{ item }}</MainScrollItem>\n    </ul>\n  </MainScroll>\n</template>\n\n<script setup>\nimport { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll'\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}

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

@@ -8,7 +8,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     default: withCtx(() => [
       _ctx.isVisible ? (openBlock(), createBlock(_component_BaseEventButton, {
         key: 0,
-        class: "x-scroll-to-top x-button",
+        class: "x-scroll-to-top xds:button",
         "data-test": "scroll-to-top",
         "aria-label": "Scroll to top",
         events: _ctx.events

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      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\">\nimport type { XEventsTypes } from '../../../wiring'\nimport { computed, defineComponent } from 'vue'\nimport { BaseEventButton, NoAnimation } from '../../../components'\nimport { useState } from '../../../composables'\nimport { AnimationProp } from '../../../types'\nimport { scrollXModule } from '../x-module'\nimport { MainScrollId } from './scroll.const'\n\n/**\n * The `ScrollToTop` component is a button that the user can click to make a container scroll\n * up to its initial position.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'ScrollToTop',\n  xModule: scrollXModule.name,\n  components: { BaseEventButton },\n  props: {\n    /**\n     * Animation to use for showing/hiding the button.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: () => NoAnimation,\n    },\n    /**\n     * Threshold in pixels from the top to show the button.\n     *\n     * @public\n     */\n    thresholdPx: Number,\n    /**\n     * Id of the target scroll component.\n     *\n     * @public\n     */\n    scrollId: {\n      type: String,\n      default: MainScrollId,\n    },\n  },\n  setup(props) {\n    /**\n     * State of all the scroll components in this module.\n     *\n     * @internal\n     */\n    // TODO: Directly retrieve the needed data in this computed property\n    const { data } = useState('scroll')\n\n    /**\n     * The scroll data retrieved for this component.\n     *\n     * @returns The scroll data for this component if a valid {@link ScrollToTop.scrollId} has been\n     * passed. Otherwise it returns `null`.\n     * @internal\n     */\n    const scrollData = computed(() => {\n      return props.scrollId && data.value[props.scrollId]\n        ? data.value[props.scrollId]\n        : {\n            position: 0,\n            direction: 'UP',\n            hasReachedStart: false,\n            hasAlmostReachedEnd: false,\n            hasReachedEnd: false,\n          }\n    })\n\n    /**\n     * Event that will be emitted when the scroll to top is clicked.\n     *\n     * @returns The event to be emitted when the scroll to top is clicked. The id as a payload.\n     * @internal\n     */\n    const events = computed(\n      (): Partial<XEventsTypes> => ({ UserClickedScrollToTop: props.scrollId }),\n    )\n\n    /**\n     * Checks if the thresholdPx prop has been provided and if it is a number.\n     *\n     * @returns If the thresholdPx is a number or not.\n     * @internal\n     */\n    const useThresholdStrategy = computed(() => typeof props.thresholdPx === 'number')\n\n    /**\n     * Checks if the threshold has been reached in case the threshold strategy is in use.\n     *\n     * @returns If the scrollTop is bigger than the thresholdPx.\n     * @internal\n     */\n    const isThresholdReached = computed(\n      () => useThresholdStrategy.value && scrollData.value.position > props.thresholdPx!,\n    )\n\n    /**\n     * Returns if the scroll has almost reached its end or not.\n     *\n     * @returns True if the scroll has almost reached the end and the user is still scrolling down.\n     * @internal\n     */\n    const hasAlmostReachedScrollEnd = computed(\n      () => scrollData.value.hasAlmostReachedEnd && scrollData.value.direction === 'DOWN',\n    )\n\n    /**\n     * Whether if the button is visible or not depending on the strategy being used.\n     *\n     * @returns If the button should be visible or not.\n     * @internal\n     */\n    const isVisible = computed(() =>\n      useThresholdStrategy.value ? isThresholdReached.value : hasAlmostReachedScrollEnd.value,\n    )\n\n    return {\n      events,\n      isVisible,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedScrollToTop`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the id of the scroll\n  that 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>\nimport { ScrollToTop } from '@empathyco/x-components/scroll'\n\nexport default {\n  name: 'ScrollToTopTest',\n  components: {\n    ScrollToTop,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","animation","isVisible","_createBlock","_resolveDynamicComponent","_withCtx","events","_renderSlot","_createCommentVNode"],"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;;AAAA,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,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"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 xds:button\"\n      data-test=\"scroll-to-top\"\n      aria-label=\"Scroll to top\"\n      :events=\"events\"\n    >\n      <!-- @slot (Required) Button content with a text, an icon or both -->\n      <slot />\n    </BaseEventButton>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { XEventsTypes } from '../../../wiring'\nimport { computed, defineComponent } from 'vue'\nimport { BaseEventButton, NoAnimation } from '../../../components'\nimport { useState } from '../../../composables'\nimport { AnimationProp } from '../../../types'\nimport { scrollXModule } from '../x-module'\nimport { MainScrollId } from './scroll.const'\n\n/**\n * The `ScrollToTop` component is a button that the user can click to make a container scroll\n * up to its initial position.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'ScrollToTop',\n  xModule: scrollXModule.name,\n  components: { BaseEventButton },\n  props: {\n    /**\n     * Animation to use for showing/hiding the button.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: () => NoAnimation,\n    },\n    /**\n     * Threshold in pixels from the top to show the button.\n     *\n     * @public\n     */\n    thresholdPx: Number,\n    /**\n     * Id of the target scroll component.\n     *\n     * @public\n     */\n    scrollId: {\n      type: String,\n      default: MainScrollId,\n    },\n  },\n  setup(props) {\n    /**\n     * State of all the scroll components in this module.\n     *\n     * @internal\n     */\n    // TODO: Directly retrieve the needed data in this computed property\n    const { data } = useState('scroll')\n\n    /**\n     * The scroll data retrieved for this component.\n     *\n     * @returns The scroll data for this component if a valid {@link ScrollToTop.scrollId} has been\n     * passed. Otherwise it returns `null`.\n     * @internal\n     */\n    const scrollData = computed(() => {\n      return props.scrollId && data.value[props.scrollId]\n        ? data.value[props.scrollId]\n        : {\n            position: 0,\n            direction: 'UP',\n            hasReachedStart: false,\n            hasAlmostReachedEnd: false,\n            hasReachedEnd: false,\n          }\n    })\n\n    /**\n     * Event that will be emitted when the scroll to top is clicked.\n     *\n     * @returns The event to be emitted when the scroll to top is clicked. The id as a payload.\n     * @internal\n     */\n    const events = computed(\n      (): Partial<XEventsTypes> => ({ UserClickedScrollToTop: props.scrollId }),\n    )\n\n    /**\n     * Checks if the thresholdPx prop has been provided and if it is a number.\n     *\n     * @returns If the thresholdPx is a number or not.\n     * @internal\n     */\n    const useThresholdStrategy = computed(() => typeof props.thresholdPx === 'number')\n\n    /**\n     * Checks if the threshold has been reached in case the threshold strategy is in use.\n     *\n     * @returns If the scrollTop is bigger than the thresholdPx.\n     * @internal\n     */\n    const isThresholdReached = computed(\n      () => useThresholdStrategy.value && scrollData.value.position > props.thresholdPx!,\n    )\n\n    /**\n     * Returns if the scroll has almost reached its end or not.\n     *\n     * @returns True if the scroll has almost reached the end and the user is still scrolling down.\n     * @internal\n     */\n    const hasAlmostReachedScrollEnd = computed(\n      () => scrollData.value.hasAlmostReachedEnd && scrollData.value.direction === 'DOWN',\n    )\n\n    /**\n     * Whether if the button is visible or not depending on the strategy being used.\n     *\n     * @returns If the button should be visible or not.\n     * @internal\n     */\n    const isVisible = computed(() =>\n      useThresholdStrategy.value ? isThresholdReached.value : hasAlmostReachedScrollEnd.value,\n    )\n\n    return {\n      events,\n      isVisible,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedScrollToTop`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the id of the scroll\n  that is going to be scrolled.\n\n## Examples\n\n### Basic example\n\nThe component renders whatever is passed to it in the default slot and scrolls to top the scroll\nwith an id `scrollId`.\n\nIt also receives an optional threshold in pixels. When the threshold is reached from the top, the\ncomponent will be shown once the user scrolls `UP`.\n\nIf this parameter is not provided the button will be visible when the user almost reaches the end of\nthe scroll.\n\n```vue\n<template>\n  <div>\n    <ScrollToTop scroll-id=\"scrollId\" :threshold-px=\"1000\">\n      <span>Scroll to top</span>\n    </ScrollToTop>\n  </div>\n</template>\n\n<script setup>\nimport { ScrollToTop } from '@empathyco/x-components/scroll'\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_withCtx","_renderSlot"],"mappings":";;;;;;AACE,EAAA,OAAAA,SAAA,EAAA,EAAAC,WAAA,CAWYC,wBAXI,IAAA,CAAA,SAAS,CAAA,EAAA,IAAA,EAAA;AAAA,IAAA,OAAA,EAAAC,OAAA,CACvB,MASkB;AAAA,MARV,+BADRF,WAAA,CASkB,0BAAA,EAAA;AAAA,QAAA,GAAA,EAAA,CAAA;QAPhB,KAAA,EAAM,4BAAA;AAAA,QACN,WAAA,EAAU,eAAA;AAAA,QACV,YAAA,EAAW,eAAA;AAAA,QACV,MAAA,EAAQ,IAAA,CAAA;AAAA,OAAA,EAAA;yBAGT,MAAQ;AAAA,UAARG,UAAA,CAAQ,IAAA,CAAA,MAAA,EAAA,SAAA;AAAA,SAAA,CAAA;;;;;;;;;;;;;"}

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

@@ -1,9 +1,11 @@
 import { defineComponent, computed } from 'vue';
-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/animations/animate-clip-path.vue2.js';
+import '../../../components/animations/animate-scale.vue2.js';
+import '../../../components/animations/animate-translate.vue2.js';
 import '../../../components/animations/animate-width.vue2.js';
 import '../../../components/animations/animate-width.vue3.js';
+import '../../../components/animations/change-height.vue2.js';
+import '../../../components/animations/change-height.vue3.js';
 import '../../../components/animations/collapse-height.vue2.js';
 import '../../../components/animations/collapse-height.vue3.js';
 import '../../../components/animations/collapse-width.vue2.js';
@@ -43,14 +45,8 @@ import '../../../components/filters/labels/base-rating-filter-label.vue2.js';
 import '../../../components/global-x-bus.vue.js';
 import '../../../components/highlight.vue2.js';
 import '../../../components/items-list.vue2.js';
-import '../../../components/layouts/fixed-header-and-asides-layout.vue2.js';
-import '../../../components/layouts/fixed-header-and-asides-layout.vue3.js';
-import '../../../components/layouts/multi-column-max-width-layout.vue2.js';
-import '../../../components/layouts/multi-column-max-width-layout.vue3.js';
-import '../../../components/layouts/multi-column-max-width-layout.vue4.js';
-import '../../../components/layouts/single-column-layout.vue2.js';
-import '../../../components/layouts/single-column-layout.vue3.js';
 import '../../../components/location-provider.vue.js';
+import { AnimationProp } from '../../../types/animation-prop.js';
 import '../../../components/modals/base-events-modal-close.vue2.js';
 import '../../../components/modals/base-events-modal-open.vue2.js';
 import '../../../components/modals/base-events-modal.vue2.js';
@@ -88,13 +84,9 @@ import '../../../components/result/result-variants-provider.vue.js';
 import '../../../components/scroll/base-scroll.vue2.js';
 import '@empathyco/x-utils';
 import 'vuex';
-import '@vue/devtools-api';
-import '../../../plugins/devtools/timeline.devtools.js';
-import 'rxjs/operators';
-import 'rxjs';
-import '../../../plugins/devtools/colors.utils.js';
 import '../../../plugins/x-bus.js';
 import '../../../plugins/x-plugin.js';
+import 'rxjs';
 import '../../../components/sliding-panel.vue2.js';
 import '../../../components/sliding-panel.vue3.js';
 import '../../../components/snippet-callbacks.vue2.js';
@@ -104,112 +96,111 @@ import '../../../components/suggestions/base-suggestions.vue3.js';
 import '../../../composables/create-use-device.js';
 import '@vueuse/core';
 import { useState } from '../../../composables/use-state.js';
-import { AnimationProp } from '../../../types/animation-prop.js';
 import { scrollXModule } from '../x-module.js';
 import { MainScrollId } from './scroll.const.js';
 
-/**
- * The `ScrollToTop` component is a button that the user can click to make a container scroll
- * up to its initial position.
- *
- * @public
- */
-var _sfc_main = defineComponent({
-    name: 'ScrollToTop',
-    xModule: scrollXModule.name,
-    components: { BaseEventButton },
-    props: {
-        /**
-         * Animation to use for showing/hiding the button.
-         *
-         * @public
-         */
-        animation: {
-            type: AnimationProp,
-            default: () => _sfc_main$1,
-        },
-        /**
-         * Threshold in pixels from the top to show the button.
-         *
-         * @public
-         */
-        thresholdPx: Number,
-        /**
-         * Id of the target scroll component.
-         *
-         * @public
-         */
-        scrollId: {
-            type: String,
-            default: MainScrollId,
-        },
-    },
-    setup(props) {
-        /**
-         * State of all the scroll components in this module.
-         *
-         * @internal
-         */
-        // TODO: Directly retrieve the needed data in this computed property
-        const { data } = useState('scroll');
-        /**
-         * 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
-         */
-        const scrollData = computed(() => {
-            return props.scrollId && data.value[props.scrollId]
-                ? data.value[props.scrollId]
-                : {
-                    position: 0,
-                    direction: 'UP',
-                    hasReachedStart: false,
-                    hasAlmostReachedEnd: false,
-                    hasReachedEnd: false,
-                };
-        });
-        /**
-         * 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
-         */
-        const events = computed(() => ({ UserClickedScrollToTop: props.scrollId }));
-        /**
-         * Checks if the thresholdPx prop has been provided and if it is a number.
-         *
-         * @returns If the thresholdPx is a number or not.
-         * @internal
-         */
-        const useThresholdStrategy = computed(() => typeof props.thresholdPx === 'number');
-        /**
-         * 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
-         */
-        const isThresholdReached = computed(() => useThresholdStrategy.value && scrollData.value.position > props.thresholdPx);
-        /**
-         * 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
-         */
-        const hasAlmostReachedScrollEnd = computed(() => scrollData.value.hasAlmostReachedEnd && scrollData.value.direction === 'DOWN');
-        /**
-         * Whether if the button is visible or not depending on the strategy being used.
-         *
-         * @returns If the button should be visible or not.
-         * @internal
-         */
-        const isVisible = computed(() => useThresholdStrategy.value ? isThresholdReached.value : hasAlmostReachedScrollEnd.value);
-        return {
-            events,
-            isVisible,
-        };
-    },
+/**
+ * The `ScrollToTop` component is a button that the user can click to make a container scroll
+ * up to its initial position.
+ *
+ * @public
+ */
+var _sfc_main = defineComponent({
+    name: 'ScrollToTop',
+    xModule: scrollXModule.name,
+    components: { BaseEventButton },
+    props: {
+        /**
+         * Animation to use for showing/hiding the button.
+         *
+         * @public
+         */
+        animation: {
+            type: AnimationProp,
+            default: () => _sfc_main$1,
+        },
+        /**
+         * Threshold in pixels from the top to show the button.
+         *
+         * @public
+         */
+        thresholdPx: Number,
+        /**
+         * Id of the target scroll component.
+         *
+         * @public
+         */
+        scrollId: {
+            type: String,
+            default: MainScrollId,
+        },
+    },
+    setup(props) {
+        /**
+         * State of all the scroll components in this module.
+         *
+         * @internal
+         */
+        // TODO: Directly retrieve the needed data in this computed property
+        const { data } = useState('scroll');
+        /**
+         * 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
+         */
+        const scrollData = computed(() => {
+            return props.scrollId && data.value[props.scrollId]
+                ? data.value[props.scrollId]
+                : {
+                    position: 0,
+                    direction: 'UP',
+                    hasReachedStart: false,
+                    hasAlmostReachedEnd: false,
+                    hasReachedEnd: false,
+                };
+        });
+        /**
+         * 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
+         */
+        const events = computed(() => ({ UserClickedScrollToTop: props.scrollId }));
+        /**
+         * Checks if the thresholdPx prop has been provided and if it is a number.
+         *
+         * @returns If the thresholdPx is a number or not.
+         * @internal
+         */
+        const useThresholdStrategy = computed(() => typeof props.thresholdPx === 'number');
+        /**
+         * 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
+         */
+        const isThresholdReached = computed(() => useThresholdStrategy.value && scrollData.value.position > props.thresholdPx);
+        /**
+         * 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
+         */
+        const hasAlmostReachedScrollEnd = computed(() => scrollData.value.hasAlmostReachedEnd && scrollData.value.direction === 'DOWN');
+        /**
+         * Whether if the button is visible or not depending on the strategy being used.
+         *
+         * @returns If the button should be visible or not.
+         * @internal
+         */
+        const isVisible = computed(() => useThresholdStrategy.value ? isThresholdReached.value : hasAlmostReachedScrollEnd.value);
+        return {
+            events,
+            isVisible,
+        };
+    },
 });
 
 export { _sfc_main as default };

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"scroll.const.js","sources":["../../../../../src/x-modules/scroll/components/scroll.const.ts"],"sourcesContent":["import type { XInjectKey } from '../../../components/decorators/injection.consts'\nimport type { 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;;;;AAIG;AACI,MAAM,iBAAiB,GAAgD,oBAAmB;AACjG;;;;AAIG;AACI,MAAM,YAAY,GAAG;;;;"}
+{"version":3,"file":"scroll.const.js","sources":["../../../../../src/x-modules/scroll/components/scroll.const.ts"],"sourcesContent":["import type { XInjectKey } from '../../../components/decorators/injection.consts'\nimport type { 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;;;;AAIG;AACI,MAAM,iBAAiB,GAAgD;AAC9E;;;;AAIG;AACI,MAAM,YAAY,GAAG;;;;"}

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

@@ -20,7 +20,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 8, ["id", "onScroll", "onScroll:directionChange", "onScroll:atStart", "onScroll:almostAtEnd", "onScroll:atEnd"]);
 }
-var Scroll = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+var scroll = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-export { Scroll as default };
+export { scroll as default };
 //# sourceMappingURL=scroll.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"scroll.vue.js","sources":["../../../../../src/x-modules/scroll/components/scroll.vue"],"sourcesContent":["<template>\n  <BaseScroll\n    :id=\"id\"\n    ref=\"scrollRef\"\n    @scroll=\"emitScroll\"\n    @scroll:direction-change=\"emitScrollDirectionChange\"\n    @scroll:at-start=\"emitScrollAtStart\"\n    @scroll:almost-at-end=\"emitScrollAlmostAtEnd\"\n    @scroll:at-end=\"emitScrollAtEnd\"\n  >\n    <slot />\n  </BaseScroll>\n</template>\n\n<script lang=\"ts\">\nimport type { ComponentPublicInstance } from 'vue'\nimport type { ScrollDirection } from '../../../components/scroll/scroll.types'\nimport type { WireMetadata } from '../../../wiring/wiring.types'\nimport { defineComponent, ref } from 'vue'\nimport BaseScroll from '../../../components/scroll/base-scroll.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { scrollXModule } from '../x-module'\nimport { MainScrollId } from './scroll.const'\n\n/**\n * Scrollable container that emits scroll related X Events. It exposes all the listeners\n * and props from the {@link BaseScroll} component.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Scroll',\n  xModule: scrollXModule.name,\n  components: { BaseScroll },\n  props: {\n    /**\n     * Id to identify the component.\n     *\n     * @public\n     */\n    id: {\n      type: String,\n      default: MainScrollId,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const scrollRef = ref<ComponentPublicInstance>()\n\n    /**\n     * Creates a {@link WireMetadata} metadata object for all the emitted events.\n     *\n     * @internal\n     * @returns A new {@link WireMetadata} object.\n     */\n    const createEventMetadata = (): Partial<WireMetadata> => {\n      return {\n        target: scrollRef.value?.$el as HTMLElement,\n        id: props.id,\n      }\n    }\n\n    /**\n     * Emits the `UserScrolled` event.\n     *\n     * @param position - The new position of scroll.\n     * @internal\n     */\n    const emitScroll = (position: number) => {\n      $x.emit('UserScrolled', position, createEventMetadata())\n    }\n\n    /**\n     * Emits the `UserChangedScrollDirection` event when the scrolling direction has changed.\n     *\n     * @param direction - The new direction of scroll.\n     * @internal\n     */\n    const emitScrollDirectionChange = (direction: ScrollDirection) => {\n      $x.emit('UserChangedScrollDirection', direction, createEventMetadata())\n    }\n\n    /**\n     * Emits the 'UserReachedScrollStart' event when the user reaches the start.\n     *\n     * @param isAtStart - A boolean indicating if the scroll is at the ending position.\n     * @internal\n     */\n    const emitScrollAtStart = (isAtStart: boolean) => {\n      $x.emit('UserReachedScrollStart', isAtStart, createEventMetadata())\n    }\n\n    /**\n     * Emits the 'UserAlmostReachedScrollEnd' event when the user is about to reach to end.\n     *\n     * @param isAlmostAtEnd - A boolean indicating if the scroll is almost at its ending position.\n     * @internal\n     */\n    const emitScrollAlmostAtEnd = (isAlmostAtEnd: boolean) => {\n      $x.emit('UserAlmostReachedScrollEnd', isAlmostAtEnd, createEventMetadata())\n    }\n\n    /**\n     * Emits the 'UserReachedScrollEnd' event when the user is about to reach to end.\n     *\n     * @param isAtEnd - A boolean indicating if the scroll is at the ending position.\n     * @internal\n     */\n    const emitScrollAtEnd = (isAtEnd: boolean) => {\n      $x.emit('UserReachedScrollEnd', isAtEnd, createEventMetadata())\n    }\n\n    /**\n     * Scrolls to initial position when the user has clicked the scroll to top button.\n     *\n     * @param scrollId - {@link XEventsTypes.UserClickedScrollToTop}.\n     * @internal\n     */\n    $x.on('UserClickedScrollToTop', false).subscribe((scrollId: string) => {\n      if (scrollId === props.id && scrollRef.value) {\n        ;(scrollRef.value.$el as HTMLElement).scrollTo({ top: 0, behavior: 'smooth' })\n      }\n    })\n\n    return {\n      scrollRef,\n      emitScrollAtEnd,\n      emitScrollAlmostAtEnd,\n      emitScrollAtStart,\n      emitScrollDirectionChange,\n      emitScroll,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserScrolled`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted after the user scrolls in this container. The payload is the scroll top distance in\n  pixels.\n- [`UserChangedScrollDirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted when the user changes the scroll direction. The payload is the new scrolling direction.\n- [`UserReachedScrollStart`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted when the user scrolls up to the initial position of the scroll.\n- [`UserAlmostReachedScrollEnd`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted when the user is about to reach the bottom part of the scroll.\n- [`UserReachedScrollEnd`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted when the user has reached the bottom part of the scroll.\n\n## Example\n\nThe Scroll is a component that wraps the BaseScroll and provides it for a unique id.\n\n### Customized usage\n\n#### Overriding the properties\n\nIt renders an element with scroll, with the content passed in the `default slot`.\n\n```vue\n<template>\n  <Scroll id=\"exampleScrollId\" throttleMs=\"50\" distanceToBottom=\"300\">\n    <div class=\"content-scroll\">\n      <span>content1</span>\n      <span>content1</span>\n    </div>\n  </Scroll>\n</template>\n\n<script>\nimport { Scroll } from '@empathyco/x-components/scroll'\n\nexport default {\n  name: 'ScrollIdTest',\n  components: {\n    Scroll,\n  },\n}\n</script>\n```\n\n#### Using scroll events.\n\n```vue\n<template>\n  <Scroll\n    @scroll=\"scroll\"\n    @scroll:direction-change=\"scrollDirectionChange\"\n    @scroll:at-start=\"scrollAtStart\"\n    @scroll:almost-at-end=\"scrollAlmostAtEnd\"\n    @scroll:at-end=\"scrollAtEnd\"\n    id=\"exampleScrollId\"\n    throttleMs=\"50\"\n    distanceToBottom=\"300\"\n  >\n    <div class=\"content-scroll\">\n      <span>content1</span>\n      <span>content1</span>\n    </div>\n  </Scroll>\n</template>\n\n<script>\nimport { Scroll } from '@empathyco/x-components/scroll'\n\nexport default {\n  name: 'ScrollIdTest',\n  components: {\n    Scroll,\n  },\n  methods: {\n    scroll(position) {\n      console.log('scroll', position)\n    },\n    scrollDirectionChange(direction) {\n      console.log('scroll:direction-change', direction)\n    },\n    scrollAtStart(isAtStart) {\n      console.log('scroll:at-start', isAtStart)\n    },\n    scrollAlmostAtEnd(isAlmostAtEnd) {\n      console.log('scroll:almost-at-end', isAlmostAtEnd)\n    },\n    scrollAtEnd(isAtEnd) {\n      console.log('scroll:at-end', isAtEnd)\n    },\n  },\n}\n</script>\n```\n\n#### Using XEvents.\n\nYou can use the XEvents subscribing to them.\n\n```vue\n<template>\n  <Scroll throttleMs=\"50\" distanceToBottom=\"300\">\n    <div class=\"content-scroll\">\n      <span>content1</span>\n      <span>content1</span>\n    </div>\n  </Scroll>\n</template>\n\n<script>\nimport { Scroll } from '@empathyco/x-components/scroll'\n\nexport 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":["_resolveComponent","_openBlock","_createBlock","emitScrollAlmostAtEnd","emitScrollAtEnd","_renderSlot"],"mappings":";;;;;gCACEA,gBAUa,CAAA,YAAA,CAAA,CAAA;SARPC,SAAW,EAAA,EAAAC,WAAA,CAAA,qBAAA,EAAA;AAAA,IACd,EAAM,EAAA,IAAA,CAAA,EAAA;AAAA,IACN,GAAA,EAAA,WAAA;AAAA,IACA,QAAA,EAAA,IAAA,CAAA,UAAA;AAAA,IACA,0BAAsBC,EAAAA,IAAAA,CAAAA,yBAAAA;AAAAA,IACtB,kBAAeC,EAAAA,IAAAA,CAAAA,iBAAAA;AAAAA,IAAAA,sBAAAA,EAAAA,IAAAA,CAAAA,qBAAAA;AARpB,IAAA,gBAAA,EAUI,IAAQ,CAAA,eAAA;AAAA,GAAA,EAAA;;AAVZ,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"scroll.vue.js","sources":["../../../../../src/x-modules/scroll/components/scroll.vue"],"sourcesContent":["<template>\n  <BaseScroll\n    :id=\"id\"\n    ref=\"scrollRef\"\n    @scroll=\"emitScroll\"\n    @scroll:direction-change=\"emitScrollDirectionChange\"\n    @scroll:at-start=\"emitScrollAtStart\"\n    @scroll:almost-at-end=\"emitScrollAlmostAtEnd\"\n    @scroll:at-end=\"emitScrollAtEnd\"\n  >\n    <slot />\n  </BaseScroll>\n</template>\n\n<script lang=\"ts\">\nimport type { ComponentPublicInstance } from 'vue'\nimport type { ScrollDirection } from '../../../components/scroll/scroll.types'\nimport type { WireMetadata } from '../../../wiring/wiring.types'\nimport { defineComponent, ref } from 'vue'\nimport BaseScroll from '../../../components/scroll/base-scroll.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { scrollXModule } from '../x-module'\nimport { MainScrollId } from './scroll.const'\n\n/**\n * Scrollable container that emits scroll related X Events. It exposes all the listeners\n * and props from the {@link BaseScroll} component.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Scroll',\n  xModule: scrollXModule.name,\n  components: { BaseScroll },\n  props: {\n    /**\n     * Id to identify the component.\n     *\n     * @public\n     */\n    id: {\n      type: String,\n      default: MainScrollId,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const scrollRef = ref<ComponentPublicInstance>()\n\n    /**\n     * Creates a {@link WireMetadata} metadata object for all the emitted events.\n     *\n     * @internal\n     * @returns A new {@link WireMetadata} object.\n     */\n    const createEventMetadata = (): Partial<WireMetadata> => {\n      return {\n        target: scrollRef.value?.$el as HTMLElement,\n        id: props.id,\n      }\n    }\n\n    /**\n     * Emits the `UserScrolled` event.\n     *\n     * @param position - The new position of scroll.\n     * @internal\n     */\n    const emitScroll = (position: number) => {\n      $x.emit('UserScrolled', position, createEventMetadata())\n    }\n\n    /**\n     * Emits the `UserChangedScrollDirection` event when the scrolling direction has changed.\n     *\n     * @param direction - The new direction of scroll.\n     * @internal\n     */\n    const emitScrollDirectionChange = (direction: ScrollDirection) => {\n      $x.emit('UserChangedScrollDirection', direction, createEventMetadata())\n    }\n\n    /**\n     * Emits the 'UserReachedScrollStart' event when the user reaches the start.\n     *\n     * @param isAtStart - A boolean indicating if the scroll is at the ending position.\n     * @internal\n     */\n    const emitScrollAtStart = (isAtStart: boolean) => {\n      $x.emit('UserReachedScrollStart', isAtStart, createEventMetadata())\n    }\n\n    /**\n     * Emits the 'UserAlmostReachedScrollEnd' event when the user is about to reach to end.\n     *\n     * @param isAlmostAtEnd - A boolean indicating if the scroll is almost at its ending position.\n     * @internal\n     */\n    const emitScrollAlmostAtEnd = (isAlmostAtEnd: boolean) => {\n      $x.emit('UserAlmostReachedScrollEnd', isAlmostAtEnd, createEventMetadata())\n    }\n\n    /**\n     * Emits the 'UserReachedScrollEnd' event when the user is about to reach to end.\n     *\n     * @param isAtEnd - A boolean indicating if the scroll is at the ending position.\n     * @internal\n     */\n    const emitScrollAtEnd = (isAtEnd: boolean) => {\n      $x.emit('UserReachedScrollEnd', isAtEnd, createEventMetadata())\n    }\n\n    /**\n     * Scrolls to initial position when the user has clicked the scroll to top button.\n     *\n     * @param scrollId - {@link XEventsTypes.UserClickedScrollToTop}.\n     * @internal\n     */\n    $x.on('UserClickedScrollToTop', false).subscribe((scrollId: string) => {\n      if (scrollId === props.id && scrollRef.value) {\n        ;(scrollRef.value.$el as HTMLElement).scrollTo({ top: 0, behavior: 'smooth' })\n      }\n    })\n\n    return {\n      scrollRef,\n      emitScrollAtEnd,\n      emitScrollAlmostAtEnd,\n      emitScrollAtStart,\n      emitScrollDirectionChange,\n      emitScroll,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserScrolled`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted after the user scrolls in this container. The payload is the scroll top distance in\n  pixels.\n- [`UserChangedScrollDirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted when the user changes the scroll direction. The payload is the new scrolling direction.\n- [`UserReachedScrollStart`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted when the user scrolls up to the initial position of the scroll.\n- [`UserAlmostReachedScrollEnd`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted when the user is about to reach the bottom part of the scroll.\n- [`UserReachedScrollEnd`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted when the user has reached the bottom part of the scroll.\n\n## Examples\n\nThe Scroll is a component that wraps the BaseScroll and provides it for a unique id.\n\n### Basic usage\n\n#### Overriding the properties\n\nIt renders an element with scroll, with the content passed in the `default slot`.\n\n```vue\n<template>\n  <Scroll id=\"exampleScrollId\" :throttleMs=\"50\" :distanceToBottom=\"300\">\n    <div class=\"content-scroll\">\n      <span>content1</span>\n      <span>content2</span>\n    </div>\n  </Scroll>\n</template>\n\n<script setup>\nimport { Scroll } from '@empathyco/x-components/scroll'\n</script>\n```\n\n#### Using scroll events.\n\n```vue\n<template>\n  <Scroll\n    @scroll=\"scroll\"\n    @scroll:direction-change=\"scrollDirectionChange\"\n    @scroll:at-start=\"scrollAtStart\"\n    @scroll:almost-at-end=\"scrollAlmostAtEnd\"\n    @scroll:at-end=\"scrollAtEnd\"\n    id=\"exampleScrollId\"\n    throttleMs=\"50\"\n    distanceToBottom=\"300\"\n  >\n    <div class=\"content-scroll\">\n      <span>content1</span>\n      <span>content2</span>\n    </div>\n  </Scroll>\n</template>\n\n<script setup>\nimport { Scroll } from '@empathyco/x-components/scroll'\n\nfunction scroll(position) {\n  console.log('scroll', position)\n}\nfunction scrollDirectionChange(direction) {\n  console.log('scroll:direction-change', direction)\n}\nfunction scrollAtStart(isAtStart) {\n  console.log('scroll:at-start', isAtStart)\n}\nfunction scrollAlmostAtEnd(isAlmostAtEnd) {\n  console.log('scroll:almost-at-end', isAlmostAtEnd)\n}\nfunction scrollAtEnd(isAtEnd) {\n  console.log('scroll:at-end', isAtEnd)\n}\n</script>\n```\n\n#### Using XEvents.\n\nYou can use the XEvents API to subscribe to events programmatically:\n\n```vue\n<template>\n  <Scroll throttleMs=\"50\" distanceToBottom=\"300\">\n    <div class=\"content-scroll\">\n      <span>content1</span>\n      <span>content2</span>\n    </div>\n  </Scroll>\n</template>\n\n<script setup>\nimport { onMounted } from 'vue'\nimport { Scroll } from '@empathyco/x-components/scroll'\nimport { use$x } from '../../../composables'\n\nconst x = use$x()\n\nonMounted(() => {\n  x.on('UserScrolled').subscribe(distance => {\n    console.log(distance)\n  })\n  x.on('UserChangedScrollDirection').subscribe(direction => {\n    console.log(direction)\n  })\n  x.on('UserReachedScrollStart').subscribe(isAtStart => {\n    console.log(isAtStart)\n  })\n  x.on('UserAlmostReachedScrollEnd').subscribe(isAlmostAtEnd => {\n    console.log(isAlmostAtEnd)\n  })\n  x.on('UserReachedScrollEnd').subscribe(isAtEnd => {\n    console.log(isAtEnd)\n  })\n})\n</script>\n```\n</docs>\n"],"names":["_createBlock","_renderSlot"],"mappings":";;;;;;sBACEA,WAAA,CAUa,qBAAA,EAAA;AAAA,IATV,EAAA,EAAI,IAAA,CAAA,EAAA;AAAA,IACL,GAAA,EAAI,WAAA;AAAA,IACH,QAAA,EAAQ,IAAA,CAAA,UAAA;AAAA,IACR,0BAAA,EAAyB,IAAA,CAAA,yBAAA;AAAA,IACzB,kBAAA,EAAiB,IAAA,CAAA,iBAAA;AAAA,IACjB,sBAAA,EAAsB,IAAA,CAAA,qBAAA;AAAA,IACtB,gBAAA,EAAe,IAAA,CAAA;AAAA,GAAA,EAAA;qBAEhB,MAAQ;AAAA,MAARC,UAAA,CAAQ,IAAA,CAAA,MAAA,EAAA,SAAA;AAAA,KAAA,CAAA;;;;;;;;;"}