@empathyco/x-components 6.0.0-alpha.60 → 6.0.0-alpha.62

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        // TODO Replace with Empathy's logger\n\n        console.warn(\n          '[useScroll]',\n\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

@@ -16,9 +16,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         "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"
+          "data-test": "sliding-panel-left-button",
+          onClick: _cache[0] || (_cache[0] = (...args) => _ctx.scrollLeft && _ctx.scrollLeft(...args))
         },
         [
           renderSlot(_ctx.$slots, "sliding-panel-left-button", {}, () => [
@@ -32,11 +32,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         "div",
         {
           ref: "scrollContainerRef",
+          class: normalizeClass([_ctx.scrollContainerClass, "x-sliding-panel__scroll"]),
+          "data-test": "sliding-panel-scroll",
           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"
+          onAnimationend: _cache[3] || (_cache[3] = (...args) => _ctx.debouncedUpdateScroll && _ctx.debouncedUpdateScroll(...args))
         },
         [
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
@@ -48,9 +48,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         "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"
+          "data-test": "sliding-panel-right-button",
+          onClick: _cache[4] || (_cache[4] = (...args) => _ctx.scrollRight && _ctx.scrollRight(...args))
         },
         [
           renderSlot(_ctx.$slots, "sliding-panel-right-button", {}, () => [

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, PropType, ref, watch } from 'vue';\n  import { useDebounce } from '../composables/use-debounce';\n  import { VueCSSClasses } from '../utils/types';\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: { type: [String, Object, Array] as PropType<VueCSSClasses> },\n      scrollContainerClass: { type: [String, Object, Array] as PropType<VueCSSClasses> }\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","_createElementVNode","scrollContainerClass"],"mappings":";;;;;qBACE,IAiCM,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AAlCR,EAAA,OAAA,IAAA,CAAA,KAAA,CAAA,OAAA,IAAAA,SAAA,EAAA,EAAAC,kBAAA;AAAA,IACkC,KAAA;AAAA,IAAA;AAAA,MAAsC,GAAA,EAAA,CAAA;AAAA,MAAA,KAAA,EAAAC,cAAA,CAAA,CAAA,iBAAA,EAAA,IAAA,CAAA,UAAA,CAAA,CAAA;AAE5DC,MAAAA,WAAAA,EAAAA,eAAAA;AAAAA,KAAAA;;WAHZ,WAIY,IAAAH,SAAA,EAAA,EAAAC,kBAAA;AAAA,QAAA,QAAA;AAAA,QAAA;AAAA,UACN,GAAK,EAAA,CAAA;AAAA,UAEL,gBAAU,CAA2B,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,UAAA,KAAA,EAAAC,cAAA,CAAA,CAAA,8DAAA,EAAA,IAAA,CAAA,WAAA,CAAA,CAAA;UAGrC,WAA+C,EAAA,2BAAA;AAAA,SAAA;;;;AAVrD,WAAA,EAAA,IAAA,CAAA;AAAA,SAYI;AAAA,QAAA,CAAA;AAAA;AAAA,OAWM,IAVJE,mBAAI,MAAoB,EAAA,IAAA,CAAA;AAAA,MAAAC,kBAAA;AACjB,QAAA,KAAA;AAAA,QAAA;AAAA,UACN,GAAA,EAAA,oBAAA;AAAA,UACA,iBAAY,CAAE,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,qBAAA,IAAA,IAAA,CAAA,qBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,UACd,eAAA,EAjBP,MAiBcC,CAAAA,CAAAA,CAAAA,KAAAA,MAAAA,CAAAA,CAAAA,CAAAA,GAAAA,CAAAA,GAAAA,IAAAA,KACF,IAAyB,CAAA,qBAAA,IAAA,IAAA,CAAA,qBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,UAC/B,gBAAU,MAAsB,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,qBAAA,IAAA,IAAA,CAAA,qBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,UAAA,KAAA,EAAAJ,cAAA,CAAA,CAAA,IAAA,CAAA,oBAAA,EAAA,yBAAA,CAAA,CAAA;UAGhC,WAAQ,EAAA,sBAAA;AAAA,SAAA;;UAGFC,UAAW,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,EAAA,KAAA,CAAA,EAAA,IAAA,CAAA;AAAA,SAAA;;;AADnB,OAAA;AAAA,MAAA,IAAA,CAxBJ,WA0BY,IAAAH,SAAA,EAAA,EAAAC,kBAAA;AAAA,QAAA,QAAA;AAAA,QAAA;AAAA,UACN,GAAK,EAAA,CAAA;AAAA,UAEL,gBAAU,CAA4B,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,WAAA,IAAA,IAAA,CAAA,WAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,UAAA,KAAA,EAAAC,cAAA,CAAA,CAAA,+DAAA,EAAA,IAAA,CAAA,WAAA,CAAA,CAAA;UAGtC,WAAgD,EAAA,4BAAA;AAAA,SAAA;;;;AAhCtD,WAAA,EAAA,IAAA,CAAA;AAAA,SAAA;;;AAAA,OAAA,IAAAE,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,KAAA;;;;;;;;;"}
+{"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      class=\"x-sliding-panel__button x-button x-sliding-panel-button-left\"\n      :class=\"buttonClass\"\n      data-test=\"sliding-panel-left-button\"\n      @click=\"scrollLeft\"\n    >\n      <!-- @slot Left button content -->\n      <slot name=\"sliding-panel-left-button\">ᐸ</slot>\n    </button>\n    <div\n      ref=\"scrollContainerRef\"\n      :class=\"scrollContainerClass\"\n      class=\"x-sliding-panel__scroll\"\n      data-test=\"sliding-panel-scroll\"\n      @scroll=\"debouncedUpdateScroll\"\n      @transitionend=\"debouncedUpdateScroll\"\n      @animationend=\"debouncedUpdateScroll\"\n    >\n      <!-- @slot (Required) Sliding panel content -->\n      <slot />\n    </div>\n    <button\n      v-if=\"showButtons\"\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=\"scrollRight\"\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\">\nimport type { PropType } from 'vue'\nimport type { VueCSSClasses } from '../utils/types'\nimport { computed, defineComponent, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { 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 */\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    /** 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>\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","showButtons","_createCommentVNode","_createElementVNode","scrollContainerClass"],"mappings":";;;;;qBACE,IAiCM,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AAlCR,EAAA,OAAA,IAAA,CAAA,KAAA,CAAA,OAAA,IAAAA,SAAA,EAAA,EAAAC,kBAAA;AAAA,IACkC,KAAA;AAAA,IAAA;AAAA,MAAsC,GAAA,EAAA,CAAA;AAAA,MAAA,KAAA,EAAAC,cAAA,CAAA,CAAA,iBAAA,EAAA,IAAA,CAAA,UAAA,CAAA,CAAA;AAE5DC,MAAAA,WAAAA,EAAAA,eAAAA;AAAAA,KAAAA;;AAHZ,MAAA,IAAA,CAAA,WAAA,IAAAH,SAAA,EAAA,EAAAC,kBAAA;AAAA,QAIY,QAAA;AAAA,QAAA;AAAA,UAEN,GAAA,EAAA,CAAA;AAAA,UACC,KAAA,EAAKC,gFAAE,IAAU,CAAA,WAAA,CAAA,CAAA;AAAA,UAAA,WAAA,EAAA,2BAAA;UAGlB,OAA+C,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,SAAA;;;;AAVrD,WAAA,EAAA,IAAA,CAAA;AAAA,SAYI;AAAA,QAAA,CAAA;AAAA;AAAA,OAWM,IAVJE,mBAAI,MAAoB,EAAA,IAAA,CAAA;AAAA,MAAAC,kBAAA;AAb9B,QAAA,KAAA;AAAA,QAccC;AAAAA,UAER,GAAA,EAAA,oBAAA;AAAA,UACC,sBAAM,CAAE,IAAA,CAAA,oBAAA,EAAA,yBAAA,CAAA,CAAA;AAAA,UACR,WAAA,EAAA,sBAAA;AAAA,UACA,iBAAY,CAAE,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,qBAAA,IAAA,IAAA,CAAA,qBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,UAAA,eAAA,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,qBAAA,IAAA,IAAA,CAAA,qBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;UAGf,cAAQ,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,qBAAA,IAAA,IAAA,CAAA,qBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,SAAA;;UAGFH,UAAW,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,EAAA,KAAA,CAAA,EAAA,IAAA,CAAA;AAAA,SAAA;;;AADnB,OAAA;AAAA,MAxBJ,IAAA,CAAA,WAAA,IAAAH,SAAA,EAAA,EAAAC,kBAAA;AAAA,QA0BY,QAAA;AAAA,QAAA;AAAA,UAEN,GAAA,EAAA,CAAA;AAAA,UACC,KAAA,EAAKC,iFAAE,IAAW,CAAA,WAAA,CAAA,CAAA;AAAA,UAAA,WAAA,EAAA,4BAAA;UAGnB,OAAgD,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,WAAA,IAAA,IAAA,CAAA,WAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,SAAA;;;;AAhCtD,WAAA,EAAA,IAAA,CAAA;AAAA,SAAA;;;AAAA,OAAA,IAAAE,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,KAAA;;;;;;;;;"}

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

@@ -19,12 +19,12 @@ var _sfc_main = defineComponent({
          */
         scrollFactor: {
             type: Number,
-            default: 0.7
+            default: 0.7,
         },
         /** Would make the navigation buttons visible when they're needed or always hide them. */
         showButtons: {
             type: Boolean,
-            default: true
+            default: true,
         },
         /**
          * When true, whenever the DOM content in the sliding panel slot changes, it will reset
@@ -32,10 +32,10 @@ var _sfc_main = defineComponent({
          */
         resetOnContentChange: {
             type: Boolean,
-            default: true
+            default: true,
         },
         buttonClass: { type: [String, Object, Array] },
-        scrollContainerClass: { type: [String, Object, Array] }
+        scrollContainerClass: { type: [String, Object, Array] },
     },
     setup(props, { slots }) {
         /** Indicates if the scroll is at the start of the sliding panel. */
@@ -75,7 +75,7 @@ var _sfc_main = defineComponent({
         function scrollTo(scrollValue) {
             scrollContainerRef.value.scrollBy({
                 left: scrollValue * props.scrollFactor,
-                behavior: 'smooth'
+                behavior: 'smooth',
             });
         }
         /** Scrolls the wrapper element to the left. */
@@ -89,7 +89,7 @@ var _sfc_main = defineComponent({
         /** 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
+            'x-sliding-panel-at-end': isScrollAtEnd.value,
         }));
         let resizeObserver;
         let contentChangedObserver;
@@ -108,7 +108,7 @@ var _sfc_main = defineComponent({
                         subtree: true,
                         childList: true,
                         attributes: false,
-                        characterData: false
+                        characterData: false,
                     });
                 }
                 else {
@@ -127,9 +127,9 @@ var _sfc_main = defineComponent({
             scrollContainerRef,
             scrollLeft,
             scrollRight,
-            slots
+            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, PropType, ref, watch } from 'vue';\n  import { useDebounce } from '../composables/use-debounce';\n  import { VueCSSClasses } from '../utils/types';\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: { type: [String, Object, Array] as PropType<VueCSSClasses> },\n      scrollContainerClass: { type: [String, Object, Array] as PropType<VueCSSClasses> }\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    <button\n      v-if=\"showButtons\"\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=\"scrollLeft\"\n    >\n      <!-- @slot Left button content -->\n      <slot name=\"sliding-panel-left-button\">ᐸ</slot>\n    </button>\n    <div\n      ref=\"scrollContainerRef\"\n      :class=\"scrollContainerClass\"\n      class=\"x-sliding-panel__scroll\"\n      data-test=\"sliding-panel-scroll\"\n      @scroll=\"debouncedUpdateScroll\"\n      @transitionend=\"debouncedUpdateScroll\"\n      @animationend=\"debouncedUpdateScroll\"\n    >\n      <!-- @slot (Required) Sliding panel content -->\n      <slot />\n    </div>\n    <button\n      v-if=\"showButtons\"\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=\"scrollRight\"\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\">\nimport type { PropType } from 'vue'\nimport type { VueCSSClasses } from '../utils/types'\nimport { computed, defineComponent, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { 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 */\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    /** 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>\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":"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"}

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":["_resolveComponent"],"mappings":";;;;;AACE,EAAA,MAAA,qBAAA,GAAAA,gBAAA,CAA0C,YAA7B,CAAA,CAAA;;;;;;;"}

package/js/components/snippet-callbacks.vue2.js

@@ -39,14 +39,14 @@ var _sfc_main = defineComponent({
                             event: eventName,
                             callbackReturn,
                             payload: payload,
-                            metadata
+                            metadata,
                         });
                     };
                 })
                 : {};
         });
         return { eventListeners };
-    }
+    },
 });
 
 export { _sfc_main as default };

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

@@ -1 +1 @@
-{"version":3,"file":"snippet-callbacks.vue2.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":["GlobalXBus"],"mappings":";;;;;AAYE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,kBAAkB;IACxB,UAAU,EAAE,cAAEA,WAAS,EAAG;IAC1B,KAAK,GAAA;AACH,QAAA,MAAM,IAAG,GAAI,OAAO,EAAE,CAAA;AAEtB;;;;AAIE;AACF,QAAA,MAAM,aAAY,GAAI,MAAM,CAAgB,eAAe,CAAC,CAAA;AAE5D;;;;;;;;AAQE;AACF,QAAA,MAAM,iBAAiB,QAAQ,CAAkB,MAAM;AACrD,YAAA,MAAM,SAAQ,GAAI,aAAa,EAAE,SAAS,CAAA;AAE1C,YAAA,OAAO,SAAQ;kBACX,GAAG,CAAC,SAAS,EAAE,CAAC,SAAS,EAAE,QAAQ,KAAK;AACtC,oBAAA,OAAO,CAAC,OAAgB,EAAE,QAAsB,KAAK;wBACnD,MAAM,cAAa,GAAI,QAAQ,CAAC,OAAgB,EAAE,QAAQ,CAAC,CAAA;AAC3D,wBAAA,IAAI,CAAC,IAAI,CAAC,yBAAyB,EAAE;AACnC,4BAAA,KAAK,EAAE,SAAS;4BAChB,cAAc;AACd,4BAAA,OAAO,EAAE,OAAgB;4BACzB,QAAO;AACR,yBAAA,CAAC,CAAA;AACJ,qBAAC,CAAA;AACH,iBAAC,CAAA;kBACA,EAAsB,CAAA;AAC7B,SAAC,CAAC,CAAA;QAEF,OAAO,EAAE,gBAAgB,CAAA;KAC3B;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"snippet-callbacks.vue2.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":["GlobalXBus"],"mappings":";;;;;AAYA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,kBAAkB;IACxB,UAAU,EAAE,cAAEA,WAAS,EAAG;IAC1B,KAAK,GAAA;AACH,QAAA,MAAM,IAAG,GAAI,OAAO,EAAC,CAAA;AAErB;;;;AAIE;AACF,QAAA,MAAM,aAAY,GAAI,MAAM,CAAgB,eAAe,CAAA,CAAA;AAE3D;;;;;;;;AAQE;AACF,QAAA,MAAM,iBAAiB,QAAQ,CAAkB,MAAM;AACrD,YAAA,MAAM,SAAQ,GAAI,aAAa,EAAE,SAAQ,CAAA;AAEzC,YAAA,OAAO,SAAQ;kBACX,GAAG,CAAC,SAAS,EAAE,CAAC,SAAS,EAAE,QAAQ,KAAK;AACtC,oBAAA,OAAO,CAAC,OAAgB,EAAE,QAAsB,KAAK;wBACnD,MAAM,cAAa,GAAI,QAAQ,CAAC,OAAgB,EAAE,QAAQ,CAAA,CAAA;AAC1D,wBAAA,IAAI,CAAC,IAAI,CAAC,yBAAyB,EAAE;AACnC,4BAAA,KAAK,EAAE,SAAS;4BAChB,cAAc;AACd,4BAAA,OAAO,EAAE,OAAgB;4BACzB,QAAQ;AACT,yBAAA,CAAA,CAAA;AACH,qBAAA,CAAA;AACF,iBAAC,CAAA;kBACA,EAAqB,CAAA;AAC5B,SAAC,CAAA,CAAA;QAED,OAAO,EAAE,cAAe,EAAA,CAAA;KACzB;AACF,CAAA,CAAA;;;;"}

package/js/components/suggestions/base-suggestion.vue.js

@@ -12,8 +12,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "button",
     {
       ref: "el",
-      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.emitEvents && _ctx.emitEvents(...args)),
-      class: normalizeClass(_ctx.dynamicCSSClasses)
+      class: normalizeClass(_ctx.dynamicCSSClasses),
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.emitEvents && _ctx.emitEvents(...args))
     },
     [
       renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ query: _ctx.query, suggestion: _ctx.suggestion, filter: _ctx.filter })), () => [

package/js/components/suggestions/base-suggestion.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-suggestion.vue.js","sources":["../../../../src/components/suggestions/base-suggestion.vue"],"sourcesContent":["<template>\n  <button ref=\"el\" @click=\"emitEvents\" :class=\"dynamicCSSClasses\">\n    <!--\n      @slot Button content\n          @binding {Suggestion} suggestion - Suggestion data\n          @binding {String} query - The query that the suggestion belongs to\n          @binding {Filter} filter - Suggestion's filter\n      -->\n    <slot v-bind=\"{ query, suggestion, filter }\">\n      <Highlight class=\"x-suggestion__query\" :text=\"suggestion.query\" :highlight=\"query\" />\n      <span v-if=\"filter\" class=\"x-suggestion__filter\">{{ filter.label }}</span>\n    </slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { BooleanFilter, Suggestion } from '@empathyco/x-types';\n  import { forEach } from '@empathyco/x-utils';\n  import { computed, defineComponent, PropType, ref } from 'vue';\n  import { QueryFeature } from '../../types';\n  import { VueCSSClasses } from '../../utils/types';\n  import { XEventsTypes } from '../../wiring/events.types';\n  import Highlight from '../highlight.vue';\n  import { use$x } from '../../composables/index';\n\n  /**\n   * Renders a button with a default slot. It receives a query, which should be the query of the\n   * module using this component, a suggestion, the {@link XEvent} that will be emitted\n   * on click with a given feature.\n   *\n   * The default slot receives the suggestion and the matched query has props.\n   *\n   * @public\n   */\n  export default defineComponent({\n    components: { Highlight },\n    props: {\n      /**\n       * The normalized query of the module using this component.\n       *\n       * @public\n       */\n      query: {\n        type: String,\n        default: ''\n      },\n\n      /**\n       * The suggestion to render and use in the default slot.\n       *\n       * @public\n       */\n      suggestion: {\n        type: Object as PropType<Suggestion>,\n        required: true\n      },\n\n      /**\n       * The feature from which the events will be emitted.\n       *\n       * @public\n       */\n      //TODO: set to true when the suggestions components pass it.\n      feature: {\n        type: String as PropType<QueryFeature>\n      },\n\n      /**\n       * The {@link XEvent} that will be emitted when selecting a suggestion.\n       *\n       * @public\n       */\n      suggestionSelectedEvents: {\n        type: Object as PropType<Partial<XEventsTypes>>,\n        required: true\n      },\n\n      /**\n       * Indicates if the curated suggestion should be highlighted.\n       *\n       * @public\n       */\n      highlightCurated: {\n        type: Boolean\n      }\n    },\n\n    setup(props) {\n      const el = ref<HTMLElement | null>(null);\n\n      const $x = use$x();\n\n      /**\n       * Returns the suggestion filter object.\n       * It is a BooleanFilter because the label is needed.\n       * It returns only the first element because the facets and filters are being planned\n       * in the BaseSuggestions component.\n       *\n       * @returns The filter.\n       * @public\n       */\n      const filter = computed<BooleanFilter | undefined>(\n        () => props.suggestion.facets?.[0]?.filters[0] as BooleanFilter\n      );\n\n      /**\n       * The event handler that will be triggered when clicking on a suggestion.\n       *\n       * @remarks\n       * UserAcceptedAQuery: suggestion.query\n       * UserSelectedASuggestion: suggestion\n       * UserClickedAFilter: suggestion.facets[0].filters[0]\n       * Merges the events defined in the suggestionSelectedEvents prop and also emits them\n       *\n       * @returns The {@link XEvent} to emit.\n       * @public\n       */\n      const events = computed<Partial<XEventsTypes>>(() => {\n        const filterEvent: Partial<XEventsTypes> = filter.value\n          ? { UserClickedAFilter: filter.value }\n          : {};\n        return {\n          UserAcceptedAQuery: props.suggestion.query,\n          UserSelectedASuggestion: props.suggestion,\n          ...props.suggestionSelectedEvents,\n          ...filterEvent\n        };\n      });\n\n      /**\n       * Emits the events when the button is clicked.\n       *\n       * @public\n       */\n      const emitEvents = (): void => {\n        forEach(events.value, (event, payload): void => {\n          $x.emit(event, payload, {\n            target: el.value!,\n            feature: props.feature\n          });\n        });\n      };\n\n      /**\n       * Checks if the suggestion is curated and if it should be highlighted.\n       *\n       * @returns True if the suggestion is curated and should be highlighted.\n       *\n       * @internal\n       */\n      const shouldHighlightCurated = computed<boolean>(\n        () => props.highlightCurated && !!props.suggestion.isCurated\n      );\n\n      /**\n       * Generates css classes dynamically.\n       *\n       * @remarks\n       * 'x-suggestion--matching added when the query should be matched.\n       *\n       * @returns The {@link VueCSSClasses} classes.\n       * @public\n       */\n      const dynamicCSSClasses = computed<VueCSSClasses>(() => ({\n        'x-suggestion--is-curated': shouldHighlightCurated.value\n      }));\n\n      return {\n        el,\n        filter,\n        emitEvents,\n        dynamicCSSClasses\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the suggestion query\n  data.\n- [`UserSelectedASuggestion`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the suggestion data.\n- [`UserClickedAFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button if the suggestion includes a filter. The\n  event payload is the suggestion filter.\n- The component can emit more events on click using the `suggestionSelectedEvents` prop.\n\n## See it in action\n\nThis suggestion component expects a suggestion to render and pass to its default slot, a normalized\nquery to compare with the suggestion's query and highlight its matching parts, and events to emit\nwhen the suggestion is selected.\n\nIf the suggestion contains a filter, it is displayed next to the suggestion.\n\n```vue live\n<template>\n  <BaseSuggestion v-bind=\"{ query, suggestion }\" />\n</template>\n<script>\n  import { BaseSuggestion } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionDemo',\n    components: {\n      BaseSuggestion\n    },\n    data() {\n      return {\n        query: 'st',\n        suggestion: {\n          modelName: 'QuerySuggestion',\n          query: 'steak',\n          facet: {\n            namedModel: 'SimpleFacet',\n            id: 'category',\n            label: 'Category',\n            filters: [\n              {\n                id: 'category:groceries',\n                modelName: 'SimpleFilter',\n                facetId: 'category-facet',\n                label: 'Groceries',\n                selected: false,\n                totalResults: 10\n              }\n            ]\n          }\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Customise the content\n\nYou can make this component render any content you want by using the `default` slot.\n\n```vue live\n<template>\n  <BaseSuggestion v-bind=\"{ query, suggestion }\" #default=\"{ suggestion, query, filter }\">\n    <span>🔍</span>\n    <Highlight :text=\"suggestion.query\" :highlight=\"query\" />\n    <span v-if=\"filter\">{{ filter.label }}</span>\n  </BaseSuggestion>\n</template>\n<script>\n  import { BaseSuggestion } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionDemo',\n    components: {\n      BaseSuggestion\n    },\n    data() {\n      return {\n        query: 'st',\n        suggestion: {\n          modelName: 'QuerySuggestion',\n          query: 'steak'\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","_normalizeProps","_guardReactiveProps","_createVNode","suggestion","filter"],"mappings":";;;;MAU0B,UAAM,GAAA;AAAA,EAAA,GAAA,EAAA,CAAA;;;;+BAT9BA,gBAWS,CAAA,WAAA,CAAA,CAAA;SAXSC,SAAK,EAAA,EAAAC,kBAAA;AAAA,IAAA,QAAA;AAAA,IAAE;AAAA,MAAa,GAAK,EAAA,IAAA;AAAA,MAAA,OAAA,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAOzC,MAAA,KAAA,EAAAC,cAAA,CAGO,IAXX,CAAA,iBAAA,CAAA;AAAA,KAAA;;iBASuB,IAAqB,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,KAAA,EAAA,IAAA,CAAA,KAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,MAAA,EAAA,IAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA,MAAA;AAAA,QAAAC,WAAA,CAAQC,oBAAgB,EAAA;AAAA,UAAG,KAAA,EAAA,qBAAA;AAAA,UAAA,IAAA,EAAA,IAAA,CAAA,UAAA,CAAA,KAAA;UACrDC,SAAM,EAAA,IAAA,CAAA,KAAA;AAAA,SAAA,EAAA,IAAA,EAAA,CAAA,EAAlB,CAA0E,MAAA,EAAA,WAAA,CAAA,CAAA;AAAA,QAVhF,IAAA,CAAA,MAAA,IAAAP,SAAA,EAAA,EAAAC,kBAAA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-suggestion.vue.js","sources":["../../../../src/components/suggestions/base-suggestion.vue"],"sourcesContent":["<template>\n  <button ref=\"el\" :class=\"dynamicCSSClasses\" @click=\"emitEvents\">\n    <!--\n      @slot Button content\n          @binding {Suggestion} suggestion - Suggestion data\n          @binding {String} query - The query that the suggestion belongs to\n          @binding {Filter} filter - Suggestion's filter\n      -->\n    <slot v-bind=\"{ query, suggestion, filter }\">\n      <Highlight class=\"x-suggestion__query\" :text=\"suggestion.query\" :highlight=\"query\" />\n      <span v-if=\"filter\" class=\"x-suggestion__filter\">{{ filter.label }}</span>\n    </slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport type { BooleanFilter, Suggestion } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { QueryFeature } from '../../types'\nimport type { VueCSSClasses } from '../../utils/types'\nimport type { XEventsTypes } from '../../wiring/events.types'\nimport { forEach } from '@empathyco/x-utils'\nimport { computed, defineComponent, ref } from 'vue'\nimport { use$x } from '../../composables/index'\nimport Highlight from '../highlight.vue'\n\n/**\n * Renders a button with a default slot. It receives a query, which should be the query of the\n * module using this component, a suggestion, the {@link XEvent} that will be emitted\n * on click with a given feature.\n *\n * The default slot receives the suggestion and the matched query has props.\n *\n * @public\n */\nexport default defineComponent({\n  components: { Highlight },\n  props: {\n    /**\n     * The normalized query of the module using this component.\n     *\n     * @public\n     */\n    query: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The suggestion to render and use in the default slot.\n     *\n     * @public\n     */\n    suggestion: {\n      type: Object as PropType<Suggestion>,\n      required: true,\n    },\n\n    /**\n     * The feature from which the events will be emitted.\n     *\n     * @public\n     */\n    //TODO: set to true when the suggestions components pass it.\n    feature: {\n      type: String as PropType<QueryFeature>,\n    },\n\n    /**\n     * The {@link XEvent} that will be emitted when selecting a suggestion.\n     *\n     * @public\n     */\n    suggestionSelectedEvents: {\n      type: Object as PropType<Partial<XEventsTypes>>,\n      required: true,\n    },\n\n    /**\n     * Indicates if the curated suggestion should be highlighted.\n     *\n     * @public\n     */\n    highlightCurated: {\n      type: Boolean,\n    },\n  },\n\n  setup(props) {\n    const el = ref<HTMLElement | null>(null)\n\n    const $x = use$x()\n\n    /**\n     * Returns the suggestion filter object.\n     * It is a BooleanFilter because the label is needed.\n     * It returns only the first element because the facets and filters are being planned\n     * in the BaseSuggestions component.\n     *\n     * @returns The filter.\n     * @public\n     */\n    const filter = computed<BooleanFilter | undefined>(\n      () => props.suggestion.facets?.[0]?.filters[0] as BooleanFilter,\n    )\n\n    /**\n     * The event handler that will be triggered when clicking on a suggestion.\n     *\n     * @remarks\n     * UserAcceptedAQuery: suggestion.query\n     * UserSelectedASuggestion: suggestion\n     * UserClickedAFilter: suggestion.facets[0].filters[0]\n     * Merges the events defined in the suggestionSelectedEvents prop and also emits them\n     *\n     * @returns The {@link XEvent} to emit.\n     * @public\n     */\n    const events = computed<Partial<XEventsTypes>>(() => {\n      const filterEvent: Partial<XEventsTypes> = filter.value\n        ? { UserClickedAFilter: filter.value }\n        : {}\n      return {\n        UserAcceptedAQuery: props.suggestion.query,\n        UserSelectedASuggestion: props.suggestion,\n        ...props.suggestionSelectedEvents,\n        ...filterEvent,\n      }\n    })\n\n    /**\n     * Emits the events when the button is clicked.\n     *\n     * @public\n     */\n    const emitEvents = (): void => {\n      forEach(events.value, (event, payload): void => {\n        $x.emit(event, payload, {\n          target: el.value!,\n          feature: props.feature,\n        })\n      })\n    }\n\n    /**\n     * Checks if the suggestion is curated and if it should be highlighted.\n     *\n     * @returns True if the suggestion is curated and should be highlighted.\n     *\n     * @internal\n     */\n    const shouldHighlightCurated = computed<boolean>(\n      () => props.highlightCurated && !!props.suggestion.isCurated,\n    )\n\n    /**\n     * Generates css classes dynamically.\n     *\n     * @remarks\n     * 'x-suggestion--matching added when the query should be matched.\n     *\n     * @returns The {@link VueCSSClasses} classes.\n     * @public\n     */\n    const dynamicCSSClasses = computed<VueCSSClasses>(() => ({\n      'x-suggestion--is-curated': shouldHighlightCurated.value,\n    }))\n\n    return {\n      el,\n      filter,\n      emitEvents,\n      dynamicCSSClasses,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the suggestion query\n  data.\n- [`UserSelectedASuggestion`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the suggestion data.\n- [`UserClickedAFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button if the suggestion includes a filter. The\n  event payload is the suggestion filter.\n- The component can emit more events on click using the `suggestionSelectedEvents` prop.\n\n## See it in action\n\nThis suggestion component expects a suggestion to render and pass to its default slot, a normalized\nquery to compare with the suggestion's query and highlight its matching parts, and events to emit\nwhen the suggestion is selected.\n\nIf the suggestion contains a filter, it is displayed next to the suggestion.\n\n```vue live\n<template>\n  <BaseSuggestion v-bind=\"{ query, suggestion }\" />\n</template>\n<script>\nimport { BaseSuggestion } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSuggestionDemo',\n  components: {\n    BaseSuggestion,\n  },\n  data() {\n    return {\n      query: 'st',\n      suggestion: {\n        modelName: 'QuerySuggestion',\n        query: 'steak',\n        facet: {\n          namedModel: 'SimpleFacet',\n          id: 'category',\n          label: 'Category',\n          filters: [\n            {\n              id: 'category:groceries',\n              modelName: 'SimpleFilter',\n              facetId: 'category-facet',\n              label: 'Groceries',\n              selected: false,\n              totalResults: 10,\n            },\n          ],\n        },\n      },\n    }\n  },\n}\n</script>\n```\n\n### Customise the content\n\nYou can make this component render any content you want by using the `default` slot.\n\n```vue live\n<template>\n  <BaseSuggestion v-bind=\"{ query, suggestion }\" #default=\"{ suggestion, query, filter }\">\n    <span>🔍</span>\n    <Highlight :text=\"suggestion.query\" :highlight=\"query\" />\n    <span v-if=\"filter\">{{ filter.label }}</span>\n  </BaseSuggestion>\n</template>\n<script>\nimport { BaseSuggestion } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSuggestionDemo',\n  components: {\n    BaseSuggestion,\n  },\n  data() {\n    return {\n      query: 'st',\n      suggestion: {\n        modelName: 'QuerySuggestion',\n        query: 'steak',\n      },\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","dynamicCSSClasses","_normalizeClass","query","_normalizeProps","_guardReactiveProps","_createVNode","suggestion","filter"],"mappings":";;;;MAU0B,UAAM,GAAA;AAAA,EAAA,GAAA,EAAA,CAAA;;;;+BAT9BA,gBAWS,CAAA,WAAA,CAAA,CAAA;SAXcC,SADzB,EAAA,EAAAC,kBAAA;AAAA,IAC2BC,QAAAA;AAAAA,IAAiB;AAAA,MAAG,GAAA,EAAA,IAAA;AAAA,MAAA,KAAA,EAAAC,cAAA,CAAA,IAAA,CAAA,iBAAA,CAAA;MAO3C,OAGO,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAXX,4CAQoBC,GAAK,IAAA,CAAA,CAAA;AAAA,KAAA;;iBACF,IAAqB,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,KAAA,EAAA,IAAA,CAAA,KAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,MAAA,EAAA,IAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA,MAAA;AAAA,QAAAC,WAAA,CAAQC,oBAAgB,EAAA;AAAA,UAAG,KAAA,EAAA,qBAAA;AAAA,UAAA,IAAA,EAAA,IAAA,CAAA,UAAA,CAAA,KAAA;UACrDC,SAAM,EAAA,IAAA,CAAA,KAAA;AAAA,SAAA,EAAA,IAAA,EAAA,CAAA,EAAlB,CAA0E,MAAA,EAAA,WAAA,CAAA,CAAA;AAAA,QAVhF,IAAA,CAAA,MAAA,IAAAT,SAAA,EAAA,EAAAC,kBAAA;;;;;;;;;;;;;;;;;"}

package/js/components/suggestions/base-suggestion.vue2.js

@@ -1,6 +1,5 @@
 import { forEach } from '@empathyco/x-utils';
 import { defineComponent, ref, computed } from 'vue';
-import Highlight from '../highlight.vue.js';
 import '../../composables/create-use-device.js';
 import { use$x } from '../../composables/use-_x.js';
 import '@vue/devtools-api';
@@ -12,6 +11,7 @@ import '../../plugins/x-bus.js';
 import '../../plugins/x-plugin.js';
 import 'vuex';
 import '@vueuse/core';
+import Highlight from '../highlight.vue.js';
 
 /**
  * Renders a button with a default slot. It receives a query, which should be the query of the
@@ -32,7 +32,7 @@ var _sfc_main = defineComponent({
          */
         query: {
             type: String,
-            default: ''
+            default: '',
         },
         /**
          * The suggestion to render and use in the default slot.
@@ -41,7 +41,7 @@ var _sfc_main = defineComponent({
          */
         suggestion: {
             type: Object,
-            required: true
+            required: true,
         },
         /**
          * The feature from which the events will be emitted.
@@ -50,7 +50,7 @@ var _sfc_main = defineComponent({
          */
         //TODO: set to true when the suggestions components pass it.
         feature: {
-            type: String
+            type: String,
         },
         /**
          * The {@link XEvent} that will be emitted when selecting a suggestion.
@@ -59,7 +59,7 @@ var _sfc_main = defineComponent({
          */
         suggestionSelectedEvents: {
             type: Object,
-            required: true
+            required: true,
         },
         /**
          * Indicates if the curated suggestion should be highlighted.
@@ -67,8 +67,8 @@ var _sfc_main = defineComponent({
          * @public
          */
         highlightCurated: {
-            type: Boolean
-        }
+            type: Boolean,
+        },
     },
     setup(props) {
         const el = ref(null);
@@ -103,7 +103,7 @@ var _sfc_main = defineComponent({
                 UserAcceptedAQuery: props.suggestion.query,
                 UserSelectedASuggestion: props.suggestion,
                 ...props.suggestionSelectedEvents,
-                ...filterEvent
+                ...filterEvent,
             };
         });
         /**
@@ -115,7 +115,7 @@ var _sfc_main = defineComponent({
             forEach(events.value, (event, payload) => {
                 $x.emit(event, payload, {
                     target: el.value,
-                    feature: props.feature
+                    feature: props.feature,
                 });
             });
         };
@@ -137,15 +137,15 @@ var _sfc_main = defineComponent({
          * @public
          */
         const dynamicCSSClasses = computed(() => ({
-            'x-suggestion--is-curated': shouldHighlightCurated.value
+            'x-suggestion--is-curated': shouldHighlightCurated.value,
         }));
         return {
             el,
             filter,
             emitEvents,
-            dynamicCSSClasses
+            dynamicCSSClasses,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };