npm - @adyen/bento-vue2 - Versions diffs - 1.97.0 → 1.98.0 - Mend

@adyen/bento-vue2 1.97.0 → 1.98.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (229) hide show

package/dist/chunks/{navigation-menu-group.Dv2_ZRRq.js.map → navigation-menu-group.E1Oam9-n.js.map} RENAMED Viewed

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

@@ -1,6 +1,6 @@
 import { defineComponent as d, computed as g, watch as w, useSlots as L, useAttrs as B, ref as $, toRefs as z } from "vue";
 import { p as F, B as f } from "./typography.C8lPlsbD.js";
-import { B as N } from "./dropdown.CIEm6MBB.js";
+import { B as N } from "./dropdown.NTGSuWAw.js";
 import { g as S } from "./generate-uid.NJ8tVoha.js";
 import { u as h, g as x, a as y } from "./index.B6WW_F-J.js";
 import { n as _ } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
@@ -393,4 +393,4 @@ const Oe = Se.exports;
 export {
   Oe as B
 };
-//# sourceMappingURL=pagination.C6HIPq58.js.map
+//# sourceMappingURL=pagination.BzLKzijQ.js.map

package/dist/chunks/{pagination.C6HIPq58.js.map → pagination.BzLKzijQ.js.map} RENAMED Viewed

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

package/dist/chunks/popover.types.ZXsQ9bA6.js ADDED Viewed

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

package/dist/chunks/{popover.types.B9TXaqAt.js.map → popover.types.ZXsQ9bA6.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"popover.types.~~B9TXaqAt~~.js","sources":["../../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 { Options as FocusTrapOptions } from 'focus-trap/index';\n\n/*\n @deprecated Since v2.0.0. Use string literal instead.\n /\nexport const BentoPopoverPositions = { ...PopperContainerPosition };\nexport type BentoPopoverPositions = PopperContainerPosition;\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 Defines a string value that provides an accessible name for the popover.\n * @deprecated Since v2.0.0. Use `aria-label` instead.\n /\n ariaLabel?: string;\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 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 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 @deprecated Since v2.0.0. Do not use. This property no longer functions since moving to the floating-ui framework.\n /\n modifiers?: Array<unknown>;\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":";AAYO,MAAMA,IAAwB,EAAE,GAAGC,EAAA;"}
1	+ {"version":3,"file":"popover.types.ZXsQ9bA6.js","sources":["../../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 { Options as FocusTrapOptions } from 'focus-trap/index';\n\n/*\n @deprecated Since v2.0.0. Use string literal instead.\n /\nexport const BentoPopoverPositions = { ...PopperContainerPosition };\nexport type BentoPopoverPositions = PopperContainerPosition;\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 Defines a string value that provides an accessible name for the popover.\n * @deprecated Since v2.0.0. Use `aria-label` instead.\n /\n ariaLabel?: string;\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 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 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 @deprecated Since v2.0.0. Do not use. This property no longer functions since moving to the floating-ui framework.\n /\n modifiers?: Array<unknown>;\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":";AAYO,MAAMA,IAAwB,EAAE,GAAGC,EAAA;"}

package/dist/chunks/{popper-container.CFYFCz6u.js → popper-container.dxpRn9a5.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { computed as S, unref as Z, ref as j, shallowRef as ee, watch as ot, getCurrentScope as ne, onScopeDispose as oe, shallowReadonly as Q, defineComponent as ie, toRefs as re } from "vue";
 import "./index.Cl4_42j5.js";
-import { B as se } from "./focus-trap.CBIb3SyN.js";
+import { B as se } from "./focus-trap.CUZQ1kQD.js";
 import { n as le } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/popper-container.css";
 const Wt = ["top", "right", "bottom", "left"], Rt = ["start", "end"], St = /* @__PURE__ */ Wt.reduce((t, e) => t.concat(e, e + "-" + Rt[0], e + "-" + Rt[1]), []), et = Math.min, q = Math.max, lt = Math.round, st = Math.floor, M = (t) => ({
@@ -1420,4 +1420,4 @@ export {
   bn as h,
   Ze as o
 };
-//# sourceMappingURL=popper-container.CFYFCz6u.js.map
+//# sourceMappingURL=popper-container.dxpRn9a5.js.map