@adyen/bento-vue2 1.44.0 → 1.46.0

package/dist/chunks/{action-bar.Dx12xlEW.js.map → action-bar.e_2fmyN_.js.map}

@@ -1 +1 @@
-{"version":3,"file":"action-bar.Dx12xlEW.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                    {{ itemCounter }} {{ isConfirmationVariant ? tc('unsavedChanges', itemCounter) : label }}\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, PropType, provide, ref, toRefs, watch } from 'vue';\n    import { BentoButton, BentoButtonActions, 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         */\n        itemCounter: {\n            type: Number,\n            required: true,\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 } = 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    // 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","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","showActions","nextTick","hideActions","newValue","oldValue","isIncreasing"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+OIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA/LAC,IAAA,KACAC,IAAA,GACAC,IAAA,KACAC,IAAA,IA2DA,EAAA,GAAAC,GAAA,IAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,MAAAC,EAAA,iBAAAA,EAAA,iBAAAL,EAAA,UAAA,CAAA,GAGAM,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,GAAAvB,CAAA;AAGA,UAAAwB,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,OAAAJ,EAAA,MAAA;AAAA,QACmB,OAAA,MAAA2B,EAAA,MAAA;AAAA,MACS;AAAA,MAC5B;AAAA,QACA,OAAA3B,EAAA,QAAA;AAAA,QACqB,SAAA;AAAA,QACR,OAAA,MAAA2B,EAAA,QAAA;AAAA,MACiB;AAAA,IAC9B,CAAA,GAIJC,IAAA,YAAA;AACI,YAAAC,EAAA,GACAlB,EAAA,QAAAL,EAAA,MAAA,cAAAP,IAAAH,KAAAiB,EAAA,QAAAC,EAAA,UAIID,EAAA,SAAA,GACAe,EAAA;AAAA,IACJ,GAGJE,IAAA,YAAA;AACI,YAAAD,EAAA,GACAlB,EAAA,QAAAL,EAAA,MAAA,cAAAP,KAAAc,EAAA,QAAA,MACIA,EAAA,SAAA,GACAiB,EAAA;AAAA,IACJ;AAIJ,WAAAd;AAAA,MAAA,MAAAL,EAAA;AAAA,MACgB,OAAAoB,GAAAC,MAAA;AAGR,YADA,MAAAH,EAAA,GACA,CAAAvB,EAAA;AACI;AAEJ,cAAA2B,IAAAF,IAAAC;AACA,QAAArB,EAAA,QAAAb,IACIe,EAAA,QAAA,IAAiCoB,IAEjCL,EAAA,IAEAE,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"action-bar.e_2fmyN_.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                    {{ itemCounter }} {{ isConfirmationVariant ? tc('unsavedChanges', itemCounter) : label }}\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, PropType, provide, ref, toRefs, watch } from 'vue';\n    import { BentoButton, BentoButtonActions, 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         */\n        itemCounter: {\n            type: Number,\n            required: true,\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 } = 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    // 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","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","showActions","nextTick","hideActions","newValue","oldValue","isIncreasing"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+OIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA/LAC,IAAA,KACAC,IAAA,GACAC,IAAA,KACAC,IAAA,IA2DA,EAAA,GAAAC,GAAA,IAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,MAAAC,EAAA,iBAAAA,EAAA,iBAAAL,EAAA,UAAA,CAAA,GAGAM,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,GAAAvB,CAAA;AAGA,UAAAwB,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,OAAAJ,EAAA,MAAA;AAAA,QACmB,OAAA,MAAA2B,EAAA,MAAA;AAAA,MACS;AAAA,MAC5B;AAAA,QACA,OAAA3B,EAAA,QAAA;AAAA,QACqB,SAAA;AAAA,QACR,OAAA,MAAA2B,EAAA,QAAA;AAAA,MACiB;AAAA,IAC9B,CAAA,GAIJC,IAAA,YAAA;AACI,YAAAC,EAAA,GACAlB,EAAA,QAAAL,EAAA,MAAA,cAAAP,IAAAH,KAAAiB,EAAA,QAAAC,EAAA,UAIID,EAAA,SAAA,GACAe,EAAA;AAAA,IACJ,GAGJE,IAAA,YAAA;AACI,YAAAD,EAAA,GACAlB,EAAA,QAAAL,EAAA,MAAA,cAAAP,KAAAc,EAAA,QAAA,MACIA,EAAA,SAAA,GACAiB,EAAA;AAAA,IACJ;AAIJ,WAAAd;AAAA,MAAA,MAAAL,EAAA;AAAA,MACgB,OAAAoB,GAAAC,MAAA;AAGR,YADA,MAAAH,EAAA,GACA,CAAAvB,EAAA;AACI;AAEJ,cAAA2B,IAAAF,IAAAC;AACA,QAAArB,EAAA,QAAAb,IACIe,EAAA,QAAA,IAAiCoB,IAEjCL,EAAA,IAEAE,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{alert.D2Z_aiFC.js → alert.BcfhueIA.js}

@@ -1,6 +1,6 @@
 import { defineComponent as I, useSlots as y, computed as r, onMounted as T } from "vue";
 import { c as S, a as c, B as b } from "./typography.Bu_WAKdf.js";
-import { B as H } from "./button.CufUNBkv.js";
+import { B as H } from "./button.Bx8WC-dy.js";
 import { C as B } from "./cross-small.BLUwtRB-.js";
 import { W as w } from "./warning-filled.CLKRzGMT.js";
 import { C as L } from "./cross-circle-fill.CnYH4R_h.js";
@@ -99,4 +99,4 @@ export {
   o as b,
   C as c
 };
-//# sourceMappingURL=alert.D2Z_aiFC.js.map
+//# sourceMappingURL=alert.BcfhueIA.js.map

package/dist/chunks/{alert.D2Z_aiFC.js.map → alert.BcfhueIA.js.map}

@@ -1 +1 @@
-{"version":3,"file":"alert.D2Z_aiFC.js","sources":["../../src/components/alert/alert.types.ts","../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/info-filled.vue","../../src/components/alert/alert.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoAlertVariant {\n    DEFAULT = 'default',\n    TIP = 'tip',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoAlertTypeOption {\n    WARNING = 'warning',\n    CRITICAL = 'critical',\n    HIGHLIGHT = 'highlight',\n    SUCCESS = 'success',\n}\n\n/**\n * @deprecated from version 2.0.0. Use \"@close-alert\" instead.\n */\nexport enum BentoAlertEvent {\n    CLOSE_ALERT = 'close-alert',\n}\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><g :clip-path=\"'url(#uia-icons-16-info_filled__a' + uuid + ')'\"><path fill=\"#00112C\" d=\"M5.0342 0.839937C6.45033 0.253358 8.00859 0.0998821 9.51195 0.398918C11.0153 0.697953 12.3962 1.43607 13.4801 2.51993C14.5639 3.60378 15.3021 4.9847 15.6011 6.48805C15.9001 7.99141 15.7466 9.54967 15.1601 10.9658C14.5735 12.3819 13.5801 13.5923 12.3057 14.4439C11.0312 15.2955 9.53281 15.75 8 15.75C5.94457 15.75 3.97333 14.9335 2.51992 13.4801C1.06652 12.0267 0.25 10.0554 0.25 8C0.25 6.4672 0.704529 4.96881 1.55611 3.69433C2.40769 2.41985 3.61808 1.42652 5.0342 0.839937ZM8.75 4.5C8.75 4.23478 8.64464 3.98043 8.45711 3.79289C8.26957 3.60536 8.01522 3.5 7.75 3.5C7.55222 3.5 7.35888 3.55865 7.19443 3.66853C7.02998 3.77841 6.90181 3.93459 6.82612 4.11732C6.75043 4.30004 6.73063 4.50111 6.76921 4.69509C6.8078 4.88907 6.90304 5.06725 7.04289 5.20711C7.18275 5.34696 7.36093 5.4422 7.55491 5.48079C7.74889 5.51937 7.94996 5.49957 8.13268 5.42388C8.31541 5.34819 8.47159 5.22002 8.58147 5.05557C8.69135 4.89112 8.75 4.69778 8.75 4.5ZM8.75 6.25H6.25V7.75H7.25V10.25H6.25V11.75H9.75V10.25H8.75V6.25Z\"/></g><defs><clipPath :id=\"'uia-icons-16-info_filled__a' + uuid\"><rect width=\"16\" height=\"16\" fill=\"#fff\"/></clipPath></defs></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n","<template>\n    <div class=\"b-alert\" :role=\"computedRole\">\n        <div class=\"b-alert__inner-container\" :class=\"alertConditionalClasses\">\n            <div class=\"b-alert__icon\">\n                <component :is=\"iconComponent\" aria-hidden=\"true\" :svg-title=\"iconSvgTitle\" />\n            </div>\n\n            <div class=\"b-alert__content\">\n                <bento-typography\n                    v-if=\"hasSlot('default') && !isTipVariant\"\n                    class=\"b-alert__title\"\n                    el=\"div\"\n                    variant=\"body\"\n                    strongest\n                    wide\n                >\n                    <slot />\n                </bento-typography>\n\n                <bento-typography\n                    v-if=\"hasSlot('description')\"\n                    class=\"b-alert__description\"\n                    v-bind=\"descriptionTypography\"\n                    data-testid=\"alert-description\"\n                >\n                    <slot name=\"description\" />\n                </bento-typography>\n\n                <div v-if=\"hasSlot('actions') && !isTipVariant\" class=\"b-alert__actions\" data-testid=\"alert-actions\">\n                    <slot name=\"actions\" />\n                </div>\n            </div>\n\n            <bento-button\n                v-if=\"closeButton && !isTipVariant\"\n                class=\"b-alert__close-button\"\n                variant=\"tertiary\"\n                type=\"button\"\n                @click=\"onCloseButtonClick\"\n            >\n                <cross-small :svg-title=\"t('close')\" />\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n\n    // Component\n    import { BentoAlertEvent, BentoAlertTypeOption, BentoAlertVariant } from '@/components/alert/alert.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { BentoButton } from '@/components/button';\n\n    import CrossSmall from '@adyen/ui-assets-icons-16/vue/cross-small';\n    import Warning from '@adyen/ui-assets-icons-16/vue/warning-filled';\n    import CrossCircle from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import CheckedCircle from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import Info from '@adyen/ui-assets-icons-16/vue/info-filled';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const emit = defineEmits([\"close-alert\"]);\n\n    const props = defineProps({\n  closeButton: { type: Boolean, default: false },\n  type: { default: BentoAlertTypeOption.HIGHLIGHT },\n  variant: { default: BentoAlertVariant.DEFAULT }\n});\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const isTipVariant = computed(() => props.variant === BentoAlertVariant.TIP);\n\n    const alertConditionalClasses = computed(() => ({\n        [`b-alert--${props.type}`]: props.type,\n        [`b-alert--${BentoAlertVariant.TIP}`]: isTipVariant.value,\n    }));\n\n    const iconSvgTitle = computed(() => t(`${props.type}Icon`));\n\n    const iconComponent = computed(() => {\n        switch (props.type) {\n            case BentoAlertTypeOption.CRITICAL:\n                return CrossCircle;\n            case BentoAlertTypeOption.SUCCESS:\n                return CheckedCircle;\n            case BentoAlertTypeOption.WARNING:\n                return Warning;\n            case BentoAlertTypeOption.HIGHLIGHT:\n            default:\n                return Info;\n        }\n    });\n\n    const descriptionTypography = computed(() => ({\n        el: BentoTypographyElement.DIV,\n        variant: isTipVariant.value ? BentoTypographyVariant.CAPTION : BentoTypographyVariant.BODY,\n        wide: true,\n    }));\n\n    const computedRole = computed(() => (props.type === BentoAlertTypeOption.HIGHLIGHT ? 'status' : 'alert'));\n\n    const onCloseButtonClick = () => {\n        emit(BentoAlertEvent.CLOSE_ALERT);\n    };\n\n    onMounted(() => {\n        if (!slots.default && !slots.description) {\n            throw new Error('Alert Component requires a title or a description');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An Alert component is used to display a persistent\n     * notification containing information important to the user\n     *\n     * @example\n     * import { BentoAlert, BentoAlertTypeOption } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAlert },\n     *     template: `\n     *          <bento-alert type=\"highlight\">\n     *              Title of the Alert\n     *          </bento-alert>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-alert',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./alert.scss\" />\n"],"names":["BentoAlertVariant","BentoAlertVariant2","BentoAlertTypeOption","BentoAlertTypeOption2","BentoAlertEvent","BentoAlertEvent2","uuid","_sfc_main$1","__default__","messages","slots","useSlots","hasSlot","useHasSlot","t","useI18n","isTipVariant","computed","props","alertConditionalClasses","iconSvgTitle","iconComponent","CrossCircleFillIcon","CheckmarkCircleFillIcon","WarningFilledIcon","Info","descriptionTypography","BentoTypographyElement","BentoTypographyVariant","computedRole","onCloseButtonClick","emit","onMounted"],"mappings":";;;;;;;;;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,MAAA,OAFQA,IAAAD,KAAA,CAAA,CAAA,GAQAE,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WAJQA,IAAAD,KAAA,CAAA,CAAA,GAUAE,IAAA,kBAAAC,OACRA,EAAA,cAAA,eADQA,IAAAD,KAAA,CAAA,CAAA;AChBZ,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;GCgIIE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;iBA3EAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAUA,EAAA,GAAAI,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAA,MAAAC,EAAA,YAAAlB,EAAA,GAAA,GAEAmB,IAAAF,EAAA,OAAA;AAAA,MAAgD,CAAA,YAAAC,EAAA,IAAA,EAAA,GAAAA,EAAA;AAAA,MACV,CAAA,YAAAlB,EAAA,GAAA,EAAA,GAAAgB,EAAA;AAAA,IACkB,EAAA,GAGxDI,IAAAH,EAAA,MAAAH,EAAA,GAAAI,EAAA,IAAA,MAAA,CAAA,GAEAG,IAAAJ,EAAA,MAAA;AACI,cAAAC,EAAA,MAAA;AAAA,QAAoB,KAAAhB,EAAA;AAEZ,iBAAAoB;AAAA,QAAO,KAAApB,EAAA;AAEP,iBAAAqB;AAAA,QAAO,KAAArB,EAAA;AAEP,iBAAAsB;AAAA,QAAO,KAAAtB,EAAA;AAAA,QACe;AAEtB,iBAAAuB;AAAA,MAAO;AAAA,IACf,CAAA,GAGJC,IAAAT,EAAA,OAAA;AAAA,MAA8C,IAAAU,EAAA;AAAA,MACf,SAAAX,EAAA,QAAAY,EAAA,UAAAA,EAAA;AAAA,MAC2D,MAAA;AAAA,IAChF,EAAA,GAGVC,IAAAZ,EAAA,MAAAC,EAAA,SAAAhB,EAAA,YAAA,WAAA,OAAA,GAEA4B,IAAA,MAAA;AACI,MAAAC,EAAA3B,EAAA,WAAA;AAAA,IAAgC;AAGpC,WAAA4B,EAAA,MAAA;AACI,UAAA,CAAAtB,EAAA,WAAA,CAAAA,EAAA;AACI,cAAA,IAAA,MAAA,mDAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}
+{"version":3,"file":"alert.BcfhueIA.js","sources":["../../src/components/alert/alert.types.ts","../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/info-filled.vue","../../src/components/alert/alert.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoAlertVariant {\n    DEFAULT = 'default',\n    TIP = 'tip',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoAlertTypeOption {\n    WARNING = 'warning',\n    CRITICAL = 'critical',\n    HIGHLIGHT = 'highlight',\n    SUCCESS = 'success',\n}\n\n/**\n * @deprecated from version 2.0.0. Use \"@close-alert\" instead.\n */\nexport enum BentoAlertEvent {\n    CLOSE_ALERT = 'close-alert',\n}\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><g :clip-path=\"'url(#uia-icons-16-info_filled__a' + uuid + ')'\"><path fill=\"#00112C\" d=\"M5.0342 0.839937C6.45033 0.253358 8.00859 0.0998821 9.51195 0.398918C11.0153 0.697953 12.3962 1.43607 13.4801 2.51993C14.5639 3.60378 15.3021 4.9847 15.6011 6.48805C15.9001 7.99141 15.7466 9.54967 15.1601 10.9658C14.5735 12.3819 13.5801 13.5923 12.3057 14.4439C11.0312 15.2955 9.53281 15.75 8 15.75C5.94457 15.75 3.97333 14.9335 2.51992 13.4801C1.06652 12.0267 0.25 10.0554 0.25 8C0.25 6.4672 0.704529 4.96881 1.55611 3.69433C2.40769 2.41985 3.61808 1.42652 5.0342 0.839937ZM8.75 4.5C8.75 4.23478 8.64464 3.98043 8.45711 3.79289C8.26957 3.60536 8.01522 3.5 7.75 3.5C7.55222 3.5 7.35888 3.55865 7.19443 3.66853C7.02998 3.77841 6.90181 3.93459 6.82612 4.11732C6.75043 4.30004 6.73063 4.50111 6.76921 4.69509C6.8078 4.88907 6.90304 5.06725 7.04289 5.20711C7.18275 5.34696 7.36093 5.4422 7.55491 5.48079C7.74889 5.51937 7.94996 5.49957 8.13268 5.42388C8.31541 5.34819 8.47159 5.22002 8.58147 5.05557C8.69135 4.89112 8.75 4.69778 8.75 4.5ZM8.75 6.25H6.25V7.75H7.25V10.25H6.25V11.75H9.75V10.25H8.75V6.25Z\"/></g><defs><clipPath :id=\"'uia-icons-16-info_filled__a' + uuid\"><rect width=\"16\" height=\"16\" fill=\"#fff\"/></clipPath></defs></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n","<template>\n    <div class=\"b-alert\" :role=\"computedRole\">\n        <div class=\"b-alert__inner-container\" :class=\"alertConditionalClasses\">\n            <div class=\"b-alert__icon\">\n                <component :is=\"iconComponent\" aria-hidden=\"true\" :svg-title=\"iconSvgTitle\" />\n            </div>\n\n            <div class=\"b-alert__content\">\n                <bento-typography\n                    v-if=\"hasSlot('default') && !isTipVariant\"\n                    class=\"b-alert__title\"\n                    el=\"div\"\n                    variant=\"body\"\n                    strongest\n                    wide\n                >\n                    <slot />\n                </bento-typography>\n\n                <bento-typography\n                    v-if=\"hasSlot('description')\"\n                    class=\"b-alert__description\"\n                    v-bind=\"descriptionTypography\"\n                    data-testid=\"alert-description\"\n                >\n                    <slot name=\"description\" />\n                </bento-typography>\n\n                <div v-if=\"hasSlot('actions') && !isTipVariant\" class=\"b-alert__actions\" data-testid=\"alert-actions\">\n                    <slot name=\"actions\" />\n                </div>\n            </div>\n\n            <bento-button\n                v-if=\"closeButton && !isTipVariant\"\n                class=\"b-alert__close-button\"\n                variant=\"tertiary\"\n                type=\"button\"\n                @click=\"onCloseButtonClick\"\n            >\n                <cross-small :svg-title=\"t('close')\" />\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n\n    // Component\n    import { BentoAlertEvent, BentoAlertTypeOption, BentoAlertVariant } from '@/components/alert/alert.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { BentoButton } from '@/components/button';\n\n    import CrossSmall from '@adyen/ui-assets-icons-16/vue/cross-small';\n    import Warning from '@adyen/ui-assets-icons-16/vue/warning-filled';\n    import CrossCircle from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import CheckedCircle from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import Info from '@adyen/ui-assets-icons-16/vue/info-filled';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const emit = defineEmits([\"close-alert\"]);\n\n    const props = defineProps({\n  closeButton: { type: Boolean, default: false },\n  type: { default: BentoAlertTypeOption.HIGHLIGHT },\n  variant: { default: BentoAlertVariant.DEFAULT }\n});\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const isTipVariant = computed(() => props.variant === BentoAlertVariant.TIP);\n\n    const alertConditionalClasses = computed(() => ({\n        [`b-alert--${props.type}`]: props.type,\n        [`b-alert--${BentoAlertVariant.TIP}`]: isTipVariant.value,\n    }));\n\n    const iconSvgTitle = computed(() => t(`${props.type}Icon`));\n\n    const iconComponent = computed(() => {\n        switch (props.type) {\n            case BentoAlertTypeOption.CRITICAL:\n                return CrossCircle;\n            case BentoAlertTypeOption.SUCCESS:\n                return CheckedCircle;\n            case BentoAlertTypeOption.WARNING:\n                return Warning;\n            case BentoAlertTypeOption.HIGHLIGHT:\n            default:\n                return Info;\n        }\n    });\n\n    const descriptionTypography = computed(() => ({\n        el: BentoTypographyElement.DIV,\n        variant: isTipVariant.value ? BentoTypographyVariant.CAPTION : BentoTypographyVariant.BODY,\n        wide: true,\n    }));\n\n    const computedRole = computed(() => (props.type === BentoAlertTypeOption.HIGHLIGHT ? 'status' : 'alert'));\n\n    const onCloseButtonClick = () => {\n        emit(BentoAlertEvent.CLOSE_ALERT);\n    };\n\n    onMounted(() => {\n        if (!slots.default && !slots.description) {\n            throw new Error('Alert Component requires a title or a description');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An Alert component is used to display a persistent\n     * notification containing information important to the user\n     *\n     * @example\n     * import { BentoAlert, BentoAlertTypeOption } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAlert },\n     *     template: `\n     *          <bento-alert type=\"highlight\">\n     *              Title of the Alert\n     *          </bento-alert>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-alert',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./alert.scss\" />\n"],"names":["BentoAlertVariant","BentoAlertVariant2","BentoAlertTypeOption","BentoAlertTypeOption2","BentoAlertEvent","BentoAlertEvent2","uuid","_sfc_main$1","__default__","messages","slots","useSlots","hasSlot","useHasSlot","t","useI18n","isTipVariant","computed","props","alertConditionalClasses","iconSvgTitle","iconComponent","CrossCircleFillIcon","CheckmarkCircleFillIcon","WarningFilledIcon","Info","descriptionTypography","BentoTypographyElement","BentoTypographyVariant","computedRole","onCloseButtonClick","emit","onMounted"],"mappings":";;;;;;;;;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,MAAA,OAFQA,IAAAD,KAAA,CAAA,CAAA,GAQAE,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WAJQA,IAAAD,KAAA,CAAA,CAAA,GAUAE,IAAA,kBAAAC,OACRA,EAAA,cAAA,eADQA,IAAAD,KAAA,CAAA,CAAA;AChBZ,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;GCgIIE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;iBA3EAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAUA,EAAA,GAAAI,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAA,MAAAC,EAAA,YAAAlB,EAAA,GAAA,GAEAmB,IAAAF,EAAA,OAAA;AAAA,MAAgD,CAAA,YAAAC,EAAA,IAAA,EAAA,GAAAA,EAAA;AAAA,MACV,CAAA,YAAAlB,EAAA,GAAA,EAAA,GAAAgB,EAAA;AAAA,IACkB,EAAA,GAGxDI,IAAAH,EAAA,MAAAH,EAAA,GAAAI,EAAA,IAAA,MAAA,CAAA,GAEAG,IAAAJ,EAAA,MAAA;AACI,cAAAC,EAAA,MAAA;AAAA,QAAoB,KAAAhB,EAAA;AAEZ,iBAAAoB;AAAA,QAAO,KAAApB,EAAA;AAEP,iBAAAqB;AAAA,QAAO,KAAArB,EAAA;AAEP,iBAAAsB;AAAA,QAAO,KAAAtB,EAAA;AAAA,QACe;AAEtB,iBAAAuB;AAAA,MAAO;AAAA,IACf,CAAA,GAGJC,IAAAT,EAAA,OAAA;AAAA,MAA8C,IAAAU,EAAA;AAAA,MACf,SAAAX,EAAA,QAAAY,EAAA,UAAAA,EAAA;AAAA,MAC2D,MAAA;AAAA,IAChF,EAAA,GAGVC,IAAAZ,EAAA,MAAAC,EAAA,SAAAhB,EAAA,YAAA,WAAA,OAAA,GAEA4B,IAAA,MAAA;AACI,MAAAC,EAAA3B,EAAA,WAAA;AAAA,IAAgC;AAGpC,WAAA4B,EAAA,MAAA;AACI,UAAA,CAAAtB,EAAA,WAAA,CAAAA,EAAA;AACI,cAAA,IAAA,MAAA,mDAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}

package/dist/chunks/{base-button.4UYC3kp2.js → base-button.BeMKxkgK.js}

@@ -76,11 +76,11 @@ var m = function() {
   y,
   !1,
   null,
-  "b321f07b"
+  "9d38f201"
 );
 const x = B.exports;
 export {
   x as B,
   e as a
 };
-//# sourceMappingURL=base-button.4UYC3kp2.js.map
+//# sourceMappingURL=base-button.BeMKxkgK.js.map

package/dist/chunks/base-button.BeMKxkgK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-button.BeMKxkgK.js","sources":["../../src/components/internal/base-button/base-button.types.ts","../../src/components/internal/base-button/base-button.vue"],"sourcesContent":["export enum BentoBaseButtonPropClass {\n    DESTRUCTIVE = 'critical',\n    ICON_ONLY = 'icon-only',\n}\n\nexport enum BentoBaseButtonEvent {\n    BLUR = 'blur',\n    CLICK = 'click',\n    FOCUS = 'focus',\n    KEYDOWN_ESC = 'keydown.esc',\n}\n\nexport enum BaseButtonType {\n    BUTTON = 'button',\n    RESET = 'reset',\n    SUBMIT = 'submit',\n}\n","<template>\n    <button\n        ref=\"bentoBaseButtonRef\"\n        class=\"b-base-button\"\n        :class=\"conditionalClasses\"\n        :disabled=\"disabled\"\n        :type=\"type\"\n        :aria-expanded=\"ariaAttributes['aria-expanded']\"\n        @click=\"onClickButton\"\n        @focus=\"onFocusButton\"\n        @blur=\"onBlurButton\"\n    >\n        <span v-if=\"hasSlot('iconLeft')\" class=\"b-base-button__icon-left\" data-testid=\"icon-button-left\">\n            <slot name=\"iconLeft\" />\n        </span>\n        <bento-typography v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" stronger class=\"b-base-button__label\">\n            <slot />\n        </bento-typography>\n        <span v-if=\"hasSlot('iconRight')\" class=\"b-base-button__icon-right\" data-testid=\"icon-button-right\">\n            <slot name=\"iconRight\" />\n        </span>\n    </button>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref } from 'vue';\n    import { BentoBaseButtonEvent, BentoBaseButtonPropClass } from './base-button.types';\n    import type { ButtonHTMLAttributes } from 'vue/types/jsx.d.ts';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import { Booleanish } from '@/types';\n\n    /**\n     * Base button component to use as a base for all the various types of bento buttons. For internal use only.\n     *\n     * * @example\n     * import { BaseButton, BaseButtonEvent } from '@/components/internal/base-button';\n     * import YourImportedIcon from @adyen/ui-assets-icons-16/example-icon';\n     *\n     * export default {\n     *      components: { BaseButton, YourImportedIcon },\n     *      props: {\n     *         text:\n     *      },\n     *      template: `\n     *          <base-button class=\"your-custom-button-styles\" @click=\"onClick\">\n     *             <template #iconLeft><your-imported-icon></template>\n     *             Button text\n     *             <template #iconRight><your-imported-icon></template>\n     *          </base-button>\n     *      `,\n     *      emits: [BentoButtonEvent.CLICK],\n     *      setup: (prps, { emit }) => {\n     *          const onClick = value => emit(BaseButtonEvent.CLICK, value);\n     *\n     *          return {\n     *              onClick,\n     *          };\n     *      }\n     * }\n     */\n    export default defineComponent({\n        name: 'base-button',\n        components: { BentoTypography },\n        props: {\n            /**\n             * Disables button functionality\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays button as critical\n             */\n            critical: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * The default behavior of the button.\n             * Possible values are: 'button', 'reset', 'submit'\n             */\n            type: {\n                type: String as PropType<ButtonHTMLAttributes['type']>,\n                default: 'button',\n            },\n        },\n        emits: [\n            BentoBaseButtonEvent.CLICK,\n            BentoBaseButtonEvent.FOCUS,\n            BentoBaseButtonEvent.BLUR,\n            BentoBaseButtonEvent.KEYDOWN_ESC,\n        ],\n        setup(props, { slots, emit, attrs }) {\n            const ariaAttributes = computed(() => ({\n                'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n            }));\n\n            const bentoBaseButtonRef = ref(null);\n\n            const conditionalClasses = computed(() => ({\n                [`b-base-button--${BentoBaseButtonPropClass.DESTRUCTIVE}`]: props.critical,\n                [`b-base-button--${BentoBaseButtonPropClass.ICON_ONLY}`]: !slots.default,\n            }));\n\n            const onClickButton = (e: MouseEvent) => {\n                if (!props.disabled) {\n                    emit(BentoBaseButtonEvent.CLICK, e);\n                } else {\n                    e.preventDefault();\n                    e.stopPropagation();\n                }\n            };\n\n            const onFocusButton = (e: FocusEvent) => {\n                emit(BentoBaseButtonEvent.FOCUS, e);\n            };\n\n            const onBlurButton = (e: FocusEvent) => {\n                emit(BentoBaseButtonEvent.BLUR, e);\n            };\n\n            return {\n                // Values\n                ariaAttributes,\n                conditionalClasses,\n\n                // Methods\n                onClickButton,\n                onFocusButton,\n                onBlurButton,\n                hasSlot: useHasSlot(slots),\n\n                // Refs\n                bentoBaseButtonRef,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-button.scss\" />\n"],"names":["BentoBaseButtonPropClass","BentoBaseButtonPropClass2","BentoBaseButtonEvent","BentoBaseButtonEvent2","_sfc_main","defineComponent","BentoTypography","props","slots","emit","attrs","ariaAttributes","computed","_a","bentoBaseButtonRef","ref","conditionalClasses","e","useHasSlot"],"mappings":";;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,cAAA,YACAA,EAAA,YAAA,aAFQA,IAAAD,KAAA,CAAA,CAAA,GAKAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,QAAA,SACAA,EAAA,cAAA,eAJQA,IAAAD,KAAA,CAAA,CAAA;ACwDZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,MAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AAAA,IACAJ,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,EACA;AAAA,EACA,MAAAK,GAAA,EAAA,OAAAC,GAAA,MAAAC,GAAA,OAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAA,MAAA;;AAAA;AAAA,QAAA,kBAAAC,IAAAH,EAAA,eAAA,MAAA,gBAAAG,EAAA;AAAA,MACA;AAAA,KAAA,GAGAC,IAAAC,EAAA,IAAA,GAEAC,IAAAJ,EAAA,OAAA;AAAA,MAAA,CAAA,kBAAAZ,EAAA,WAAA,EAAA,GAAAO,EAAA;AAAA,MACA,CAAA,kBAAAP,EAAA,SAAA,EAAA,GAAA,CAAAQ,EAAA;AAAA,IACA,EAAA;AAoBA,WAAA;AAAA;AAAA,MAAA,gBAAAG;AAAA,MAEA,oBAAAK;AAAA;AAAA,MACA,eApBA,CAAAC,MAAA;AACA,QAAAV,EAAA,YAGAU,EAAA,eAAA,GACAA,EAAA,gBAAA,KAHAR,EAAAP,EAAA,OAAAe,CAAA;AAAA,MAIA;AAAA,MAiBA,eAdA,CAAAA,MAAA;AACA,QAAAR,EAAAP,EAAA,OAAAe,CAAA;AAAA,MAAA;AAAA,MAcA,cAXA,CAAAA,MAAA;AACA,QAAAR,EAAAP,EAAA,MAAAe,CAAA;AAAA,MAAA;AAAA,MAWA,SAAAC,EAAAV,CAAA;AAAA;AAAA,MACA,oBAAAM;AAAA,IAGA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;"}

package/dist/chunks/{base-modal.BrqNR-ah.js → base-modal.UPLi477L.js}

@@ -1,18 +1,18 @@
 import { defineComponent as T, useSlots as Y, ref as u, 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.CufUNBkv.js";
-import { B as ot } from "./focus-trap.DSkLNO_i.js";
+import { B as at } from "./button.Bx8WC-dy.js";
+import { B as ot } from "./focus-trap.DA_1lCcM.js";
 import { u as q } from "./use-has-slot.C9lQZ6nz.js";
 import { u as nt } from "./i18n.BQkEbtPM.js";
 import { M as st } from "./base-modal.keys.C2PQXcE2.js";
 import { g as lt } from "./generate-uid.D-HFI38h.js";
-import { B as it } from "./typography.Bu_WAKdf.js";
-import { F as rt } from "./footer-actions.B3GJ1wNP.js";
-import { D as ut, B as ct, b as dt, a as mt } from "./dialog-page.CplkzZGZ.js";
-import { o as pt } from "./resize.Bqks3WUm.js";
-import { G as gt, a as ft } from "./grid-layout.HvTAa4to.js";
+import { B as it } from "./directive.O3yEdalv.js";
+import { B as rt } from "./typography.Bu_WAKdf.js";
+import { F as ut } from "./footer-actions.O24MYRgM.js";
+import { D as ct, B as dt, b as mt, a as pt } from "./dialog-page.Da2cxzZm.js";
+import { o as gt } from "./resize.Bqks3WUm.js";
+import { G as ft, a as _t } from "./grid-layout.HvTAa4to.js";
 import { n as W } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { C as _t } from "./cross.CsUPDmaA.js";
-import { B as vt } from "./directive.O3yEdalv.js";
+import { C as vt } from "./cross.CsUPDmaA.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 || {}), At = /* @__PURE__ */ ((a) => (a.CLOSE_MODAL = "close-modal", a))(At || {});
 const bt = {
@@ -144,7 +144,7 @@ const bt = {
       () => f.value,
       async (r, i) => {
         var A, k;
-        h.value && (await X(), _.value = `${(k = (A = c.value) == null ? void 0 : A.$el) == null ? void 0 : k.clientHeight}px`, B.value = e.customPadding, m.value = i !== void 0, p = pt(c.value, () => {
+        h.value && (await X(), _.value = `${(k = (A = c.value) == null ? void 0 : A.$el) == null ? void 0 : k.clientHeight}px`, B.value = e.customPadding, m.value = i !== void 0, p = gt(c.value, () => {
           var v, S;
           const L = `${(S = (v = c.value) == null ? void 0 : v.$el) == null ? void 0 : S.clientHeight}px`;
           L && L !== _.value && (_.value = L);
@@ -153,7 +153,7 @@ const bt = {
       { immediate: !0 }
     ), Z(() => {
       p == null || p.disconnect();
-    }), { __sfc: !0, CLOSE_BUTTON_ICON_WIDTH: o, slots: t, hasSlot: n, page: c, props: e, modalPageConditionalClasses: O, modalContentConditionalClasses: I, customPaddingStyles: R, hasColumnLayout: d, computedColumnWidth: g, activePage: f, height: _, isAnimationActive: m, pageCustomPadding: B, showCloseButton: x, size: b, isCurrentPage: h, pageElementObserver: p, BentoTypography: it, GridLayout: gt, GridLayoutContainerType: ft, FooterActions: rt, DialogPage: ut };
+    }), { __sfc: !0, CLOSE_BUTTON_ICON_WIDTH: o, slots: t, hasSlot: n, page: c, props: e, modalPageConditionalClasses: O, modalContentConditionalClasses: I, customPaddingStyles: R, hasColumnLayout: d, computedColumnWidth: g, activePage: f, height: _, isAnimationActive: m, pageCustomPadding: B, showCloseButton: x, size: b, isCurrentPage: h, pageElementObserver: p, BentoTypography: rt, GridLayout: ft, GridLayoutContainerType: _t, FooterActions: ut, DialogPage: ct };
   }
 });
 var Pt = function() {
@@ -314,7 +314,7 @@ const It = Ot.exports, Bt = T({
     }), e({
       internalModalActionClose: A
     }), D(st, f);
-    const { activePage: v, isOpen: S, size: z } = et(t), U = u(ct.TRANSITION_LEVEL_DEEPER), P = u([]), y = u([]), $ = (s) => o("update:active-page", s), H = (s) => () => {
+    const { activePage: v, isOpen: S, size: z } = et(t), U = u(dt.TRANSITION_LEVEL_DEEPER), P = u([]), y = u([]), $ = (s) => o("update:active-page", s), H = (s) => () => {
       var C;
       P.value = (C = P.value) == null ? void 0 : C.filter((N) => N !== s);
     }, J = (s) => (s && P.value.push(s), { unregisterPage: H(s) }), K = u(""), M = u(!1);
@@ -325,14 +325,14 @@ const It = Ot.exports, Bt = T({
       pageCustomPadding: m,
       showCloseButton: _,
       size: z
-    }), D(dt, {
+    }), D(mt, {
       activePage: v,
       animation: U,
       isOpen: S,
       pages: P,
       previousPages: y,
       updatePage: $
-    }), D(mt, J), { __sfc: !0, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME: n, t: c, slots: O, attrs: I, hasSlot: R, modal: d, isClosing: g, modalId: f, emit: o, props: t, showCloseButton: _, pageCustomPadding: m, customPaddingStyles: B, computedAriaLabel: x, hasColumnLayout: b, openModal: h, emitCloseEvent: p, closeModalAfterAnimation: r, startCloseModalAnimation: i, internalModalActionClose: A, closeModalOnClickOutside: k, modalConditionalClasses: L, activePage: v, isOpen: S, size: z, animation: U, pages: P, previousPages: y, updatePage: $, unregisterPage: H, registerPage: J, height: K, isAnimationActive: M, BentoButton: at, BentoFocusTrap: ot, vBentoClickOutsideDirective: vt, BentoModalPage: It, CrossIcon: _t };
+    }), D(pt, J), { __sfc: !0, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME: n, t: c, slots: O, attrs: I, hasSlot: R, modal: d, isClosing: g, modalId: f, emit: o, props: t, showCloseButton: _, pageCustomPadding: m, customPaddingStyles: B, computedAriaLabel: x, hasColumnLayout: b, openModal: h, emitCloseEvent: p, closeModalAfterAnimation: r, startCloseModalAnimation: i, internalModalActionClose: A, closeModalOnClickOutside: k, modalConditionalClasses: L, activePage: v, isOpen: S, size: z, animation: U, pages: P, previousPages: y, updatePage: $, unregisterPage: H, registerPage: J, height: K, isAnimationActive: M, BentoButton: at, BentoFocusTrap: ot, vBentoClickOutsideDirective: it, BentoModalPage: It, CrossIcon: vt };
   }
 });
 var Dt = function() {
@@ -370,4 +370,4 @@ export {
   At as g,
   Qt as h
 };
-//# sourceMappingURL=base-modal.BrqNR-ah.js.map
+//# sourceMappingURL=base-modal.UPLi477L.js.map

package/dist/chunks/{base-modal.BrqNR-ah.js.map → base-modal.UPLi477L.js.map}

@@ -1 +1 @@
-{"version":3,"file":"base-modal.BrqNR-ah.js","sources":["../../src/components/modal/modal.types.ts","../../src/components/modal/modal.keys.ts","../../src/components/modal/components/modal-page/modal-page.vue","../../src/components/modal/components/base-modal/base-modal.vue"],"sourcesContent":["import { ComputedRef, Ref } from 'vue';\n\n/**\n * Public\n */\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalVariant {\n    DEFAULT = 'default',\n    DIALOG = 'dialog',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalVariantMapping {\n    DEFAULT = 'BentoModalDefault',\n    DIALOG = 'BentoModalDialog',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalSize {\n    SMALL = 'small',\n    MEDIUM = 'medium',\n    LARGE = 'large',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalColumnLayoutVariant {\n    SMALLER = 'smaller',\n    EQUAL = 'equal',\n    BIGGER = 'bigger',\n}\n\nexport enum BentoModalRole {\n    DIALOG = 'dialog',\n    ALERT_DIALOG = 'alertdialog',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalDialogType {\n    CONFIRMATION = 'confirmation',\n    DESTRUCTIVE = 'destructive',\n    INFO = 'info',\n    ACKNOWLEDGEMENT = 'acknowledgement',\n}\n\nexport enum BentoModalEvent {\n    CLOSE_MODAL = 'close-modal',\n}\n\n/**\n * Private\n */\nexport interface BentoModalConfigData {\n    activePage: Ref<string>;\n    height: Ref<string>;\n    isAnimationActive: Ref<boolean>;\n    pageCustomPadding: Ref<string>;\n    showCloseButton: ComputedRef<boolean>;\n    size: Ref<BentoModalSize | `${BentoModalSize}`>;\n}\n","export const MODAL_CONFIG_INJECTION_KEY = Symbol('modal config data injection key');\n","<template>\n    <dialog-page\n        ref=\"page\"\n        class=\"b-modal-page\"\n        :class=\"modalPageConditionalClasses\"\n        :page-id=\"pageId\"\n        :always-show-border=\"hasColumnLayout\"\n        :back-button-styling=\"customPaddingStyles?.backButton\"\n        :previous-page=\"previousPage\"\n        @animationend=\"isAnimationActive = false\"\n    >\n        <template v-if=\"hasSlot('default') || showCloseButton\" #header>\n            <div class=\"b-modal-page__header-container\" :style=\"customPaddingStyles.header\">\n                <div class=\"b-modal-page__header\">\n                    <bento-typography\n                        class=\"b-modal-page__title\"\n                        aria-label=\"base modal title\"\n                        el=\"span\"\n                        variant=\"title\"\n                        stronger\n                    >\n                        <slot v-if=\"hasSlot('default')\" />\n                    </bento-typography>\n                </div>\n            </div>\n        </template>\n\n        <template #content>\n            <div\n                class=\"b-modal-page__content\"\n                :class=\"modalContentConditionalClasses\"\n                :style=\"customPaddingStyles.content\"\n            >\n                <bento-typography\n                    v-if=\"hasSlot('content') || (hasSlot('content-col-1') && hasSlot('content-col-2'))\"\n                    el=\"div\"\n                >\n                    <grid-layout\n                        v-if=\"hasColumnLayout\"\n                        :column-width=\"computedColumnWidth\"\n                        :container-type=\"GridLayoutContainerType.NORMAL\"\n                        no-gap\n                        class=\"b-modal-page__grid\"\n                    >\n                        <template #col-1><slot name=\"content-col-1\"></slot></template>\n                        <template #col-2><slot name=\"content-col-2\"></slot></template>\n                    </grid-layout>\n                    <slot v-else name=\"content\" />\n                </bento-typography>\n            </div>\n        </template>\n        <template v-if=\"hasSlot('actions')\" #footer>\n            <div class=\"b-modal-page__actions-container\" :style=\"customPaddingStyles.actions\">\n                <div aria-label=\"modal actions\" class=\"b-modal-page__actions\">\n                    <slot name=\"actions\" />\n                </div>\n            </div>\n        </template>\n        <template v-else-if=\"actions && actions.length > 0\" #footer>\n            <div class=\"b-modal-page__actions-container\" :style=\"customPaddingStyles.actions\">\n                <footer-actions\n                    :actions=\"actions\"\n                    :actions-label=\"actionsLabel\"\n                    :destructive-actions=\"destructiveActions\"\n                />\n            </div>\n        </template>\n    </dialog-page>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, inject, nextTick, onUnmounted, PropType, ref, useSlots, watch } from 'vue';\n    import {\n        BentoModalColumnLayoutVariant,\n        BentoModalConfigData,\n        BentoModalSize,\n    } from '@/components/modal/modal.types';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoButtonActionsList } from '@/components/button';\n    import { GridLayout, GridLayoutContainerType } from '@/internal';\n    import { useHasSlot } from '@/composables';\n\n    import { FooterActions } from '@/components/internal/footer-actions';\n\n    import DialogPage from '@/internal/dialog-page/dialog-page.vue';\n    import { MODAL_CONFIG_INJECTION_KEY } from '../../modal.keys';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n\n    const CLOSE_BUTTON_ICON_WIDTH = 26;\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const page = ref<InstanceType<typeof DialogPage>>(null);\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         * But you may change the color of 1-st action to red with 'critial' key\n         * Not more than 3 action buttons can be provided\n         * Or 2 action buttons and 1 Label for them\n         *\n         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * `title`: Button's text.\n         *\n         * `event`: Event triggered when clicking the Button.\n         *\n         * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n         *\n         * ```\n         * [{\n         *   title: 'Primary',2\n         *   event: () => { ... },\n         *   icon: FourPeopleIcon\n         * }, {\n         *   title: 'Secondary',\n         *   event: () => { ... }\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: null,\n        },\n\n        /**\n         * Text label that is displayed left to the action buttons\n         */\n        actionsLabel: { type: String, default: null },\n\n        /**\n         * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.\n         */\n        columnsSize: {\n            type: String as PropType<BentoModalColumnLayoutVariant>,\n            default: BentoModalColumnLayoutVariant.SMALLER,\n        },\n\n        /**\n         * If provided, manages the padding of the whole modal container\n         */\n        customPadding: { type: String, default: null },\n\n        /**\n         * If passed - sets first button color to red\n         */\n        destructiveActions: { type: Boolean, default: false },\n\n        /**\n         * If provided, renders the modal's content in a two-column layout an wth dividers separating its content\n         */\n        withColumnLayout: { type: Boolean, default: false },\n\n        /**\n         * Identifier of the page, used with activePage prop to handle modal navigation\n         */\n        pageId: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * ID of the page for the back button to navigate to. Only use it to overwrite the default back behavior\n         * Used when the back button should not take the user to the natural previous page\n         * Set to `null` to hide back button in the page\n         */\n        previousPage: {\n            type: String,\n            default: undefined,\n        },\n    });\n\n    const modalPageConditionalClasses = computed(() => ({\n        'b-modal-page--custom-padding': props.customPadding,\n    }));\n\n    const modalContentConditionalClasses = computed(() => ({\n        'b-modal-page__content--with-header': hasSlot('default'),\n        'b-modal-page__content--with-actions': hasSlot('actions') || props.actions?.length,\n    }));\n\n    // Setting custom padding styles\n    const customPaddingStyles = computed(() => {\n        if (!props.customPadding) {\n            return {};\n        }\n\n        const xPadding = {\n            paddingLeft: props.customPadding,\n            paddingRight: props.customPadding,\n        };\n\n        const content = { ...xPadding, paddingTop: undefined, paddingBottom: undefined };\n\n        if (!hasSlot('default')) {\n            content.paddingTop = props.customPadding;\n        }\n\n        if (!hasSlot('actions')) {\n            content.paddingBottom = props.customPadding;\n        }\n\n        return {\n            header: {\n                ...xPadding,\n                paddingTop: props.customPadding,\n                paddingRight: `${parseInt(props.customPadding, 10) + CLOSE_BUTTON_ICON_WIDTH}px`,\n                flex: 1,\n            },\n            content,\n            actions: { ...xPadding, paddingBottom: props.customPadding },\n            backButton: { top: props.customPadding, paddingLeft: props.customPadding },\n        };\n    });\n\n    // Column layout styles\n    const hasColumnLayout = computed(() => props.withColumnLayout && size.value === BentoModalSize.LARGE);\n\n    const computedColumnWidth = computed(() => {\n        if (props.columnsSize === BentoModalColumnLayoutVariant.SMALLER) {\n            return [\n                { small: 4, medium: 4, large: 4 },\n                { small: 8, medium: 8, large: 8 },\n            ];\n        }\n        if (props.columnsSize === BentoModalColumnLayoutVariant.BIGGER) {\n            return [\n                { small: 8, medium: 8, large: 8 },\n                { small: 4, medium: 4, large: 4 },\n            ];\n        }\n        return [\n            { small: 6, medium: 6, large: 6 },\n            { small: 6, medium: 6, large: 6 },\n        ];\n    });\n\n    // Register page to parent component and inject data from parent component\n    const { activePage, height, isAnimationActive, pageCustomPadding, showCloseButton, size } =\n        inject<BentoModalConfigData>(MODAL_CONFIG_INJECTION_KEY);\n\n    const isCurrentPage = computed(() => activePage.value === props.pageId || !activePage.value);\n\n    // Animation\n    // Set resize observer on mount of update the height of the dialog on resize\n    let pageElementObserver: ResizeObserver | null = null;\n\n    // Watching activePage changes to set the height of the page and set isAnimationActive\n    watch(\n        () => activePage.value,\n        async (value, oldValue) => {\n            if (isCurrentPage.value) {\n                await nextTick();\n                height.value = `${page.value?.$el?.clientHeight}px`;\n                pageCustomPadding.value = props.customPadding;\n                // only set isAnimationActive to true if its going from two different pages and not from null to the first page\n                isAnimationActive.value = oldValue !== undefined;\n\n                pageElementObserver = observeSizeOfElement(page.value, () => {\n                    const pageHeight = `${page.value?.$el?.clientHeight}px`;\n                    if (pageHeight && pageHeight !== height.value) {\n                        height.value = pageHeight;\n                    }\n                });\n            }\n        },\n        { immediate: true }\n    );\n\n    // Disconnect observer on unmounting the page\n    onUnmounted(() => {\n        pageElementObserver?.disconnect();\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * ModalPage is used to render different pages of the Modal component\n     *\n     * @example\n     * import { BentoModal, BentoModalPage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoModal, BentoModalPage },\n     *     template: `\n     *          <bento-modal active-page='page1' :is-open='true'>\n     *              <bento-modal-page\n     *                  pageId='page1'\n     *                  actions-label='Move to next page'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Next page',\n     *                          event: () => {\n     *                              activePage.value = 'page2';\n     *                          },\n     *                      }]\">\n     *                  Page 1\n     *                  <template #content>\n     *                         Page 1 content\n     *                  </template>\n     *              </bento-modal-page>\n     *              <bento-modal-page\n     *                  pageId='page2'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Save',\n     *                          event: () => {},\n     *                      }]\">\n     *                  Page 2\n     *                  <template #content>\n     *                         Page 2 content\n     *                  </template>\n     *              </bento-modal-page>\n     *          </bento-modal>\n     *     `\n     * }\n     */\n    export default defineComponent({});\n</script>\n\n<style lang=\"scss\" scoped src=\"./modal-page.scss\" />\n","<template>\n    <div class=\"b-modal-base\">\n        <dialog\n            ref=\"modal\"\n            :role=\"modalRole\"\n            :aria-label=\"computedAriaLabel\"\n            :style=\"{ height: height }\"\n            class=\"b-modal-base__container\"\n            :class=\"modalConditionalClasses\"\n            :open=\"initiallyOpen\"\n            @animationend=\"closeModalAfterAnimation\"\n            @keydown.esc=\"internalModalActionClose\"\n        >\n            <bento-focus-trap\n                v-if=\"isOpen || initiallyOpen\"\n                :id=\"modalId\"\n                v-bento-click-outside-directive=\"closeModalOnClickOutside\"\n            >\n                <bento-button\n                    v-if=\"showCloseButton\"\n                    class=\"b-modal-base__close-button\"\n                    variant=\"tertiary\"\n                    type=\"button\"\n                    :style=\"customPaddingStyles\"\n                    @click=\"internalModalActionClose\"\n                >\n                    <cross-icon :svg-title=\"t('close')\" />\n                </bento-button>\n                <template v-if=\"props.activePage\">\n                    <slot />\n                </template>\n                <bento-modal-page\n                    v-else\n                    :with-column-layout=\"withColumnLayout\"\n                    :size=\"size\"\n                    :custom-padding=\"customPadding\"\n                    :columns-size=\"columnsSize\"\n                >\n                    <template v-if=\"hasSlot('default')\" #default>\n                        <slot></slot>\n                    </template>\n                    <template v-if=\"hasSlot('content-col-1')\" #content-col-1\n                        ><slot name=\"content-col-1\"></slot\n                    ></template>\n                    <template v-if=\"hasSlot('content-col-2')\" #content-col-2\n                        ><slot name=\"content-col-2\"></slot\n                    ></template>\n                    <template v-if=\"hasSlot('content')\" #content><slot name=\"content\"></slot></template>\n                    <template v-if=\"hasSlot('actions')\" #actions><slot name=\"actions\"></slot></template>\n                </bento-modal-page>\n            </bento-focus-trap>\n        </dialog>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import {\n        computed,\n        defineComponent,\n        onMounted,\n        PropType,\n        provide,\n        ref,\n        toRefs,\n        useAttrs,\n        useSlots,\n        watch,\n    } from 'vue';\n    import {\n        BentoModalColumnLayoutVariant,\n        BentoModalConfigData,\n        BentoModalRole,\n        BentoModalSize,\n    } from '@/components/modal/modal.types';\n    import { BentoButton, BentoButtonActionsList } from '@/components/button';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { MODAL_DIALOG_ID_INJECTION_KEY } from '@/components/modal/components/base-modal/base-modal.keys';\n    import { generateUid } from '@/core/utils/ts';\n    import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives/click-outside';\n    import messages from './messages.json';\n\n    import { BentoModalPage } from '@/components/modal';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    import { MODAL_CONFIG_INJECTION_KEY } from '../../modal.keys';\n    import {\n        BentoDialogPageAnimation,\n        BentoDialogPageConfigData,\n        BentoDialogPageRegisterPage,\n        DIALOG_PAGE_CONFIG_INJECTION_KEY,\n        DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY,\n    } from '@/internal';\n\n    type MessageSchema = (typeof messages)['en-US'];\n    const LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME = 500;\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const slots = useSlots();\n    const attrs = useAttrs();\n    const hasSlot = useHasSlot(slots);\n    const modal = ref<HTMLDialogElement>(null);\n    const isClosing = ref(false);\n    const modalId = generateUid('modal');\n\n    const emit = defineEmits([\"update:active-page\", \"close-modal\"]);\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         * But you may change the color of 1-st action to red with 'critial' key\n         * Not more than 3 action buttons can be provided\n         * Or 2 action buttons and 1 Label for them\n         *\n         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * `title`: Button's text.\n         *\n         * `event`: Event triggered when clicking the Button.\n         *\n         * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n         *\n         * ```\n         * [{\n         *   title: 'Primary',2\n         *   event: () => { ... },\n         *   icon: FourPeopleIcon\n         * }, {\n         *   title: 'Secondary',\n         *   event: () => { ... }\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: null,\n        },\n\n        /**\n         * The id of the current active page\n         * Should be the same id as the BentoModalPage to be displayed\n         */\n        activePage: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.\n         */\n        columnsSize: {\n            type: String as PropType<BentoModalColumnLayoutVariant>,\n            default: BentoModalColumnLayoutVariant.SMALLER,\n        },\n\n        /**\n         * If provided, manages the padding of the whole modal container\n         */\n        customPadding: { type: String, default: null },\n\n        /**\n         * If passed - sets first button color to red\n         */\n        destructiveActions: { type: Boolean, default: false },\n\n        /**\n         * Hides a cross icon on the right side of the title\n         */\n        hideCloseButton: { type: Boolean, required: true },\n\n        /**\n         * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.\n         */\n        initiallyOpen: { type: Boolean, default: false },\n\n        /**\n         * If set to true, it allows the modal to be closed by clicking outside of it\n         */\n        isDismissible: { type: Boolean, required: true },\n\n        /**\n         * Controls the modal's state from the outside. Set it to true to open the modal\n         */\n        isOpen: { type: Boolean, required: true },\n\n        /**\n         * Defines whether the modal will be an alert modal\n         */\n        modalRole: { type: String, default: BentoModalRole.DIALOG },\n\n        /**\n         * Sets the width of the modal\n         */\n        size: {\n            type: String as PropType<BentoModalSize | `${BentoModalSize}`>,\n            default: BentoModalSize.SMALL,\n        },\n\n        /**\n         * If provided, renders the modal's content in a two-column layout an wth dividers separating its content\n         */\n        withColumnLayout: { type: Boolean, default: false },\n    });\n\n    const showCloseButton = computed(() => props.isDismissible && !props.hideCloseButton);\n\n    const pageCustomPadding = ref(props.customPadding);\n\n    const customPaddingStyles = computed(() => {\n        if (!pageCustomPadding.value) {\n            return {};\n        }\n\n        return { top: pageCustomPadding.value, right: pageCustomPadding.value };\n    });\n\n    const computedAriaLabel = computed(() => (attrs['aria-label'] as string) ?? (t('ariaLabelFallback') as string));\n    const hasColumnLayout = computed(() => props.withColumnLayout && props.size === BentoModalSize.LARGE);\n\n    const openModal = (): void => {\n        modal.value.showModal();\n    };\n\n    const emitCloseEvent = (): void => {\n        emit('close-modal');\n    };\n\n    // Handle closing and closing animation for dialog element\n    const closeModalAfterAnimation = () => {\n        if (isClosing.value) {\n            modal.value.close();\n            if (previousPages.value[0]) {\n                emit('update:active-page', previousPages.value[0]);\n            }\n            previousPages.value = [];\n            isClosing.value = false;\n            emitCloseEvent();\n        }\n    };\n\n    const startCloseModalAnimation = () => {\n        if (!modal.value.open) {\n            return;\n        }\n        isClosing.value = true;\n    };\n\n    /**\n     * If the user has pressed escape, clicked outside or clicked the close icon.\n     * Needs to be called from outside, following the \"dialog.close()\" pattern,\n     * when the closing event is triggered outside of the \"base-modal\"\n     * component (e.g. from a closing action).\n     */\n    const internalModalActionClose = (event?: Event) => {\n        if (event) {\n            event.preventDefault();\n        }\n        if (!props.isDismissible && props.modalRole === BentoModalRole.DIALOG) {\n            return;\n        }\n        startCloseModalAnimation();\n    };\n\n    const closeModalOnClickOutside = () => {\n        if (props.isDismissible) {\n            internalModalActionClose();\n        }\n    };\n\n    const modalConditionalClasses = computed(() => ({\n        [`b-modal-base__container--${props.size}`]: props.size,\n        'b-modal-base__container--hide': isClosing.value,\n        'b-modal-base__container--column-layout': hasColumnLayout.value,\n        'b-modal-base__container--animation': isAnimationActive.value,\n    }));\n\n    watch(\n        () => [props.isOpen, modal.value],\n        ([newIsOpen, newModalValue], [, oldModalValue]): void => {\n            if (!newModalValue) {\n                return;\n            }\n\n            const isFirstMutation = !oldModalValue;\n            if (newIsOpen) {\n                openModal();\n                // add the first page to the array when the modal opens\n                if (!previousPages.value.length) {\n                    previousPages.value.push(activePage.value);\n                }\n            } else if (!isFirstMutation) {\n                startCloseModalAnimation();\n            }\n        }\n    );\n\n    // If the first button is a loading button then close the modal have 0.5 seconds\n    // if the state is changed to 'success'.\n    watch(\n        () => props.actions,\n        () => {\n            if (props.actions?.[0]?.state === 'success') {\n                setTimeout(startCloseModalAnimation, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME);\n            }\n        },\n        { deep: true }\n    );\n\n    onMounted(() => {\n        if (props.isOpen && modal.value) {\n            openModal();\n        }\n    });\n\n    /**\n     * Expose methods through its 'ref'\n     */\n    defineExpose({\n        internalModalActionClose,\n    });\n\n    // Let's Children components know they are inside a Modal (dialog element)\n    provide(MODAL_DIALOG_ID_INJECTION_KEY, modalId);\n\n    // Modal pagination\n    const { activePage, isOpen, size } = toRefs(props);\n    const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER);\n\n    const pages = ref<string[]>([]);\n    const previousPages = ref([]);\n\n    const updatePage = page => emit('update:active-page', page);\n\n    // unregister page if removed / destroyed\n    const unregisterPage = (pageIdToRemove: string) => () => {\n        pages.value = pages.value?.filter(pageId => pageId !== pageIdToRemove);\n    };\n\n    // Provide data and function to register page to subcomponent\n    const registerPage: BentoDialogPageRegisterPage = pageId => {\n        if (pageId) {\n            pages.value.push(pageId);\n        }\n\n        return { unregisterPage: unregisterPage(pageId) };\n    };\n\n    const height = ref('');\n    const isAnimationActive = ref(false);\n\n    provide<BentoModalConfigData>(MODAL_CONFIG_INJECTION_KEY, {\n        activePage,\n        height,\n        isAnimationActive,\n        pageCustomPadding,\n        showCloseButton,\n        size,\n    });\n\n    provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, {\n        activePage,\n        animation,\n        isOpen,\n        pages,\n        previousPages,\n        updatePage,\n    });\n\n    provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Dialog container. It creates a dialog HTML element for the modal to use.\n     *\n     * @example\n     * import BaseModal from './components/base-modal/base-modal.vue';\n     *\n     * export default {\n     *     components: { BaseModal },\n     *     template: `\n     *          <base-modal\n     *              :hide-close-button=\"true\"\n     *              :is-dismissible=\"false\"\n     *              :is-open=\"isOpen\"\n     *              @close-modal=\"isOpen = false\"\n     *          >\n     *              <template #content-col-1>\n     *                  // Content on the left side column\n     *              </template>\n     *\n     *              <template #content-col-2>\n     *                  // Content on the right side column\n     *              </template>\n     *\n     *              <template v-if=\"actions\" #actions>\n     *                  <footer-actions :actions=\"actions\" />\n     *              </template>\n     *          </base-modal>\n     *     `,\n     *     setup() {\n     *          const isOpen = ref(true)\n     *          const  footerActions =  [{\n     *              title: 'Primary action',\n     *              event: () => { ... }\n     *          }]\n     *     }\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'base-modal',\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-modal.scss\" />\n"],"names":["BentoModalVariant","BentoModalVariant2","BentoModalVariantMapping","BentoModalVariantMapping2","BentoModalSize","BentoModalSize2","BentoModalColumnLayoutVariant","BentoModalColumnLayoutVariant2","BentoModalRole","BentoModalRole2","BentoModalDialogType","BentoModalDialogType2","BentoModalEvent","BentoModalEvent2","MODAL_CONFIG_INJECTION_KEY","__default__$1","defineComponent","CLOSE_BUTTON_ICON_WIDTH","slots","useSlots","hasSlot","useHasSlot","page","ref","modalPageConditionalClasses","computed","props","modalContentConditionalClasses","_a","customPaddingStyles","xPadding","content","hasColumnLayout","size","computedColumnWidth","activePage","height","isAnimationActive","pageCustomPadding","showCloseButton","inject","isCurrentPage","pageElementObserver","watch","value","oldValue","nextTick","_b","observeSizeOfElement","pageHeight","onUnmounted","__default__","messages","LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME","t","useI18n","attrs","useAttrs","modal","isClosing","modalId","generateUid","computedAriaLabel","openModal","emitCloseEvent","emit","closeModalAfterAnimation","previousPages","startCloseModalAnimation","internalModalActionClose","event","closeModalOnClickOutside","modalConditionalClasses","newIsOpen","newModalValue","oldModalValue","onMounted","expose","provide","MODAL_DIALOG_ID_INJECTION_KEY","isOpen","toRefs","animation","BentoDialogPageAnimation","pages","updatePage","unregisterPage","pageIdToRemove","pageId","registerPage","DIALOG_PAGE_CONFIG_INJECTION_KEY","DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY"],"mappings":"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"}
+{"version":3,"file":"base-modal.UPLi477L.js","sources":["../../src/components/modal/modal.types.ts","../../src/components/modal/modal.keys.ts","../../src/components/modal/components/modal-page/modal-page.vue","../../src/components/modal/components/base-modal/base-modal.vue"],"sourcesContent":["import { ComputedRef, Ref } from 'vue';\n\n/**\n * Public\n */\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalVariant {\n    DEFAULT = 'default',\n    DIALOG = 'dialog',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalVariantMapping {\n    DEFAULT = 'BentoModalDefault',\n    DIALOG = 'BentoModalDialog',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalSize {\n    SMALL = 'small',\n    MEDIUM = 'medium',\n    LARGE = 'large',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalColumnLayoutVariant {\n    SMALLER = 'smaller',\n    EQUAL = 'equal',\n    BIGGER = 'bigger',\n}\n\nexport enum BentoModalRole {\n    DIALOG = 'dialog',\n    ALERT_DIALOG = 'alertdialog',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalDialogType {\n    CONFIRMATION = 'confirmation',\n    DESTRUCTIVE = 'destructive',\n    INFO = 'info',\n    ACKNOWLEDGEMENT = 'acknowledgement',\n}\n\nexport enum BentoModalEvent {\n    CLOSE_MODAL = 'close-modal',\n}\n\n/**\n * Private\n */\nexport interface BentoModalConfigData {\n    activePage: Ref<string>;\n    height: Ref<string>;\n    isAnimationActive: Ref<boolean>;\n    pageCustomPadding: Ref<string>;\n    showCloseButton: ComputedRef<boolean>;\n    size: Ref<BentoModalSize | `${BentoModalSize}`>;\n}\n","export const MODAL_CONFIG_INJECTION_KEY = Symbol('modal config data injection key');\n","<template>\n    <dialog-page\n        ref=\"page\"\n        class=\"b-modal-page\"\n        :class=\"modalPageConditionalClasses\"\n        :page-id=\"pageId\"\n        :always-show-border=\"hasColumnLayout\"\n        :back-button-styling=\"customPaddingStyles?.backButton\"\n        :previous-page=\"previousPage\"\n        @animationend=\"isAnimationActive = false\"\n    >\n        <template v-if=\"hasSlot('default') || showCloseButton\" #header>\n            <div class=\"b-modal-page__header-container\" :style=\"customPaddingStyles.header\">\n                <div class=\"b-modal-page__header\">\n                    <bento-typography\n                        class=\"b-modal-page__title\"\n                        aria-label=\"base modal title\"\n                        el=\"span\"\n                        variant=\"title\"\n                        stronger\n                    >\n                        <slot v-if=\"hasSlot('default')\" />\n                    </bento-typography>\n                </div>\n            </div>\n        </template>\n\n        <template #content>\n            <div\n                class=\"b-modal-page__content\"\n                :class=\"modalContentConditionalClasses\"\n                :style=\"customPaddingStyles.content\"\n            >\n                <bento-typography\n                    v-if=\"hasSlot('content') || (hasSlot('content-col-1') && hasSlot('content-col-2'))\"\n                    el=\"div\"\n                >\n                    <grid-layout\n                        v-if=\"hasColumnLayout\"\n                        :column-width=\"computedColumnWidth\"\n                        :container-type=\"GridLayoutContainerType.NORMAL\"\n                        no-gap\n                        class=\"b-modal-page__grid\"\n                    >\n                        <template #col-1><slot name=\"content-col-1\"></slot></template>\n                        <template #col-2><slot name=\"content-col-2\"></slot></template>\n                    </grid-layout>\n                    <slot v-else name=\"content\" />\n                </bento-typography>\n            </div>\n        </template>\n        <template v-if=\"hasSlot('actions')\" #footer>\n            <div class=\"b-modal-page__actions-container\" :style=\"customPaddingStyles.actions\">\n                <div aria-label=\"modal actions\" class=\"b-modal-page__actions\">\n                    <slot name=\"actions\" />\n                </div>\n            </div>\n        </template>\n        <template v-else-if=\"actions && actions.length > 0\" #footer>\n            <div class=\"b-modal-page__actions-container\" :style=\"customPaddingStyles.actions\">\n                <footer-actions\n                    :actions=\"actions\"\n                    :actions-label=\"actionsLabel\"\n                    :destructive-actions=\"destructiveActions\"\n                />\n            </div>\n        </template>\n    </dialog-page>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, inject, nextTick, onUnmounted, PropType, ref, useSlots, watch } from 'vue';\n    import {\n        BentoModalColumnLayoutVariant,\n        BentoModalConfigData,\n        BentoModalSize,\n    } from '@/components/modal/modal.types';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoButtonActionsList } from '@/components/button';\n    import { GridLayout, GridLayoutContainerType } from '@/internal';\n    import { useHasSlot } from '@/composables';\n\n    import { FooterActions } from '@/components/internal/footer-actions';\n\n    import DialogPage from '@/internal/dialog-page/dialog-page.vue';\n    import { MODAL_CONFIG_INJECTION_KEY } from '../../modal.keys';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n\n    const CLOSE_BUTTON_ICON_WIDTH = 26;\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const page = ref<InstanceType<typeof DialogPage>>(null);\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         * But you may change the color of 1-st action to red with 'critial' key\n         * Not more than 3 action buttons can be provided\n         * Or 2 action buttons and 1 Label for them\n         *\n         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * `title`: Button's text.\n         *\n         * `event`: Event triggered when clicking the Button.\n         *\n         * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n         *\n         * ```\n         * [{\n         *   title: 'Primary',2\n         *   event: () => { ... },\n         *   icon: FourPeopleIcon\n         * }, {\n         *   title: 'Secondary',\n         *   event: () => { ... }\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: null,\n        },\n\n        /**\n         * Text label that is displayed left to the action buttons\n         */\n        actionsLabel: { type: String, default: null },\n\n        /**\n         * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.\n         */\n        columnsSize: {\n            type: String as PropType<BentoModalColumnLayoutVariant>,\n            default: BentoModalColumnLayoutVariant.SMALLER,\n        },\n\n        /**\n         * If provided, manages the padding of the whole modal container\n         */\n        customPadding: { type: String, default: null },\n\n        /**\n         * If passed - sets first button color to red\n         */\n        destructiveActions: { type: Boolean, default: false },\n\n        /**\n         * If provided, renders the modal's content in a two-column layout an wth dividers separating its content\n         */\n        withColumnLayout: { type: Boolean, default: false },\n\n        /**\n         * Identifier of the page, used with activePage prop to handle modal navigation\n         */\n        pageId: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * ID of the page for the back button to navigate to. Only use it to overwrite the default back behavior\n         * Used when the back button should not take the user to the natural previous page\n         * Set to `null` to hide back button in the page\n         */\n        previousPage: {\n            type: String,\n            default: undefined,\n        },\n    });\n\n    const modalPageConditionalClasses = computed(() => ({\n        'b-modal-page--custom-padding': props.customPadding,\n    }));\n\n    const modalContentConditionalClasses = computed(() => ({\n        'b-modal-page__content--with-header': hasSlot('default'),\n        'b-modal-page__content--with-actions': hasSlot('actions') || props.actions?.length,\n    }));\n\n    // Setting custom padding styles\n    const customPaddingStyles = computed(() => {\n        if (!props.customPadding) {\n            return {};\n        }\n\n        const xPadding = {\n            paddingLeft: props.customPadding,\n            paddingRight: props.customPadding,\n        };\n\n        const content = { ...xPadding, paddingTop: undefined, paddingBottom: undefined };\n\n        if (!hasSlot('default')) {\n            content.paddingTop = props.customPadding;\n        }\n\n        if (!hasSlot('actions')) {\n            content.paddingBottom = props.customPadding;\n        }\n\n        return {\n            header: {\n                ...xPadding,\n                paddingTop: props.customPadding,\n                paddingRight: `${parseInt(props.customPadding, 10) + CLOSE_BUTTON_ICON_WIDTH}px`,\n                flex: 1,\n            },\n            content,\n            actions: { ...xPadding, paddingBottom: props.customPadding },\n            backButton: { top: props.customPadding, paddingLeft: props.customPadding },\n        };\n    });\n\n    // Column layout styles\n    const hasColumnLayout = computed(() => props.withColumnLayout && size.value === BentoModalSize.LARGE);\n\n    const computedColumnWidth = computed(() => {\n        if (props.columnsSize === BentoModalColumnLayoutVariant.SMALLER) {\n            return [\n                { small: 4, medium: 4, large: 4 },\n                { small: 8, medium: 8, large: 8 },\n            ];\n        }\n        if (props.columnsSize === BentoModalColumnLayoutVariant.BIGGER) {\n            return [\n                { small: 8, medium: 8, large: 8 },\n                { small: 4, medium: 4, large: 4 },\n            ];\n        }\n        return [\n            { small: 6, medium: 6, large: 6 },\n            { small: 6, medium: 6, large: 6 },\n        ];\n    });\n\n    // Register page to parent component and inject data from parent component\n    const { activePage, height, isAnimationActive, pageCustomPadding, showCloseButton, size } =\n        inject<BentoModalConfigData>(MODAL_CONFIG_INJECTION_KEY);\n\n    const isCurrentPage = computed(() => activePage.value === props.pageId || !activePage.value);\n\n    // Animation\n    // Set resize observer on mount of update the height of the dialog on resize\n    let pageElementObserver: ResizeObserver | null = null;\n\n    // Watching activePage changes to set the height of the page and set isAnimationActive\n    watch(\n        () => activePage.value,\n        async (value, oldValue) => {\n            if (isCurrentPage.value) {\n                await nextTick();\n                height.value = `${page.value?.$el?.clientHeight}px`;\n                pageCustomPadding.value = props.customPadding;\n                // only set isAnimationActive to true if its going from two different pages and not from null to the first page\n                isAnimationActive.value = oldValue !== undefined;\n\n                pageElementObserver = observeSizeOfElement(page.value, () => {\n                    const pageHeight = `${page.value?.$el?.clientHeight}px`;\n                    if (pageHeight && pageHeight !== height.value) {\n                        height.value = pageHeight;\n                    }\n                });\n            }\n        },\n        { immediate: true }\n    );\n\n    // Disconnect observer on unmounting the page\n    onUnmounted(() => {\n        pageElementObserver?.disconnect();\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * ModalPage is used to render different pages of the Modal component\n     *\n     * @example\n     * import { BentoModal, BentoModalPage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoModal, BentoModalPage },\n     *     template: `\n     *          <bento-modal active-page='page1' :is-open='true'>\n     *              <bento-modal-page\n     *                  pageId='page1'\n     *                  actions-label='Move to next page'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Next page',\n     *                          event: () => {\n     *                              activePage.value = 'page2';\n     *                          },\n     *                      }]\">\n     *                  Page 1\n     *                  <template #content>\n     *                         Page 1 content\n     *                  </template>\n     *              </bento-modal-page>\n     *              <bento-modal-page\n     *                  pageId='page2'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Save',\n     *                          event: () => {},\n     *                      }]\">\n     *                  Page 2\n     *                  <template #content>\n     *                         Page 2 content\n     *                  </template>\n     *              </bento-modal-page>\n     *          </bento-modal>\n     *     `\n     * }\n     */\n    export default defineComponent({});\n</script>\n\n<style lang=\"scss\" scoped src=\"./modal-page.scss\" />\n","<template>\n    <div class=\"b-modal-base\">\n        <dialog\n            ref=\"modal\"\n            :role=\"modalRole\"\n            :aria-label=\"computedAriaLabel\"\n            :style=\"{ height: height }\"\n            class=\"b-modal-base__container\"\n            :class=\"modalConditionalClasses\"\n            :open=\"initiallyOpen\"\n            @animationend=\"closeModalAfterAnimation\"\n            @keydown.esc=\"internalModalActionClose\"\n        >\n            <bento-focus-trap\n                v-if=\"isOpen || initiallyOpen\"\n                :id=\"modalId\"\n                v-bento-click-outside-directive=\"closeModalOnClickOutside\"\n            >\n                <bento-button\n                    v-if=\"showCloseButton\"\n                    class=\"b-modal-base__close-button\"\n                    variant=\"tertiary\"\n                    type=\"button\"\n                    :style=\"customPaddingStyles\"\n                    @click=\"internalModalActionClose\"\n                >\n                    <cross-icon :svg-title=\"t('close')\" />\n                </bento-button>\n                <template v-if=\"props.activePage\">\n                    <slot />\n                </template>\n                <bento-modal-page\n                    v-else\n                    :with-column-layout=\"withColumnLayout\"\n                    :size=\"size\"\n                    :custom-padding=\"customPadding\"\n                    :columns-size=\"columnsSize\"\n                >\n                    <template v-if=\"hasSlot('default')\" #default>\n                        <slot></slot>\n                    </template>\n                    <template v-if=\"hasSlot('content-col-1')\" #content-col-1\n                        ><slot name=\"content-col-1\"></slot\n                    ></template>\n                    <template v-if=\"hasSlot('content-col-2')\" #content-col-2\n                        ><slot name=\"content-col-2\"></slot\n                    ></template>\n                    <template v-if=\"hasSlot('content')\" #content><slot name=\"content\"></slot></template>\n                    <template v-if=\"hasSlot('actions')\" #actions><slot name=\"actions\"></slot></template>\n                </bento-modal-page>\n            </bento-focus-trap>\n        </dialog>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import {\n        computed,\n        defineComponent,\n        onMounted,\n        PropType,\n        provide,\n        ref,\n        toRefs,\n        useAttrs,\n        useSlots,\n        watch,\n    } from 'vue';\n    import {\n        BentoModalColumnLayoutVariant,\n        BentoModalConfigData,\n        BentoModalRole,\n        BentoModalSize,\n    } from '@/components/modal/modal.types';\n    import { BentoButton, BentoButtonActionsList } from '@/components/button';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { MODAL_DIALOG_ID_INJECTION_KEY } from '@/components/modal/components/base-modal/base-modal.keys';\n    import { generateUid } from '@/core/utils/ts';\n    import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives/click-outside';\n    import messages from './messages.json';\n\n    import { BentoModalPage } from '@/components/modal';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    import { MODAL_CONFIG_INJECTION_KEY } from '../../modal.keys';\n    import {\n        BentoDialogPageAnimation,\n        BentoDialogPageConfigData,\n        BentoDialogPageRegisterPage,\n        DIALOG_PAGE_CONFIG_INJECTION_KEY,\n        DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY,\n    } from '@/internal';\n\n    type MessageSchema = (typeof messages)['en-US'];\n    const LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME = 500;\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const slots = useSlots();\n    const attrs = useAttrs();\n    const hasSlot = useHasSlot(slots);\n    const modal = ref<HTMLDialogElement>(null);\n    const isClosing = ref(false);\n    const modalId = generateUid('modal');\n\n    const emit = defineEmits([\"update:active-page\", \"close-modal\"]);\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         * But you may change the color of 1-st action to red with 'critial' key\n         * Not more than 3 action buttons can be provided\n         * Or 2 action buttons and 1 Label for them\n         *\n         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * `title`: Button's text.\n         *\n         * `event`: Event triggered when clicking the Button.\n         *\n         * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n         *\n         * ```\n         * [{\n         *   title: 'Primary',2\n         *   event: () => { ... },\n         *   icon: FourPeopleIcon\n         * }, {\n         *   title: 'Secondary',\n         *   event: () => { ... }\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: null,\n        },\n\n        /**\n         * The id of the current active page\n         * Should be the same id as the BentoModalPage to be displayed\n         */\n        activePage: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.\n         */\n        columnsSize: {\n            type: String as PropType<BentoModalColumnLayoutVariant>,\n            default: BentoModalColumnLayoutVariant.SMALLER,\n        },\n\n        /**\n         * If provided, manages the padding of the whole modal container\n         */\n        customPadding: { type: String, default: null },\n\n        /**\n         * If passed - sets first button color to red\n         */\n        destructiveActions: { type: Boolean, default: false },\n\n        /**\n         * Hides a cross icon on the right side of the title\n         */\n        hideCloseButton: { type: Boolean, required: true },\n\n        /**\n         * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.\n         */\n        initiallyOpen: { type: Boolean, default: false },\n\n        /**\n         * If set to true, it allows the modal to be closed by clicking outside of it\n         */\n        isDismissible: { type: Boolean, required: true },\n\n        /**\n         * Controls the modal's state from the outside. Set it to true to open the modal\n         */\n        isOpen: { type: Boolean, required: true },\n\n        /**\n         * Defines whether the modal will be an alert modal\n         */\n        modalRole: { type: String, default: BentoModalRole.DIALOG },\n\n        /**\n         * Sets the width of the modal\n         */\n        size: {\n            type: String as PropType<BentoModalSize | `${BentoModalSize}`>,\n            default: BentoModalSize.SMALL,\n        },\n\n        /**\n         * If provided, renders the modal's content in a two-column layout an wth dividers separating its content\n         */\n        withColumnLayout: { type: Boolean, default: false },\n    });\n\n    const showCloseButton = computed(() => props.isDismissible && !props.hideCloseButton);\n\n    const pageCustomPadding = ref(props.customPadding);\n\n    const customPaddingStyles = computed(() => {\n        if (!pageCustomPadding.value) {\n            return {};\n        }\n\n        return { top: pageCustomPadding.value, right: pageCustomPadding.value };\n    });\n\n    const computedAriaLabel = computed(() => (attrs['aria-label'] as string) ?? (t('ariaLabelFallback') as string));\n    const hasColumnLayout = computed(() => props.withColumnLayout && props.size === BentoModalSize.LARGE);\n\n    const openModal = (): void => {\n        modal.value.showModal();\n    };\n\n    const emitCloseEvent = (): void => {\n        emit('close-modal');\n    };\n\n    // Handle closing and closing animation for dialog element\n    const closeModalAfterAnimation = () => {\n        if (isClosing.value) {\n            modal.value.close();\n            if (previousPages.value[0]) {\n                emit('update:active-page', previousPages.value[0]);\n            }\n            previousPages.value = [];\n            isClosing.value = false;\n            emitCloseEvent();\n        }\n    };\n\n    const startCloseModalAnimation = () => {\n        if (!modal.value.open) {\n            return;\n        }\n        isClosing.value = true;\n    };\n\n    /**\n     * If the user has pressed escape, clicked outside or clicked the close icon.\n     * Needs to be called from outside, following the \"dialog.close()\" pattern,\n     * when the closing event is triggered outside of the \"base-modal\"\n     * component (e.g. from a closing action).\n     */\n    const internalModalActionClose = (event?: Event) => {\n        if (event) {\n            event.preventDefault();\n        }\n        if (!props.isDismissible && props.modalRole === BentoModalRole.DIALOG) {\n            return;\n        }\n        startCloseModalAnimation();\n    };\n\n    const closeModalOnClickOutside = () => {\n        if (props.isDismissible) {\n            internalModalActionClose();\n        }\n    };\n\n    const modalConditionalClasses = computed(() => ({\n        [`b-modal-base__container--${props.size}`]: props.size,\n        'b-modal-base__container--hide': isClosing.value,\n        'b-modal-base__container--column-layout': hasColumnLayout.value,\n        'b-modal-base__container--animation': isAnimationActive.value,\n    }));\n\n    watch(\n        () => [props.isOpen, modal.value],\n        ([newIsOpen, newModalValue], [, oldModalValue]): void => {\n            if (!newModalValue) {\n                return;\n            }\n\n            const isFirstMutation = !oldModalValue;\n            if (newIsOpen) {\n                openModal();\n                // add the first page to the array when the modal opens\n                if (!previousPages.value.length) {\n                    previousPages.value.push(activePage.value);\n                }\n            } else if (!isFirstMutation) {\n                startCloseModalAnimation();\n            }\n        }\n    );\n\n    // If the first button is a loading button then close the modal have 0.5 seconds\n    // if the state is changed to 'success'.\n    watch(\n        () => props.actions,\n        () => {\n            if (props.actions?.[0]?.state === 'success') {\n                setTimeout(startCloseModalAnimation, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME);\n            }\n        },\n        { deep: true }\n    );\n\n    onMounted(() => {\n        if (props.isOpen && modal.value) {\n            openModal();\n        }\n    });\n\n    /**\n     * Expose methods through its 'ref'\n     */\n    defineExpose({\n        internalModalActionClose,\n    });\n\n    // Let's Children components know they are inside a Modal (dialog element)\n    provide(MODAL_DIALOG_ID_INJECTION_KEY, modalId);\n\n    // Modal pagination\n    const { activePage, isOpen, size } = toRefs(props);\n    const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER);\n\n    const pages = ref<string[]>([]);\n    const previousPages = ref([]);\n\n    const updatePage = page => emit('update:active-page', page);\n\n    // unregister page if removed / destroyed\n    const unregisterPage = (pageIdToRemove: string) => () => {\n        pages.value = pages.value?.filter(pageId => pageId !== pageIdToRemove);\n    };\n\n    // Provide data and function to register page to subcomponent\n    const registerPage: BentoDialogPageRegisterPage = pageId => {\n        if (pageId) {\n            pages.value.push(pageId);\n        }\n\n        return { unregisterPage: unregisterPage(pageId) };\n    };\n\n    const height = ref('');\n    const isAnimationActive = ref(false);\n\n    provide<BentoModalConfigData>(MODAL_CONFIG_INJECTION_KEY, {\n        activePage,\n        height,\n        isAnimationActive,\n        pageCustomPadding,\n        showCloseButton,\n        size,\n    });\n\n    provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, {\n        activePage,\n        animation,\n        isOpen,\n        pages,\n        previousPages,\n        updatePage,\n    });\n\n    provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Dialog container. It creates a dialog HTML element for the modal to use.\n     *\n     * @example\n     * import BaseModal from './components/base-modal/base-modal.vue';\n     *\n     * export default {\n     *     components: { BaseModal },\n     *     template: `\n     *          <base-modal\n     *              :hide-close-button=\"true\"\n     *              :is-dismissible=\"false\"\n     *              :is-open=\"isOpen\"\n     *              @close-modal=\"isOpen = false\"\n     *          >\n     *              <template #content-col-1>\n     *                  // Content on the left side column\n     *              </template>\n     *\n     *              <template #content-col-2>\n     *                  // Content on the right side column\n     *              </template>\n     *\n     *              <template v-if=\"actions\" #actions>\n     *                  <footer-actions :actions=\"actions\" />\n     *              </template>\n     *          </base-modal>\n     *     `,\n     *     setup() {\n     *          const isOpen = ref(true)\n     *          const  footerActions =  [{\n     *              title: 'Primary action',\n     *              event: () => { ... }\n     *          }]\n     *     }\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'base-modal',\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-modal.scss\" />\n"],"names":["BentoModalVariant","BentoModalVariant2","BentoModalVariantMapping","BentoModalVariantMapping2","BentoModalSize","BentoModalSize2","BentoModalColumnLayoutVariant","BentoModalColumnLayoutVariant2","BentoModalRole","BentoModalRole2","BentoModalDialogType","BentoModalDialogType2","BentoModalEvent","BentoModalEvent2","MODAL_CONFIG_INJECTION_KEY","__default__$1","defineComponent","CLOSE_BUTTON_ICON_WIDTH","slots","useSlots","hasSlot","useHasSlot","page","ref","modalPageConditionalClasses","computed","props","modalContentConditionalClasses","_a","customPaddingStyles","xPadding","content","hasColumnLayout","size","computedColumnWidth","activePage","height","isAnimationActive","pageCustomPadding","showCloseButton","inject","isCurrentPage","pageElementObserver","watch","value","oldValue","nextTick","_b","observeSizeOfElement","pageHeight","onUnmounted","__default__","messages","LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME","t","useI18n","attrs","useAttrs","modal","isClosing","modalId","generateUid","computedAriaLabel","openModal","emitCloseEvent","emit","closeModalAfterAnimation","previousPages","startCloseModalAnimation","internalModalActionClose","event","closeModalOnClickOutside","modalConditionalClasses","newIsOpen","newModalValue","oldModalValue","onMounted","expose","provide","MODAL_DIALOG_ID_INJECTION_KEY","isOpen","toRefs","animation","BentoDialogPageAnimation","pages","updatePage","unregisterPage","pageIdToRemove","pageId","registerPage","DIALOG_PAGE_CONFIG_INJECTION_KEY","DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY"],"mappings":"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"}

package/dist/chunks/{button-actions-with-menu.ptKgeQEb.js → button-actions-with-menu.CyNvhDxN.js}

@@ -1,7 +1,7 @@
 import { defineComponent as _, computed as a, toRef as m, ref as c, provide as l } from "vue";
-import { M as f, B as v } from "./menu.B78fzH_k.js";
-import { a as A } from "./popover.ZlmaSYms.js";
-import { f as b, B } from "./button-actions.BIQ3qA8q.js";
+import { M as f, B as v } from "./menu.DCRfI10M.js";
+import { a as A } from "./popover.D8pR_dbl.js";
+import { f as b, B } from "./button-actions.BaypoF5i.js";
 import { n as h } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/button-actions-with-menu.css";
 const y = {}, N = /* @__PURE__ */ _({
@@ -109,4 +109,4 @@ const g = E.exports;
 export {
   g as B
 };
-//# sourceMappingURL=button-actions-with-menu.ptKgeQEb.js.map
+//# sourceMappingURL=button-actions-with-menu.CyNvhDxN.js.map

package/dist/chunks/{button-actions-with-menu.ptKgeQEb.js.map → button-actions-with-menu.CyNvhDxN.js.map}

@@ -1 +1 @@
-{"version":3,"file":"button-actions-with-menu.ptKgeQEb.js","sources":["../../src/components/internal/button-actions-with-menu/button-actions-with-menu.vue"],"sourcesContent":["<template>\n    <div class=\"b-button-actions-with-menu\">\n        <div\n            ref=\"buttonActionsWithMenu\"\n            role=\"group\"\n            class=\"b-button-actions-with-menu__container-wrapper\"\n            :class=\"conditionalClasses\"\n        >\n            <bento-button-actions :actions=\"computedActions\" :inverse=\"inverse\" />\n            <bento-menu\n                v-if=\"computedMenuActions.length\"\n                ref=\"menu\"\n                :data=\"computedMenuActions\"\n                :menu-position=\"menuPosition\"\n            />\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, provide, ref, toRef } from 'vue';\n    import BentoMenu from '@/components/menu/menu.vue';\n    import { BentoMenuItem } from '@/components/menu/components/menu-item/menu-item.types';\n    import { BentoButtonActions, BentoButtonActionsList } from '@/components/button';\n    import { MENU_INVERSE_INJECTION_KEY } from '@/components/menu/menu.keys';\n    import { BentoPopoverPositions } from '@/components/popover';\n    import { BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY } from './button-actions-with-menu.keys';\n\n    /**\n     * An internal button actions component with the option to display some of the actions in a menu.\n     *\n     * @example\n     * <button-actions-with-menu\n     *      :actions=\"[\n     *        title: 'Primary',\n     *        event: () => { ... },\n     *        icon: FourPeopleIcon,\n     *        link: {\n     *                   variant: 'default',\n     *                  external: true,\n     *                   to: 'https://www.adyen.com/'\n     *              },\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     *   disabled: true,\n     *   variant: BentoButtonVariant.PRIMARY,\n     *   critical: true\n     * }]\n     *      :displayedActions=\"2\"\n     * />\n     */\n    const props = defineProps({\n        /**\n             * List of actions that will be used to render the buttons.\n             * First element in the list will be rendered as \"primary\".\n             * All elements after the first will be rendered as \"secondary\".\n             *\n             * Each object in the list should have a `title`, an `event` and\n             * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n             *\n             * `title`: Button's text.\n             *\n             * `event`: Event triggered when clicking the Button.\n             *\n             * `icon` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`.\n             *\n             * @see BentoButton for a list of all the other props supported by each button action.\n             *\n             * ```\n             * [{\n             *   title: 'Primary',\n             *   event: () => { ... },\n             *   icon: FourPeopleIcon,\n             *   link: {\n                        variant: 'default',\n                        external: true,\n                        to: 'https://www.adyen.com/'\n                    },\n             * }, {\n             *   title: 'Secondary',\n             *   event: () => { ... }\n             *   disabled: true,\n             *   variant: 'primary',\n             *   critical: true\n             * }]\n             * ```\n             */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            required: true,\n        },\n\n        /**\n         * The number of actions to be displayed. The rest of the actions will be collapsed in a menu component.\n         */\n        disableResponsiveBehavior: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * The number of actions to be displayed. The rest of the actions will be collapsed in a menu component.\n         */\n        displayedActions: {\n            type: Number,\n            default: undefined,\n        },\n\n        /**\n         * Set inverse color scheme to buttons and menu\n         */\n        inverse: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * The position of where the menu should open.\n         */\n        menuPosition: {\n            type: String as PropType<BentoPopoverPositions | `${BentoPopoverPositions}`>,\n            default: 'bottom-start',\n            validator: (value: BentoPopoverPositions) => Object.values(BentoPopoverPositions).includes(value),\n        },\n    });\n\n    const computedActions = computed(() => props.actions.slice(0, props.displayedActions));\n    const inverseRef = toRef(props, 'inverse');\n    const buttonActionsWithMenu = ref<HTMLDivElement>(null);\n    const menu = ref<HTMLDivElement>(null);\n    const stackButtons = ref(false);\n\n    provide(MENU_INVERSE_INJECTION_KEY, inverseRef);\n\n    if (!props.disableResponsiveBehavior) {\n        provide(BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY, { buttonActionsWithMenu, menu, stackButtons });\n    }\n\n    const conditionalClasses = computed(() => ({\n        [`b-button-actions-with-menu__container-wrapper--stacked-buttons`]: stackButtons.value,\n    }));\n\n    const computedMenuActions = computed(() =>\n        props.displayedActions !== undefined && props.displayedActions < props.actions.length\n            ? (props.actions.slice(props.displayedActions, props.actions.length).map(el => ({\n                  text: el.title,\n                  handler: el.event,\n                  icon: el.icon,\n                  critical: el.critical,\n                  disabled: el.disabled,\n              })) as BentoMenuItem[])\n            : []\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An internal button actions component with the option to display some of the actions in a menu.\n     *\n     * @example\n     * <button-actions-with-menu\n     *      :actions=\"[\n     *        title: 'Primary',\n     *        event: () => { ... },\n     *        icon: FourPeopleIcon,\n     *        link: {\n     *                   variant: 'default',\n     *                  external: true,\n     *                   to: 'https://www.adyen.com/'\n     *              },\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     *   disabled: true,\n     *   variant: BentoButtonVariant.PRIMARY,\n     *   critical: true\n     * }]\n     *      :displayedActions=\"2\"\n     * />\n     */\n\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./button-actions-with-menu.scss\" />\n"],"names":["__default__","computedActions","computed","props","inverseRef","toRef","buttonActionsWithMenu","ref","menu","stackButtons","provide","MENU_INVERSE_INJECTION_KEY","BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY","conditionalClasses","computedMenuActions","el"],"mappings":";;;;;;AAsLI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAvDAC,IAAAC,EAAA,MAAAC,EAAA,QAAA,MAAA,GAAAA,EAAA,gBAAA,CAAA,GACAC,IAAAC,EAAAF,GAAA,SAAA,GACAG,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,EAAA;AAEA,IAAAG,EAAAC,GAAAP,CAAA,GAEAD,EAAA,6BACIO,EAAAE,GAAA,EAAA,uBAAAN,GAAA,MAAAE,GAAA,cAAAC,EAAA,CAAA;AAGJ,UAAAI,IAAAX,EAAA,OAAA;AAAA,MAA2C,kEAAAO,EAAA;AAAA,IAC0C,EAAA,GAGrFK,IAAAZ;AAAA,MAA4B,MAAAC,EAAA,qBAAA,UAAAA,EAAA,mBAAAA,EAAA,QAAA,SAAAA,EAAA,QAAA,MAAAA,EAAA,kBAAAA,EAAA,QAAA,MAAA,EAAA,IAAA,CAAAY,OAAA;AAAA,QAE4D,MAAAA,EAAA;AAAA,QACjE,SAAAA,EAAA;AAAA,QACG,MAAAA,EAAA;AAAA,QACH,UAAAA,EAAA;AAAA,QACI,UAAAA,EAAA;AAAA,MACA,EAAA,IAAA,CAAA;AAAA,IAEhB;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"button-actions-with-menu.CyNvhDxN.js","sources":["../../src/components/internal/button-actions-with-menu/button-actions-with-menu.vue"],"sourcesContent":["<template>\n    <div class=\"b-button-actions-with-menu\">\n        <div\n            ref=\"buttonActionsWithMenu\"\n            role=\"group\"\n            class=\"b-button-actions-with-menu__container-wrapper\"\n            :class=\"conditionalClasses\"\n        >\n            <bento-button-actions :actions=\"computedActions\" :inverse=\"inverse\" />\n            <bento-menu\n                v-if=\"computedMenuActions.length\"\n                ref=\"menu\"\n                :data=\"computedMenuActions\"\n                :menu-position=\"menuPosition\"\n            />\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, provide, ref, toRef } from 'vue';\n    import BentoMenu from '@/components/menu/menu.vue';\n    import { BentoMenuItem } from '@/components/menu/components/menu-item/menu-item.types';\n    import { BentoButtonActions, BentoButtonActionsList } from '@/components/button';\n    import { MENU_INVERSE_INJECTION_KEY } from '@/components/menu/menu.keys';\n    import { BentoPopoverPositions } from '@/components/popover';\n    import { BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY } from './button-actions-with-menu.keys';\n\n    /**\n     * An internal button actions component with the option to display some of the actions in a menu.\n     *\n     * @example\n     * <button-actions-with-menu\n     *      :actions=\"[\n     *        title: 'Primary',\n     *        event: () => { ... },\n     *        icon: FourPeopleIcon,\n     *        link: {\n     *                   variant: 'default',\n     *                  external: true,\n     *                   to: 'https://www.adyen.com/'\n     *              },\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     *   disabled: true,\n     *   variant: BentoButtonVariant.PRIMARY,\n     *   critical: true\n     * }]\n     *      :displayedActions=\"2\"\n     * />\n     */\n    const props = defineProps({\n        /**\n             * List of actions that will be used to render the buttons.\n             * First element in the list will be rendered as \"primary\".\n             * All elements after the first will be rendered as \"secondary\".\n             *\n             * Each object in the list should have a `title`, an `event` and\n             * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n             *\n             * `title`: Button's text.\n             *\n             * `event`: Event triggered when clicking the Button.\n             *\n             * `icon` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`.\n             *\n             * @see BentoButton for a list of all the other props supported by each button action.\n             *\n             * ```\n             * [{\n             *   title: 'Primary',\n             *   event: () => { ... },\n             *   icon: FourPeopleIcon,\n             *   link: {\n                        variant: 'default',\n                        external: true,\n                        to: 'https://www.adyen.com/'\n                    },\n             * }, {\n             *   title: 'Secondary',\n             *   event: () => { ... }\n             *   disabled: true,\n             *   variant: 'primary',\n             *   critical: true\n             * }]\n             * ```\n             */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            required: true,\n        },\n\n        /**\n         * The number of actions to be displayed. The rest of the actions will be collapsed in a menu component.\n         */\n        disableResponsiveBehavior: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * The number of actions to be displayed. The rest of the actions will be collapsed in a menu component.\n         */\n        displayedActions: {\n            type: Number,\n            default: undefined,\n        },\n\n        /**\n         * Set inverse color scheme to buttons and menu\n         */\n        inverse: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * The position of where the menu should open.\n         */\n        menuPosition: {\n            type: String as PropType<BentoPopoverPositions | `${BentoPopoverPositions}`>,\n            default: 'bottom-start',\n            validator: (value: BentoPopoverPositions) => Object.values(BentoPopoverPositions).includes(value),\n        },\n    });\n\n    const computedActions = computed(() => props.actions.slice(0, props.displayedActions));\n    const inverseRef = toRef(props, 'inverse');\n    const buttonActionsWithMenu = ref<HTMLDivElement>(null);\n    const menu = ref<HTMLDivElement>(null);\n    const stackButtons = ref(false);\n\n    provide(MENU_INVERSE_INJECTION_KEY, inverseRef);\n\n    if (!props.disableResponsiveBehavior) {\n        provide(BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY, { buttonActionsWithMenu, menu, stackButtons });\n    }\n\n    const conditionalClasses = computed(() => ({\n        [`b-button-actions-with-menu__container-wrapper--stacked-buttons`]: stackButtons.value,\n    }));\n\n    const computedMenuActions = computed(() =>\n        props.displayedActions !== undefined && props.displayedActions < props.actions.length\n            ? (props.actions.slice(props.displayedActions, props.actions.length).map(el => ({\n                  text: el.title,\n                  handler: el.event,\n                  icon: el.icon,\n                  critical: el.critical,\n                  disabled: el.disabled,\n              })) as BentoMenuItem[])\n            : []\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An internal button actions component with the option to display some of the actions in a menu.\n     *\n     * @example\n     * <button-actions-with-menu\n     *      :actions=\"[\n     *        title: 'Primary',\n     *        event: () => { ... },\n     *        icon: FourPeopleIcon,\n     *        link: {\n     *                   variant: 'default',\n     *                  external: true,\n     *                   to: 'https://www.adyen.com/'\n     *              },\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     *   disabled: true,\n     *   variant: BentoButtonVariant.PRIMARY,\n     *   critical: true\n     * }]\n     *      :displayedActions=\"2\"\n     * />\n     */\n\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./button-actions-with-menu.scss\" />\n"],"names":["__default__","computedActions","computed","props","inverseRef","toRef","buttonActionsWithMenu","ref","menu","stackButtons","provide","MENU_INVERSE_INJECTION_KEY","BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY","conditionalClasses","computedMenuActions","el"],"mappings":";;;;;;AAsLI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAvDAC,IAAAC,EAAA,MAAAC,EAAA,QAAA,MAAA,GAAAA,EAAA,gBAAA,CAAA,GACAC,IAAAC,EAAAF,GAAA,SAAA,GACAG,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,EAAA;AAEA,IAAAG,EAAAC,GAAAP,CAAA,GAEAD,EAAA,6BACIO,EAAAE,GAAA,EAAA,uBAAAN,GAAA,MAAAE,GAAA,cAAAC,EAAA,CAAA;AAGJ,UAAAI,IAAAX,EAAA,OAAA;AAAA,MAA2C,kEAAAO,EAAA;AAAA,IAC0C,EAAA,GAGrFK,IAAAZ;AAAA,MAA4B,MAAAC,EAAA,qBAAA,UAAAA,EAAA,mBAAAA,EAAA,QAAA,SAAAA,EAAA,QAAA,MAAAA,EAAA,kBAAAA,EAAA,QAAA,MAAA,EAAA,IAAA,CAAAY,OAAA;AAAA,QAE4D,MAAAA,EAAA;AAAA,QACjE,SAAAA,EAAA;AAAA,QACG,MAAAA,EAAA;AAAA,QACH,UAAAA,EAAA;AAAA,QACI,UAAAA,EAAA;AAAA,MACA,EAAA,IAAA,CAAA;AAAA,IAEhB;;;;;;;;;;;;;;;;"}

package/dist/chunks/{button-actions.BIQ3qA8q.js → button-actions.BaypoF5i.js}

@@ -1,7 +1,7 @@
 import { defineComponent as I, useSlots as E, computed as u, ref as p, inject as N, watch as L, nextTick as O, onMounted as b, onUnmounted as R } from "vue";
-import { B as l } from "./button.CufUNBkv.js";
+import { B as l } from "./button.Bx8WC-dy.js";
 import { o as x } from "./resize.Bqks3WUm.js";
-import { f as U } from "./es6.C-HLzYPA.js";
+import { f as U } from "./es6.D11bE5vq.js";
 import { B as $ } from "./loading-indicator.z8COalOc.js";
 import { C as F } from "./cross-circle-fill.CnYH4R_h.js";
 import { C as W } from "./checkmark-circle-fill.Cn7JN_Tk.js";
@@ -249,4 +249,4 @@ export {
   i as e,
   J as f
 };
-//# sourceMappingURL=button-actions.BIQ3qA8q.js.map
+//# sourceMappingURL=button-actions.BaypoF5i.js.map