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

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

@@ -0,0 +1,219 @@
+import { ref, computed, onMounted, nextTick, watch } from 'vue';
+import { isArray } from '@empathyco/x-utils';
+import { throttle } from '../../utils/throttle.js';
+import { use$x } from '../../composables/use-_x.js';
+
+/**
+ * Composable to share Scroll logic.
+ *
+ * @param props - Composable props.
+ * @param context - Component setup context.
+ * @param scrollEl - The scrolling container reference.
+ * @returns A throttled version of the function to store the scroll data.
+ * @public
+ */
+function useScroll(props, { emit }, scrollEl) {
+    /**
+     * Property for getting the client height of scroll.
+     *
+     * @internal
+     */
+    const clientHeight = ref(0);
+    /**
+     * Property for getting the current position of scroll.
+     *
+     * @internal
+     */
+    const currentPosition = ref(0);
+    /**
+     * Property for getting the previous position of scroll.
+     *
+     * @internal
+     */
+    const previousPosition = ref(0);
+    /**
+     * Property for getting the scroll height.
+     *
+     * @internal
+     */
+    const scrollHeight = ref(0);
+    /**
+     * Flag to know if the property clientHeight is changing or gets the final value.
+     *
+     * @internal
+     */
+    const isClientHeightChanging = ref(false);
+    /**
+     * Property for setting the direction of scroll.
+     *
+     * @internal
+     */
+    const scrollDirection = ref('UP');
+    /**
+     * Restores the clientHeight flag when clientHeight property stops changing.
+     * Also sets a new previous position, before update the current one.
+     *
+     * @internal
+     */
+    const restoreClientHeightFlag = () => {
+        isClientHeightChanging.value = false;
+        previousPosition.value = currentPosition.value;
+    };
+    const throtteledCall = throttle(restoreClientHeightFlag, 100);
+    /**
+     * Updates scroll related properties.
+     *
+     * @internal
+     */
+    const storeScrollData = () => {
+        if (scrollEl.value) {
+            currentPosition.value = scrollEl.value.scrollTop;
+            scrollHeight.value = scrollEl.value.scrollHeight;
+            clientHeight.value = scrollEl.value.clientHeight;
+        }
+    };
+    /**
+     * Throttled version of the function that stores the DOM scroll related properties.
+     * The duration of the throttle is configured through the `throttleMs` prop passed as parameter.
+     *
+     * @returns A throttled version of the function to store the scroll data.
+     * @internal
+     */
+    const throttledStoreScrollData = computed(() => throttle(storeScrollData, props.throttleMs));
+    /**
+     * Returns end position of scroll.
+     *
+     * @returns A number for knowing end position of scroll.
+     * @internal
+     */
+    const scrollEndPosition = computed(() => scrollHeight.value - clientHeight.value);
+    /**
+     * Returns distance missing to endPosition position.
+     *
+     * @returns A number for knowing the distance missing to endPosition position.
+     * @internal
+     */
+    const distanceToEnd = computed(() => scrollEndPosition.value - currentPosition.value);
+    /**
+     * Returns `true` when there is no more content to scroll.
+     *
+     * @returns A boolean for knowing if the user scrolls to the end.
+     * @internal
+     */
+    const hasScrollReachedEnd = computed(() => currentPosition.value === scrollEndPosition.value);
+    /**
+     * Returns `true` when the scroll is at the initial position.
+     *
+     * @returns A boolean for knowing if the user scrolls to the start.
+     * @internal
+     */
+    const hasScrollReachedStart = computed(() => currentPosition.value === 0);
+    /**
+     * Returns `true` when the amount of pixels scrolled is greater than
+     * the `distanceToBottom` prop passed as parameter.
+     *
+     * @returns A boolean for knowing if the user is about to reaching to the end.
+     * @internal
+     */
+    const hasScrollAlmostReachedEnd = computed(() => !hasScrollReachedStart.value && props.distanceToBottom > distanceToEnd.value);
+    onMounted(() => {
+        nextTick().then(() => {
+            if (!scrollEl.value) {
+                // TODO Replace with Empathy's logger
+                // eslint-disable-next-line no-console
+                console.warn('[useScroll]', 
+                // eslint-disable-next-line max-len
+                'Components using this composable must pass `scrollEl` as the HTML node that is scrolling.');
+            }
+            else {
+                storeScrollData();
+            }
+        });
+    });
+    /**
+     * Change the isClientHeightChanging flag when the property clientHeight is changing and
+     * calls throttleledCall method.
+     *
+     * @internal
+     */
+    watch(clientHeight, () => {
+        isClientHeightChanging.value = true;
+        throtteledCall();
+    }, { immediate: true });
+    /**
+     * Emits the `scroll` event.
+     *
+     * @param _newScrollPosition - The new position of scroll.
+     * @param oldScrollPosition - The old position of scroll.
+     * @internal
+     */
+    watch(currentPosition, (_newScrollPosition, oldScrollPosition) => {
+        emit('scroll', currentPosition.value);
+        previousPosition.value = oldScrollPosition;
+    });
+    /**
+     * Sets direction of scroll based in {@link ScrollDirection} when the current position
+     * has changed.
+     *
+     * @internal
+     */
+    watch(currentPosition, () => {
+        if (!isClientHeightChanging.value && currentPosition.value !== previousPosition.value) {
+            scrollDirection.value = currentPosition.value > previousPosition.value ? 'DOWN' : 'UP';
+        }
+    });
+    /**
+     * Emits the 'scroll:almost-at-end' event when the user is about to reach to end.
+     *
+     * @param isScrollAlmostAtEnd - For knowing if the user is about to reach to end.
+     * @internal
+     */
+    watch(hasScrollReachedStart, (isScrollAtStart) => {
+        emit('scroll:at-start', isScrollAtStart);
+    });
+    /**
+     * Sets direction of scroll based in {@link ScrollDirection} when the current position
+     * has changed.
+     *
+     * @internal
+     */
+    watch(hasScrollAlmostReachedEnd, (isScrollAlmostAtEnd) => {
+        emit('scroll:almost-at-end', isScrollAlmostAtEnd);
+    });
+    /**
+     * Emits the 'scroll:at-end' event when the user reaches the end.
+     *
+     * @param isScrollAtEnd - For knowing if the user reaches at end.
+     * @internal
+     */
+    watch(hasScrollReachedEnd, (isScrollAtEnd) => {
+        emit('scroll:at-end', isScrollAtEnd);
+    });
+    /**
+     * Emits the `scroll:direction-change` event when the scrolling direction has changed.
+     *
+     * @param direction - The new direction of scroll.
+     * @internal
+     */
+    watch(scrollDirection, (direction) => {
+        if (!isClientHeightChanging.value) {
+            emit('scroll:direction-change', direction);
+        }
+    });
+    /**
+     * Resets the scroll position.
+     *
+     * @internal
+     */
+    const $x = use$x();
+    const resetOnEvents = isArray(props.resetOn) ? props.resetOn : [props.resetOn];
+    resetOnEvents.forEach(event => $x.on(event, false).subscribe(() => nextTick().then(() => {
+        if (props.resetOnChange) {
+            scrollEl.value?.scrollTo({ top: 0 });
+        }
+    })));
+    return { throttledStoreScrollData };
+}
+
+export { useScroll };
+//# sourceMappingURL=use-scroll.js.map

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

@@ -0,0 +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      currentPosition.value = scrollEl.value.scrollTop;\n      scrollHeight.value = scrollEl.value.scrollHeight;\n      clientHeight.value = scrollEl.value.clientHeight;\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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"}

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

@@ -1,110 +1,74 @@
-import script from './sliding-panel.vue2.js';
+import _sfc_main from './sliding-panel.vue2.js';
+import { openBlock, createElementBlock, normalizeClass, createCommentVNode, renderSlot, createTextVNode, createElementVNode } from 'vue';
 import './sliding-panel.vue3.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _vm.$slots.default
-    ? _c(
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return _ctx.slots.default ? (openBlock(), createElementBlock(
+    "div",
+    {
+      key: 0,
+      class: normalizeClass(["x-sliding-panel", _ctx.cssClasses]),
+      "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",
         {
-          staticClass: "x-sliding-panel",
-          class: _vm.cssClasses,
-          attrs: { "data-test": "sliding-panel" },
+          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"
         },
         [
-          _vm.showButtons
-            ? _c(
-                "button",
-                {
-                  staticClass:
-                    "x-sliding-panel__button x-button x-sliding-panel-button-left",
-                  class: _vm.buttonClass,
-                  attrs: { "data-test": "sliding-panel-left-button" },
-                  on: { click: _vm.scrollLeft },
-                },
-                [
-                  _vm._t("sliding-panel-left-button", function () {
-                    return [_vm._v("ᐸ")]
-                  }),
-                ],
-                2
-              )
-            : _vm._e(),
-          _c(
-            "div",
-            {
-              ref: "scrollContainer",
-              staticClass: "x-sliding-panel__scroll",
-              class: _vm.scrollContainerClass,
-              attrs: { "data-test": "sliding-panel-scroll" },
-              on: {
-                scroll: _vm.debouncedUpdateScrollPosition,
-                transitionend: _vm.debouncedUpdateScrollPosition,
-                animationend: _vm.debouncedUpdateScrollPosition,
-              },
-            },
-            [_vm._t("default")],
-            2
-          ),
-          _vm.showButtons
-            ? _c(
-                "button",
-                {
-                  staticClass:
-                    "x-sliding-panel__button x-button x-sliding-panel-button-right",
-                  class: _vm.buttonClass,
-                  attrs: { "data-test": "sliding-panel-right-button" },
-                  on: { click: _vm.scrollRight },
-                },
-                [
-                  _vm._t("sliding-panel-right-button", function () {
-                    return [_vm._v("ᐳ")]
-                  }),
-                ],
-                2
-              )
-            : _vm._e(),
-        ]
-      )
-    : _vm._e()
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = "data-v-7ad53488";
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
+          createCommentVNode(" @slot (Required) Sliding panel content "),
+          renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ],
+        34
+        /* CLASS, NEED_HYDRATION */
+      ),
+      _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"
+        },
+        [
+          createCommentVNode(" @slot Right button content "),
+          renderSlot(_ctx.$slots, "sliding-panel-right-button", {}, () => [
+            createTextVNode("\u1433")
+          ], true)
+        ],
+        2
+        /* CLASS */
+      )) : createCommentVNode("v-if", true)
+    ],
+    2
+    /* CLASS */
+  )) : createCommentVNode("v-if", true);
+}
+var slidingPanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-9402d5ce"]]);
 
-export { __vue_component__ as default };
+export { slidingPanel as default };
 //# sourceMappingURL=sliding-panel.vue.js.map

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=\"scrollContainer\"\n      @scroll=\"debouncedUpdateScrollPosition\"\n      @transitionend=\"debouncedUpdateScrollPosition\"\n      @animationend=\"debouncedUpdateScrollPosition\"\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 { Component, Mixins, Prop } from 'vue-property-decorator';\n  import { VueCSSClasses } from '../utils/types';\n  import { Debounce } from './decorators/debounce.decorators';\n  import { dynamicPropsMixin } from './dynamic-props.mixin';\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  @Component\n  export default class SlidingPanel extends Mixins(\n    dynamicPropsMixin(['buttonClass', 'scrollContainerClass'])\n  ) {\n    /**\n     * Scroll factor that will dictate how much the scroll moves when pressing a navigation button.\n     *\n     * @public\n     */\n    @Prop({ default: 0.7 })\n    public scrollFactor!: number;\n\n    /**\n     * Would make the navigation buttons visible when they're needed or always hide them.\n     *\n     * @public\n     */\n    @Prop({ default: true })\n    public showButtons!: boolean;\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     * @public\n     */\n    @Prop({ default: true })\n    public resetOnContentChange!: boolean;\n\n    /**\n     * Indicates if the scroll is at the start of the sliding panel.\n     *\n     * @internal\n     */\n    protected isScrollAtStart = true;\n\n    /**\n     * Indicates if the scroll is at the end of the sliding panel.\n     *\n     * @internal\n     */\n    protected isScrollAtEnd = true;\n\n    /**\n     * HTMLElement referencing the scroll of the component.\n     *\n     * @internal\n     */\n    public $refs!: {\n      scrollContainer: HTMLElement;\n    };\n\n    /**\n     * CSS classes to apply based on the scroll position.\n     *\n     * @returns The CSS classes to apply.\n     *\n     * @internal\n     */\n    protected get cssClasses(): VueCSSClasses {\n      return {\n        'x-sliding-panel-at-start': this.isScrollAtStart,\n        'x-sliding-panel-at-end': this.isScrollAtEnd\n      };\n    }\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     * @internal\n     */\n    mounted(): void {\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      const resizeObserver = new ResizeObserver(this.debouncedUpdateScrollPosition);\n      resizeObserver.observe(this.$el);\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      const contentChangedObserver = new MutationObserver(this.restoreAndUpdateScroll);\n      this.$watch(\n        () => this.resetOnContentChange,\n        shouldReset => {\n          if (shouldReset) {\n            contentChangedObserver.observe(this.$refs.scrollContainer, {\n              attributes: false,\n              childList: true,\n              subtree: true,\n              characterData: false\n            });\n          } else {\n            contentChangedObserver.disconnect();\n          }\n        },\n        { immediate: true }\n      );\n      this.$on('hook:beforeDestroy', () => {\n        contentChangedObserver.disconnect();\n        resizeObserver.disconnect();\n      });\n\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Resets the scroll and updates the values of the scroll for the buttons to react.\n     *\n     * @internal\n     */\n    @Debounce(50, { leading: true })\n    restoreAndUpdateScroll(): void {\n      this.$refs.scrollContainer.scroll({ left: 0, behavior: 'smooth' });\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Updates the values of the scroll positions to show or hide the buttons depending on it.\n     *\n     * @internal\n     */\n    protected updateScrollPosition(): void {\n      if (this.$refs.scrollContainer !== undefined) {\n        const { scrollLeft, clientWidth, scrollWidth } = this.$refs.scrollContainer;\n        this.isScrollAtStart = !scrollLeft;\n        /* The 2 px extra is to fix some cases in some resolutions where the scroll + client size is\n         *  less than the scroll width even when the scroll is at the end */\n        this.isScrollAtEnd = scrollLeft + clientWidth + 2 >= scrollWidth;\n      }\n    }\n\n    /**\n     * Debounced version of the {@link SlidingPanel.updateScrollPosition}\n     * method.\n     *\n     * @internal\n     */\n    @Debounce(50, { leading: true })\n    debouncedUpdateScrollPosition(): void {\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Scrolls the wrapper element to the left.\n     *\n     * @internal\n     */\n    protected scrollLeft(): void {\n      this.scrollTo(-this.$refs.scrollContainer.clientWidth);\n    }\n\n    /**\n     * Scrolls the wrapper element to the right.\n     *\n     * @internal\n     */\n    protected scrollRight(): void {\n      this.scrollTo(this.$refs.scrollContainer.clientWidth);\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     * @internal\n     */\n    protected scrollTo(scrollValue: number): void {\n      this.$refs.scrollContainer.scrollBy({\n        left: scrollValue * this.scrollFactor,\n        behavior: 'smooth'\n      });\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-sliding-panel {\n    align-items: center;\n    display: flex;\n    flex-flow: row nowrap;\n    position: relative;\n\n    &__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\n    .x-sliding-panel-button-right {\n      right: 0;\n    }\n\n    &__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      // Chrome, Edge & Safari\n      &::-webkit-scrollbar {\n        display: none;\n      }\n\n      > * {\n        flex: 0 0 auto;\n      }\n    }\n\n    &:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-start) {\n      .x-sliding-panel-button-left {\n        opacity: 1;\n        pointer-events: all;\n      }\n    }\n\n    &:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-end) {\n      .x-sliding-panel-button-right {\n        opacity: 1;\n        pointer-events: all;\n      }\n    }\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":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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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"}