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

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

@@ -1,7 +1,5 @@
-import { __decorate } from 'tslib';
-import { Mixins, Prop, Component } from 'vue-property-decorator';
-import { Debounce } from './decorators/debounce.decorators.js';
-import { dynamicPropsMixin } from './dynamic-props.mixin.js';
+import { defineComponent, ref, computed, onMounted, watch, onBeforeUnmount } from 'vue';
+import { useDebounce } from '../composables/use-debounce.js';
 
 /**
  * This component allows for any other component or element inside it to be horizontally
@@ -13,148 +11,126 @@ import { dynamicPropsMixin } from './dynamic-props.mixin.js';
  *
  * @public
  */
-let SlidingPanel = class SlidingPanel extends Mixins(dynamicPropsMixin(['buttonClass', 'scrollContainerClass'])) {
-    constructor() {
-        super(...arguments);
+var _sfc_main = defineComponent({
+    name: 'SlidingPanel',
+    props: {
         /**
-         * Indicates if the scroll is at the start of the sliding panel.
-         *
-         * @internal
+         * Scroll factor that will dictate how much the scroll moves when pressing a navigation button.
+         */
+        scrollFactor: {
+            type: Number,
+            default: 0.7
+        },
+        /** Would make the navigation buttons visible when they're needed or always hide them. */
+        showButtons: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * When true, whenever the DOM content in the sliding panel slot changes, it will reset
+         * the scroll position to 0.
          */
-        this.isScrollAtStart = true;
+        resetOnContentChange: {
+            type: Boolean,
+            default: true
+        },
+        buttonClass: String,
+        scrollContainerClass: String
+    },
+    setup(props, { slots }) {
+        /** Indicates if the scroll is at the start of the sliding panel. */
+        const isScrollAtStart = ref(true);
+        /** Indicates if the scroll is at the end of the sliding panel. */
+        const isScrollAtEnd = ref(true);
+        const scrollContainerRef = ref();
         /**
-         * Indicates if the scroll is at the end of the sliding panel.
+         * Updates the values of the scroll positions to show or hide the buttons depending on it.
          *
-         * @internal
+         * @remarks The 2px extra is to fix some cases in some resolutions where the scroll + client
+         * size is less than the scroll width even when the scroll is at the end.
          */
-        this.isScrollAtEnd = true;
-    }
-    /**
-     * CSS classes to apply based on the scroll position.
-     *
-     * @returns The CSS classes to apply.
-     *
-     * @internal
-     */
-    get cssClasses() {
-        return {
-            'x-sliding-panel-at-start': this.isScrollAtStart,
-            'x-sliding-panel-at-end': this.isScrollAtEnd
-        };
-    }
-    /**
-     * Initialises browser platform code:
-     * - Creates a mutation observer to detect content changes and reset scroll position.
-     * - Stores initial size and scroll position values.
-     *
-     * @internal
-     */
-    mounted() {
-        // eslint-disable-next-line @typescript-eslint/unbound-method
-        const resizeObserver = new ResizeObserver(this.debouncedUpdateScrollPosition);
-        resizeObserver.observe(this.$el);
-        // eslint-disable-next-line @typescript-eslint/unbound-method
-        const contentChangedObserver = new MutationObserver(this.restoreAndUpdateScroll);
-        this.$watch(() => this.resetOnContentChange, shouldReset => {
-            if (shouldReset) {
-                contentChangedObserver.observe(this.$refs.scrollContainer, {
-                    attributes: false,
-                    childList: true,
-                    subtree: true,
-                    characterData: false
-                });
-            }
-            else {
-                contentChangedObserver.disconnect();
+        function updateScrollPosition() {
+            if (scrollContainerRef.value) {
+                const { scrollLeft, clientWidth, scrollWidth } = scrollContainerRef.value;
+                isScrollAtStart.value = !scrollLeft;
+                isScrollAtEnd.value = scrollLeft + clientWidth + 2 >= scrollWidth;
             }
-        }, { immediate: true });
-        this.$on('hook:beforeDestroy', () => {
+        }
+        /**
+         * Debounced version of the {@link SlidingPanel.updateScrollPosition} method.
+         */
+        const debouncedUpdateScroll = useDebounce(updateScrollPosition, 50, { leading: true });
+        /**
+         * Resets the scroll and updates the values of the scroll for the buttons to react.
+         */
+        const debouncedRestoreAndUpdateScroll = useDebounce(() => {
+            scrollContainerRef.value.scroll({ left: 0, behavior: 'smooth' });
+            updateScrollPosition();
+        }, 50, { leading: true });
+        /**
+         * Scrolls the wrapper element towards the provided scroll value.
+         *
+         * @param scrollValue - The value the scroll will go towards.
+         */
+        function scrollTo(scrollValue) {
+            scrollContainerRef.value.scrollBy({
+                left: scrollValue * props.scrollFactor,
+                behavior: 'smooth'
+            });
+        }
+        /** Scrolls the wrapper element to the left. */
+        function scrollLeft() {
+            scrollTo(-scrollContainerRef.value.clientWidth);
+        }
+        /** Scrolls the wrapper element to the right. */
+        function scrollRight() {
+            scrollTo(scrollContainerRef.value.clientWidth);
+        }
+        /** CSS classes to apply based on the scroll position. */
+        const cssClasses = computed(() => ({
+            'x-sliding-panel-at-start': isScrollAtStart.value,
+            'x-sliding-panel-at-end': isScrollAtEnd.value
+        }));
+        let resizeObserver;
+        let contentChangedObserver;
+        /**
+         * Initialises browser platform code:
+         * - Creates a mutation observer to detect content changes and reset scroll position.
+         * - Stores initial size and scroll position values.
+         */
+        onMounted(() => {
+            resizeObserver = new ResizeObserver(debouncedUpdateScroll);
+            resizeObserver.observe(scrollContainerRef.value);
+            contentChangedObserver = new MutationObserver(debouncedRestoreAndUpdateScroll);
+            watch(() => props.resetOnContentChange, shouldReset => {
+                if (shouldReset) {
+                    contentChangedObserver.observe(scrollContainerRef.value, {
+                        subtree: true,
+                        childList: true,
+                        attributes: false,
+                        characterData: false
+                    });
+                }
+                else {
+                    contentChangedObserver.disconnect();
+                }
+            }, { immediate: true });
+            updateScrollPosition();
+        });
+        onBeforeUnmount(() => {
             contentChangedObserver.disconnect();
             resizeObserver.disconnect();
         });
-        this.updateScrollPosition();
-    }
-    /**
-     * Resets the scroll and updates the values of the scroll for the buttons to react.
-     *
-     * @internal
-     */
-    restoreAndUpdateScroll() {
-        this.$refs.scrollContainer.scroll({ left: 0, behavior: 'smooth' });
-        this.updateScrollPosition();
-    }
-    /**
-     * Updates the values of the scroll positions to show or hide the buttons depending on it.
-     *
-     * @internal
-     */
-    updateScrollPosition() {
-        if (this.$refs.scrollContainer !== undefined) {
-            const { scrollLeft, clientWidth, scrollWidth } = this.$refs.scrollContainer;
-            this.isScrollAtStart = !scrollLeft;
-            /* The 2 px extra is to fix some cases in some resolutions where the scroll + client size is
-             *  less than the scroll width even when the scroll is at the end */
-            this.isScrollAtEnd = scrollLeft + clientWidth + 2 >= scrollWidth;
-        }
-    }
-    /**
-     * Debounced version of the {@link SlidingPanel.updateScrollPosition}
-     * method.
-     *
-     * @internal
-     */
-    debouncedUpdateScrollPosition() {
-        this.updateScrollPosition();
-    }
-    /**
-     * Scrolls the wrapper element to the left.
-     *
-     * @internal
-     */
-    scrollLeft() {
-        this.scrollTo(-this.$refs.scrollContainer.clientWidth);
-    }
-    /**
-     * Scrolls the wrapper element to the right.
-     *
-     * @internal
-     */
-    scrollRight() {
-        this.scrollTo(this.$refs.scrollContainer.clientWidth);
-    }
-    /**
-     * Scrolls the wrapper element towards the provided scroll value.
-     *
-     * @param scrollValue - The value the scroll will go towards.
-     *
-     * @internal
-     */
-    scrollTo(scrollValue) {
-        this.$refs.scrollContainer.scrollBy({
-            left: scrollValue * this.scrollFactor,
-            behavior: 'smooth'
-        });
+        return {
+            cssClasses,
+            debouncedUpdateScroll,
+            scrollContainerRef,
+            scrollLeft,
+            scrollRight,
+            slots
+        };
     }
-};
-__decorate([
-    Prop({ default: 0.7 })
-], SlidingPanel.prototype, "scrollFactor", void 0);
-__decorate([
-    Prop({ default: true })
-], SlidingPanel.prototype, "showButtons", void 0);
-__decorate([
-    Prop({ default: true })
-], SlidingPanel.prototype, "resetOnContentChange", void 0);
-__decorate([
-    Debounce(50, { leading: true })
-], SlidingPanel.prototype, "restoreAndUpdateScroll", null);
-__decorate([
-    Debounce(50, { leading: true })
-], SlidingPanel.prototype, "debouncedUpdateScrollPosition", null);
-SlidingPanel = __decorate([
-    Component
-], SlidingPanel);
-var script = SlidingPanel;
+});
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=sliding-panel.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sliding-panel.vue2.js","sources":["../../../src/components/sliding-panel.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  import { Component, Mixins, Prop } from 'vue-property-decorator';\n  import { VueCSSClasses } from '../utils/types';\n  import { Debounce } from './decorators/debounce.decorators';\n  import { dynamicPropsMixin } from './dynamic-props.mixin';\n\n  /**\n   * This component allows for any other component or element inside it to be horizontally\n   * navigable. It also implements customizable buttons as well as other minor customizations to its\n   * general behavior.\n   *\n   * Additionally, this component exposes the following props to modify the classes of the\n   * elements: `buttonClass`.\n   *\n   * @public\n   */\n  @Component\n  export default class SlidingPanel extends Mixins(\n    dynamicPropsMixin(['buttonClass', 'scrollContainerClass'])\n  ) {\n    /**\n     * Scroll factor that will dictate how much the scroll moves when pressing a navigation button.\n     *\n     * @public\n     */\n    @Prop({ default: 0.7 })\n    public scrollFactor!: number;\n\n    /**\n     * Would make the navigation buttons visible when they're needed or always hide them.\n     *\n     * @public\n     */\n    @Prop({ default: true })\n    public showButtons!: boolean;\n\n    /**\n     * When true, whenever the DOM content in the sliding panel slot changes, it will reset\n     * the scroll position to 0.\n     *\n     * @public\n     */\n    @Prop({ default: true })\n    public resetOnContentChange!: boolean;\n\n    /**\n     * Indicates if the scroll is at the start of the sliding panel.\n     *\n     * @internal\n     */\n    protected isScrollAtStart = true;\n\n    /**\n     * Indicates if the scroll is at the end of the sliding panel.\n     *\n     * @internal\n     */\n    protected isScrollAtEnd = true;\n\n    /**\n     * HTMLElement referencing the scroll of the component.\n     *\n     * @internal\n     */\n    public $refs!: {\n      scrollContainer: HTMLElement;\n    };\n\n    /**\n     * CSS classes to apply based on the scroll position.\n     *\n     * @returns The CSS classes to apply.\n     *\n     * @internal\n     */\n    protected get cssClasses(): VueCSSClasses {\n      return {\n        'x-sliding-panel-at-start': this.isScrollAtStart,\n        'x-sliding-panel-at-end': this.isScrollAtEnd\n      };\n    }\n\n    /**\n     * Initialises browser platform code:\n     * - Creates a mutation observer to detect content changes and reset scroll position.\n     * - Stores initial size and scroll position values.\n     *\n     * @internal\n     */\n    mounted(): void {\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      const resizeObserver = new ResizeObserver(this.debouncedUpdateScrollPosition);\n      resizeObserver.observe(this.$el);\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      const contentChangedObserver = new MutationObserver(this.restoreAndUpdateScroll);\n      this.$watch(\n        () => this.resetOnContentChange,\n        shouldReset => {\n          if (shouldReset) {\n            contentChangedObserver.observe(this.$refs.scrollContainer, {\n              attributes: false,\n              childList: true,\n              subtree: true,\n              characterData: false\n            });\n          } else {\n            contentChangedObserver.disconnect();\n          }\n        },\n        { immediate: true }\n      );\n      this.$on('hook:beforeDestroy', () => {\n        contentChangedObserver.disconnect();\n        resizeObserver.disconnect();\n      });\n\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Resets the scroll and updates the values of the scroll for the buttons to react.\n     *\n     * @internal\n     */\n    @Debounce(50, { leading: true })\n    restoreAndUpdateScroll(): void {\n      this.$refs.scrollContainer.scroll({ left: 0, behavior: 'smooth' });\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Updates the values of the scroll positions to show or hide the buttons depending on it.\n     *\n     * @internal\n     */\n    protected updateScrollPosition(): void {\n      if (this.$refs.scrollContainer !== undefined) {\n        const { scrollLeft, clientWidth, scrollWidth } = this.$refs.scrollContainer;\n        this.isScrollAtStart = !scrollLeft;\n        /* The 2 px extra is to fix some cases in some resolutions where the scroll + client size is\n         *  less than the scroll width even when the scroll is at the end */\n        this.isScrollAtEnd = scrollLeft + clientWidth + 2 >= scrollWidth;\n      }\n    }\n\n    /**\n     * Debounced version of the {@link SlidingPanel.updateScrollPosition}\n     * method.\n     *\n     * @internal\n     */\n    @Debounce(50, { leading: true })\n    debouncedUpdateScrollPosition(): void {\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Scrolls the wrapper element to the left.\n     *\n     * @internal\n     */\n    protected scrollLeft(): void {\n      this.scrollTo(-this.$refs.scrollContainer.clientWidth);\n    }\n\n    /**\n     * Scrolls the wrapper element to the right.\n     *\n     * @internal\n     */\n    protected scrollRight(): void {\n      this.scrollTo(this.$refs.scrollContainer.clientWidth);\n    }\n\n    /**\n     * Scrolls the wrapper element towards the provided scroll value.\n     *\n     * @param scrollValue - The value the scroll will go towards.\n     *\n     * @internal\n     */\n    protected scrollTo(scrollValue: number): void {\n      this.$refs.scrollContainer.scrollBy({\n        left: scrollValue * this.scrollFactor,\n        behavior: 'smooth'\n      });\n    }\n  }\n"],"names":[],"mappings":";;;;;AA2CE;;;;;;;;;AASG;AAEY,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,MAAM,CAC9C,iBAAiB,CAAC,CAAC,aAAa,EAAE,sBAAsB,CAAC,CAAC,CAC3D,CAAA;AAFc,IAAA,WAAA,GAAA;;AA4Bb;;;;AAIG;QACO,IAAe,CAAA,eAAA,GAAG,IAAI,CAAC;AAEjC;;;;AAIG;QACO,IAAa,CAAA,aAAA,GAAG,IAAI,CAAC;KAkIhC;AAvHC;;;;;;AAMG;AACH,IAAA,IAAc,UAAU,GAAA;QACtB,OAAO;YACL,0BAA0B,EAAE,IAAI,CAAC,eAAe;YAChD,wBAAwB,EAAE,IAAI,CAAC,aAAa;SAC7C,CAAC;KACH;AAED;;;;;;AAMG;IACH,OAAO,GAAA;;QAEL,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC;AAC9E,QAAA,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;;QAEjC,MAAM,sBAAsB,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;AACjF,QAAA,IAAI,CAAC,MAAM,CACT,MAAM,IAAI,CAAC,oBAAoB,EAC/B,WAAW,IAAG;AACZ,YAAA,IAAI,WAAW,EAAE;gBACf,sBAAsB,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE;AACzD,oBAAA,UAAU,EAAE,KAAK;AACjB,oBAAA,SAAS,EAAE,IAAI;AACf,oBAAA,OAAO,EAAE,IAAI;AACb,oBAAA,aAAa,EAAE,KAAK;AACrB,iBAAA,CAAC,CAAC;AACJ,aAAA;AAAM,iBAAA;gBACL,sBAAsB,CAAC,UAAU,EAAE,CAAC;AACrC,aAAA;AACH,SAAC,EACD,EAAE,SAAS,EAAE,IAAI,EAAE,CACpB,CAAC;AACF,QAAA,IAAI,CAAC,GAAG,CAAC,oBAAoB,EAAE,MAAK;YAClC,sBAAsB,CAAC,UAAU,EAAE,CAAC;YACpC,cAAc,CAAC,UAAU,EAAE,CAAC;AAC9B,SAAC,CAAC,CAAC;QAEH,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B;AAED;;;;AAIG;IAEH,sBAAsB,GAAA;AACpB,QAAA,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;QACnE,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B;AAED;;;;AAIG;IACO,oBAAoB,GAAA;AAC5B,QAAA,IAAI,IAAI,CAAC,KAAK,CAAC,eAAe,KAAK,SAAS,EAAE;AAC5C,YAAA,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC;AAC5E,YAAA,IAAI,CAAC,eAAe,GAAG,CAAC,UAAU,CAAC;AACnC;AACoE;YACpE,IAAI,CAAC,aAAa,GAAG,UAAU,GAAG,WAAW,GAAG,CAAC,IAAI,WAAW,CAAC;AAClE,SAAA;KACF;AAED;;;;;AAKG;IAEH,6BAA6B,GAAA;QAC3B,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B;AAED;;;;AAIG;IACO,UAAU,GAAA;AAClB,QAAA,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;KACxD;AAED;;;;AAIG;IACO,WAAW,GAAA;QACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;KACvD;AAED;;;;;;AAMG;AACO,IAAA,QAAQ,CAAC,WAAmB,EAAA;AACpC,QAAA,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,QAAQ,CAAC;AAClC,YAAA,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC,YAAY;AACrC,YAAA,QAAQ,EAAE,QAAQ;AACnB,SAAA,CAAC,CAAC;KACJ;CACF,CAAA;AAjKC,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC;AACM,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQ7B,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACK,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAS7B,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACc,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,sBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAkFtC,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAI/B,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,wBAAA,EAAA,IAAA,CAAA,CAAA;AAwBD,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAG/B,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,+BAAA,EAAA,IAAA,CAAA,CAAA;AAzIkB,YAAY,GAAA,UAAA,CAAA;IADhC,SAAS;AACW,CAAA,EAAA,YAAY,CA0KhC,CAAA;aA1KoB,YAAY;;;;"}
+{"version":3,"file":"sliding-panel.vue2.js","sources":["../../../src/components/sliding-panel.vue"],"sourcesContent":["<template>\n  <div v-if=\"slots.default\" class=\"x-sliding-panel\" :class=\"cssClasses\" data-test=\"sliding-panel\">\n    <button\n      v-if=\"showButtons\"\n      @click=\"scrollLeft\"\n      class=\"x-sliding-panel__button x-button x-sliding-panel-button-left\"\n      :class=\"buttonClass\"\n      data-test=\"sliding-panel-left-button\"\n    >\n      <!-- @slot Left button content -->\n      <slot name=\"sliding-panel-left-button\">ᐸ</slot>\n    </button>\n    <div\n      ref=\"scrollContainerRef\"\n      @scroll=\"debouncedUpdateScroll\"\n      @transitionend=\"debouncedUpdateScroll\"\n      @animationend=\"debouncedUpdateScroll\"\n      :class=\"scrollContainerClass\"\n      class=\"x-sliding-panel__scroll\"\n      data-test=\"sliding-panel-scroll\"\n    >\n      <!-- @slot (Required) Sliding panel content -->\n      <slot />\n    </div>\n    <button\n      v-if=\"showButtons\"\n      @click=\"scrollRight\"\n      class=\"x-sliding-panel__button x-button x-sliding-panel-button-right\"\n      :class=\"buttonClass\"\n      data-test=\"sliding-panel-right-button\"\n    >\n      <!-- @slot Right button content -->\n      <slot name=\"sliding-panel-right-button\">ᐳ</slot>\n    </button>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, onBeforeUnmount, onMounted, ref, watch } from 'vue';\n  import { useDebounce } from '../composables/use-debounce';\n\n  /**\n   * This component allows for any other component or element inside it to be horizontally\n   * navigable. It also implements customizable buttons as well as other minor customizations to its\n   * general behavior.\n   *\n   * Additionally, this component exposes the following props to modify the classes of the\n   * elements: `buttonClass`.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'SlidingPanel',\n    props: {\n      /**\n       * Scroll factor that will dictate how much the scroll moves when pressing a navigation button.\n       */\n      scrollFactor: {\n        type: Number,\n        default: 0.7\n      },\n      /** Would make the navigation buttons visible when they're needed or always hide them. */\n      showButtons: {\n        type: Boolean,\n        default: true\n      },\n      /**\n       * When true, whenever the DOM content in the sliding panel slot changes, it will reset\n       * the scroll position to 0.\n       */\n      resetOnContentChange: {\n        type: Boolean,\n        default: true\n      },\n      buttonClass: String,\n      scrollContainerClass: String\n    },\n    setup(props, { slots }) {\n      /** Indicates if the scroll is at the start of the sliding panel. */\n      const isScrollAtStart = ref(true);\n      /** Indicates if the scroll is at the end of the sliding panel. */\n      const isScrollAtEnd = ref(true);\n      const scrollContainerRef = ref<HTMLDivElement>();\n\n      /**\n       * Updates the values of the scroll positions to show or hide the buttons depending on it.\n       *\n       * @remarks The 2px extra is to fix some cases in some resolutions where the scroll + client\n       * size is less than the scroll width even when the scroll is at the end.\n       */\n      function updateScrollPosition() {\n        if (scrollContainerRef.value) {\n          const { scrollLeft, clientWidth, scrollWidth } = scrollContainerRef.value;\n          isScrollAtStart.value = !scrollLeft;\n          isScrollAtEnd.value = scrollLeft + clientWidth + 2 >= scrollWidth;\n        }\n      }\n\n      /**\n       * Debounced version of the {@link SlidingPanel.updateScrollPosition} method.\n       */\n      const debouncedUpdateScroll = useDebounce(updateScrollPosition, 50, { leading: true });\n\n      /**\n       * Resets the scroll and updates the values of the scroll for the buttons to react.\n       */\n      const debouncedRestoreAndUpdateScroll = useDebounce(\n        () => {\n          scrollContainerRef.value!.scroll({ left: 0, behavior: 'smooth' });\n          updateScrollPosition();\n        },\n        50,\n        { leading: true }\n      );\n\n      /**\n       * Scrolls the wrapper element towards the provided scroll value.\n       *\n       * @param scrollValue - The value the scroll will go towards.\n       */\n      function scrollTo(scrollValue: number) {\n        scrollContainerRef.value!.scrollBy({\n          left: scrollValue * props.scrollFactor,\n          behavior: 'smooth'\n        });\n      }\n\n      /** Scrolls the wrapper element to the left. */\n      function scrollLeft() {\n        scrollTo(-scrollContainerRef.value!.clientWidth);\n      }\n\n      /** Scrolls the wrapper element to the right. */\n      function scrollRight() {\n        scrollTo(scrollContainerRef.value!.clientWidth);\n      }\n\n      /** CSS classes to apply based on the scroll position. */\n      const cssClasses = computed(() => ({\n        'x-sliding-panel-at-start': isScrollAtStart.value,\n        'x-sliding-panel-at-end': isScrollAtEnd.value\n      }));\n\n      let resizeObserver: ResizeObserver;\n      let contentChangedObserver: MutationObserver;\n\n      /**\n       * Initialises browser platform code:\n       * - Creates a mutation observer to detect content changes and reset scroll position.\n       * - Stores initial size and scroll position values.\n       */\n      onMounted(() => {\n        resizeObserver = new ResizeObserver(debouncedUpdateScroll);\n        resizeObserver.observe(scrollContainerRef.value!);\n        contentChangedObserver = new MutationObserver(debouncedRestoreAndUpdateScroll);\n\n        watch(\n          () => props.resetOnContentChange,\n          shouldReset => {\n            if (shouldReset) {\n              contentChangedObserver.observe(scrollContainerRef.value!, {\n                subtree: true,\n                childList: true,\n                attributes: false,\n                characterData: false\n              });\n            } else {\n              contentChangedObserver.disconnect();\n            }\n          },\n          { immediate: true }\n        );\n\n        updateScrollPosition();\n      });\n\n      onBeforeUnmount(() => {\n        contentChangedObserver.disconnect();\n        resizeObserver.disconnect();\n      });\n\n      return {\n        cssClasses,\n        debouncedUpdateScroll,\n        scrollContainerRef,\n        scrollLeft,\n        scrollRight,\n        slots\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-sliding-panel {\n    align-items: center;\n    display: flex;\n    flex-flow: row nowrap;\n    position: relative;\n  }\n\n  .x-sliding-panel__button {\n    opacity: 0;\n    pointer-events: none;\n    position: absolute;\n    transition: all ease-out 0.2s;\n    z-index: 2; /* To overlay the design system gradient with z-index:1 */\n  }\n  .x-sliding-panel-button-left {\n    left: 0;\n  }\n  .x-sliding-panel-button-right {\n    right: 0;\n  }\n\n  .x-sliding-panel__scroll {\n    display: flex;\n    flex: 100%;\n    flex-flow: row nowrap;\n    overflow-x: auto;\n    overflow-y: hidden;\n    scrollbar-width: none; /* Firefox */\n    -ms-overflow-style: none; /* IE */\n  }\n\n  /* Chrome, Edge & Safari */\n  .x-sliding-panel__scroll::-webkit-scrollbar {\n    display: none;\n  }\n\n  .x-sliding-panel__scroll > * {\n    flex: 0 0 auto;\n  }\n\n  /* prettier-ignore */\n  .x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-start) .x-sliding-panel-button-left {\n    opacity: 1;\n    pointer-events: all;\n  }\n\n  /* prettier-ignore */\n  .x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right {\n    opacity: 1;\n    pointer-events: all;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nSimplest implementation of the component, just a list-based component inside its slot.\n\n```vue\n<template>\n  <SlidingPanel>\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n### Play with props\n\n#### Modifying scroll buttons travel distance\n\nEdit how much the scroll travels when navigating with the buttons by changing the `scrollFactor`\nprop.\n\n```vue\n<template>\n  <SlidingPanel :scrollFactor=\"1.5\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n#### Hiding scroll buttons\n\nHide the navigational buttons completely by setting the `showButtons` prop to `false`. This is\nintended to be used when other scrolling options are available, like in mobile, where you can scroll\njust by swiping.\n\n```vue\n<template>\n  <SlidingPanel :showButtons=\"false\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n#### Customizing the content with classes\n\nThe `buttonClass` prop can be used to add classes to the buttons.\n\nThe `scrollContainerClass` prop can be used to add classes to the scroll content.\n\n```vue\n<template>\n  <SlidingPanel buttonClass=\"x-button--round\" scrollContainerClass=\"x-sliding-panel-fade\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n#### Disabling reset the scroll when content changes\n\nBy default, whenever the content of the sliding panel changes, it auto resets its scroll position.\nYou can disable this behavior setting the `resetOnContentChange` prop to `false`.\n\n```vue\n<template>\n  <div>\n    <button @click=\"items++\">Add item</button>\n    <label>\n      <input type=\"checkbox\" v-model=\"resetOnContentChange\" />\n      Reset content onchange\n    </label>\n    <SlidingPanel :resetOnContentChange=\"resetOnContentChange\">\n      <div class=\"item\" v-for=\"item in items\" :key=\"item\">Item {{ item }}</div>\n    </SlidingPanel>\n  </div>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    },\n    data() {\n      return {\n        items: 4,\n        resetOnContentChange: false\n      };\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n## Extending the component\n\n### Overriding Button content\n\nBy default the buttons show an arrow depicting the direction the scroll would go to when clicked,\nbut this content can be customized with anything, from characters to SVG and images.\n\n```vue\n<template>\n  <SlidingPanel>\n    <template #sliding-panel-left-button>Left</template>\n    <template #default>\n      <div class=\"item\">Item 1</div>\n      <div class=\"item\">Item 2</div>\n      <div class=\"item\">Item 3</div>\n      <div class=\"item\">Item 4</div>\n    </template>\n    <template #sliding-panel-right-button>Right</template>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n</docs>\n"],"names":[],"mappings":"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"}

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

@@ -1,16 +1,7 @@
-import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
+import injectCss from '../../tools/inject-css.js';
 
-var css = ".x-sliding-panel[data-v-7ad53488] {\n  align-items: center;\n  display: flex;\n  flex-flow: row nowrap;\n  position: relative;\n}\n.x-sliding-panel__button[data-v-7ad53488] {\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 .x-sliding-panel-button-left[data-v-7ad53488] {\n  left: 0;\n}\n.x-sliding-panel .x-sliding-panel-button-right[data-v-7ad53488] {\n  right: 0;\n}\n.x-sliding-panel__scroll[data-v-7ad53488] {\n  display: flex;\n  flex: 100%;\n  flex-flow: row nowrap;\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n.x-sliding-panel__scroll[data-v-7ad53488]::-webkit-scrollbar {\n  display: none;\n}\n.x-sliding-panel__scroll > *[data-v-7ad53488] {\n  flex: 0 0 auto;\n}\n.x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-start) .x-sliding-panel-button-left[data-v-7ad53488] {\n  opacity: 1;\n  pointer-events: all;\n}\n.x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right[data-v-7ad53488] {\n  opacity: 1;\n  pointer-events: all;\n}";
-           const isBrowser = /*#__PURE__*/ (function () {
-             return (
-                Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
-                '[object process]'
-             );
-           })();
-           const useBrowserInjector =
-             (typeof STRIP_SSR_INJECTOR !== 'undefined' && STRIP_SSR_INJECTOR) || isBrowser;
-           const injector = useBrowserInjector ? createInjector({}) : createInjectorSSR({});
-           injector('/home/runner/work/x/x/packages/x-components/src/components/sliding-panel.vue?rollup-plugin-vue=styles.0.css',{source:css});
+var css = ".x-sliding-panel[data-v-9402d5ce]{align-items:center;display:flex;flex-flow:row nowrap;position:relative}.x-sliding-panel__button[data-v-9402d5ce]{opacity:0;pointer-events:none;position:absolute;transition:all .2s ease-out;z-index:2}.x-sliding-panel-button-left[data-v-9402d5ce]{left:0}.x-sliding-panel-button-right[data-v-9402d5ce]{right:0}.x-sliding-panel__scroll[data-v-9402d5ce]{-ms-overflow-style:none;display:flex;flex:100%;flex-flow:row nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.x-sliding-panel__scroll[data-v-9402d5ce]::-webkit-scrollbar{display:none}.x-sliding-panel__scroll[data-v-9402d5ce]>*{flex:0 0 auto}.x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right[data-v-9402d5ce],.x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-start) .x-sliding-panel-button-left[data-v-9402d5ce]{opacity:1;pointer-events:all}";
+injectCss(css);
 
 export { css, css as default };
 //# sourceMappingURL=sliding-panel.vue3.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sliding-panel.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"sliding-panel.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

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

@@ -1,47 +1,12 @@
-import script from './snippet-callbacks.vue2.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _sfc_main from './snippet-callbacks.vue2.js';
+import { resolveComponent, openBlock, createBlock } from 'vue';
+import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_GlobalXBus = resolveComponent("GlobalXBus");
+  return openBlock(), createBlock(_component_GlobalXBus, { listeners: _ctx.eventListeners }, null, 8, ["listeners"]);
+}
+var snippetCallbacks = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c("GlobalXBus", _vm._g({}, _vm.eventListeners))
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export { __vue_component__ as default };
+export { snippetCallbacks as default };
 //# sourceMappingURL=snippet-callbacks.vue.js.map

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 v-on=\"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":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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;;;;;;;"}

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

@@ -1,7 +1,7 @@
 import { map } from '@empathyco/x-utils';
 import { defineComponent, inject, computed } from 'vue';
 import { useXBus } from '../composables/use-x-bus.js';
-import __vue_component__ from './global-x-bus.vue.js';
+import _sfc_main$1 from './global-x-bus.vue.js';
 
 /**
  * This component subscribes to any {@link XEvent} with a custom callbacks provided by the snippet
@@ -9,9 +9,9 @@ import __vue_component__ from './global-x-bus.vue.js';
  *
  * @public
  */
-var script = defineComponent({
+var _sfc_main = defineComponent({
     name: 'SnippetCallbacks',
-    components: { GlobalXBus: __vue_component__ },
+    components: { GlobalXBus: _sfc_main$1 },
     setup() {
         const xBus = useXBus();
         /**
@@ -49,5 +49,5 @@ var script = defineComponent({
     }
 });
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=snippet-callbacks.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"snippet-callbacks.vue2.js","sources":["../../../src/components/snippet-callbacks.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\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"],"names":["GlobalXBus"],"mappings":";;;;;AAYE;;;;;AAKG;AACH,aAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,kBAAkB;IACxB,UAAU,EAAE,cAAEA,iBAAU,EAAE;IAC1B,KAAK,GAAA;AACH,QAAA,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;AAEvB;;;;AAIG;AACH,QAAA,MAAM,aAAa,GAAG,MAAM,CAAgB,eAAe,CAAC,CAAC;AAE7D;;;;;;;;AAQG;AACH,QAAA,MAAM,cAAc,GAAG,QAAQ,CAAkB,MAAK;AACpD,YAAA,MAAM,SAAS,GAAG,aAAa,EAAE,SAAS,CAAC;AAE3C,YAAA,OAAO,SAAS;kBACZ,GAAG,CAAC,SAAS,EAAE,CAAC,SAAS,EAAE,QAAQ,KAAI;AACrC,oBAAA,OAAO,CAAC,OAAgB,EAAE,QAAsB,KAAI;wBAClD,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAgB,EAAE,QAAQ,CAAC,CAAC;AAC5D,wBAAA,IAAI,CAAC,IAAI,CAAC,yBAAyB,EAAE;AACnC,4BAAA,KAAK,EAAE,SAAS;4BAChB,cAAc;AACd,4BAAA,OAAO,EAAE,OAAgB;4BACzB,QAAQ;AACT,yBAAA,CAAC,CAAC;AACL,qBAAC,CAAC;AACJ,iBAAC,CAAC;kBACD,EAAsB,CAAC;AAC9B,SAAC,CAAC,CAAC;QAEH,OAAO,EAAE,cAAc,EAAE,CAAC;KAC3B;AACF,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\">\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;;;;"}

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

@@ -1,78 +1,42 @@
-import script from './base-suggestion.vue2.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _sfc_main from './base-suggestion.vue2.js';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, createVNode, toDisplayString } from 'vue';
+import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c(
+const _hoisted_1 = {
+  key: 0,
+  class: "x-suggestion__filter"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_Highlight = resolveComponent("Highlight");
+  return openBlock(), createElementBlock(
     "button",
-    _vm._g(
-      {
-        ref: "el",
-        class: _vm.dynamicCSSClasses,
-        on: { click: _vm.emitEvents },
-      },
-      _vm.$listeners
-    ),
+    {
+      ref: "el",
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.emitEvents && _ctx.emitEvents(...args)),
+      class: normalizeClass(_ctx.dynamicCSSClasses)
+    },
     [
-      _vm._t(
-        "default",
-        function () {
-          return [
-            _c("Highlight", {
-              staticClass: "x-suggestion__query",
-              attrs: { text: _vm.suggestion.query, highlight: _vm.query },
-            }),
-            _vm.filter
-              ? _c("span", { staticClass: "x-suggestion__filter" }, [
-                  _vm._v(_vm._s(_vm.filter.label)),
-                ])
-              : _vm._e(),
-          ]
-        },
-        null,
-        { query: _vm.query, suggestion: _vm.suggestion, filter: _vm.filter }
-      ),
+      createCommentVNode("\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      "),
+      renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ query: _ctx.query, suggestion: _ctx.suggestion, filter: _ctx.filter })), () => [
+        createVNode(_component_Highlight, {
+          class: "x-suggestion__query",
+          text: _ctx.suggestion.query,
+          highlight: _ctx.query
+        }, null, 8, ["text", "highlight"]),
+        _ctx.filter ? (openBlock(), createElementBlock(
+          "span",
+          _hoisted_1,
+          toDisplayString(_ctx.filter.label),
+          1
+          /* TEXT */
+        )) : createCommentVNode("v-if", true)
+      ])
     ],
     2
-  )
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
+    /* CLASS */
   );
+}
+var BaseSuggestion = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-export { __vue_component__ as default };
+export { BaseSuggestion as default };
 //# sourceMappingURL=base-suggestion.vue.js.map