@adyen/bento-vue3 1.96.1 → 1.97.0

package/dist/chunks/{modal.vue_vue_type_script_setup_true_lang.CrJQWuzb.js.map → modal.vue_vue_type_script_setup_true_lang.C3xuswtY.js.map}

@@ -1 +1 @@
-{"version":3,"file":"modal.vue_vue_type_script_setup_true_lang.CrJQWuzb.js","sources":["../../../vue2/src/components/modal/components/modal-default/modal-default.vue","../../../vue2/src/components/modal/components/modal-dialog/modal-dialog.vue","../../../vue2/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<{\n        /**\n         * Emits update event when page is changed internally\n         */\n        (e: 'update:active-page', page: string): void;\n        /**\n         * Emitted when the modal is closed.\n         */\n        (e: 'close-modal');\n    }>();\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         * 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<{\n        (e: 'close-modal');\n    }>();\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<{\n        /**\n         * Emits update event when page is changed internally\n         */\n        (e: 'update:active-page', page: string): void;\n        /**\n         * Emitted when the modal is closed\n         */\n        (e: 'close-modal');\n    }>();\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         *\n         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * `title`: Button's text.\n         *\n         * `event`: Event triggered when clicking the Button.\n         *\n         * `icon`: 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":["defineComponent","slots","useSlots","hasSlot","useHasSlot","emit","__emit","props","__props","onCloseModal","onMounted","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":";;;;;;;;AA8MI,UAAeA,EAAgB;AAAA,EAC3B,MAAM;AACV,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AApKD,UAAMC,IAAQC,EAAA,GACRC,IAAUC,EAAWH,CAAK,GAC1BI,IAAOC,GAWPC,IAAQC,GAoGRC,IAAe,MAAM;AACvB,MAAAJ,EAAK,aAAa;AAAA,IACtB;AAEA,WAAAK,EAAU,MAAM;AACZ,UAAI,EAAEP,EAAQ,SAAS,KAAMA,EAAQ,eAAe,KAAKA,EAAQ,eAAe,MAAO,CAACI,EAAM;AAC1F,cAAM,IAAI,MAAM,mEAAmE;AAAA,IAE3F,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OCsDcP,EAAgB;AAAA,EAC3B,MAAM,EAAE,UAAAW,EAAA;AAAA,EACR,MAAM;AACV,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA3KD,UAAMN,IAAOC,GAIPC,IAAQC,GAiER,EAAE,GAAAI,EAAA,IAAMC,EAAoC,EAAE,UAAAF,GAAU,GAExDV,IAAQC,EAAA,GACRC,IAAUC,EAAWH,CAAK,GAC1B,EAAE,SAAAa,GAAS,YAAAC,MAAeC,EAAOT,CAAK,GACtCU,IAAgDC,EAAI,IAAI,GAExDT,IAAe,MAAM;AACvB,MAAAJ,EAAK,aAAa;AAAA,IACtB,GAEMc,IAAsB,CAACC,MAAiB;AAI1C,MAAAH,EAAS,MAAM,yBAAyBG,CAAK;AAAA,IACjD,GAEMC,IAA+BC,EAAS,MAAM;AAAA,MAChD;AAAA,QACI,OAAOV,EAAE,IAAI;AAAA,QACb,OAAOO;AAAA,QACP,SAASI,EAAmB;AAAA,MAAA;AAAA,IAChC,CACH,GAEKC,IAAgBF,EAAS,MAAM;AACjC,YAAMG,IAAuD;AAAA,QACzD,OAAO;AAAA,QACP,OAAON;AAAA,MAAA,GAELO,IAAsDZ,GAAS,QAAQ,CAAC;AAE9E,aAAIC,EAAW,UAAUY,EAAqB,cAC1CD,EAA2B,WAAW,KAC/BX,EAAW,UAAUY,EAAqB,SACjDD,EAA2B,UAAUH,EAAmB,YAGrD,CAACG,GAA4BD,CAA2B;AAAA,IACnE,CAAC,GAEKG,IAAgCN,EAAS,OAAO;AAAA,MAClD,CAAC,mBAAmBP,EAAW,KAAK,EAAE,GAAGA,EAAW;AAAA,IAAA,EACtD;AAEF,WAAAL,EAAU,MAAM;AACZ,UAAIH,EAAM;AACN,cAAM,IAAI;AAAA,UACN;AAAA,QAAA;AAIR,UAAI,CAACJ,EAAQ,SAAS,KAAM,CAACI,EAAM,WAAW,CAACJ,EAAQ,SAAS;AAC5D,cAAM,IAAI,MAAM,sDAAsD;AAG1E,UAAIW,GAAS,OAAO,SAAS;AACzB,cAAM,IAAI,MAAM,+DAA+D;AAGnF,UAAIC,EAAW,UAAUY,EAAqB,mBAAmB,CAACb,GAAS;AACvE,cAAM,IAAI,MAAM,oFAAoF;AAGxG,UAAIC,EAAW,UAAUY,EAAqB,mBAAmBb,GAAS,OAAO;AAC7E,cAAM,IAAI,MAAM,6DAA6D;AAAA,IAErF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QCuDcd,EAAgB;AAAA,EAC3B,YAAY,EAAA,mBAAE6B,qBAAmBC,EAAA;AACrC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAjND,UAAM7B,IAAQC,EAAA,GACRC,IAAUC,EAAWH,CAAK,GAC1B8B,IAAQC,EAAA,GACR3B,IAAOC,GAWPC,IAAQC,GAgIRyB,IAAkBX,EAAS,MACzB,OAAO,OAA8BY,CAAwB,EAAE,SAAS3B,EAAM,OAAO,IAC9EA,EAAM,UAEV2B,EAAyB3B,EAAM,QAAQ,YAAA,CAAa,CAC9D,GAEK4B,IAAcb;AAAA,MAAS,MACzBW,EAAgB,UAAUC,EAAyB,UAC7C;AAAA,QACI,YAAY3B,EAAM;AAAA,QAClB,iBAAiBA,EAAM;AAAA,QACvB,MAAMA,EAAM;AAAA,QACZ,eAAeA,EAAM;AAAA,QACrB,cAAcA,EAAM;AAAA,QACpB,oBAAoBA,EAAM;AAAA,QAC1B,eAAeA,EAAM,iBAAiB;AAAA,QACtC,kBAAkBA,EAAM;AAAA,QACxB,aAAaA,EAAM;AAAA,QACnB,GAAGwB;AAAA,MAAA,IAEP;AAAA,QACI,YAAYxB,EAAM;AAAA,QAClB,YAAYA,EAAM;AAAA,QAClB,SAASA,EAAM;AAAA,QACf,eAAeA,EAAM,iBAAiB;AAAA,QACtC,GAAGwB;AAAA,MAAA;AAAA,IACP,GAGJtB,IAAe,MAAM;AACvB,MAAAJ,EAAK,aAAa;AAAA,IACtB;AAEA,WAAI,OAAO,KAAK0B,CAAK,EAAE,SAAS,kBAAkB,KAC9CK;AAAA,MACI;AAAA,MACA;AAAA;AAAA,MAEA;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"modal.vue_vue_type_script_setup_true_lang.C3xuswtY.js","sources":["../../../vue2/src/components/modal/components/modal-default/modal-default.vue","../../../vue2/src/components/modal/components/modal-dialog/modal-dialog.vue","../../../vue2/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<{\n        /**\n         * Emits update event when page is changed internally\n         */\n        (e: 'update:active-page', page: string): void;\n        /**\n         * Emitted when the modal is closed.\n         */\n        (e: 'close-modal');\n    }>();\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         * 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<{\n        (e: 'close-modal');\n    }>();\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<{\n        /**\n         * Emits update event when page is changed internally\n         */\n        (e: 'update:active-page', page: string): void;\n        /**\n         * Emitted when the modal is closed\n         */\n        (e: 'close-modal');\n    }>();\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         *\n         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * `title`: Button's text.\n         *\n         * `event`: Event triggered when clicking the Button.\n         *\n         * `icon`: 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":["defineComponent","slots","useSlots","hasSlot","useHasSlot","emit","__emit","props","__props","onCloseModal","onMounted","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/{pagination.DbpHH_53.js → pagination.cNByWBP1.js}

@@ -1,6 +1,6 @@
 import { defineComponent as z, computed as P, watch as j, openBlock as r, createElementBlock as T, createVNode as d, unref as e, withCtx as v, createBlock as C, resolveDynamicComponent as W, mergeProps as $, createSlots as G, createTextVNode as B, toDisplayString as N, createCommentVNode as k, createElementVNode as c, useSlots as H, useAttrs as J, ref as X, toRefs as K, normalizeClass as q, renderSlot as Q } from "vue";
 import { p as Y, B as I } from "./typography.B3J6_tYk.js";
-import { B as D } from "./dropdown.C5um1anU.js";
+import { B as D } from "./dropdown.C97ShfXZ.js";
 import { g as R } from "./generate-uid.DBWe4g6T.js";
 import { u as F, g as M, a as Z } from "./index.B875RXHM.js";
 import { _ as S } from "./_plugin-vue_export-helper.CHgC5LLL.js";
@@ -410,4 +410,4 @@ const Ce = /* @__PURE__ */ S(fe, [["render", _e]]), U = {
 export {
   He as B
 };
-//# sourceMappingURL=pagination.DbpHH_53.js.map
+//# sourceMappingURL=pagination.cNByWBP1.js.map

package/dist/chunks/{pagination.DbpHH_53.js.map → pagination.cNByWBP1.js.map}

@@ -1 +1 @@
-{"version":3,"file":"pagination.DbpHH_53.js","sources":["../../../vue2/src/components/pagination/components/pagination-results-per-page/pagination-results-per-page.vue","../../../vue2/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","../../../vue2/src/components/pagination/components/pagination-controls/pagination-controls.vue","../../../vue2/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 '@/core/utils/ts';\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 = withDefaults(\n        defineProps<{\n            /**\n             * Determines whether to hide the dropdown that allows users to change the number of results per page.\n             * When set to `true`, the current `itemsPerPage` value is displayed as plain static text.\n             */\n            hidePageSizeSelection?: boolean;\n            /**\n             *  The amount of items the pager is paging through.\n             */\n            itemsPerPage?: number;\n            /**\n             * The total number of items the pager is paging through.\n             */\n            totalCount?: number;\n            /**\n             * The predefined options for the results per page dropdown.\n             */\n            pageSizeItems?: Array<number>;\n        }>(),\n        {\n            hidePageSizeSelection: false,\n            itemsPerPage: 50,\n            totalCount: null,\n            pageSizeItems: () => [10, 20, 50, 75, 100],\n        }\n    );\n\n    const emit = defineEmits<{\n        (e: 'select', value: number);\n    }>();\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 '@/core/utils/ts';\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 = withDefaults(\n        defineProps<{\n            /**\n             * Hides the page selection dropdown and displays a static \"Page X of Y\" text instead.\n             * Useful for very large datasets where rendering all page options would cause performance issues.\n             */\n            hidePageSelection?: boolean;\n            /**\n             * The current page number of the pager.\n             */\n            page?: number;\n\n            /**\n             * The total number of items the pager is paging through.\n             */\n            totalPages?: number;\n\n            /**\n             * Enables virtual scrolling on all dropdowns if set to true.\n             */\n            virtualScroll?: boolean;\n        }>(),\n        {\n            hidePageSelection: false,\n            page: 1,\n            totalPages: null,\n            virtualScroll: false,\n        }\n    );\n    const emit = defineEmits<{\n        (e: 'page-selected', value: string | number);\n    }>();\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>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\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>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\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>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","<template>\n    <ul class=\"b-pagination-controls\">\n        <li 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 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 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 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 = withDefaults(\n        defineProps<{\n            /**\n             * Use to determine if the pager has a \"next page\".\n             */\n            hasNext?: boolean;\n\n            /**\n             * The current page number of the pager.\n             */\n            page: number;\n\n            /**\n             * The current page number of the pager.\n             */\n            totalPages?: number;\n        }>(),\n        {\n            hasNext: null,\n            totalPages: null,\n        }\n    );\n\n    const emit = defineEmits<{\n        (e: 'navigate', value: number);\n    }>();\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 :aria-label=\"computedAriaLabel\" class=\"b-pagination__navigation\" :class=\"navigationConditionalClasses()\">\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                    :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, ref, toRefs, useAttrs, 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 { useAriaLabel } from '@/utils/ts/aria-label';\n    import { useHasSlot } from '@/composables';\n    import type { BentoPaginationProps } from './pagination.types';\n\n    const props = withDefaults(defineProps<BentoPaginationProps>(), {\n        ariaLabel: null,\n        hasNext: null,\n        hidePageSize: false,\n        hidePageSelection: false,\n        hidePageSizeSelection: false,\n        page: 1,\n        pageSizeItems: undefined,\n        size: 20,\n        totalCount: null,\n        virtualScroll: false,\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Triggered when the navigation controls are clicked or the items per page is changed (i.e. when the arrow buttons to the\n         * rightmost of the screen or either dropdown is updated). It indicates to which page it should go next and also the page size.\n         */\n        (e: 'navigate', page: number, items?: number): void;\n\n        /**\n         * Triggered when the number of items per page is changed from the left hand dropdown.\n         * It indicates the new number of items that will be displayed.\n         */\n        (e: 'items-page', size: number): void;\n\n        /**\n         * Triggered when the navigation controls are clicked, whether the arrow buttons to the\n         * right most of the screen or the dropdown on the right hand is updated.\n         * It indicates to which page it should go next\n         * (easily achieved using the [sync modifier](https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier))\n         * e.g. `:page.sync=\"currentPage\"`\n         */\n        (e: 'update:page', page: number): void;\n\n        /**\n         * Triggered when the number of items per page is changed from the left hand dropdown.\n         * It indicates the new number of items that will be displayed.\n         * (easily achieved using the [sync modifier](https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier))\n         * e.g. `:size.sync=\"itemsPerPage\"`\n         */\n        (e: 'update:size', size: number): void;\n    }>();\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const attrs = useAttrs();\n    const ariaLabelAttribute = ref(attrs['aria-label']);\n    const { ariaLabel } = toRefs(props);\n    const computedAriaLabel = useAriaLabel({\n        ariaLabel: ariaLabelAttribute.value as string,\n        // TODO: take this line away when the aria-label props is removed\n        label: ariaLabel,\n    });\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","n","useI18n","props","__props","emit","__emit","isValid","computed","option","watch","valid","printDevelopmentWarning","dropdownId","generateUid","predefinedDropdownOptions","i18nComponent","getI18nComponent","onSelectChange","selectedNumberOfResults","translationPathKey","__default__$2","messages$1","t","onPageSelectChange","selectedPage","transformIntoOption","value","transformToPageNumber","_","index","listOfAvailablePages","showPageNumberOfTotal","uuid$2","openBlock","createElementBlock","mergeProps","_ctx","createCommentVNode","uuid$1","uuid","__default__$1","messages","isCurrentPageFirst","isCurrentPageLast","isNextButtonDisabled","isLastPageButtonDisabled","hasNoNextPage","hasNoTotalPagesNumber","navigate","pageArg","__default__","slots","useSlots","hasSlot","useHasSlot","attrs","useAttrs","ariaLabelAttribute","ref","ariaLabel","toRefs","computedAriaLabel","useAriaLabel","totalPages","itemsPerPage","onPageSelected","pageNumber","onItemsPerPageChange","elements","navigationConditionalClasses"],"mappings":"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"}
+{"version":3,"file":"pagination.cNByWBP1.js","sources":["../../../vue2/src/components/pagination/components/pagination-results-per-page/pagination-results-per-page.vue","../../../vue2/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","../../../vue2/src/components/pagination/components/pagination-controls/pagination-controls.vue","../../../vue2/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 '@/core/utils/ts';\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 = withDefaults(\n        defineProps<{\n            /**\n             * Determines whether to hide the dropdown that allows users to change the number of results per page.\n             * When set to `true`, the current `itemsPerPage` value is displayed as plain static text.\n             */\n            hidePageSizeSelection?: boolean;\n            /**\n             *  The amount of items the pager is paging through.\n             */\n            itemsPerPage?: number;\n            /**\n             * The total number of items the pager is paging through.\n             */\n            totalCount?: number;\n            /**\n             * The predefined options for the results per page dropdown.\n             */\n            pageSizeItems?: Array<number>;\n        }>(),\n        {\n            hidePageSizeSelection: false,\n            itemsPerPage: 50,\n            totalCount: null,\n            pageSizeItems: () => [10, 20, 50, 75, 100],\n        }\n    );\n\n    const emit = defineEmits<{\n        (e: 'select', value: number);\n    }>();\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 '@/core/utils/ts';\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 = withDefaults(\n        defineProps<{\n            /**\n             * Hides the page selection dropdown and displays a static \"Page X of Y\" text instead.\n             * Useful for very large datasets where rendering all page options would cause performance issues.\n             */\n            hidePageSelection?: boolean;\n            /**\n             * The current page number of the pager.\n             */\n            page?: number;\n\n            /**\n             * The total number of items the pager is paging through.\n             */\n            totalPages?: number;\n\n            /**\n             * Enables virtual scrolling on all dropdowns if set to true.\n             */\n            virtualScroll?: boolean;\n        }>(),\n        {\n            hidePageSelection: false,\n            page: 1,\n            totalPages: null,\n            virtualScroll: false,\n        }\n    );\n    const emit = defineEmits<{\n        (e: 'page-selected', value: string | number);\n    }>();\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>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\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>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\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>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","<template>\n    <ul class=\"b-pagination-controls\">\n        <li 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 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 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 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 = withDefaults(\n        defineProps<{\n            /**\n             * Use to determine if the pager has a \"next page\".\n             */\n            hasNext?: boolean;\n\n            /**\n             * The current page number of the pager.\n             */\n            page: number;\n\n            /**\n             * The current page number of the pager.\n             */\n            totalPages?: number;\n        }>(),\n        {\n            hasNext: null,\n            totalPages: null,\n        }\n    );\n\n    const emit = defineEmits<{\n        (e: 'navigate', value: number);\n    }>();\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 :aria-label=\"computedAriaLabel\" class=\"b-pagination__navigation\" :class=\"navigationConditionalClasses()\">\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                    :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, ref, toRefs, useAttrs, 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 { useAriaLabel } from '@/utils/ts/aria-label';\n    import { useHasSlot } from '@/composables';\n    import type { BentoPaginationProps } from './pagination.types';\n\n    const props = withDefaults(defineProps<BentoPaginationProps>(), {\n        ariaLabel: null,\n        hasNext: null,\n        hidePageSize: false,\n        hidePageSelection: false,\n        hidePageSizeSelection: false,\n        page: 1,\n        pageSizeItems: undefined,\n        size: 20,\n        totalCount: null,\n        virtualScroll: false,\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Triggered when the navigation controls are clicked or the items per page is changed (i.e. when the arrow buttons to the\n         * rightmost of the screen or either dropdown is updated). It indicates to which page it should go next and also the page size.\n         */\n        (e: 'navigate', page: number, items?: number): void;\n\n        /**\n         * Triggered when the number of items per page is changed from the left hand dropdown.\n         * It indicates the new number of items that will be displayed.\n         */\n        (e: 'items-page', size: number): void;\n\n        /**\n         * Triggered when the navigation controls are clicked, whether the arrow buttons to the\n         * right most of the screen or the dropdown on the right hand is updated.\n         * It indicates to which page it should go next\n         * (easily achieved using the [sync modifier](https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier))\n         * e.g. `:page.sync=\"currentPage\"`\n         */\n        (e: 'update:page', page: number): void;\n\n        /**\n         * Triggered when the number of items per page is changed from the left hand dropdown.\n         * It indicates the new number of items that will be displayed.\n         * (easily achieved using the [sync modifier](https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier))\n         * e.g. `:size.sync=\"itemsPerPage\"`\n         */\n        (e: 'update:size', size: number): void;\n    }>();\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const attrs = useAttrs();\n    const ariaLabelAttribute = ref(attrs['aria-label']);\n    const { ariaLabel } = toRefs(props);\n    const computedAriaLabel = useAriaLabel({\n        ariaLabel: ariaLabelAttribute.value as string,\n        // TODO: take this line away when the aria-label props is removed\n        label: ariaLabel,\n    });\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","n","useI18n","props","__props","emit","__emit","isValid","computed","option","watch","valid","printDevelopmentWarning","dropdownId","generateUid","predefinedDropdownOptions","i18nComponent","getI18nComponent","onSelectChange","selectedNumberOfResults","translationPathKey","__default__$2","messages$1","t","onPageSelectChange","selectedPage","transformIntoOption","value","transformToPageNumber","_","index","listOfAvailablePages","showPageNumberOfTotal","uuid$2","openBlock","createElementBlock","mergeProps","_ctx","createCommentVNode","uuid$1","uuid","__default__$1","messages","isCurrentPageFirst","isCurrentPageLast","isNextButtonDisabled","isLastPageButtonDisabled","hasNoNextPage","hasNoTotalPagesNumber","navigate","pageArg","__default__","slots","useSlots","hasSlot","useHasSlot","attrs","useAttrs","ariaLabelAttribute","ref","ariaLabel","toRefs","computedAriaLabel","useAriaLabel","totalPages","itemsPerPage","onPageSelected","pageNumber","onItemsPerPageChange","elements","navigationConditionalClasses"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;oDA0GIA,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;AAnEA,UAAA,EAAA,GAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAF,EAAA,CAAA,GAEAG,IAAAC,GA4BAC,IAAAC,GAIAC,IAAAC;AAAA,MAAgB,MAAA,MAAA,QAAAL,EAAA,aAAA,KAAAA,EAAA,cAAA,MAAA,CAAAM,MAAA,OAAA,UAAAA,CAAA,CAAA;AAAA,IAC4F;AAG5G,IAAAC;AAAA,MAAAH;AAAA,MACI,CAAAI,MAAA;AAEI,QAAAA,KACIC,EAAA,8DAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;AAGtB,UAAAC,IAAAC,EAAA,sCAAA,GACAC,IAAAP;AAAA,MAAkC,MAAAL,EAAA,cAAA,IAAA,CAAAM,OAAA;AAAA,QACK,OAAAR,EAAAQ,CAAA;AAAA,QAChB,OAAAA;AAAA,MACR,EAAA;AAAA,IACT,GAENO,IAAAC,EAAA,GAEAC,IAAA,CAAAC,MAAA;AACI,MAAAd,EAAA,UAAAc,CAAA;AAAA,IAAsC,GAG1CC,IAAAZ,EAAA,MAAAL,EAAA,aAAA,0BAAA,cAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CCXAkB,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;AAvDA,UAAAnB,IAAAC,GA6BAC,IAAAC,GAIA,EAAA,GAAAiB,GAAA,GAAAtB,EAAA,IAAAC,EAAA,EAAA,UAAAoB,EAAA,CAAA,GACAT,IAAAC,EAAA,uCAAA,GACAU,IAAA,CAAAC,MAAApB,EAAA,iBAAAoB,CAAA,GACAT,IAAAC,EAAA,GAGAS,IAAA,CAAAC,OAAA;AAAA,MAAwE,OAAA1B,EAAA0B,CAAA;AAAA,MACtD,OAAAA;AAAA,IACd,IAEJC,IAAA,CAAAC,GAAAC,MAAAA,IAAA,GACAC,IAAAvB;AAAA,MAA6B,MAAA,MAAA,KAAA,IAAA,MAAAL,EAAA,UAAA,GAAAyB,CAAA,EAAA,IAAAF,CAAA;AAAA,IAC6D,GAE1FM,IAAAxB;AAAA,MAA8B,MAAAL,EAAA,eAAA,KAAAA,EAAA,qBAAAA,EAAA,QAAAA,EAAA;AAAA,IACsD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC/EpF,IAAA8B,IAAA;;EAGI,eAAA;8BAEIA,KAAA;AAAA;;;AAVR,SAAAC,EAAA,GAAAC,EAAA,OAAAC,EAAA,EAAA,MAAA,MAAA,GAAAC,EAAA,QAAA;AAAA,IAAgC,OAAA;AAAA,IAA2B,OAAA;AAAA,IAAmC,OAAA;AAAA,IAAW,QAAA;AAAA,IAAY,MAAA;AAAA;iFAFzHC,EAAA,IAAA,EAAA;AAAA;MAE8M,MAAA;AAAA,MAAe,GAAA;AAAA;;MAA6H,MAAA;AAAA,MAAe,GAAA;AAAA;;;;ACKrW,IAAAC,IAAA;;EAGI,eAAA;8BAEIA,KAAA;AAAA;;;AAVR,SAAAL,EAAA,GAAAC,EAAA,OAAAC,EAAA,EAAA,MAAA,MAAA,GAAAC,EAAA,QAAA;AAAA,IAAgC,OAAA;AAAA,IAA2B,OAAA;AAAA,IAAmC,OAAA;AAAA,IAAW,QAAA;AAAA,IAAY,MAAA;AAAA;iFAFzHC,EAAA,IAAA,EAAA;AAAA;MAE8M,MAAA;AAAA,MAAe,GAAA;AAAA;;MAA6H,MAAA;AAAA,MAAe,GAAA;AAAA;;;;ACKrW,IAAAE,IAAA;;EAGI,eAAA;8BAEIA,KAAA;AAAA;;;AAVR,SAAAN,EAAA,GAAAC,EAAA,OAAAC,EAAA,EAAA,MAAA,MAAA,GAAAC,EAAA,QAAA;AAAA,IAAgC,OAAA;AAAA,IAA2B,OAAA;AAAA,IAAmC,OAAA;AAAA,IAAW,QAAA;AAAA,IAAY,MAAA;AAAA;iFAFzHC,EAAA,IAAA,EAAA;AAAA;MAE8M,MAAA;AAAA,MAAe,GAAA;AAAA;;;;;;;;;;;;;;wOCqGzNG,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;AAlDA,UAAAvC,IAAAC,GAuBAC,IAAAC,GAIA,EAAA,GAAAiB,EAAA,IAAArB,EAAA,EAAA,UAAAwC,EAAA,CAAA,GAEAC,IAAAnC,EAAA,MAAAL,EAAA,SAAA,CAAA,GACAyC,IAAApC,EAAA,MAAAL,EAAA,SAAAA,EAAA,UAAA,GACA0C,IAAArC,EAAA,MACI,CAAAL,EAAA,WACAyC,EAAA,KAA0C,GAE9CE,IAAAtC,EAAA,MAAA;AACI,YAAAuC,IAAA,CAAA5C,EAAA,SACA6C,IAAA,CAAA7C,EAAA;AAEA,aAAA4C,KAAAH,EAAA,SAAAI;AAAA,IAAmD,CAAA,GAGvDC,IAAA,CAAAC,MAAA;AACI,MAAA7C,EAAA,YAAA6C,CAAA;AAAA,IAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yKCgE5BC,KAAA,CAAA;;;;;;;;;;;;;;;;;AAlHA,UAAAhD,IAAAC,GAaAC,IAAAC,GA+BA8C,IAAAC,EAAA,GACAC,IAAAC,GAAAH,CAAA,GAEAI,IAAAC,EAAA,GACAC,IAAAC,EAAAH,EAAA,YAAA,CAAA,GACA,EAAA,WAAAI,EAAA,IAAAC,EAAA1D,CAAA,GACA2D,IAAAC,GAAA;AAAA,MAAuC,WAAAL,EAAA;AAAA;AAAA,MACL,OAAAE;AAAA,IAEvB,CAAA,GAGXI,IAAAxD;AAAA,MAAmB,MAAA,CAAAL,EAAA,cAAA,CAAAA,EAAA,OAAA,OAAA,KAAA,KAAAA,EAAA,aAAAA,EAAA,IAAA;AAAA,IACkE,GAGrF8C,IAAA,CAAAC,GAAAe,MAAA;AACI,MAAA9D,EAAA,eACIE,EAAA,YAAA6C,CAAA,IAEA7C,EAAA,YAAA6C,GAAAe,KAAA9D,GAAA,IAAA,GAEJE,EAAA,eAAA6C,CAAA;AAAA,IAA2B,GAG/BgB,IAAA,CAAAC,MAAA;AACI,MAAAlB,EAAAkB,CAAA;AAAA,IAAmB,GAGvBC,IAAA,CAAAC,MAAA;AACI,MAAAhE,EAAA,cAAAgE,CAAA,GACAhE,EAAA,eAAAgE,CAAA,GAIApB,EAAA,GAAAoB,CAAA;AAAA,IAAoB,GAGxBC,IAAA,OAAA;AAAA,MAA4C,iDAAA,CAAAhB,EAAA,SAAA,KAAAnD,EAAA;AAAA,IACsC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{rich-text-editor.u-V4fNWK.js → rich-text-editor.CJA_d518.js}

@@ -1,10 +1,10 @@
 import { defineComponent as Dt, ref as wt, onMounted as rr, watch as me, openBlock as Z, createElementBlock as Ft, toDisplayString as Nt, createBlock as pt, unref as ht, withCtx as Pt, renderSlot as Tt, createElementVNode as $t, computed as xt, normalizeStyle as ir, h as Q, useAttrs as ur, createCommentVNode as Xt, mergeProps as lr, createVNode as Pe, KeepAlive as ar, createTextVNode as Me, normalizeClass as or } from "vue";
 import { B as Oe } from "./typography.B3J6_tYk.js";
 import { B as sr } from "./segmented-control.D6Yvxxpc.js";
-import { B as cr } from "./alert.RD0qOLhx.js";
+import { B as cr } from "./alert.V1imvtyI.js";
 import { _ as Fe } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import { B as fr } from "./link.D6D6YGsN.js";
-import { B as hr } from "./checkbox.LTRqb-pE.js";
+import { B as hr } from "./checkbox.DwfrmbwI.js";
 import { u as pr } from "./index.B875RXHM.js";
 import { u as mr } from "./aria-label.CaUURpnB.js";
 import { g as Re } from "./generate-uid.DBWe4g6T.js";
@@ -6220,4 +6220,4 @@ const no = {
 export {
   wo as r
 };
-//# sourceMappingURL=rich-text-editor.u-V4fNWK.js.map
+//# sourceMappingURL=rich-text-editor.CJA_d518.js.map