@adyen/bento-vue2 2.1.0 → 2.2.0

package/dist/chunks/{fixed-scroller.CHmrgoTQ.js.map → fixed-scroller.CkoOFRzH.js.map}

@@ -1 +1 @@
-{"version":3,"file":"fixed-scroller.CHmrgoTQ.js","sources":["../../src/components/internal/fixed-scroller/composables/useFixedScroller.ts","../../src/components/internal/fixed-scroller/fixed-scroller.vue"],"sourcesContent":["import { observeSizeOfElement } from '@/utils/ts/resize';\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\nimport type { Ref, UnwrapRef } from 'vue';\n\n// Adding an offset of \"1\" so that the border can be shown within the boundaries\nconst OVERFLOW_CLIP_OFFSET = 1;\n// Add the gradient offset to the calculations\nconst GRADIENT_OFFSET = 40;\n\ninterface useFixedScrollerProps {\n    contentRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n    containerRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n    leftButtonRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n    rightButtonRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n}\n\n/**\n * Function to calculate the offset of each view and change the \"view\" via offsets\n * through the functions `scrollLeft` and `scrollRight` whilst providing a way to\n * show and hide the buttons based on the current \"view\" via\n * `shouldShowLeftButton` and `shouldShowRightButton`.\n *\n * Each view is pre-calculated (offsetArray) and updated if the content changes as a computed ref:\n * First view: Always 0 (x axis beginning).\n * Last view: total content space - visible width\n * Intermediate views: Previous offset (to the left) plus the visible space taking\n *                     away the space the buttons take so that the whole view can be rendered\n *\n *\n * @param props - All the necessary references to calculate the scroll\n * @param props.containerRef - Reference to the container, this defines the visible space width\n * @param props.contentRef - Reference to the content itself, this defines the total content width\n * @param props.leftButtonRef - Reference to the left button, used to calculate total space in which the content will be rendered\n * @param props.rightButtonRef - Reference to the right button, used to calculate total space in which the content will be rendered\n * @returns response - Values used in the view to show the buttons and to change the view right or left\n * @returns response.offset - Offset value by which the view will move on the x axis. To be used in `styles`.\n * @returns response.shouldShowLeftButton - Indicates if the button on the left should be shown\n * @returns response.shouldShowRightButton - Indicates if the button on the right should be shown\n * @returns response.maskStyle - CSS custom properties for the content mask, based on the rendered button widths\n * @returns response.scrollLeft - Used to shift the view to the left\n * @returns response.scrollRight - Used to shift the view to the right\n */\nexport const useFixedScroller = ({\n    contentRef,\n    containerRef,\n    leftButtonRef,\n    rightButtonRef,\n}: useFixedScrollerProps) => {\n    const offset = ref(0);\n    const currentView = ref(0);\n\n    // Calculated using 'scrollWidth' to get the full width of the content\n    const totalContentWidth = ref(0);\n    // Calculated using 'clientWidth' to get the rendered componen width\n    const visibleSpaceWidth = ref(0);\n\n    onMounted(() => {\n        observeSizeOfElement(containerRef.value, () => {\n            if (containerRef.value) {\n                // Set new width when resized\n                visibleSpaceWidth.value = containerRef.value.offsetWidth;\n                // Reset the offset and view\n                currentView.value = 0;\n                offset.value = 0;\n            }\n        });\n\n        observeSizeOfElement(contentRef.value, () => {\n            totalContentWidth.value = contentRef.value?.scrollWidth;\n\n            if (totalContentWidth.value < visibleSpaceWidth.value) {\n                // Reset the offset and view\n                currentView.value = 0;\n                offset.value = 0;\n            }\n        });\n    });\n\n    // Sum of the space used by the Left and Right buttons\n    // Used to calculate how much space the \"actual\" visible space is\n    const buttonsWidth = computed(() => {\n        const leftButtonWidth = leftButtonRef.value?.scrollWidth\n            ? leftButtonRef.value.scrollWidth + GRADIENT_OFFSET\n            : 0;\n        const rightButtonWidth = rightButtonRef.value?.scrollWidth\n            ? rightButtonRef.value.scrollWidth + GRADIENT_OFFSET\n            : 0;\n\n        return leftButtonWidth + rightButtonWidth;\n    });\n    // Total number of pages/views available.\n    // Calculated as \"ceil\" because if the space doesn't fit \"one view\" (irrational number) the content flows to the next view (integer).\n    const totalViews = computed(() => Math.ceil(totalContentWidth.value / visibleSpaceWidth.value) ?? 0);\n\n    // Calculation of offsets per view (index).\n    // This allows to easily swap the offset without on-the-fly calculations\n    const offsetArray = computed(() => {\n        const calculatedOffsetList = new Array(totalViews.value).fill(0);\n\n        calculatedOffsetList.forEach((_, index) => {\n            // First offset will be 0\n            if (index === 0) {\n                return;\n            }\n\n            // Calculate last\n            if (index === totalViews.value - 1) {\n                calculatedOffsetList[calculatedOffsetList.length - 1] = -(\n                    totalContentWidth.value -\n                    visibleSpaceWidth.value +\n                    OVERFLOW_CLIP_OFFSET\n                );\n\n                return;\n            }\n\n            // Calculate each offset - Move 1 view\n            const previousOffset = calculatedOffsetList[index - 1];\n            calculatedOffsetList[index] = -(visibleSpaceWidth.value + Math.abs(previousOffset) - buttonsWidth.value);\n        });\n\n        return calculatedOffsetList;\n    });\n\n    // Hide left button when it's the first view\n    const shouldShowLeftButton = computed(() => currentView.value !== 0);\n    // Hide right button if it's the last view\n    const shouldShowRightButton = computed(\n        () => offset.value >= -(totalContentWidth.value - visibleSpaceWidth.value - 1)\n    );\n\n    // Rendered width (including padding) of each button overlay, used to drive the\n    // content mask so the fade matches the area each button occupies. They are 0 when\n    // the corresponding button is hidden, which leaves that edge of the content unmasked.\n    const leftButtonOverlayWidth = ref(0);\n    const rightButtonOverlayWidth = ref(0);\n\n    // Buttons are conditionally rendered, so measure them after the visibility update is applied.\n    watch(\n        shouldShowLeftButton,\n        async shown => {\n            if (!shown) {\n                leftButtonOverlayWidth.value = 0;\n\n                return;\n            }\n\n            await nextTick();\n            leftButtonOverlayWidth.value = leftButtonRef.value?.offsetWidth ?? 0;\n        },\n        { immediate: true }\n    );\n\n    watch(\n        shouldShowRightButton,\n        async shown => {\n            if (!shown) {\n                rightButtonOverlayWidth.value = 0;\n\n                return;\n            }\n\n            await nextTick();\n            rightButtonOverlayWidth.value = rightButtonRef.value?.offsetWidth ?? 0;\n        },\n        { immediate: true }\n    );\n\n    /**\n     * CSS custom properties used by the container mask to match the visible button overlays.\n     */\n    const maskStyle = computed(() => ({\n        '--fixed-scroller-mask-left': `${leftButtonOverlayWidth.value}px`,\n        '--fixed-scroller-mask-right': `${rightButtonOverlayWidth.value}px`,\n    }));\n\n    /**\n     * Shifts the current offset by one view to the left.\n     */\n    const scrollLeft = () => {\n        // Do nothing if it is already in page 0\n        if (currentView.value === 0) {\n            return;\n        }\n\n        currentView.value -= 1;\n        offset.value = offsetArray.value[currentView.value];\n    };\n\n    /**\n     * Shifts the current offset by one view to the right.\n     */\n    const scrollRight = () => {\n        // Do nothing if it is already in last page\n        if (currentView.value === totalViews.value - 1) {\n            return;\n        }\n\n        currentView.value += 1;\n        offset.value = offsetArray.value[currentView.value];\n    };\n\n    return {\n        offset,\n        shouldShowLeftButton,\n        shouldShowRightButton,\n        maskStyle,\n\n        // Methods\n        scrollLeft,\n        scrollRight,\n    };\n};\n","<template>\n    <div ref=\"fixedScrollerRef\" class=\"b-fixed-scroller\">\n        <div class=\"b-fixed-scroller__container\" :style=\"maskStyle\">\n            <div\n                ref=\"contentRef\"\n                class=\"b-fixed-scroller__content\"\n                :style=\"{\n                    transform: `translateX(${offset}px)`,\n                    paddingTop: shouldShowLeftButton || shouldShowRightButton ? `${extraPaddingTop}px` : null,\n                }\"\n            >\n                <slot></slot>\n            </div>\n        </div>\n\n        <div\n            v-if=\"shouldShowLeftButton\"\n            ref=\"leftButtonRef\"\n            class=\"b-fixed-scroller__left b-fixed-scroller__button\"\n            :class=\"buttonConditionalClasses\"\n        >\n            <bento-button variant=\"secondary\" :aria-label=\"t('scrollLeft')\" :condensed=\"condensed\" @click=\"scrollLeft\">\n                <template #iconLeft>\n                    <chevron-left-icon svg-title=\"checked\" aria-hidden=\"true\" />\n                </template>\n            </bento-button>\n        </div>\n        <div\n            v-if=\"shouldShowRightButton\"\n            ref=\"rightButtonRef\"\n            class=\"b-fixed-scroller__right b-fixed-scroller__button\"\n            :class=\"buttonConditionalClasses\"\n        >\n            <bento-button\n                variant=\"secondary\"\n                :aria-label=\"t('scrollRight')\"\n                :condensed=\"condensed\"\n                @click=\"scrollRight\"\n            >\n                <template #iconLeft>\n                    <chevron-right-icon svg-title=\"checked\" aria-hidden=\"true\" />\n                </template>\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { useFixedScroller } from './composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import ChevronLeftIcon from '@adyen/ui-assets-icons-16/vue/chevron-left';\n    import ChevronRightIcon from '@adyen/ui-assets-icons-16/vue/chevron-right';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const contentRef = ref(null);\n    const fixedScrollerRef = ref(null);\n    const leftButtonRef = ref(null);\n    const rightButtonRef = ref(null);\n\n    const props = defineProps({\n        /**\n         * Applies the condensed style to the buttons\n         */\n        condensed: { type: Boolean, default: false },\n        /**\n         * Padding to be applied to the top of the scroller container\n         */\n        extraPaddingTop: { type: Number, default: 0 },\n        /**\n         * Padding to be applied to the top of the scroller container\n         */\n        centered: { type: Boolean, default: false },\n    });\n\n    const { offset, shouldShowLeftButton, shouldShowRightButton, maskStyle, scrollLeft, scrollRight } =\n        useFixedScroller({\n            contentRef,\n            containerRef: fixedScrollerRef,\n            leftButtonRef,\n            rightButtonRef,\n        });\n\n    const buttonConditionalClasses = computed(() => ({\n        'b-fixed-scroller__button--centered': props.centered,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Allows to horizontally scroll content by one view at a time.\n     *\n     * @example\n     * import { FixedScroller } from '@/internal';\n     *\n     * export default {\n     *     components: { FixedScroller },\n     *     template: `\n     *          <fixed-scroller>\n     *              <div style=\"display: flex; gap: 8px;\">\n     *                  {{ Content here }}\n     *              </div>\n     *          </fixed-scroller>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./fixed-scroller.scss\" />\n"],"names":["OVERFLOW_CLIP_OFFSET","GRADIENT_OFFSET","useFixedScroller","contentRef","containerRef","leftButtonRef","rightButtonRef","offset","ref","currentView","totalContentWidth","visibleSpaceWidth","onMounted","observeSizeOfElement","buttonsWidth","computed","leftButtonWidth","rightButtonWidth","totalViews","offsetArray","calculatedOffsetList","_","index","previousOffset","shouldShowLeftButton","shouldShowRightButton","leftButtonOverlayWidth","rightButtonOverlayWidth","watch","shown","nextTick","maskStyle","__default__","messages","t","useI18n","fixedScrollerRef","scrollLeft","scrollRight","buttonConditionalClasses","props"],"mappings":"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"}
+{"version":3,"file":"fixed-scroller.CkoOFRzH.js","sources":["../../src/components/internal/fixed-scroller/composables/useFixedScroller.ts","../../src/components/internal/fixed-scroller/fixed-scroller.vue"],"sourcesContent":["import { observeSizeOfElement } from '@/utils/ts/resize';\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\nimport type { Ref, UnwrapRef } from 'vue';\n\n// Adding an offset of \"1\" so that the border can be shown within the boundaries\nconst OVERFLOW_CLIP_OFFSET = 1;\n// Add the gradient offset to the calculations\nconst GRADIENT_OFFSET = 40;\n\ninterface useFixedScrollerProps {\n    contentRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n    containerRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n    leftButtonRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n    rightButtonRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n}\n\n/**\n * Function to calculate the offset of each view and change the \"view\" via offsets\n * through the functions `scrollLeft` and `scrollRight` whilst providing a way to\n * show and hide the buttons based on the current \"view\" via\n * `shouldShowLeftButton` and `shouldShowRightButton`.\n *\n * Each view is pre-calculated (offsetArray) and updated if the content changes as a computed ref:\n * First view: Always 0 (x axis beginning).\n * Last view: total content space - visible width\n * Intermediate views: Previous offset (to the left) plus the visible space taking\n *                     away the space the buttons take so that the whole view can be rendered\n *\n *\n * @param props - All the necessary references to calculate the scroll\n * @param props.containerRef - Reference to the container, this defines the visible space width\n * @param props.contentRef - Reference to the content itself, this defines the total content width\n * @param props.leftButtonRef - Reference to the left button, used to calculate total space in which the content will be rendered\n * @param props.rightButtonRef - Reference to the right button, used to calculate total space in which the content will be rendered\n * @returns response - Values used in the view to show the buttons and to change the view right or left\n * @returns response.offset - Offset value by which the view will move on the x axis. To be used in `styles`.\n * @returns response.shouldShowLeftButton - Indicates if the button on the left should be shown\n * @returns response.shouldShowRightButton - Indicates if the button on the right should be shown\n * @returns response.maskStyle - CSS custom properties for the content mask, based on the rendered button widths\n * @returns response.scrollLeft - Used to shift the view to the left\n * @returns response.scrollRight - Used to shift the view to the right\n */\nexport const useFixedScroller = ({\n    contentRef,\n    containerRef,\n    leftButtonRef,\n    rightButtonRef,\n}: useFixedScrollerProps) => {\n    const offset = ref(0);\n    const currentView = ref(0);\n\n    // Calculated using 'scrollWidth' to get the full width of the content\n    const totalContentWidth = ref(0);\n    // Calculated using 'clientWidth' to get the rendered componen width\n    const visibleSpaceWidth = ref(0);\n\n    onMounted(() => {\n        observeSizeOfElement(containerRef.value, () => {\n            if (containerRef.value) {\n                // Set new width when resized\n                visibleSpaceWidth.value = containerRef.value.offsetWidth;\n                // Reset the offset and view\n                currentView.value = 0;\n                offset.value = 0;\n            }\n        });\n\n        observeSizeOfElement(contentRef.value, () => {\n            totalContentWidth.value = contentRef.value?.scrollWidth;\n\n            if (totalContentWidth.value < visibleSpaceWidth.value) {\n                // Reset the offset and view\n                currentView.value = 0;\n                offset.value = 0;\n            }\n        });\n    });\n\n    // Sum of the space used by the Left and Right buttons\n    // Used to calculate how much space the \"actual\" visible space is\n    const buttonsWidth = computed(() => {\n        const leftButtonWidth = leftButtonRef.value?.scrollWidth\n            ? leftButtonRef.value.scrollWidth + GRADIENT_OFFSET\n            : 0;\n        const rightButtonWidth = rightButtonRef.value?.scrollWidth\n            ? rightButtonRef.value.scrollWidth + GRADIENT_OFFSET\n            : 0;\n\n        return leftButtonWidth + rightButtonWidth;\n    });\n    // Total number of pages/views available.\n    // Calculated as \"ceil\" because if the space doesn't fit \"one view\" (irrational number) the content flows to the next view (integer).\n    const totalViews = computed(() => Math.ceil(totalContentWidth.value / visibleSpaceWidth.value) ?? 0);\n\n    // Calculation of offsets per view (index).\n    // This allows to easily swap the offset without on-the-fly calculations\n    const offsetArray = computed(() => {\n        const calculatedOffsetList = new Array(totalViews.value).fill(0);\n\n        calculatedOffsetList.forEach((_, index) => {\n            // First offset will be 0\n            if (index === 0) {\n                return;\n            }\n\n            // Calculate last\n            if (index === totalViews.value - 1) {\n                calculatedOffsetList[calculatedOffsetList.length - 1] = -(\n                    totalContentWidth.value -\n                    visibleSpaceWidth.value +\n                    OVERFLOW_CLIP_OFFSET\n                );\n\n                return;\n            }\n\n            // Calculate each offset - Move 1 view\n            const previousOffset = calculatedOffsetList[index - 1];\n            calculatedOffsetList[index] = -(visibleSpaceWidth.value + Math.abs(previousOffset) - buttonsWidth.value);\n        });\n\n        return calculatedOffsetList;\n    });\n\n    // Hide left button when it's the first view\n    const shouldShowLeftButton = computed(() => currentView.value !== 0);\n    // Hide right button if it's the last view\n    const shouldShowRightButton = computed(\n        () => offset.value >= -(totalContentWidth.value - visibleSpaceWidth.value - 1)\n    );\n\n    // Rendered width (including padding) of each button overlay, used to drive the\n    // content mask so the fade matches the area each button occupies. They are 0 when\n    // the corresponding button is hidden, which leaves that edge of the content unmasked.\n    const leftButtonOverlayWidth = ref(0);\n    const rightButtonOverlayWidth = ref(0);\n\n    // Buttons are conditionally rendered, so measure them after the visibility update is applied.\n    watch(\n        shouldShowLeftButton,\n        async shown => {\n            if (!shown) {\n                leftButtonOverlayWidth.value = 0;\n\n                return;\n            }\n\n            await nextTick();\n            leftButtonOverlayWidth.value = leftButtonRef.value?.offsetWidth ?? 0;\n        },\n        { immediate: true }\n    );\n\n    watch(\n        shouldShowRightButton,\n        async shown => {\n            if (!shown) {\n                rightButtonOverlayWidth.value = 0;\n\n                return;\n            }\n\n            await nextTick();\n            rightButtonOverlayWidth.value = rightButtonRef.value?.offsetWidth ?? 0;\n        },\n        { immediate: true }\n    );\n\n    /**\n     * CSS custom properties used by the container mask to match the visible button overlays.\n     */\n    const maskStyle = computed(() => ({\n        '--fixed-scroller-mask-left': `${leftButtonOverlayWidth.value}px`,\n        '--fixed-scroller-mask-right': `${rightButtonOverlayWidth.value}px`,\n    }));\n\n    /**\n     * Shifts the current offset by one view to the left.\n     */\n    const scrollLeft = () => {\n        // Do nothing if it is already in page 0\n        if (currentView.value === 0) {\n            return;\n        }\n\n        currentView.value -= 1;\n        offset.value = offsetArray.value[currentView.value];\n    };\n\n    /**\n     * Shifts the current offset by one view to the right.\n     */\n    const scrollRight = () => {\n        // Do nothing if it is already in last page\n        if (currentView.value === totalViews.value - 1) {\n            return;\n        }\n\n        currentView.value += 1;\n        offset.value = offsetArray.value[currentView.value];\n    };\n\n    return {\n        offset,\n        shouldShowLeftButton,\n        shouldShowRightButton,\n        maskStyle,\n\n        // Methods\n        scrollLeft,\n        scrollRight,\n    };\n};\n","<template>\n    <div ref=\"fixedScrollerRef\" class=\"b-fixed-scroller\">\n        <div class=\"b-fixed-scroller__container\" :style=\"maskStyle\">\n            <div\n                ref=\"contentRef\"\n                class=\"b-fixed-scroller__content\"\n                :style=\"{\n                    transform: `translateX(${offset}px)`,\n                    paddingTop: shouldShowLeftButton || shouldShowRightButton ? `${extraPaddingTop}px` : null,\n                }\"\n            >\n                <slot></slot>\n            </div>\n        </div>\n\n        <div\n            v-if=\"shouldShowLeftButton\"\n            ref=\"leftButtonRef\"\n            class=\"b-fixed-scroller__left b-fixed-scroller__button\"\n            :class=\"buttonConditionalClasses\"\n        >\n            <bento-button variant=\"secondary\" :aria-label=\"t('scrollLeft')\" :condensed=\"condensed\" @click=\"scrollLeft\">\n                <template #iconLeft>\n                    <chevron-left-icon svg-title=\"checked\" aria-hidden=\"true\" />\n                </template>\n            </bento-button>\n        </div>\n        <div\n            v-if=\"shouldShowRightButton\"\n            ref=\"rightButtonRef\"\n            class=\"b-fixed-scroller__right b-fixed-scroller__button\"\n            :class=\"buttonConditionalClasses\"\n        >\n            <bento-button\n                variant=\"secondary\"\n                :aria-label=\"t('scrollRight')\"\n                :condensed=\"condensed\"\n                @click=\"scrollRight\"\n            >\n                <template #iconLeft>\n                    <chevron-right-icon svg-title=\"checked\" aria-hidden=\"true\" />\n                </template>\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { useFixedScroller } from './composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import ChevronLeftIcon from '@adyen/ui-assets-icons-16/vue/chevron-left';\n    import ChevronRightIcon from '@adyen/ui-assets-icons-16/vue/chevron-right';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const contentRef = ref(null);\n    const fixedScrollerRef = ref(null);\n    const leftButtonRef = ref(null);\n    const rightButtonRef = ref(null);\n\n    const props = defineProps({\n        /**\n         * Applies the condensed style to the buttons\n         */\n        condensed: { type: Boolean, default: false },\n        /**\n         * Padding to be applied to the top of the scroller container\n         */\n        extraPaddingTop: { type: Number, default: 0 },\n        /**\n         * Vertically centers the scroll buttons in the container instead of spacing them from its top and bottom edges\n         */\n        centered: { type: Boolean, default: false },\n    });\n\n    const { offset, shouldShowLeftButton, shouldShowRightButton, maskStyle, scrollLeft, scrollRight } =\n        useFixedScroller({\n            contentRef,\n            containerRef: fixedScrollerRef,\n            leftButtonRef,\n            rightButtonRef,\n        });\n\n    const buttonConditionalClasses = computed(() => ({\n        'b-fixed-scroller__button--centered': props.centered,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Allows to horizontally scroll content by one view at a time.\n     *\n     * @example\n     * import { FixedScroller } from '@/internal';\n     *\n     * export default {\n     *     components: { FixedScroller },\n     *     template: `\n     *          <fixed-scroller>\n     *              <div style=\"display: flex; gap: 8px;\">\n     *                  {{ Content here }}\n     *              </div>\n     *          </fixed-scroller>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./fixed-scroller.scss\" />\n"],"names":["OVERFLOW_CLIP_OFFSET","GRADIENT_OFFSET","useFixedScroller","contentRef","containerRef","leftButtonRef","rightButtonRef","offset","ref","currentView","totalContentWidth","visibleSpaceWidth","onMounted","observeSizeOfElement","buttonsWidth","computed","leftButtonWidth","rightButtonWidth","totalViews","offsetArray","calculatedOffsetList","_","index","previousOffset","shouldShowLeftButton","shouldShowRightButton","leftButtonOverlayWidth","rightButtonOverlayWidth","watch","shown","nextTick","maskStyle","__default__","messages","t","useI18n","fixedScrollerRef","scrollLeft","scrollRight","buttonConditionalClasses","props"],"mappings":"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"}

package/dist/chunks/{focus-trap.fd6_d2EW.js → focus-trap.BDpcWIxI.js}

@@ -1163,9 +1163,8 @@ const Kr = Rr.exports;
 export {
   Kr as B,
   be as a,
-  Ar as b,
   Ce as f,
   Er as g,
   Tr as s
 };
-//# sourceMappingURL=focus-trap.fd6_d2EW.js.map
+//# sourceMappingURL=focus-trap.BDpcWIxI.js.map