@adyen/bento-vue3 2.1.0 → 2.2.0

package/dist/chunks/{navigation-menu-group.BnS0isK8.js.map → navigation-menu-group.BlkhBGX3.js.map}

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

package/dist/chunks/{pagination.C-kvJ-XK.js → pagination.CyqfmV_-.js}

@@ -1,6 +1,6 @@
 import { defineComponent as L, computed as P, watch as x, openBlock as n, createElementBlock as d, createVNode as u, unref as t, withCtx as m, createBlock as b, resolveDynamicComponent as F, mergeProps as S, createSlots as E, createTextVNode as y, toDisplayString as N, getCurrentInstance as $, createCommentVNode as C, createElementVNode as c, useSlots as R, normalizeClass as U, renderSlot as j } from "vue";
 import { p as G, B as I } from "./typography.B6elnWpr.js";
-import { B as O } from "./dropdown.BoSI-Rre.js";
+import { B as O } from "./dropdown.BJ0cJ9Ea.js";
 import { g as V } from "./generate-uid.DBWe4g6T.js";
 import { u as z, g as W, a as D } from "./index.CGBfMQdv.js";
 import { _ as B } from "./_plugin-vue_export-helper.CHgC5LLL.js";
@@ -169,7 +169,7 @@ const A = {
       }))
     ]));
   }
-}), te = /* @__PURE__ */ B(ae, [["__scopeId", "data-v-6fd4bd12"]]), ie = { key: 0 }, oe = {
+}), te = /* @__PURE__ */ B(ae, [["__scopeId", "data-v-068ee9dc"]]), ie = { key: 0 }, oe = {
   __name: "skip-left",
   setup(v) {
     const s = $();
@@ -337,7 +337,7 @@ const A = {
       ]))
     ]));
   }
-}), Pe = /* @__PURE__ */ B(he, [["__scopeId", "data-v-930be912"]]), ce = { class: "b-pagination" }, Te = ["aria-label"], fe = { class: "b-pagination__page-navigator" }, _e = {
+}), Pe = /* @__PURE__ */ B(he, [["__scopeId", "data-v-28d16b71"]]), ce = { class: "b-pagination" }, Te = ["aria-label"], fe = { class: "b-pagination__page-navigator" }, _e = {
   name: "bento-pagination"
 }, be = /* @__PURE__ */ L({
   ..._e,
@@ -411,4 +411,4 @@ const A = {
 export {
   ke as B
 };
-//# sourceMappingURL=pagination.C-kvJ-XK.js.map
+//# sourceMappingURL=pagination.CyqfmV_-.js.map

package/dist/chunks/{pagination.C-kvJ-XK.js.map → pagination.CyqfmV_-.js.map}

@@ -1 +1 @@
-{"version":3,"file":"pagination.C-kvJ-XK.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 '@/utils/ts/generate-uid';\n    import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t, n } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = 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 '@/utils/ts/generate-uid';\n    import messages from './messages.json';\n    import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = 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 setup>\n    import { getCurrentInstance } from 'vue';\n    import '../css/main.css';\n\n    const instance = getCurrentInstance();\n    const uuid = String(instance?.uid ?? instance?.proxy?._uid);\n</script>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M6.93945 7.99962L3.93945 10.9996L5.00011 12.0603L9.06077 7.99963L5.00011 3.93896L3.93945 4.99963L6.93945 7.99962Z\"/><path fill=\"#001222\" d=\"M11.75 11.7497V4.24974L10.25 4.24974V11.7497H11.75Z\"/></svg>\n</template>\n<script setup>\n    import { getCurrentInstance } from 'vue';\n    import '../css/main.css';\n\n    const instance = getCurrentInstance();\n    const uuid = String(instance?.uid ?? instance?.proxy?._uid);\n</script>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M10.5608 5.00011L7.56077 8.00011L10.5608 11.0001L9.50011 12.0608L5.43945 8.00011L9.50011 3.93945L10.5608 5.00011Z\"/></svg>\n</template>\n<script setup>\n    import { getCurrentInstance } from 'vue';\n    import '../css/main.css';\n\n    const instance = getCurrentInstance();\n    const uuid = String(instance?.uid ?? instance?.proxy?._uid);\n</script>\n","<template>\n    <ul class=\"b-pagination-controls\">\n        <li v-if=\"!hideFirstLastPageButtons\" key=\"first\" class=\"b-pagination-controls__item\">\n            <!-- Navigate to the first page -->\n            <bento-button :disabled=\"isCurrentPageFirst\" variant=\"tertiary\" condensed @click=\"navigate(1)\">\n                <template #iconLeft>\n                    <skip-left :svg-title=\"t('navigateToTheFirstPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li key=\"previous\" class=\"b-pagination-controls__item\">\n            <!-- Navigate to the previous page -->\n            <bento-button :disabled=\"isCurrentPageFirst\" variant=\"tertiary\" condensed @click=\"navigate(page - 1)\">\n                <template #iconLeft>\n                    <chevron-left :svg-title=\"t('navigateToThePreviousPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li key=\"next\" class=\"b-pagination-controls__item\">\n            <!-- Navigate to the next page -->\n            <bento-button :disabled=\"isNextButtonDisabled\" variant=\"tertiary\" condensed @click=\"navigate(page + 1)\">\n                <template #iconLeft>\n                    <chevron-right :svg-title=\"t('navigateToTheNextPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li v-if=\"!hideFirstLastPageButtons\" key=\"last\" class=\"b-pagination-controls__item\">\n            <!-- Navigate to the last page -->\n            <bento-button\n                :disabled=\"isLastPageButtonDisabled\"\n                variant=\"tertiary\"\n                condensed\n                @click=\"navigate(totalPages)\"\n            >\n                <template #iconLeft>\n                    <skip-right :svg-title=\"t('navigateToTheLastPage')\" />\n                </template>\n            </bento-button>\n        </li>\n    </ul>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { useI18n } from '@/utils/ts/i18n';\n    import SkipLeft from '@adyen/ui-assets-icons-16/vue/skip-left';\n    import SkipRight from '@adyen/ui-assets-icons-16/vue/skip-right';\n    import ChevronLeft from '@adyen/ui-assets-icons-16/vue/chevron-left-small';\n    import ChevronRight from '@adyen/ui-assets-icons-16/vue/chevron-right-small';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * Use to determine if the pager has a \"next page\".\n             */\n            hasNext?: boolean;\n\n            /**\n             * Hides the \"navigate to the first page\" and \"navigate to the last page\" buttons.\n             * Useful for cursor-based pagination, where jumping directly to the first or last page is not supported.\n             */\n            hideFirstLastPageButtons?: 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            hideFirstLastPageButtons: false,\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\n            :aria-label=\"$attrs['aria-label']\"\n            class=\"b-pagination__navigation\"\n            :class=\"navigationConditionalClasses()\"\n        >\n            <bento-pagination-results-per-page\n                v-if=\"!hidePageSize\"\n                class=\"b-pagination__results-per-page\"\n                :hide-page-size-selection=\"hidePageSizeSelection\"\n                :items-per-page=\"size\"\n                :total-count=\"totalCount\"\n                :page-size-items=\"pageSizeItems\"\n                @select=\"onItemsPerPageChange\"\n            />\n            <bento-typography v-else-if=\"hasSlot('default')\"><slot /></bento-typography>\n\n            <div class=\"b-pagination__page-navigator\">\n                <bento-pagination-context\n                    class=\"b-pagination__context\"\n                    :total-pages=\"totalPages\"\n                    :page=\"page\"\n                    :virtual-scroll=\"virtualScroll\"\n                    :hide-page-selection=\"hidePageSelection\"\n                    @page-selected=\"onPageSelected\"\n                />\n\n                <div class=\"b-pagination__divider\"></div>\n\n                <bento-pagination-controls\n                    class=\"b-pagination__controls\"\n                    :has-next=\"hasNext\"\n                    :hide-first-last-page-buttons=\"hideFirstLastPageButtons\"\n                    :page=\"page\"\n                    :total-pages=\"totalPages\"\n                    @navigate=\"navigate\"\n                />\n            </div>\n        </nav>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useSlots } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import BentoPaginationResultsPerPage from './components/pagination-results-per-page/pagination-results-per-page.vue';\n    import BentoPaginationContext from './components/pagination-context/pagination-context.vue';\n    import BentoPaginationControls from './components/pagination-controls/pagination-controls.vue';\n    import { useHasSlot } from '@/composables';\n    import type { BentoPaginationProps } from './pagination.types';\n\n    const props = withDefaults(defineProps<BentoPaginationProps>(), {\n        hasNext: null,\n        hideFirstLastPageButtons: false,\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 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        name: 'bento-pagination',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination.scss\" />\n"],"names":["__default__$3","messages$2","t","n","useI18n","props","__props","emit","__emit","isValid","computed","option","watch","valid","printDevelopmentWarning","dropdownId","generateUid","predefinedDropdownOptions","i18nComponent","getI18nComponent","onSelectChange","selectedNumberOfResults","translationPathKey","__default__$2","messages$1","onPageSelectChange","selectedPage","transformIntoOption","value","transformToPageNumber","_","index","listOfAvailablePages","showPageNumberOfTotal","instance","getCurrentInstance","__default__$1","messages","isCurrentPageFirst","isCurrentPageLast","isNextButtonDisabled","isLastPageButtonDisabled","hasNoNextPage","hasNoTotalPagesNumber","navigate","pageArg","__default__","slots","useSlots","hasSlot","useHasSlot","totalPages","itemsPerPage","onPageSelected","pageNumber","onItemsPerPageChange","elements","navigationConditionalClasses"],"mappings":"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"}
+{"version":3,"file":"pagination.CyqfmV_-.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 '@/utils/ts/generate-uid';\n    import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t, n } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = 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 '@/utils/ts/generate-uid';\n    import messages from './messages.json';\n    import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = 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 pages 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 setup>\n    import { getCurrentInstance } from 'vue';\n    import '../css/main.css';\n\n    const instance = getCurrentInstance();\n    const uuid = String(instance?.uid ?? instance?.proxy?._uid);\n</script>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M6.93945 7.99962L3.93945 10.9996L5.00011 12.0603L9.06077 7.99963L5.00011 3.93896L3.93945 4.99963L6.93945 7.99962Z\"/><path fill=\"#001222\" d=\"M11.75 11.7497V4.24974L10.25 4.24974V11.7497H11.75Z\"/></svg>\n</template>\n<script setup>\n    import { getCurrentInstance } from 'vue';\n    import '../css/main.css';\n\n    const instance = getCurrentInstance();\n    const uuid = String(instance?.uid ?? instance?.proxy?._uid);\n</script>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M10.5608 5.00011L7.56077 8.00011L10.5608 11.0001L9.50011 12.0608L5.43945 8.00011L9.50011 3.93945L10.5608 5.00011Z\"/></svg>\n</template>\n<script setup>\n    import { getCurrentInstance } from 'vue';\n    import '../css/main.css';\n\n    const instance = getCurrentInstance();\n    const uuid = String(instance?.uid ?? instance?.proxy?._uid);\n</script>\n","<template>\n    <ul class=\"b-pagination-controls\">\n        <li v-if=\"!hideFirstLastPageButtons\" key=\"first\" class=\"b-pagination-controls__item\">\n            <!-- Navigate to the first page -->\n            <bento-button :disabled=\"isCurrentPageFirst\" variant=\"tertiary\" condensed @click=\"navigate(1)\">\n                <template #iconLeft>\n                    <skip-left :svg-title=\"t('navigateToTheFirstPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li key=\"previous\" class=\"b-pagination-controls__item\">\n            <!-- Navigate to the previous page -->\n            <bento-button :disabled=\"isCurrentPageFirst\" variant=\"tertiary\" condensed @click=\"navigate(page - 1)\">\n                <template #iconLeft>\n                    <chevron-left :svg-title=\"t('navigateToThePreviousPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li key=\"next\" class=\"b-pagination-controls__item\">\n            <!-- Navigate to the next page -->\n            <bento-button :disabled=\"isNextButtonDisabled\" variant=\"tertiary\" condensed @click=\"navigate(page + 1)\">\n                <template #iconLeft>\n                    <chevron-right :svg-title=\"t('navigateToTheNextPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li v-if=\"!hideFirstLastPageButtons\" key=\"last\" class=\"b-pagination-controls__item\">\n            <!-- Navigate to the last page -->\n            <bento-button\n                :disabled=\"isLastPageButtonDisabled\"\n                variant=\"tertiary\"\n                condensed\n                @click=\"navigate(totalPages)\"\n            >\n                <template #iconLeft>\n                    <skip-right :svg-title=\"t('navigateToTheLastPage')\" />\n                </template>\n            </bento-button>\n        </li>\n    </ul>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { useI18n } from '@/utils/ts/i18n';\n    import SkipLeft from '@adyen/ui-assets-icons-16/vue/skip-left';\n    import SkipRight from '@adyen/ui-assets-icons-16/vue/skip-right';\n    import ChevronLeft from '@adyen/ui-assets-icons-16/vue/chevron-left-small';\n    import ChevronRight from '@adyen/ui-assets-icons-16/vue/chevron-right-small';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * Use to determine if the pager has a \"next page\".\n             */\n            hasNext?: boolean;\n\n            /**\n             * Hides the \"navigate to the first page\" and \"navigate to the last page\" buttons.\n             * Useful for cursor-based pagination, where jumping directly to the first or last page is not supported.\n             */\n            hideFirstLastPageButtons?: boolean;\n\n            /**\n             * The current page number of the pager.\n             */\n            page: number;\n\n            /**\n             * The total number of pages the pager is paging through.\n             */\n            totalPages?: number;\n        }>(),\n        {\n            hasNext: null,\n            hideFirstLastPageButtons: false,\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\n            :aria-label=\"$attrs['aria-label']\"\n            class=\"b-pagination__navigation\"\n            :class=\"navigationConditionalClasses()\"\n        >\n            <bento-pagination-results-per-page\n                v-if=\"!hidePageSize\"\n                class=\"b-pagination__results-per-page\"\n                :hide-page-size-selection=\"hidePageSizeSelection\"\n                :items-per-page=\"size\"\n                :total-count=\"totalCount\"\n                :page-size-items=\"pageSizeItems\"\n                @select=\"onItemsPerPageChange\"\n            />\n            <bento-typography v-else-if=\"hasSlot('default')\"><slot /></bento-typography>\n\n            <div class=\"b-pagination__page-navigator\">\n                <bento-pagination-context\n                    class=\"b-pagination__context\"\n                    :total-pages=\"totalPages\"\n                    :page=\"page\"\n                    :virtual-scroll=\"virtualScroll\"\n                    :hide-page-selection=\"hidePageSelection\"\n                    @page-selected=\"onPageSelected\"\n                />\n\n                <div class=\"b-pagination__divider\"></div>\n\n                <bento-pagination-controls\n                    class=\"b-pagination__controls\"\n                    :has-next=\"hasNext\"\n                    :hide-first-last-page-buttons=\"hideFirstLastPageButtons\"\n                    :page=\"page\"\n                    :total-pages=\"totalPages\"\n                    @navigate=\"navigate\"\n                />\n            </div>\n        </nav>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useSlots } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import BentoPaginationResultsPerPage from './components/pagination-results-per-page/pagination-results-per-page.vue';\n    import BentoPaginationContext from './components/pagination-context/pagination-context.vue';\n    import BentoPaginationControls from './components/pagination-controls/pagination-controls.vue';\n    import { useHasSlot } from '@/composables';\n    import type { BentoPaginationProps } from './pagination.types';\n\n    const props = withDefaults(defineProps<BentoPaginationProps>(), {\n        hasNext: null,\n        hideFirstLastPageButtons: false,\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 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        name: 'bento-pagination',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination.scss\" />\n"],"names":["__default__$3","messages$2","t","n","useI18n","props","__props","emit","__emit","isValid","computed","option","watch","valid","printDevelopmentWarning","dropdownId","generateUid","predefinedDropdownOptions","i18nComponent","getI18nComponent","onSelectChange","selectedNumberOfResults","translationPathKey","__default__$2","messages$1","onPageSelectChange","selectedPage","transformIntoOption","value","transformToPageNumber","_","index","listOfAvailablePages","showPageNumberOfTotal","instance","getCurrentInstance","__default__$1","messages","isCurrentPageFirst","isCurrentPageLast","isNextButtonDisabled","isLastPageButtonDisabled","hasNoNextPage","hasNoTotalPagesNumber","navigate","pageArg","__default__","slots","useSlots","hasSlot","useHasSlot","totalPages","itemsPerPage","onPageSelected","pageNumber","onItemsPerPageChange","elements","navigationConditionalClasses"],"mappings":"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"}

package/dist/chunks/popover.types.CXIAfp1m.js

@@ -0,0 +1,6 @@
+import { b as o } from "./popper-container.lfk_dyZi.js";
+const i = { ...o };
+export {
+  i as B
+};
+//# sourceMappingURL=popover.types.CXIAfp1m.js.map

package/dist/chunks/{popover.types.dhllh3NP.js.map → popover.types.CXIAfp1m.js.map}

@@ -1 +1 @@
-{"version":3,"file":"popover.types.dhllh3NP.js","sources":["../../../vue2/src/components/popover/popover.types.ts"],"sourcesContent":["import { PopperContainerPosition } from '../popper-container/popper-container.types';\nimport type { Placement } from '@floating-ui/vue';\nimport type {\n    BentoButtonActionsLayout,\n    BentoButtonActionsList,\n} from '../button/components/button-actions/button-actions.types';\nimport { type VueNodeElement } from '@/types/elements';\nimport type { FallbackStrategy } from '../popper-container/popper-container.types';\nimport type { Options as FocusTrapOptions } from 'focus-trap/index';\n\n/**\n * @deprecated Since v3.0.0. Use string literal instead.\n */\nexport const BentoPopoverPositions = { ...PopperContainerPosition };\nexport type BentoPopoverPositions = PopperContainerPosition;\n\nexport type BentoPopoverFallbackStrategy = FallbackStrategy;\n\nexport interface BentoPopoverProps {\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',\n     *   event: () => { ... },\n     *   icon: FourPeopleIcon\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     * }]\n     * ```\n     */\n    actions?: BentoButtonActionsList;\n\n    /**\n     * Defines the layout in which the button actions is presented.\n     * It can be one of:\n     *\n     * @values BUTTONS_END\n     * @values FILL_CONTAINER\n     * @values SPACE_BETWEEN\n     * @values VERTICAL_STACK\n     */\n    actionsLayout?: BentoButtonActionsLayout | `${BentoButtonActionsLayout}`;\n\n    /**\n     * Adds a divider line to the actions section, reduces the top/bottom paddings and removes all padding in the \"default\" slot.\n     */\n    divider?: boolean;\n\n    /**\n     * Supports disabling focus trap functionality to avoid scroll into view behavior when we don't need it.\n     * */\n    disableFocusTrap?: boolean;\n\n    /**\n     * Adds a \"dismiss\" icon that triggers the \"dismiss\" event. Requires the `title` prop to be set.\n     */\n    dismissible?: boolean;\n\n    /**\n     * Allows to configure to fallback position to the one specified, it could be ['right', 'top', ...].\n     * Useful when not using auto as starting placement.\n     * https://floating-ui.com/docs/flip#fallbackplacements\n     */\n    fallbackPosition?: Array<Placement>;\n\n    /**\n     * Determines whether to keep the initial position or use the best fitting position when no fallback position fits.\n     * @see {@link https://floating-ui.com/docs/flip#fallbackstrategy}\n     */\n    fallbackStrategy?: BentoPopoverFallbackStrategy;\n\n    /**\n     * Sets the size of the container to fit its content\n     */\n    fitContent?: boolean;\n\n    /**\n     * Instructs popover to be visible outside of the containing container.\n     * Useful when component would be used in limited containers like Modal, Side panel, etc.\n     * @see {@link https://floating-ui.com/docs/usefloating#strategy}\n     */\n    fixedPositioning?: boolean;\n\n    /**\n     * Makes the popover match the width of its target element.\n     */\n    matchWidth?: boolean;\n\n    /**\n     * Toggles the popover open and closed\n     */\n    open?: boolean;\n\n    /**\n     * Displays the popover in a large size.\n     */\n    large?: boolean;\n\n    /**\n     * Popover's position relative to the target element.\n     * Possible values are:\n     * 'auto',    'auto-start',    'auto-end',\n     * 'top',     'top-start',     'top-end'\n     * 'right',   'right-start',   'right-end'\n     * 'bottom',  'bottom-start',  'bottom-end'\n     * 'left',    'left-start',    'left-end'\n     */\n    position?: BentoPopoverPositions | `${BentoPopoverPositions}`;\n\n    /**\n     * Displays the popover in a small size.\n     */\n    small?: boolean;\n\n    /**\n     * Indicates the title you want to give the popover.\n     */\n    title?: string;\n\n    /**\n     * Popover's target element.\n     * The popover will position itself relatively to target element, in specified position.\n     */\n    targetElement: VueNodeElement;\n\n    /**\n     * Activates focus trap for both arrow and tab keys.\n     */\n    trapAll?: boolean;\n\n    /**\n     * Configurations for the focus-trap when trap-all is active.\n     */\n    trapAllOptions?: FocusTrapOptions;\n\n    /**\n     * Displays the popover without padding.\n     */\n    withoutSpace?: boolean;\n\n    /**\n     * Allows content to appear outside of the popover. Used when there are nested popovers.\n     */\n    overflowVisible?: boolean;\n}\n"],"names":["BentoPopoverPositions","PopperContainerPosition"],"mappings":";AAaO,MAAMA,IAAwB,EAAE,GAAGC,EAAA;"}
+{"version":3,"file":"popover.types.CXIAfp1m.js","sources":["../../../vue2/src/components/popover/popover.types.ts"],"sourcesContent":["import { PopperContainerPosition } from '../popper-container/popper-container.types';\nimport type { Placement } from '@floating-ui/vue';\nimport type {\n    BentoButtonActionsLayout,\n    BentoButtonActionsList,\n} from '../button/components/button-actions/button-actions.types';\nimport { type VueNodeElement } from '@/types/elements';\nimport type { FallbackStrategy } from '../popper-container/popper-container.types';\nimport type { Options as FocusTrapOptions } from 'focus-trap/index';\n\n/**\n * @deprecated Since v3.0.0. Use string literal instead.\n */\nexport const BentoPopoverPositions = { ...PopperContainerPosition };\nexport type BentoPopoverPositions = PopperContainerPosition;\n\nexport type BentoPopoverFallbackStrategy = FallbackStrategy;\n\nexport interface BentoPopoverProps {\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',\n     *   event: () => { ... },\n     *   icon: FourPeopleIcon\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     * }]\n     * ```\n     */\n    actions?: BentoButtonActionsList;\n\n    /**\n     * Defines the layout in which the button actions is presented.\n     * It can be one of:\n     *\n     * @values BUTTONS_END\n     * @values FILL_CONTAINER\n     * @values SPACE_BETWEEN\n     * @values VERTICAL_STACK\n     */\n    actionsLayout?: BentoButtonActionsLayout | `${BentoButtonActionsLayout}`;\n\n    /**\n     * Adds a divider line to the actions section, reduces the top/bottom paddings and removes all padding in the \"default\" slot.\n     */\n    divider?: boolean;\n\n    /**\n     * Supports disabling focus trap functionality to avoid scroll into view behavior when we don't need it.\n     * */\n    disableFocusTrap?: boolean;\n\n    /**\n     * Adds a \"dismiss\" icon that triggers the \"dismiss\" event. Requires the `title` prop to be set.\n     */\n    dismissible?: boolean;\n\n    /**\n     * Allows to configure to fallback position to the one specified, it could be ['right', 'top', ...].\n     * Useful when not using auto as starting placement.\n     * https://floating-ui.com/docs/flip#fallbackplacements\n     */\n    fallbackPosition?: Array<Placement>;\n\n    /**\n     * Determines whether to keep the initial position or use the best fitting position when no fallback position fits.\n     * @see {@link https://floating-ui.com/docs/flip#fallbackstrategy}\n     */\n    fallbackStrategy?: BentoPopoverFallbackStrategy;\n\n    /**\n     * Sets the size of the container to fit its content\n     */\n    fitContent?: boolean;\n\n    /**\n     * Instructs popover to be visible outside of the containing container.\n     * Useful when component would be used in limited containers like Modal, Side panel, etc.\n     * @see {@link https://floating-ui.com/docs/usefloating#strategy}\n     */\n    fixedPositioning?: boolean;\n\n    /**\n     * Makes the popover match the width of its target element.\n     */\n    matchWidth?: boolean;\n\n    /**\n     * Toggles the popover open and closed\n     */\n    open?: boolean;\n\n    /**\n     * Displays the popover in a large size.\n     */\n    large?: boolean;\n\n    /**\n     * Popover's position relative to the target element.\n     * Possible values are:\n     * 'auto',    'auto-start',    'auto-end',\n     * 'top',     'top-start',     'top-end'\n     * 'right',   'right-start',   'right-end'\n     * 'bottom',  'bottom-start',  'bottom-end'\n     * 'left',    'left-start',    'left-end'\n     */\n    position?: BentoPopoverPositions | `${BentoPopoverPositions}`;\n\n    /**\n     * Displays the popover in a small size.\n     */\n    small?: boolean;\n\n    /**\n     * Indicates the title you want to give the popover.\n     */\n    title?: string;\n\n    /**\n     * Popover's target element.\n     * The popover will position itself relatively to target element, in specified position.\n     */\n    targetElement: VueNodeElement;\n\n    /**\n     * Activates focus trap for both arrow and tab keys.\n     */\n    trapAll?: boolean;\n\n    /**\n     * Configurations for the focus-trap when trap-all is active.\n     */\n    trapAllOptions?: FocusTrapOptions;\n\n    /**\n     * Displays the popover without padding.\n     */\n    withoutSpace?: boolean;\n\n    /**\n     * Allows content to appear outside of the popover. Used when there are nested popovers.\n     */\n    overflowVisible?: boolean;\n}\n"],"names":["BentoPopoverPositions","PopperContainerPosition"],"mappings":";AAaO,MAAMA,IAAwB,EAAE,GAAGC,EAAA;"}

package/dist/chunks/{popper-container.Rfj8UdMD.js → popper-container.lfk_dyZi.js}

@@ -1,5 +1,5 @@
 import { unref as V, computed as T, ref as z, shallowRef as Vt, watch as G, getCurrentScope as ie, onScopeDispose as re, shallowReadonly as tt, defineComponent as le, toRefs as se, openBlock as Tt, createBlock as ce, mergeProps as Rt, withCtx as ae, renderSlot as fe, createElementBlock as ue, createCommentVNode as de } from "vue";
-import { B as me } from "./focus-trap.Co-S6goa.js";
+import { B as me } from "./focus-trap.BgyHTR_3.js";
 import { _ as pe } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import "../assets/popper-container.css";
 const It = ["top", "right", "bottom", "left"], Et = ["start", "end"], Ct = /* @__PURE__ */ It.reduce((t, e) => t.concat(e, e + "-" + Et[0], e + "-" + Et[1]), []), nt = Math.min, K = Math.max, st = Math.round, lt = Math.floor, _ = (t) => ({
@@ -1448,4 +1448,4 @@ export {
   Sn as h,
   sn as o
 };
-//# sourceMappingURL=popper-container.Rfj8UdMD.js.map
+//# sourceMappingURL=popper-container.lfk_dyZi.js.map