@adyen/bento-vue3 1.102.0 → 1.103.0

package/dist/chunks/{navigation-menu-group.B8OTD-KO.js.map → navigation-menu-group.BzJUqg9L.js.map}

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