npm - @adyen/bento-vue2 - Versions diffs - 2.0.0 → 2.0.1 - Mend

@adyen/bento-vue2 2.0.0 → 2.0.1

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 (52) hide show

package/dist/chunks/{navigation-menu-group.B-AV49Bn.js → navigation-menu-group.BnHdXODQ.js} RENAMED Viewed

@@ -9,7 +9,7 @@ import { u as R } from "./index.CPOlyau9.js";
 import { b as $ } from "./tooltip.DFYc5NKM.js";
 import { m as G } from "./index.CL3TXc0a.js";
 import { B as Y } from "./link.Cls8XShm.js";
-import { u as q } from "./use-expandable-content-height.Bdd9hQwq.js";
+import { u as q } from "./use-expandable-content-height.DmFeas9-.js";
 import { C as X } from "./chevron-down.B_QiVCoO.js";
 import { C as Q } from "./chevron-up.YQRo8uKs.js";
 import "../assets/navigation-menu-group.css";
@@ -215,4 +215,4 @@ export {
   Ge as b,
   Re as n
 };
-//# sourceMappingURL=navigation-menu-group.B-AV49Bn.js.map
+//# sourceMappingURL=navigation-menu-group.BnHdXODQ.js.map

package/dist/chunks/{navigation-menu-group.B-AV49Bn.js.map → navigation-menu-group.BnHdXODQ.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"navigation-menu-group.B-AV49Bn.js","sources":["../../../ui-assets/icons-16/dist/vue/menu-collapse.vue","../../../ui-assets/icons-16/dist/vue/menu-expand.vue","../../src/components/navigation-menu/navigation-menu.keys.ts","../../src/components/navigation-menu/navigation-menu.vue","../../src/components/navigation-menu/components/navigation-menu-group/navigation-menu-group.keys.ts","../../src/components/navigation-menu/components/navigation-menu-item/navigation-menu-item.vue","../../src/components/navigation-menu/components/navigation-menu-group/navigation-menu-group.vue"],"sourcesContent":["\n<template>\n <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M15.5303 13.4697L14.4697 14.5303L12 12.0605L9.53027 14.5303L8.46973 13.4697L12 9.93945L15.5303 13.4697Z\"/><path fill=\"#001222\" d=\"M7 13.75H0V12.25H7V13.75Z\"/><path fill=\"#001222\" d=\"M7 8.75H0V7.25H7V8.75Z\"/><path fill=\"#001222\" d=\"M15.5303 2.53027L12 6.06055L8.46973 2.53027L9.53027 1.46973L12 3.93945L14.4697 1.46973L15.5303 2.53027Z\"/><path fill=\"#001222\" d=\"M7 3.75H0V2.25H7V3.75Z\"/></svg>\n</template>\n<script setup>\n import { getCurrentInstance } from 'vue';\n import '../css/main.css';\n\n const instance = getCurrentInstance();\n const uuid = String(instance?.uid ?? instance?.proxy?._uid);\n</script>\n","\n<template>\n <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M15.5303 11.5303L12 15.0605L8.46973 11.5303L9.53027 10.4697L12 12.9395L14.4697 10.4697L15.5303 11.5303Z\"/><path fill=\"#001222\" d=\"M7 13.75H0V12.25H7V13.75Z\"/><path fill=\"#001222\" d=\"M7 8.75H0V7.25H7V8.75Z\"/><path fill=\"#001222\" d=\"M15.5303 4.46973L14.4697 5.53027L12 3.06055L9.53027 5.53027L8.46973 4.46973L12 0.939453L15.5303 4.46973Z\"/><path fill=\"#001222\" d=\"M7 3.75H0V2.25H7V3.75Z\"/></svg>\n</template>\n<script setup>\n import { getCurrentInstance } from 'vue';\n import '../css/main.css';\n\n const instance = getCurrentInstance();\n const uuid = String(instance?.uid ?? instance?.proxy?._uid);\n</script>\n","export const NAVIGATION_MENU_STATE_INJECTION_KEY = Symbol('navigation menu state injection key');\n","<template>\n <nav class=\"b-navigation-menu\" :aria-labelledby=\"label ? titleId : undefined\">\n <div v-if=\"showHeader\" class=\"b-navigation-menu__header\">\n <bento-typography\n v-if=\"label\"\n :id=\"titleId\"\n el=\"p\"\n variant=\"caption\"\n stronger\n class=\"b-navigation-menu__title\"\n >\n {{ label }}\n </bento-typography>\n <div class=\"b-navigation-menu__actions-container\">\n <div v-if=\"hasSlot('headerActions')\" class=\"b-navigation-menu__actions\">\n <slot name=\"headerActions\" />\n </div>\n <bento-button\n v-if=\"computedShowExpandAll\"\n v-bento-tooltip-directive=\"expandButtonLabel\"\n variant=\"tertiary-with-background\"\n :aria-label=\"expandButtonLabel\"\n @click=\"toggleAllGroups\"\n >\n <template #iconLeft>\n <menu-collapse-icon v-if=\"allExpanded\" aria-hidden=\"true\" />\n <menu-expand-icon v-else aria-hidden=\"true\" />\n </template>\n </bento-button>\n </div>\n </div>\n\n <ul class=\"b-navigation-menu__content\">\n <slot />\n </ul>\n </nav>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, provide, ref, toRef, useSlots } from 'vue';\n import { BentoTypography } from '@/components/typography';\n import { BentoButton } from '@/components/button';\n import MenuCollapseIcon from '@adyen/ui-assets-icons-16/vue/menu-collapse';\n import MenuExpandIcon from '@adyen/ui-assets-icons-16/vue/menu-expand';\n import { useHasSlot } from '@/composables';\n import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives/tooltip';\n import { generateUid } from '@/utils/ts/generate-uid';\n import { useI18n } from '@/utils/ts/i18n';\n import type { BentoNavigationMenuProps } from './navigation-menu.types';\n import type {\n BentoNavigationMenuEmits,\n BentoNavigationMenuGroupRegistration,\n BentoNavigationMenuState,\n } from './navigation-menu.internal.types';\n import { NAVIGATION_MENU_STATE_INJECTION_KEY } from './navigation-menu.keys';\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n const props = defineProps({\n label: { default: undefined },\n showExpandAllButton: { type: Boolean, default: false },\n activePage: { default: undefined }\n});\n\n const emit = defineEmits([\"update:active-page\", \"expand-all\", \"collapse-all\"]);\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n\n const titleId = generateUid('navigation-menu-title');\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n const groups = ref<Array<BentoNavigationMenuGroupRegistration>>([]);\n\n const registerGroup = (groupId: string, setOpen: (open: boolean) => void, getIsOpen: () => boolean) => {\n groups.value.push({ id: groupId, setOpen, getIsOpen });\n };\n\n const unregisterGroup = (groupId: string) => {\n groups.value = groups.value.filter(g => g.id !== groupId);\n };\n\n const allExpanded = computed(() => groups.value.length > 0 && groups.value.every(group => group.getIsOpen()));\n\n const computedShowExpandAll = computed(() => groups.value.length > 0 && props.showExpandAllButton);\n\n const showHeader = computed(() => props.label \|\| hasSlot('headerActions') \|\| computedShowExpandAll.value);\n\n const expandButtonLabel = computed(() => (allExpanded.value ? t('hideAllPages') : t('showAllPages')));\n\n const toggleAllGroups = () => {\n const shouldExpand = !allExpanded.value;\n groups.value.forEach(({ setOpen }) => setOpen(shouldExpand));\n if (shouldExpand) {\n emit('expand-all');\n } else {\n emit('collapse-all');\n }\n };\n\n const updateActivePage = (value: string) => {\n emit('update:active-page', value);\n };\n\n provide<BentoNavigationMenuState>(NAVIGATION_MENU_STATE_INJECTION_KEY, {\n registerGroup,\n unregisterGroup,\n activePage: toRef(props, 'activePage'),\n updateActivePage,\n });\n</script>\n\n<script lang=\"ts\">\n /*\n Navigation menu container component with optional header and action buttons.\n \n @usage\n * import { BentoNavigationMenu, BentoNavigationMenuItem, BentoNavigationMenuGroup } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoNavigationMenu, BentoNavigationMenuItem, BentoNavigationMenuGroup },\n * template: `\n * <bento-navigation-menu label=\"Pages\" active-page=\"home\">\n * <template #headerActions>\n * <button>Search</button>\n * </template>\n * <bento-navigation-menu-item value=\"home\" label=\"Home\" :link=\"{ to: '/home' }\">\n * <template #icon><home-icon /></template>\n * </bento-navigation-menu-item>\n * <bento-navigation-menu-group label=\"Settings\">\n * <template #icon><folder-icon /></template>\n * <bento-navigation-menu-item nested value=\"general\" label=\"General\" :link=\"{ to: '/settings/general' }\" />\n * </bento-navigation-menu-group>\n * </bento-navigation-menu>\n * `\n * }\n /\n export default {\n i18n: { messages },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./navigation-menu.scss\" />\n","export const NAVIGATION_MENU_GROUP_STATE_INJECTION_KEY = Symbol('navigation menu group state injection key');\n","<template>\n <li\n class=\"b-navigation-menu-item\"\n :class=\"{\n ...conditionalClasses,\n 'b-navigation-menu-item--no-icon': !hasSlot('icon'),\n }\"\n :aria-hidden=\"!isVisible ? 'true' : undefined\"\n >\n <component\n :is=\"componentType\"\n v-bind=\"componentProps\"\n class=\"b-navigation-menu-item__link\"\n :aria-current=\"isSelected && link ? 'page' : undefined\"\n :tabindex=\"!isVisible ? -1 : undefined\"\n :inert=\"!isVisible ? '' : undefined\"\n @click=\"handleClick\"\n >\n <div v-if=\"!nested && hasSlot('icon')\" class=\"b-navigation-menu-item__icon\" aria-hidden=\"true\">\n <slot name=\"icon\" />\n </div>\n <bento-typography\n ref=\"labelRef\"\n v-bento-tooltip-directive=\"isTruncated ? label : undefined\"\n el=\"span\"\n variant=\"body\"\n stronger\n class=\"b-navigation-menu-item__label\"\n >\n {{ label }}\n </bento-typography>\n </component>\n <div v-if=\"hasSlot('action')\" class=\"b-navigation-menu-item__action\">\n <slot name=\"action\" />\n </div>\n </li>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, inject, onBeforeUnmount, onMounted, ref, useSlots } from 'vue';\n import { useResizeObserver } from '@vueuse/core';\n import { BentoLink } from '@/components/link';\n import { BentoTypography } from '@/components/typography';\n import { generateUid } from '@/utils/ts/generate-uid';\n import { useHasSlot } from '@/composables';\n import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives/tooltip';\n import type { BentoNavigationMenuItemProps } from './navigation-menu-item.types';\n import type { BentoNavigationMenuGroupState } from '../navigation-menu-group/navigation-menu-group.internal.types';\n import { NAVIGATION_MENU_GROUP_STATE_INJECTION_KEY } from '../navigation-menu-group/navigation-menu-group.keys';\n import type { BentoNavigationMenuState } from '../../navigation-menu.internal.types';\n import { NAVIGATION_MENU_STATE_INJECTION_KEY } from '../../navigation-menu.keys';\n\n const props = defineProps({\n nested: { type: Boolean, default: false },\n label: null,\n link: null,\n value: null,\n alwaysShowActions: { type: Boolean, default: false }\n});\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n\n const componentType = computed(() => (props.link ? BentoLink : 'div'));\n const componentProps = computed(() => (props.link ? { ...props.link, disableTypography: true } : {}));\n\n const labelRef = ref(null);\n const isTruncated = ref(false);\n\n useResizeObserver(labelRef, () => {\n const el = labelRef.value?.$el ?? labelRef.value;\n if (el) {\n isTruncated.value = el.scrollWidth > el.clientWidth;\n }\n });\n\n const itemId = generateUid('navigation-menu-item');\n const groupState = inject<BentoNavigationMenuGroupState \| null>(NAVIGATION_MENU_GROUP_STATE_INJECTION_KEY, null);\n const menuState = inject<BentoNavigationMenuState \| null>(NAVIGATION_MENU_STATE_INJECTION_KEY, null);\n\n const isSelected = computed(() => menuState?.activePage?.value === props.value);\n\n const isVisible = computed(() => {\n if (!groupState) {\n return true;\n }\n if (!groupState.isSemiCollapsed.value) {\n return true;\n }\n return isSelected.value;\n });\n\n const conditionalClasses = computed(() => ({\n 'b-navigation-menu-item--selected': isSelected.value,\n 'b-navigation-menu-item--nested': props.nested,\n 'b-navigation-menu-item--hidden': !isVisible.value,\n 'b-navigation-menu-item--always-show-actions': props.alwaysShowActions,\n }));\n\n onMounted(() => {\n if (groupState && props.nested) {\n groupState.registerItem(itemId, () => isSelected.value);\n }\n });\n\n const handleClick = () => {\n menuState?.updateActivePage(props.value);\n };\n\n onBeforeUnmount(() => {\n if (groupState && props.nested) {\n groupState.unregisterItem(itemId);\n }\n });\n</script>\n\n<script lang=\"ts\">\n /\n Navigation menu item component for rendering individual navigation links.\n * Can be used standalone or nested within a navigation-menu-group.\n \n @usage\n * import { BentoNavigationMenuItem } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoNavigationMenuItem },\n * template: `\n * <bento-navigation-menu-item value=\"home\" label=\"Home\" :link=\"{ to: '/home' }\">\n * <template #icon><home-icon /></template>\n * <template #action><star-icon svg-title=\"Add to favorites\" /></template>\n * </bento-navigation-menu-item>\n * `\n * }\n /\n export default {\n name: 'bento-navigation-menu-item',\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./navigation-menu-item.scss\" />\n","<template>\n <li class=\"b-navigation-menu-group\">\n <button\n :id=\"buttonId\"\n type=\"button\"\n class=\"b-navigation-menu-group__header\"\n :class=\"{\n ...headerClasses,\n 'b-navigation-menu-group__header--no-icon': !hasSlot('icon'),\n }\"\n :aria-expanded=\"`${isOpen && !isSemiCollapsed}`\"\n :aria-controls=\"contentId\"\n :aria-description=\"headerAriaDescription\"\n @click=\"toggleGroup\"\n >\n <div v-if=\"hasSlot('icon')\" class=\"b-navigation-menu-group__icon\" aria-hidden=\"true\">\n <slot name=\"icon\" />\n </div>\n <bento-typography\n ref=\"labelRef\"\n v-bento-tooltip-directive=\"isTruncated ? label : undefined\"\n el=\"span\"\n variant=\"body\"\n stronger\n class=\"b-navigation-menu-group__label\"\n >\n {{ label }}\n </bento-typography>\n <div class=\"b-navigation-menu-group__icon b-navigation-menu-group__icon--chevron\" aria-hidden=\"true\">\n <chevron-up-icon v-if=\"isOpen && !isSemiCollapsed\" />\n <chevron-down-icon v-else />\n </div>\n </button>\n\n <Transition name=\"b-navigation-menu-group__animation--content\">\n <div\n v-show=\"isOpen\"\n :id=\"contentId\"\n class=\"b-navigation-menu-group__content-wrapper\"\n role=\"region\"\n :aria-labelledby=\"buttonId\"\n :style=\"contentMaxHeight\"\n >\n <ul ref=\"contentDiv\" class=\"b-navigation-menu-group__content\">\n <slot />\n </ul>\n </div>\n </Transition>\n </li>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, inject, onMounted, onUnmounted, provide, ref, useSlots, watch } from 'vue';\n import { useResizeObserver } from '@vueuse/core';\n import { BentoTypography } from '@/components/typography';\n import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\n import { useHasSlot } from '@/composables';\n import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives/tooltip';\n import { generateUid } from '@/utils/ts/generate-uid';\n import { useI18n } from '@/utils/ts/i18n';\n import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n import type { BentoNavigationMenuGroupProps } from './navigation-menu-group.types';\n import type {\n BentoNavigationMenuGroupState,\n BentoNavigationMenuItemRegistration,\n } from './navigation-menu-group.internal.types';\n import { NAVIGATION_MENU_STATE_INJECTION_KEY } from '../../navigation-menu.keys';\n import { NAVIGATION_MENU_GROUP_STATE_INJECTION_KEY } from './navigation-menu-group.keys';\n import { type BentoNavigationMenuState } from '../../navigation-menu.internal.types';\n import messages from '../../messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n const props = defineProps({\n isExpanded: { type: Boolean, default: false },\n label: null\n});\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n const headerClasses = computed(() => ({\n 'b-navigation-menu-group__header--expanded': isOpen.value && !isSemiCollapsed.value,\n }));\n\n const headerAriaDescription = computed(() => (isSemiCollapsed.value ? t('showingCurrentPage') : undefined));\n\n const labelRef = ref(null);\n const isTruncated = ref(false);\n\n useResizeObserver(labelRef, () => {\n const el = labelRef.value?.$el ?? labelRef.value;\n if (el) {\n isTruncated.value = el.scrollWidth > el.clientWidth;\n }\n });\n\n const groupId = generateUid('navigation-menu-group');\n const buttonId = generateUid('navigation-menu-group-button');\n const contentId = generateUid('navigation-menu-group-content');\n const navigationMenuState = inject<BentoNavigationMenuState \| null>(NAVIGATION_MENU_STATE_INJECTION_KEY, null);\n\n const nestedItems = ref<Array<BentoNavigationMenuItemRegistration>>([]);\n\n const registerItem = (itemId: string, isSelected: () => boolean) => {\n nestedItems.value.push({ id: itemId, isSelected });\n };\n\n const unregisterItem = (itemId: string) => {\n nestedItems.value = nestedItems.value.filter(item => item.id !== itemId);\n };\n\n const isSemiCollapsed = ref(false);\n\n provide<BentoNavigationMenuGroupState>(NAVIGATION_MENU_GROUP_STATE_INJECTION_KEY, {\n registerItem,\n unregisterItem,\n isSemiCollapsed,\n });\n\n const hasActiveItem = computed(() => nestedItems.value.some(item => item.isSelected()));\n\n const emit = defineEmits([\"update:is-expanded\"]);\n\n const isOpen = ref(props.isExpanded);\n const contentDiv = ref<HTMLUListElement>(null);\n\n const { contentHeight } = useExpandableContentHeight(contentDiv, isOpen);\n const contentMaxHeight = computed(() => (contentHeight.value ? { 'max-height': contentHeight.value } : {}));\n\n const toggleGroup = () => {\n if (isOpen.value && !isSemiCollapsed.value) {\n if (hasActiveItem.value) {\n isSemiCollapsed.value = true;\n } else {\n isOpen.value = false;\n }\n } else if (isSemiCollapsed.value) {\n isSemiCollapsed.value = false;\n } else {\n isOpen.value = true;\n }\n emit('update:is-expanded', isOpen.value && !isSemiCollapsed.value);\n };\n\n const setOpen = (open: boolean) => {\n if (open) {\n isOpen.value = true;\n isSemiCollapsed.value = false;\n } else if (hasActiveItem.value) {\n isSemiCollapsed.value = true;\n } else {\n isSemiCollapsed.value = false;\n isOpen.value = false;\n }\n emit('update:is-expanded', open);\n };\n\n watch(\n () => props.isExpanded,\n value => {\n if (!isSemiCollapsed.value) {\n isOpen.value = value;\n }\n }\n );\n\n onMounted(() => {\n if (hasActiveItem.value && !isOpen.value) {\n isOpen.value = true;\n emit('update:is-expanded', true);\n }\n if (navigationMenuState) {\n navigationMenuState.registerGroup(groupId, setOpen, () => isOpen.value && !isSemiCollapsed.value);\n }\n });\n\n onUnmounted(() => navigationMenuState?.unregisterGroup(groupId));\n</script>\n\n<script lang=\"ts\">\n /\n Navigation menu group component for creating collapsible sections.\n \n @usage\n * import { BentoNavigationMenuGroup, BentoNavigationMenuItem } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoNavigationMenuGroup, BentoNavigationMenuItem },\n * template: `\n * <bento-navigation-menu-group label=\"Section\" :is-expanded=\"true\">\n * <template #icon><folder-icon /></template>\n * <bento-navigation-menu-item nested value=\"item-1\" label=\"Item 1\" :link=\"{ to: '/section/item-1' }\" />\n * <bento-navigation-menu-item nested value=\"item-2\" label=\"Item 2\" :link=\"{ to: '/section/item-2' }\" />\n * </bento-navigation-menu-group>\n * `\n * }\n */\n export default {\n name: 'bento-navigation-menu-group',\n i18n: { messages },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./navigation-menu-group.scss\" />\n"],"names":["instance","getCurrentInstance","uuid","NAVIGATION_MENU_STATE_INJECTION_KEY","__default__$2","messages","slots","useSlots","hasSlot","useHasSlot","titleId","generateUid","t","useI18n","groups","ref","registerGroup","groupId","setOpen","getIsOpen","unregisterGroup","g","allExpanded","computed","group","computedShowExpandAll","props","showHeader","expandButtonLabel","toggleAllGroups","shouldExpand","emit","updateActivePage","value","provide","toRef","NAVIGATION_MENU_GROUP_STATE_INJECTION_KEY","__default__$1","componentType","BentoLink","componentProps","labelRef","isTruncated","useResizeObserver","el","itemId","groupState","inject","menuState","isSelected","isVisible","conditionalClasses","onMounted","handleClick","onBeforeUnmount","__default__","headerClasses","isOpen","isSemiCollapsed","headerAriaDescription","buttonId","contentId","navigationMenuState","nestedItems","registerItem","unregisterItem","item","hasActiveItem","contentDiv","contentHeight","useExpandableContentHeight","contentMaxHeight","toggleGroup","open","watch","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;AAKA,UAAAA,IAAAC,EAAA,GAIAC,IAAA,OAAAF,GAAA,OAAAA,GAAA,OAAA,IAAA;;;;;;;;;;;;;;;;;;ACJA,UAAAA,IAAAC,EAAA,GAIAC,IAAA,OAAAF,GAAA,OAAAA,GAAA,OAAA,IAAA;;;;;;;;;;;;;;;uBCTOG,IAAA,uBAAA,qCAAA;;;;;;;;;;;;GC2IHC,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;iBA1EAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,uBAAA,GAEA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAA,CAAA,CAAA,GAEAC,IAAA,CAAAC,GAAAC,GAAAC,MAAA;AACI,MAAAL,EAAA,MAAA,KAAA,EAAA,IAAAG,GAAA,SAAAC,GAAA,WAAAC,EAAA,CAAA;AAAA,IAAqD,GAGzDC,IAAA,CAAAH,MAAA;AACI,MAAAH,EAAA,QAAAA,EAAA,MAAA,OAAA,CAAAO,MAAAA,EAAA,OAAAJ,CAAA;AAAA,IAAwD,GAG5DK,IAAAC,EAAA,MAAAT,EAAA,MAAA,SAAA,KAAAA,EAAA,MAAA,MAAA,CAAAU,MAAAA,EAAA,UAAA,CAAA,CAAA,GAEAC,IAAAF,EAAA,MAAAT,EAAA,MAAA,SAAA,KAAAY,EAAA,mBAAA,GAEAC,IAAAJ,EAAA,MAAAG,EAAA,SAAAlB,EAAA,eAAA,KAAAiB,EAAA,KAAA,GAEAG,IAAAL,EAAA,MAAAD,EAAA,QAAAV,EAAA,cAAA,IAAAA,EAAA,cAAA,CAAA,GAEAiB,IAAA,MAAA;AACI,YAAAC,IAAA,CAAAR,EAAA;AACA,MAAAR,EAAA,MAAA,QAAA,CAAA,EAAA,SAAAI,EAAA,MAAAA,EAAAY,CAAA,CAAA,GAEIC,EADJD,IACI,eAEA,cAFA;AAAA,IAGJ,GAGJE,IAAA,CAAAC,MAAA;AACI,MAAAF,EAAA,sBAAAE,CAAA;AAAA,IAAgC;AAGpC,WAAAC,EAAA/B,GAAA;AAAA,MAAuE,eAAAa;AAAA,MACnE,iBAAAI;AAAA,MACA,YAAAe,EAAAT,GAAA,YAAA;AAAA,MACqC,kBAAAM;AAAA,IACrC,CAAA;;;;;;;;;;;;;;;;uBC9GDI,IAAA,uBAAA,2CAAA,GCsIHC,KAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;iBA5EA/B,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAgC,IAAAf,EAAA,MAAAG,EAAA,OAAAa,IAAA,KAAA,GACAC,IAAAjB,EAAA,MAAAG,EAAA,OAAA,EAAA,GAAAA,EAAA,MAAA,mBAAA,GAAA,IAAA,CAAA,CAAA,GAEAe,IAAA1B,EAAA,IAAA,GACA2B,IAAA3B,EAAA,EAAA;AAEA,IAAA4B,EAAAF,GAAA,MAAA;AACI,YAAAG,IAAAH,EAAA,OAAA,OAAAA,EAAA;AACA,MAAAG,MACIF,EAAA,QAAAE,EAAA,cAAAA,EAAA;AAAA,IACJ,CAAA;AAGJ,UAAAC,IAAAlC,EAAA,sBAAA,GACAmC,IAAAC,EAAAX,GAAA,IAAA,GACAY,IAAAD,EAAA5C,GAAA,IAAA,GAEA8C,IAAA1B,EAAA,MAAAyB,GAAA,YAAA,UAAAtB,EAAA,KAAA,GAEAwB,IAAA3B,EAAA,MACI,CAAAuB,KAGA,CAAAA,EAAA,gBAAA,QACI,KAEJG,EAAA,KAAkB,GAGtBE,IAAA5B,EAAA,OAAA;AAAA,MAA2C,oCAAA0B,EAAA;AAAA,MACQ,kCAAAvB,EAAA;AAAA,MACP,kCAAA,CAAAwB,EAAA;AAAA,MACK,+CAAAxB,EAAA;AAAA,IACQ,EAAA;AAGzD,IAAA0B,EAAA,MAAA;AACI,MAAAN,KAAApB,EAAA,UACIoB,EAAA,aAAAD,GAAA,MAAAI,EAAA,KAAA;AAAA,IACJ,CAAA;AAGJ,UAAAI,IAAA,MAAA;AACI,MAAAL,GAAA,iBAAAtB,EAAA,KAAA;AAAA,IAAuC;AAG3C,WAAA4B,EAAA,MAAA;AACI,MAAAR,KAAApB,EAAA,UACIoB,EAAA,eAAAD,CAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;uBCyFJU,KAAA;AAAA,EAAe,MAAA;AAAA,EACL,MAAA,EAAA,UAAAlD,EAAA;AAEV;;;;;;;;iBA7HAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEA,EAAA,GAAAM,EAAA,IAAAC,EAAA,GAEA2C,IAAAjC,EAAA,OAAA;AAAA,MAAsC,6CAAAkC,EAAA,SAAA,CAAAC,EAAA;AAAA,IAC4C,EAAA,GAGlFC,IAAApC,EAAA,MAAAmC,EAAA,QAAA9C,EAAA,oBAAA,IAAA,MAAA,GAEA6B,IAAA1B,EAAA,IAAA,GACA2B,IAAA3B,EAAA,EAAA;AAEA,IAAA4B,EAAAF,GAAA,MAAA;AACI,YAAAG,IAAAH,EAAA,OAAA,OAAAA,EAAA;AACA,MAAAG,MACIF,EAAA,QAAAE,EAAA,cAAAA,EAAA;AAAA,IACJ,CAAA;AAGJ,UAAA3B,IAAAN,EAAA,uBAAA,GACAiD,IAAAjD,EAAA,8BAAA,GACAkD,IAAAlD,EAAA,+BAAA,GACAmD,IAAAf,EAAA5C,GAAA,IAAA,GAEA4D,IAAAhD,EAAA,CAAA,CAAA,GAEAiD,IAAA,CAAAnB,GAAAI,MAAA;AACI,MAAAc,EAAA,MAAA,KAAA,EAAA,IAAAlB,GAAA,YAAAI,EAAA,CAAA;AAAA,IAAiD,GAGrDgB,IAAA,CAAApB,MAAA;AACI,MAAAkB,EAAA,QAAAA,EAAA,MAAA,OAAA,CAAAG,MAAAA,EAAA,OAAArB,CAAA;AAAA,IAAuE,GAG3Ea,IAAA3C,EAAA,EAAA;AAEA,IAAAmB,EAAAE,GAAA;AAAA,MAAkF,cAAA4B;AAAA,MAC9E,gBAAAC;AAAA,MACA,iBAAAP;AAAA,IACA,CAAA;AAGJ,UAAAS,IAAA5C,EAAA,MAAAwC,EAAA,MAAA,KAAA,CAAAG,MAAAA,EAAA,WAAA,CAAA,CAAA,GAIAT,IAAA1C,EAAAW,EAAA,UAAA,GACA0C,IAAArD,EAAA,IAAA,GAEA,EAAA,eAAAsD,EAAA,IAAAC,EAAAF,GAAAX,CAAA,GACAc,IAAAhD,EAAA,MAAA8C,EAAA,QAAA,EAAA,cAAAA,EAAA,MAAA,IAAA,CAAA,CAAA,GAEAG,IAAA,MAAA;AACI,MAAAf,EAAA,SAAA,CAAAC,EAAA,QACIS,EAAA,QACIT,EAAA,QAAA,KAEAD,EAAA,QAAA,KACJC,EAAA,QAEAA,EAAA,QAAA,KAEAD,EAAA,QAAA,IAEJ1B,EAAA,sBAAA0B,EAAA,SAAA,CAAAC,EAAA,KAAA;AAAA,IAAiE,GAGrExC,IAAA,CAAAuD,MAAA;AACI,MAAAA,KACIhB,EAAA,QAAA,IACAC,EAAA,QAAA,MAAwBS,EAAA,QAExBT,EAAA,QAAA,MAEAA,EAAA,QAAA,IACAD,EAAA,QAAA,KAEJ1B,EAAA,sBAAA0C,CAAA;AAAA,IAA+B;AAGnC,WAAAC;AAAA,MAAA,MAAAhD,EAAA;AAAA,MACgB,CAAAO,MAAA;AAER,QAAAyB,EAAA,UACID,EAAA,QAAAxB;AAAA,MACJ;AAAA,IACJ,GAGJmB,EAAA,MAAA;AACI,MAAAe,EAAA,SAAA,CAAAV,EAAA,UACIA,EAAA,QAAA,IACA1B,EAAA,sBAAA,EAAA,IAEJ+B,KACIA,EAAA,cAAA7C,GAAAC,GAAA,MAAAuC,EAAA,SAAA,CAAAC,EAAA,KAAA;AAAA,IACJ,CAAA,GAGJiB,EAAA,MAAAb,GAAA,gBAAA7C,CAAA,CAAA;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"navigation-menu-group.BnHdXODQ.js","sources":["../../../ui-assets/icons-16/dist/vue/menu-collapse.vue","../../../ui-assets/icons-16/dist/vue/menu-expand.vue","../../src/components/navigation-menu/navigation-menu.keys.ts","../../src/components/navigation-menu/navigation-menu.vue","../../src/components/navigation-menu/components/navigation-menu-group/navigation-menu-group.keys.ts","../../src/components/navigation-menu/components/navigation-menu-item/navigation-menu-item.vue","../../src/components/navigation-menu/components/navigation-menu-group/navigation-menu-group.vue"],"sourcesContent":["\n<template>\n <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M15.5303 13.4697L14.4697 14.5303L12 12.0605L9.53027 14.5303L8.46973 13.4697L12 9.93945L15.5303 13.4697Z\"/><path fill=\"#001222\" d=\"M7 13.75H0V12.25H7V13.75Z\"/><path fill=\"#001222\" d=\"M7 8.75H0V7.25H7V8.75Z\"/><path fill=\"#001222\" d=\"M15.5303 2.53027L12 6.06055L8.46973 2.53027L9.53027 1.46973L12 3.93945L14.4697 1.46973L15.5303 2.53027Z\"/><path fill=\"#001222\" d=\"M7 3.75H0V2.25H7V3.75Z\"/></svg>\n</template>\n<script setup>\n import { getCurrentInstance } from 'vue';\n import '../css/main.css';\n\n const instance = getCurrentInstance();\n const uuid = String(instance?.uid ?? instance?.proxy?._uid);\n</script>\n","\n<template>\n <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M15.5303 11.5303L12 15.0605L8.46973 11.5303L9.53027 10.4697L12 12.9395L14.4697 10.4697L15.5303 11.5303Z\"/><path fill=\"#001222\" d=\"M7 13.75H0V12.25H7V13.75Z\"/><path fill=\"#001222\" d=\"M7 8.75H0V7.25H7V8.75Z\"/><path fill=\"#001222\" d=\"M15.5303 4.46973L14.4697 5.53027L12 3.06055L9.53027 5.53027L8.46973 4.46973L12 0.939453L15.5303 4.46973Z\"/><path fill=\"#001222\" d=\"M7 3.75H0V2.25H7V3.75Z\"/></svg>\n</template>\n<script setup>\n import { getCurrentInstance } from 'vue';\n import '../css/main.css';\n\n const instance = getCurrentInstance();\n const uuid = String(instance?.uid ?? instance?.proxy?._uid);\n</script>\n","export const NAVIGATION_MENU_STATE_INJECTION_KEY = Symbol('navigation menu state injection key');\n","<template>\n <nav class=\"b-navigation-menu\" :aria-labelledby=\"label ? titleId : undefined\">\n <div v-if=\"showHeader\" class=\"b-navigation-menu__header\">\n <bento-typography\n v-if=\"label\"\n :id=\"titleId\"\n el=\"p\"\n variant=\"caption\"\n stronger\n class=\"b-navigation-menu__title\"\n >\n {{ label }}\n </bento-typography>\n <div class=\"b-navigation-menu__actions-container\">\n <div v-if=\"hasSlot('headerActions')\" class=\"b-navigation-menu__actions\">\n <slot name=\"headerActions\" />\n </div>\n <bento-button\n v-if=\"computedShowExpandAll\"\n v-bento-tooltip-directive=\"expandButtonLabel\"\n variant=\"tertiary-with-background\"\n :aria-label=\"expandButtonLabel\"\n @click=\"toggleAllGroups\"\n >\n <template #iconLeft>\n <menu-collapse-icon v-if=\"allExpanded\" aria-hidden=\"true\" />\n <menu-expand-icon v-else aria-hidden=\"true\" />\n </template>\n </bento-button>\n </div>\n </div>\n\n <ul class=\"b-navigation-menu__content\">\n <slot />\n </ul>\n </nav>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, provide, ref, toRef, useSlots } from 'vue';\n import { BentoTypography } from '@/components/typography';\n import { BentoButton } from '@/components/button';\n import MenuCollapseIcon from '@adyen/ui-assets-icons-16/vue/menu-collapse';\n import MenuExpandIcon from '@adyen/ui-assets-icons-16/vue/menu-expand';\n import { useHasSlot } from '@/composables';\n import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives/tooltip';\n import { generateUid } from '@/utils/ts/generate-uid';\n import { useI18n } from '@/utils/ts/i18n';\n import type { BentoNavigationMenuProps } from './navigation-menu.types';\n import type {\n BentoNavigationMenuEmits,\n BentoNavigationMenuGroupRegistration,\n BentoNavigationMenuState,\n } from './navigation-menu.internal.types';\n import { NAVIGATION_MENU_STATE_INJECTION_KEY } from './navigation-menu.keys';\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n const props = defineProps({\n label: { default: undefined },\n showExpandAllButton: { type: Boolean, default: false },\n activePage: { default: undefined }\n});\n\n const emit = defineEmits([\"update:active-page\", \"expand-all\", \"collapse-all\"]);\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n\n const titleId = generateUid('navigation-menu-title');\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n const groups = ref<Array<BentoNavigationMenuGroupRegistration>>([]);\n\n const registerGroup = (groupId: string, setOpen: (open: boolean) => void, getIsOpen: () => boolean) => {\n groups.value.push({ id: groupId, setOpen, getIsOpen });\n };\n\n const unregisterGroup = (groupId: string) => {\n groups.value = groups.value.filter(g => g.id !== groupId);\n };\n\n const allExpanded = computed(() => groups.value.length > 0 && groups.value.every(group => group.getIsOpen()));\n\n const computedShowExpandAll = computed(() => groups.value.length > 0 && props.showExpandAllButton);\n\n const showHeader = computed(() => props.label \|\| hasSlot('headerActions') \|\| computedShowExpandAll.value);\n\n const expandButtonLabel = computed(() => (allExpanded.value ? t('hideAllPages') : t('showAllPages')));\n\n const toggleAllGroups = () => {\n const shouldExpand = !allExpanded.value;\n groups.value.forEach(({ setOpen }) => setOpen(shouldExpand));\n if (shouldExpand) {\n emit('expand-all');\n } else {\n emit('collapse-all');\n }\n };\n\n const updateActivePage = (value: string) => {\n emit('update:active-page', value);\n };\n\n provide<BentoNavigationMenuState>(NAVIGATION_MENU_STATE_INJECTION_KEY, {\n registerGroup,\n unregisterGroup,\n activePage: toRef(props, 'activePage'),\n updateActivePage,\n });\n</script>\n\n<script lang=\"ts\">\n /*\n Navigation menu container component with optional header and action buttons.\n \n @usage\n * import { BentoNavigationMenu, BentoNavigationMenuItem, BentoNavigationMenuGroup } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoNavigationMenu, BentoNavigationMenuItem, BentoNavigationMenuGroup },\n * template: `\n * <bento-navigation-menu label=\"Pages\" active-page=\"home\">\n * <template #headerActions>\n * <button>Search</button>\n * </template>\n * <bento-navigation-menu-item value=\"home\" label=\"Home\" :link=\"{ to: '/home' }\">\n * <template #icon><home-icon /></template>\n * </bento-navigation-menu-item>\n * <bento-navigation-menu-group label=\"Settings\">\n * <template #icon><folder-icon /></template>\n * <bento-navigation-menu-item nested value=\"general\" label=\"General\" :link=\"{ to: '/settings/general' }\" />\n * </bento-navigation-menu-group>\n * </bento-navigation-menu>\n * `\n * }\n /\n export default {\n i18n: { messages },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./navigation-menu.scss\" />\n","export const NAVIGATION_MENU_GROUP_STATE_INJECTION_KEY = Symbol('navigation menu group state injection key');\n","<template>\n <li\n class=\"b-navigation-menu-item\"\n :class=\"{\n ...conditionalClasses,\n 'b-navigation-menu-item--no-icon': !hasSlot('icon'),\n }\"\n :aria-hidden=\"!isVisible ? 'true' : undefined\"\n >\n <component\n :is=\"componentType\"\n v-bind=\"componentProps\"\n class=\"b-navigation-menu-item__link\"\n :aria-current=\"isSelected && link ? 'page' : undefined\"\n :tabindex=\"!isVisible ? -1 : undefined\"\n :inert=\"!isVisible ? '' : undefined\"\n @click=\"handleClick\"\n >\n <div v-if=\"!nested && hasSlot('icon')\" class=\"b-navigation-menu-item__icon\" aria-hidden=\"true\">\n <slot name=\"icon\" />\n </div>\n <bento-typography\n ref=\"labelRef\"\n v-bento-tooltip-directive=\"isTruncated ? label : undefined\"\n el=\"span\"\n variant=\"body\"\n stronger\n class=\"b-navigation-menu-item__label\"\n >\n {{ label }}\n </bento-typography>\n </component>\n <div v-if=\"hasSlot('action')\" class=\"b-navigation-menu-item__action\">\n <slot name=\"action\" />\n </div>\n </li>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, inject, onBeforeUnmount, onMounted, ref, useSlots } from 'vue';\n import { useResizeObserver } from '@vueuse/core';\n import { BentoLink } from '@/components/link';\n import { BentoTypography } from '@/components/typography';\n import { generateUid } from '@/utils/ts/generate-uid';\n import { useHasSlot } from '@/composables';\n import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives/tooltip';\n import type { BentoNavigationMenuItemProps } from './navigation-menu-item.types';\n import type { BentoNavigationMenuGroupState } from '../navigation-menu-group/navigation-menu-group.internal.types';\n import { NAVIGATION_MENU_GROUP_STATE_INJECTION_KEY } from '../navigation-menu-group/navigation-menu-group.keys';\n import type { BentoNavigationMenuState } from '../../navigation-menu.internal.types';\n import { NAVIGATION_MENU_STATE_INJECTION_KEY } from '../../navigation-menu.keys';\n\n const props = defineProps({\n nested: { type: Boolean, default: false },\n label: null,\n link: null,\n value: null,\n alwaysShowActions: { type: Boolean, default: false }\n});\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n\n const componentType = computed(() => (props.link ? BentoLink : 'div'));\n const componentProps = computed(() => (props.link ? { ...props.link, disableTypography: true } : {}));\n\n const labelRef = ref(null);\n const isTruncated = ref(false);\n\n useResizeObserver(labelRef, () => {\n const el = labelRef.value?.$el ?? labelRef.value;\n if (el) {\n isTruncated.value = el.scrollWidth > el.clientWidth;\n }\n });\n\n const itemId = generateUid('navigation-menu-item');\n const groupState = inject<BentoNavigationMenuGroupState \| null>(NAVIGATION_MENU_GROUP_STATE_INJECTION_KEY, null);\n const menuState = inject<BentoNavigationMenuState \| null>(NAVIGATION_MENU_STATE_INJECTION_KEY, null);\n\n const isSelected = computed(() => menuState?.activePage?.value === props.value);\n\n const isVisible = computed(() => {\n if (!groupState) {\n return true;\n }\n if (!groupState.isSemiCollapsed.value) {\n return true;\n }\n return isSelected.value;\n });\n\n const conditionalClasses = computed(() => ({\n 'b-navigation-menu-item--selected': isSelected.value,\n 'b-navigation-menu-item--nested': props.nested,\n 'b-navigation-menu-item--hidden': !isVisible.value,\n 'b-navigation-menu-item--always-show-actions': props.alwaysShowActions,\n }));\n\n onMounted(() => {\n if (groupState && props.nested) {\n groupState.registerItem(itemId, () => isSelected.value);\n }\n });\n\n const handleClick = () => {\n menuState?.updateActivePage(props.value);\n };\n\n onBeforeUnmount(() => {\n if (groupState && props.nested) {\n groupState.unregisterItem(itemId);\n }\n });\n</script>\n\n<script lang=\"ts\">\n /\n Navigation menu item component for rendering individual navigation links.\n * Can be used standalone or nested within a navigation-menu-group.\n \n @usage\n * import { BentoNavigationMenuItem } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoNavigationMenuItem },\n * template: `\n * <bento-navigation-menu-item value=\"home\" label=\"Home\" :link=\"{ to: '/home' }\">\n * <template #icon><home-icon /></template>\n * <template #action><star-icon svg-title=\"Add to favorites\" /></template>\n * </bento-navigation-menu-item>\n * `\n * }\n /\n export default {\n name: 'bento-navigation-menu-item',\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./navigation-menu-item.scss\" />\n","<template>\n <li class=\"b-navigation-menu-group\">\n <button\n :id=\"buttonId\"\n type=\"button\"\n class=\"b-navigation-menu-group__header\"\n :class=\"{\n ...headerClasses,\n 'b-navigation-menu-group__header--no-icon': !hasSlot('icon'),\n }\"\n :aria-expanded=\"`${isOpen && !isSemiCollapsed}`\"\n :aria-controls=\"contentId\"\n :aria-description=\"headerAriaDescription\"\n @click=\"toggleGroup\"\n >\n <div v-if=\"hasSlot('icon')\" class=\"b-navigation-menu-group__icon\" aria-hidden=\"true\">\n <slot name=\"icon\" />\n </div>\n <bento-typography\n ref=\"labelRef\"\n v-bento-tooltip-directive=\"isTruncated ? label : undefined\"\n el=\"span\"\n variant=\"body\"\n stronger\n class=\"b-navigation-menu-group__label\"\n >\n {{ label }}\n </bento-typography>\n <div class=\"b-navigation-menu-group__icon b-navigation-menu-group__icon--chevron\" aria-hidden=\"true\">\n <chevron-up-icon v-if=\"isOpen && !isSemiCollapsed\" />\n <chevron-down-icon v-else />\n </div>\n </button>\n\n <Transition name=\"b-navigation-menu-group__animation--content\">\n <div\n v-show=\"isOpen\"\n :id=\"contentId\"\n class=\"b-navigation-menu-group__content-wrapper\"\n role=\"region\"\n :aria-labelledby=\"buttonId\"\n :style=\"contentMaxHeight\"\n >\n <ul ref=\"contentDiv\" class=\"b-navigation-menu-group__content\">\n <slot />\n </ul>\n </div>\n </Transition>\n </li>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, inject, onMounted, onUnmounted, provide, ref, useSlots, watch } from 'vue';\n import { useResizeObserver } from '@vueuse/core';\n import { BentoTypography } from '@/components/typography';\n import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\n import { useHasSlot } from '@/composables';\n import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives/tooltip';\n import { generateUid } from '@/utils/ts/generate-uid';\n import { useI18n } from '@/utils/ts/i18n';\n import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n import type { BentoNavigationMenuGroupProps } from './navigation-menu-group.types';\n import type {\n BentoNavigationMenuGroupState,\n BentoNavigationMenuItemRegistration,\n } from './navigation-menu-group.internal.types';\n import { NAVIGATION_MENU_STATE_INJECTION_KEY } from '../../navigation-menu.keys';\n import { NAVIGATION_MENU_GROUP_STATE_INJECTION_KEY } from './navigation-menu-group.keys';\n import { type BentoNavigationMenuState } from '../../navigation-menu.internal.types';\n import messages from '../../messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n const props = defineProps({\n isExpanded: { type: Boolean, default: false },\n label: null\n});\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n const headerClasses = computed(() => ({\n 'b-navigation-menu-group__header--expanded': isOpen.value && !isSemiCollapsed.value,\n }));\n\n const headerAriaDescription = computed(() => (isSemiCollapsed.value ? t('showingCurrentPage') : undefined));\n\n const labelRef = ref(null);\n const isTruncated = ref(false);\n\n useResizeObserver(labelRef, () => {\n const el = labelRef.value?.$el ?? labelRef.value;\n if (el) {\n isTruncated.value = el.scrollWidth > el.clientWidth;\n }\n });\n\n const groupId = generateUid('navigation-menu-group');\n const buttonId = generateUid('navigation-menu-group-button');\n const contentId = generateUid('navigation-menu-group-content');\n const navigationMenuState = inject<BentoNavigationMenuState \| null>(NAVIGATION_MENU_STATE_INJECTION_KEY, null);\n\n const nestedItems = ref<Array<BentoNavigationMenuItemRegistration>>([]);\n\n const registerItem = (itemId: string, isSelected: () => boolean) => {\n nestedItems.value.push({ id: itemId, isSelected });\n };\n\n const unregisterItem = (itemId: string) => {\n nestedItems.value = nestedItems.value.filter(item => item.id !== itemId);\n };\n\n const isSemiCollapsed = ref(false);\n\n provide<BentoNavigationMenuGroupState>(NAVIGATION_MENU_GROUP_STATE_INJECTION_KEY, {\n registerItem,\n unregisterItem,\n isSemiCollapsed,\n });\n\n const hasActiveItem = computed(() => nestedItems.value.some(item => item.isSelected()));\n\n const emit = defineEmits([\"update:is-expanded\"]);\n\n const isOpen = ref(props.isExpanded);\n const contentDiv = ref<HTMLUListElement>(null);\n\n const { contentHeight } = useExpandableContentHeight(contentDiv, isOpen);\n const contentMaxHeight = computed(() => (contentHeight.value ? { 'max-height': contentHeight.value } : {}));\n\n const toggleGroup = () => {\n if (isOpen.value && !isSemiCollapsed.value) {\n if (hasActiveItem.value) {\n isSemiCollapsed.value = true;\n } else {\n isOpen.value = false;\n }\n } else if (isSemiCollapsed.value) {\n isSemiCollapsed.value = false;\n } else {\n isOpen.value = true;\n }\n emit('update:is-expanded', isOpen.value && !isSemiCollapsed.value);\n };\n\n const setOpen = (open: boolean) => {\n if (open) {\n isOpen.value = true;\n isSemiCollapsed.value = false;\n } else if (hasActiveItem.value) {\n isSemiCollapsed.value = true;\n } else {\n isSemiCollapsed.value = false;\n isOpen.value = false;\n }\n emit('update:is-expanded', open);\n };\n\n watch(\n () => props.isExpanded,\n value => {\n if (!isSemiCollapsed.value) {\n isOpen.value = value;\n }\n }\n );\n\n onMounted(() => {\n if (hasActiveItem.value && !isOpen.value) {\n isOpen.value = true;\n emit('update:is-expanded', true);\n }\n if (navigationMenuState) {\n navigationMenuState.registerGroup(groupId, setOpen, () => isOpen.value && !isSemiCollapsed.value);\n }\n });\n\n onUnmounted(() => navigationMenuState?.unregisterGroup(groupId));\n</script>\n\n<script lang=\"ts\">\n /\n Navigation menu group component for creating collapsible sections.\n \n @usage\n * import { BentoNavigationMenuGroup, BentoNavigationMenuItem } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoNavigationMenuGroup, BentoNavigationMenuItem },\n * template: `\n * <bento-navigation-menu-group label=\"Section\" :is-expanded=\"true\">\n * <template #icon><folder-icon /></template>\n * <bento-navigation-menu-item nested value=\"item-1\" label=\"Item 1\" :link=\"{ to: '/section/item-1' }\" />\n * <bento-navigation-menu-item nested value=\"item-2\" label=\"Item 2\" :link=\"{ to: '/section/item-2' }\" />\n * </bento-navigation-menu-group>\n * `\n * }\n */\n export default {\n name: 'bento-navigation-menu-group',\n i18n: { messages },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./navigation-menu-group.scss\" />\n"],"names":["instance","getCurrentInstance","uuid","NAVIGATION_MENU_STATE_INJECTION_KEY","__default__$2","messages","slots","useSlots","hasSlot","useHasSlot","titleId","generateUid","t","useI18n","groups","ref","registerGroup","groupId","setOpen","getIsOpen","unregisterGroup","g","allExpanded","computed","group","computedShowExpandAll","props","showHeader","expandButtonLabel","toggleAllGroups","shouldExpand","emit","updateActivePage","value","provide","toRef","NAVIGATION_MENU_GROUP_STATE_INJECTION_KEY","__default__$1","componentType","BentoLink","componentProps","labelRef","isTruncated","useResizeObserver","el","itemId","groupState","inject","menuState","isSelected","isVisible","conditionalClasses","onMounted","handleClick","onBeforeUnmount","__default__","headerClasses","isOpen","isSemiCollapsed","headerAriaDescription","buttonId","contentId","navigationMenuState","nestedItems","registerItem","unregisterItem","item","hasActiveItem","contentDiv","contentHeight","useExpandableContentHeight","contentMaxHeight","toggleGroup","open","watch","onUnmounted"],"mappings":"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"}

package/dist/chunks/{rich-text-editor.DNmVJilP.js → rich-text-editor.rXoS7KGY.js} RENAMED Viewed

@@ -5,7 +5,7 @@ import { B as Zn } from "./alert.DJDHwVeR.js";
 import { n as yt } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "./index.Cl4_42j5.js";
 import { B as Gn } from "./link.Cls8XShm.js";
-import { B as Yn } from "./checkbox.Co4HoHKF.js";
+import { B as Yn } from "./checkbox.D5xZ5Nnh.js";
 import { u as Jn } from "./index.CPOlyau9.js";
 import { u as Xn } from "./aria-label.CaUURpnB.js";
 import { g as _e } from "./generate-uid.DBWe4g6T.js";
@@ -6199,4 +6199,4 @@ const Ao = fo.exports;
 export {
   Ao as r
 };
-//# sourceMappingURL=rich-text-editor.DNmVJilP.js.map
+//# sourceMappingURL=rich-text-editor.rXoS7KGY.js.map