@adyen/bento-vue2 1.86.0 → 1.87.0

package/dist/chunks/{action-bar.Dnkt4yn7.js.map → action-bar.ChMlt59Z.js.map}

@@ -1 +1 @@
-{"version":3,"file":"action-bar.Dnkt4yn7.js","sources":["../../src/components/action-bar/action-bar.vue"],"sourcesContent":["<template>\n    <Transition name=\"b-action-bar__animation\" appear>\n        <section class=\"b-action-bar\" :class=\"conditionalClasses\" :aria-label=\"t('actionBar')\">\n            <div ref=\"actionBar\" class=\"b-action-bar__container\">\n                <div v-if=\"!isConfirmationVariant\" class=\"b-action-bar__close-button\">\n                    <bento-button variant=\"tertiary\" inverse :aria-label=\"t('close')\" @click=\"emit('close')\">\n                        <template #iconLeft><cross-icon :aria-hidden=\"true\" /></template>\n                    </bento-button>\n                </div>\n                <bento-typography el=\"span\" stronger class=\"b-action-bar__selection\">\n                    <template v-if=\"isConfirmationVariant && noItemCounter\">\n                        {{ tc('unsavedChanges', 0) }}\n                    </template>\n                    <template v-else>\n                        {{ n(itemCounter) }}\n                        {{ isConfirmationVariant ? tc('unsavedChanges', itemCounter) : label }}\n                    </template>\n                </bento-typography>\n                <bento-button-actions\n                    v-if=\"isConfirmationVariant\"\n                    :actions=\"confirmationActions\"\n                    class=\"b-action-bar__actions\"\n                    inverse\n                />\n                <button-actions-with-menu\n                    v-else\n                    :actions=\"actionsInternal\"\n                    class=\"b-action-bar__actions\"\n                    :displayed-actions=\"internalDisplayedActions\"\n                    menu-position=\"top-end\"\n                    disable-responsive-behavior\n                    inverse\n                />\n            </div>\n        </section>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, type PropType, provide, ref, toRefs, watch } from 'vue';\n    import { BentoButton, BentoButtonActions, type BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n\n    import { type BentoActionBarVariant } from '@/components/action-bar/action-bar.types';\n    import ButtonActionsWithMenu from '@/components/internal/button-actions-with-menu/button-actions-with-menu.vue';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useWindowSize } from '@vueuse/core';\n\n    import messages from './messages.json';\n    import { POPOVER_OFFSET_INJECTION_KEY } from '@/components/popover/popover.keys';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    // Constants\n    const AVERAGE_BUTTON_SIZE = 100;\n    const MENU_OFFSET = 7;\n    const RESPONSIVE_BREAKPOINT = 500;\n    const SPACING = 32;\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * Required and used for the `default` variant.\n         *\n         * Each object in the list should have a `title`, an `event` and,\n         * optionally, an `icon`.\n         *\n         * The component will display 4 actions and the hide the rest inside a menu.\n         *\n         * @see BentoButton for a list of all the other props supported by each button action.\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: () => [],\n        },\n        /**\n         * How many actions should be visible outside the menu, cannot be more than 4\n         */\n        visibleActions: {\n            type: Number,\n            default: 4,\n            validator: (value: number) => value > 0 && value <= 4,\n        },\n        /**\n         * Use when there are sticky elements at the bottom, like sticky pagination\n         */\n        extraBottomSpacing: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Show how many items are selected.\n         * When omitted in the `confirmation` variant, a generic \"Unsaved changes\" label is displayed.\n         */\n        itemCounter: {\n            type: Number,\n            default: null,\n        },\n        /**\n         * Label for the selection, e.g. 'selected'/'changed'\n         */\n        selectionLabel: {\n            type: String,\n            default: null,\n        },\n        /**\n         * Variant for the action bar\n         * @values default, confirmation\n         */\n        variant: {\n            type: String as PropType<BentoActionBarVariant>,\n            default: 'default',\n        },\n    });\n\n    const emit = defineEmits([\"close\", \"cancel\", \"save\"]);\n\n    const { t, tc, n } = useI18n<{ message: MessageSchema }>({ messages });\n    const label = computed(() => (props.selectionLabel ? props.selectionLabel : t('selected')));\n\n    // Refs\n    const actionBar = ref<HTMLDivElement>(null);\n    const { extraBottomSpacing, visibleActions } = toRefs(props);\n    const { width } = useWindowSize();\n    const internalDisplayedActions = ref(null);\n    const internalVisibleActions = ref(null);\n\n    const isConfirmationVariant = computed(() => props.variant === 'confirmation');\n\n    watch(\n        () => visibleActions.value,\n        value => {\n            internalVisibleActions.value = value <= 4 ? value : 4;\n            internalDisplayedActions.value = internalVisibleActions.value;\n        },\n        { immediate: true }\n    );\n\n    // Styling\n    const conditionalClasses = computed(() => ({\n        'b-action-bar--extra-spacing': extraBottomSpacing.value,\n        'b-action-bar--confirmation': isConfirmationVariant.value,\n    }));\n\n    // Provide POPOVER_OFFSET_INJECTION_KEY to change the value of the popover offset\n    provide(POPOVER_OFFSET_INJECTION_KEY, MENU_OFFSET);\n\n    // Manipulate actions array to display as intended\n    const actionsInternal = computed(() => {\n        // All buttons should be of type secondary in the action bar\n        const actions = props.actions.map(action => ({\n            ...action,\n            variant: 'secondary',\n        })) as BentoButtonActionsList;\n        // Shown actions should display from left to right in action bar, instead of right to left which is the button actions default\n        const shownActions = actions.slice(0, internalDisplayedActions.value).reverse();\n        const hiddenActions = actions.slice(internalDisplayedActions.value);\n\n        return [...shownActions, ...hiddenActions];\n    });\n\n    const confirmationActions = computed<BentoButtonActionsList>(() => [\n        {\n            title: t('save'),\n            event: () => emit('save'),\n        },\n        {\n            title: t('cancel'),\n            variant: 'secondary',\n            event: () => emit('cancel'),\n        },\n    ]);\n\n    const noItemCounter = computed(() => {\n        return props.itemCounter == null || props.itemCounter < 1;\n    });\n\n    // Recursive functions to determine how many actions should be visible/hidden based on the screens width\n    const showActions = async () => {\n        await nextTick();\n        if (\n            width.value > actionBar.value.clientWidth + SPACING + AVERAGE_BUTTON_SIZE &&\n            internalDisplayedActions.value < internalVisibleActions.value\n        ) {\n            internalDisplayedActions.value += 1;\n            showActions();\n        }\n    };\n\n    const hideActions = async () => {\n        await nextTick();\n        if (width.value < actionBar.value.clientWidth + SPACING && internalDisplayedActions.value > 0) {\n            internalDisplayedActions.value -= 1;\n            hideActions();\n        }\n    };\n\n    // Screen width watcher to toggle hidden/visible actions\n    watch(\n        () => width.value,\n        async (newValue, oldValue) => {\n            await nextTick();\n            if (!actionBar.value) {\n                return;\n            }\n            const isIncreasing = newValue > oldValue;\n            if (width.value < RESPONSIVE_BREAKPOINT) {\n                internalDisplayedActions.value = 0;\n            } else if (isIncreasing) {\n                showActions();\n            } else {\n                hideActions();\n            }\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Action bar is a floating bar that provides users with quick access to key actions that can be applied to one or multiple items.\n     *\n     * @example\n     * import { BentoActionBar } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoActionBar },\n     *     template: `\n     *          <bento-action-bar\n     *               :actions='[\n     *                   {\n     *                       title: 'Delete',\n     *                       critical: true,\n     *                       icon: BinIcon,\n     *                       event: () => true,\n     *                   },\n     *                   {\n     *                       title: 'Edit',\n     *                       icon: EditIcon,\n     *                       event: () => true,\n     *                   }\n     *               ]'\n     *               @close=\"closeAction\"\n     *               :item-counter=\"5\"\n     *           />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./action-bar.scss\" />\n"],"names":["__default__","messages","AVERAGE_BUTTON_SIZE","MENU_OFFSET","RESPONSIVE_BREAKPOINT","SPACING","t","tc","n","useI18n","label","computed","props","actionBar","ref","extraBottomSpacing","visibleActions","toRefs","width","useWindowSize","internalDisplayedActions","internalVisibleActions","isConfirmationVariant","watch","value","conditionalClasses","provide","POPOVER_OFFSET_INJECTION_KEY","actionsInternal","actions","action","shownActions","hiddenActions","confirmationActions","emit","noItemCounter","showActions","nextTick","hideActions","newValue","oldValue","isIncreasing"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0PIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBApMAC,IAAA,KACAC,IAAA,GACAC,IAAA,KACAC,IAAA,IA4DA,EAAA,GAAAC,GAAA,IAAAC,GAAA,GAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,MAAAC,EAAA,iBAAAA,EAAA,iBAAAN,EAAA,UAAA,CAAA,GAGAO,IAAAC,EAAA,IAAA,GACA,EAAA,oBAAAC,GAAA,gBAAAC,EAAA,IAAAC,EAAAL,CAAA,GACA,EAAA,OAAAM,EAAA,IAAAC,EAAA,GACAC,IAAAN,EAAA,IAAA,GACAO,IAAAP,EAAA,IAAA,GAEAQ,IAAAX,EAAA,MAAAC,EAAA,YAAA,cAAA;AAEA,IAAAW;AAAA,MAAA,MAAAP,EAAA;AAAA,MACyB,CAAAQ,MAAA;AAEjB,QAAAH,EAAA,QAAAG,KAAA,IAAAA,IAAA,GACAJ,EAAA,QAAAC,EAAA;AAAA,MAAwD;AAAA,MAC5D,EAAA,WAAA,GAAA;AAAA,IACkB;AAItB,UAAAI,IAAAd,EAAA,OAAA;AAAA,MAA2C,+BAAAI,EAAA;AAAA,MACW,8BAAAO,EAAA;AAAA,IACE,EAAA;AAIxD,IAAAI,EAAAC,GAAAxB,CAAA;AAGA,UAAAyB,IAAAjB,EAAA,MAAA;AAEI,YAAAkB,IAAAjB,EAAA,QAAA,IAAA,CAAAkB,OAAA;AAAA,QAA6C,GAAAA;AAAA,QACtC,SAAA;AAAA,MACM,EAAA,GAGbC,IAAAF,EAAA,MAAA,GAAAT,EAAA,KAAA,EAAA,QAAA,GACAY,IAAAH,EAAA,MAAAT,EAAA,KAAA;AAEA,aAAA,CAAA,GAAAW,GAAA,GAAAC,CAAA;AAAA,IAAyC,CAAA,GAG7CC,IAAAtB,EAAA,MAAA;AAAA,MAAmE;AAAA,QAC/D,OAAAL,EAAA,MAAA;AAAA,QACmB,OAAA,MAAA4B,EAAA,MAAA;AAAA,MACS;AAAA,MAC5B;AAAA,QACA,OAAA5B,EAAA,QAAA;AAAA,QACqB,SAAA;AAAA,QACR,OAAA,MAAA4B,EAAA,QAAA;AAAA,MACiB;AAAA,IAC9B,CAAA,GAGJC,IAAAxB,EAAA,MACIC,EAAA,eAAA,QAAAA,EAAA,cAAA,CAAwD,GAI5DwB,IAAA,YAAA;AACI,YAAAC,EAAA,GACAnB,EAAA,QAAAL,EAAA,MAAA,cAAAR,IAAAH,KAAAkB,EAAA,QAAAC,EAAA,UAIID,EAAA,SAAA,GACAgB,EAAA;AAAA,IACJ,GAGJE,IAAA,YAAA;AACI,YAAAD,EAAA,GACAnB,EAAA,QAAAL,EAAA,MAAA,cAAAR,KAAAe,EAAA,QAAA,MACIA,EAAA,SAAA,GACAkB,EAAA;AAAA,IACJ;AAIJ,WAAAf;AAAA,MAAA,MAAAL,EAAA;AAAA,MACgB,OAAAqB,GAAAC,MAAA;AAGR,YADA,MAAAH,EAAA,GACA,CAAAxB,EAAA;AACI;AAEJ,cAAA4B,IAAAF,IAAAC;AACA,QAAAtB,EAAA,QAAAd,IACIgB,EAAA,QAAA,IAAiCqB,IAEjCL,EAAA,IAEAE,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"action-bar.ChMlt59Z.js","sources":["../../src/components/action-bar/action-bar.vue"],"sourcesContent":["<template>\n    <Transition name=\"b-action-bar__animation\" appear>\n        <section class=\"b-action-bar\" :class=\"conditionalClasses\" :aria-label=\"t('actionBar')\">\n            <div ref=\"actionBar\" class=\"b-action-bar__container\">\n                <div v-if=\"!isConfirmationVariant\" class=\"b-action-bar__close-button\">\n                    <bento-button variant=\"tertiary\" inverse :aria-label=\"t('close')\" @click=\"emit('close')\">\n                        <template #iconLeft><cross-icon :aria-hidden=\"true\" /></template>\n                    </bento-button>\n                </div>\n                <bento-typography el=\"span\" stronger class=\"b-action-bar__selection\">\n                    <template v-if=\"isConfirmationVariant && noItemCounter\">\n                        {{ tc('unsavedChanges', 0) }}\n                    </template>\n                    <template v-else>\n                        {{ n(itemCounter) }}\n                        {{ isConfirmationVariant ? tc('unsavedChanges', itemCounter) : label }}\n                    </template>\n                </bento-typography>\n                <bento-button-actions\n                    v-if=\"isConfirmationVariant\"\n                    :actions=\"confirmationActions\"\n                    class=\"b-action-bar__actions\"\n                    inverse\n                />\n                <button-actions-with-menu\n                    v-else\n                    :actions=\"actionsInternal\"\n                    class=\"b-action-bar__actions\"\n                    :displayed-actions=\"internalDisplayedActions\"\n                    menu-position=\"top-end\"\n                    disable-responsive-behavior\n                    inverse\n                />\n            </div>\n        </section>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, type PropType, provide, ref, toRefs, watch } from 'vue';\n    import { BentoButton, BentoButtonActions, type BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n\n    import { type BentoActionBarVariant } from '@/components/action-bar/action-bar.types';\n    import ButtonActionsWithMenu from '@/components/internal/button-actions-with-menu/button-actions-with-menu.vue';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useWindowSize } from '@vueuse/core';\n\n    import messages from './messages.json';\n    import { POPOVER_OFFSET_INJECTION_KEY } from '@/components/popover/popover.keys';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    // Constants\n    const AVERAGE_BUTTON_SIZE = 100;\n    const MENU_OFFSET = 7;\n    const RESPONSIVE_BREAKPOINT = 500;\n    const SPACING = 32;\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * Required and used for the `default` variant.\n         *\n         * Each object in the list should have a `title`, an `event` and,\n         * optionally, an `icon`.\n         *\n         * The component will display 4 actions and the hide the rest inside a menu.\n         *\n         * @see BentoButton for a list of all the other props supported by each button action.\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: () => [],\n        },\n        /**\n         * How many actions should be visible outside the menu, cannot be more than 4\n         */\n        visibleActions: {\n            type: Number,\n            default: 4,\n            validator: (value: number) => value > 0 && value <= 4,\n        },\n        /**\n         * Use when there are sticky elements at the bottom, like sticky pagination\n         */\n        extraBottomSpacing: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Show how many items are selected.\n         * When omitted in the `confirmation` variant, a generic \"Unsaved changes\" label is displayed.\n         */\n        itemCounter: {\n            type: Number,\n            default: null,\n        },\n        /**\n         * Label for the selection, e.g. 'selected'/'changed'\n         */\n        selectionLabel: {\n            type: String,\n            default: null,\n        },\n        /**\n         * Variant for the action bar\n         * @values default, confirmation\n         */\n        variant: {\n            type: String as PropType<BentoActionBarVariant>,\n            default: 'default',\n        },\n    });\n\n    const emit = defineEmits([\"close\", \"cancel\", \"save\"]);\n\n    const { t, tc, n } = useI18n<{ message: MessageSchema }>({ messages });\n    const label = computed(() => (props.selectionLabel ? props.selectionLabel : t('selected')));\n\n    // Refs\n    const actionBar = ref<HTMLDivElement>(null);\n    const { extraBottomSpacing, visibleActions } = toRefs(props);\n    const { width } = useWindowSize();\n    const internalDisplayedActions = ref(null);\n    const internalVisibleActions = ref(null);\n\n    const isConfirmationVariant = computed(() => props.variant === 'confirmation');\n\n    watch(\n        () => visibleActions.value,\n        value => {\n            internalVisibleActions.value = value <= 4 ? value : 4;\n            internalDisplayedActions.value = internalVisibleActions.value;\n        },\n        { immediate: true }\n    );\n\n    // Styling\n    const conditionalClasses = computed(() => ({\n        'b-action-bar--extra-spacing': extraBottomSpacing.value,\n        'b-action-bar--confirmation': isConfirmationVariant.value,\n    }));\n\n    // Provide POPOVER_OFFSET_INJECTION_KEY to change the value of the popover offset\n    provide(POPOVER_OFFSET_INJECTION_KEY, MENU_OFFSET);\n\n    // Manipulate actions array to display as intended\n    const actionsInternal = computed(() => {\n        // All buttons should be of type secondary in the action bar\n        const actions = props.actions.map(action => ({\n            ...action,\n            variant: 'secondary',\n        })) as BentoButtonActionsList;\n        // Shown actions should display from left to right in action bar, instead of right to left which is the button actions default\n        const shownActions = actions.slice(0, internalDisplayedActions.value).reverse();\n        const hiddenActions = actions.slice(internalDisplayedActions.value);\n\n        return [...shownActions, ...hiddenActions];\n    });\n\n    const confirmationActions = computed<BentoButtonActionsList>(() => [\n        {\n            title: t('save'),\n            event: () => emit('save'),\n        },\n        {\n            title: t('cancel'),\n            variant: 'secondary',\n            event: () => emit('cancel'),\n        },\n    ]);\n\n    const noItemCounter = computed(() => {\n        return props.itemCounter == null || props.itemCounter < 1;\n    });\n\n    // Recursive functions to determine how many actions should be visible/hidden based on the screens width\n    const showActions = async () => {\n        await nextTick();\n        if (\n            width.value > actionBar.value.clientWidth + SPACING + AVERAGE_BUTTON_SIZE &&\n            internalDisplayedActions.value < internalVisibleActions.value\n        ) {\n            internalDisplayedActions.value += 1;\n            showActions();\n        }\n    };\n\n    const hideActions = async () => {\n        await nextTick();\n        if (width.value < actionBar.value.clientWidth + SPACING && internalDisplayedActions.value > 0) {\n            internalDisplayedActions.value -= 1;\n            hideActions();\n        }\n    };\n\n    // Screen width watcher to toggle hidden/visible actions\n    watch(\n        () => width.value,\n        async (newValue, oldValue) => {\n            await nextTick();\n            if (!actionBar.value) {\n                return;\n            }\n            const isIncreasing = newValue > oldValue;\n            if (width.value < RESPONSIVE_BREAKPOINT) {\n                internalDisplayedActions.value = 0;\n            } else if (isIncreasing) {\n                showActions();\n            } else {\n                hideActions();\n            }\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Action bar is a floating bar that provides users with quick access to key actions that can be applied to one or multiple items.\n     *\n     * @example\n     * import { BentoActionBar } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoActionBar },\n     *     template: `\n     *          <bento-action-bar\n     *               :actions='[\n     *                   {\n     *                       title: 'Delete',\n     *                       critical: true,\n     *                       icon: BinIcon,\n     *                       event: () => true,\n     *                   },\n     *                   {\n     *                       title: 'Edit',\n     *                       icon: EditIcon,\n     *                       event: () => true,\n     *                   }\n     *               ]'\n     *               @close=\"closeAction\"\n     *               :item-counter=\"5\"\n     *           />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./action-bar.scss\" />\n"],"names":["__default__","messages","AVERAGE_BUTTON_SIZE","MENU_OFFSET","RESPONSIVE_BREAKPOINT","SPACING","t","tc","n","useI18n","label","computed","props","actionBar","ref","extraBottomSpacing","visibleActions","toRefs","width","useWindowSize","internalDisplayedActions","internalVisibleActions","isConfirmationVariant","watch","value","conditionalClasses","provide","POPOVER_OFFSET_INJECTION_KEY","actionsInternal","actions","action","shownActions","hiddenActions","confirmationActions","emit","noItemCounter","showActions","nextTick","hideActions","newValue","oldValue","isIncreasing"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0PIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBApMAC,IAAA,KACAC,IAAA,GACAC,IAAA,KACAC,IAAA,IA4DA,EAAA,GAAAC,GAAA,IAAAC,GAAA,GAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,MAAAC,EAAA,iBAAAA,EAAA,iBAAAN,EAAA,UAAA,CAAA,GAGAO,IAAAC,EAAA,IAAA,GACA,EAAA,oBAAAC,GAAA,gBAAAC,EAAA,IAAAC,EAAAL,CAAA,GACA,EAAA,OAAAM,EAAA,IAAAC,EAAA,GACAC,IAAAN,EAAA,IAAA,GACAO,IAAAP,EAAA,IAAA,GAEAQ,IAAAX,EAAA,MAAAC,EAAA,YAAA,cAAA;AAEA,IAAAW;AAAA,MAAA,MAAAP,EAAA;AAAA,MACyB,CAAAQ,MAAA;AAEjB,QAAAH,EAAA,QAAAG,KAAA,IAAAA,IAAA,GACAJ,EAAA,QAAAC,EAAA;AAAA,MAAwD;AAAA,MAC5D,EAAA,WAAA,GAAA;AAAA,IACkB;AAItB,UAAAI,IAAAd,EAAA,OAAA;AAAA,MAA2C,+BAAAI,EAAA;AAAA,MACW,8BAAAO,EAAA;AAAA,IACE,EAAA;AAIxD,IAAAI,EAAAC,GAAAxB,CAAA;AAGA,UAAAyB,IAAAjB,EAAA,MAAA;AAEI,YAAAkB,IAAAjB,EAAA,QAAA,IAAA,CAAAkB,OAAA;AAAA,QAA6C,GAAAA;AAAA,QACtC,SAAA;AAAA,MACM,EAAA,GAGbC,IAAAF,EAAA,MAAA,GAAAT,EAAA,KAAA,EAAA,QAAA,GACAY,IAAAH,EAAA,MAAAT,EAAA,KAAA;AAEA,aAAA,CAAA,GAAAW,GAAA,GAAAC,CAAA;AAAA,IAAyC,CAAA,GAG7CC,IAAAtB,EAAA,MAAA;AAAA,MAAmE;AAAA,QAC/D,OAAAL,EAAA,MAAA;AAAA,QACmB,OAAA,MAAA4B,EAAA,MAAA;AAAA,MACS;AAAA,MAC5B;AAAA,QACA,OAAA5B,EAAA,QAAA;AAAA,QACqB,SAAA;AAAA,QACR,OAAA,MAAA4B,EAAA,QAAA;AAAA,MACiB;AAAA,IAC9B,CAAA,GAGJC,IAAAxB,EAAA,MACIC,EAAA,eAAA,QAAAA,EAAA,cAAA,CAAwD,GAI5DwB,IAAA,YAAA;AACI,YAAAC,EAAA,GACAnB,EAAA,QAAAL,EAAA,MAAA,cAAAR,IAAAH,KAAAkB,EAAA,QAAAC,EAAA,UAIID,EAAA,SAAA,GACAgB,EAAA;AAAA,IACJ,GAGJE,IAAA,YAAA;AACI,YAAAD,EAAA,GACAnB,EAAA,QAAAL,EAAA,MAAA,cAAAR,KAAAe,EAAA,QAAA,MACIA,EAAA,SAAA,GACAkB,EAAA;AAAA,IACJ;AAIJ,WAAAf;AAAA,MAAA,MAAAL,EAAA;AAAA,MACgB,OAAAqB,GAAAC,MAAA;AAGR,YADA,MAAAH,EAAA,GACA,CAAAxB,EAAA;AACI;AAEJ,cAAA4B,IAAAF,IAAAC;AACA,QAAAtB,EAAA,QAAAd,IACIgB,EAAA,QAAA,IAAiCqB,IAEjCL,EAAA,IAEAE,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{ai-tag.s8TECgn_.js → ai-tag.D5fCswAm.js}

@@ -1,5 +1,5 @@
 import { defineComponent as u, ref as i, watch as _, computed as f } from "vue";
-import { u as v, c as m, h as y } from "./button-actions.VSc47LLH.js";
+import { u as v, c as m, h as y } from "./button-actions.DyPS54Yi.js";
 import { B as I } from "./typography.C8lPlsbD.js";
 import "./index.Cl4_42j5.js";
 import { u as A } from "./index.B6WW_F-J.js";
@@ -79,4 +79,4 @@ const D = P.exports;
 export {
   D as a
 };
-//# sourceMappingURL=ai-tag.s8TECgn_.js.map
+//# sourceMappingURL=ai-tag.D5fCswAm.js.map

package/dist/chunks/{ai-tag.s8TECgn_.js.map → ai-tag.D5fCswAm.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ai-tag.s8TECgn_.js","sources":["../../src/components/ai-tag/ai-tag.vue"],"sourcesContent":["<template>\n    <div ref=\"aiTagRef\" class=\"b-ai-tag\" @keydown.esc=\"closePopover\">\n        <bento-toggle-button\n            ref=\"targetElement\"\n            :toggled=\"toggled\"\n            :aria-controls=\"popoverId\"\n            variant=\"secondary\"\n            condensed\n            class=\"b-ai-tag__trigger\"\n            @update:toggled=\"onToggle\"\n        >\n            <template #iconLeft>\n                <artificial-intelligence-ai-icon class=\"b-ai-tag__trigger-icon\" :aria-hidden=\"true\" />\n            </template>\n            {{ t('ai') }}\n        </bento-toggle-button>\n\n        <bento-popover\n            v-if=\"targetElement\"\n            :id=\"popoverId\"\n            :open=\"toggled\"\n            :target-element=\"targetElement\"\n            :actions=\"popoverActions\"\n            actions-layout=\"fill-container\"\n            :title=\"t('aiExplained')\"\n            trap-all\n            :trap-all-options=\"{ onDeactivate: closePopover, allowOutsideClick: true }\"\n            fixed-positioning\n            overflow-visible\n            @dismiss=\"closePopover\"\n        >\n            <template #headerIcon>\n                <artificial-intelligence-ai-icon class=\"b-ai-tag__popover-header-icon\" :aria-hidden=\"true\" />\n            </template>\n            <div class=\"b-ai-tag__popover-content\">\n                <bento-typography v-if=\"influencedValue\" variant=\"title\" medium class=\"b-ai-tag__influenced-value\">\n                    {{ influencedValue }}\n                </bento-typography>\n\n                <bento-typography variant=\"title\">\n                    {{ title }}\n                </bento-typography>\n\n                <bento-typography>\n                    {{ description }}\n                </bento-typography>\n            </div>\n        </bento-popover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, watch } from 'vue';\n    import { BentoPopover } from '@/components/popover';\n    import { BentoToggleButton } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { useClickOutside } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { generateUid } from '@/core/utils/ts';\n    import type { BentoButtonActionsList } from '@/components/button/components/button-actions/button-actions.types';\n    import ArtificialIntelligenceAiIcon from '@adyen/ui-assets-icons-16/vue/artificial-intelligence-ai-filled';\n    import type { BentoAiTagProps } from './ai-tag.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  title: null,\n  description: null,\n  influencedValue: { default: undefined },\n  toggled: { type: Boolean, default: false },\n  action: { default: undefined }\n});\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const toggled = ref(props.toggled);\n    const aiTagRef = ref<HTMLElement | null>(null);\n    const targetElement = ref<InstanceType<typeof BentoToggleButton> | null>(null);\n    const popoverId = generateUid('b-ai-tag-popover');\n\n    watch(\n        () => props.toggled,\n        value => {\n            toggled.value = value;\n        }\n    );\n\n    useClickOutside(aiTagRef, () => {\n        closePopover();\n    });\n\n    const popoverActions = computed<BentoButtonActionsList>(() =>\n        props.action\n            ? [\n                  {\n                      ...props.action,\n                      variant: 'secondary',\n                  },\n              ]\n            : undefined\n    );\n\n    const emit = defineEmits([\"update:toggled\"]);\n\n    const onToggle = (value: boolean) => {\n        toggled.value = value;\n        emit('update:toggled', value);\n    };\n\n    const closePopover = () => {\n        if (toggled.value) {\n            onToggle(false);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The AI tag is a component used to transparently identify content, data, or experiences that have been generated or\n     * enhanced by artificial intelligence.\n     *\n     * @example\n     * import { BentoAiTag } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAiTag },\n     *     template: `\n     *          <bento-ai-tag\n     *              title=\"Input fields auto-filled by AI\"\n     *              description=\"Based on your documents uploaded, AI has auto-filled some information for you.\"\n     *          />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./ai-tag.scss\" />\n"],"names":["__default__","messages","useI18n","toggled","ref","props","aiTagRef","targetElement","popoverId","generateUid","watch","value","useClickOutside","closePopover","popoverActions","computed","onToggle","emit"],"mappings":";;;;;;;;;;;;;;;;;;;;;;GAuIIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;iBA/DA,EAAA,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAAC,EAAA,OAAA,GACAC,IAAAF,EAAA,IAAA,GACAG,IAAAH,EAAA,IAAA,GACAI,IAAAC,EAAA,kBAAA;AAEA,IAAAC;AAAA,MAAA,MAAAL,EAAA;AAAA,MACgB,CAAAM,MAAA;AAER,QAAAR,EAAA,QAAAQ;AAAA,MAAgB;AAAA,IACpB,GAGJC,EAAAN,GAAA,MAAA;AACI,MAAAO,EAAA;AAAA,IAAa,CAAA;AAGjB,UAAAC,IAAAC;AAAA,MAAuB,MAAAV,EAAA,SAAA;AAAA,QAEb;AAAA,UACI,GAAAA,EAAA;AAAA,UACa,SAAA;AAAA,QACA;AAAA,MACb,IAAA;AAAA,IAEJ,GAKVW,IAAA,CAAAL,MAAA;AACI,MAAAR,EAAA,QAAAQ,GACAM,EAAA,kBAAAN,CAAA;AAAA,IAA4B,GAGhCE,IAAA,MAAA;AACI,MAAAV,EAAA,SACIa,EAAA,EAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ai-tag.D5fCswAm.js","sources":["../../src/components/ai-tag/ai-tag.vue"],"sourcesContent":["<template>\n    <div ref=\"aiTagRef\" class=\"b-ai-tag\" @keydown.esc=\"closePopover\">\n        <bento-toggle-button\n            ref=\"targetElement\"\n            :toggled=\"toggled\"\n            :aria-controls=\"popoverId\"\n            variant=\"secondary\"\n            condensed\n            class=\"b-ai-tag__trigger\"\n            @update:toggled=\"onToggle\"\n        >\n            <template #iconLeft>\n                <artificial-intelligence-ai-icon class=\"b-ai-tag__trigger-icon\" :aria-hidden=\"true\" />\n            </template>\n            {{ t('ai') }}\n        </bento-toggle-button>\n\n        <bento-popover\n            v-if=\"targetElement\"\n            :id=\"popoverId\"\n            :open=\"toggled\"\n            :target-element=\"targetElement\"\n            :actions=\"popoverActions\"\n            actions-layout=\"fill-container\"\n            :title=\"t('aiExplained')\"\n            trap-all\n            :trap-all-options=\"{ onDeactivate: closePopover, allowOutsideClick: true }\"\n            fixed-positioning\n            overflow-visible\n            @dismiss=\"closePopover\"\n        >\n            <template #headerIcon>\n                <artificial-intelligence-ai-icon class=\"b-ai-tag__popover-header-icon\" :aria-hidden=\"true\" />\n            </template>\n            <div class=\"b-ai-tag__popover-content\">\n                <bento-typography v-if=\"influencedValue\" variant=\"title\" medium class=\"b-ai-tag__influenced-value\">\n                    {{ influencedValue }}\n                </bento-typography>\n\n                <bento-typography variant=\"title\">\n                    {{ title }}\n                </bento-typography>\n\n                <bento-typography>\n                    {{ description }}\n                </bento-typography>\n            </div>\n        </bento-popover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, watch } from 'vue';\n    import { BentoPopover } from '@/components/popover';\n    import { BentoToggleButton } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { useClickOutside } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { generateUid } from '@/core/utils/ts';\n    import type { BentoButtonActionsList } from '@/components/button/components/button-actions/button-actions.types';\n    import ArtificialIntelligenceAiIcon from '@adyen/ui-assets-icons-16/vue/artificial-intelligence-ai-filled';\n    import type { BentoAiTagProps } from './ai-tag.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  title: null,\n  description: null,\n  influencedValue: { default: undefined },\n  toggled: { type: Boolean, default: false },\n  action: { default: undefined }\n});\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const toggled = ref(props.toggled);\n    const aiTagRef = ref<HTMLElement | null>(null);\n    const targetElement = ref<InstanceType<typeof BentoToggleButton> | null>(null);\n    const popoverId = generateUid('b-ai-tag-popover');\n\n    watch(\n        () => props.toggled,\n        value => {\n            toggled.value = value;\n        }\n    );\n\n    useClickOutside(aiTagRef, () => {\n        closePopover();\n    });\n\n    const popoverActions = computed<BentoButtonActionsList>(() =>\n        props.action\n            ? [\n                  {\n                      ...props.action,\n                      variant: 'secondary',\n                  },\n              ]\n            : undefined\n    );\n\n    const emit = defineEmits([\"update:toggled\"]);\n\n    const onToggle = (value: boolean) => {\n        toggled.value = value;\n        emit('update:toggled', value);\n    };\n\n    const closePopover = () => {\n        if (toggled.value) {\n            onToggle(false);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The AI tag is a component used to transparently identify content, data, or experiences that have been generated or\n     * enhanced by artificial intelligence.\n     *\n     * @example\n     * import { BentoAiTag } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAiTag },\n     *     template: `\n     *          <bento-ai-tag\n     *              title=\"Input fields auto-filled by AI\"\n     *              description=\"Based on your documents uploaded, AI has auto-filled some information for you.\"\n     *          />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./ai-tag.scss\" />\n"],"names":["__default__","messages","useI18n","toggled","ref","props","aiTagRef","targetElement","popoverId","generateUid","watch","value","useClickOutside","closePopover","popoverActions","computed","onToggle","emit"],"mappings":";;;;;;;;;;;;;;;;;;;;;;GAuIIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;iBA/DA,EAAA,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAAC,EAAA,OAAA,GACAC,IAAAF,EAAA,IAAA,GACAG,IAAAH,EAAA,IAAA,GACAI,IAAAC,EAAA,kBAAA;AAEA,IAAAC;AAAA,MAAA,MAAAL,EAAA;AAAA,MACgB,CAAAM,MAAA;AAER,QAAAR,EAAA,QAAAQ;AAAA,MAAgB;AAAA,IACpB,GAGJC,EAAAN,GAAA,MAAA;AACI,MAAAO,EAAA;AAAA,IAAa,CAAA;AAGjB,UAAAC,IAAAC;AAAA,MAAuB,MAAAV,EAAA,SAAA;AAAA,QAEb;AAAA,UACI,GAAAA,EAAA;AAAA,UACa,SAAA;AAAA,QACA;AAAA,MACb,IAAA;AAAA,IAEJ,GAKVW,IAAA,CAAAL,MAAA;AACI,MAAAR,EAAA,QAAAQ,GACAM,EAAA,kBAAAN,CAAA;AAAA,IAA4B,GAGhCE,IAAA,MAAA;AACI,MAAAV,EAAA,SACIa,EAAA,EAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/anchor-scroller.Cb22EJiL.js

@@ -0,0 +1,177 @@
+import { defineComponent as w, ref as x, computed as m, watch as h, watchEffect as S, toRef as T } from "vue";
+import { f as A, d as B, u as R, g as D, t as y, h as F, r as L } from "./index.CwzYJHw2.js";
+import { p as k, B as M } from "./typography.C8lPlsbD.js";
+import { u as O } from "./index.B6WW_F-J.js";
+import { g as j } from "./generate-uid.NJ8tVoha.js";
+import { u as g } from "./utils.BzUwtTXc.js";
+import { B as E } from "./button.Ctj3rkxw.js";
+import { n as C } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { F as N } from "./fixed-scroller.BueAsyGk.js";
+import "../assets/anchor-scroller.css";
+const H = /* @__PURE__ */ w({
+  __name: "anchor-scroller-list",
+  props: {
+    activeIndex: { default: void 0 },
+    items: null,
+    scrollOffset: { default: void 0 }
+  },
+  setup(p) {
+    const e = p, n = x([]), t = m(
+      () => e.items.map((r, u) => ({ disabled: r.disabled, originalIndex: u })).filter(({ disabled: r }) => !r).map(({ originalIndex: r }) => r)
+    ), {
+      state: c,
+      next: i,
+      prev: l
+    } = A(t, {
+      initialValue: e.activeIndex ?? t.value[0]
+    });
+    return h(c, async (r) => {
+      const u = n.value[r], a = g(u);
+      a && typeof a.focus == "function" && a.focus();
+    }), { __sfc: !0, props: e, listItemRefs: n, listIndices: t, focusedIndex: c, next: i, prev: l, scrollToSection: (r, u) => {
+      if (u)
+        return;
+      const a = g(r);
+      if (!a) {
+        k("[bento-anchor-scroller] element ref not found");
+        return;
+      }
+      if (!a.style.scrollMarginTop && e.scrollOffset) {
+        const f = window.getComputedStyle(a).scrollMarginTop;
+        (f === "0px" || f === "") && (a.style.scrollMarginTop = `${e.scrollOffset}px`);
+      }
+      a.hasAttribute("tabindex") || a.setAttribute("tabindex", "-1"), a.scrollIntoView({
+        behavior: "smooth",
+        block: "start",
+        inline: "nearest"
+      }), a.focus({ preventScroll: !0 });
+    }, onKeydownNavigation: (r) => {
+      switch (r.key) {
+        case "ArrowRight":
+          r.preventDefault(), i();
+          break;
+        case "ArrowLeft":
+          r.preventDefault(), l();
+          break;
+        case "Home":
+          r.preventDefault(), c.value = 0;
+          break;
+        case "End":
+          r.preventDefault(), c.value = t.value.length - 1;
+          break;
+      }
+    }, BentoButton: E };
+  }
+});
+var V = function() {
+  var e = this, n = e._self._c, t = e._self._setupProxy;
+  return n("ul", { staticClass: "b-anchor-scroller-list", on: { keydown: t.onKeydownNavigation } }, e._l(e.items, function({ title: c, disabled: i, elementRef: l }, d) {
+    return n("li", { key: d, staticClass: "b-anchor-scroller-list__item" }, [n(t.BentoButton, { ref: "listItemRefs", refInFor: !0, staticClass: "b-anchor-scroller-list__item-button", class: {
+      "b-anchor-scroller-list__item-button--active": e.activeIndex === d,
+      "b-anchor-scroller-list__item-button--disabled": i
+    }, attrs: { "aria-current": e.activeIndex === d ? "location" : null, "aria-disabled": i, tabindex: e.activeIndex === d ? null : "-1", variant: "tertiary-with-background" }, on: { click: function(s) {
+      return t.scrollToSection(l, i);
+    } }, nativeOn: { keydown: [function(s) {
+      return !s.type.indexOf("key") && e._k(s.keyCode, "space", 32, s.key, [" ", "Spacebar"]) ? null : (s.preventDefault(), t.scrollToSection(l, i));
+    }, function(s) {
+      return !s.type.indexOf("key") && e._k(s.keyCode, "enter", 13, s.key, "Enter") ? null : (s.preventDefault(), t.scrollToSection(l, i));
+    }] } }, [e._v(" " + e._s(c) + " ")])], 1);
+  }), 0);
+}, K = [], P = /* @__PURE__ */ C(
+  H,
+  V,
+  K,
+  !1,
+  null,
+  "5668c5f7"
+);
+const W = P.exports, z = {
+  "en-US": {
+    jumpTo: "Jump to"
+  },
+  "ja-JP": {
+    jumpTo: "移動先"
+  },
+  "pt-BR": {
+    jumpTo: "Ir para"
+  }
+}, J = (p, e) => {
+  var l;
+  const n = x(((l = e.default) == null ? void 0 : l.value) ?? -1), { y: t } = B(), { height: c } = R(), i = () => {
+    const d = y(p), s = c.value, r = s / 2;
+    let u = -1, a = 0;
+    for (let f = 0; f < d.length; f++) {
+      const v = d[f];
+      if (!v)
+        continue;
+      const o = v.getBoundingClientRect();
+      if (o.top > r)
+        continue;
+      const _ = Math.min(o.bottom, s) - Math.max(o.top, 0);
+      if (_ <= 0)
+        continue;
+      const I = _ / o.height;
+      I > a && (a = I, u = f);
+    }
+    u !== -1 && n.value !== u && (n.value = u);
+  };
+  return D([t, c], i, { throttle: 100, trailing: !0 }), S(() => {
+    y(p).length && i();
+  }), {
+    activeIndex: n
+  };
+}, U = {
+  i18n: { messages: z },
+  name: "bento-anchor-scroller"
+}, Y = /* @__PURE__ */ w({
+  ...U,
+  props: {
+    activeIndex: { default: void 0 },
+    items: null
+  },
+  emits: ["update:active-index"],
+  setup(p, { emit: e }) {
+    const n = p, { t } = O(), c = x(null), i = m(() => n.items.map((o) => ({ ...o }))), l = m(
+      () => n.items.map((o, _) => ({
+        element: g(o.elementRef),
+        originalIndex: _,
+        disabled: o.disabled
+      })).filter(
+        (o) => !o.disabled && !!o.element
+      )
+    ), { top: d, bottom: s } = F(c), r = m(() => l.value.map((o) => o.element)), u = m(() => ({
+      "b-anchor-scroller__navigation--pinned": d.value <= 1
+    })), { activeIndex: a } = J(r, {
+      default: T(n, "activeIndex")
+    }), f = L(a, 200), b = m(() => {
+      const o = l.value[f.value];
+      return o ? o.originalIndex : 0;
+    });
+    h(b, (o) => {
+      Number.isFinite(o) && e("update:active-index", o);
+    }), h(
+      () => n.activeIndex,
+      (o) => {
+        Number.isFinite(o) && i.value[o].disabled && k("[bento-anchor-scroller] activeIndex should not be a disabled item");
+      }
+    );
+    const v = j("bento-anchor-scroller-label");
+    return { __sfc: !0, t, props: n, emit: e, navigationRef: c, computedItems: i, enabledItems: l, top: d, bottom: s, scrollToTargets: r, navigationConditionalClasses: u, relativeActiveIndex: a, debouncedActiveIndex: f, currentActiveIndex: b, navLabelId: v, BentoTypography: M, FixedScroller: N, AnchorScrollerList: W };
+  }
+});
+var q = function() {
+  var e = this, n = e._self._c, t = e._self._setupProxy;
+  return t.computedItems.length ? n("div", { staticClass: "b-anchor-scroller" }, [n("nav", { ref: "navigationRef", staticClass: "b-anchor-scroller__navigation", class: t.navigationConditionalClasses, attrs: { "aria-labelledby": t.navLabelId } }, [n(t.FixedScroller, { attrs: { condensed: "", centered: "" } }, [n("div", { staticClass: "b-anchor-scroller__navigation-panel" }, [n(t.BentoTypography, { staticClass: "b-anchor-scroller__navigation-panel-label", attrs: { id: t.navLabelId, el: "span", stronger: "" } }, [e._v(" " + e._s(t.t("jumpTo")) + " ")]), n(t.AnchorScrollerList, { attrs: { items: t.computedItems, "active-index": t.currentActiveIndex, "scroll-offset": t.bottom } })], 1)])], 1), e._t("default")], 2) : e._e();
+}, G = [], Q = /* @__PURE__ */ C(
+  Y,
+  q,
+  G,
+  !1,
+  null,
+  "ae16e25c"
+);
+const se = Q.exports;
+export {
+  se as a
+};
+//# sourceMappingURL=anchor-scroller.Cb22EJiL.js.map

package/dist/chunks/{anchor-scroller.3_idPubO.js.map → anchor-scroller.Cb22EJiL.js.map}

@@ -1 +1 @@
-{"version":3,"file":"anchor-scroller.3_idPubO.js","sources":["../../src/components/anchor-scroller/components/anchor-scroller-list/anchor-scroller-list.vue","../../src/components/anchor-scroller/composables/use-scroll-spy/use-scroll-spy.ts","../../src/components/anchor-scroller/anchor-scroller.vue"],"sourcesContent":["<template>\n    <ul class=\"b-anchor-scroller-list\" @keydown=\"onKeydownNavigation\">\n        <li v-for=\"({ title, disabled, elementRef }, index) in items\" :key=\"index\" class=\"b-anchor-scroller-list__item\">\n            <bento-button\n                ref=\"listItemRefs\"\n                :aria-current=\"activeIndex === index ? 'location' : null\"\n                class=\"b-anchor-scroller-list__item-button\"\n                :class=\"{\n                    'b-anchor-scroller-list__item-button--active': activeIndex === index,\n                    'b-anchor-scroller-list__item-button--disabled': disabled,\n                }\"\n                :aria-disabled=\"disabled\"\n                :tabindex=\"activeIndex === index ? null : '-1'\"\n                variant=\"tertiary-with-background\"\n                @click=\"scrollToSection(elementRef, disabled)\"\n                @keydown.space.native.prevent=\"scrollToSection(elementRef, disabled)\"\n                @keydown.enter.native.prevent=\"scrollToSection(elementRef, disabled)\"\n            >\n                {{ title }}\n            </bento-button>\n        </li>\n    </ul>\n</template>\n\n<script setup lang=\"ts\">\n    import BentoButton from '@/components/button/button.vue';\n    import { unrefElement } from '@/directives/click-outside/utils';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n    import { type BentoAnchorScrollerItem } from '../../anchor-scroller.types';\n    import { type AnchorScrollerListProps } from './anchor-scroller-list.types';\n    import { computed, ref, watch } from 'vue';\n    import { useCycleList } from '@vueuse/core';\n\n    const props = defineProps({\n  activeIndex: { default: undefined },\n  items: null,\n  scrollOffset: { default: undefined }\n});\n\n    const listItemRefs = ref([]);\n    const listIndices = computed(() =>\n        props.items\n            .map((item, index) => ({ disabled: item.disabled, originalIndex: index }))\n            .filter(({ disabled }) => !disabled)\n            .map(({ originalIndex }) => originalIndex)\n    );\n\n    const {\n        state: focusedIndex,\n        next,\n        prev,\n    } = useCycleList(listIndices, {\n        initialValue: props.activeIndex ?? listIndices.value[0],\n    });\n\n    watch(focusedIndex, async newIndex => {\n        const targetComponent = listItemRefs.value[newIndex];\n        const el = unrefElement(targetComponent); // Handles Component or DOM node\n\n        if (el && typeof el.focus === 'function') {\n            el.focus();\n        }\n    });\n\n    const scrollToSection = (elementRef: BentoAnchorScrollerItem['elementRef'], disabled?: boolean) => {\n        if (disabled) {\n            return;\n        }\n\n        const el = unrefElement(elementRef);\n\n        if (!el) {\n            printDevelopmentWarning(`[bento-anchor-scroller] element ref not found`);\n            return;\n        }\n\n        if (!el.style.scrollMarginTop && props.scrollOffset) {\n            const currentScrollMargin = window.getComputedStyle(el).scrollMarginTop;\n\n            if (currentScrollMargin === '0px' || currentScrollMargin === '') {\n                el.style.scrollMarginTop = `${props.scrollOffset}px`;\n            }\n        }\n\n        if (!el.hasAttribute('tabindex')) {\n            el.setAttribute('tabindex', '-1');\n        }\n\n        el.scrollIntoView({\n            behavior: 'smooth',\n            block: 'start',\n            inline: 'nearest',\n        });\n\n        el.focus({ preventScroll: true });\n    };\n\n    const onKeydownNavigation = (e: KeyboardEvent) => {\n        switch (e.key) {\n            case 'ArrowRight':\n                e.preventDefault();\n                next();\n                break;\n            case 'ArrowLeft':\n                e.preventDefault();\n                prev();\n                break;\n            case 'Home':\n                e.preventDefault();\n                focusedIndex.value = 0;\n                break;\n            case 'End':\n                e.preventDefault();\n                focusedIndex.value = listIndices.value.length - 1;\n                break;\n        }\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./anchor-scroller-list.scss\" />\n","import { type Ref, ref, watchEffect } from 'vue';\nimport { type MaybeRef, toValue, useWindowScroll, useWindowSize, watchThrottled } from '@vueuse/core';\n\n/**\n * Options for the useScrollSpy composable.\n */\nexport interface useScrollSpyOptions {\n    /**\n     * The default active index to use when no item is active or initially.\n     */\n    default?: Ref<number>;\n}\n\n/**\n * Composable to spy on scroll position and determine the active item based on visibility.\n *\n * @param items - The list of elements to spy on.\n * @param options - Configuration options for the scroll spy.\n * @returns An object containing the active index.\n */\nexport const useScrollSpy = (items: MaybeRef<Array<Element>>, options: useScrollSpyOptions) => {\n    const activeIndex = ref(options.default?.value ?? -1);\n\n    const { y: scrollY } = useWindowScroll();\n    const { height: windowHeight } = useWindowSize();\n\n    // Logic to find the \"winner\" when there are multiple items on the same page\n    const calculateActiveIndex = () => {\n        const list = toValue(items);\n        const viewportHeight = windowHeight.value;\n        const midpoint = viewportHeight / 2;\n\n        let winnerIndex = -1;\n        let maxVisibleRatio = 0;\n\n        for (let i = 0; i < list.length; i++) {\n            const item = list[i];\n            const el = item;\n\n            if (!el) {\n                continue;\n            }\n\n            const rect = el.getBoundingClientRect();\n\n            // Constraint 1: Must pass midpoint\n            if (rect.top > midpoint) {\n                continue;\n            }\n\n            // Constraint 2: Must be visible\n            const visibleHeight = Math.min(rect.bottom, viewportHeight) - Math.max(rect.top, 0);\n            if (visibleHeight <= 0) {\n                continue;\n            }\n\n            // Constraint 3: Highest visible % wins\n            const ratio = visibleHeight / rect.height;\n\n            if (ratio > maxVisibleRatio) {\n                maxVisibleRatio = ratio;\n                winnerIndex = i;\n            }\n        }\n\n        // Only update if changed to avoid unnecessary patch triggers\n        if (winnerIndex !== -1 && activeIndex.value !== winnerIndex) {\n            activeIndex.value = winnerIndex;\n        }\n    };\n\n    watchThrottled([scrollY, windowHeight], calculateActiveIndex, { throttle: 100, trailing: true });\n\n    watchEffect(() => {\n        if (toValue(items).length) {\n            calculateActiveIndex();\n        }\n    });\n\n    return {\n        activeIndex,\n    };\n};\n","<template>\n    <div v-if=\"computedItems.length\" class=\"b-anchor-scroller\">\n        <nav\n            ref=\"navigationRef\"\n            class=\"b-anchor-scroller__navigation\"\n            :class=\"navigationConditionalClasses\"\n            :aria-labelledby=\"navLabelId\"\n        >\n            <fixed-scroller condensed centered>\n                <div class=\"b-anchor-scroller__navigation-panel\">\n                    <bento-typography\n                        :id=\"navLabelId\"\n                        el=\"span\"\n                        class=\"b-anchor-scroller__navigation-panel-label\"\n                        stronger\n                    >\n                        {{ t('jumpTo') }}\n                    </bento-typography>\n\n                    <anchor-scroller-list\n                        :items=\"computedItems\"\n                        :active-index=\"currentActiveIndex\"\n                        :scroll-offset=\"bottom\"\n                    />\n                </div>\n            </fixed-scroller>\n        </nav>\n\n        <slot />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, toRef, watch } from 'vue';\n    import { useElementBounding, watchDebounced } from '@vueuse/core';\n    import BentoTypography from '@/components/typography/typography.vue';\n    import { FixedScroller } from '@/internal';\n    import { type BentoAnchorScrollerItem, type BentoAnchorScrollerProps } from './anchor-scroller.types';\n    import { AnchorScrollerList } from './components/anchor-scroller-list';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { generateUid } from '@/core/utils/ts';\n    import { unrefElement } from '@/directives/click-outside/utils';\n    import messages from './messages.json';\n    import { useScrollSpy } from './composables';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  activeIndex: { default: undefined },\n  items: null\n});\n\n    const emit = defineEmits([\"update:active-index\"]);\n\n    const navigationRef = ref(null);\n\n    const computedItems = computed<Array<BentoAnchorScrollerItem>>(() => props.items.map(item => ({ ...item })));\n\n    // Skip and cache only items that are enabled\n    const enabledItems = computed(() =>\n        props.items\n            .map((item, originalIndex) => ({\n                element: unrefElement(item.elementRef),\n                originalIndex,\n                disabled: item.disabled,\n            }))\n            .filter(\n                (item): item is { element: Element; originalIndex: number; disabled: boolean } =>\n                    !item.disabled && !!item.element\n            )\n    );\n\n    // Extract strictly the elements for the ScrollSpy to watch\n    const scrollToTargets = computed(() => enabledItems.value.map(c => c.element));\n\n    const navigationConditionalClasses = computed(() => ({\n        'b-anchor-scroller__navigation--pinned': top.value <= 1,\n    }));\n\n    const currentActiveIndex = computed(() => {\n        const candidate = enabledItems.value[relativeActiveIndex.value];\n\n        return candidate ? candidate.originalIndex : 0;\n    });\n\n    const { activeIndex: relativeActiveIndex } = useScrollSpy(scrollToTargets, {\n        default: toRef(props, 'activeIndex'),\n    });\n\n    const { top, bottom } = useElementBounding(navigationRef);\n\n    watchDebounced(\n        currentActiveIndex,\n        val => {\n            if (Number.isFinite(val)) {\n                emit('update:active-index', val);\n            }\n        },\n        {\n            debounce: 250, // ensure that if you are scrolling through multiple sections quickly, it fires only once.\n        }\n    );\n\n    watch(\n        () => props.activeIndex,\n        val => {\n            if (Number.isFinite(val) && computedItems.value[val].disabled) {\n                printDevelopmentWarning(`[bento-anchor-scroller] activeIndex should not be a disabled item`);\n            }\n        }\n    );\n\n    const navLabelId = generateUid('bento-anchor-scroller-label');\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A navigation component that tracks page scroll and allows jumping to sections.\n     *\n     * @example\n     * import { BentoAnchorScroller } from '@adyen/bento-vue2';\n     * import { ref } from 'vue';\n     *\n     * export default {\n     *     components: { BentoAnchorScroller },\n     *     template: `\n     *          <bento-anchor-scroller :items=\"items\">\n     *              <section ref=\"section1\">Section 1</section>\n     *              <section ref=\"section2\">Section 2</section>\n     *          </bento-anchor-scroller>\n     *     `,\n     *      setup() {\n     *          const section1 = ref(null);\n     *          const section2 = ref(null);\n     *          const items = ref([\n     *              { title: 'Section 1', elementRef: section1 },\n     *              { title: 'Section 2', elementRef: section2 },\n     *          ]);\n     *          return {\n     *              items,\n     *              section1,\n     *              section2,\n     *          }\n     *      }\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-anchor-scroller',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./anchor-scroller.scss\" />\n"],"names":["listItemRefs","ref","listIndices","computed","props","item","index","disabled","originalIndex","focusedIndex","next","prev","useCycleList","watch","newIndex","targetComponent","el","unrefElement","elementRef","printDevelopmentWarning","currentScrollMargin","e","useScrollSpy","items","options","activeIndex","_a","scrollY","useWindowScroll","windowHeight","useWindowSize","calculateActiveIndex","list","toValue","viewportHeight","midpoint","winnerIndex","maxVisibleRatio","i","rect","visibleHeight","ratio","watchThrottled","watchEffect","__default__","messages","useI18n","navigationRef","computedItems","enabledItems","scrollToTargets","c","navigationConditionalClasses","top","currentActiveIndex","candidate","relativeActiveIndex","toRef","bottom","useElementBounding","watchDebounced","val","emit","navLabelId","generateUid"],"mappings":"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"}
+{"version":3,"file":"anchor-scroller.Cb22EJiL.js","sources":["../../src/components/anchor-scroller/components/anchor-scroller-list/anchor-scroller-list.vue","../../src/components/anchor-scroller/composables/use-scroll-spy/use-scroll-spy.ts","../../src/components/anchor-scroller/anchor-scroller.vue"],"sourcesContent":["<template>\n    <ul class=\"b-anchor-scroller-list\" @keydown=\"onKeydownNavigation\">\n        <li v-for=\"({ title, disabled, elementRef }, index) in items\" :key=\"index\" class=\"b-anchor-scroller-list__item\">\n            <bento-button\n                ref=\"listItemRefs\"\n                :aria-current=\"activeIndex === index ? 'location' : null\"\n                class=\"b-anchor-scroller-list__item-button\"\n                :class=\"{\n                    'b-anchor-scroller-list__item-button--active': activeIndex === index,\n                    'b-anchor-scroller-list__item-button--disabled': disabled,\n                }\"\n                :aria-disabled=\"disabled\"\n                :tabindex=\"activeIndex === index ? null : '-1'\"\n                variant=\"tertiary-with-background\"\n                @click=\"scrollToSection(elementRef, disabled)\"\n                @keydown.space.native.prevent=\"scrollToSection(elementRef, disabled)\"\n                @keydown.enter.native.prevent=\"scrollToSection(elementRef, disabled)\"\n            >\n                {{ title }}\n            </bento-button>\n        </li>\n    </ul>\n</template>\n\n<script setup lang=\"ts\">\n    import BentoButton from '@/components/button/button.vue';\n    import { unrefElement } from '@/directives/click-outside/utils';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n    import { type BentoAnchorScrollerItem } from '../../anchor-scroller.types';\n    import { type AnchorScrollerListProps } from './anchor-scroller-list.types';\n    import { computed, ref, watch } from 'vue';\n    import { useCycleList } from '@vueuse/core';\n\n    const props = defineProps({\n  activeIndex: { default: undefined },\n  items: null,\n  scrollOffset: { default: undefined }\n});\n\n    const listItemRefs = ref([]);\n    const listIndices = computed(() =>\n        props.items\n            .map((item, index) => ({ disabled: item.disabled, originalIndex: index }))\n            .filter(({ disabled }) => !disabled)\n            .map(({ originalIndex }) => originalIndex)\n    );\n\n    const {\n        state: focusedIndex,\n        next,\n        prev,\n    } = useCycleList(listIndices, {\n        initialValue: props.activeIndex ?? listIndices.value[0],\n    });\n\n    watch(focusedIndex, async newIndex => {\n        const targetComponent = listItemRefs.value[newIndex];\n        const el = unrefElement(targetComponent); // Handles Component or DOM node\n\n        if (el && typeof el.focus === 'function') {\n            el.focus();\n        }\n    });\n\n    const scrollToSection = (elementRef: BentoAnchorScrollerItem['elementRef'], disabled?: boolean) => {\n        if (disabled) {\n            return;\n        }\n\n        const el = unrefElement(elementRef);\n\n        if (!el) {\n            printDevelopmentWarning(`[bento-anchor-scroller] element ref not found`);\n            return;\n        }\n\n        if (!el.style.scrollMarginTop && props.scrollOffset) {\n            const currentScrollMargin = window.getComputedStyle(el).scrollMarginTop;\n\n            if (currentScrollMargin === '0px' || currentScrollMargin === '') {\n                el.style.scrollMarginTop = `${props.scrollOffset}px`;\n            }\n        }\n\n        if (!el.hasAttribute('tabindex')) {\n            el.setAttribute('tabindex', '-1');\n        }\n\n        el.scrollIntoView({\n            behavior: 'smooth',\n            block: 'start',\n            inline: 'nearest',\n        });\n\n        el.focus({ preventScroll: true });\n    };\n\n    const onKeydownNavigation = (e: KeyboardEvent) => {\n        switch (e.key) {\n            case 'ArrowRight':\n                e.preventDefault();\n                next();\n                break;\n            case 'ArrowLeft':\n                e.preventDefault();\n                prev();\n                break;\n            case 'Home':\n                e.preventDefault();\n                focusedIndex.value = 0;\n                break;\n            case 'End':\n                e.preventDefault();\n                focusedIndex.value = listIndices.value.length - 1;\n                break;\n        }\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./anchor-scroller-list.scss\" />\n","import { type Ref, ref, watchEffect } from 'vue';\nimport { type MaybeRef, toValue, useWindowScroll, useWindowSize, watchThrottled } from '@vueuse/core';\n\n/**\n * Options for the useScrollSpy composable.\n */\nexport interface useScrollSpyOptions {\n    /**\n     * The default active index to use when no item is active or initially.\n     */\n    default?: Ref<number>;\n}\n\n/**\n * Composable to spy on scroll position and determine the active item based on visibility.\n *\n * @param items - The list of elements to spy on.\n * @param options - Configuration options for the scroll spy.\n * @returns An object containing the active index.\n */\nexport const useScrollSpy = (items: MaybeRef<Array<Element>>, options: useScrollSpyOptions) => {\n    const activeIndex = ref(options.default?.value ?? -1);\n\n    const { y: scrollY } = useWindowScroll();\n    const { height: windowHeight } = useWindowSize();\n\n    // Logic to find the \"winner\" when there are multiple items on the same page\n    const calculateActiveIndex = () => {\n        const list = toValue(items);\n        const viewportHeight = windowHeight.value;\n        const midpoint = viewportHeight / 2;\n\n        let winnerIndex = -1;\n        let maxVisibleRatio = 0;\n\n        for (let i = 0; i < list.length; i++) {\n            const item = list[i];\n            const el = item;\n\n            if (!el) {\n                continue;\n            }\n\n            const rect = el.getBoundingClientRect();\n\n            // Constraint 1: Must pass midpoint\n            if (rect.top > midpoint) {\n                continue;\n            }\n\n            // Constraint 2: Must be visible\n            const visibleHeight = Math.min(rect.bottom, viewportHeight) - Math.max(rect.top, 0);\n            if (visibleHeight <= 0) {\n                continue;\n            }\n\n            // Constraint 3: Highest visible % wins\n            const ratio = visibleHeight / rect.height;\n\n            if (ratio > maxVisibleRatio) {\n                maxVisibleRatio = ratio;\n                winnerIndex = i;\n            }\n        }\n\n        // Only update if changed to avoid unnecessary patch triggers\n        if (winnerIndex !== -1 && activeIndex.value !== winnerIndex) {\n            activeIndex.value = winnerIndex;\n        }\n    };\n\n    watchThrottled([scrollY, windowHeight], calculateActiveIndex, { throttle: 100, trailing: true });\n\n    watchEffect(() => {\n        if (toValue(items).length) {\n            calculateActiveIndex();\n        }\n    });\n\n    return {\n        activeIndex,\n    };\n};\n","<template>\n    <div v-if=\"computedItems.length\" class=\"b-anchor-scroller\">\n        <nav\n            ref=\"navigationRef\"\n            class=\"b-anchor-scroller__navigation\"\n            :class=\"navigationConditionalClasses\"\n            :aria-labelledby=\"navLabelId\"\n        >\n            <fixed-scroller condensed centered>\n                <div class=\"b-anchor-scroller__navigation-panel\">\n                    <bento-typography\n                        :id=\"navLabelId\"\n                        el=\"span\"\n                        class=\"b-anchor-scroller__navigation-panel-label\"\n                        stronger\n                    >\n                        {{ t('jumpTo') }}\n                    </bento-typography>\n\n                    <anchor-scroller-list\n                        :items=\"computedItems\"\n                        :active-index=\"currentActiveIndex\"\n                        :scroll-offset=\"bottom\"\n                    />\n                </div>\n            </fixed-scroller>\n        </nav>\n\n        <slot />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, toRef, watch } from 'vue';\n    import { refDebounced, useElementBounding } from '@vueuse/core';\n    import BentoTypography from '@/components/typography/typography.vue';\n    import { FixedScroller } from '@/internal';\n    import { type BentoAnchorScrollerItem, type BentoAnchorScrollerProps } from './anchor-scroller.types';\n    import { AnchorScrollerList } from './components/anchor-scroller-list';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { generateUid } from '@/core/utils/ts';\n    import { unrefElement } from '@/directives/click-outside/utils';\n    import messages from './messages.json';\n    import { useScrollSpy } from './composables';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  activeIndex: { default: undefined },\n  items: null\n});\n\n    const emit = defineEmits([\"update:active-index\"]);\n\n    const navigationRef = ref(null);\n\n    const computedItems = computed<Array<BentoAnchorScrollerItem>>(() => props.items.map(item => ({ ...item })));\n\n    // Skip and cache only items that are enabled\n    const enabledItems = computed(() =>\n        props.items\n            .map((item, originalIndex) => ({\n                element: unrefElement(item.elementRef),\n                originalIndex,\n                disabled: item.disabled,\n            }))\n            .filter(\n                (item): item is { element: Element; originalIndex: number; disabled: boolean } =>\n                    !item.disabled && !!item.element\n            )\n    );\n\n    const { top, bottom } = useElementBounding(navigationRef);\n\n    // Extract strictly the elements for the ScrollSpy to watch\n    const scrollToTargets = computed(() => enabledItems.value.map(c => c.element));\n\n    const navigationConditionalClasses = computed(() => ({\n        'b-anchor-scroller__navigation--pinned': top.value <= 1,\n    }));\n\n    const { activeIndex: relativeActiveIndex } = useScrollSpy(scrollToTargets, {\n        default: toRef(props, 'activeIndex'),\n    });\n\n    const debouncedActiveIndex = refDebounced(relativeActiveIndex, 200);\n\n    const currentActiveIndex = computed(() => {\n        const candidate = enabledItems.value[debouncedActiveIndex.value];\n\n        return candidate ? candidate.originalIndex : 0;\n    });\n\n    watch(currentActiveIndex, val => {\n        if (Number.isFinite(val)) {\n            emit('update:active-index', val);\n        }\n    });\n\n    watch(\n        () => props.activeIndex,\n        val => {\n            if (Number.isFinite(val) && computedItems.value[val].disabled) {\n                printDevelopmentWarning(`[bento-anchor-scroller] activeIndex should not be a disabled item`);\n            }\n        }\n    );\n\n    const navLabelId = generateUid('bento-anchor-scroller-label');\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A navigation component that tracks page scroll and allows jumping to sections.\n     *\n     * @example\n     * import { BentoAnchorScroller } from '@adyen/bento-vue2';\n     * import { ref } from 'vue';\n     *\n     * export default {\n     *     components: { BentoAnchorScroller },\n     *     template: `\n     *          <bento-anchor-scroller :items=\"items\">\n     *              <section ref=\"section1\">Section 1</section>\n     *              <section ref=\"section2\">Section 2</section>\n     *          </bento-anchor-scroller>\n     *     `,\n     *      setup() {\n     *          const section1 = ref(null);\n     *          const section2 = ref(null);\n     *          const items = ref([\n     *              { title: 'Section 1', elementRef: section1 },\n     *              { title: 'Section 2', elementRef: section2 },\n     *          ]);\n     *          return {\n     *              items,\n     *              section1,\n     *              section2,\n     *          }\n     *      }\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-anchor-scroller',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./anchor-scroller.scss\" />\n"],"names":["listItemRefs","ref","listIndices","computed","props","item","index","disabled","originalIndex","focusedIndex","next","prev","useCycleList","watch","newIndex","targetComponent","el","unrefElement","elementRef","printDevelopmentWarning","currentScrollMargin","e","useScrollSpy","items","options","activeIndex","_a","scrollY","useWindowScroll","windowHeight","useWindowSize","calculateActiveIndex","list","toValue","viewportHeight","midpoint","winnerIndex","maxVisibleRatio","i","rect","visibleHeight","ratio","watchThrottled","watchEffect","__default__","messages","useI18n","navigationRef","computedItems","enabledItems","top","bottom","useElementBounding","scrollToTargets","c","navigationConditionalClasses","relativeActiveIndex","toRef","debouncedActiveIndex","refDebounced","currentActiveIndex","candidate","val","emit","navLabelId","generateUid"],"mappings":"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"}

package/dist/chunks/{base-modal.09nAcnF_.js → base-modal.CUSvvYnk.js}

@@ -1,17 +1,17 @@
 import { defineComponent as T, useSlots as Y, ref as r, computed as l, inject as Q, watch as w, nextTick as X, onUnmounted as Z, useAttrs as V, onMounted as tt, provide as D, toRefs as et } from "vue";
 import { B as at } from "./button.Ctj3rkxw.js";
-import { B as ot } from "./focus-trap.DMc1wL3A.js";
-import { u as j } from "./use-has-slot.C9lQZ6nz.js";
+import { B as ot } from "./focus-trap.DRqjHzt6.js";
+import { u as q } from "./use-has-slot.C9lQZ6nz.js";
 import { u as nt } from "./index.B6WW_F-J.js";
-import { j as st } from "./button-actions.VSc47LLH.js";
+import { l as st } from "./button-actions.DyPS54Yi.js";
 import { g as lt } from "./generate-uid.NJ8tVoha.js";
 import { C as it } from "./cross.CC_B-vG-.js";
-import { b as ut, B as ct, D as rt, a as dt } from "./dialog-page.DA6E6qma.js";
+import { b as ut, B as ct, D as rt, a as dt } from "./dialog-page.4deowaF2.js";
 import { B as mt } from "./typography.C8lPlsbD.js";
-import { F as pt } from "./footer-actions.z-api8J_.js";
+import { F as pt } from "./footer-actions.Dq82H1Oc.js";
 import { o as ft } from "./resize.Bqks3WUm.js";
 import { a as gt, G as _t } from "./grid-layout.1aIiz2N_.js";
-import { n as q } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { n as W } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { B as vt } from "./directive.rXUeDb8p.js";
 import "../assets/base-modal.css";
 var yt = /* @__PURE__ */ ((a) => (a.DEFAULT = "default", a.DIALOG = "dialog", a))(yt || {}), Ct = /* @__PURE__ */ ((a) => (a.DEFAULT = "BentoModalDefault", a.DIALOG = "BentoModalDialog", a))(Ct || {}), G = /* @__PURE__ */ ((a) => (a.SMALL = "small", a.MEDIUM = "medium", a.LARGE = "large", a))(G || {}), E = /* @__PURE__ */ ((a) => (a.SMALLER = "smaller", a.EQUAL = "equal", a.BIGGER = "bigger", a))(E || {}), F = /* @__PURE__ */ ((a) => (a.DIALOG = "dialog", a.ALERT_DIALOG = "alertdialog", a))(F || {}), ht = /* @__PURE__ */ ((a) => (a.CONFIRMATION = "confirmation", a.DESTRUCTIVE = "destructive", a.INFO = "info", a.ACKNOWLEDGEMENT = "acknowledgement", a))(ht || {}), bt = /* @__PURE__ */ ((a) => (a.CLOSE_MODAL = "close-modal", a))(bt || {});
@@ -28,7 +28,7 @@ const Lt = {
     ariaLabelFallback: "modal",
     close: "Fechar"
   }
-}, W = /* @__PURE__ */ Symbol("modal config data injection key"), At = T({}), Pt = /* @__PURE__ */ T({
+}, j = /* @__PURE__ */ Symbol("modal config data injection key"), At = T({}), Pt = /* @__PURE__ */ T({
   ...At,
   __name: "modal-page",
   props: {
@@ -42,7 +42,7 @@ const Lt = {
     previousPage: { default: void 0 }
   },
   setup(a) {
-    const e = a, o = 26, t = Y(), n = j(t), d = r(null), O = l(() => ({
+    const e = a, o = 26, t = Y(), n = q(t), d = r(null), O = l(() => ({
       "b-modal-page--custom-padding": e.customPadding
     })), I = l(() => {
       var c;
@@ -77,7 +77,7 @@ const Lt = {
     ] : [
       { small: 6, medium: 6, large: 6 },
       { small: 6, medium: 6, large: 6 }
-    ]), { activePage: g, height: _, isAnimationActive: m, pageCustomPadding: B, showCloseButton: x, size: L } = Q(W), h = l(() => g.value === e.pageId || !g.value);
+    ]), { activePage: g, height: _, isAnimationActive: m, pageCustomPadding: B, showCloseButton: x, size: L } = Q(j), h = l(() => g.value === e.pageId || !g.value);
     let p = null;
     return w(
       () => g.value,
@@ -113,7 +113,7 @@ var St = function() {
   }, proxy: !0 } : e.actions && e.actions.length > 0 ? { key: "footer", fn: function() {
     return [o("div", { staticClass: "b-modal-page__actions-container", style: t.customPaddingStyles.actions }, [o(t.FooterActions, { attrs: { actions: e.actions, "actions-label": e.actionsLabel, "destructive-actions": e.destructiveActions } })], 1)];
   }, proxy: !0 } : null], null, !0) });
-}, Et = [], Ot = /* @__PURE__ */ q(
+}, Et = [], Ot = /* @__PURE__ */ W(
   Pt,
   St,
   Et,
@@ -216,7 +216,7 @@ const It = Ot.exports, Bt = T({
   },
   emits: ["update:active-page", "close-modal"],
   setup(a, { expose: e, emit: o }) {
-    const t = a, n = 500, { t: d } = nt(), O = Y(), I = V(), R = j(O), u = r(null), f = r(!1), g = lt("modal"), _ = l(() => t.isDismissible && !t.hideCloseButton), m = r(t.customPadding), B = l(() => m.value ? { top: m.value, right: m.value } : {}), x = l(() => I["aria-label"] ?? d("ariaLabelFallback")), L = l(() => t.withColumnLayout && t.size === G.LARGE), h = () => {
+    const t = a, n = 500, { t: d } = nt(), O = Y(), I = V(), R = q(O), u = r(null), f = r(!1), g = lt("modal"), _ = l(() => t.isDismissible && !t.hideCloseButton), m = r(t.customPadding), B = l(() => m.value ? { top: m.value, right: m.value } : {}), x = l(() => I["aria-label"] ?? d("ariaLabelFallback")), L = l(() => t.withColumnLayout && t.size === G.LARGE), h = () => {
       u.value.showModal();
     }, p = () => {
       o("close-modal");
@@ -257,7 +257,7 @@ const It = Ot.exports, Bt = T({
       var C;
       S.value = (C = S.value) == null ? void 0 : C.filter((N) => N !== s);
     }, J = (s) => (s && S.value.push(s), { unregisterPage: H(s) }), K = r(""), M = r(!1);
-    return D(W, {
+    return D(j, {
       activePage: v,
       height: K,
       isAnimationActive: M,
@@ -289,7 +289,7 @@ var Dt = function() {
   }, proxy: !0 } : null, t.hasSlot("actions") ? { key: "actions", fn: function() {
     return [e._t("actions")];
   }, proxy: !0 } : null], null, !0) })], 2) : e._e()], 1)]);
-}, Gt = [], Tt = /* @__PURE__ */ q(
+}, Gt = [], Tt = /* @__PURE__ */ W(
   kt,
   Dt,
   Gt,
@@ -309,4 +309,4 @@ export {
   Ct as g,
   Qt as h
 };
-//# sourceMappingURL=base-modal.09nAcnF_.js.map
+//# sourceMappingURL=base-modal.CUSvvYnk.js.map