@adyen/bento-vue2 1.94.0 → 1.95.0

package/dist/chunks/{fixed-scroller.DR2E_No4.js → fixed-scroller.4xAzt_OI.js}

@@ -1,5 +1,5 @@
 import { ref as c, onMounted as m, computed as u, defineComponent as B } from "vue";
-import { B as b } from "./button.C9b2AC9w.js";
+import { B as b } from "./button.DITA6YtS.js";
 import { u as C } from "./index.B6WW_F-J.js";
 import { C as x, a as y } from "./chevron-left.BS24hEFa.js";
 import { o as L } from "./resize.Bqks3WUm.js";
@@ -145,4 +145,4 @@ const X = O.exports;
 export {
   X as F
 };
-//# sourceMappingURL=fixed-scroller.DR2E_No4.js.map
+//# sourceMappingURL=fixed-scroller.4xAzt_OI.js.map

package/dist/chunks/{fixed-scroller.DR2E_No4.js.map → fixed-scroller.4xAzt_OI.js.map}

@@ -1 +1 @@
-{"version":3,"file":"fixed-scroller.DR2E_No4.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, onMounted, ref } 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.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    /**\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\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\">\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, scrollLeft, scrollRight } = 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","_a","buttonsWidth","computed","leftButtonWidth","rightButtonWidth","_b","totalViews","offsetArray","calculatedOffsetList","_","index","previousOffset","shouldShowLeftButton","shouldShowRightButton","__default__","messages","t","useI18n","fixedScrollerRef","scrollLeft","scrollRight","buttonConditionalClasses","props"],"mappings":";;;;;;;AAKA,MAAAA,IAAA,GAEAC,IAAA,IAkCOC,IAAA,CAAA;AAAA,EAA0B,YAAAC;AAAA,EAC7B,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC;AAEJ,MAAA;AACI,QAAAC,IAAAC,EAAA,CAAA,GACAC,IAAAD,EAAA,CAAA,GAGAE,IAAAF,EAAA,CAAA,GAEAG,IAAAH,EAAA,CAAA;AAEA,EAAAI,EAAA,MAAA;AACI,IAAAC,EAAAT,EAAA,OAAA,MAAA;AACI,MAAAA,EAAA,UAEIO,EAAA,QAAAP,EAAA,MAAA,aAEAK,EAAA,QAAA,GACAF,EAAA,QAAA;AAAA,IACJ,CAAA,GAGJM,EAAAV,EAAA,OAAA,MAAA;;AACI,MAAAO,EAAA,SAAAI,IAAAX,EAAA,UAAA,gBAAAW,EAAA,aAEAJ,EAAA,QAAAC,EAAA,UAEIF,EAAA,QAAA,GACAF,EAAA,QAAA;AAAA,IACJ,CAAA;AAAA,EACH,CAAA;AAKL,QAAAQ,IAAAC,EAAA,MAAA;;AACI,UAAAC,KAAAH,IAAAT,EAAA,UAAA,QAAAS,EAAA,cAAAT,EAAA,MAAA,cAAAJ,IAAA,GAGAiB,KAAAC,IAAAb,EAAA,UAAA,QAAAa,EAAA,cAAAb,EAAA,MAAA,cAAAL,IAAA;AAIA,WAAAgB,IAAAC;AAAA,EAAyB,CAAA,GAI7BE,IAAAJ,EAAA,MAAA,KAAA,KAAAN,EAAA,QAAAC,EAAA,KAAA,KAAA,CAAA,GAIAU,IAAAL,EAAA,MAAA;AACI,UAAAM,IAAA,IAAA,MAAAF,EAAA,KAAA,EAAA,KAAA,CAAA;AAEA,WAAAE,EAAA,QAAA,CAAAC,GAAAC,MAAA;AAEI,UAAAA,MAAA;AACI;AAIJ,UAAAA,MAAAJ,EAAA,QAAA,GAAA;AACI,QAAAE,EAAAA,EAAA,SAAA,CAAA,IAAA,EAAAZ,EAAA,QAAAC,EAAA,QAAAX;AAMA;AAAA,MAAA;AAIJ,YAAAyB,IAAAH,EAAAE,IAAA,CAAA;AACA,MAAAF,EAAAE,CAAA,IAAA,EAAAb,EAAA,QAAA,KAAA,IAAAc,CAAA,IAAAV,EAAA;AAAA,IAAkG,CAAA,GAGtGO;AAAA,EAAO,CAAA,GAIXI,IAAAV,EAAA,MAAAP,EAAA,UAAA,CAAA,GAEAkB,IAAAX;AAAA,IAA8B,MAAAT,EAAA,SAAA,EAAAG,EAAA,QAAAC,EAAA,QAAA;AAAA,EACkD;AA6BhF,SAAA;AAAA,IAAO,QAAAJ;AAAA,IACH,sBAAAmB;AAAA,IACA,uBAAAC;AAAA;AAAA,IACA,YA1BJ,MAAA;AAEI,MAAAlB,EAAA,UAAA,MAIAA,EAAA,SAAA,GACAF,EAAA,QAAAc,EAAA,MAAAZ,EAAA,KAAA;AAAA,IAAkD;AAAA,IAsBlD,aAhBJ,MAAA;AAEI,MAAAA,EAAA,UAAAW,EAAA,QAAA,MAIAX,EAAA,SAAA,GACAF,EAAA,QAAAc,EAAA,MAAAZ,EAAA,KAAA;AAAA,IAAkD;AAAA,EAUlD;AAER;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCtDImB,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;iBAtDA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAEA5B,IAAAK,EAAA,IAAA,GACAwB,IAAAxB,EAAA,IAAA,GACAH,IAAAG,EAAA,IAAA,GACAF,IAAAE,EAAA,IAAA,GAiBA,EAAA,QAAAD,GAAA,sBAAAmB,GAAA,uBAAAC,GAAA,YAAAM,GAAA,aAAAC,EAAA,IAAAhC,EAAA;AAAA,MAA0G,YAAAC;AAAA,MACtG,cAAA6B;AAAA,MACc,eAAA3B;AAAA,MACd,gBAAAC;AAAA,IACA,CAAA,GAGJ6B,IAAAnB,EAAA,OAAA;AAAA,MAAiD,sCAAAoB,EAAA;AAAA,IACD,EAAA;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"fixed-scroller.4xAzt_OI.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, onMounted, ref } 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.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    /**\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\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\">\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, scrollLeft, scrollRight } = 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","_a","buttonsWidth","computed","leftButtonWidth","rightButtonWidth","_b","totalViews","offsetArray","calculatedOffsetList","_","index","previousOffset","shouldShowLeftButton","shouldShowRightButton","__default__","messages","t","useI18n","fixedScrollerRef","scrollLeft","scrollRight","buttonConditionalClasses","props"],"mappings":"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"}

package/dist/chunks/{focus-trap.CKs45fnj.js → focus-trap.CBIb3SyN.js}

@@ -1,6 +1,6 @@
 import { ref as $, onUnmounted as De, isRef as nt, watch as Re, computed as K, onMounted as at, onBeforeUnmount as it, defineComponent as ot, useSlots as ut, toRef as ct } from "vue";
 import { u as st } from "./use-has-slot.C9lQZ6nz.js";
-import { n as lt, o as ft, p as dt } from "./index.DZx81HG1.js";
+import { o as lt, p as ft, q as dt } from "./index.CJYgd0QI.js";
 import { n as vt } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/focus-trap.css";
 const bt = (t) => {
@@ -59,27 +59,27 @@ var _e = ["input:not([inert]):not([inert] *)", "select:not([inert]):not([inert]
   return t == null || (e = t.getRootNode) === null || e === void 0 ? void 0 : e.call(t);
 } : function(t) {
   return t == null ? void 0 : t.ownerDocument;
-}, H = function(e, r) {
+}, q = function(e, r) {
   var n;
   r === void 0 && (r = !0);
   var i = e == null || (n = e.getAttribute) === null || n === void 0 ? void 0 : n.call(e, "inert"), u = i === "" || i === "true", a = u || r && e && // closest does not exist on shadow roots, so we fall back to a manual
   // lookup upward, in case it is not defined.
-  (typeof e.closest == "function" ? e.closest("[inert]") : H(e.parentNode));
+  (typeof e.closest == "function" ? e.closest("[inert]") : q(e.parentNode));
   return a;
 }, pt = function(e) {
   var r, n = e == null || (r = e.getAttribute) === null || r === void 0 ? void 0 : r.call(e, "contenteditable");
   return n === "" || n === "true";
 }, Be = function(e, r, n) {
-  if (H(e))
+  if (q(e))
     return [];
   var i = Array.prototype.slice.apply(e.querySelectorAll(W));
   return r && P.call(e, W) && i.unshift(e), i = i.filter(n), i;
-}, q = function(e, r, n) {
+}, H = function(e, r, n) {
   for (var i = [], u = Array.from(e); u.length; ) {
     var a = u.shift();
-    if (!H(a, !1))
+    if (!q(a, !1))
       if (a.tagName === "SLOT") {
-        var s = a.assignedElements(), l = s.length ? s : a.children, d = q(l, !0, n);
+        var s = a.assignedElements(), l = s.length ? s : a.children, d = H(l, !0, n);
         n.flatten ? i.push.apply(i, d) : i.push({
           scopeParent: a,
           candidates: d
@@ -88,9 +88,9 @@ var _e = ["input:not([inert]):not([inert] *)", "select:not([inert]):not([inert]
         var b = P.call(a, W);
         b && n.filter(a) && (r || !e.includes(a)) && i.push(a);
         var v = a.shadowRoot || // check for an undisclosed shadow
-        typeof n.getShadowRoot == "function" && n.getShadowRoot(a), m = !H(v, !1) && (!n.shadowRootFilter || n.shadowRootFilter(a));
+        typeof n.getShadowRoot == "function" && n.getShadowRoot(a), m = !q(v, !1) && (!n.shadowRootFilter || n.shadowRootFilter(a));
         if (v && m) {
-          var w = q(v === !0 ? a.children : v.children, !0, n);
+          var w = H(v === !0 ? a.children : v.children, !0, n);
           n.flatten ? i.push.apply(i, w) : i.push({
             scopeParent: a,
             candidates: w
@@ -238,7 +238,7 @@ var _e = ["input:not([inert]):not([inert] *)", "select:not([inert]):not([inert]
 }, It = function(e, r) {
   r = r || {};
   var n;
-  return r.getShadowRoot ? n = q([e], r.includeContainer, {
+  return r.getShadowRoot ? n = H([e], r.includeContainer, {
     filter: ae.bind(null, r),
     flatten: !1,
     getShadowRoot: r.getShadowRoot,
@@ -247,7 +247,7 @@ var _e = ["input:not([inert]):not([inert] *)", "select:not([inert]):not([inert]
 }, xt = function(e, r) {
   r = r || {};
   var n;
-  return r.getShadowRoot ? n = q([e], r.includeContainer, {
+  return r.getShadowRoot ? n = H([e], r.includeContainer, {
     filter: Y.bind(null, r),
     flatten: !0,
     getShadowRoot: r.getShadowRoot
@@ -730,7 +730,7 @@ var Ae = {
     }
   }), s.updateContainerElements(e), s;
 };
-const Ht = (t, e, r) => {
+const qt = (t, e, r) => {
   const n = $(null), i = ft(t);
   Re(
     [() => dt(t), () => e.value, i, r],
@@ -750,7 +750,7 @@ const Ht = (t, e, r) => {
     e.value && ((u = n.value) == null || u.deactivate());
   });
 };
-var Ie = "data-focus-lock", qt = "data-focus-lock-disabled", Yt = "data-no-focus-lock", Zt = "data-autofocus-inside", zt = "data-no-autofocus", A = function(t) {
+var Ie = "data-focus-lock", Ht = "data-focus-lock-disabled", Yt = "data-no-focus-lock", Zt = "data-autofocus-inside", zt = "data-no-autofocus", A = function(t) {
   for (var e = Array(t.length), r = 0; r < t.length; ++r)
     e[r] = t[r];
   return e;
@@ -784,22 +784,22 @@ var Ie = "data-focus-lock", qt = "data-focus-lock-disabled", Yt = "data-no-focus
     return r;
   var n = Jt(e, Ge.bind(void 0, t));
   return t.set(e, n), n;
-}, He = function(t) {
+}, qe = function(t) {
   return t.dataset;
 }, Qt = function(t) {
   return t.tagName === "BUTTON";
-}, qe = function(t) {
+}, He = function(t) {
   return t.tagName === "INPUT";
 }, Ye = function(t) {
-  return qe(t) && t.type === "radio";
+  return He(t) && t.type === "radio";
 }, er = function(t) {
-  return !((qe(t) || Qt(t)) && (t.type === "hidden" || t.disabled));
+  return !((He(t) || Qt(t)) && (t.type === "hidden" || t.disabled));
 }, tr = function(t) {
   var e = t.getAttribute(zt);
   return ![!0, "true", ""].includes(e);
 }, se = function(t) {
   var e;
-  return !!(t && (!((e = He(t)) === null || e === void 0) && e.focusGuard));
+  return !!(t && (!((e = qe(t)) === null || e === void 0) && e.focusGuard));
 }, Z = function(t) {
   return !se(t);
 }, rr = function(t) {
@@ -899,7 +899,7 @@ var Ie = "data-focus-lock", qt = "data-focus-lock-disabled", Yt = "data-no-focus
   var e = oe(t);
   return e.filter(Boolean).reduce(function(r, n) {
     var i = n.getAttribute(Ie);
-    return r.push.apply(r, i ? cr(A($e(n).querySelectorAll("[".concat(Ie, '="').concat(i, '"]:not([').concat(qt, '="disabled"])')))) : [n]), r;
+    return r.push.apply(r, i ? cr(A($e(n).querySelectorAll("[".concat(Ie, '="').concat(i, '"]:not([').concat(Ht, '="disabled"])')))) : [n]), r;
   }, []);
 }, Xe = function(t) {
   return t.activeElement ? t.activeElement.shadowRoot ? Xe(t.activeElement.shadowRoot) : t.activeElement : void 0;
@@ -985,7 +985,7 @@ var Ie = "data-focus-lock", qt = "data-focus-lock-disabled", Yt = "data-no-focus
 }, hr = function(t) {
   return function(e) {
     var r;
-    return e.autofocus || !!(!((r = He(e)) === null || r === void 0) && r.autofocus) || t.indexOf(e) >= 0;
+    return e.autofocus || !!(!((r = qe(e)) === null || r === void 0) && r.autofocus) || t.indexOf(e) >= 0;
   };
 }, yr = function(t, e) {
   var r = /* @__PURE__ */ new Map();
@@ -1155,7 +1155,7 @@ const xr = (t, e, r) => {
   },
   setup(t) {
     const e = t, r = $(null), n = ut(), i = st(n), u = K(() => e.trapAll && !e.disabled && !e.arrowNavigation), a = K(() => !e.disabled && !e.trapAll);
-    Ht(r, u, ct(e, "trapAllOptions"));
+    qt(r, u, ct(e, "trapAllOptions"));
     const { handleKeydownEscape: s } = bt(r), { onKeyDown: l, onBlur: d } = xr(r, a, e.arrowNavigation);
     return { __sfc: !0, props: e, root: r, slots: n, hasSlot: i, activateTrapAll: u, activateTrapArrowKeysOnly: a, handleKeydownEscape: s, onKeyDown: l, onBlur: d };
   }
@@ -1182,4 +1182,4 @@ export {
   Ar as g,
   Tr as s
 };
-//# sourceMappingURL=focus-trap.CKs45fnj.js.map
+//# sourceMappingURL=focus-trap.CBIb3SyN.js.map