@adyen/bento-vue2 0.10.0 → 0.10.1-2

package/dist/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sources":["../src/components/modal/modal.types.ts","../src/components/modal/components/base-modal/base-modal.vue","../src/components/modal/components/modal-default/modal-default.vue","../src/components/modal/components/modal-dialog/modal-dialog.vue","../src/components/modal/modal.vue"],"sourcesContent":["export enum BentoModalVariant {\n    DEFAULT = 'BentoModalDefault',\n    DIALOG = 'BentoModalDialog',\n}\n\nexport enum BentoModalSize {\n    SMALL = 'small',\n    MEDIUM = 'medium',\n    LARGE = 'large',\n}\n\nexport enum BentoModalColumnLayoutVariant {\n    SMALLER = 'smaller',\n    EQUAL = 'equal',\n    BIGGER = 'bigger',\n}\n\nexport enum BentoModalRole {\n    DIALOG = 'dialog',\n    ALERT_DIALOG = 'alertdialog',\n}\n\nexport enum BentoModalDialogType {\n    CONFIRMATION = 'confirmation',\n    DESTRUCTIVE = 'destructive',\n    INFO = 'info',\n    ACKNOWLEDGEMENT = 'acknowledgement',\n}\n\nexport enum BentoModalEvent {\n    CLOSE_MODAL = 'close-modal',\n}\n","<template>\n    <div class=\"b-modal-base\">\n        <dialog\n            ref=\"modal\"\n            :role=\"modalRole\"\n            :aria-label=\"computedAriaLabel\"\n            class=\"b-modal-base__container\"\n            :class=\"modalConditionalClasses\"\n            :open=\"initiallyOpen\"\n            @click=\"isDismissible && closeModalOnClickOutside($event)\"\n            @keydown.esc=\"emitCloseEvent\"\n        >\n            <bento-focus-trap>\n                <div class=\"b-modal-base__wrapper\" :style=\"wrapperStyles\">\n                    <div v-if=\"hasSlot('default') || !hideCloseButton\" class=\"b-modal-base__header\">\n                        <bento-typography\n                            class=\"b-modal-base__title\"\n                            aria-label=\"base modal title\"\n                            :el=\"BentoTypographyElement.SPAN\"\n                            :variant=\"BentoTypographyVariant.TITLE\"\n                            stronger\n                        >\n                            <slot v-if=\"hasSlot('default')\" />\n                        </bento-typography>\n                        <bento-button\n                            v-if=\"!hideCloseButton\"\n                            class=\"b-modal-base__close-button\"\n                            :variant=\"BentoButtonVariant.TERTIARY\"\n                            type=\"button\"\n                            @click=\"onCloseButtonClick\"\n                        >\n                            <cross-icon svg-title=\"close\" />\n                        </bento-button>\n                    </div>\n                    <bento-divider\n                        v-if=\"hasColumnLayout && hasSlot('default')\"\n                        class=\"b-modal-base__divider\"\n                        :style=\"dividerStyles\"\n                    />\n\n                    <div class=\"b-modal-base__content\" :class=\"modalContentConditionalClasses\">\n                        <bento-typography\n                            v-if=\"hasSlot('content')\"\n                            aria-label=\"base modal content\"\n                            :el=\"BentoTypographyElement.DIV\"\n                            :variant=\"BentoTypographyVariant.BODY\"\n                            stronger\n                        >\n                            <grid-layout\n                                v-if=\"hasColumnLayout\"\n                                :column-width=\"computedColumnWidth\"\n                                :container-type=\"GridLayoutContainerType.NORMAL\"\n                                class=\"b-modal-base__grid\"\n                            >\n                                <template #col-1><slot name=\"content-col-1\"></slot></template>\n                                <template #col-2><slot name=\"content-col-2\"></slot></template>\n                            </grid-layout>\n                            <slot v-else name=\"content\" />\n                        </bento-typography>\n                    </div>\n                    <div v-if=\"hasSlot('actions')\" class=\"b-modal-base__actions-container\">\n                        <bento-divider v-if=\"hasColumnLayout\" class=\"b-modal-base__divider\" :style=\"dividerStyles\" />\n                        <div\n                            aria-label=\"modal actions\"\n                            class=\"b-modal-base__actions\"\n                            :class=\"modalActionsConditionalClasses\"\n                        >\n                            <slot name=\"actions\" />\n                        </div>\n                    </div>\n                </div>\n            </bento-focus-trap>\n        </dialog>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, onMounted, PropType, ref, toRefs, watch } from 'vue';\n    import {\n        BentoModalColumnLayoutVariant,\n        BentoModalEvent,\n        BentoModalRole,\n        BentoModalSize,\n    } from '@/components/modal/modal.types';\n\n    import { BentoButtonVariant } from '@/components/button/button.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { BentoButton } from '@/components/button';\n    import { BentoDivider } from '@/components/divider';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import { GridLayout, GridLayoutContainerType } from '@/internal';\n    import { hasSlot } from '@/utils/ts/hasSlot';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { useI18n } from '@/utils/ts/i18n';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n    import messages from './messages.json';\n\n    export default defineComponent({\n        i18n: { messages },\n        name: 'base-modal',\n        components: { CrossIcon, BentoTypography, BentoButton, BentoDivider, BentoFocusTrap, GridLayout },\n        props: {\n            /**\n             * Defines whether the modal will be an alert modal\n             */\n            modalRole: {\n                type: String,\n                default: BentoModalRole.DIALOG,\n            },\n            /**\n             * If set to true, it allows the modal to be closed by clicking outside of it\n             */\n            isDismissible: {\n                type: Boolean,\n                required: true,\n            },\n            /**\n             * Hides a cross icon on the right side of the title\n             */\n            hideCloseButton: {\n                type: Boolean,\n                required: true,\n            },\n            /**\n             * If provided, manages the padding of the whole modal container\n             */\n            customPadding: {\n                type: String,\n                default: null,\n            },\n            /**\n             * If provided, renders the modal's content in a two-column layout an wth dividers separating its content\n             */\n            withColumnLayout: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.\n             */\n            columnsSize: {\n                type: String as PropType<BentoModalColumnLayoutVariant>,\n                default: BentoModalColumnLayoutVariant.SMALLER,\n            },\n\n            /**\n             * Controls the modal's state from the outside. Set it to true to open the modal\n             */\n            isOpen: {\n                type: Boolean,\n                required: true,\n            },\n\n            /**\n             * Sets the width of the modal\n             */\n            size: {\n                type: String as PropType<BentoModalSize>,\n                default: BentoModalSize.SMALL,\n            },\n\n            /**\n             * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.\n             */\n            initiallyOpen: {\n                type: Boolean,\n                default: false,\n            },\n            overflowVisible: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        emits: [BentoModalEvent.CLOSE_MODAL],\n        setup(props, { slots, emit }) {\n            const { t } = useI18n();\n            const modal = ref(null);\n\n            const { isOpen, customPadding, overflowVisible } = toRefs(props);\n\n            const labelSlot = computed((): string =>\n                hasSlot(slots)('default') && slots.default() ? slots.default()[0]?.text : null\n            );\n            const wrapperStyles = computed(() => (customPadding.value ? { padding: customPadding.value } : {}));\n            const dividerStyles = computed(() =>\n                customPadding.value\n                    ? { marginLeft: `-${customPadding.value}`, width: `calc(100% + calc(${customPadding.value} * 2))` }\n                    : {}\n            );\n\n            const computedAriaLabel = useAriaLabel({\n                label: labelSlot,\n                defaultFallback: t('ariaLabelFallback') as string,\n            });\n\n            const hasColumnLayout = computed(() => props.withColumnLayout && props.size === BentoModalSize.LARGE);\n\n            const openModal = (): void => {\n                modal.value.showModal();\n            };\n\n            const emitCloseEvent = (): void => {\n                emit(BentoModalEvent.CLOSE_MODAL);\n            };\n\n            const closeModal = (): void => {\n                modal.value.close();\n                emitCloseEvent();\n            };\n\n            const onCloseButtonClick = () => {\n                closeModal();\n            };\n\n            /**\n             * Since the dialog HTML element doesn't automatically close when clicking outside, a check on when the user is clicking is needed.\n             * If the click doesn't happen in the dialog box itself, the modal closes\n             */\n            const closeModalOnClickOutside = ({ target }: Event): void => {\n                if (target && (target as HTMLElement).tagName === BentoModalRole.DIALOG.toUpperCase()) {\n                    closeModal();\n                }\n            };\n\n            const modalConditionalClasses = computed(() => ({\n                [`b-modal-base__container--${props.size}`]: props.size,\n                [`b-modal-base__container--visible`]: isOpen.value,\n                [`b-modal-base__container--overflow-visible`]: overflowVisible.value,\n            }));\n\n            const modalContentConditionalClasses = computed(() => ({\n                'b-modal-base__content--column-layout': hasColumnLayout.value,\n            }));\n\n            const modalActionsConditionalClasses = computed(() => ({\n                'b-modal-base__actions--column-layout': hasColumnLayout.value,\n            }));\n\n            const computedColumnWidth = computed(() => {\n                if (props.columnsSize === BentoModalColumnLayoutVariant.SMALLER) {\n                    return [{ small: 4, medium: 4, large: 4 }];\n                }\n                if (props.columnsSize === BentoModalColumnLayoutVariant.BIGGER) {\n                    return [{ small: 8, medium: 8, large: 8 }];\n                }\n                return [{ small: 6, medium: 6, large: 6 }];\n            });\n\n            watch(\n                () => [isOpen.value, modal.value],\n                (): void => {\n                    if (isOpen.value && modal.value) {\n                        openModal();\n                    } else if (modal.value) {\n                        closeModal();\n                    }\n                },\n                { immediate: true }\n            );\n\n            onMounted(() => {\n                if (isOpen.value && modal.value) {\n                    openModal();\n                }\n            });\n\n            return {\n                // Refs\n                modal,\n                computedAriaLabel,\n\n                // Handling the state\n                openModal,\n                closeModalOnClickOutside,\n\n                // Methods\n                onCloseButtonClick,\n                hasSlot: hasSlot(slots),\n                emitCloseEvent,\n\n                // Styles\n                modalActionsConditionalClasses,\n                modalConditionalClasses,\n                modalContentConditionalClasses,\n                wrapperStyles,\n                dividerStyles,\n                hasColumnLayout,\n                computedColumnWidth,\n\n                // Enums\n                BentoButtonVariant,\n                BentoTypographyElement,\n                BentoTypographyVariant,\n                GridLayoutContainerType,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-modal.scss\" />\n","<template>\n    <base-modal\n        class=\"b-modal-default\"\n        :size=\"size\"\n        :hide-close-button=\"hideCloseButton\"\n        :custom-padding=\"customPadding\"\n        :is-dismissible=\"isDismissible\"\n        :is-open=\"isOpen\"\n        :overflow-visible=\"overflowVisible\"\n        :with-column-layout=\"withColumnLayout\"\n        :initially-open=\"initiallyOpen\"\n        @close-modal=\"onCloseModal\"\n    >\n        <template v-if=\"hasSlot('default')\" #default>\n            <slot></slot>\n        </template>\n        <template #content-col-1><slot name=\"content-col-1\"></slot></template>\n        <template #content-col-2><slot name=\"content-col-2\"></slot></template>\n        <template #content><slot name=\"content\"></slot></template>\n\n        <template v-if=\"actions\" #actions>\n            <slot name=\"actions\">\n                <bento-typography\n                    v-if=\"actionsLabel\"\n                    class=\"b-modal-base__title\"\n                    aria-label=\"base modal title\"\n                    :el=\"BentoTypographyElement.SPAN\"\n                    :variant=\"BentoTypographyVariant.BODY\"\n                    stronger\n                >\n                    {{ actionsLabel }}\n                </bento-typography>\n\n                <bento-button-actions\n                    v-if=\"alignedActions.leftAligned\"\n                    :actions=\"alignedActions.leftAligned\"\n                    :layout=\"BentoButtonActionsLayout.BUTTONS_START\"\n                ></bento-button-actions>\n\n                <bento-button-actions\n                    :actions=\"alignedActions.rightAligned\"\n                    :layout=\"BentoButtonActionsLayout.BUTTONS_END\"\n                ></bento-button-actions>\n            </slot>\n        </template>\n    </base-modal>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, onMounted, PropType, toRefs } from 'vue';\n    import { BentoModalColumnLayoutVariant, BentoModalEvent, BentoModalSize } from '@/components/modal/modal.types';\n    import { BaseModal } from '@/components/modal/components/base-modal';\n    import { hasSlot } from '@/utils/ts/hasSlot';\n    import {\n        BentoButtonActions,\n        BentoButtonActionsLayout,\n        BentoButtonActionsList,\n        BentoButtonVariant,\n    } from '@/components/button';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n\n    export default defineComponent({\n        name: 'bento-modal-default',\n        components: { BaseModal, BentoButtonActions, BentoTypography },\n        inheritAttrs: false,\n        props: {\n            /**\n             * Adds a cross icon on the right side of the alert\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                required: true,\n            },\n            /**\n             * If set to true, it allows the modal to be closed by clicking outside of it\n             */\n            isDismissible: {\n                type: Boolean,\n                required: true,\n            },\n            /**\n             * If set to true, it will set overflow:visible to the modal, only recommended to be used with dropdown\n             */\n            overflowVisible: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Hides a cross icon on the right side of the title\n             */\n            hideCloseButton: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Sets the width of the modal\n             */\n            size: {\n                type: String as PropType<BentoModalSize>,\n                required: true,\n            },\n            /**\n             * If provided, manages the padding of the whole modal container\n             */\n            customPadding: {\n                type: String,\n                default: null,\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: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.\n             */\n            columnsSize: {\n                type: String as PropType<BentoModalColumnLayoutVariant>,\n                default: BentoModalColumnLayoutVariant.SMALLER,\n            },\n\n            /**\n             * 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             * Text label that is displayed left to the action buttons\n             */\n            actionsLabel: {\n                type: String,\n                default: null,\n            },\n            /**\n             * If passed - sets first button color to red\n             */\n            destructiveActions: {\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: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        emits: [BentoModalEvent.CLOSE_MODAL],\n        setup(props, { slots, emit }) {\n            const { actions, destructiveActions } = toRefs(props);\n\n            const alignedActions = computed(() => {\n                const rightAlignedButtons =\n                    actions.value.length < 3 ? actions.value : actions.value.slice(0, actions.value.length - 1);\n\n                if (destructiveActions.value) {\n                    // Add red color to the 1-st Action button\n                    rightAlignedButtons[0].critical = true;\n                }\n\n                return {\n                    leftAligned:\n                        actions.value.length === 3\n                            ? [\n                                  {\n                                      ...actions.value[actions.value.length - 1],\n                                      variant: BentoButtonVariant.SECONDARY,\n                                  },\n                              ]\n                            : null,\n                    rightAligned: rightAlignedButtons,\n                };\n            });\n\n            const onCloseModal = () => {\n                emit(BentoModalEvent.CLOSE_MODAL);\n            };\n\n            onMounted(() => {\n                if (\n                    !(hasSlot(slots)('content') || (hasSlot(slots)('content-col-1') && hasSlot(slots)('content-col-2')))\n                ) {\n                    throw new Error('Bento Modal default variant requires content slot or column slots');\n                }\n\n                if (props.actions && props.actions.length > 3) {\n                    throw new Error('Not more than 3 action buttons may be provided to Bento Modal default variant');\n                }\n\n                if (props.actionsLabel && props.actions && props.actions.length > 2) {\n                    throw new Error(\n                        'Not more than 2 action buttons may be provided with actions label to Bento Modal default variant'\n                    );\n                }\n            });\n\n            return {\n                // Values\n                alignedActions,\n\n                // Methods\n                onCloseModal,\n                hasSlot: hasSlot(slots),\n\n                // Enums\n                BentoButtonActionsLayout,\n                BentoTypographyElement,\n                BentoTypographyVariant,\n            };\n        },\n    });\n</script>\n","<template>\n    <base-modal\n        class=\"b-modal-dialog\"\n        :class=\"modalDialogConditionalClasses\"\n        :hide-close-button=\"true\"\n        :size=\"BentoModalSize.SMALL\"\n        :is-dismissible=\"isDismissible\"\n        :is-open=\"isOpen\"\n        :overflow-visible=\"overflowVisible\"\n        :modal-role=\"BentoModalRole.ALERT_DIALOG\"\n        :initially-open=\"initiallyOpen\"\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 === BentoModalDialogType.ACKNOWLEDGEMENT\"\n                :actions=\"acknowledgementDialogActions\"\n                :layout=\"BentoButtonActionsLayout.BUTTONS_END\"\n            ></bento-button-actions>\n\n            <bento-button-actions\n                v-else\n                :actions=\"dialogActions\"\n                :layout=\"BentoButtonActionsLayout.BUTTONS_END\"\n            ></bento-button-actions>\n        </template>\n    </base-modal>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, onMounted, PropType, toRefs } from 'vue';\n    import {\n        BentoModalDialogType,\n        BentoModalEvent,\n        BentoModalRole,\n        BentoModalSize,\n    } from '@/components/modal/modal.types';\n    import { BaseModal } from '@/components/modal/components/base-modal';\n    import { hasSlot } from '@/utils/ts/hasSlot';\n    import {\n        BentoButtonActionObject,\n        BentoButtonActions,\n        BentoButtonActionsLayout,\n        BentoButtonActionsList,\n        BentoButtonVariant,\n    } from '@/components/button';\n    import { useI18n } from '@/utils/ts/i18n';\n    import messages from './messages.json';\n\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-modal-dialog',\n        components: { BaseModal, BentoButtonActions },\n        inheritAttrs: false,\n        props: {\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                required: true,\n            },\n            /**\n             * If set to true, it allows the modal to be closed by clicking outside of it\n             */\n            isDismissible: {\n                type: Boolean,\n                required: true,\n            },\n            /**\n             * If set to true, it will set overflow:visible to the modal, only recommended to be used with dropdown\n             */\n            overflowVisible: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Sets different action buttons styling and appearance\n             */\n            dialogType: {\n                type: String as PropType<BentoModalDialogType>,\n                required: true,\n            },\n            /**\n             * Text that is displayed in the content section of modal\n             */\n            content: {\n                type: String,\n                required: true,\n            },\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             * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.\n             */\n            initiallyOpen: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        emits: [BentoModalEvent.CLOSE_MODAL],\n        setup(props, { slots, emit }) {\n            const { t } = useI18n();\n            const { actions, dialogType } = toRefs(props);\n\n            const onCloseModal = () => {\n                emit(BentoModalEvent.CLOSE_MODAL);\n            };\n\n            const onCloseActionButton = () => {\n                onCloseModal();\n            };\n\n            const acknowledgementDialogActions = computed(() => [\n                {\n                    title: t('okButtonText') 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 (!hasSlot(slots)('default') || !props.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(\n                        'Modal Dialog, except ACKNOWLEDGEMENT type, always has to contain one action button'\n                    );\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\n            return {\n                // Values\n                dialogActions,\n                acknowledgementDialogActions,\n\n                // Methods\n                onCloseModal,\n                onCloseActionButton,\n\n                // Styles\n                modalDialogConditionalClasses,\n\n                // Enums\n                BentoModalRole,\n                BentoModalSize,\n                BentoButtonVariant,\n                BentoModalDialogType,\n                BentoButtonActionsLayout,\n            };\n        },\n    });\n</script>\n","<template>\n    <component\n        :is=\"variant\"\n        class=\"b-modal\"\n        :is-open=\"isOpen\"\n        :actions=\"actions\"\n        v-bind=\"customProps\"\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    </component>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, toRefs } from 'vue';\n    import {\n        BentoModalColumnLayoutVariant,\n        BentoModalDialogType,\n        BentoModalEvent,\n        BentoModalSize,\n        BentoModalVariant,\n    } from '@/components/modal/modal.types';\n    import { BentoModalDefault, BentoModalDialog } from '@/components/modal/components';\n    import { hasSlot } from '@/utils/ts/hasSlot';\n    import { BentoButtonActionsList } from '@/components/button';\n\n    /**\n     * Modal is a window that appear over any other page content and focus user attention exclusively on one task or piece of 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        name: 'bento-modal',\n        components: { BentoModalDefault, BentoModalDialog },\n        inheritAttrs: false,\n        props: {\n            /**\n             * Choose between default or dialog versions of modal\n             */\n            variant: {\n                type: String as PropType<BentoModalVariant>,\n                default: BentoModalVariant.DEFAULT,\n            },\n\n            // Shared Modal Default and Modal Default props\n            /**\n             * If set to true, it allows the modal to be closed by clicking outside of it\n             */\n            isDismissible: {\n                type: Boolean,\n                default: null,\n            },\n            /**\n             * If set to true, it will set overflow:visible to the modal, only recommended to be used with dropdown\n             */\n            overflowVisible: {\n                type: Boolean,\n                default: false,\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             * 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            // Specific to Modal Default props\n            /**\n             * Hides a cross icon on the right side of the title\n             */\n            hideCloseButton: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Sets the width of the modal\n             */\n            size: {\n                type: String as PropType<BentoModalSize>,\n                default: BentoModalSize.SMALL,\n            },\n            /**\n             * If provided, manages the padding of the whole modal container\n             */\n            customPadding: {\n                type: String,\n                default: null,\n            },\n            /**\n             * If provided, renders the modal's content in a two-column layout an wth dividers separating its content\n             */\n            withColumnLayout: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.\n             */\n            columnsSize: {\n                type: String as PropType<BentoModalColumnLayoutVariant>,\n                default: BentoModalColumnLayoutVariant.SMALLER,\n            },\n\n            /**\n             * Text label that is displayed left to the action buttons\n             */\n            actionsLabel: {\n                type: String,\n                default: null,\n            },\n            /**\n             * If passed - sets first button color to red\n             */\n            destructiveActions: {\n                type: Boolean,\n                default: false,\n            },\n\n            // Specific to Modal dialog props\n            /**\n             * Changes the visual styling of action buttons\n             */\n            dialogType: {\n                type: String as PropType<BentoModalDialogType>,\n                default: BentoModalDialogType.CONFIRMATION,\n            },\n            /**\n             * Text that will be displayed in the content section of Modal\n             */\n            content: {\n                type: String,\n                default: null,\n            },\n        },\n        emits: [BentoModalEvent.CLOSE_MODAL],\n        setup(props, { slots, emit }) {\n            const {\n                variant,\n                hideCloseButton,\n                size,\n                isDismissible,\n                overflowVisible,\n                dialogType,\n                content,\n                customPadding,\n                actionsLabel,\n                destructiveActions,\n                withColumnLayout,\n            } = toRefs(props);\n\n            const customProps = computed(() =>\n                variant.value === BentoModalVariant.DEFAULT\n                    ? {\n                          hideCloseButton: hideCloseButton.value,\n                          size: size.value,\n                          customPadding: customPadding.value,\n                          actionsLabel: actionsLabel.value,\n                          destructiveActions: destructiveActions.value,\n                          isDismissible: isDismissible.value ?? true,\n                          overflowVisible: overflowVisible.value,\n                          withColumnLayout: withColumnLayout.value,\n                      }\n                    : {\n                          dialogType: dialogType.value,\n                          content: content.value,\n                          isDismissible: isDismissible.value ?? false,\n                          overflowVisible: overflowVisible.value,\n                      }\n            );\n\n            const onCloseModal = () => {\n                emit(BentoModalEvent.CLOSE_MODAL);\n            };\n\n            return {\n                onCloseModal,\n                customProps,\n                hasSlot: hasSlot(slots),\n            };\n        },\n    });\n</script>\n"],"names":["BentoModalVariant","BentoModalVariant2","BentoModalSize","BentoModalSize2","BentoModalColumnLayoutVariant","BentoModalColumnLayoutVariant2","BentoModalRole","BentoModalRole2","BentoModalDialogType","BentoModalDialogType2","BentoModalEvent","BentoModalEvent2","_sfc_main$3","defineComponent","messages$1","CrossIcon","BentoTypography","BentoButton","BentoDivider","BentoFocusTrap","GridLayout","props","slots","emit","t","useI18n","modal","ref","isOpen","customPadding","overflowVisible","toRefs","labelSlot","computed","hasSlot","_a","wrapperStyles","dividerStyles","computedAriaLabel","useAriaLabel","hasColumnLayout","openModal","emitCloseEvent","closeModal","onCloseButtonClick","closeModalOnClickOutside","target","modalConditionalClasses","modalContentConditionalClasses","modalActionsConditionalClasses","computedColumnWidth","watch","onMounted","BentoButtonVariant","BentoTypographyElement","BentoTypographyVariant","GridLayoutContainerType","_sfc_main$2","BaseModal","BentoButtonActions","actions","destructiveActions","alignedActions","rightAlignedButtons","onCloseModal","BentoButtonActionsLayout","_sfc_main$1","messages","dialogType","onCloseActionButton","acknowledgementDialogActions","dialogActions","mandatoryCancelActionButton","updatedPassedActionsObject","modalDialogConditionalClasses","_b","_sfc_main","BentoModalDefault","BentoModalDialog","variant","hideCloseButton","size","isDismissible","content","actionsLabel","withColumnLayout","customProps"],"mappings":"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"}

package/dist/pagination.js

@@ -0,0 +1,487 @@
+import "./assets/index25.css";
+import { defineComponent as u, ref as b, computed as s } from "vue";
+import { BentoTypography as m, BentoTypographyElement as h } from "./typography.js";
+import { B as P } from "./chunks/dropdown.0d394d2f.js";
+import { g as C } from "./chunks/unique-id.a2a2b458.js";
+import { n as i } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { B as T, a as y } from "./chunks/button.31b757d1.js";
+const x = {
+  "en-US": {
+    showingItems: "Showing {itemCount} items",
+    showingItemsWithTotal: "Showing {itemCount} of {totalCount} items"
+  },
+  "de-DE": {
+    showingItems: "Zeigt {itemCount} Artikeln",
+    showingItemsWithTotal: "Zeigt {itemCount} von {totalCount} Artikeln"
+  },
+  "fr-FR": {
+    showingItems: "Affichage de {itemCount} élément(s)",
+    showingItemsWithTotal: "Affichage de {itemCount} élément(s) sur {totalCount}"
+  },
+  "ja-JP": {
+    showingItems: "{itemCount}個のアイテムを表示しています",
+    showingItemsWithTotal: "{totalCount}件中{itemCount}件のアイテムを表示"
+  },
+  "pt-BR": {
+    showingItems: "Mostrando {itemCount} itens",
+    showingItemsWithTotal: "Mostrando {itemCount} de {totalCount} itens"
+  },
+  "es-ES": {
+    showingItems: "Mostrando {itemCount} artículos",
+    showingItemsWithTotal: "Mostrando {itemCount} de {totalCount} artículos"
+  }
+}, N = 50, _ = [
+  { label: "10", value: 10 },
+  { label: "20", value: 20 },
+  { label: "50", value: 50 },
+  // DEFAULT_NUMBER_OF_RESULTS
+  { label: "75", value: 75 },
+  { label: "100", value: 100 }
+], $ = u({
+  name: "bento-pagination-context-results-per-page",
+  i18n: { messages: x },
+  components: {
+    BentoDropdown: P,
+    BentoTypography: m
+  },
+  props: {
+    /**
+     *  The amount of items the pager is paging through.
+     */
+    itemsPerPage: {
+      type: Number,
+      default: N,
+      validator: (a) => _.some(({ value: t }) => t === a)
+    },
+    /**
+     * The total number of items the pager is paging through.
+     */
+    totalCount: { type: Number, default: null }
+  },
+  emits: ["select"],
+  setup(a, { emit: t }) {
+    const e = C("b-pagination-context-number-elements"), o = b(_), r = (g) => {
+      t("select", g);
+    }, l = s(() => a.totalCount ? "showingItemsWithTotal" : "showingItems");
+    return {
+      // Values
+      dropdownId: e,
+      dropdownOptions: o,
+      translationPathKey: l,
+      // Enums
+      BentoTypographyElement: h,
+      // Events
+      onSelectChange: r
+    };
+  }
+});
+var w = function() {
+  var t = this, e = t._self._c;
+  return t._self._setupProxy, e("div", { staticClass: "b-pagination-results-per-page" }, [e("bento-typography", { attrs: { el: t.BentoTypographyElement.DIV } }, [e("i18n", { staticClass: "b-pagination-results-per-page__dropdown-container", attrs: { path: t.translationPathKey, tag: "div", plural: t.totalCount }, scopedSlots: t._u([{ key: "itemCount", fn: function() {
+    return [e("bento-dropdown", { staticClass: "b-pagination-results-per-page__dropdown", attrs: { id: t.dropdownId, value: t.itemsPerPage, items: t.dropdownOptions, "aria-label": t.$t(t.translationPathKey, { itemCount: t.itemsPerPage, totalCount: t.totalCount }) }, on: { input: t.onSelectChange } })];
+  }, proxy: !0 }, t.totalCount ? { key: "totalCount", fn: function() {
+    return [t._v(t._s(t.totalCount))];
+  }, proxy: !0 } : null], null, !0) })], 1)], 1);
+}, S = [], L = /* @__PURE__ */ i(
+  $,
+  w,
+  S,
+  !1,
+  null,
+  "5ef9cb16",
+  null,
+  null
+);
+const I = L.exports, B = {
+  "en-US": {
+    pageOfTotalPages: "Page {page} of {totalPages}",
+    pageOneOfOne: "Page 1 of 1",
+    pageNumber: "Page {page}"
+  },
+  "de-DE": {
+    pageOfTotalPages: "Seite {page} von {totalPages}",
+    pageOneOfOne: "Seite 1 von 1",
+    pageNumber: "Seite {page}"
+  },
+  "fr-FR": {
+    pageOfTotalPages: "Page {page} sur {totalPages}",
+    pageOneOfOne: "Page 1 sur 1",
+    pageNumber: "Page {page}"
+  },
+  "ja-JP": {
+    pageOfTotalPages: "ページ{page}/{totalPages}",
+    pageOneOfOne: "ページ1/1",
+    pageNumber: "ページ{page}"
+  },
+  "pt-BR": {
+    pageOfTotalPages: "Página {page} de {totalPages}",
+    pageOneOfOne: "Página 1 de 1",
+    pageNumber: "Página {page}"
+  },
+  "es-ES": {
+    pageOfTotalPages: "Página {page} de {totalPages}",
+    pageOneOfOne: "Página 1 de 1",
+    pageNumber: "Página {page}"
+  }
+}, O = u({
+  i18n: { messages: B },
+  name: "bento-pagination-context",
+  components: {
+    BentoDropdown: P,
+    BentoTypography: m
+  },
+  props: {
+    /**
+     * The current page number of the pager.
+     */
+    page: {
+      type: Number,
+      default: 1,
+      validator: (a) => Number.isFinite(a) && a > 0
+    },
+    /**
+     * The total number of items the pager is paging through.
+     */
+    totalPages: { type: Number, default: null }
+  },
+  emits: ["page-selected"],
+  setup(a, { emit: t }) {
+    const e = C("bento-pagination-context-current-page"), o = (n) => t("page-selected", n), r = (n) => ({
+      label: n.toString(),
+      value: n
+    }), l = (n, p) => p + 1, g = s(
+      () => Array.from(new Array(a.totalPages), l).map(r)
+    );
+    return {
+      // Values
+      dropdownId: e,
+      listOfAvailablePages: g,
+      // Events
+      onPageSelectChange: o,
+      // Enums
+      BentoTypographyElement: h
+    };
+  }
+});
+var R = function() {
+  var t = this, e = t._self._c;
+  return t._self._setupProxy, e("div", { staticClass: "b-pagination-context" }, [t.totalPages > 1 ? e("bento-typography", { attrs: { el: t.BentoTypographyElement.DIV } }, [e("i18n", { attrs: { path: "pageOfTotalPages", tag: "div" }, scopedSlots: t._u([{ key: "page", fn: function() {
+    return [e("bento-dropdown", { staticClass: "b-pagination-context__dropdown", attrs: { id: t.dropdownId, value: t.page, items: t.listOfAvailablePages, "aria-label": t.$t("pageOfTotalPages", { page: t.page, totalPages: t.totalPages }) }, on: { input: t.onPageSelectChange } })];
+  }, proxy: !0 }, { key: "totalPages", fn: function() {
+    return [t._v(t._s(t.totalPages))];
+  }, proxy: !0 }], null, !1, 2436399790) })], 1) : t.totalPages === 1 ? e("bento-typography", { attrs: { el: t.BentoTypographyElement.SPAN } }, [t._v(" " + t._s(t.$t("pageOneOfOne")) + " ")]) : e("bento-typography", { attrs: { el: t.BentoTypographyElement.SPAN } }, [t._v(" " + t._s(t.$t("pageNumber", { page: t.page })) + " ")])], 1);
+}, E = [], F = /* @__PURE__ */ i(
+  O,
+  R,
+  E,
+  !1,
+  null,
+  "16e3bc77",
+  null,
+  null
+);
+const A = F.exports;
+let c = 0;
+const k = {
+  beforeCreate() {
+    this.uuid = c.toString(), c += 1;
+  }
+};
+var M = function() {
+  var t = this, e = t._self._c;
+  return e("svg", t._b({ attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? e("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), e("path", { attrs: { fill: "#00112C", "fill-rule": "evenodd", d: "M4.25 11C4.25 11.4142 4.58579 11.75 5 11.75C5.41421 11.75 5.75 11.4142 5.75 11L5.75 4.99999C5.75 4.58577 5.41421 4.24999 5 4.24999C4.58579 4.24999 4.25 4.58577 4.25 4.99998L4.25 11Z", "clip-rule": "evenodd" } }), e("path", { attrs: { fill: "#00112C", "fill-rule": "evenodd", d: "M11.5303 5.53031C11.8232 5.23742 11.8232 4.76255 11.5303 4.46965C11.2374 4.17676 10.7626 4.17676 10.4697 4.46965L7.46967 7.46965C7.17678 7.76255 7.17678 8.23742 7.46967 8.53031L10.4697 11.5303C10.7626 11.8232 11.2374 11.8232 11.5303 11.5303C11.8232 11.2374 11.8232 10.7625 11.5303 10.4697L9.06066 7.99998L11.5303 5.53031Z", "clip-rule": "evenodd" } })]);
+}, D = [], Z = /* @__PURE__ */ i(
+  k,
+  M,
+  D,
+  !1,
+  null,
+  "d0300c1f",
+  null,
+  null
+);
+const z = Z.exports;
+let d = 0;
+const W = {
+  beforeCreate() {
+    this.uuid = d.toString(), d += 1;
+  }
+};
+var U = function() {
+  var t = this, e = t._self._c;
+  return e("svg", t._b({ attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? e("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), e("path", { attrs: { fill: "#00112C", "fill-rule": "evenodd", d: "M4.46967 10.4697C4.17678 10.7626 4.17678 11.2374 4.46967 11.5303C4.76256 11.8232 5.23744 11.8232 5.53033 11.5303L8.53033 8.53032C8.82322 8.23743 8.82322 7.76256 8.53033 7.46966L5.53033 4.46966C5.23744 4.17677 4.76256 4.17677 4.46967 4.46966C4.17678 4.76256 4.17678 5.23743 4.46967 5.53032L6.93934 7.99999L4.46967 10.4697Z", "clip-rule": "evenodd" } }), e("path", { attrs: { fill: "#00112C", "fill-rule": "evenodd", d: "M11.75 4.99999C11.75 4.58578 11.4142 4.24999 11 4.24999C10.5858 4.24999 10.25 4.58578 10.25 4.99999V11C10.25 11.4142 10.5858 11.75 11 11.75C11.4142 11.75 11.75 11.4142 11.75 11L11.75 4.99999Z", "clip-rule": "evenodd" } })]);
+}, V = [], j = /* @__PURE__ */ i(
+  W,
+  U,
+  V,
+  !1,
+  null,
+  "526f9959",
+  null,
+  null
+);
+const J = j.exports;
+let v = 0;
+const Y = {
+  beforeCreate() {
+    this.uuid = v.toString(), v += 1;
+  }
+};
+var K = function() {
+  var t = this, e = t._self._c;
+  return e("svg", t._b({ attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? e("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), e("path", { attrs: { fill: "#00112C", "fill-rule": "evenodd", d: "M10.0303 4.46967C10.3232 4.76256 10.3232 5.23744 10.0303 5.53033L7.56066 8L10.0303 10.4697C10.3232 10.7626 10.3232 11.2374 10.0303 11.5303C9.73744 11.8232 9.26256 11.8232 8.96967 11.5303L5.96967 8.53033C5.67678 8.23744 5.67678 7.76256 5.96967 7.46967L8.96967 4.46967C9.26256 4.17678 9.73744 4.17678 10.0303 4.46967Z", "clip-rule": "evenodd" } })]);
+}, q = [], G = /* @__PURE__ */ i(
+  Y,
+  K,
+  q,
+  !1,
+  null,
+  "ad07f9f1",
+  null,
+  null
+);
+const H = G.exports;
+let f = 0;
+const Q = {
+  beforeCreate() {
+    this.uuid = f.toString(), f += 1;
+  }
+};
+var X = function() {
+  var t = this, e = t._self._c;
+  return e("svg", t._b({ attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? e("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), e("path", { attrs: { fill: "#00112C", "fill-rule": "evenodd", d: "M5.96967 11.5303C5.67678 11.2374 5.67678 10.7626 5.96967 10.4697L8.43934 8L5.96967 5.53033C5.67678 5.23744 5.67678 4.76256 5.96967 4.46967C6.26256 4.17678 6.73744 4.17678 7.03033 4.46967L10.0303 7.46967C10.171 7.61032 10.25 7.80109 10.25 8C10.25 8.19891 10.171 8.38968 10.0303 8.53033L7.03033 11.5303C6.73744 11.8232 6.26256 11.8232 5.96967 11.5303Z", "clip-rule": "evenodd" } })]);
+}, tt = [], et = /* @__PURE__ */ i(
+  Q,
+  X,
+  tt,
+  !1,
+  null,
+  "5d0b9449",
+  null,
+  null
+);
+const at = et.exports, nt = {
+  "en-US": {
+    navigateToTheFirstPage: "Navigate to the first page",
+    navigateToThePreviousPage: "Navigate to the previous page",
+    navigateToTheNextPage: "Navigate to the next page",
+    navigateToTheLastPage: "Navigate to the last page"
+  },
+  "de-DE": {
+    navigateToTheFirstPage: "Zur ersten Seite navigieren",
+    navigateToThePreviousPage: "Zur vorherigen Seite navigieren",
+    navigateToTheNextPage: "Zur nächsten Seite navigieren",
+    navigateToTheLastPage: "Zur letzten Seite navigieren"
+  },
+  "fr-FR": {
+    navigateToTheFirstPage: "Accéder à la première page",
+    navigateToThePreviousPage: "Accéder à la page précédente",
+    navigateToTheNextPage: "Accéder à la page suivante",
+    navigateToTheLastPage: "Accéder à la dernière page"
+  },
+  "ja-JP": {
+    navigateToTheFirstPage: "最初のページに移動",
+    navigateToThePreviousPage: "前のページに移動",
+    navigateToTheNextPage: "次のページに移動",
+    navigateToTheLastPage: "最後のページに移動"
+  },
+  "pt-BR": {
+    navigateToTheFirstPage: "Ir para a primeira página",
+    navigateToThePreviousPage: "Ir para a página anterior",
+    navigateToTheNextPage: "Ir para a próxima página",
+    navigateToTheLastPage: "Ir para a última página"
+  },
+  "es-ES": {
+    navigateToTheFirstPage: "Ir a la primera página",
+    navigateToThePreviousPage: "Ir a la página anterior",
+    navigateToTheNextPage: "Ir a la página siguiente",
+    navigateToTheLastPage: "Ir a la última página"
+  }
+}, ot = u({
+  i18n: { messages: nt },
+  name: "adl-pagination-controls",
+  components: {
+    BentoButton: T,
+    SkipLeft: z,
+    SkipRight: J,
+    ChevronLeft: H,
+    ChevronRight: at
+  },
+  props: {
+    /**
+     * Use to determine if the pager has a "next page".
+     */
+    hasNext: { type: Boolean, default: null },
+    /**
+     * The current page number of the pager.
+     */
+    page: { type: Number, required: !0 },
+    /**
+     * The current page number of the pager.
+     */
+    totalPages: { type: Number, default: null }
+  },
+  emits: ["navigate"],
+  setup(a, { emit: t }) {
+    const e = s(() => a.page === 1), o = s(() => a.page === a.totalPages), r = s(() => !a.hasNext || o.value), l = s(() => {
+      const n = !a.hasNext, p = !a.totalPages;
+      return n || o.value || p;
+    });
+    return {
+      // Values
+      isNextButtonDisabled: r,
+      isCurrentPageFirst: e,
+      isCurrentPageLast: o,
+      isLastPageButtonDisabled: l,
+      // Events
+      navigate: (n) => {
+        t("navigate", n);
+      },
+      // Enums
+      BentoButtonVariant: y
+    };
+  }
+});
+var st = function() {
+  var t = this, e = t._self._c;
+  return t._self._setupProxy, e("div", { staticClass: "b-pagination-controls" }, [e("bento-button", { attrs: { disabled: t.isCurrentPageFirst, variant: t.BentoButtonVariant.TERTIARY, tertiary: "", condensed: "" }, on: { click: function(o) {
+    return t.navigate(1);
+  } }, scopedSlots: t._u([{ key: "iconLeft", fn: function() {
+    return [e("skip-left", { attrs: { "svg-title": t.$t("navigateToTheFirstPage") } })];
+  }, proxy: !0 }]) }), e("bento-button", { attrs: { disabled: t.isCurrentPageFirst, variant: t.BentoButtonVariant.TERTIARY, tertiary: "", condensed: "" }, on: { click: function(o) {
+    return t.navigate(t.page - 1);
+  } }, scopedSlots: t._u([{ key: "iconLeft", fn: function() {
+    return [e("chevron-left", { attrs: { "svg-title": t.$t("navigateToThePreviousPage") } })];
+  }, proxy: !0 }]) }), e("bento-button", { attrs: { disabled: t.isNextButtonDisabled, variant: t.BentoButtonVariant.TERTIARY, tertiary: "", condensed: "" }, on: { click: function(o) {
+    return t.navigate(t.page + 1);
+  } }, scopedSlots: t._u([{ key: "iconLeft", fn: function() {
+    return [e("chevron-right", { attrs: { "svg-title": t.$t("navigateToTheNextPage") } })];
+  }, proxy: !0 }]) }), e("bento-button", { attrs: { disabled: t.isLastPageButtonDisabled, variant: t.BentoButtonVariant.TERTIARY, tertiary: "", condensed: "" }, on: { click: function(o) {
+    return t.navigate(t.totalPages);
+  } }, scopedSlots: t._u([{ key: "iconLeft", fn: function() {
+    return [e("skip-right", { attrs: { "svg-title": t.$t("navigateToTheLastPage") } })];
+  }, proxy: !0 }]) })], 1);
+}, it = [], rt = /* @__PURE__ */ i(
+  ot,
+  st,
+  it,
+  !1,
+  null,
+  "7b719e03",
+  null,
+  null
+);
+const lt = rt.exports, gt = {
+  "en-US": {
+    paginatedNavigation: "Paginated navigation",
+    showingItemsWithTotal: "Showing {itemCount} of {totalCount} item | Showing {itemCount} of {totalCount} items"
+  },
+  "de-DE": {
+    paginatedNavigation: "Paginierte Navigation",
+    showingItemsWithTotal: "Zeigt {itemCount} Artikel von {totalCount} | Zeigt {itemCount} von {totalCount} Artikeln"
+  },
+  "fr-FR": {
+    paginatedNavigation: "Navigation paginée",
+    showingItemsWithTotal: "Affichage de {itemCount} élément sur {totalCount} | Affichage de {itemCount} élément(s) sur {totalCount}"
+  },
+  "ja-JP": {
+    paginatedNavigation: "ページ分割ナビゲーション",
+    showingItemsWithTotal: "{totalCount}件中{itemCount}件のアイテムを表示"
+  },
+  "pt-BR": {
+    paginatedNavigation: "Navegação por página",
+    showingItemsWithTotal: "Mostrando {itemCount} de {totalCount} item | Mostrando {itemCount} de {totalCount} itens"
+  },
+  "es-ES": {
+    paginatedNavigation: "Navegación por páginas",
+    showingItemsWithTotal: "Mostrando {itemCount} de {totalCount} artículo | Mostrando {itemCount} de {totalCount} artículos"
+  }
+}, ut = u({
+  i18n: { messages: gt },
+  name: "bento-pagination",
+  components: {
+    BentoPaginationContext: A,
+    BentoPaginationControls: lt,
+    BentoPaginationResultsPerPage: I
+  },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * A brief description of the purpose of the navigation (for a11y).
+     * Omit the term "navigation", as the screen reader will read both the role and the contents of the label.
+     */
+    ariaLabel: { type: String, default: null },
+    /**
+     * Use to determine if the pager has a "next page".
+     */
+    hasNext: { type: Boolean, default: null },
+    /**
+     * Toggles the visibility of the "results per page" part of the pagination component.
+     */
+    hidePageSize: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * The current page number of the pager.
+     */
+    page: {
+      type: Number,
+      default: 1,
+      validator: (a) => Number.isFinite(a) && a > 0
+    },
+    /**
+     *  The size of the items the pager is paging through.
+     */
+    size: {
+      type: Number,
+      default: 20,
+      validator: (a) => [10, 20, 50, 75, 100].includes(a)
+    },
+    /**
+     * The total number of items the pager is paging through.
+     */
+    totalCount: { type: Number, default: null }
+  },
+  emits: ["navigate", "items-page", "update:page", "update:size"],
+  setup(a, { emit: t }) {
+    const e = s(
+      () => !a.totalCount || !a.size ? null : Math.ceil(a.totalCount / a.size)
+    ), o = (n) => {
+      t("navigate", n), t("update:page", n);
+    }, r = (n) => {
+      o(n);
+    }, l = (n) => {
+      t("items-page", n), t("update:size", n), o(1);
+    }, g = s(() => ({
+      "b-pagination__navigation--no-results-per-page": a.hidePageSize
+    }));
+    return {
+      // Values
+      totalPages: e,
+      navigationConditionalClasses: g,
+      // Events
+      navigate: o,
+      onItemsPerPageChange: l,
+      onPageSelected: r
+    };
+  }
+});
+var pt = function() {
+  var t = this, e = t._self._c;
+  return t._self._setupProxy, e("div", { staticClass: "b-pagination" }, [e("nav", { staticClass: "b-pagination__navigation", class: t.navigationConditionalClasses, attrs: { "aria-label": t.ariaLabel } }, [t.hidePageSize ? t._e() : e("bento-pagination-results-per-page", { staticClass: "b-pagination__results-per-page", attrs: { "items-per-page": t.size, "total-count": t.totalCount }, on: { select: t.onItemsPerPageChange } }), e("div", { staticClass: "b-pagination__page-navigator" }, [e("bento-pagination-context", { staticClass: "b-pagination__context", attrs: { "total-pages": t.totalPages, page: t.page, size: t.size, "total-count": t.totalCount }, on: { "page-selected": t.onPageSelected } }), e("div", { staticClass: "b-pagination__divider" }), e("bento-pagination-controls", { staticClass: "b-pagination__controls", attrs: { "has-next": t.hasNext, page: t.page, "total-pages": t.totalPages }, on: { navigate: t.navigate } })], 1)], 1)]);
+}, _t = [], ct = /* @__PURE__ */ i(
+  ut,
+  pt,
+  _t,
+  !1,
+  null,
+  "bb2b5f11",
+  null,
+  null
+);
+const bt = ct.exports;
+export {
+  bt as BentoPagination
+};
+//# sourceMappingURL=pagination.js.map