@adyen/bento-vue2 2.0.0-rc.6 → 2.0.0

package/dist/chunks/{modal.pzXwZQtG.js → modal.B3-pmL5s.js}

@@ -1,11 +1,11 @@
 import { defineComponent as c, useSlots as v, onMounted as S, toRefs as w, ref as D, computed as u, useAttrs as E } from "vue";
-import { B as _, h as M, a as r, d as L, e as b, g as p, f as P } from "./base-modal.BXDCTPAM.js";
+import { B as _, h as M, a as r, d as L, e as b, g as p, f as P } from "./base-modal.CcmoTJdc.js";
 import { u as g } from "./use-has-slot.C9lQZ6nz.js";
-import { F as x } from "./footer-actions.Hs92lEbc.js";
+import { F as x } from "./footer-actions.C9STwwcv.js";
 import { n as B } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { b as h } from "./button.CBqJGWy5.js";
+import { b as h } from "./button.DII5Ifwa.js";
 import { u as R } from "./index.CPOlyau9.js";
-import { B as z } from "./button-actions.DdAWQn3c.js";
+import { B as z } from "./button-actions.bkcLUE1G.js";
 import { d as T } from "./typography.D1OZJbEa.js";
 const K = c({
   name: "bento-modal-default"
@@ -436,4 +436,4 @@ const ut = tt.exports;
 export {
   ut as B
 };
-//# sourceMappingURL=modal.pzXwZQtG.js.map
+//# sourceMappingURL=modal.B3-pmL5s.js.map

package/dist/chunks/{modal.pzXwZQtG.js.map → modal.B3-pmL5s.js.map}

@@ -1 +1 @@
-{"version":3,"file":"modal.pzXwZQtG.js","sources":["../../src/components/modal/components/modal-default/modal-default.vue","../../src/components/modal/components/modal-dialog/modal-dialog.vue","../../src/components/modal/modal.vue"],"sourcesContent":["<template>\n    <base-modal\n        class=\"b-modal-default\"\n        v-bind=\"$attrs\"\n        :actions=\"actions\"\n        :active-page=\"activePage\"\n        :size=\"size\"\n        :hide-close-button=\"hideCloseButton\"\n        :columns-size=\"columnsSize\"\n        :custom-padding=\"customPadding\"\n        :is-dismissible=\"isDismissible\"\n        :is-open=\"isOpen\"\n        :with-column-layout=\"withColumnLayout\"\n        :initially-open=\"initiallyOpen\"\n        @update:active-page=\"emit('update:active-page', $event)\"\n        @close-modal=\"onCloseModal\"\n    >\n        <template v-if=\"hasSlot('default')\" #default>\n            <slot></slot>\n        </template>\n        <template v-if=\"hasSlot('content-col-1')\" #content-col-1><slot name=\"content-col-1\"></slot></template>\n        <template v-if=\"hasSlot('content-col-2')\" #content-col-2><slot name=\"content-col-2\"></slot></template>\n        <template v-if=\"hasSlot('content')\" #content><slot name=\"content\"></slot></template>\n\n        <template v-if=\"actions && actions.length > 0\" #actions>\n            <slot name=\"actions\">\n                <footer-actions\n                    :actions=\"actions\"\n                    :actions-label=\"actionsLabel\"\n                    :destructive-actions=\"destructiveActions\"\n                />\n            </slot>\n        </template>\n    </base-modal>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, onMounted, type PropType, useSlots } from 'vue';\n    import { BentoModalColumnLayoutVariant, type BentoModalSize } from '@/components/modal/modal.types';\n    import { useHasSlot } from '@/composables';\n    import { type BentoButtonActionsList } from '@/components/button';\n    import { FooterActions } from '@/components/internal/footer-actions';\n    import BaseModal from '@/components/modal/components/base-modal/base-modal.vue';\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\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         * Text label that is displayed left to the action buttons\n         */\n        actionsLabel: { type: String, default: null },\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 provided, manages the padding of the whole modal container\n         */\n        customPadding: { 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 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, default: false },\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         * Sets the width of the modal\n         */\n        size: {\n            type: String as PropType<BentoModalSize | `${BentoModalSize}`>,\n            required: true,\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 onCloseModal = () => {\n        emit('close-modal');\n    };\n\n    onMounted(() => {\n        if (!(hasSlot('content') || (hasSlot('content-col-1') && hasSlot('content-col-2'))) && !props.activePage) {\n            throw new Error('Bento Modal default variant requires content slot or column slots');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Creates a Modal based off the `base-modal` component.\n     * It allows two column modals as well as content modals.\n     *\n     * @example\n     * import { BentoModalDefault } from '@/components/modal/components';\n     *\n     * export default {\n     *      components: { BentoModalDefault },\n     *      template: `\n     *          <bento-modal-default\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     *          </bento-modal-default>\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        name: 'bento-modal-default',\n    });\n</script>\n","<template>\n    <base-modal\n        ref=\"modalRef\"\n        class=\"b-modal-dialog\"\n        :actions=\"actions\"\n        :active-page=\"activePage\"\n        :class=\"modalDialogConditionalClasses\"\n        :hide-close-button=\"true\"\n        size=\"small\"\n        :is-dismissible=\"isDismissible\"\n        :is-open=\"isOpen\"\n        :modal-role=\"BentoModalRole.ALERT_DIALOG\"\n        :initially-open=\"initiallyOpen\"\n        v-bind=\"$attrs\"\n        @close-modal=\"onCloseModal\"\n    >\n        <template #default>\n            <slot></slot>\n        </template>\n        <template #content>\n            {{ content }}\n        </template>\n\n        <template #actions>\n            <bento-button-actions\n                v-if=\"dialogType === 'acknowledgement'\"\n                :actions=\"acknowledgementDialogActions\"\n                layout=\"buttons-end\"\n            />\n\n            <bento-button-actions v-else :actions=\"dialogActions\" layout=\"buttons-end\" />\n        </template>\n    </base-modal>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, onMounted, type PropType, type Ref, ref, toRefs, useSlots } from 'vue';\n    import { BentoModalDialogType, BentoModalRole } from '@/components/modal/modal.types';\n    import { useHasSlot } from '@/composables';\n    import {\n        type BentoButtonActionObject,\n        BentoButtonActions,\n        type BentoButtonActionsList,\n        BentoButtonVariant,\n    } from '@/components/button';\n    import { useI18n } from '@/utils/ts/i18n';\n    import BaseModal from '@/components/modal/components/base-modal/base-modal.vue';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const emit = defineEmits([\"close-modal\"]);\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * Only 1 action button is allowed for Modal Dialog\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         * ```\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         * Text that is displayed in the content section of modal\n         */\n        content: { type: String, required: true },\n\n        /**\n         * Sets different action buttons styling and appearance\n         */\n        dialogType: {\n            type: String as PropType<BentoModalDialogType | `${BentoModalDialogType}`>,\n            required: true,\n        },\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    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const { actions, dialogType } = toRefs(props);\n    const modalRef: Ref<InstanceType<typeof BaseModal>> = ref(null);\n\n    const onCloseModal = () => {\n        emit('close-modal');\n    };\n\n    const onCloseActionButton = (event: Event) => {\n        // Calls \"base-modal\" internal function to initialize the\n        // \"close\" animation and trigger the \"close\" event.\n        // This follows the same \"dialog\" pattern of calling \"dialog.close()\"\n        modalRef.value.internalModalActionClose(event);\n    };\n\n    const acknowledgementDialogActions = computed(() => [\n        {\n            title: t('ok') as string,\n            event: onCloseActionButton,\n            variant: BentoButtonVariant.SECONDARY,\n        },\n    ]);\n\n    const dialogActions = computed(() => {\n        const mandatoryCancelActionButton: BentoButtonActionObject = {\n            title: 'Cancel',\n            event: onCloseActionButton,\n        };\n        const updatedPassedActionsObject: BentoButtonActionObject = actions?.value?.[0];\n\n        if (dialogType.value === BentoModalDialogType.DESTRUCTIVE) {\n            updatedPassedActionsObject.critical = true;\n        } else if (dialogType.value === BentoModalDialogType.INFO) {\n            updatedPassedActionsObject.variant = BentoButtonVariant.SECONDARY;\n        }\n\n        return [updatedPassedActionsObject, mandatoryCancelActionButton];\n    });\n\n    const modalDialogConditionalClasses = computed(() => ({\n        [`b-modal-dialog--${dialogType.value}`]: dialogType.value,\n    }));\n\n    onMounted(() => {\n        if (props.activePage) {\n            throw new Error(\n                'Bento Modal Dialog cannot contain multiple pages. Use Bento Modal default variant instead.'\n            );\n        }\n\n        if (!hasSlot('default') || (!props.content && !hasSlot('content'))) {\n            throw new Error('Bento Modal Dialog requires header title and content');\n        }\n\n        if (actions?.value?.length > 1) {\n            throw new Error('Not more than 1 action button may be provided to Modal Dialog');\n        }\n\n        if (dialogType.value !== BentoModalDialogType.ACKNOWLEDGEMENT && !actions?.value) {\n            throw new Error('Modal Dialog, except ACKNOWLEDGEMENT type, always has to contain one action button');\n        }\n\n        if (dialogType.value === BentoModalDialogType.ACKNOWLEDGEMENT && actions?.value?.length) {\n            throw new Error('Acknowledgement Modal Dialog does not accept action buttons');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Creates a \"dialog\" type of modal.\n     * These are are modals that require a deliberate user action or acknowledgement\n     * (confirmations or destructive actions).\n     *\n     * It’s not customizable and consists of title, description label and one action.\n     *\n     * @example\n     * import { BentoModalDialog } from '@/components/modal/components';\n     *\n     * export default {\n     *      components: { BentoModalDialog },\n     *      template: `\n     *          <bento-modal-dialog\n     *              dialog-type=\"destructive\"\n     *              :is-dismissible=\"false\"\n     *              :is-open=\"isOpen\"\n     *              @close-modal=\"isOpen = false\"\n     *          >\n     *              Dialog content\n     *          </bento-modal-dialog>\n     *      `,\n     *      setup() {\n     *          const isOpen = ref(true)\n     *      }\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-modal-dialog',\n    });\n</script>\n","<template>\n    <component\n        :is=\"computedVariant\"\n        class=\"b-modal\"\n        :is-open=\"isOpen\"\n        :actions=\"actions\"\n        :initially-open=\"initiallyOpen\"\n        v-bind=\"customProps\"\n        @close-modal=\"onCloseModal\"\n        @update:active-page=\"emit('update:active-page', $event)\"\n    >\n        <template v-if=\"hasSlot('default')\" #default>\n            <slot></slot>\n        </template>\n        <template v-if=\"hasSlot('content-col-1')\" #content-col-1><slot name=\"content-col-1\"></slot></template>\n        <template v-if=\"hasSlot('content-col-2')\" #content-col-2><slot name=\"content-col-2\"></slot></template>\n        <template v-if=\"hasSlot('content')\" #content><slot name=\"content\"></slot></template>\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, type PropType, useAttrs, useSlots } from 'vue';\n    import {\n        BentoModalColumnLayoutVariant,\n        BentoModalDialogType,\n        BentoModalSize,\n        BentoModalVariant,\n        BentoModalVariantMapping,\n    } from './modal.types';\n    import { BentoModalDefault, BentoModalDialog } from '@/components/modal/components';\n    import { useHasSlot } from '@/composables';\n    import { type BentoButtonActionsList } from '@/components/button';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    type BentoModalVariantProp = BentoModalVariant | `${BentoModalVariant}` | `${BentoModalVariantMapping}`;\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const attrs = useAttrs();\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         *\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         * Text label that is displayed left to the action buttons\n         */\n        actionsLabel: { type: String, default: null },\n\n        /**\n         * Text that will be displayed in the content section of Modal\n         */\n        content: { 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 | `${BentoModalColumnLayoutVariant}`>,\n            default: BentoModalColumnLayoutVariant.SMALLER,\n            validator: (value: BentoModalColumnLayoutVariant) =>\n                Object.values(BentoModalColumnLayoutVariant).includes(value),\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         * Changes the visual styling of action buttons\n         */\n        dialogType: {\n            type: String as PropType<BentoModalDialogType | `${BentoModalDialogType}`>,\n            default: BentoModalDialogType.CONFIRMATION,\n            validator: (value: BentoModalDialogType) => Object.values(BentoModalDialogType).includes(value),\n        },\n\n        /**\n         * Hides a cross icon on the right side of the title\n         */\n        hideCloseButton: { type: Boolean, default: false },\n\n        /**\n         * If set to true, it allows the modal to be closed without performing an action\n         */\n        isDismissible: { type: Boolean, default: null },\n\n        /**\n         * Controls the modal's state from the outside. Set it to true to open the modal\n         */\n        isOpen: {\n            type: Boolean,\n            default: false,\n        },\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         * Sets the width of the modal\n         */\n        size: {\n            type: String as PropType<BentoModalSize | `${BentoModalSize}`>,\n            default: BentoModalSize.SMALL,\n            validator: (value: BentoModalSize) => Object.values(BentoModalSize).includes(value),\n        },\n\n        /**\n         * Choose between default or dialog versions of modal\n         */\n        variant: {\n            type: String as PropType<BentoModalVariantProp>,\n            default: 'default',\n            validator: (value: BentoModalVariantProp) =>\n                Object.values<BentoModalVariantProp>(BentoModalVariant).includes(value) ||\n                Object.values<BentoModalVariantProp>(BentoModalVariantMapping).includes(value),\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 computedVariant = computed(() => {\n        if (Object.values<BentoModalVariantProp>(BentoModalVariantMapping).includes(props.variant)) {\n            return props.variant;\n        }\n        return BentoModalVariantMapping[props.variant.toUpperCase()];\n    });\n\n    const customProps = computed(() =>\n        computedVariant.value === BentoModalVariantMapping.DEFAULT\n            ? {\n                  activePage: props.activePage,\n                  hideCloseButton: props.hideCloseButton,\n                  size: props.size,\n                  customPadding: props.customPadding,\n                  actionsLabel: props.actionsLabel,\n                  destructiveActions: props.destructiveActions,\n                  isDismissible: props.isDismissible ?? true,\n                  withColumnLayout: props.withColumnLayout,\n                  columnsSize: props.columnsSize,\n                  ...attrs,\n              }\n            : {\n                  activePage: props.activePage,\n                  dialogType: props.dialogType,\n                  content: props.content,\n                  isDismissible: props.isDismissible ?? false,\n                  ...attrs,\n              }\n    );\n\n    const onCloseModal = () => {\n        emit('close-modal');\n    };\n\n    if (Object.keys(attrs).includes('overflow-visible')) {\n        deprecate(\n            'BentoModal \"overflow-visible\" property',\n            `\"overflow-visible\" property was made redundant. BentoModal can work correctly without the need to pass the propery.\n                    Remove the \"overflow-visible\" prop from BentoModal to remove this error.`,\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Modal is a window that appear over any other page content\n     * and focus user attention exclusively on one task or piece of\n     * information at the moment.\n     *\n     * @example\n     * import { BentoModal } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoModal },\n     *     template: `\n     *         <bento-modal :isOpen=\"true\">\n     *             Title of the Modal\n     *             <template #content>\n     *                 Mandatory content slot\n     *             </template>\n     *         </bento-modal>\n     *     `\n     * };\n     */\n    export default defineComponent({\n        components: { BentoModalDefault, BentoModalDialog },\n    });\n</script>\n"],"names":["__default__","defineComponent","slots","useSlots","hasSlot","useHasSlot","onCloseModal","emit","onMounted","props","messages","t","useI18n","actions","dialogType","toRefs","modalRef","ref","onCloseActionButton","event","acknowledgementDialogActions","computed","BentoButtonVariant","dialogActions","mandatoryCancelActionButton","updatedPassedActionsObject","BentoModalDialogType","modalDialogConditionalClasses","BentoModalDefault","BentoModalDialog","attrs","useAttrs","computedVariant","BentoModalVariantMapping","customProps","deprecate"],"mappings":"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"}
+{"version":3,"file":"modal.B3-pmL5s.js","sources":["../../src/components/modal/components/modal-default/modal-default.vue","../../src/components/modal/components/modal-dialog/modal-dialog.vue","../../src/components/modal/modal.vue"],"sourcesContent":["<template>\n    <base-modal\n        class=\"b-modal-default\"\n        v-bind=\"$attrs\"\n        :actions=\"actions\"\n        :active-page=\"activePage\"\n        :size=\"size\"\n        :hide-close-button=\"hideCloseButton\"\n        :columns-size=\"columnsSize\"\n        :custom-padding=\"customPadding\"\n        :is-dismissible=\"isDismissible\"\n        :is-open=\"isOpen\"\n        :with-column-layout=\"withColumnLayout\"\n        :initially-open=\"initiallyOpen\"\n        @update:active-page=\"emit('update:active-page', $event)\"\n        @close-modal=\"onCloseModal\"\n    >\n        <template v-if=\"hasSlot('default')\" #default>\n            <slot></slot>\n        </template>\n        <template v-if=\"hasSlot('content-col-1')\" #content-col-1><slot name=\"content-col-1\"></slot></template>\n        <template v-if=\"hasSlot('content-col-2')\" #content-col-2><slot name=\"content-col-2\"></slot></template>\n        <template v-if=\"hasSlot('content')\" #content><slot name=\"content\"></slot></template>\n\n        <template v-if=\"actions && actions.length > 0\" #actions>\n            <slot name=\"actions\">\n                <footer-actions\n                    :actions=\"actions\"\n                    :actions-label=\"actionsLabel\"\n                    :destructive-actions=\"destructiveActions\"\n                />\n            </slot>\n        </template>\n    </base-modal>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, onMounted, type PropType, useSlots } from 'vue';\n    import { BentoModalColumnLayoutVariant, type BentoModalSize } from '@/components/modal/modal.types';\n    import { useHasSlot } from '@/composables';\n    import { type BentoButtonActionsList } from '@/components/button';\n    import { FooterActions } from '@/components/internal/footer-actions';\n    import BaseModal from '@/components/modal/components/base-modal/base-modal.vue';\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\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         * Text label that is displayed left to the action buttons\n         */\n        actionsLabel: { type: String, default: null },\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 provided, manages the padding of the whole modal container\n         */\n        customPadding: { 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 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, default: false },\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         * Sets the width of the modal\n         */\n        size: {\n            type: String as PropType<BentoModalSize | `${BentoModalSize}`>,\n            required: true,\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 onCloseModal = () => {\n        emit('close-modal');\n    };\n\n    onMounted(() => {\n        if (!(hasSlot('content') || (hasSlot('content-col-1') && hasSlot('content-col-2'))) && !props.activePage) {\n            throw new Error('Bento Modal default variant requires content slot or column slots');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Creates a Modal based off the `base-modal` component.\n     * It allows two column modals as well as content modals.\n     *\n     * @example\n     * import { BentoModalDefault } from '@/components/modal/components';\n     *\n     * export default {\n     *      components: { BentoModalDefault },\n     *      template: `\n     *          <bento-modal-default\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     *          </bento-modal-default>\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        name: 'bento-modal-default',\n    });\n</script>\n","<template>\n    <base-modal\n        ref=\"modalRef\"\n        class=\"b-modal-dialog\"\n        :actions=\"actions\"\n        :active-page=\"activePage\"\n        :class=\"modalDialogConditionalClasses\"\n        :hide-close-button=\"true\"\n        size=\"small\"\n        :is-dismissible=\"isDismissible\"\n        :is-open=\"isOpen\"\n        :modal-role=\"BentoModalRole.ALERT_DIALOG\"\n        :initially-open=\"initiallyOpen\"\n        v-bind=\"$attrs\"\n        @close-modal=\"onCloseModal\"\n    >\n        <template #default>\n            <slot></slot>\n        </template>\n        <template #content>\n            {{ content }}\n        </template>\n\n        <template #actions>\n            <bento-button-actions\n                v-if=\"dialogType === 'acknowledgement'\"\n                :actions=\"acknowledgementDialogActions\"\n                layout=\"buttons-end\"\n            />\n\n            <bento-button-actions v-else :actions=\"dialogActions\" layout=\"buttons-end\" />\n        </template>\n    </base-modal>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, onMounted, type PropType, type Ref, ref, toRefs, useSlots } from 'vue';\n    import { BentoModalDialogType, BentoModalRole } from '@/components/modal/modal.types';\n    import { useHasSlot } from '@/composables';\n    import {\n        type BentoButtonActionObject,\n        BentoButtonActions,\n        type BentoButtonActionsList,\n        BentoButtonVariant,\n    } from '@/components/button';\n    import { useI18n } from '@/utils/ts/i18n';\n    import BaseModal from '@/components/modal/components/base-modal/base-modal.vue';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const emit = defineEmits([\"close-modal\"]);\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * Only 1 action button is allowed for Modal Dialog\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         * ```\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         * Text that is displayed in the content section of modal\n         */\n        content: { type: String, required: true },\n\n        /**\n         * Sets different action buttons styling and appearance\n         */\n        dialogType: {\n            type: String as PropType<BentoModalDialogType | `${BentoModalDialogType}`>,\n            required: true,\n        },\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    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const { actions, dialogType } = toRefs(props);\n    const modalRef: Ref<InstanceType<typeof BaseModal>> = ref(null);\n\n    const onCloseModal = () => {\n        emit('close-modal');\n    };\n\n    const onCloseActionButton = (event: Event) => {\n        // Calls \"base-modal\" internal function to initialize the\n        // \"close\" animation and trigger the \"close\" event.\n        // This follows the same \"dialog\" pattern of calling \"dialog.close()\"\n        modalRef.value.internalModalActionClose(event);\n    };\n\n    const acknowledgementDialogActions = computed(() => [\n        {\n            title: t('ok') as string,\n            event: onCloseActionButton,\n            variant: BentoButtonVariant.SECONDARY,\n        },\n    ]);\n\n    const dialogActions = computed(() => {\n        const mandatoryCancelActionButton: BentoButtonActionObject = {\n            title: 'Cancel',\n            event: onCloseActionButton,\n        };\n        const updatedPassedActionsObject: BentoButtonActionObject = actions?.value?.[0];\n\n        if (dialogType.value === BentoModalDialogType.DESTRUCTIVE) {\n            updatedPassedActionsObject.critical = true;\n        } else if (dialogType.value === BentoModalDialogType.INFO) {\n            updatedPassedActionsObject.variant = BentoButtonVariant.SECONDARY;\n        }\n\n        return [updatedPassedActionsObject, mandatoryCancelActionButton];\n    });\n\n    const modalDialogConditionalClasses = computed(() => ({\n        [`b-modal-dialog--${dialogType.value}`]: dialogType.value,\n    }));\n\n    onMounted(() => {\n        if (props.activePage) {\n            throw new Error(\n                'Bento Modal Dialog cannot contain multiple pages. Use Bento Modal default variant instead.'\n            );\n        }\n\n        if (!hasSlot('default') || (!props.content && !hasSlot('content'))) {\n            throw new Error('Bento Modal Dialog requires header title and content');\n        }\n\n        if (actions?.value?.length > 1) {\n            throw new Error('Not more than 1 action button may be provided to Modal Dialog');\n        }\n\n        if (dialogType.value !== BentoModalDialogType.ACKNOWLEDGEMENT && !actions?.value) {\n            throw new Error('Modal Dialog, except ACKNOWLEDGEMENT type, always has to contain one action button');\n        }\n\n        if (dialogType.value === BentoModalDialogType.ACKNOWLEDGEMENT && actions?.value?.length) {\n            throw new Error('Acknowledgement Modal Dialog does not accept action buttons');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Creates a \"dialog\" type of modal.\n     * These are are modals that require a deliberate user action or acknowledgement\n     * (confirmations or destructive actions).\n     *\n     * It’s not customizable and consists of title, description label and one action.\n     *\n     * @example\n     * import { BentoModalDialog } from '@/components/modal/components';\n     *\n     * export default {\n     *      components: { BentoModalDialog },\n     *      template: `\n     *          <bento-modal-dialog\n     *              dialog-type=\"destructive\"\n     *              :is-dismissible=\"false\"\n     *              :is-open=\"isOpen\"\n     *              @close-modal=\"isOpen = false\"\n     *          >\n     *              Dialog content\n     *          </bento-modal-dialog>\n     *      `,\n     *      setup() {\n     *          const isOpen = ref(true)\n     *      }\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-modal-dialog',\n    });\n</script>\n","<template>\n    <component\n        :is=\"computedVariant\"\n        class=\"b-modal\"\n        :is-open=\"isOpen\"\n        :actions=\"actions\"\n        :initially-open=\"initiallyOpen\"\n        v-bind=\"customProps\"\n        @close-modal=\"onCloseModal\"\n        @update:active-page=\"emit('update:active-page', $event)\"\n    >\n        <template v-if=\"hasSlot('default')\" #default>\n            <slot></slot>\n        </template>\n        <template v-if=\"hasSlot('content-col-1')\" #content-col-1><slot name=\"content-col-1\"></slot></template>\n        <template v-if=\"hasSlot('content-col-2')\" #content-col-2><slot name=\"content-col-2\"></slot></template>\n        <template v-if=\"hasSlot('content')\" #content><slot name=\"content\"></slot></template>\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, type PropType, useAttrs, useSlots } from 'vue';\n    import {\n        BentoModalColumnLayoutVariant,\n        BentoModalDialogType,\n        BentoModalSize,\n        BentoModalVariant,\n        BentoModalVariantMapping,\n    } from './modal.types';\n    import { BentoModalDefault, BentoModalDialog } from '@/components/modal/components';\n    import { useHasSlot } from '@/composables';\n    import { type BentoButtonActionsList } from '@/components/button';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    type BentoModalVariantProp = BentoModalVariant | `${BentoModalVariant}` | `${BentoModalVariantMapping}`;\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const attrs = useAttrs();\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         *\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         * Text label that is displayed left to the action buttons\n         */\n        actionsLabel: { type: String, default: null },\n\n        /**\n         * Text that will be displayed in the content section of Modal\n         */\n        content: { 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 | `${BentoModalColumnLayoutVariant}`>,\n            default: BentoModalColumnLayoutVariant.SMALLER,\n            validator: (value: BentoModalColumnLayoutVariant) =>\n                Object.values(BentoModalColumnLayoutVariant).includes(value),\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         * Changes the visual styling of action buttons\n         */\n        dialogType: {\n            type: String as PropType<BentoModalDialogType | `${BentoModalDialogType}`>,\n            default: BentoModalDialogType.CONFIRMATION,\n            validator: (value: BentoModalDialogType) => Object.values(BentoModalDialogType).includes(value),\n        },\n\n        /**\n         * Hides a cross icon on the right side of the title\n         */\n        hideCloseButton: { type: Boolean, default: false },\n\n        /**\n         * If set to true, it allows the modal to be closed without performing an action\n         */\n        isDismissible: { type: Boolean, default: null },\n\n        /**\n         * Controls the modal's state from the outside. Set it to true to open the modal\n         */\n        isOpen: {\n            type: Boolean,\n            default: false,\n        },\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         * Sets the width of the modal\n         */\n        size: {\n            type: String as PropType<BentoModalSize | `${BentoModalSize}`>,\n            default: BentoModalSize.SMALL,\n            validator: (value: BentoModalSize) => Object.values(BentoModalSize).includes(value),\n        },\n\n        /**\n         * Choose between default or dialog versions of modal\n         */\n        variant: {\n            type: String as PropType<BentoModalVariantProp>,\n            default: 'default',\n            validator: (value: BentoModalVariantProp) =>\n                Object.values<BentoModalVariantProp>(BentoModalVariant).includes(value) ||\n                Object.values<BentoModalVariantProp>(BentoModalVariantMapping).includes(value),\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 computedVariant = computed(() => {\n        if (Object.values<BentoModalVariantProp>(BentoModalVariantMapping).includes(props.variant)) {\n            return props.variant;\n        }\n        return BentoModalVariantMapping[props.variant.toUpperCase()];\n    });\n\n    const customProps = computed(() =>\n        computedVariant.value === BentoModalVariantMapping.DEFAULT\n            ? {\n                  activePage: props.activePage,\n                  hideCloseButton: props.hideCloseButton,\n                  size: props.size,\n                  customPadding: props.customPadding,\n                  actionsLabel: props.actionsLabel,\n                  destructiveActions: props.destructiveActions,\n                  isDismissible: props.isDismissible ?? true,\n                  withColumnLayout: props.withColumnLayout,\n                  columnsSize: props.columnsSize,\n                  ...attrs,\n              }\n            : {\n                  activePage: props.activePage,\n                  dialogType: props.dialogType,\n                  content: props.content,\n                  isDismissible: props.isDismissible ?? false,\n                  ...attrs,\n              }\n    );\n\n    const onCloseModal = () => {\n        emit('close-modal');\n    };\n\n    if (Object.keys(attrs).includes('overflow-visible')) {\n        deprecate(\n            'BentoModal \"overflow-visible\" property',\n            `\"overflow-visible\" property was made redundant. BentoModal can work correctly without the need to pass the propery.\n                    Remove the \"overflow-visible\" prop from BentoModal to remove this error.`,\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Modal is a window that appear over any other page content\n     * and focus user attention exclusively on one task or piece of\n     * information at the moment.\n     *\n     * @example\n     * import { BentoModal } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoModal },\n     *     template: `\n     *         <bento-modal :isOpen=\"true\">\n     *             Title of the Modal\n     *             <template #content>\n     *                 Mandatory content slot\n     *             </template>\n     *         </bento-modal>\n     *     `\n     * };\n     */\n    export default defineComponent({\n        components: { BentoModalDefault, BentoModalDialog },\n    });\n</script>\n"],"names":["__default__","defineComponent","slots","useSlots","hasSlot","useHasSlot","onCloseModal","emit","onMounted","props","messages","t","useI18n","actions","dialogType","toRefs","modalRef","ref","onCloseActionButton","event","acknowledgementDialogActions","computed","BentoButtonVariant","dialogActions","mandatoryCancelActionButton","updatedPassedActionsObject","BentoModalDialogType","modalDialogConditionalClasses","BentoModalDefault","BentoModalDialog","attrs","useAttrs","computedVariant","BentoModalVariantMapping","customProps","deprecate"],"mappings":"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"}

package/dist/chunks/{navigation-menu-group.CKVu4No8.js → navigation-menu-group.B-AV49Bn.js}

@@ -1,6 +1,6 @@
 import { getCurrentInstance as k, defineComponent as M, useSlots as L, ref as h, computed as u, provide as O, toRef as F, inject as I, onMounted as N, onBeforeUnmount as j, watch as W, onUnmounted as J } from "vue";
 import { B } from "./typography.D1OZJbEa.js";
-import { B as K } from "./button.CBqJGWy5.js";
+import { B as K } from "./button.DII5Ifwa.js";
 /* empty css              */
 import { n as x } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { u as T } from "./use-has-slot.C9lQZ6nz.js";
@@ -8,7 +8,7 @@ import { g as P } from "./generate-uid.DBWe4g6T.js";
 import { u as R } from "./index.CPOlyau9.js";
 import { b as $ } from "./tooltip.DFYc5NKM.js";
 import { m as G } from "./index.CL3TXc0a.js";
-import { B as Y } from "./link.BzIDMKgE.js";
+import { B as Y } from "./link.Cls8XShm.js";
 import { u as q } from "./use-expandable-content-height.Bdd9hQwq.js";
 import { C as X } from "./chevron-down.B_QiVCoO.js";
 import { C as Q } from "./chevron-up.YQRo8uKs.js";
@@ -102,7 +102,7 @@ var pe = function() {
   ve,
   !1,
   null,
-  "4ce1df6a"
+  "42a8ca0b"
 );
 const Re = ge.exports, Z = /* @__PURE__ */ Symbol("navigation menu group state injection key"), _e = {
   name: "bento-navigation-menu-item"
@@ -150,7 +150,7 @@ var he = function() {
   fe,
   !1,
   null,
-  "48c78612"
+  "37d1d215"
 );
 const Ge = be.exports, we = {
   name: "bento-navigation-menu-group",
@@ -207,7 +207,7 @@ var Ae = function() {
   Pe,
   !1,
   null,
-  "ba49992c"
+  "3537bc81"
 );
 const De = xe.exports;
 export {
@@ -215,4 +215,4 @@ export {
   Ge as b,
   Re as n
 };
-//# sourceMappingURL=navigation-menu-group.CKVu4No8.js.map
+//# sourceMappingURL=navigation-menu-group.B-AV49Bn.js.map

package/dist/chunks/navigation-menu-group.B-AV49Bn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-menu-group.B-AV49Bn.js","sources":["../../../ui-assets/icons-16/dist/vue/menu-collapse.vue","../../../ui-assets/icons-16/dist/vue/menu-expand.vue","../../src/components/navigation-menu/navigation-menu.keys.ts","../../src/components/navigation-menu/navigation-menu.vue","../../src/components/navigation-menu/components/navigation-menu-group/navigation-menu-group.keys.ts","../../src/components/navigation-menu/components/navigation-menu-item/navigation-menu-item.vue","../../src/components/navigation-menu/components/navigation-menu-group/navigation-menu-group.vue"],"sourcesContent":["\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><path fill=\"#001222\" d=\"M15.5303 13.4697L14.4697 14.5303L12 12.0605L9.53027 14.5303L8.46973 13.4697L12 9.93945L15.5303 13.4697Z\"/><path fill=\"#001222\" d=\"M7 13.75H0V12.25H7V13.75Z\"/><path fill=\"#001222\" d=\"M7 8.75H0V7.25H7V8.75Z\"/><path fill=\"#001222\" d=\"M15.5303 2.53027L12 6.06055L8.46973 2.53027L9.53027 1.46973L12 3.93945L14.4697 1.46973L15.5303 2.53027Z\"/><path fill=\"#001222\" d=\"M7 3.75H0V2.25H7V3.75Z\"/></svg>\n</template>\n<script setup>\n    import { getCurrentInstance } from 'vue';\n    import '../css/main.css';\n\n    const instance = getCurrentInstance();\n    const uuid = String(instance?.uid ?? instance?.proxy?._uid);\n</script>\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><path fill=\"#001222\" d=\"M15.5303 11.5303L12 15.0605L8.46973 11.5303L9.53027 10.4697L12 12.9395L14.4697 10.4697L15.5303 11.5303Z\"/><path fill=\"#001222\" d=\"M7 13.75H0V12.25H7V13.75Z\"/><path fill=\"#001222\" d=\"M7 8.75H0V7.25H7V8.75Z\"/><path fill=\"#001222\" d=\"M15.5303 4.46973L14.4697 5.53027L12 3.06055L9.53027 5.53027L8.46973 4.46973L12 0.939453L15.5303 4.46973Z\"/><path fill=\"#001222\" d=\"M7 3.75H0V2.25H7V3.75Z\"/></svg>\n</template>\n<script setup>\n    import { getCurrentInstance } from 'vue';\n    import '../css/main.css';\n\n    const instance = getCurrentInstance();\n    const uuid = String(instance?.uid ?? instance?.proxy?._uid);\n</script>\n","export const NAVIGATION_MENU_STATE_INJECTION_KEY = Symbol('navigation menu state injection key');\n","<template>\n    <nav class=\"b-navigation-menu\" :aria-labelledby=\"label ? titleId : undefined\">\n        <div v-if=\"showHeader\" class=\"b-navigation-menu__header\">\n            <bento-typography\n                v-if=\"label\"\n                :id=\"titleId\"\n                el=\"p\"\n                variant=\"caption\"\n                stronger\n                class=\"b-navigation-menu__title\"\n            >\n                {{ label }}\n            </bento-typography>\n            <div class=\"b-navigation-menu__actions-container\">\n                <div v-if=\"hasSlot('headerActions')\" class=\"b-navigation-menu__actions\">\n                    <slot name=\"headerActions\" />\n                </div>\n                <bento-button\n                    v-if=\"computedShowExpandAll\"\n                    v-bento-tooltip-directive=\"expandButtonLabel\"\n                    variant=\"tertiary-with-background\"\n                    :aria-label=\"expandButtonLabel\"\n                    @click=\"toggleAllGroups\"\n                >\n                    <template #iconLeft>\n                        <menu-collapse-icon v-if=\"allExpanded\" aria-hidden=\"true\" />\n                        <menu-expand-icon v-else aria-hidden=\"true\" />\n                    </template>\n                </bento-button>\n            </div>\n        </div>\n\n        <ul class=\"b-navigation-menu__content\">\n            <slot />\n        </ul>\n    </nav>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, provide, ref, toRef, useSlots } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoButton } from '@/components/button';\n    import MenuCollapseIcon from '@adyen/ui-assets-icons-16/vue/menu-collapse';\n    import MenuExpandIcon from '@adyen/ui-assets-icons-16/vue/menu-expand';\n    import { useHasSlot } from '@/composables';\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives/tooltip';\n    import { generateUid } from '@/utils/ts/generate-uid';\n    import { useI18n } from '@/utils/ts/i18n';\n    import type { BentoNavigationMenuProps } from './navigation-menu.types';\n    import type {\n        BentoNavigationMenuEmits,\n        BentoNavigationMenuGroupRegistration,\n        BentoNavigationMenuState,\n    } from './navigation-menu.internal.types';\n    import { NAVIGATION_MENU_STATE_INJECTION_KEY } from './navigation-menu.keys';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  label: { default: undefined },\n  showExpandAllButton: { type: Boolean, default: false },\n  activePage: { default: undefined }\n});\n\n    const emit = defineEmits([\"update:active-page\", \"expand-all\", \"collapse-all\"]);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const titleId = generateUid('navigation-menu-title');\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const groups = ref<Array<BentoNavigationMenuGroupRegistration>>([]);\n\n    const registerGroup = (groupId: string, setOpen: (open: boolean) => void, getIsOpen: () => boolean) => {\n        groups.value.push({ id: groupId, setOpen, getIsOpen });\n    };\n\n    const unregisterGroup = (groupId: string) => {\n        groups.value = groups.value.filter(g => g.id !== groupId);\n    };\n\n    const allExpanded = computed(() => groups.value.length > 0 && groups.value.every(group => group.getIsOpen()));\n\n    const computedShowExpandAll = computed(() => groups.value.length > 0 && props.showExpandAllButton);\n\n    const showHeader = computed(() => props.label || hasSlot('headerActions') || computedShowExpandAll.value);\n\n    const expandButtonLabel = computed(() => (allExpanded.value ? t('hideAllPages') : t('showAllPages')));\n\n    const toggleAllGroups = () => {\n        const shouldExpand = !allExpanded.value;\n        groups.value.forEach(({ setOpen }) => setOpen(shouldExpand));\n        if (shouldExpand) {\n            emit('expand-all');\n        } else {\n            emit('collapse-all');\n        }\n    };\n\n    const updateActivePage = (value: string) => {\n        emit('update:active-page', value);\n    };\n\n    provide<BentoNavigationMenuState>(NAVIGATION_MENU_STATE_INJECTION_KEY, {\n        registerGroup,\n        unregisterGroup,\n        activePage: toRef(props, 'activePage'),\n        updateActivePage,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Navigation menu container component with optional header and action buttons.\n     *\n     * @usage\n     * import { BentoNavigationMenu, BentoNavigationMenuItem, BentoNavigationMenuGroup } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoNavigationMenu, BentoNavigationMenuItem, BentoNavigationMenuGroup },\n     *     template: `\n     *          <bento-navigation-menu label=\"Pages\" active-page=\"home\">\n     *              <template #headerActions>\n     *                  <button>Search</button>\n     *              </template>\n     *              <bento-navigation-menu-item value=\"home\" label=\"Home\" :link=\"{ to: '/home' }\">\n     *                  <template #icon><home-icon /></template>\n     *              </bento-navigation-menu-item>\n     *              <bento-navigation-menu-group label=\"Settings\">\n     *                  <template #icon><folder-icon /></template>\n     *                  <bento-navigation-menu-item nested value=\"general\" label=\"General\" :link=\"{ to: '/settings/general' }\" />\n     *              </bento-navigation-menu-group>\n     *          </bento-navigation-menu>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./navigation-menu.scss\" />\n","export const NAVIGATION_MENU_GROUP_STATE_INJECTION_KEY = Symbol('navigation menu group state injection key');\n","<template>\n    <li\n        class=\"b-navigation-menu-item\"\n        :class=\"{\n            ...conditionalClasses,\n            'b-navigation-menu-item--no-icon': !hasSlot('icon'),\n        }\"\n        :aria-hidden=\"!isVisible ? 'true' : undefined\"\n    >\n        <component\n            :is=\"componentType\"\n            v-bind=\"componentProps\"\n            class=\"b-navigation-menu-item__link\"\n            :aria-current=\"isSelected && link ? 'page' : undefined\"\n            :tabindex=\"!isVisible ? -1 : undefined\"\n            :inert=\"!isVisible ? '' : undefined\"\n            @click=\"handleClick\"\n        >\n            <div v-if=\"!nested && hasSlot('icon')\" class=\"b-navigation-menu-item__icon\" aria-hidden=\"true\">\n                <slot name=\"icon\" />\n            </div>\n            <bento-typography\n                ref=\"labelRef\"\n                v-bento-tooltip-directive=\"isTruncated ? label : undefined\"\n                el=\"span\"\n                variant=\"body\"\n                stronger\n                class=\"b-navigation-menu-item__label\"\n            >\n                {{ label }}\n            </bento-typography>\n        </component>\n        <div v-if=\"hasSlot('action')\" class=\"b-navigation-menu-item__action\">\n            <slot name=\"action\" />\n        </div>\n    </li>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, onBeforeUnmount, onMounted, ref, useSlots } from 'vue';\n    import { useResizeObserver } from '@vueuse/core';\n    import { BentoLink } from '@/components/link';\n    import { BentoTypography } from '@/components/typography';\n    import { generateUid } from '@/utils/ts/generate-uid';\n    import { useHasSlot } from '@/composables';\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives/tooltip';\n    import type { BentoNavigationMenuItemProps } from './navigation-menu-item.types';\n    import type { BentoNavigationMenuGroupState } from '../navigation-menu-group/navigation-menu-group.internal.types';\n    import { NAVIGATION_MENU_GROUP_STATE_INJECTION_KEY } from '../navigation-menu-group/navigation-menu-group.keys';\n    import type { BentoNavigationMenuState } from '../../navigation-menu.internal.types';\n    import { NAVIGATION_MENU_STATE_INJECTION_KEY } from '../../navigation-menu.keys';\n\n    const props = defineProps({\n  nested: { type: Boolean, default: false },\n  label: null,\n  link: null,\n  value: null,\n  alwaysShowActions: { type: Boolean, default: false }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const componentType = computed(() => (props.link ? BentoLink : 'div'));\n    const componentProps = computed(() => (props.link ? { ...props.link, disableTypography: true } : {}));\n\n    const labelRef = ref(null);\n    const isTruncated = ref(false);\n\n    useResizeObserver(labelRef, () => {\n        const el = labelRef.value?.$el ?? labelRef.value;\n        if (el) {\n            isTruncated.value = el.scrollWidth > el.clientWidth;\n        }\n    });\n\n    const itemId = generateUid('navigation-menu-item');\n    const groupState = inject<BentoNavigationMenuGroupState | null>(NAVIGATION_MENU_GROUP_STATE_INJECTION_KEY, null);\n    const menuState = inject<BentoNavigationMenuState | null>(NAVIGATION_MENU_STATE_INJECTION_KEY, null);\n\n    const isSelected = computed(() => menuState?.activePage?.value === props.value);\n\n    const isVisible = computed(() => {\n        if (!groupState) {\n            return true;\n        }\n        if (!groupState.isSemiCollapsed.value) {\n            return true;\n        }\n        return isSelected.value;\n    });\n\n    const conditionalClasses = computed(() => ({\n        'b-navigation-menu-item--selected': isSelected.value,\n        'b-navigation-menu-item--nested': props.nested,\n        'b-navigation-menu-item--hidden': !isVisible.value,\n        'b-navigation-menu-item--always-show-actions': props.alwaysShowActions,\n    }));\n\n    onMounted(() => {\n        if (groupState && props.nested) {\n            groupState.registerItem(itemId, () => isSelected.value);\n        }\n    });\n\n    const handleClick = () => {\n        menuState?.updateActivePage(props.value);\n    };\n\n    onBeforeUnmount(() => {\n        if (groupState && props.nested) {\n            groupState.unregisterItem(itemId);\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Navigation menu item component for rendering individual navigation links.\n     * Can be used standalone or nested within a navigation-menu-group.\n     *\n     * @usage\n     * import { BentoNavigationMenuItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoNavigationMenuItem },\n     *     template: `\n     *          <bento-navigation-menu-item value=\"home\" label=\"Home\" :link=\"{ to: '/home' }\">\n     *              <template #icon><home-icon /></template>\n     *              <template #action><star-icon svg-title=\"Add to favorites\" /></template>\n     *          </bento-navigation-menu-item>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-navigation-menu-item',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./navigation-menu-item.scss\" />\n","<template>\n    <li class=\"b-navigation-menu-group\">\n        <button\n            :id=\"buttonId\"\n            type=\"button\"\n            class=\"b-navigation-menu-group__header\"\n            :class=\"{\n                ...headerClasses,\n                'b-navigation-menu-group__header--no-icon': !hasSlot('icon'),\n            }\"\n            :aria-expanded=\"`${isOpen && !isSemiCollapsed}`\"\n            :aria-controls=\"contentId\"\n            :aria-description=\"headerAriaDescription\"\n            @click=\"toggleGroup\"\n        >\n            <div v-if=\"hasSlot('icon')\" class=\"b-navigation-menu-group__icon\" aria-hidden=\"true\">\n                <slot name=\"icon\" />\n            </div>\n            <bento-typography\n                ref=\"labelRef\"\n                v-bento-tooltip-directive=\"isTruncated ? label : undefined\"\n                el=\"span\"\n                variant=\"body\"\n                stronger\n                class=\"b-navigation-menu-group__label\"\n            >\n                {{ label }}\n            </bento-typography>\n            <div class=\"b-navigation-menu-group__icon b-navigation-menu-group__icon--chevron\" aria-hidden=\"true\">\n                <chevron-up-icon v-if=\"isOpen && !isSemiCollapsed\" />\n                <chevron-down-icon v-else />\n            </div>\n        </button>\n\n        <Transition name=\"b-navigation-menu-group__animation--content\">\n            <div\n                v-show=\"isOpen\"\n                :id=\"contentId\"\n                class=\"b-navigation-menu-group__content-wrapper\"\n                role=\"region\"\n                :aria-labelledby=\"buttonId\"\n                :style=\"contentMaxHeight\"\n            >\n                <ul ref=\"contentDiv\" class=\"b-navigation-menu-group__content\">\n                    <slot />\n                </ul>\n            </div>\n        </Transition>\n    </li>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, onMounted, onUnmounted, provide, ref, useSlots, watch } from 'vue';\n    import { useResizeObserver } from '@vueuse/core';\n    import { BentoTypography } from '@/components/typography';\n    import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\n    import { useHasSlot } from '@/composables';\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives/tooltip';\n    import { generateUid } from '@/utils/ts/generate-uid';\n    import { useI18n } from '@/utils/ts/i18n';\n    import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n    import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n    import type { BentoNavigationMenuGroupProps } from './navigation-menu-group.types';\n    import type {\n        BentoNavigationMenuGroupState,\n        BentoNavigationMenuItemRegistration,\n    } from './navigation-menu-group.internal.types';\n    import { NAVIGATION_MENU_STATE_INJECTION_KEY } from '../../navigation-menu.keys';\n    import { NAVIGATION_MENU_GROUP_STATE_INJECTION_KEY } from './navigation-menu-group.keys';\n    import { type BentoNavigationMenuState } from '../../navigation-menu.internal.types';\n    import messages from '../../messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  isExpanded: { type: Boolean, default: false },\n  label: null\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const headerClasses = computed(() => ({\n        'b-navigation-menu-group__header--expanded': isOpen.value && !isSemiCollapsed.value,\n    }));\n\n    const headerAriaDescription = computed(() => (isSemiCollapsed.value ? t('showingCurrentPage') : undefined));\n\n    const labelRef = ref(null);\n    const isTruncated = ref(false);\n\n    useResizeObserver(labelRef, () => {\n        const el = labelRef.value?.$el ?? labelRef.value;\n        if (el) {\n            isTruncated.value = el.scrollWidth > el.clientWidth;\n        }\n    });\n\n    const groupId = generateUid('navigation-menu-group');\n    const buttonId = generateUid('navigation-menu-group-button');\n    const contentId = generateUid('navigation-menu-group-content');\n    const navigationMenuState = inject<BentoNavigationMenuState | null>(NAVIGATION_MENU_STATE_INJECTION_KEY, null);\n\n    const nestedItems = ref<Array<BentoNavigationMenuItemRegistration>>([]);\n\n    const registerItem = (itemId: string, isSelected: () => boolean) => {\n        nestedItems.value.push({ id: itemId, isSelected });\n    };\n\n    const unregisterItem = (itemId: string) => {\n        nestedItems.value = nestedItems.value.filter(item => item.id !== itemId);\n    };\n\n    const isSemiCollapsed = ref(false);\n\n    provide<BentoNavigationMenuGroupState>(NAVIGATION_MENU_GROUP_STATE_INJECTION_KEY, {\n        registerItem,\n        unregisterItem,\n        isSemiCollapsed,\n    });\n\n    const hasActiveItem = computed(() => nestedItems.value.some(item => item.isSelected()));\n\n    const emit = defineEmits([\"update:is-expanded\"]);\n\n    const isOpen = ref(props.isExpanded);\n    const contentDiv = ref<HTMLUListElement>(null);\n\n    const { contentHeight } = useExpandableContentHeight(contentDiv, isOpen);\n    const contentMaxHeight = computed(() => (contentHeight.value ? { 'max-height': contentHeight.value } : {}));\n\n    const toggleGroup = () => {\n        if (isOpen.value && !isSemiCollapsed.value) {\n            if (hasActiveItem.value) {\n                isSemiCollapsed.value = true;\n            } else {\n                isOpen.value = false;\n            }\n        } else if (isSemiCollapsed.value) {\n            isSemiCollapsed.value = false;\n        } else {\n            isOpen.value = true;\n        }\n        emit('update:is-expanded', isOpen.value && !isSemiCollapsed.value);\n    };\n\n    const setOpen = (open: boolean) => {\n        if (open) {\n            isOpen.value = true;\n            isSemiCollapsed.value = false;\n        } else if (hasActiveItem.value) {\n            isSemiCollapsed.value = true;\n        } else {\n            isSemiCollapsed.value = false;\n            isOpen.value = false;\n        }\n        emit('update:is-expanded', open);\n    };\n\n    watch(\n        () => props.isExpanded,\n        value => {\n            if (!isSemiCollapsed.value) {\n                isOpen.value = value;\n            }\n        }\n    );\n\n    onMounted(() => {\n        if (hasActiveItem.value && !isOpen.value) {\n            isOpen.value = true;\n            emit('update:is-expanded', true);\n        }\n        if (navigationMenuState) {\n            navigationMenuState.registerGroup(groupId, setOpen, () => isOpen.value && !isSemiCollapsed.value);\n        }\n    });\n\n    onUnmounted(() => navigationMenuState?.unregisterGroup(groupId));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Navigation menu group component for creating collapsible sections.\n     *\n     * @usage\n     * import { BentoNavigationMenuGroup, BentoNavigationMenuItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoNavigationMenuGroup, BentoNavigationMenuItem },\n     *     template: `\n     *          <bento-navigation-menu-group label=\"Section\" :is-expanded=\"true\">\n     *              <template #icon><folder-icon /></template>\n     *              <bento-navigation-menu-item nested value=\"item-1\" label=\"Item 1\" :link=\"{ to: '/section/item-1' }\" />\n     *              <bento-navigation-menu-item nested value=\"item-2\" label=\"Item 2\" :link=\"{ to: '/section/item-2' }\" />\n     *          </bento-navigation-menu-group>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-navigation-menu-group',\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./navigation-menu-group.scss\" />\n"],"names":["instance","getCurrentInstance","uuid","NAVIGATION_MENU_STATE_INJECTION_KEY","__default__$2","messages","slots","useSlots","hasSlot","useHasSlot","titleId","generateUid","t","useI18n","groups","ref","registerGroup","groupId","setOpen","getIsOpen","unregisterGroup","g","allExpanded","computed","group","computedShowExpandAll","props","showHeader","expandButtonLabel","toggleAllGroups","shouldExpand","emit","updateActivePage","value","provide","toRef","NAVIGATION_MENU_GROUP_STATE_INJECTION_KEY","__default__$1","componentType","BentoLink","componentProps","labelRef","isTruncated","useResizeObserver","el","itemId","groupState","inject","menuState","isSelected","isVisible","conditionalClasses","onMounted","handleClick","onBeforeUnmount","__default__","headerClasses","isOpen","isSemiCollapsed","headerAriaDescription","buttonId","contentId","navigationMenuState","nestedItems","registerItem","unregisterItem","item","hasActiveItem","contentDiv","contentHeight","useExpandableContentHeight","contentMaxHeight","toggleGroup","open","watch","onUnmounted"],"mappings":"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"}

package/dist/chunks/{pagination.D4uye85j.js → pagination.cI_pc6oE.js}

@@ -1,10 +1,10 @@
 import { defineComponent as m, computed as l, watch as y, getCurrentInstance as d, useSlots as x } from "vue";
 import { p as S, B as h } from "./typography.D1OZJbEa.js";
-import { B as P } from "./dropdown.Bkl-FGT4.js";
+import { B as P } from "./dropdown.Bnq4kP7k.js";
 import { g as T } from "./generate-uid.DBWe4g6T.js";
 import { u as f, g as C, a as b } from "./index.CPOlyau9.js";
 import { n as u } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { B as I } from "./button.CBqJGWy5.js";
+import { B as I } from "./button.DII5Ifwa.js";
 /* empty css              */
 import { C as B } from "./chevron-right-small.zD3HHYEi.js";
 import { u as w } from "./use-has-slot.C9lQZ6nz.js";
@@ -70,7 +70,7 @@ var z = function() {
   k,
   !1,
   null,
-  "5b489e82"
+  "a76ab587"
 );
 const O = R.exports, D = {
   "de-DE": { pageNumber: "Seite {page}", pageNumberOfTotal: "Seite {page} von {totalPages}" },
@@ -119,7 +119,7 @@ var M = function() {
   Z,
   !1,
   null,
-  "aed5b81a"
+  "7076bb88"
 );
 const E = V.exports, U = {
   __name: "skip-left",
@@ -282,4 +282,4 @@ const Ie = de.exports;
 export {
   Ie as B
 };
-//# sourceMappingURL=pagination.D4uye85j.js.map
+//# sourceMappingURL=pagination.cI_pc6oE.js.map

package/dist/chunks/pagination.cI_pc6oE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.cI_pc6oE.js","sources":["../../src/components/pagination/components/pagination-results-per-page/pagination-results-per-page.vue","../../src/components/pagination/components/pagination-context/pagination-context.vue","../../../ui-assets/icons-16/dist/vue/skip-left.vue","../../../ui-assets/icons-16/dist/vue/skip-right.vue","../../../ui-assets/icons-16/dist/vue/chevron-left-small.vue","../../src/components/pagination/components/pagination-controls/pagination-controls.vue","../../src/components/pagination/pagination.vue"],"sourcesContent":["<template>\n    <div class=\"b-pagination-results-per-page\">\n        <bento-typography el=\"div\">\n            <component\n                :is=\"i18nComponent\"\n                v-bind=\"getI18nProps(translationPathKey)\"\n                class=\"b-pagination-results-per-page__dropdown-container\"\n                tag=\"div\"\n                :plural=\"totalCount\"\n            >\n                <template v-if=\"hidePageSizeSelection\" #itemCount>{{ itemsPerPage }}</template>\n\n                <template v-else #itemCount>\n                    <bento-dropdown\n                        :id=\"dropdownId\"\n                        :aria-label=\"t(translationPathKey, { itemCount: itemsPerPage, totalCount })\"\n                        class=\"b-pagination-results-per-page__dropdown\"\n                        condensed\n                        :items=\"predefinedDropdownOptions\"\n                        :model-value=\"itemsPerPage\"\n                        @update:model-value=\"onSelectChange\"\n                    />\n                </template>\n                <template v-if=\"!!totalCount\" #totalCount>{{ totalCount }}</template>\n            </component>\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, watch } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { generateUid } from '@/utils/ts/generate-uid';\n    import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t, n } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  hidePageSizeSelection: { type: Boolean, default: false },\n  itemsPerPage: { default: 50 },\n  totalCount: { default: null },\n  pageSizeItems: { default: () => [10, 20, 50, 75, 100] }\n});\n\n    const emit = defineEmits([\"select\"]);\n\n    const isValid = computed(\n        () => Array.isArray(props.pageSizeItems) && props.pageSizeItems.every(option => Number.isInteger(option))\n    );\n\n    watch(\n        isValid,\n        valid => {\n            if (!valid) {\n                printDevelopmentWarning('BentoPagination: pageSizeItems must be an array of integers.');\n            }\n        },\n        { immediate: true }\n    );\n\n    const dropdownId = generateUid('b-pagination-context-number-elements');\n    const predefinedDropdownOptions = computed(() =>\n        props.pageSizeItems.map(option => ({\n            label: n(option),\n            value: option,\n        }))\n    );\n    const i18nComponent = getI18nComponent();\n\n    const onSelectChange = (selectedNumberOfResults: number) => {\n        emit('select', selectedNumberOfResults);\n    };\n\n    const translationPathKey = computed(() => (props.totalCount ? 'showingItemsWithTotal' : 'showingItems'));\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-results-per-page.scss\" />\n","<template>\n    <div class=\"b-pagination-context\">\n        <bento-typography v-if=\"totalPages > 1 && !hidePageSelection\" el=\"div\">\n            <component :is=\"i18nComponent\" v-bind=\"getI18nProps('pageNumber')\" tag=\"div\">\n                <template #page>\n                    <bento-dropdown\n                        :id=\"dropdownId\"\n                        :aria-label=\"t('pageNumber', { page: n(page) })\"\n                        class=\"b-pagination-context__dropdown\"\n                        condensed\n                        :items=\"listOfAvailablePages\"\n                        :model-value=\"page\"\n                        :virtual-scroll=\"virtualScroll\"\n                        @update:model-value=\"onPageSelectChange\"\n                    />\n                </template>\n            </component>\n        </bento-typography>\n        <bento-typography v-else-if=\"showPageNumberOfTotal\" el=\"span\">\n            {{ t('pageNumberOfTotal', { page: n(page), totalPages: n(totalPages) }) }}\n        </bento-typography>\n        <bento-typography v-else el=\"span\">\n            {{ t('pageNumber', { page: n(page) }) }}\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { type BentoListboxOptionItem } from '@/types/listbox';\n    import { generateUid } from '@/utils/ts/generate-uid';\n    import messages from './messages.json';\n    import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  hidePageSelection: { type: Boolean, default: false },\n  page: { default: 1 },\n  totalPages: { default: null },\n  virtualScroll: { type: Boolean, default: false }\n});\n    const emit = defineEmits([\"page-selected\"]);\n\n    const { t, n } = useI18n<{ message: MessageSchema }>({ messages });\n    const dropdownId = generateUid('bento-pagination-context-current-page');\n    const onPageSelectChange = (selectedPage: string | number) => emit('page-selected', selectedPage);\n    const i18nComponent = getI18nComponent();\n\n    // Generate a list of pages from 1 to \"totalPages\"\n    const transformIntoOption = (value: number): BentoListboxOptionItem => ({\n        label: n(value),\n        value,\n    });\n    const transformToPageNumber = (_, index) => index + 1;\n    const listOfAvailablePages = computed(() =>\n        Array.from(new Array(props.totalPages), transformToPageNumber).map(transformIntoOption)\n    );\n    const showPageNumberOfTotal = computed(\n        () => props.totalPages === 1 || (props.hidePageSelection && props.page <= props.totalPages)\n    );\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-context.scss\" />\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><path fill=\"#001222\" d=\"M9.06055 8.00011L12.0605 5.00011L10.9999 3.93945L6.93923 8.00011L10.9999 12.0608L12.0605 11.0001L9.06055 8.00011Z\"/><path fill=\"#001222\" d=\"M4.25 4.25L4.25 11.75H5.75L5.75 4.25L4.25 4.25Z\"/></svg>\n</template>\n<script setup>\n    import { getCurrentInstance } from 'vue';\n    import '../css/main.css';\n\n    const instance = getCurrentInstance();\n    const uuid = String(instance?.uid ?? instance?.proxy?._uid);\n</script>\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><path fill=\"#001222\" d=\"M6.93945 7.99962L3.93945 10.9996L5.00011 12.0603L9.06077 7.99963L5.00011 3.93896L3.93945 4.99963L6.93945 7.99962Z\"/><path fill=\"#001222\" d=\"M11.75 11.7497V4.24974L10.25 4.24974V11.7497H11.75Z\"/></svg>\n</template>\n<script setup>\n    import { getCurrentInstance } from 'vue';\n    import '../css/main.css';\n\n    const instance = getCurrentInstance();\n    const uuid = String(instance?.uid ?? instance?.proxy?._uid);\n</script>\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><path fill=\"#001222\" d=\"M10.5608 5.00011L7.56077 8.00011L10.5608 11.0001L9.50011 12.0608L5.43945 8.00011L9.50011 3.93945L10.5608 5.00011Z\"/></svg>\n</template>\n<script setup>\n    import { getCurrentInstance } from 'vue';\n    import '../css/main.css';\n\n    const instance = getCurrentInstance();\n    const uuid = String(instance?.uid ?? instance?.proxy?._uid);\n</script>\n","<template>\n    <ul class=\"b-pagination-controls\">\n        <li v-if=\"!hideFirstLastPageButtons\" key=\"first\" class=\"b-pagination-controls__item\">\n            <!-- Navigate to the first page -->\n            <bento-button :disabled=\"isCurrentPageFirst\" variant=\"tertiary\" condensed @click=\"navigate(1)\">\n                <template #iconLeft>\n                    <skip-left :svg-title=\"t('navigateToTheFirstPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li key=\"previous\" class=\"b-pagination-controls__item\">\n            <!-- Navigate to the previous page -->\n            <bento-button :disabled=\"isCurrentPageFirst\" variant=\"tertiary\" condensed @click=\"navigate(page - 1)\">\n                <template #iconLeft>\n                    <chevron-left :svg-title=\"t('navigateToThePreviousPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li key=\"next\" class=\"b-pagination-controls__item\">\n            <!-- Navigate to the next page -->\n            <bento-button :disabled=\"isNextButtonDisabled\" variant=\"tertiary\" condensed @click=\"navigate(page + 1)\">\n                <template #iconLeft>\n                    <chevron-right :svg-title=\"t('navigateToTheNextPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li v-if=\"!hideFirstLastPageButtons\" key=\"last\" class=\"b-pagination-controls__item\">\n            <!-- Navigate to the last page -->\n            <bento-button\n                :disabled=\"isLastPageButtonDisabled\"\n                variant=\"tertiary\"\n                condensed\n                @click=\"navigate(totalPages)\"\n            >\n                <template #iconLeft>\n                    <skip-right :svg-title=\"t('navigateToTheLastPage')\" />\n                </template>\n            </bento-button>\n        </li>\n    </ul>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { useI18n } from '@/utils/ts/i18n';\n    import SkipLeft from '@adyen/ui-assets-icons-16/vue/skip-left';\n    import SkipRight from '@adyen/ui-assets-icons-16/vue/skip-right';\n    import ChevronLeft from '@adyen/ui-assets-icons-16/vue/chevron-left-small';\n    import ChevronRight from '@adyen/ui-assets-icons-16/vue/chevron-right-small';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  hasNext: { type: Boolean, default: null },\n  hideFirstLastPageButtons: { type: Boolean, default: false },\n  page: null,\n  totalPages: { default: null }\n});\n\n    const emit = defineEmits([\"navigate\"]);\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const isCurrentPageFirst = computed(() => props.page === 1);\n    const isCurrentPageLast = computed(() => props.page === props.totalPages);\n    const isNextButtonDisabled = computed(() => {\n        const hasNoNextPage = !props.hasNext;\n        return hasNoNextPage || isCurrentPageLast.value;\n    });\n    const isLastPageButtonDisabled = computed(() => {\n        const hasNoNextPage = !props.hasNext;\n        const hasNoTotalPagesNumber = !props.totalPages;\n\n        return hasNoNextPage || isCurrentPageLast.value || hasNoTotalPagesNumber;\n    });\n\n    const navigate = (pageArg: number) => {\n        emit('navigate', pageArg);\n    };\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-controls.scss\" />\n","<template>\n    <div class=\"b-pagination\">\n        <nav\n            :aria-label=\"$attrs['aria-label']\"\n            class=\"b-pagination__navigation\"\n            :class=\"navigationConditionalClasses()\"\n        >\n            <bento-pagination-results-per-page\n                v-if=\"!hidePageSize\"\n                class=\"b-pagination__results-per-page\"\n                :hide-page-size-selection=\"hidePageSizeSelection\"\n                :items-per-page=\"size\"\n                :total-count=\"totalCount\"\n                :page-size-items=\"pageSizeItems\"\n                @select=\"onItemsPerPageChange\"\n            />\n            <bento-typography v-else-if=\"hasSlot('default')\"><slot /></bento-typography>\n\n            <div class=\"b-pagination__page-navigator\">\n                <bento-pagination-context\n                    class=\"b-pagination__context\"\n                    :total-pages=\"totalPages\"\n                    :page=\"page\"\n                    :virtual-scroll=\"virtualScroll\"\n                    :hide-page-selection=\"hidePageSelection\"\n                    @page-selected=\"onPageSelected\"\n                />\n\n                <div class=\"b-pagination__divider\"></div>\n\n                <bento-pagination-controls\n                    class=\"b-pagination__controls\"\n                    :has-next=\"hasNext\"\n                    :hide-first-last-page-buttons=\"hideFirstLastPageButtons\"\n                    :page=\"page\"\n                    :total-pages=\"totalPages\"\n                    @navigate=\"navigate\"\n                />\n            </div>\n        </nav>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useSlots } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import BentoPaginationResultsPerPage from './components/pagination-results-per-page/pagination-results-per-page.vue';\n    import BentoPaginationContext from './components/pagination-context/pagination-context.vue';\n    import BentoPaginationControls from './components/pagination-controls/pagination-controls.vue';\n    import { useHasSlot } from '@/composables';\n    import type { BentoPaginationProps } from './pagination.types';\n\n    const props = defineProps({\n  hasNext: { type: Boolean, default: null },\n  hideFirstLastPageButtons: { type: Boolean, default: false },\n  hidePageSize: { type: Boolean, default: false },\n  hidePageSelection: { type: Boolean, default: false },\n  hidePageSizeSelection: { type: Boolean, default: false },\n  page: { default: 1 },\n  size: { default: 20 },\n  totalCount: { default: null },\n  virtualScroll: { type: Boolean, default: false },\n  pageSizeItems: { default: undefined }\n});\n\n    const emit = defineEmits([\"navigate\", \"items-page\", \"update:page\", \"update:size\"]);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const totalPages = computed(() =>\n        !props.totalCount || !props.size ? null : Math.ceil(props.totalCount / props.size)\n    );\n\n    const navigate = (pageArg: number, itemsPerPage?: number) => {\n        if (props.hidePageSize) {\n            emit('navigate', pageArg);\n        } else {\n            emit('navigate', pageArg, itemsPerPage ?? props?.size);\n        }\n        emit('update:page', pageArg);\n    };\n\n    const onPageSelected = (pageNumber: number) => {\n        navigate(pageNumber);\n    };\n\n    const onItemsPerPageChange = (elements: number) => {\n        emit('items-page', elements);\n        emit('update:size', elements);\n\n        // Always go to first page when the\n        // number of items page changes\n        navigate(1, elements);\n    };\n\n    const navigationConditionalClasses = () => ({\n        'b-pagination__navigation--only-page-navigator': !hasSlot('default') && props.hidePageSize,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Paginiation component to help users page through data sets.\n     *\n     * There are two ways of doing navigation in this component:\n     *      1. (Basic) You tell the component if there is a next page (hasNext)\n     *      2. (Enhanced) You tell the component:\n     *          - How many total items exist (totalCount)\n     *          - The max number of items that you show/fetch per page (size)\n     *          - In this case you should not set the hasNext props\n     *\n     * If you have the data available and opt to use the Enhanced way you get extra controls:\n     *      - Page dropdown selector\n     *      - Last page button\n     *      - \"Showing 10 of 200 items\" text\n     *\n     * @usage\n     * import { BentoPagination } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoPagination },\n     *     template: `\n     *         <bento-pagination :has-next=\"isNextPage\" />\n     *     `,\n     * }\n     */\n\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination.scss\" />\n"],"names":["__default__$3","messages$2","t","n","useI18n","isValid","computed","props","option","watch","valid","printDevelopmentWarning","dropdownId","generateUid","predefinedDropdownOptions","i18nComponent","getI18nComponent","onSelectChange","selectedNumberOfResults","emit","translationPathKey","__default__$2","messages$1","onPageSelectChange","selectedPage","transformIntoOption","value","transformToPageNumber","_","index","listOfAvailablePages","showPageNumberOfTotal","instance","getCurrentInstance","uuid","__default__$1","messages","isCurrentPageFirst","isCurrentPageLast","isNextButtonDisabled","isLastPageButtonDisabled","hasNoNextPage","hasNoTotalPagesNumber","pageArg","__default__","slots","useSlots","hasSlot","useHasSlot","totalPages","navigate","itemsPerPage","pageNumber","elements"],"mappings":"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"}

package/dist/chunks/{progress-bar.CeSR79Ue.js → progress-bar.RlF3a0Gb.js}

@@ -92,10 +92,10 @@ var j = function() {
   L,
   !1,
   null,
-  "1b1e58e0"
+  "d429b379"
 );
 const X = N.exports;
 export {
   X as p
 };
-//# sourceMappingURL=progress-bar.CeSR79Ue.js.map
+//# sourceMappingURL=progress-bar.RlF3a0Gb.js.map

package/dist/chunks/progress-bar.RlF3a0Gb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.RlF3a0Gb.js","sources":["../../src/components/progress-bar/progress-bar.vue"],"sourcesContent":["<template>\n    <div class=\"b-progress-bar\" :class=\"conditionalClasses\">\n        <div class=\"b-progress-bar__header\">\n            <field-label\n                v-if=\"label\"\n                :id=\"labelId\"\n                class=\"b-progress-bar__label\"\n                :label=\"label\"\n                :tooltip-text=\"tooltipText\"\n            />\n\n            <div v-if=\"shouldShowValue\" class=\"b-progress-bar__value\">\n                <slot name=\"value\">\n                    <bento-typography el=\"span\" stronger>{{ valueText }}</bento-typography>\n                </slot>\n            </div>\n        </div>\n\n        <div class=\"b-progress-bar__track\" :class=\"conditionalTrackClasses\" role=\"progressbar\" v-bind=\"trackA11yAttrs\">\n            <div\n                class=\"b-progress-bar__track-indicator\"\n                :class=\"conditionalIndicatorClasses\"\n                :style=\"indicatorStyle\"\n                @animationend=\"onIndicatorAnimationEnd\"\n            ></div>\n        </div>\n\n        <error-message\n            v-if=\"!!errorMessage\"\n            :id=\"errorId\"\n            :error-message=\"errorMessage\"\n            class=\"b-progress-bar__error-message\"\n        />\n\n        <bento-typography\n            v-if=\"description\"\n            :id=\"descriptionId\"\n            el=\"span\"\n            class=\"b-progress-bar__description\"\n            :class=\"conditionalDescriptionClasses\"\n        >\n            {{ description }}\n        </bento-typography>\n\n        <div class=\"b-progress-bar__announcement\" role=\"status\" aria-live=\"polite\">\n            {{ completionMessage }}\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, useSlots, watch } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { ErrorMessage, FieldLabel } from '@/internal';\n    import { useHasSlot } from '@/composables';\n    import { generateUid } from '@/utils/ts/generate-uid';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { type BentoProgressBarProps } from './progress-bar.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  staticAnimation: { type: Boolean, default: true },\n  completionAnnouncement: { default: undefined },\n  description: { default: undefined },\n  direction: { default: 'default' },\n  errorMessage: { default: undefined },\n  height: { default: 'default' },\n  shimmer: { type: Boolean, default: true },\n  stopIndicator: { type: Boolean, default: true },\n  successFlash: { type: Boolean, default: true },\n  valueVisible: { type: Boolean, default: true },\n  label: { default: undefined },\n  tooltipText: { default: undefined },\n  type: { default: 'default' },\n  value: { default: undefined },\n  variant: { default: 'determinate' }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const labelId = generateUid('progress-bar-label');\n    const descriptionId = generateUid('progress-bar-description');\n    const errorId = generateUid('progress-bar-error');\n\n    // Value\n    const clampedValue = computed(() => {\n        if (props.value === undefined) {\n            return 0;\n        }\n        return Math.min(Math.max(props.value, 0), 100);\n    });\n\n    const valueText = computed(() => `${clampedValue.value}%`);\n\n    // Success flash, triggered once when the value crosses into 100\n    const isSuccessFlashing = ref(false);\n\n    // Screen readers do not reliably announce progressbar value changes, so completion is announced\n    // through a polite live region when the value crosses into 100.\n    const completionMessage = ref('');\n\n    watch(clampedValue, (value, previousValue) => {\n        if (props.variant !== 'determinate' || previousValue >= 100 || value < 100) {\n            return;\n        }\n\n        if (props.successFlash) {\n            isSuccessFlashing.value = true;\n        }\n\n        completionMessage.value = props.completionAnnouncement ?? t('progressComplete');\n    });\n\n    // Variant state\n    const effectiveVariant = computed(() => {\n        if (props.valueVisible && props.value === undefined && !hasSlot('value')) {\n            return 'indeterminate';\n        }\n\n        return props.variant;\n    });\n\n    const isIndeterminate = computed(() => effectiveVariant.value === 'indeterminate');\n\n    // Display flags\n    const shouldShowValue = computed(\n        () => props.valueVisible && !isIndeterminate.value && (hasSlot('value') || props.value !== undefined)\n    );\n\n    const shouldShowError = computed(() => !!props.errorMessage);\n\n    // Indicator styling\n    const indicatorStyle = computed(() => {\n        if (isIndeterminate.value) {\n            return undefined;\n        }\n\n        const width = props.direction === 'default' ? `${clampedValue.value}%` : `${100 - clampedValue.value}%`;\n\n        return { width };\n    });\n\n    // Accessibility\n    const trackA11yAttrs = computed(() => {\n        const describedBy =\n            [props.description ? descriptionId : null, props.errorMessage ? errorId : null].filter(Boolean).join(' ') ||\n            undefined;\n\n        return {\n            'aria-labelledby': props.label ? labelId : undefined,\n            'aria-describedby': describedBy,\n            'aria-busy': isIndeterminate.value || undefined,\n            'aria-valuemin': isIndeterminate.value ? undefined : 0,\n            'aria-valuemax': isIndeterminate.value ? undefined : 100,\n            'aria-valuenow': isIndeterminate.value ? undefined : clampedValue.value,\n        };\n    });\n\n    // Conditional classes\n    const conditionalClasses = computed(() => ({\n        [`b-progress-bar--${props.height}`]: props.height !== 'default',\n        [`b-progress-bar--${props.type}`]: props.type !== 'default',\n        'b-progress-bar--error': shouldShowError.value,\n    }));\n\n    const conditionalTrackClasses = computed(() => ({\n        'b-progress-bar__track--reverse': props.direction === 'reverse',\n        'b-progress-bar__track--with-stop-indicator': props.stopIndicator && effectiveVariant.value === 'determinate',\n        'b-progress-bar__track--with-success-flash':\n            isSuccessFlashing.value && effectiveVariant.value === 'determinate',\n    }));\n\n    const conditionalIndicatorClasses = computed(() => ({\n        'b-progress-bar__track-indicator--indeterminate': isIndeterminate.value,\n        'b-progress-bar__track-indicator--static': effectiveVariant.value === 'static',\n        'b-progress-bar__track-indicator--static-animated':\n            props.staticAnimation && effectiveVariant.value === 'static',\n        'b-progress-bar__track-indicator--with-shimmer':\n            props.shimmer && !props.errorMessage && effectiveVariant.value === 'determinate',\n        'b-progress-bar__track-indicator--with-success-flash':\n            isSuccessFlashing.value && effectiveVariant.value === 'determinate',\n        [`b-progress-bar__track-indicator--${props.type}`]: props.type !== 'default',\n        'b-progress-bar__track-indicator--error': shouldShowError.value,\n    }));\n\n    const conditionalDescriptionClasses = computed(() => ({\n        'b-progress-bar__description--error': !!props.errorMessage,\n    }));\n\n    const onIndicatorAnimationEnd = (event: AnimationEvent) => {\n        if (event.animationName?.includes('success-flash')) {\n            isSuccessFlashing.value = false;\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A progress bar communicates the completion status of a task or process.\n     *\n     * @usage\n     * import { BentoProgressBar } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoProgressBar },\n     *     template: `\n     *         <bento-progress-bar :value=\"40\" label=\"Uploading files\" />\n     *     `\n     * };\n     */\n    export default {\n        name: 'bento-progress-bar',\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./progress-bar.scss\" />\n"],"names":["__default__","messages","t","useI18n","slots","useSlots","hasSlot","useHasSlot","labelId","generateUid","descriptionId","errorId","clampedValue","computed","props","valueText","isSuccessFlashing","ref","completionMessage","watch","value","previousValue","effectiveVariant","isIndeterminate","shouldShowValue","shouldShowError","indicatorStyle","trackA11yAttrs","describedBy","conditionalClasses","conditionalTrackClasses","conditionalIndicatorClasses","conditionalDescriptionClasses","event"],"mappings":";;;;;;;;;;;;;;;;;;;;GAuNIA,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,MAAA,EAAA,UAAAC,EAAA;AAEV;;;;;;;;;;;;;;;;;;;;iBA5JA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAoBAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,oBAAA,GACAC,IAAAD,EAAA,0BAAA,GACAE,IAAAF,EAAA,oBAAA,GAGAG,IAAAC,EAAA,MACIC,EAAA,UAAA,SACI,IAEJ,KAAA,IAAA,KAAA,IAAAA,EAAA,OAAA,CAAA,GAAA,GAAA,CAA6C,GAGjDC,IAAAF,EAAA,MAAA,GAAAD,EAAA,KAAA,GAAA,GAGAI,IAAAC,EAAA,EAAA,GAIAC,IAAAD,EAAA,EAAA;AAEA,IAAAE,EAAAP,GAAA,CAAAQ,GAAAC,MAAA;AACI,MAAAP,EAAA,YAAA,iBAAAO,KAAA,OAAAD,IAAA,QAIAN,EAAA,iBACIE,EAAA,QAAA,KAGJE,EAAA,QAAAJ,EAAA,0BAAAZ,EAAA,kBAAA;AAAA,IAA8E,CAAA;AAIlF,UAAAoB,IAAAT,EAAA,MACIC,EAAA,gBAAAA,EAAA,UAAA,UAAA,CAAAR,EAAA,OAAA,IACI,kBAGJQ,EAAA,OAAa,GAGjBS,IAAAV,EAAA,MAAAS,EAAA,UAAA,eAAA,GAGAE,IAAAX;AAAA,MAAwB,MAAAC,EAAA,gBAAA,CAAAS,EAAA,UAAAjB,EAAA,OAAA,KAAAQ,EAAA,UAAA;AAAA,IACuE,GAG/FW,IAAAZ,EAAA,MAAA,CAAA,CAAAC,EAAA,YAAA,GAGAY,IAAAb,EAAA,MACIU,EAAA,QACI,SAKJ,EAAA,OAFAT,EAAA,cAAA,YAAA,GAAAF,EAAA,KAAA,MAAA,GAAA,MAAAA,EAAA,KAAA,IAEA,CAAe,GAInBe,IAAAd,EAAA,MAAA;AACI,YAAAe,IAAA,CAAAd,EAAA,cAAAJ,IAAA,MAAAI,EAAA,eAAAH,IAAA,IAAA,EAAA,OAAA,OAAA,EAAA,KAAA,GAAA,KAAA;AAIA,aAAA;AAAA,QAAO,mBAAAG,EAAA,QAAAN,IAAA;AAAA,QACwC,oBAAAoB;AAAA,QACvB,aAAAL,EAAA,SAAA;AAAA,QACkB,iBAAAA,EAAA,QAAA,SAAA;AAAA,QACe,iBAAAA,EAAA,QAAA,SAAA;AAAA,QACA,iBAAAA,EAAA,QAAA,SAAAX,EAAA;AAAA,MACa;AAAA,IACtE,CAAA,GAIJiB,IAAAhB,EAAA,OAAA;AAAA,MAA2C,CAAA,mBAAAC,EAAA,MAAA,EAAA,GAAAA,EAAA,WAAA;AAAA,MACe,CAAA,mBAAAA,EAAA,IAAA,EAAA,GAAAA,EAAA,SAAA;AAAA,MACJ,yBAAAW,EAAA;AAAA,IACT,EAAA,GAG7CK,IAAAjB,EAAA,OAAA;AAAA,MAAgD,kCAAAC,EAAA,cAAA;AAAA,MACU,8CAAAA,EAAA,iBAAAQ,EAAA,UAAA;AAAA,MAC0C,6CAAAN,EAAA,SAAAM,EAAA,UAAA;AAAA,IAEtC,EAAA,GAG9DS,IAAAlB,EAAA,OAAA;AAAA,MAAoD,kDAAAU,EAAA;AAAA,MACkB,2CAAAD,EAAA,UAAA;AAAA,MACI,oDAAAR,EAAA,mBAAAQ,EAAA,UAAA;AAAA,MAEd,iDAAAR,EAAA,WAAA,CAAAA,EAAA,gBAAAQ,EAAA,UAAA;AAAA,MAEe,uDAAAN,EAAA,SAAAM,EAAA,UAAA;AAAA,MAEb,CAAA,oCAAAR,EAAA,IAAA,EAAA,GAAAA,EAAA,SAAA;AAAA,MACS,0CAAAW,EAAA;AAAA,IACT,EAAA,GAG9DO,IAAAnB,EAAA,OAAA;AAAA,MAAsD,sCAAA,CAAA,CAAAC,EAAA;AAAA,IACJ,EAAA;wbAGlD,CAAAmB,MAAA;AACI,MAAAA,EAAA,eAAA,SAAA,eAAA,MACIjB,EAAA,QAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{promo-banner.BzTq9SMT.js → promo-banner.B5szTysj.js}

@@ -1,9 +1,9 @@
 import { defineComponent as v, ref as B, computed as o } from "vue";
 import { h as y } from "./index.CL3TXc0a.js";
-import { B as R } from "./button.CBqJGWy5.js";
+import { B as R } from "./button.DII5Ifwa.js";
 import { a as l, b as I, B as T } from "./image.C2D2hKat.js";
-import { B as b } from "./typography.D1OZJbEa.js";
-import { u as C } from "./index.CPOlyau9.js";
+import { B as C } from "./typography.D1OZJbEa.js";
+import { u as b } from "./index.CPOlyau9.js";
 import { g as h } from "./generate-uid.DBWe4g6T.js";
 import { n as O } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/promo-banner.css";
@@ -36,10 +36,10 @@ const D = {
   },
   emits: ["dismiss"],
   setup(n, { emit: e }) {
-    const t = n, { t: i } = C(), s = B(null), a = y(s), u = h("promoBannerTitle"), m = o(() => t.image.aspectRatio === l.P16_9 ? 800 : t.image.aspectRatio === l.P2_1 ? 850 : t.image.aspectRatio === l.P1_1 ? 623 : 0), p = o(() => t.layout === c.HORIZONTAL && a.width.value <= m.value ? c.VERTICAL : t.layout), f = o(
+    const t = n, { t: i } = b(), s = B(null), a = y(s), u = h("promoBannerTitle"), m = o(() => t.image.aspectRatio === l.P16_9 ? 800 : t.image.aspectRatio === l.P2_1 ? 850 : t.image.aspectRatio === l.P1_1 ? 623 : 0), p = o(() => t.layout === c.HORIZONTAL && a.width.value <= m.value ? c.VERTICAL : t.layout), f = o(
       () => [`b-promo-banner--${p.value}`, `b-promo-banner--${t.color}`].join(" ")
     ), _ = (r) => r.iconOnly && (r.iconLeft || r.iconRight || r.icon), g = o(() => t.dismissButtonText || i("dismiss"));
-    return { __sfc: !0, t: i, props: t, emit: e, promoBannerRef: s, promoBannerSize: a, promoBannerTitleId: u, horizontalLayoutBreakpoint: m, bannerLayoutClass: p, bannerConditionalClass: f, isIconOnly: _, computedDismissButtonText: g, BentoButton: R, BentoImage: T, BentoImageObjectFit: I, BentoTypography: b };
+    return { __sfc: !0, t: i, props: t, emit: e, promoBannerRef: s, promoBannerSize: a, promoBannerTitleId: u, horizontalLayoutBreakpoint: m, bannerLayoutClass: p, bannerConditionalClass: f, isIconOnly: _, computedDismissButtonText: g, BentoButton: R, BentoImage: T, BentoImageObjectFit: I, BentoTypography: C };
   }
 });
 var E = function() {
@@ -61,7 +61,7 @@ var E = function() {
   k,
   !1,
   null,
-  "bb0ef392"
+  "fe410fc3"
 );
 const V = A.exports;
 export {
@@ -69,4 +69,4 @@ export {
   c as a,
   V as p
 };
-//# sourceMappingURL=promo-banner.BzTq9SMT.js.map
+//# sourceMappingURL=promo-banner.B5szTysj.js.map

package/dist/chunks/{promo-banner.BzTq9SMT.js.map → promo-banner.B5szTysj.js.map}

@@ -1 +1 @@
-{"version":3,"file":"promo-banner.BzTq9SMT.js","sources":["../../src/components/promo-banner/promo-banner.types.ts","../../src/components/promo-banner/promo-banner.vue"],"sourcesContent":["import { type BentoButtonActionObject } from '@/components/button';\nimport { type BentoButtonVariant } from '../button';\nimport { type BentoImageAspectRatio, type BentoImageProps } from '../image';\n\nexport interface BentoPromoBannerProps {\n    /**\n     * List of actions that will be used to render the buttons.\n     *\n     * Each object in the list should have a `title`, an `event` and a `variant`.\n     *\n     * `title`: Button's text.\n     * `event`: Event triggered when clicking the Button.\n     * `variant`: Button's style.\n     *\n     * ```\n     * [{\n     *   title: 'Primary',\n     *   event: () => { ... },\n     *   variant: 'primary'\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     *   variant: 'secondary'\n     * }]\n     * ```\n     */\n    actions?: Array<BentoPromoBannerAction>;\n\n    /**\n     * Defines the color of banner's background\n     */\n    color?: `${BentoPromoBannerColor}`;\n\n    /**\n     * Defines whether the banner has a `Dismiss` button\n     */\n    isDismissible?: boolean;\n\n    /**\n     * Defines whether the banner has a `Dismiss` button\n     */\n    dismissButtonText?: string;\n\n    /**\n     * Defines the image used in the banner.\n     *\n     * The promotional banner adapts to different container sizes based on the image's `aspect-ratio`.\n     * Only the following `aspect-ratio` values are supported: `16:9`, `2:1`, and `1:1`.\n     *\n     * In Storybook, to verify the image display, update `image.src` and `image.aspectRatio` as follows:\n     *  - `./1-1.png` with an aspect ratio of `1:1`\n     *  - `./2-1.png` with an aspect ratio of `2:1`\n     *  - `./16-9.png` with an aspect ratio of `16:9`\n     */\n    image: BentoPromoBannerImage;\n\n    /**\n     * Defines style of the banner.\n     *\n     * The horizontal layout is responsive to the container size and\n     * changes depending on the image aspect ratio.\n     *\n     * The vertical layout remains the same regardless of container size.\n     */\n    layout?: `${BentoPromoBannerLayout}`;\n\n    /**\n     * Defines the title text to be shown on the banner\n     */\n    title: string;\n}\n\nexport type BentoPromoBannerImageAspectRatio = `${\n    | BentoImageAspectRatio.P16_9\n    | BentoImageAspectRatio.P2_1\n    | BentoImageAspectRatio.P1_1}`;\n\nexport type BentoPromoBannerButtonVariant = `${BentoButtonVariant.PRIMARY | BentoButtonVariant.SECONDARY}`;\n\n/**\n * @deprecated Since v2.0.0. Use `BentoPromoBannerAction` without the generic instead.\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport type BentoPromoBannerAction<IconType = object> = BentoButtonActionObject & {\n    variant: BentoPromoBannerButtonVariant;\n};\n\nexport interface BentoPromoBannerImage {\n    src: BentoImageProps['src'];\n    alt?: BentoImageProps['alt'];\n    aspectRatio: BentoPromoBannerImageAspectRatio;\n}\n\nexport enum BentoPromoBannerColor {\n    BLUE = 'blue',\n    GREY = 'grey',\n    GREEN = 'green',\n}\n\nexport enum BentoPromoBannerLayout {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n}\n","<template>\n    <section\n        ref=\"promoBannerRef\"\n        class=\"b-promo-banner\"\n        :class=\"bannerConditionalClass\"\n        :aria-labelledby=\"promoBannerTitleId\"\n    >\n        <div class=\"b-promo-banner__content\">\n            <div class=\"b-promo-banner__content-header\">\n                <bento-typography :id=\"promoBannerTitleId\" variant=\"title\" large>\n                    {{ title }}\n                </bento-typography>\n\n                <slot name=\"description\" />\n            </div>\n\n            <div class=\"b-promo-banner__content-actions\">\n                <template v-if=\"actions\">\n                    <bento-button\n                        v-for=\"(button, index) in actions\"\n                        :key=\"index\"\n                        :variant=\"button.variant\"\n                        :critical=\"button.critical\"\n                        :disabled=\"button.disabled\"\n                        :inverse=\"button.inverse\"\n                        :icon-only=\"button.iconOnly\"\n                        :link=\"button.link\"\n                        @click=\"button.event\"\n                    >\n                        <template v-if=\"button.icon || button.iconLeft\" #iconLeft>\n                            <component :is=\"button.icon || button.iconLeft\" :svg-title=\"button.title\"></component>\n                        </template>\n\n                        <template v-if=\"!isIconOnly(button)\" #default>\n                            {{ button.title }}\n                        </template>\n\n                        <template v-if=\"button.iconRight\" #iconRight>\n                            <component :is=\"button.iconRight\" :svg-title=\"button.title\"></component>\n                        </template>\n                    </bento-button>\n                </template>\n\n                <bento-button v-if=\"isDismissible\" variant=\"secondary\" @click=\"emit('dismiss')\">\n                    {{ computedDismissButtonText }}\n                </bento-button>\n            </div>\n        </div>\n\n        <div class=\"b-promo-banner__image\">\n            <bento-image\n                class=\"b-promo-banner__image-item\"\n                :src=\"image.src\"\n                :alt=\"image.alt ?? ''\"\n                :aspect-ratio=\"image.aspectRatio\"\n                :object-fit=\"BentoImageObjectFit.CONTAIN\"\n            ></bento-image>\n        </div>\n    </section>\n</template>\n\n<script setup lang=\"ts\">\n    import { useElementSize } from '@vueuse/core';\n    import { computed, ref } from 'vue';\n\n    // Components\n    import { BentoButton, type BentoButtonActionObject } from '@/components/button';\n    import { BentoImage, BentoImageAspectRatio, BentoImageObjectFit } from '@/components/image';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoPromoBannerColor, BentoPromoBannerLayout, type BentoPromoBannerProps } from './promo-banner.types';\n\n    // Utils\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import { generateUid } from '@/core/utils/ts';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  actions: { default: null },\n  color: { default: BentoPromoBannerColor.GREY },\n  isDismissible: { type: Boolean, default: true },\n  dismissButtonText: { default: null },\n  image: null,\n  layout: { default: BentoPromoBannerLayout.HORIZONTAL },\n  title: null\n});\n\n    const emit = defineEmits([\"dismiss\"]);\n\n    const promoBannerRef = ref(null);\n    const promoBannerSize = useElementSize(promoBannerRef);\n    const promoBannerTitleId = generateUid('promoBannerTitle');\n\n    const horizontalLayoutBreakpoint = computed(() => {\n        if (props.image.aspectRatio === BentoImageAspectRatio.P16_9) {\n            return 800;\n        } else if (props.image.aspectRatio === BentoImageAspectRatio.P2_1) {\n            return 850;\n        } else if (props.image.aspectRatio === BentoImageAspectRatio.P1_1) {\n            return 623;\n        }\n\n        return 0;\n    });\n\n    const bannerLayoutClass = computed(() => {\n        // only horizontal layout is responsive and, by design, follows the container size\n        if (\n            props.layout === BentoPromoBannerLayout.HORIZONTAL &&\n            promoBannerSize.width.value <= horizontalLayoutBreakpoint.value\n        ) {\n            return BentoPromoBannerLayout.VERTICAL;\n        }\n\n        return props.layout;\n    });\n\n    const bannerConditionalClass = computed(() =>\n        [`b-promo-banner--${bannerLayoutClass.value}`, `b-promo-banner--${props.color}`].join(' ')\n    );\n\n    const isIconOnly = (button: BentoButtonActionObject) =>\n        button.iconOnly && (button.iconLeft || button.iconRight || button.icon);\n\n    const computedDismissButtonText = computed(() => props.dismissButtonText || t('dismiss'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Promotional Banner highlights important information, announcements, or promotions.\n     *\n     * @example\n     * import { BentoPromoBanner } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoPromoBanner },\n     *     template: `\n     *         <bento-promo-banner\n     *              title=\"Title\"\n     *              description=\"Brief description explaining and giving more information about the title\"\n     *              :image=\"{ src: '16-1.png', aspectRatio: '16:9' }\"\n     *              :actions=\"[{ title: 'Primary', event: () => {} }]\"\n     *         >\n     *         </bento-promo-banner>\n     *     `\n     * };\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-promo-banner',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./promo-banner.scss\" />\n"],"names":["BentoPromoBannerColor","BentoPromoBannerColor2","BentoPromoBannerLayout","BentoPromoBannerLayout2","__default__","messages","t","useI18n","promoBannerRef","ref","promoBannerSize","useElementSize","promoBannerTitleId","generateUid","horizontalLayoutBreakpoint","computed","props","BentoImageAspectRatio","bannerLayoutClass","bannerConditionalClass","isIconOnly","button","computedDismissButtonText"],"mappings":";;;;;;;;;AA6FO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,OAAA,QACAA,EAAA,OAAA,QACAA,EAAA,QAAA,SAHQA,IAAAD,KAAA,CAAA,CAAA,GAMLE,IAAA,kBAAAC,OACHA,EAAA,aAAA,cACAA,EAAA,WAAA,YAFQA,IAAAD,KAAA,CAAA,CAAA;;;;;;;;;;;;;GCoDRE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;;;;;iBA3EA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAcAC,IAAAC,EAAA,IAAA,GACAC,IAAAC,EAAAH,CAAA,GACAI,IAAAC,EAAA,kBAAA,GAEAC,IAAAC,EAAA,MACIC,EAAA,MAAA,gBAAAC,EAAA,QACI,MAAOD,EAAA,MAAA,gBAAAC,EAAA,OAEP,MAAOD,EAAA,MAAA,gBAAAC,EAAA,OAEP,MAGJ,CAAO,GAGXC,IAAAH,EAAA,MAEIC,EAAA,WAAAd,EAAA,cAAAQ,EAAA,MAAA,SAAAI,EAAA,QAIIZ,EAAA,WAGJc,EAAA,MAAa,GAGjBG,IAAAJ;AAAA,MAA+B,MAAA,CAAA,mBAAAG,EAAA,KAAA,IAAA,mBAAAF,EAAA,KAAA,EAAA,EAAA,KAAA,GAAA;AAAA,IAC8D,GAG7FI,IAAA,CAAAC,MAAAA,EAAA,aAAAA,EAAA,YAAAA,EAAA,aAAAA,EAAA,OAGAC,IAAAP,EAAA,MAAAC,EAAA,qBAAAV,EAAA,SAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"promo-banner.B5szTysj.js","sources":["../../src/components/promo-banner/promo-banner.types.ts","../../src/components/promo-banner/promo-banner.vue"],"sourcesContent":["import { type BentoButtonActionObject } from '@/components/button';\nimport { type BentoButtonVariant } from '../button';\nimport { type BentoImageAspectRatio, type BentoImageProps } from '../image';\n\nexport interface BentoPromoBannerProps {\n    /**\n     * List of actions that will be used to render the buttons.\n     *\n     * Each object in the list should have a `title`, an `event` and a `variant`.\n     *\n     * `title`: Button's text.\n     * `event`: Event triggered when clicking the Button.\n     * `variant`: Button's style.\n     *\n     * ```\n     * [{\n     *   title: 'Primary',\n     *   event: () => { ... },\n     *   variant: 'primary'\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     *   variant: 'secondary'\n     * }]\n     * ```\n     */\n    actions?: Array<BentoPromoBannerAction>;\n\n    /**\n     * Defines the color of banner's background\n     */\n    color?: `${BentoPromoBannerColor}`;\n\n    /**\n     * Defines whether the banner has a `Dismiss` button\n     */\n    isDismissible?: boolean;\n\n    /**\n     * Defines whether the banner has a `Dismiss` button\n     */\n    dismissButtonText?: string;\n\n    /**\n     * Defines the image used in the banner.\n     *\n     * The promotional banner adapts to different container sizes based on the image's `aspect-ratio`.\n     * Only the following `aspect-ratio` values are supported: `16:9`, `2:1`, and `1:1`.\n     *\n     * In Storybook, to verify the image display, update `image.src` and `image.aspectRatio` as follows:\n     *  - `./1-1.png` with an aspect ratio of `1:1`\n     *  - `./2-1.png` with an aspect ratio of `2:1`\n     *  - `./16-9.png` with an aspect ratio of `16:9`\n     */\n    image: BentoPromoBannerImage;\n\n    /**\n     * Defines style of the banner.\n     *\n     * The horizontal layout is responsive to the container size and\n     * changes depending on the image aspect ratio.\n     *\n     * The vertical layout remains the same regardless of container size.\n     */\n    layout?: `${BentoPromoBannerLayout}`;\n\n    /**\n     * Defines the title text to be shown on the banner\n     */\n    title: string;\n}\n\nexport type BentoPromoBannerImageAspectRatio = `${\n    | BentoImageAspectRatio.P16_9\n    | BentoImageAspectRatio.P2_1\n    | BentoImageAspectRatio.P1_1}`;\n\nexport type BentoPromoBannerButtonVariant = `${BentoButtonVariant.PRIMARY | BentoButtonVariant.SECONDARY}`;\n\n/**\n * @deprecated Since v2.0.0. Use `BentoPromoBannerAction` without the generic instead.\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport type BentoPromoBannerAction<IconType = object> = BentoButtonActionObject & {\n    variant: BentoPromoBannerButtonVariant;\n};\n\nexport interface BentoPromoBannerImage {\n    src: BentoImageProps['src'];\n    alt?: BentoImageProps['alt'];\n    aspectRatio: BentoPromoBannerImageAspectRatio;\n}\n\nexport enum BentoPromoBannerColor {\n    BLUE = 'blue',\n    GREY = 'grey',\n    GREEN = 'green',\n}\n\nexport enum BentoPromoBannerLayout {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n}\n","<template>\n    <section\n        ref=\"promoBannerRef\"\n        class=\"b-promo-banner\"\n        :class=\"bannerConditionalClass\"\n        :aria-labelledby=\"promoBannerTitleId\"\n    >\n        <div class=\"b-promo-banner__content\">\n            <div class=\"b-promo-banner__content-header\">\n                <bento-typography :id=\"promoBannerTitleId\" variant=\"title\" large>\n                    {{ title }}\n                </bento-typography>\n\n                <slot name=\"description\" />\n            </div>\n\n            <div class=\"b-promo-banner__content-actions\">\n                <template v-if=\"actions\">\n                    <bento-button\n                        v-for=\"(button, index) in actions\"\n                        :key=\"index\"\n                        :variant=\"button.variant\"\n                        :critical=\"button.critical\"\n                        :disabled=\"button.disabled\"\n                        :inverse=\"button.inverse\"\n                        :icon-only=\"button.iconOnly\"\n                        :link=\"button.link\"\n                        @click=\"button.event\"\n                    >\n                        <template v-if=\"button.icon || button.iconLeft\" #iconLeft>\n                            <component :is=\"button.icon || button.iconLeft\" :svg-title=\"button.title\"></component>\n                        </template>\n\n                        <template v-if=\"!isIconOnly(button)\" #default>\n                            {{ button.title }}\n                        </template>\n\n                        <template v-if=\"button.iconRight\" #iconRight>\n                            <component :is=\"button.iconRight\" :svg-title=\"button.title\"></component>\n                        </template>\n                    </bento-button>\n                </template>\n\n                <bento-button v-if=\"isDismissible\" variant=\"secondary\" @click=\"emit('dismiss')\">\n                    {{ computedDismissButtonText }}\n                </bento-button>\n            </div>\n        </div>\n\n        <div class=\"b-promo-banner__image\">\n            <bento-image\n                class=\"b-promo-banner__image-item\"\n                :src=\"image.src\"\n                :alt=\"image.alt ?? ''\"\n                :aspect-ratio=\"image.aspectRatio\"\n                :object-fit=\"BentoImageObjectFit.CONTAIN\"\n            ></bento-image>\n        </div>\n    </section>\n</template>\n\n<script setup lang=\"ts\">\n    import { useElementSize } from '@vueuse/core';\n    import { computed, ref } from 'vue';\n\n    // Components\n    import { BentoButton, type BentoButtonActionObject } from '@/components/button';\n    import { BentoImage, BentoImageAspectRatio, BentoImageObjectFit } from '@/components/image';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoPromoBannerColor, BentoPromoBannerLayout, type BentoPromoBannerProps } from './promo-banner.types';\n\n    // Utils\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import { generateUid } from '@/utils/ts/generate-uid';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  actions: { default: null },\n  color: { default: BentoPromoBannerColor.GREY },\n  isDismissible: { type: Boolean, default: true },\n  dismissButtonText: { default: null },\n  image: null,\n  layout: { default: BentoPromoBannerLayout.HORIZONTAL },\n  title: null\n});\n\n    const emit = defineEmits([\"dismiss\"]);\n\n    const promoBannerRef = ref(null);\n    const promoBannerSize = useElementSize(promoBannerRef);\n    const promoBannerTitleId = generateUid('promoBannerTitle');\n\n    const horizontalLayoutBreakpoint = computed(() => {\n        if (props.image.aspectRatio === BentoImageAspectRatio.P16_9) {\n            return 800;\n        } else if (props.image.aspectRatio === BentoImageAspectRatio.P2_1) {\n            return 850;\n        } else if (props.image.aspectRatio === BentoImageAspectRatio.P1_1) {\n            return 623;\n        }\n\n        return 0;\n    });\n\n    const bannerLayoutClass = computed(() => {\n        // only horizontal layout is responsive and, by design, follows the container size\n        if (\n            props.layout === BentoPromoBannerLayout.HORIZONTAL &&\n            promoBannerSize.width.value <= horizontalLayoutBreakpoint.value\n        ) {\n            return BentoPromoBannerLayout.VERTICAL;\n        }\n\n        return props.layout;\n    });\n\n    const bannerConditionalClass = computed(() =>\n        [`b-promo-banner--${bannerLayoutClass.value}`, `b-promo-banner--${props.color}`].join(' ')\n    );\n\n    const isIconOnly = (button: BentoButtonActionObject) =>\n        button.iconOnly && (button.iconLeft || button.iconRight || button.icon);\n\n    const computedDismissButtonText = computed(() => props.dismissButtonText || t('dismiss'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Promotional Banner highlights important information, announcements, or promotions.\n     *\n     * @example\n     * import { BentoPromoBanner } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoPromoBanner },\n     *     template: `\n     *         <bento-promo-banner\n     *              title=\"Title\"\n     *              description=\"Brief description explaining and giving more information about the title\"\n     *              :image=\"{ src: '16-1.png', aspectRatio: '16:9' }\"\n     *              :actions=\"[{ title: 'Primary', event: () => {} }]\"\n     *         >\n     *         </bento-promo-banner>\n     *     `\n     * };\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-promo-banner',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./promo-banner.scss\" />\n"],"names":["BentoPromoBannerColor","BentoPromoBannerColor2","BentoPromoBannerLayout","BentoPromoBannerLayout2","__default__","messages","t","useI18n","promoBannerRef","ref","promoBannerSize","useElementSize","promoBannerTitleId","generateUid","horizontalLayoutBreakpoint","computed","props","BentoImageAspectRatio","bannerLayoutClass","bannerConditionalClass","isIconOnly","button","computedDismissButtonText"],"mappings":";;;;;;;;;AA6FO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,OAAA,QACAA,EAAA,OAAA,QACAA,EAAA,QAAA,SAHQA,IAAAD,KAAA,CAAA,CAAA,GAMLE,IAAA,kBAAAC,OACHA,EAAA,aAAA,cACAA,EAAA,WAAA,YAFQA,IAAAD,KAAA,CAAA,CAAA;;;;;;;;;;;;;GCoDRE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;;;;;iBA3EA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAcAC,IAAAC,EAAA,IAAA,GACAC,IAAAC,EAAAH,CAAA,GACAI,IAAAC,EAAA,kBAAA,GAEAC,IAAAC,EAAA,MACIC,EAAA,MAAA,gBAAAC,EAAA,QACI,MAAOD,EAAA,MAAA,gBAAAC,EAAA,OAEP,MAAOD,EAAA,MAAA,gBAAAC,EAAA,OAEP,MAGJ,CAAO,GAGXC,IAAAH,EAAA,MAEIC,EAAA,WAAAd,EAAA,cAAAQ,EAAA,MAAA,SAAAI,EAAA,QAIIZ,EAAA,WAGJc,EAAA,MAAa,GAGjBG,IAAAJ;AAAA,MAA+B,MAAA,CAAA,mBAAAG,EAAA,KAAA,IAAA,mBAAAF,EAAA,KAAA,EAAA,EAAA,KAAA,GAAA;AAAA,IAC8D,GAG7FI,IAAA,CAAAC,MAAAA,EAAA,aAAAA,EAAA,YAAAA,EAAA,aAAAA,EAAA,OAGAC,IAAAP,EAAA,MAAAC,EAAA,qBAAAV,EAAA,SAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{radio-group.70MGuwY1.js → radio-group.CvsQDlHi.js}

@@ -3,7 +3,7 @@ import { u as O } from "./use-form-layout-loading.CWbjZiwP.js";
 import { u as R } from "./use-has-slot.C9lQZ6nz.js";
 import { g as y } from "./generate-uid.DBWe4g6T.js";
 import { u as M } from "./form-field.B60VsF8d.js";
-import { B as N } from "./tag.DSzato7w.js";
+import { B as N } from "./tag.Dz1FQSZb.js";
 import { B as k } from "./typography.D1OZJbEa.js";
 import { u as A } from "./aria-label.CaUURpnB.js";
 import { u as w } from "./use-default-slot-validator.BDn0wkYP.js";
@@ -89,7 +89,7 @@ var H = function() {
   U,
   !1,
   null,
-  "0cfaad5f"
+  "80b39db8"
 );
 const Z = G.exports;
 var v = /* @__PURE__ */ ((r) => (r.HORIZONTAL = "horizontal", r.VERTICAL = "vertical", r))(v || {});
@@ -158,7 +158,7 @@ var J = function() {
   K,
   !1,
   null,
-  "1a9c5f29"
+  "789ceb2a"
 );
 const pe = Q.exports;
 export {
@@ -166,4 +166,4 @@ export {
   pe as a,
   v as b
 };
-//# sourceMappingURL=radio-group.70MGuwY1.js.map
+//# sourceMappingURL=radio-group.CvsQDlHi.js.map