@empathyco/x-components 6.0.0-alpha.17 → 6.0.0-alpha.170

package/js/components/scroll/use-scroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-scroll.js","sources":["../../../../src/components/scroll/use-scroll.ts"],"sourcesContent":["import { computed, nextTick, onMounted, Ref, ref, SetupContext, watch } from 'vue';\nimport { isArray } from '@empathyco/x-utils';\nimport { XEvent } from '../../wiring/events.types';\nimport { throttle } from '../../utils/throttle';\nimport { use$x } from '../../composables/use-$x';\nimport { ScrollDirection } from './scroll.types';\n\n/**\n * Composable to share Scroll logic.\n *\n * @param props - Composable props.\n * @param context - Component setup context.\n * @param scrollEl - The scrolling container reference.\n * @returns A throttled version of the function to store the scroll data.\n * @public\n */\nexport function useScroll(\n  props: {\n    /**\n     * Distance to the end of the scroll that when reached will emit the\n     * `scroll:about-to-end` event.\n     *\n     * @public\n     */\n    distanceToBottom: number;\n    /**\n     * Positive vertical distance to still consider that the element is the first one visible.\n     * For example, if set to 100, after scrolling 100 pixels, the first rendered element\n     * will still be considered the first one.\n     */\n    firstElementThresholdPx: number;\n    /**\n     * Time duration to ignore the subsequent scroll events after an emission.\n     * Higher values will decrease events precision but can prevent performance issues.\n     *\n     * @public\n     */\n    throttleMs: number;\n    /**\n     * If true (default), sets the scroll position to the top when certain events are emitted.\n     *\n     * @public\n     */\n    resetOnChange: boolean;\n    /**\n     * List of events that should reset the scroll when emitted.\n     *\n     * @public\n     */\n    resetOn: XEvent | XEvent[];\n  },\n  { emit }: SetupContext<any>,\n  scrollEl: Ref<HTMLElement | undefined>\n) {\n  /**\n   * Property for getting the client height of scroll.\n   *\n   * @internal\n   */\n  const clientHeight = ref(0);\n\n  /**\n   * Property for getting the current position of scroll.\n   *\n   * @internal\n   */\n  const currentPosition = ref(0);\n\n  /**\n   * Property for getting the previous position of scroll.\n   *\n   * @internal\n   */\n  const previousPosition = ref(0);\n\n  /**\n   * Property for getting the scroll height.\n   *\n   * @internal\n   */\n  const scrollHeight = ref(0);\n  /**\n   * Flag to know if the property clientHeight is changing or gets the final value.\n   *\n   * @internal\n   */\n  const isClientHeightChanging = ref(false);\n\n  /**\n   * Property for setting the direction of scroll.\n   *\n   * @internal\n   */\n  const scrollDirection: Ref<ScrollDirection> = ref('UP');\n\n  /**\n   * Restores the clientHeight flag when clientHeight property stops changing.\n   * Also sets a new previous position, before update the current one.\n   *\n   * @internal\n   */\n  const restoreClientHeightFlag = (): void => {\n    isClientHeightChanging.value = false;\n    previousPosition.value = currentPosition.value;\n  };\n\n  const throtteledCall = throttle(restoreClientHeightFlag, 100);\n\n  /**\n   * Updates scroll related properties.\n   *\n   * @internal\n   */\n  const storeScrollData = () => {\n    if (scrollEl.value) {\n      scrollHeight.value = scrollEl.value.scrollHeight;\n      clientHeight.value = scrollEl.value.clientHeight;\n      currentPosition.value = scrollEl.value.scrollTop;\n    }\n  };\n\n  /**\n   * Throttled version of the function that stores the DOM scroll related properties.\n   * The duration of the throttle is configured through the `throttleMs` prop passed as parameter.\n   *\n   * @returns A throttled version of the function to store the scroll data.\n   * @internal\n   */\n  const throttledStoreScrollData = computed(() => throttle(storeScrollData, props.throttleMs));\n\n  /**\n   * Returns end position of scroll.\n   *\n   * @returns A number for knowing end position of scroll.\n   * @internal\n   */\n  const scrollEndPosition = computed(() => scrollHeight.value - clientHeight.value);\n\n  /**\n   * Returns distance missing to endPosition position.\n   *\n   * @returns A number for knowing the distance missing to endPosition position.\n   * @internal\n   */\n  const distanceToEnd = computed(() => scrollEndPosition.value - currentPosition.value);\n\n  /**\n   * Returns `true` when there is no more content to scroll.\n   *\n   * @returns A boolean for knowing if the user scrolls to the end.\n   * @internal\n   */\n  const hasScrollReachedEnd = computed(() => currentPosition.value === scrollEndPosition.value);\n\n  /**\n   * Returns `true` when the scroll is at the initial position.\n   *\n   * @returns A boolean for knowing if the user scrolls to the start.\n   * @internal\n   */\n  const hasScrollReachedStart = computed(() => currentPosition.value === 0);\n\n  /**\n   * Returns `true` when the amount of pixels scrolled is greater than\n   * the `distanceToBottom` prop passed as parameter.\n   *\n   * @returns A boolean for knowing if the user is about to reaching to the end.\n   * @internal\n   */\n  const hasScrollAlmostReachedEnd = computed(\n    () => !hasScrollReachedStart.value && props.distanceToBottom > distanceToEnd.value\n  );\n\n  onMounted(() => {\n    nextTick().then(() => {\n      if (!scrollEl.value) {\n        // TODO Replace with Empathy's logger\n        // eslint-disable-next-line no-console\n        console.warn(\n          '[useScroll]',\n          // eslint-disable-next-line max-len\n          'Components using this composable must pass `scrollEl` as the HTML node that is scrolling.'\n        );\n      } else {\n        storeScrollData();\n      }\n    });\n  });\n\n  /**\n   * Change the isClientHeightChanging flag when the property clientHeight is changing and\n   * calls throttleledCall method.\n   *\n   * @internal\n   */\n  watch(\n    clientHeight,\n    () => {\n      isClientHeightChanging.value = true;\n\n      throtteledCall();\n    },\n    { immediate: true }\n  );\n\n  /**\n   * Emits the `scroll` event.\n   *\n   * @param _newScrollPosition - The new position of scroll.\n   * @param oldScrollPosition - The old position of scroll.\n   * @internal\n   */\n  watch(currentPosition, (_newScrollPosition: number, oldScrollPosition: number) => {\n    emit('scroll', currentPosition.value);\n    previousPosition.value = oldScrollPosition;\n  });\n\n  /**\n   * Sets direction of scroll based in {@link ScrollDirection} when the current position\n   * has changed.\n   *\n   * @internal\n   */\n  watch(currentPosition, () => {\n    if (!isClientHeightChanging.value && currentPosition.value !== previousPosition.value) {\n      scrollDirection.value = currentPosition.value > previousPosition.value ? 'DOWN' : 'UP';\n    }\n  });\n\n  /**\n   * Emits the 'scroll:almost-at-end' event when the user is about to reach to end.\n   *\n   * @param isScrollAlmostAtEnd - For knowing if the user is about to reach to end.\n   * @internal\n   */\n  watch(hasScrollReachedStart, (isScrollAtStart: boolean) => {\n    emit('scroll:at-start', isScrollAtStart);\n  });\n\n  /**\n   * Sets direction of scroll based in {@link ScrollDirection} when the current position\n   * has changed.\n   *\n   * @internal\n   */\n  watch(hasScrollAlmostReachedEnd, (isScrollAlmostAtEnd: boolean) => {\n    emit('scroll:almost-at-end', isScrollAlmostAtEnd);\n  });\n\n  /**\n   * Emits the 'scroll:at-end' event when the user reaches the end.\n   *\n   * @param isScrollAtEnd - For knowing if the user reaches at end.\n   * @internal\n   */\n  watch(hasScrollReachedEnd, (isScrollAtEnd: boolean) => {\n    emit('scroll:at-end', isScrollAtEnd);\n  });\n\n  /**\n   * Emits the `scroll:direction-change` event when the scrolling direction has changed.\n   *\n   * @param direction - The new direction of scroll.\n   * @internal\n   */\n  watch(scrollDirection, (direction: ScrollDirection) => {\n    if (!isClientHeightChanging.value) {\n      emit('scroll:direction-change', direction);\n    }\n  });\n\n  /**\n   * Resets the scroll position.\n   *\n   * @internal\n   */\n  const $x = use$x();\n  const resetOnEvents = isArray(props.resetOn) ? props.resetOn : [props.resetOn];\n  resetOnEvents.forEach(event =>\n    $x.on(event, false).subscribe(() =>\n      nextTick().then(() => {\n        if (props.resetOnChange) {\n          scrollEl.value?.scrollTo({ top: 0 });\n        }\n      })\n    )\n  );\n\n  return { throttledStoreScrollData };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"use-scroll.js","sources":["../../../../src/components/scroll/use-scroll.ts"],"sourcesContent":["import type { Ref, SetupContext } from 'vue'\nimport type { XEvent } from '../../wiring/events.types'\nimport type { ScrollDirection } from './scroll.types'\nimport { isArray } from '@empathyco/x-utils'\nimport { computed, nextTick, onMounted, ref, watch } from 'vue'\nimport { use$x } from '../../composables/use-$x'\nimport { throttle } from '../../utils/throttle'\n\n/**\n * Composable to share Scroll logic.\n *\n * @param props - Composable props.\n * @param context - Component setup context.\n * @param scrollEl - The scrolling container reference.\n * @returns A throttled version of the function to store the scroll data.\n * @public\n */\nexport function useScroll(\n  props: {\n    /**\n     * Distance to the end of the scroll that when reached will emit the\n     * `scroll:about-to-end` event.\n     *\n     * @public\n     */\n    distanceToBottom: number\n    /**\n     * Positive vertical distance to still consider that the element is the first one visible.\n     * For example, if set to 100, after scrolling 100 pixels, the first rendered element\n     * will still be considered the first one.\n     */\n    firstElementThresholdPx: number\n    /**\n     * Time duration to ignore the subsequent scroll events after an emission.\n     * Higher values will decrease events precision but can prevent performance issues.\n     *\n     * @public\n     */\n    throttleMs: number\n    /**\n     * If true (default), sets the scroll position to the top when certain events are emitted.\n     *\n     * @public\n     */\n    resetOnChange: boolean\n    /**\n     * List of events that should reset the scroll when emitted.\n     *\n     * @public\n     */\n    resetOn: XEvent | XEvent[]\n  },\n  { emit }: SetupContext<any>,\n  scrollEl: Ref<HTMLElement | undefined>,\n) {\n  /**\n   * Property for getting the client height of scroll.\n   *\n   * @internal\n   */\n  const clientHeight = ref(0)\n\n  /**\n   * Property for getting the current position of scroll.\n   *\n   * @internal\n   */\n  const currentPosition = ref(0)\n\n  /**\n   * Property for getting the previous position of scroll.\n   *\n   * @internal\n   */\n  const previousPosition = ref(0)\n\n  /**\n   * Property for getting the scroll height.\n   *\n   * @internal\n   */\n  const scrollHeight = ref(0)\n  /**\n   * Flag to know if the property clientHeight is changing or gets the final value.\n   *\n   * @internal\n   */\n  const isClientHeightChanging = ref(false)\n\n  /**\n   * Property for setting the direction of scroll.\n   *\n   * @internal\n   */\n  const scrollDirection: Ref<ScrollDirection> = ref('UP')\n\n  /**\n   * Restores the clientHeight flag when clientHeight property stops changing.\n   * Also sets a new previous position, before update the current one.\n   *\n   * @internal\n   */\n  const restoreClientHeightFlag = (): void => {\n    isClientHeightChanging.value = false\n    previousPosition.value = currentPosition.value\n  }\n\n  const throtteledCall = throttle(restoreClientHeightFlag, 100)\n\n  /**\n   * Updates scroll related properties.\n   *\n   * @internal\n   */\n  const storeScrollData = () => {\n    if (scrollEl.value) {\n      scrollHeight.value = scrollEl.value.scrollHeight\n      clientHeight.value = scrollEl.value.clientHeight\n      currentPosition.value = scrollEl.value.scrollTop\n    }\n  }\n\n  /**\n   * Throttled version of the function that stores the DOM scroll related properties.\n   * The duration of the throttle is configured through the `throttleMs` prop passed as parameter.\n   *\n   * @returns A throttled version of the function to store the scroll data.\n   * @internal\n   */\n  const throttledStoreScrollData = computed(() => throttle(storeScrollData, props.throttleMs))\n\n  /**\n   * Returns end position of scroll.\n   *\n   * @returns A number for knowing end position of scroll.\n   * @internal\n   */\n  const scrollEndPosition = computed(() => scrollHeight.value - clientHeight.value)\n\n  /**\n   * Returns distance missing to endPosition position.\n   *\n   * @returns A number for knowing the distance missing to endPosition position.\n   * @internal\n   */\n  const distanceToEnd = computed(() => scrollEndPosition.value - currentPosition.value)\n\n  /**\n   * Returns `true` when there is no more content to scroll.\n   *\n   * @returns A boolean for knowing if the user scrolls to the end.\n   * @internal\n   */\n  const hasScrollReachedEnd = computed(() => currentPosition.value === scrollEndPosition.value)\n\n  /**\n   * Returns `true` when the scroll is at the initial position.\n   *\n   * @returns A boolean for knowing if the user scrolls to the start.\n   * @internal\n   */\n  const hasScrollReachedStart = computed(() => currentPosition.value === 0)\n\n  /**\n   * Returns `true` when the amount of pixels scrolled is greater than\n   * the `distanceToBottom` prop passed as parameter.\n   *\n   * @returns A boolean for knowing if the user is about to reaching to the end.\n   * @internal\n   */\n  const hasScrollAlmostReachedEnd = computed(\n    () => !hasScrollReachedStart.value && props.distanceToBottom > distanceToEnd.value,\n  )\n\n  onMounted(() => {\n    // eslint-disable-next-line ts/no-floating-promises\n    nextTick().then(() => {\n      if (!scrollEl.value) {\n        console.warn(\n          '[useScroll]',\n          'Components using this composable must pass `scrollEl` as the HTML node that is scrolling.',\n        )\n      } else {\n        storeScrollData()\n      }\n    })\n  })\n\n  /**\n   * Change the isClientHeightChanging flag when the property clientHeight is changing and\n   * calls throttleledCall method.\n   *\n   * @internal\n   */\n  watch(\n    clientHeight,\n    () => {\n      isClientHeightChanging.value = true\n\n      throtteledCall()\n    },\n    { immediate: true },\n  )\n\n  /**\n   * Emits the `scroll` event.\n   *\n   * @param _newScrollPosition - The new position of scroll.\n   * @param oldScrollPosition - The old position of scroll.\n   * @internal\n   */\n  watch(currentPosition, (_newScrollPosition: number, oldScrollPosition: number) => {\n    emit('scroll', currentPosition.value)\n    previousPosition.value = oldScrollPosition\n  })\n\n  /**\n   * Sets direction of scroll based in {@link ScrollDirection} when the current position\n   * has changed.\n   *\n   * @internal\n   */\n  watch(currentPosition, () => {\n    if (!isClientHeightChanging.value && currentPosition.value !== previousPosition.value) {\n      scrollDirection.value = currentPosition.value > previousPosition.value ? 'DOWN' : 'UP'\n    }\n  })\n\n  /**\n   * Emits the 'scroll:almost-at-end' event when the user is about to reach to end.\n   *\n   * @param isScrollAlmostAtEnd - For knowing if the user is about to reach to end.\n   * @internal\n   */\n  watch(hasScrollReachedStart, (isScrollAtStart: boolean) => {\n    emit('scroll:at-start', isScrollAtStart)\n  })\n\n  /**\n   * Sets direction of scroll based in {@link ScrollDirection} when the current position\n   * has changed.\n   *\n   * @internal\n   */\n  watch(hasScrollAlmostReachedEnd, (isScrollAlmostAtEnd: boolean) => {\n    emit('scroll:almost-at-end', isScrollAlmostAtEnd)\n  })\n\n  /**\n   * Emits the 'scroll:at-end' event when the user reaches the end.\n   *\n   * @param isScrollAtEnd - For knowing if the user reaches at end.\n   * @internal\n   */\n  watch(hasScrollReachedEnd, (isScrollAtEnd: boolean) => {\n    emit('scroll:at-end', isScrollAtEnd)\n  })\n\n  /**\n   * Emits the `scroll:direction-change` event when the scrolling direction has changed.\n   *\n   * @param direction - The new direction of scroll.\n   * @internal\n   */\n  watch(scrollDirection, (direction: ScrollDirection) => {\n    if (!isClientHeightChanging.value) {\n      emit('scroll:direction-change', direction)\n    }\n  })\n\n  /**\n   * Resets the scroll position.\n   *\n   * @internal\n   */\n  const $x = use$x()\n  const resetOnEvents = isArray(props.resetOn) ? props.resetOn : [props.resetOn]\n  resetOnEvents.forEach(event =>\n    // eslint-disable-next-line ts/no-misused-promises\n    $x.on(event, false).subscribe(async () =>\n      nextTick().then(() => {\n        if (props.resetOnChange) {\n          scrollEl.value?.scrollTo({ top: 0 })\n        }\n      }),\n    ),\n  )\n\n  return { throttledStoreScrollData }\n}\n"],"names":[],"mappings":"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"}

package/js/components/sliding-panel.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './sliding-panel.vue2.js';
-import { openBlock, createElementBlock, normalizeClass, createCommentVNode, renderSlot, createTextVNode, createElementVNode } from 'vue';
+import { openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, Fragment, createTextVNode, createCommentVNode } from 'vue';
 import './sliding-panel.vue3.js';
 import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
 
@@ -12,56 +12,60 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       "data-test": "sliding-panel"
     },
     [
-      _ctx.showButtons ? (openBlock(), createElementBlock(
-        "button",
-        {
-          key: 0,
-          onClick: _cache[0] || (_cache[0] = (...args) => _ctx.scrollLeft && _ctx.scrollLeft(...args)),
-          class: normalizeClass(["x-sliding-panel__button x-button x-sliding-panel-button-left", _ctx.buttonClass]),
-          "data-test": "sliding-panel-left-button"
-        },
-        [
-          createCommentVNode(" @slot Left button content "),
-          renderSlot(_ctx.$slots, "sliding-panel-left-button", {}, () => [
-            createTextVNode("\u1438")
-          ], true)
-        ],
-        2
-        /* CLASS */
-      )) : createCommentVNode("v-if", true),
       createElementVNode(
         "div",
         {
           ref: "scrollContainerRef",
-          onScroll: _cache[1] || (_cache[1] = (...args) => _ctx.debouncedUpdateScroll && _ctx.debouncedUpdateScroll(...args)),
-          onTransitionend: _cache[2] || (_cache[2] = (...args) => _ctx.debouncedUpdateScroll && _ctx.debouncedUpdateScroll(...args)),
-          onAnimationend: _cache[3] || (_cache[3] = (...args) => _ctx.debouncedUpdateScroll && _ctx.debouncedUpdateScroll(...args)),
           class: normalizeClass([_ctx.scrollContainerClass, "x-sliding-panel__scroll"]),
           "data-test": "sliding-panel-scroll"
         },
         [
-          createCommentVNode(" @slot (Required) Sliding panel content "),
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ],
-        34
-        /* CLASS, NEED_HYDRATION */
+        2
+        /* CLASS */
       ),
+      renderSlot(_ctx.$slots, "sliding-panel-addons", {
+        arrivedState: _ctx.arrivedState,
+        scroll: _ctx.xScroll
+      }, void 0, true),
       _ctx.showButtons ? (openBlock(), createElementBlock(
-        "button",
-        {
-          key: 1,
-          onClick: _cache[4] || (_cache[4] = (...args) => _ctx.scrollRight && _ctx.scrollRight(...args)),
-          class: normalizeClass(["x-sliding-panel__button x-button x-sliding-panel-button-right", _ctx.buttonClass]),
-          "data-test": "sliding-panel-right-button"
-        },
+        Fragment,
+        { key: 0 },
         [
-          createCommentVNode(" @slot Right button content "),
-          renderSlot(_ctx.$slots, "sliding-panel-right-button", {}, () => [
-            createTextVNode("\u1433")
-          ], true)
+          createElementVNode(
+            "button",
+            {
+              class: normalizeClass(["x-sliding-panel__button x-button x-sliding-panel-button-left", _ctx.buttonClass]),
+              "data-test": "sliding-panel-left-button",
+              onClick: _cache[0] || (_cache[0] = ($event) => _ctx.xScroll -= _ctx.slotContainerWidth * _ctx.scrollFactor)
+            },
+            [
+              renderSlot(_ctx.$slots, "sliding-panel-left-button", {}, () => [
+                createTextVNode("ᐸ")
+              ], true)
+            ],
+            2
+            /* CLASS */
+          ),
+          createElementVNode(
+            "button",
+            {
+              class: normalizeClass(["x-sliding-panel__button x-button x-sliding-panel-button-right", _ctx.buttonClass]),
+              "data-test": "sliding-panel-right-button",
+              onClick: _cache[1] || (_cache[1] = ($event) => _ctx.xScroll += _ctx.slotContainerWidth * _ctx.scrollFactor)
+            },
+            [
+              renderSlot(_ctx.$slots, "sliding-panel-right-button", {}, () => [
+                createTextVNode("ᐳ")
+              ], true)
+            ],
+            2
+            /* CLASS */
+          )
         ],
-        2
-        /* CLASS */
+        64
+        /* STABLE_FRAGMENT */
       )) : createCommentVNode("v-if", true)
     ],
     2

package/js/components/sliding-panel.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"sliding-panel.vue.js","sources":["../../../src/components/sliding-panel.vue"],"sourcesContent":["<template>\n  <div v-if=\"slots.default\" class=\"x-sliding-panel\" :class=\"cssClasses\" data-test=\"sliding-panel\">\n    <button\n      v-if=\"showButtons\"\n      @click=\"scrollLeft\"\n      class=\"x-sliding-panel__button x-button x-sliding-panel-button-left\"\n      :class=\"buttonClass\"\n      data-test=\"sliding-panel-left-button\"\n    >\n      <!-- @slot Left button content -->\n      <slot name=\"sliding-panel-left-button\">ᐸ</slot>\n    </button>\n    <div\n      ref=\"scrollContainerRef\"\n      @scroll=\"debouncedUpdateScroll\"\n      @transitionend=\"debouncedUpdateScroll\"\n      @animationend=\"debouncedUpdateScroll\"\n      :class=\"scrollContainerClass\"\n      class=\"x-sliding-panel__scroll\"\n      data-test=\"sliding-panel-scroll\"\n    >\n      <!-- @slot (Required) Sliding panel content -->\n      <slot />\n    </div>\n    <button\n      v-if=\"showButtons\"\n      @click=\"scrollRight\"\n      class=\"x-sliding-panel__button x-button x-sliding-panel-button-right\"\n      :class=\"buttonClass\"\n      data-test=\"sliding-panel-right-button\"\n    >\n      <!-- @slot Right button content -->\n      <slot name=\"sliding-panel-right-button\">ᐳ</slot>\n    </button>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, onBeforeUnmount, onMounted, ref, watch } from 'vue';\n  import { useDebounce } from '../composables/use-debounce';\n\n  /**\n   * This component allows for any other component or element inside it to be horizontally\n   * navigable. It also implements customizable buttons as well as other minor customizations to its\n   * general behavior.\n   *\n   * Additionally, this component exposes the following props to modify the classes of the\n   * elements: `buttonClass`.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'SlidingPanel',\n    props: {\n      /**\n       * Scroll factor that will dictate how much the scroll moves when pressing a navigation button.\n       */\n      scrollFactor: {\n        type: Number,\n        default: 0.7\n      },\n      /** Would make the navigation buttons visible when they're needed or always hide them. */\n      showButtons: {\n        type: Boolean,\n        default: true\n      },\n      /**\n       * When true, whenever the DOM content in the sliding panel slot changes, it will reset\n       * the scroll position to 0.\n       */\n      resetOnContentChange: {\n        type: Boolean,\n        default: true\n      },\n      buttonClass: String,\n      scrollContainerClass: String\n    },\n    setup(props, { slots }) {\n      /** Indicates if the scroll is at the start of the sliding panel. */\n      const isScrollAtStart = ref(true);\n      /** Indicates if the scroll is at the end of the sliding panel. */\n      const isScrollAtEnd = ref(true);\n      const scrollContainerRef = ref<HTMLDivElement>();\n\n      /**\n       * Updates the values of the scroll positions to show or hide the buttons depending on it.\n       *\n       * @remarks The 2px extra is to fix some cases in some resolutions where the scroll + client\n       * size is less than the scroll width even when the scroll is at the end.\n       */\n      function updateScrollPosition() {\n        if (scrollContainerRef.value) {\n          const { scrollLeft, clientWidth, scrollWidth } = scrollContainerRef.value;\n          isScrollAtStart.value = !scrollLeft;\n          isScrollAtEnd.value = scrollLeft + clientWidth + 2 >= scrollWidth;\n        }\n      }\n\n      /**\n       * Debounced version of the {@link SlidingPanel.updateScrollPosition} method.\n       */\n      const debouncedUpdateScroll = useDebounce(updateScrollPosition, 50, { leading: true });\n\n      /**\n       * Resets the scroll and updates the values of the scroll for the buttons to react.\n       */\n      const debouncedRestoreAndUpdateScroll = useDebounce(\n        () => {\n          scrollContainerRef.value!.scroll({ left: 0, behavior: 'smooth' });\n          updateScrollPosition();\n        },\n        50,\n        { leading: true }\n      );\n\n      /**\n       * Scrolls the wrapper element towards the provided scroll value.\n       *\n       * @param scrollValue - The value the scroll will go towards.\n       */\n      function scrollTo(scrollValue: number) {\n        scrollContainerRef.value!.scrollBy({\n          left: scrollValue * props.scrollFactor,\n          behavior: 'smooth'\n        });\n      }\n\n      /** Scrolls the wrapper element to the left. */\n      function scrollLeft() {\n        scrollTo(-scrollContainerRef.value!.clientWidth);\n      }\n\n      /** Scrolls the wrapper element to the right. */\n      function scrollRight() {\n        scrollTo(scrollContainerRef.value!.clientWidth);\n      }\n\n      /** CSS classes to apply based on the scroll position. */\n      const cssClasses = computed(() => ({\n        'x-sliding-panel-at-start': isScrollAtStart.value,\n        'x-sliding-panel-at-end': isScrollAtEnd.value\n      }));\n\n      let resizeObserver: ResizeObserver;\n      let contentChangedObserver: MutationObserver;\n\n      /**\n       * Initialises browser platform code:\n       * - Creates a mutation observer to detect content changes and reset scroll position.\n       * - Stores initial size and scroll position values.\n       */\n      onMounted(() => {\n        resizeObserver = new ResizeObserver(debouncedUpdateScroll);\n        resizeObserver.observe(scrollContainerRef.value!);\n        contentChangedObserver = new MutationObserver(debouncedRestoreAndUpdateScroll);\n\n        watch(\n          () => props.resetOnContentChange,\n          shouldReset => {\n            if (shouldReset) {\n              contentChangedObserver.observe(scrollContainerRef.value!, {\n                subtree: true,\n                childList: true,\n                attributes: false,\n                characterData: false\n              });\n            } else {\n              contentChangedObserver.disconnect();\n            }\n          },\n          { immediate: true }\n        );\n\n        updateScrollPosition();\n      });\n\n      onBeforeUnmount(() => {\n        contentChangedObserver.disconnect();\n        resizeObserver.disconnect();\n      });\n\n      return {\n        cssClasses,\n        debouncedUpdateScroll,\n        scrollContainerRef,\n        scrollLeft,\n        scrollRight,\n        slots\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-sliding-panel {\n    align-items: center;\n    display: flex;\n    flex-flow: row nowrap;\n    position: relative;\n  }\n\n  .x-sliding-panel__button {\n    opacity: 0;\n    pointer-events: none;\n    position: absolute;\n    transition: all ease-out 0.2s;\n    z-index: 2; /* To overlay the design system gradient with z-index:1 */\n  }\n  .x-sliding-panel-button-left {\n    left: 0;\n  }\n  .x-sliding-panel-button-right {\n    right: 0;\n  }\n\n  .x-sliding-panel__scroll {\n    display: flex;\n    flex: 100%;\n    flex-flow: row nowrap;\n    overflow-x: auto;\n    overflow-y: hidden;\n    scrollbar-width: none; /* Firefox */\n    -ms-overflow-style: none; /* IE */\n  }\n\n  /* Chrome, Edge & Safari */\n  .x-sliding-panel__scroll::-webkit-scrollbar {\n    display: none;\n  }\n\n  .x-sliding-panel__scroll > * {\n    flex: 0 0 auto;\n  }\n\n  /* prettier-ignore */\n  .x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-start) .x-sliding-panel-button-left {\n    opacity: 1;\n    pointer-events: all;\n  }\n\n  /* prettier-ignore */\n  .x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right {\n    opacity: 1;\n    pointer-events: all;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nSimplest implementation of the component, just a list-based component inside its slot.\n\n```vue\n<template>\n  <SlidingPanel>\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n### Play with props\n\n#### Modifying scroll buttons travel distance\n\nEdit how much the scroll travels when navigating with the buttons by changing the `scrollFactor`\nprop.\n\n```vue\n<template>\n  <SlidingPanel :scrollFactor=\"1.5\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n#### Hiding scroll buttons\n\nHide the navigational buttons completely by setting the `showButtons` prop to `false`. This is\nintended to be used when other scrolling options are available, like in mobile, where you can scroll\njust by swiping.\n\n```vue\n<template>\n  <SlidingPanel :showButtons=\"false\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n#### Customizing the content with classes\n\nThe `buttonClass` prop can be used to add classes to the buttons.\n\nThe `scrollContainerClass` prop can be used to add classes to the scroll content.\n\n```vue\n<template>\n  <SlidingPanel buttonClass=\"x-button--round\" scrollContainerClass=\"x-sliding-panel-fade\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n#### Disabling reset the scroll when content changes\n\nBy default, whenever the content of the sliding panel changes, it auto resets its scroll position.\nYou can disable this behavior setting the `resetOnContentChange` prop to `false`.\n\n```vue\n<template>\n  <div>\n    <button @click=\"items++\">Add item</button>\n    <label>\n      <input type=\"checkbox\" v-model=\"resetOnContentChange\" />\n      Reset content onchange\n    </label>\n    <SlidingPanel :resetOnContentChange=\"resetOnContentChange\">\n      <div class=\"item\" v-for=\"item in items\" :key=\"item\">Item {{ item }}</div>\n    </SlidingPanel>\n  </div>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    },\n    data() {\n      return {\n        items: 4,\n        resetOnContentChange: false\n      };\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n## Extending the component\n\n### Overriding Button content\n\nBy default the buttons show an arrow depicting the direction the scroll would go to when clicked,\nbut this content can be customized with anything, from characters to SVG and images.\n\n```vue\n<template>\n  <SlidingPanel>\n    <template #sliding-panel-left-button>Left</template>\n    <template #default>\n      <div class=\"item\">Item 1</div>\n      <div class=\"item\">Item 2</div>\n      <div class=\"item\">Item 3</div>\n      <div class=\"item\">Item 4</div>\n    </template>\n    <template #sliding-panel-right-button>Right</template>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass","showButtons","_createCommentVNode","_renderSlot","_createElementVNode","scrollContainerClass"],"mappings":"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"}
+{"version":3,"file":"sliding-panel.vue.js","sources":["../../../src/components/sliding-panel.vue"],"sourcesContent":["<template>\n  <div v-if=\"slots.default\" class=\"x-sliding-panel\" :class=\"cssClasses\" data-test=\"sliding-panel\">\n    <div\n      ref=\"scrollContainerRef\"\n      :class=\"scrollContainerClass\"\n      class=\"x-sliding-panel__scroll\"\n      data-test=\"sliding-panel-scroll\"\n    >\n      <!-- @slot (Required) Sliding panel content -->\n      <slot />\n    </div>\n    <slot name=\"sliding-panel-addons\" :arrived-state=\"arrivedState\" :scroll=\"xScroll\" />\n    <template v-if=\"showButtons\">\n      <button\n        class=\"x-sliding-panel__button x-button x-sliding-panel-button-left\"\n        :class=\"buttonClass\"\n        data-test=\"sliding-panel-left-button\"\n        @click=\"xScroll -= slotContainerWidth * scrollFactor\"\n      >\n        <!-- @slot Left button content -->\n        <slot name=\"sliding-panel-left-button\">ᐸ</slot>\n      </button>\n      <button\n        class=\"x-sliding-panel__button x-button x-sliding-panel-button-right\"\n        :class=\"buttonClass\"\n        data-test=\"sliding-panel-right-button\"\n        @click=\"xScroll += slotContainerWidth * scrollFactor\"\n      >\n        <!-- @slot Right button content -->\n        <slot name=\"sliding-panel-right-button\">ᐳ</slot>\n      </button>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { VueCSSClasses } from '../utils/types'\nimport {\n  useElementBounding,\n  useElementVisibility,\n  useMutationObserver,\n  useScroll,\n  whenever,\n} from '@vueuse/core'\nimport { computed, defineComponent, ref } from 'vue'\n\n/**\n * This component allows for any other component or element inside it to be horizontally\n * navigable. It also implements customizable buttons as well as other minor customizations to its\n * general behavior.\n *\n * Additionally, this component exposes the following props to modify the classes of the\n * elements: `buttonClass`.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'SlidingPanel',\n  props: {\n    /**\n     * Scroll factor that will dictate how much the scroll moves when pressing a navigation button.\n     */\n    scrollFactor: {\n      type: Number,\n      default: 0.7,\n    },\n    /** Would make the navigation buttons visible when they're needed or always hide them. */\n    showButtons: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * When true, whenever the DOM content in the sliding panel slot changes, it will reset\n     * the scroll position to 0.\n     */\n    resetOnContentChange: {\n      type: Boolean,\n      default: true,\n    },\n    buttonClass: { type: [String, Object, Array] as PropType<VueCSSClasses> },\n    scrollContainerClass: { type: [String, Object, Array] as PropType<VueCSSClasses> },\n  },\n  setup(props, { slots }) {\n    const scrollContainerRef = ref<HTMLDivElement>()\n\n    const { width: slotContainerWidth } = useElementBounding(scrollContainerRef)\n    const isVisible = useElementVisibility(scrollContainerRef)\n\n    const {\n      x: xScroll,\n      arrivedState,\n      measure,\n    } = useScroll(scrollContainerRef, {\n      behavior: 'smooth',\n    })\n\n    /** CSS classes to apply based on the scroll position. */\n    const cssClasses = computed(() => ({\n      'x-sliding-panel-at-start': arrivedState.left,\n      'x-sliding-panel-at-end': arrivedState.right,\n    }))\n\n    if (props.resetOnContentChange) {\n      useMutationObserver(\n        scrollContainerRef,\n        mutations => {\n          if (mutations.length > 0) {\n            xScroll.value = 0\n          }\n        },\n        {\n          subtree: true,\n          childList: true,\n          attributes: false,\n          characterData: false,\n        },\n      )\n    }\n    //ensure positions are right calculated as soon as the sliding panel is shown\n    whenever(isVisible, measure)\n\n    return {\n      arrivedState,\n      cssClasses,\n      scrollContainerRef,\n      slotContainerWidth,\n      xScroll,\n      slots,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-sliding-panel {\n  align-items: center;\n  display: flex;\n  flex-flow: row nowrap;\n  position: relative;\n}\n\n.x-sliding-panel__button {\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  transition: all ease-out 0.2s;\n  z-index: 2; /* To overlay the design system gradient with z-index:1 */\n}\n.x-sliding-panel-button-left {\n  left: var(--x-sliding-panel-buttons-distance, 0);\n}\n.x-sliding-panel-button-right {\n  right: var(--x-sliding-panel-buttons-distance, 0);\n}\n\n.x-sliding-panel__scroll {\n  display: flex;\n  flex: 100%;\n  flex-flow: row nowrap;\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: none; /* Firefox */\n  -ms-overflow-style: none; /* IE */\n}\n\n/* Chrome, Edge & Safari */\n.x-sliding-panel__scroll::-webkit-scrollbar {\n  display: none;\n}\n\n.x-sliding-panel__scroll > * {\n  flex: 0 0 auto;\n}\n\n/* prettier-ignore */\n.x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-start) .x-sliding-panel-button-left {\n    opacity: 1;\n    pointer-events: all;\n  }\n\n/* prettier-ignore */\n.x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right {\n    opacity: 1;\n    pointer-events: all;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nSimplest implementation of the component, just a list-based component inside its slot.\n\n```vue\n<template>\n  <SlidingPanel>\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n  name: 'SlidingPanelDemo',\n  components: {\n    SlidingPanel,\n  },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n  width: 200px;\n}\n\n.item {\n  display: inline-block;\n  width: 100px;\n}\n</style>\n```\n\n### Play with props\n\n#### Modifying scroll buttons travel distance\n\nEdit how much the scroll travels when navigating with the buttons by changing the `scrollFactor`\nprop.\n\n```vue\n<template>\n  <SlidingPanel :scrollFactor=\"1.5\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n  name: 'SlidingPanelDemo',\n  components: {\n    SlidingPanel,\n  },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n  width: 200px;\n}\n\n.item {\n  display: inline-block;\n  width: 100px;\n}\n</style>\n```\n\n#### Hiding scroll buttons\n\nHide the navigational buttons completely by setting the `showButtons` prop to `false`. This is\nintended to be used when other scrolling options are available, like in mobile, where you can scroll\njust by swiping.\n\n```vue\n<template>\n  <SlidingPanel :showButtons=\"false\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n  name: 'SlidingPanelDemo',\n  components: {\n    SlidingPanel,\n  },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n  width: 200px;\n}\n\n.item {\n  display: inline-block;\n  width: 100px;\n}\n</style>\n```\n\n#### Customizing the content with classes\n\nThe `buttonClass` prop can be used to add classes to the buttons.\n\nThe `scrollContainerClass` prop can be used to add classes to the scroll content.\n\n```vue\n<template>\n  <SlidingPanel buttonClass=\"x-button--round\" scrollContainerClass=\"x-sliding-panel-fade\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n  name: 'SlidingPanelDemo',\n  components: {\n    SlidingPanel,\n  },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n  width: 200px;\n}\n\n.item {\n  display: inline-block;\n  width: 100px;\n}\n</style>\n```\n\n#### Disabling reset the scroll when content changes\n\nBy default, whenever the content of the sliding panel changes, it auto resets its scroll position.\nYou can disable this behavior setting the `resetOnContentChange` prop to `false`.\n\n```vue\n<template>\n  <div>\n    <button @click=\"items++\">Add item</button>\n    <label>\n      <input type=\"checkbox\" v-model=\"resetOnContentChange\" />\n      Reset content onchange\n    </label>\n    <SlidingPanel :resetOnContentChange=\"resetOnContentChange\">\n      <div class=\"item\" v-for=\"item in items\" :key=\"item\">Item {{ item }}</div>\n    </SlidingPanel>\n  </div>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n  name: 'SlidingPanelDemo',\n  components: {\n    SlidingPanel,\n  },\n  data() {\n    return {\n      items: 4,\n      resetOnContentChange: false,\n    }\n  },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n  width: 200px;\n}\n\n.item {\n  display: inline-block;\n  width: 100px;\n}\n</style>\n```\n\n## Extending the component\n\n### Overriding Button content\n\nBy default the buttons show an arrow depicting the direction the scroll would go to when clicked,\nbut this content can be customized with anything, from characters to SVG and images.\n\n```vue\n<template>\n  <SlidingPanel>\n    <template #sliding-panel-left-button>Left</template>\n    <template #default>\n      <div class=\"item\">Item 1</div>\n      <div class=\"item\">Item 2</div>\n      <div class=\"item\">Item 3</div>\n      <div class=\"item\">Item 4</div>\n    </template>\n    <template #sliding-panel-right-button>Right</template>\n  </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n  name: 'SlidingPanelDemo',\n  components: {\n    SlidingPanel,\n  },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n  width: 200px;\n}\n\n.item {\n  display: inline-block;\n  width: 100px;\n}\n</style>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot","_Fragment","_createTextVNode","_createCommentVNode"],"mappings":";;;;;;AACa,EAAA,OAAA,IAAA,CAAA,KAAA,CAAM,OAAjB,IAAAA,SAAA,EAAA,EAAAC,kBAAA;AAAA,IA+BM,KAAA;AAAA,IAAA;AAAA,MAhCR,GAAA,EAAA,CAAA;AAAA,MAC4B,KAAA,EAD5BC,cACkC,CAAA,CAAA,iBAAA,EAA0B,IAAU,CAAA,UAAA,CAAA,CAAA;AAAA,MAAE,WAAU,EAAA,eAAA;AAAA,KAAA;;AAC9E,MAAAC,kBAAA;AAAA,QAQM,KAAA;AAAA,QAAA;AAAA,UAPJ,GAAI,EAAA,oBAAA;AAAA,UACH,KAAA,EAJPD,cAIc,CAAA,CAAA,IAAA,CAAA,oBAAA,EACF,yBAAyB,CAAA,CAAA;AAAA,UAC/B,WAAU,EAAA,sBAAA;AAAA,SAAA;;UAGVE,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,EAAA,KAAA,CAAA,EAAA,IAAA,CAAA;AAAA,SAAA;;;;MAEVA,UAAoF,CAAA,IAAA,CAAA,MAAA,EAAA,sBAAA,EAAA;AAAA,QAAjD,YAAe,EAAA,IAAA,CAAA,YAAA;AAAA,QAAe,MAAQ,EAAA,IAAA,CAAA,OAAA;AAAA,OAAA,EAAA,KAAA,CAAA,EAAA,IAAA,CAAA;MACzD,IAAhB,CAAA,WAAA,IAAAJ,SAAA,EAAA,EAAAC,kBAAA;AAAA,QAmBWI,QAAA;AAAA,QA/Bf,EAAA,GAAA,EAAA,CAAA,EAAA;AAAA,QAAA;AAAA,UAaMF,kBAAA;AAAA,YAQS,QAAA;AAAA,YAAA;AAAA,cAPP,KAAA,EAdRD,cAcc,CAAA,CAAA,8DAAA,EACE,IAAW,CAAA,WAAA,CAAA,CAAA;AAAA,cACnB,WAAU,EAAA,2BAAA;AAAA,cACT,OAAA,EAAK,MAAE,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,MAAA,KAAA,IAAA,CAAA,OAAA,IAAW,IAAqB,CAAA,kBAAA,GAAA,IAAA,CAAA,YAAA,CAAA;AAAA,aAAA;;AAGxC,cAAAE,UAAA,CAA+C,8CAA/C,MAA+C;AAAA,gBApBvDE,gBAoB+C,GAAC,CAAA;AAAA,eAAA,EAAA,IAAA,CAAA;;;;;AAE1C,UAAAH,kBAAA;AAAA,YAQS,QAAA;AAAA,YAAA;AAAA,cAPP,KAAA,EAvBRD,cAuBc,CAAA,CAAA,+DAAA,EACE,IAAW,CAAA,WAAA,CAAA,CAAA;AAAA,cACnB,WAAU,EAAA,4BAAA;AAAA,cACT,OAAA,EAAK,MAAE,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,MAAA,KAAA,IAAA,CAAA,OAAA,IAAW,IAAqB,CAAA,kBAAA,GAAA,IAAA,CAAA,YAAA,CAAA;AAAA,aAAA;;AAGxC,cAAAE,UAAA,CAAgD,+CAAhD,MAAgD;AAAA,gBA7BxDE,gBA6BgD,GAAC,CAAA;AAAA,eAAA,EAAA,IAAA,CAAA;;;;;;;;AA7BjD,OAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,KAAA;;;AAAA,GAAA,IAAAA,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/components/sliding-panel.vue2.js

@@ -1,135 +1,77 @@
-import { defineComponent, ref, computed, onMounted, watch, onBeforeUnmount } from 'vue';
-import { useDebounce } from '../composables/use-debounce.js';
+import { useElementBounding, useElementVisibility, useScroll, useMutationObserver, whenever } from '@vueuse/core';
+import { defineComponent, ref, computed } from 'vue';
 
-/**
- * This component allows for any other component or element inside it to be horizontally
- * navigable. It also implements customizable buttons as well as other minor customizations to its
- * general behavior.
- *
- * Additionally, this component exposes the following props to modify the classes of the
- * elements: `buttonClass`.
- *
- * @public
- */
-var _sfc_main = defineComponent({
-    name: 'SlidingPanel',
-    props: {
-        /**
-         * Scroll factor that will dictate how much the scroll moves when pressing a navigation button.
-         */
-        scrollFactor: {
-            type: Number,
-            default: 0.7
-        },
-        /** Would make the navigation buttons visible when they're needed or always hide them. */
-        showButtons: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         * When true, whenever the DOM content in the sliding panel slot changes, it will reset
-         * the scroll position to 0.
-         */
-        resetOnContentChange: {
-            type: Boolean,
-            default: true
-        },
-        buttonClass: String,
-        scrollContainerClass: String
-    },
-    setup(props, { slots }) {
-        /** Indicates if the scroll is at the start of the sliding panel. */
-        const isScrollAtStart = ref(true);
-        /** Indicates if the scroll is at the end of the sliding panel. */
-        const isScrollAtEnd = ref(true);
-        const scrollContainerRef = ref();
-        /**
-         * Updates the values of the scroll positions to show or hide the buttons depending on it.
-         *
-         * @remarks The 2px extra is to fix some cases in some resolutions where the scroll + client
-         * size is less than the scroll width even when the scroll is at the end.
-         */
-        function updateScrollPosition() {
-            if (scrollContainerRef.value) {
-                const { scrollLeft, clientWidth, scrollWidth } = scrollContainerRef.value;
-                isScrollAtStart.value = !scrollLeft;
-                isScrollAtEnd.value = scrollLeft + clientWidth + 2 >= scrollWidth;
-            }
-        }
-        /**
-         * Debounced version of the {@link SlidingPanel.updateScrollPosition} method.
-         */
-        const debouncedUpdateScroll = useDebounce(updateScrollPosition, 50, { leading: true });
-        /**
-         * Resets the scroll and updates the values of the scroll for the buttons to react.
-         */
-        const debouncedRestoreAndUpdateScroll = useDebounce(() => {
-            scrollContainerRef.value.scroll({ left: 0, behavior: 'smooth' });
-            updateScrollPosition();
-        }, 50, { leading: true });
-        /**
-         * Scrolls the wrapper element towards the provided scroll value.
-         *
-         * @param scrollValue - The value the scroll will go towards.
-         */
-        function scrollTo(scrollValue) {
-            scrollContainerRef.value.scrollBy({
-                left: scrollValue * props.scrollFactor,
-                behavior: 'smooth'
-            });
-        }
-        /** Scrolls the wrapper element to the left. */
-        function scrollLeft() {
-            scrollTo(-scrollContainerRef.value.clientWidth);
-        }
-        /** Scrolls the wrapper element to the right. */
-        function scrollRight() {
-            scrollTo(scrollContainerRef.value.clientWidth);
-        }
-        /** CSS classes to apply based on the scroll position. */
-        const cssClasses = computed(() => ({
-            'x-sliding-panel-at-start': isScrollAtStart.value,
-            'x-sliding-panel-at-end': isScrollAtEnd.value
-        }));
-        let resizeObserver;
-        let contentChangedObserver;
-        /**
-         * Initialises browser platform code:
-         * - Creates a mutation observer to detect content changes and reset scroll position.
-         * - Stores initial size and scroll position values.
-         */
-        onMounted(() => {
-            resizeObserver = new ResizeObserver(debouncedUpdateScroll);
-            resizeObserver.observe(scrollContainerRef.value);
-            contentChangedObserver = new MutationObserver(debouncedRestoreAndUpdateScroll);
-            watch(() => props.resetOnContentChange, shouldReset => {
-                if (shouldReset) {
-                    contentChangedObserver.observe(scrollContainerRef.value, {
-                        subtree: true,
-                        childList: true,
-                        attributes: false,
-                        characterData: false
-                    });
-                }
-                else {
-                    contentChangedObserver.disconnect();
-                }
-            }, { immediate: true });
-            updateScrollPosition();
-        });
-        onBeforeUnmount(() => {
-            contentChangedObserver.disconnect();
-            resizeObserver.disconnect();
-        });
-        return {
-            cssClasses,
-            debouncedUpdateScroll,
-            scrollContainerRef,
-            scrollLeft,
-            scrollRight,
-            slots
-        };
-    }
+/**
+ * This component allows for any other component or element inside it to be horizontally
+ * navigable. It also implements customizable buttons as well as other minor customizations to its
+ * general behavior.
+ *
+ * Additionally, this component exposes the following props to modify the classes of the
+ * elements: `buttonClass`.
+ *
+ * @public
+ */
+var _sfc_main = defineComponent({
+    name: 'SlidingPanel',
+    props: {
+        /**
+         * Scroll factor that will dictate how much the scroll moves when pressing a navigation button.
+         */
+        scrollFactor: {
+            type: Number,
+            default: 0.7,
+        },
+        /** Would make the navigation buttons visible when they're needed or always hide them. */
+        showButtons: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         * When true, whenever the DOM content in the sliding panel slot changes, it will reset
+         * the scroll position to 0.
+         */
+        resetOnContentChange: {
+            type: Boolean,
+            default: true,
+        },
+        buttonClass: { type: [String, Object, Array] },
+        scrollContainerClass: { type: [String, Object, Array] },
+    },
+    setup(props, { slots }) {
+        const scrollContainerRef = ref();
+        const { width: slotContainerWidth } = useElementBounding(scrollContainerRef);
+        const isVisible = useElementVisibility(scrollContainerRef);
+        const { x: xScroll, arrivedState, measure, } = useScroll(scrollContainerRef, {
+            behavior: 'smooth',
+        });
+        /** CSS classes to apply based on the scroll position. */
+        const cssClasses = computed(() => ({
+            'x-sliding-panel-at-start': arrivedState.left,
+            'x-sliding-panel-at-end': arrivedState.right,
+        }));
+        if (props.resetOnContentChange) {
+            useMutationObserver(scrollContainerRef, mutations => {
+                if (mutations.length > 0) {
+                    xScroll.value = 0;
+                }
+            }, {
+                subtree: true,
+                childList: true,
+                attributes: false,
+                characterData: false,
+            });
+        }
+        //ensure positions are right calculated as soon as the sliding panel is shown
+        whenever(isVisible, measure);
+        return {
+            arrivedState,
+            cssClasses,
+            scrollContainerRef,
+            slotContainerWidth,
+            xScroll,
+            slots,
+        };
+    },
 });
 
 export { _sfc_main as default };

package/js/components/sliding-panel.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"sliding-panel.vue2.js","sources":["../../../src/components/sliding-panel.vue"],"sourcesContent":["<template>\n  <div v-if=\"slots.default\" class=\"x-sliding-panel\" :class=\"cssClasses\" data-test=\"sliding-panel\">\n    <button\n      v-if=\"showButtons\"\n      @click=\"scrollLeft\"\n      class=\"x-sliding-panel__button x-button x-sliding-panel-button-left\"\n      :class=\"buttonClass\"\n      data-test=\"sliding-panel-left-button\"\n    >\n      <!-- @slot Left button content -->\n      <slot name=\"sliding-panel-left-button\">ᐸ</slot>\n    </button>\n    <div\n      ref=\"scrollContainerRef\"\n      @scroll=\"debouncedUpdateScroll\"\n      @transitionend=\"debouncedUpdateScroll\"\n      @animationend=\"debouncedUpdateScroll\"\n      :class=\"scrollContainerClass\"\n      class=\"x-sliding-panel__scroll\"\n      data-test=\"sliding-panel-scroll\"\n    >\n      <!-- @slot (Required) Sliding panel content -->\n      <slot />\n    </div>\n    <button\n      v-if=\"showButtons\"\n      @click=\"scrollRight\"\n      class=\"x-sliding-panel__button x-button x-sliding-panel-button-right\"\n      :class=\"buttonClass\"\n      data-test=\"sliding-panel-right-button\"\n    >\n      <!-- @slot Right button content -->\n      <slot name=\"sliding-panel-right-button\">ᐳ</slot>\n    </button>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, onBeforeUnmount, onMounted, ref, watch } from 'vue';\n  import { useDebounce } from '../composables/use-debounce';\n\n  /**\n   * This component allows for any other component or element inside it to be horizontally\n   * navigable. It also implements customizable buttons as well as other minor customizations to its\n   * general behavior.\n   *\n   * Additionally, this component exposes the following props to modify the classes of the\n   * elements: `buttonClass`.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'SlidingPanel',\n    props: {\n      /**\n       * Scroll factor that will dictate how much the scroll moves when pressing a navigation button.\n       */\n      scrollFactor: {\n        type: Number,\n        default: 0.7\n      },\n      /** Would make the navigation buttons visible when they're needed or always hide them. */\n      showButtons: {\n        type: Boolean,\n        default: true\n      },\n      /**\n       * When true, whenever the DOM content in the sliding panel slot changes, it will reset\n       * the scroll position to 0.\n       */\n      resetOnContentChange: {\n        type: Boolean,\n        default: true\n      },\n      buttonClass: String,\n      scrollContainerClass: String\n    },\n    setup(props, { slots }) {\n      /** Indicates if the scroll is at the start of the sliding panel. */\n      const isScrollAtStart = ref(true);\n      /** Indicates if the scroll is at the end of the sliding panel. */\n      const isScrollAtEnd = ref(true);\n      const scrollContainerRef = ref<HTMLDivElement>();\n\n      /**\n       * Updates the values of the scroll positions to show or hide the buttons depending on it.\n       *\n       * @remarks The 2px extra is to fix some cases in some resolutions where the scroll + client\n       * size is less than the scroll width even when the scroll is at the end.\n       */\n      function updateScrollPosition() {\n        if (scrollContainerRef.value) {\n          const { scrollLeft, clientWidth, scrollWidth } = scrollContainerRef.value;\n          isScrollAtStart.value = !scrollLeft;\n          isScrollAtEnd.value = scrollLeft + clientWidth + 2 >= scrollWidth;\n        }\n      }\n\n      /**\n       * Debounced version of the {@link SlidingPanel.updateScrollPosition} method.\n       */\n      const debouncedUpdateScroll = useDebounce(updateScrollPosition, 50, { leading: true });\n\n      /**\n       * Resets the scroll and updates the values of the scroll for the buttons to react.\n       */\n      const debouncedRestoreAndUpdateScroll = useDebounce(\n        () => {\n          scrollContainerRef.value!.scroll({ left: 0, behavior: 'smooth' });\n          updateScrollPosition();\n        },\n        50,\n        { leading: true }\n      );\n\n      /**\n       * Scrolls the wrapper element towards the provided scroll value.\n       *\n       * @param scrollValue - The value the scroll will go towards.\n       */\n      function scrollTo(scrollValue: number) {\n        scrollContainerRef.value!.scrollBy({\n          left: scrollValue * props.scrollFactor,\n          behavior: 'smooth'\n        });\n      }\n\n      /** Scrolls the wrapper element to the left. */\n      function scrollLeft() {\n        scrollTo(-scrollContainerRef.value!.clientWidth);\n      }\n\n      /** Scrolls the wrapper element to the right. */\n      function scrollRight() {\n        scrollTo(scrollContainerRef.value!.clientWidth);\n      }\n\n      /** CSS classes to apply based on the scroll position. */\n      const cssClasses = computed(() => ({\n        'x-sliding-panel-at-start': isScrollAtStart.value,\n        'x-sliding-panel-at-end': isScrollAtEnd.value\n      }));\n\n      let resizeObserver: ResizeObserver;\n      let contentChangedObserver: MutationObserver;\n\n      /**\n       * Initialises browser platform code:\n       * - Creates a mutation observer to detect content changes and reset scroll position.\n       * - Stores initial size and scroll position values.\n       */\n      onMounted(() => {\n        resizeObserver = new ResizeObserver(debouncedUpdateScroll);\n        resizeObserver.observe(scrollContainerRef.value!);\n        contentChangedObserver = new MutationObserver(debouncedRestoreAndUpdateScroll);\n\n        watch(\n          () => props.resetOnContentChange,\n          shouldReset => {\n            if (shouldReset) {\n              contentChangedObserver.observe(scrollContainerRef.value!, {\n                subtree: true,\n                childList: true,\n                attributes: false,\n                characterData: false\n              });\n            } else {\n              contentChangedObserver.disconnect();\n            }\n          },\n          { immediate: true }\n        );\n\n        updateScrollPosition();\n      });\n\n      onBeforeUnmount(() => {\n        contentChangedObserver.disconnect();\n        resizeObserver.disconnect();\n      });\n\n      return {\n        cssClasses,\n        debouncedUpdateScroll,\n        scrollContainerRef,\n        scrollLeft,\n        scrollRight,\n        slots\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-sliding-panel {\n    align-items: center;\n    display: flex;\n    flex-flow: row nowrap;\n    position: relative;\n  }\n\n  .x-sliding-panel__button {\n    opacity: 0;\n    pointer-events: none;\n    position: absolute;\n    transition: all ease-out 0.2s;\n    z-index: 2; /* To overlay the design system gradient with z-index:1 */\n  }\n  .x-sliding-panel-button-left {\n    left: 0;\n  }\n  .x-sliding-panel-button-right {\n    right: 0;\n  }\n\n  .x-sliding-panel__scroll {\n    display: flex;\n    flex: 100%;\n    flex-flow: row nowrap;\n    overflow-x: auto;\n    overflow-y: hidden;\n    scrollbar-width: none; /* Firefox */\n    -ms-overflow-style: none; /* IE */\n  }\n\n  /* Chrome, Edge & Safari */\n  .x-sliding-panel__scroll::-webkit-scrollbar {\n    display: none;\n  }\n\n  .x-sliding-panel__scroll > * {\n    flex: 0 0 auto;\n  }\n\n  /* prettier-ignore */\n  .x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-start) .x-sliding-panel-button-left {\n    opacity: 1;\n    pointer-events: all;\n  }\n\n  /* prettier-ignore */\n  .x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right {\n    opacity: 1;\n    pointer-events: all;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nSimplest implementation of the component, just a list-based component inside its slot.\n\n```vue\n<template>\n  <SlidingPanel>\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n### Play with props\n\n#### Modifying scroll buttons travel distance\n\nEdit how much the scroll travels when navigating with the buttons by changing the `scrollFactor`\nprop.\n\n```vue\n<template>\n  <SlidingPanel :scrollFactor=\"1.5\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n#### Hiding scroll buttons\n\nHide the navigational buttons completely by setting the `showButtons` prop to `false`. This is\nintended to be used when other scrolling options are available, like in mobile, where you can scroll\njust by swiping.\n\n```vue\n<template>\n  <SlidingPanel :showButtons=\"false\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n#### Customizing the content with classes\n\nThe `buttonClass` prop can be used to add classes to the buttons.\n\nThe `scrollContainerClass` prop can be used to add classes to the scroll content.\n\n```vue\n<template>\n  <SlidingPanel buttonClass=\"x-button--round\" scrollContainerClass=\"x-sliding-panel-fade\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n#### Disabling reset the scroll when content changes\n\nBy default, whenever the content of the sliding panel changes, it auto resets its scroll position.\nYou can disable this behavior setting the `resetOnContentChange` prop to `false`.\n\n```vue\n<template>\n  <div>\n    <button @click=\"items++\">Add item</button>\n    <label>\n      <input type=\"checkbox\" v-model=\"resetOnContentChange\" />\n      Reset content onchange\n    </label>\n    <SlidingPanel :resetOnContentChange=\"resetOnContentChange\">\n      <div class=\"item\" v-for=\"item in items\" :key=\"item\">Item {{ item }}</div>\n    </SlidingPanel>\n  </div>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    },\n    data() {\n      return {\n        items: 4,\n        resetOnContentChange: false\n      };\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n## Extending the component\n\n### Overriding Button content\n\nBy default the buttons show an arrow depicting the direction the scroll would go to when clicked,\nbut this content can be customized with anything, from characters to SVG and images.\n\n```vue\n<template>\n  <SlidingPanel>\n    <template #sliding-panel-left-button>Left</template>\n    <template #default>\n      <div class=\"item\">Item 1</div>\n      <div class=\"item\">Item 2</div>\n      <div class=\"item\">Item 3</div>\n      <div class=\"item\">Item 4</div>\n    </template>\n    <template #sliding-panel-right-button>Right</template>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n</docs>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sliding-panel.vue2.js","sources":["../../../src/components/sliding-panel.vue"],"sourcesContent":["<template>\n  <div v-if=\"slots.default\" class=\"x-sliding-panel\" :class=\"cssClasses\" data-test=\"sliding-panel\">\n    <div\n      ref=\"scrollContainerRef\"\n      :class=\"scrollContainerClass\"\n      class=\"x-sliding-panel__scroll\"\n      data-test=\"sliding-panel-scroll\"\n    >\n      <!-- @slot (Required) Sliding panel content -->\n      <slot />\n    </div>\n    <slot name=\"sliding-panel-addons\" :arrived-state=\"arrivedState\" :scroll=\"xScroll\" />\n    <template v-if=\"showButtons\">\n      <button\n        class=\"x-sliding-panel__button x-button x-sliding-panel-button-left\"\n        :class=\"buttonClass\"\n        data-test=\"sliding-panel-left-button\"\n        @click=\"xScroll -= slotContainerWidth * scrollFactor\"\n      >\n        <!-- @slot Left button content -->\n        <slot name=\"sliding-panel-left-button\">ᐸ</slot>\n      </button>\n      <button\n        class=\"x-sliding-panel__button x-button x-sliding-panel-button-right\"\n        :class=\"buttonClass\"\n        data-test=\"sliding-panel-right-button\"\n        @click=\"xScroll += slotContainerWidth * scrollFactor\"\n      >\n        <!-- @slot Right button content -->\n        <slot name=\"sliding-panel-right-button\">ᐳ</slot>\n      </button>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { VueCSSClasses } from '../utils/types'\nimport {\n  useElementBounding,\n  useElementVisibility,\n  useMutationObserver,\n  useScroll,\n  whenever,\n} from '@vueuse/core'\nimport { computed, defineComponent, ref } from 'vue'\n\n/**\n * This component allows for any other component or element inside it to be horizontally\n * navigable. It also implements customizable buttons as well as other minor customizations to its\n * general behavior.\n *\n * Additionally, this component exposes the following props to modify the classes of the\n * elements: `buttonClass`.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'SlidingPanel',\n  props: {\n    /**\n     * Scroll factor that will dictate how much the scroll moves when pressing a navigation button.\n     */\n    scrollFactor: {\n      type: Number,\n      default: 0.7,\n    },\n    /** Would make the navigation buttons visible when they're needed or always hide them. */\n    showButtons: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * When true, whenever the DOM content in the sliding panel slot changes, it will reset\n     * the scroll position to 0.\n     */\n    resetOnContentChange: {\n      type: Boolean,\n      default: true,\n    },\n    buttonClass: { type: [String, Object, Array] as PropType<VueCSSClasses> },\n    scrollContainerClass: { type: [String, Object, Array] as PropType<VueCSSClasses> },\n  },\n  setup(props, { slots }) {\n    const scrollContainerRef = ref<HTMLDivElement>()\n\n    const { width: slotContainerWidth } = useElementBounding(scrollContainerRef)\n    const isVisible = useElementVisibility(scrollContainerRef)\n\n    const {\n      x: xScroll,\n      arrivedState,\n      measure,\n    } = useScroll(scrollContainerRef, {\n      behavior: 'smooth',\n    })\n\n    /** CSS classes to apply based on the scroll position. */\n    const cssClasses = computed(() => ({\n      'x-sliding-panel-at-start': arrivedState.left,\n      'x-sliding-panel-at-end': arrivedState.right,\n    }))\n\n    if (props.resetOnContentChange) {\n      useMutationObserver(\n        scrollContainerRef,\n        mutations => {\n          if (mutations.length > 0) {\n            xScroll.value = 0\n          }\n        },\n        {\n          subtree: true,\n          childList: true,\n          attributes: false,\n          characterData: false,\n        },\n      )\n    }\n    //ensure positions are right calculated as soon as the sliding panel is shown\n    whenever(isVisible, measure)\n\n    return {\n      arrivedState,\n      cssClasses,\n      scrollContainerRef,\n      slotContainerWidth,\n      xScroll,\n      slots,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-sliding-panel {\n  align-items: center;\n  display: flex;\n  flex-flow: row nowrap;\n  position: relative;\n}\n\n.x-sliding-panel__button {\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  transition: all ease-out 0.2s;\n  z-index: 2; /* To overlay the design system gradient with z-index:1 */\n}\n.x-sliding-panel-button-left {\n  left: var(--x-sliding-panel-buttons-distance, 0);\n}\n.x-sliding-panel-button-right {\n  right: var(--x-sliding-panel-buttons-distance, 0);\n}\n\n.x-sliding-panel__scroll {\n  display: flex;\n  flex: 100%;\n  flex-flow: row nowrap;\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: none; /* Firefox */\n  -ms-overflow-style: none; /* IE */\n}\n\n/* Chrome, Edge & Safari */\n.x-sliding-panel__scroll::-webkit-scrollbar {\n  display: none;\n}\n\n.x-sliding-panel__scroll > * {\n  flex: 0 0 auto;\n}\n\n/* prettier-ignore */\n.x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-start) .x-sliding-panel-button-left {\n    opacity: 1;\n    pointer-events: all;\n  }\n\n/* prettier-ignore */\n.x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right {\n    opacity: 1;\n    pointer-events: all;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nSimplest implementation of the component, just a list-based component inside its slot.\n\n```vue\n<template>\n  <SlidingPanel>\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n  name: 'SlidingPanelDemo',\n  components: {\n    SlidingPanel,\n  },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n  width: 200px;\n}\n\n.item {\n  display: inline-block;\n  width: 100px;\n}\n</style>\n```\n\n### Play with props\n\n#### Modifying scroll buttons travel distance\n\nEdit how much the scroll travels when navigating with the buttons by changing the `scrollFactor`\nprop.\n\n```vue\n<template>\n  <SlidingPanel :scrollFactor=\"1.5\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n  name: 'SlidingPanelDemo',\n  components: {\n    SlidingPanel,\n  },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n  width: 200px;\n}\n\n.item {\n  display: inline-block;\n  width: 100px;\n}\n</style>\n```\n\n#### Hiding scroll buttons\n\nHide the navigational buttons completely by setting the `showButtons` prop to `false`. This is\nintended to be used when other scrolling options are available, like in mobile, where you can scroll\njust by swiping.\n\n```vue\n<template>\n  <SlidingPanel :showButtons=\"false\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n  name: 'SlidingPanelDemo',\n  components: {\n    SlidingPanel,\n  },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n  width: 200px;\n}\n\n.item {\n  display: inline-block;\n  width: 100px;\n}\n</style>\n```\n\n#### Customizing the content with classes\n\nThe `buttonClass` prop can be used to add classes to the buttons.\n\nThe `scrollContainerClass` prop can be used to add classes to the scroll content.\n\n```vue\n<template>\n  <SlidingPanel buttonClass=\"x-button--round\" scrollContainerClass=\"x-sliding-panel-fade\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n  name: 'SlidingPanelDemo',\n  components: {\n    SlidingPanel,\n  },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n  width: 200px;\n}\n\n.item {\n  display: inline-block;\n  width: 100px;\n}\n</style>\n```\n\n#### Disabling reset the scroll when content changes\n\nBy default, whenever the content of the sliding panel changes, it auto resets its scroll position.\nYou can disable this behavior setting the `resetOnContentChange` prop to `false`.\n\n```vue\n<template>\n  <div>\n    <button @click=\"items++\">Add item</button>\n    <label>\n      <input type=\"checkbox\" v-model=\"resetOnContentChange\" />\n      Reset content onchange\n    </label>\n    <SlidingPanel :resetOnContentChange=\"resetOnContentChange\">\n      <div class=\"item\" v-for=\"item in items\" :key=\"item\">Item {{ item }}</div>\n    </SlidingPanel>\n  </div>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n  name: 'SlidingPanelDemo',\n  components: {\n    SlidingPanel,\n  },\n  data() {\n    return {\n      items: 4,\n      resetOnContentChange: false,\n    }\n  },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n  width: 200px;\n}\n\n.item {\n  display: inline-block;\n  width: 100px;\n}\n</style>\n```\n\n## Extending the component\n\n### Overriding Button content\n\nBy default the buttons show an arrow depicting the direction the scroll would go to when clicked,\nbut this content can be customized with anything, from characters to SVG and images.\n\n```vue\n<template>\n  <SlidingPanel>\n    <template #sliding-panel-left-button>Left</template>\n    <template #default>\n      <div class=\"item\">Item 1</div>\n      <div class=\"item\">Item 2</div>\n      <div class=\"item\">Item 3</div>\n      <div class=\"item\">Item 4</div>\n    </template>\n    <template #sliding-panel-right-button>Right</template>\n  </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n  name: 'SlidingPanelDemo',\n  components: {\n    SlidingPanel,\n  },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n  width: 200px;\n}\n\n.item {\n  display: inline-block;\n  width: 100px;\n}\n</style>\n```\n</docs>\n"],"names":[],"mappings":";;;AA+CA;;;;;;;;;AASE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,GAAG;AACb,SAAA;;AAED,QAAA,WAAW,EAAE;AACX,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACD;;;AAGE;AACF,QAAA,oBAAoB,EAAE;AACpB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;QACD,WAAW,EAAE,EAAE,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,GAA8B;QACzE,oBAAoB,EAAE,EAAE,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,GAA8B;AACnF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,kBAAmB,GAAE,GAAG,EAAiB,CAAA;QAE/C,MAAM,EAAE,KAAK,EAAE,kBAAmB,EAAA,GAAI,kBAAkB,CAAC,kBAAkB,CAAA,CAAA;AAC3E,QAAA,MAAM,YAAY,oBAAoB,CAAC,kBAAkB,CAAA,CAAA;AAEzD,QAAA,MAAM,EACJ,CAAC,EAAE,OAAO,EACV,YAAY,EACZ,OAAO,GACT,GAAI,SAAS,CAAC,kBAAkB,EAAE;AAChC,YAAA,QAAQ,EAAE,QAAQ;AACnB,SAAA,CAAA,CAAA;;AAGD,QAAA,MAAM,UAAS,GAAI,QAAQ,CAAC,OAAO;YACjC,0BAA0B,EAAE,YAAY,CAAC,IAAI;YAC7C,wBAAwB,EAAE,YAAY,CAAC,KAAK;AAC7C,SAAA,CAAC,CAAA,CAAA;AAEF,QAAA,IAAI,KAAK,CAAC,oBAAoB,EAAE;AAC9B,YAAA,mBAAmB,CACjB,kBAAkB,EAClB,SAAU,IAAG;AACX,gBAAA,IAAI,SAAS,CAAC,MAAO,GAAE,CAAC,EAAE;AACxB,oBAAA,OAAO,CAAC,KAAI,GAAI,CAAA,CAAA;iBAClB;AACF,aAAC,EACD;AACE,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,SAAS,EAAE,IAAI;AACf,gBAAA,UAAU,EAAE,KAAK;AACjB,gBAAA,aAAa,EAAE,KAAK;AACrB,aAAA,CACH,CAAA;SACF;;AAEA,QAAA,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAA,CAAA;QAE3B,OAAO;YACL,YAAY;YACZ,UAAU;YACV,kBAAkB;YAClB,kBAAkB;YAClB,OAAO;YACP,KAAK;SACP,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/components/sliding-panel.vue3.js

@@ -1,6 +1,6 @@
 import injectCss from '../../tools/inject-css.js';
 
-var css = ".x-sliding-panel[data-v-9402d5ce]{align-items:center;display:flex;flex-flow:row nowrap;position:relative}.x-sliding-panel__button[data-v-9402d5ce]{opacity:0;pointer-events:none;position:absolute;transition:all .2s ease-out;z-index:2}.x-sliding-panel-button-left[data-v-9402d5ce]{left:0}.x-sliding-panel-button-right[data-v-9402d5ce]{right:0}.x-sliding-panel__scroll[data-v-9402d5ce]{-ms-overflow-style:none;display:flex;flex:100%;flex-flow:row nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.x-sliding-panel__scroll[data-v-9402d5ce]::-webkit-scrollbar{display:none}.x-sliding-panel__scroll[data-v-9402d5ce]>*{flex:0 0 auto}.x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right[data-v-9402d5ce],.x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-start) .x-sliding-panel-button-left[data-v-9402d5ce]{opacity:1;pointer-events:all}";
+var css = ".x-sliding-panel[data-v-9402d5ce]{align-items:center;display:flex;flex-flow:row nowrap;position:relative}.x-sliding-panel__button[data-v-9402d5ce]{opacity:0;pointer-events:none;position:absolute;transition:all .2s ease-out;z-index:2}.x-sliding-panel-button-left[data-v-9402d5ce]{left:var(--x-sliding-panel-buttons-distance,0)}.x-sliding-panel-button-right[data-v-9402d5ce]{right:var(--x-sliding-panel-buttons-distance,0)}.x-sliding-panel__scroll[data-v-9402d5ce]{-ms-overflow-style:none;display:flex;flex:100%;flex-flow:row nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.x-sliding-panel__scroll[data-v-9402d5ce]::-webkit-scrollbar{display:none}.x-sliding-panel__scroll[data-v-9402d5ce]>*{flex:0 0 auto}.x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right[data-v-9402d5ce],.x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-start) .x-sliding-panel-button-left[data-v-9402d5ce]{opacity:1;pointer-events:all}";
 injectCss(css);
 
 export { css, css as default };

package/js/components/snippet-callbacks.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"snippet-callbacks.vue.js","sources":["../../../src/components/snippet-callbacks.vue"],"sourcesContent":["<template>\n  <GlobalXBus :listeners=\"eventListeners\" />\n</template>\n\n<script lang=\"ts\">\n  import { map } from '@empathyco/x-utils';\n  import { computed, defineComponent, inject } from 'vue';\n  import { WireMetadata } from '../wiring';\n  import { SnippetConfig, XEventListeners } from '../x-installer/api/api.types';\n  import { useXBus } from '../composables/use-x-bus';\n  import GlobalXBus from './global-x-bus.vue';\n\n  /**\n   * This component subscribes to any {@link XEvent} with a custom callbacks provided by the snippet\n   * configuration.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'SnippetCallbacks',\n    components: { GlobalXBus },\n    setup() {\n      const xBus = useXBus();\n\n      /**\n       * Injects {@link SnippetConfig} provided by an ancestor as snippetConfig.\n       *\n       * @internal\n       */\n      const snippetConfig = inject<SnippetConfig>('snippetConfig');\n\n      /**\n       * It maps all the callbacks provided by the snippetConfig and adds an emit to each one.\n       *\n       * @returns The event listeners with the {@link XEventsTypes.SnippetCallbackExecuted} emit in\n       * the callback.\n       *\n       * @internal\n       *\n       */\n      const eventListeners = computed<XEventListeners>(() => {\n        const callbacks = snippetConfig?.callbacks;\n\n        return callbacks\n          ? map(callbacks, (eventName, callback) => {\n              return (payload: unknown, metadata: WireMetadata) => {\n                const callbackReturn = callback(payload as never, metadata);\n                xBus.emit('SnippetCallbackExecuted', {\n                  event: eventName,\n                  callbackReturn,\n                  payload: payload as never,\n                  metadata\n                });\n              };\n            })\n          : ({} as XEventListeners);\n      });\n\n      return { eventListeners };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThe `SnippetCallbacks` will emit these events:\n\n- [`SnippetCallbackExecuted`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  each time a callback provided by the snippetConfig is fired.\n\n## See it in action\n\nThis component does not render anything. Its only responsibility is to receive any callback that\nwill be triggered once its listened event is emitted.\n\n```vue\n<template>\n  <SnippetCallbacks />\n</template>\n\n<script>\n  import { SnippetCallbacks } from '@empathyco/x-components';\n  export default {\n    name: 'SnippetCallbacksTest',\n    components: {\n      SnippetCallbacks\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent"],"mappings":";;;;;AACE,EAAA,MAAA,qBAAA,GAAAA,gBAAA,CAA0C,YAA7B,CAAA,CAAA;;;;;;;"}
+{"version":3,"file":"snippet-callbacks.vue.js","sources":["../../../src/components/snippet-callbacks.vue"],"sourcesContent":["<template>\n  <GlobalXBus :listeners=\"eventListeners\" />\n</template>\n\n<script lang=\"ts\">\nimport type { WireMetadata } from '../wiring'\nimport type { SnippetConfig, XEventListeners } from '../x-installer/api/api.types'\nimport { map } from '@empathyco/x-utils'\nimport { computed, defineComponent, inject } from 'vue'\nimport { useXBus } from '../composables/use-x-bus'\nimport GlobalXBus from './global-x-bus.vue'\n\n/**\n * This component subscribes to any {@link XEvent} with a custom callbacks provided by the snippet\n * configuration.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'SnippetCallbacks',\n  components: { GlobalXBus },\n  setup() {\n    const xBus = useXBus()\n\n    /**\n     * Injects {@link SnippetConfig} provided by an ancestor as snippetConfig.\n     *\n     * @internal\n     */\n    const snippetConfig = inject<SnippetConfig>('snippetConfig')\n\n    /**\n     * It maps all the callbacks provided by the snippetConfig and adds an emit to each one.\n     *\n     * @returns The event listeners with the {@link XEventsTypes.SnippetCallbackExecuted} emit in\n     * the callback.\n     *\n     * @internal\n     *\n     */\n    const eventListeners = computed<XEventListeners>(() => {\n      const callbacks = snippetConfig?.callbacks\n\n      return callbacks\n        ? map(callbacks, (eventName, callback) => {\n            return (payload: unknown, metadata: WireMetadata) => {\n              const callbackReturn = callback(payload as never, metadata)\n              xBus.emit('SnippetCallbackExecuted', {\n                event: eventName,\n                callbackReturn,\n                payload: payload as never,\n                metadata,\n              })\n            }\n          })\n        : ({} as XEventListeners)\n    })\n\n    return { eventListeners }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThe `SnippetCallbacks` will emit these events:\n\n- [`SnippetCallbackExecuted`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  each time a callback provided by the snippetConfig is fired.\n\n## See it in action\n\nThis component does not render anything. Its only responsibility is to receive any callback that\nwill be triggered once its listened event is emitted.\n\n```vue\n<template>\n  <SnippetCallbacks />\n</template>\n\n<script>\nimport { SnippetCallbacks } from '@empathyco/x-components'\nexport default {\n  name: 'SnippetCallbacksTest',\n  components: {\n    SnippetCallbacks,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_createBlock"],"mappings":";;;;;;sBACEA,WAA0C,CAAA,qBAAA,EAAA,EAA7B,WAAW,IAAc,CAAA,cAAA,EAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,WAAA,CAAA,CAAA,CAAA;;;;;;"}