@adyen/bento-vue3 2.0.0 → 2.0.1

package/dist/chunks/{navigation-menu-group.BSGdcUDN.js → navigation-menu-group.BJ9ZsXEn.js}

@@ -9,7 +9,7 @@ import { u as ee } from "./index.B875RXHM.js";
 import { _ as j } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import { m as ae } from "./index.DCpihRYV.js";
 import { B as me } from "./link.types.BGj7apK3.js";
-import { u as _e } from "./use-expandable-content-height.Bdd9hQwq.js";
+import { u as _e } from "./use-expandable-content-height.DmFeas9-.js";
 import { _ as fe } from "./chevron-down.DDkuHzKj.js";
 import { _ as be } from "./chevron-up.CE9uVcoS.js";
 import "../assets/navigation-menu-group.css";
@@ -327,4 +327,4 @@ export {
   sa as b,
   na as n
 };
-//# sourceMappingURL=navigation-menu-group.BSGdcUDN.js.map
+//# sourceMappingURL=navigation-menu-group.BJ9ZsXEn.js.map

package/dist/chunks/{navigation-menu-group.BSGdcUDN.js.map → navigation-menu-group.BJ9ZsXEn.js.map}

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

package/dist/chunks/{secondary-nav.Bhn5bVYI.js → secondary-nav.DApIImQ0.js}

@@ -10,7 +10,7 @@ import { B as ue } from "./button.Ciflfide.js";
 import { _ as ce } from "./chevron-down.DDkuHzKj.js";
 import { _ as de } from "./chevron-up.CE9uVcoS.js";
 import { g as me } from "./generate-uid.DBWe4g6T.js";
-import { u as ve } from "./use-expandable-content-height.Bdd9hQwq.js";
+import { u as ve } from "./use-expandable-content-height.DmFeas9-.js";
 import { _ as U } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import "../assets/secondary-nav.css";
 const q = /* @__PURE__ */ Symbol("secondary nav state"), Q = {
@@ -310,4 +310,4 @@ const q = /* @__PURE__ */ Symbol("secondary nav state"), Q = {
 export {
   He as s
 };
-//# sourceMappingURL=secondary-nav.Bhn5bVYI.js.map
+//# sourceMappingURL=secondary-nav.DApIImQ0.js.map

package/dist/chunks/{secondary-nav.Bhn5bVYI.js.map → secondary-nav.DApIImQ0.js.map}

@@ -1 +1 @@
-{"version":3,"file":"secondary-nav.Bhn5bVYI.js","sources":["../../../vue2/src/components/secondary-nav/secondary-nav.keys.ts","../../../vue2/src/components/secondary-nav/components/secondary-nav-item/secondary-nav-item.vue","../../../vue2/src/components/secondary-nav/components/secondary-nav-category/secondary-nav-category.vue","../../../vue2/src/components/secondary-nav/secondary-nav.vue"],"sourcesContent":["import { type InjectionKey } from 'vue';\nimport { type BentoSecondaryNavState } from './secondary-nav.types';\n\nexport const SECONDARY_NAV_STATE = Symbol('secondary nav state') as InjectionKey<BentoSecondaryNavState>;\n","<template>\n    <div class=\"b-secondary-nav-item\">\n        <div class=\"b-secondary-nav-item__wrapper\">\n            <button\n                class=\"b-secondary-nav-item__option\"\n                :class=\"conditionalClasses\"\n                :aria-current=\"isItemSelected ? 'page' : undefined\"\n                :aria-expanded=\"expandleItemIsToggleOnly ? `${isOpen}` : undefined\"\n                :aria-controls=\"expandleItemIsToggleOnly ? subItemsId : undefined\"\n                @click=\"expandleItemIsToggleOnly ? onToggleClick() : onClick($event)\"\n            >\n                <bento-typography class=\"b-secondary-nav-item__title\" variant=\"body\" stronger>\n                    {{ label }}\n                </bento-typography>\n                <bento-tag\n                    v-if=\"errorCounter\"\n                    class=\"b-secondary-nav-item__error-counter\"\n                    variant=\"red\"\n                    :label=\"errorCounter.toString()\"\n                    :aria-label=\"tc('errorCount', errorCounter)\"\n                >\n                    <template #icon>\n                        <cross-circle-fill-icon aria-hidden=\"true\" />\n                    </template>\n                </bento-tag>\n            </button>\n            <bento-button\n                v-if=\"hasSubItems\"\n                :aria-hidden=\"expandleItemIsToggleOnly\"\n                :tabindex=\"expandleItemIsToggleOnly ? -1 : undefined\"\n                class=\"b-secondary-nav-item__toggle\"\n                variant=\"tertiary\"\n                :aria-label=\"isOpen ? `Collapse ${label}` : `Expand ${label}`\"\n                :aria-expanded=\"!expandleItemIsToggleOnly ? `${isOpen}` : undefined\"\n                :aria-controls=\"!expandleItemIsToggleOnly ? subItemsId : undefined\"\n                @click.stop=\"onToggleClick\"\n            >\n                <template #iconLeft>\n                    <chevron-up-icon v-if=\"isOpen\" class=\"b-secondary-nav-item__icon\" aria-hidden=\"true\" />\n                    <chevron-down-icon v-else class=\"b-secondary-nav-item__icon\" aria-hidden=\"true\" />\n                </template>\n            </bento-button>\n        </div>\n        <Transition :name=\"CONTENT_TRANSITION_NAME\">\n            <div v-if=\"hasSubItems && isOpen\" :id=\"subItemsId\" :style=\"subItemsMaxHeight\">\n                <ul ref=\"subItemsRef\" class=\"b-secondary-nav-item__sub-items\">\n                    <li v-for=\"item in items\" :key=\"item.value\">\n                        <secondary-nav-item\n                            :label=\"item.label\"\n                            :value=\"item.value\"\n                            :items=\"item.items\"\n                            :error-counter=\"item.errorCounter\"\n                            is-sub-item\n                        />\n                    </li>\n                </ul>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script lang=\"ts\" setup>\n    import { SECONDARY_NAV_STATE } from '../../secondary-nav.keys';\n    import { BentoButton } from '@/components/button';\n    import { BentoTag } from '@/components/tag';\n    import { BentoTypography } from '@/components/typography';\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 CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import { computed, inject, ref, watch } from 'vue';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { generateUid } from '@/utils/ts/generate-uid';\n    import { type BentoSecondaryNavItemsItem } from '../../secondary-nav.types';\n    import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { tc } = useI18n<{ message: MessageSchema }>({ messages });\n    const { activeItemValue, updateActiveItemValue, allowExpandableItemNavigation } = inject(SECONDARY_NAV_STATE);\n    const CONTENT_TRANSITION_NAME = 'b-secondary-nav-item__animation--content';\n\n    const props = defineProps<{\n        /**\n         * The display name of the navigation item\n         */\n        label: string;\n        /**\n         * The value of this item.\n         */\n        value: string;\n        /**\n         * Nested sub-items for this item.\n         */\n        items?: Array<BentoSecondaryNavItemsItem>;\n\n        /**\n         * Defines if the item is a subitem\n         */\n        isSubItem?: boolean;\n\n        /**\n         * Defines the number of errors pertaining to this item\n         */\n        errorCounter?: number;\n    }>();\n\n    const isOpen = ref(false);\n    const subItemsId = generateUid('secondary-nav-sub-items');\n    const subItemsRef = ref<HTMLUListElement>(null);\n    const hasSubItems = computed(() => !!props.items?.length);\n    const isItemSelected = computed(() => activeItemValue.value === props.value);\n    const expandleItemIsToggleOnly = computed(() => hasSubItems.value && !allowExpandableItemNavigation.value);\n    const { contentHeight } = useExpandableContentHeight(subItemsRef, isOpen);\n    const subItemsMaxHeight = computed(() => (contentHeight.value ? { 'max-height': contentHeight.value } : {}));\n\n    const conditionalClasses = computed(() => ({\n        'b-secondary-nav-item__option--active': isItemSelected.value,\n        'b-secondary-nav-item__option--expandable': hasSubItems.value,\n        'b-secondary-nav-item__option--sub-item': props.isSubItem,\n    }));\n\n    const emit = defineEmits<{\n        /**\n         * Event emitted when this element is clicked\n         */\n        (e: 'click', clickEvent: MouseEvent): void;\n    }>();\n\n    const onClick = (e: MouseEvent) => {\n        emit('click', e);\n        updateActiveItemValue(props.value);\n    };\n\n    const onToggleClick = () => {\n        isOpen.value = !isOpen.value;\n    };\n\n    const hasActiveDescendant = (items: Array<BentoSecondaryNavItemsItem>, value: string): boolean => {\n        return items.some(\n            item => item.value === value || (item.items ? hasActiveDescendant(item.items, value) : false)\n        );\n    };\n\n    const hasDescendantErrors = (items: Array<BentoSecondaryNavItemsItem>): boolean =>\n        items.some(item => !!item.errorCounter || (item.items ? hasDescendantErrors(item.items) : false));\n\n    watch(\n        [activeItemValue, () => props.items],\n        ([activeValue]) => {\n            if (hasSubItems.value && props.items) {\n                if (hasActiveDescendant(props.items, activeValue) || hasDescendantErrors(props.items)) {\n                    isOpen.value = true;\n                }\n            }\n        },\n        { immediate: true, deep: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav}\n     */\n    export default { i18n: { messages } };\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav-item.scss\" />\n","<template>\n    <section class=\"b-secondary-nav-category\" :aria-label=\"label\">\n        <bento-typography el=\"h1\" class=\"b-secondary-nav-category__label\" variant=\"caption\" stronger>{{\n            label\n        }}</bento-typography>\n        <ul class=\"b-secondary-nav__list\">\n            <li v-for=\"item in items\" :key=\"item.value\">\n                <secondary-nav-item\n                    :label=\"item.label\"\n                    :value=\"item.value\"\n                    :items=\"item.items\"\n                    :error-counter=\"item.errorCounter\"\n                />\n            </li>\n        </ul>\n    </section>\n</template>\n\n<script lang=\"ts\" setup>\n    import { BentoTypography } from '@/components/typography';\n    import { SecondaryNavItem } from '../secondary-nav-item';\n    import { type BentoSecondaryNavItemsItem } from '../../secondary-nav.types';\n\n    defineProps<{\n        /**\n         * The display name of the category\n         */\n        label: string;\n        /**\n         * A list of {@see BentoSecondaryNavItemsItem} that belongs to this category\n         */\n        items: Array<BentoSecondaryNavItemsItem>;\n    }>();\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav}\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav-category.scss\" />\n","<template>\n    <nav class=\"b-secondary-nav\">\n        <bento-dropdown\n            v-if=\"isMobile\"\n            :aria-label=\"t('mobileDropdownAriaLabel')\"\n            :items=\"mobileDropdownItems\"\n            :static-categories=\"hasCategories\"\n            :model-value=\"activeItemValue\"\n            :is-option-disabled=\"isMobileOptionDisabled\"\n            @update:model-value=\"updateActiveItemValue\"\n        >\n            <template #display-value=\"{ label }\">\n                <bento-typography el=\"span\">\n                    {{ label }}\n                </bento-typography>\n            </template>\n            <template #default=\"{ label, data }\">\n                <bento-typography\n                    el=\"div\"\n                    :class=\"{ 'b-secondary-nav__option': true, 'b-secondary-nav__nested-option': !!data?.level }\"\n                >\n                    {{ label }}\n                    <bento-tag\n                        v-if=\"data?.errorCounter\"\n                        class=\"b-secondary-nav__error-counter\"\n                        variant=\"red\"\n                        :label=\"data.errorCounter\"\n                        :aria-label=\"tc('errorCount', data.errorCounter)\"\n                    >\n                        <template #icon>\n                            <cross-circle-fill-icon aria-hidden=\"true\" />\n                        </template>\n                    </bento-tag>\n                </bento-typography>\n            </template>\n        </bento-dropdown>\n        <ul v-else class=\"b-secondary-nav__list\">\n            <li v-for=\"item in items\" :key=\"item.label\">\n                <secondary-nav-category\n                    v-if=\"'items' in item && !('value' in item)\"\n                    :label=\"item.label\"\n                    :items=\"item.items\"\n                />\n                <secondary-nav-item\n                    v-else\n                    :label=\"item.label\"\n                    :value=\"item.value\"\n                    :items=\"item.items\"\n                    :error-counter=\"item.errorCounter\"\n                />\n            </li>\n        </ul>\n    </nav>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, provide, readonly, ref, toRef, watch } from 'vue';\n    import { SecondaryNavItem } from './components/secondary-nav-item';\n    import { SecondaryNavCategory } from './components/secondary-nav-category';\n    import { SECONDARY_NAV_STATE } from './secondary-nav.keys';\n    import {\n        type BentoSecondaryNavItems,\n        type BentoSecondaryNavItemsCategory,\n        type BentoSecondaryNavItemsItem,\n        type BentoSecondaryNavState,\n    } from './secondary-nav.types';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoTag } from '@/components/tag';\n    import CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import { useBreakpoints } from '@vueuse/core';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { type BentoListboxOptionItem, type BentoListboxOptions } from '@/types/listbox';\n    import { BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t, tc } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const breakpoints = useBreakpoints({\n        s: BMediaQuerySMax,\n    });\n\n    const isMobile = breakpoints.smallerOrEqual('s');\n    const props = defineProps<{\n        /**\n         * An array containing all the items on the nav. The array can have either {@see BentoSecondaryNavItemsCategory },\n         * which is used to group different items or {@see BentoSecondaryNavItemsItem } if you don't need to group them.\n         */\n        items: BentoSecondaryNavItems;\n        /**\n         * The value of the selected item.\n         * If nothing is passed, it defaults to the first item value in items.\n         */\n        value?: string;\n        /**\n         * When true, items that contain subitems are also clickable and can be selected.\n         * When false, those items only act as expand/collapse toggles.\n         */\n        allowExpandableItemNavigation?: boolean;\n    }>();\n\n    const emit = defineEmits<{\n        /**\n         * Emmited when the current selected item changes\n         */\n        (e: 'change', category: string): void;\n    }>();\n\n    const isCategory = (item: BentoSecondaryNavItems[number]): item is BentoSecondaryNavItemsCategory =>\n        'items' in item && !('value' in item);\n\n    const mapNestedItems = (items: Array<BentoSecondaryNavItemsItem>, level = 0): BentoListboxOptions =>\n        items.flatMap((item): BentoListboxOptions => {\n            const currentItem: BentoListboxOptionItem = {\n                label: item.label,\n                value: item.value,\n                data: { level, hasSubItems: !!item.items?.length, errorCounter: item.errorCounter },\n            };\n\n            if (item.items?.length) {\n                return [currentItem, ...mapNestedItems(item.items, level + 1)];\n            }\n\n            return [currentItem];\n        });\n\n    const isMobileOptionDisabled = (option: BentoListboxOptionItem): boolean =>\n        !props.allowExpandableItemNavigation && (option.data as { hasSubItems?: boolean })?.hasSubItems;\n\n    const hasCategories = computed(() => props.items.some(item => isCategory(item)));\n    const mobileDropdownItems = computed<BentoListboxOptions>(() => {\n        return props.items.flatMap(item => {\n            if (isCategory(item)) {\n                return [\n                    {\n                        label: item.label,\n                        value: `category-${item.label}`,\n                        items: mapNestedItems(item.items),\n                    } satisfies BentoListboxOptionItem,\n                ];\n            }\n\n            if (item.items?.length) {\n                return mapNestedItems([item]);\n            }\n\n            return [\n                {\n                    label: item.label,\n                    value: item.value,\n                    data: { level: 0, errorCounter: item.errorCounter },\n                } satisfies BentoListboxOptionItem,\n            ];\n        });\n    });\n\n    const flattenNestedItems = (items: Array<BentoSecondaryNavItemsItem>): Array<BentoSecondaryNavItemsItem> =>\n        items.flatMap(item => [item, ...(item.items?.length ? flattenNestedItems(item.items) : [])]);\n\n    const findFirstSelectableNestedItemValue = (items: Array<BentoSecondaryNavItemsItem>): string =>\n        flattenNestedItems(items).find(item => props.allowExpandableItemNavigation || !item.items?.length)?.value ?? '';\n\n    const activeItemValueFallback = computed(() => {\n        if (!props.items.length) {\n            return '';\n        }\n\n        return findFirstSelectableNestedItemValue(\n            props.items.flatMap(item =>\n                isCategory(item) ? flattenNestedItems(item.items) : flattenNestedItems([item])\n            )\n        );\n    });\n\n    const activeItemValue = ref(props.value ?? activeItemValueFallback.value);\n    const updateActiveItemValue = (value: string) => {\n        activeItemValue.value = value;\n        emit('change', value);\n    };\n\n    // The component's state is inject on `secondary-nav-item` to determine the\n    // current active item and to change its value\n    const state: BentoSecondaryNavState = {\n        activeItemValue: readonly(activeItemValue),\n        updateActiveItemValue,\n        allowExpandableItemNavigation: toRef(props, 'allowExpandableItemNavigation'),\n    };\n\n    watch(\n        () => props.value,\n        value => {\n            if (value !== undefined) {\n                activeItemValue.value = value;\n            }\n        }\n    );\n\n    provide(SECONDARY_NAV_STATE, state);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Secondary Nav offers users a structured way to access information.\n     * It also provides a clear hierarchy for users to understand and navigate through various information.\n     *\n     * @example\n     * import { BentoSecondaryNav } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSecondaryNav },\n     *     template: `\n     *          <bento-secondary-nav :value=\"value\" :items=\"items\" />\n     *     `,\n     *     setup() {\n     *         const value = ref(2) // Active item value\n     *         const items: BentoSecondaryNavItemInfo[] = [\n     *              { label: 'Option 1', value: 1 },\n     *              { label: 'Option 2', value: 2 },\n     *         ];\n     *         return { items, value };\n     *     }\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav.scss\" />\n"],"names":["SECONDARY_NAV_STATE","__default__$2","messages$1","tc","useI18n","activeItemValue","updateActiveItemValue","allowExpandableItemNavigation","inject","CONTENT_TRANSITION_NAME","props","__props","isOpen","ref","subItemsId","generateUid","subItemsRef","hasSubItems","computed","isItemSelected","expandleItemIsToggleOnly","contentHeight","useExpandableContentHeight","subItemsMaxHeight","conditionalClasses","emit","__emit","onClick","e","onToggleClick","hasActiveDescendant","items","value","item","hasDescendantErrors","watch","activeValue","__default__$1","__default__","messages","t","isMobile","useBreakpoints","BMediaQuerySMax","isCategory","mapNestedItems","level","currentItem","isMobileOptionDisabled","option","hasCategories","mobileDropdownItems","flattenNestedItems","findFirstSelectableNestedItemValue","activeItemValueFallback","state","readonly","toRef","provide"],"mappings":"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"}
+{"version":3,"file":"secondary-nav.DApIImQ0.js","sources":["../../../vue2/src/components/secondary-nav/secondary-nav.keys.ts","../../../vue2/src/components/secondary-nav/components/secondary-nav-item/secondary-nav-item.vue","../../../vue2/src/components/secondary-nav/components/secondary-nav-category/secondary-nav-category.vue","../../../vue2/src/components/secondary-nav/secondary-nav.vue"],"sourcesContent":["import { type InjectionKey } from 'vue';\nimport { type BentoSecondaryNavState } from './secondary-nav.types';\n\nexport const SECONDARY_NAV_STATE = Symbol('secondary nav state') as InjectionKey<BentoSecondaryNavState>;\n","<template>\n    <div class=\"b-secondary-nav-item\">\n        <div class=\"b-secondary-nav-item__wrapper\">\n            <button\n                class=\"b-secondary-nav-item__option\"\n                :class=\"conditionalClasses\"\n                :aria-current=\"isItemSelected ? 'page' : undefined\"\n                :aria-expanded=\"expandleItemIsToggleOnly ? `${isOpen}` : undefined\"\n                :aria-controls=\"expandleItemIsToggleOnly ? subItemsId : undefined\"\n                @click=\"expandleItemIsToggleOnly ? onToggleClick() : onClick($event)\"\n            >\n                <bento-typography class=\"b-secondary-nav-item__title\" variant=\"body\" stronger>\n                    {{ label }}\n                </bento-typography>\n                <bento-tag\n                    v-if=\"errorCounter\"\n                    class=\"b-secondary-nav-item__error-counter\"\n                    variant=\"red\"\n                    :label=\"errorCounter.toString()\"\n                    :aria-label=\"tc('errorCount', errorCounter)\"\n                >\n                    <template #icon>\n                        <cross-circle-fill-icon aria-hidden=\"true\" />\n                    </template>\n                </bento-tag>\n            </button>\n            <bento-button\n                v-if=\"hasSubItems\"\n                :aria-hidden=\"expandleItemIsToggleOnly\"\n                :tabindex=\"expandleItemIsToggleOnly ? -1 : undefined\"\n                class=\"b-secondary-nav-item__toggle\"\n                variant=\"tertiary\"\n                :aria-label=\"isOpen ? `Collapse ${label}` : `Expand ${label}`\"\n                :aria-expanded=\"!expandleItemIsToggleOnly ? `${isOpen}` : undefined\"\n                :aria-controls=\"!expandleItemIsToggleOnly ? subItemsId : undefined\"\n                @click.stop=\"onToggleClick\"\n            >\n                <template #iconLeft>\n                    <chevron-up-icon v-if=\"isOpen\" class=\"b-secondary-nav-item__icon\" aria-hidden=\"true\" />\n                    <chevron-down-icon v-else class=\"b-secondary-nav-item__icon\" aria-hidden=\"true\" />\n                </template>\n            </bento-button>\n        </div>\n        <Transition :name=\"CONTENT_TRANSITION_NAME\">\n            <div v-if=\"hasSubItems && isOpen\" :id=\"subItemsId\" :style=\"subItemsMaxHeight\">\n                <ul ref=\"subItemsRef\" class=\"b-secondary-nav-item__sub-items\">\n                    <li v-for=\"item in items\" :key=\"item.value\">\n                        <secondary-nav-item\n                            :label=\"item.label\"\n                            :value=\"item.value\"\n                            :items=\"item.items\"\n                            :error-counter=\"item.errorCounter\"\n                            is-sub-item\n                        />\n                    </li>\n                </ul>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script lang=\"ts\" setup>\n    import { SECONDARY_NAV_STATE } from '../../secondary-nav.keys';\n    import { BentoButton } from '@/components/button';\n    import { BentoTag } from '@/components/tag';\n    import { BentoTypography } from '@/components/typography';\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 CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import { computed, inject, ref, watch } from 'vue';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { generateUid } from '@/utils/ts/generate-uid';\n    import { type BentoSecondaryNavItemsItem } from '../../secondary-nav.types';\n    import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { tc } = useI18n<{ message: MessageSchema }>({ messages });\n    const { activeItemValue, updateActiveItemValue, allowExpandableItemNavigation } = inject(SECONDARY_NAV_STATE);\n    const CONTENT_TRANSITION_NAME = 'b-secondary-nav-item__animation--content';\n\n    const props = defineProps<{\n        /**\n         * The display name of the navigation item\n         */\n        label: string;\n        /**\n         * The value of this item.\n         */\n        value: string;\n        /**\n         * Nested sub-items for this item.\n         */\n        items?: Array<BentoSecondaryNavItemsItem>;\n\n        /**\n         * Defines if the item is a subitem\n         */\n        isSubItem?: boolean;\n\n        /**\n         * Defines the number of errors pertaining to this item\n         */\n        errorCounter?: number;\n    }>();\n\n    const isOpen = ref(false);\n    const subItemsId = generateUid('secondary-nav-sub-items');\n    const subItemsRef = ref<HTMLUListElement>(null);\n    const hasSubItems = computed(() => !!props.items?.length);\n    const isItemSelected = computed(() => activeItemValue.value === props.value);\n    const expandleItemIsToggleOnly = computed(() => hasSubItems.value && !allowExpandableItemNavigation.value);\n    const { contentHeight } = useExpandableContentHeight(subItemsRef, isOpen);\n    const subItemsMaxHeight = computed(() => (contentHeight.value ? { 'max-height': contentHeight.value } : {}));\n\n    const conditionalClasses = computed(() => ({\n        'b-secondary-nav-item__option--active': isItemSelected.value,\n        'b-secondary-nav-item__option--expandable': hasSubItems.value,\n        'b-secondary-nav-item__option--sub-item': props.isSubItem,\n    }));\n\n    const emit = defineEmits<{\n        /**\n         * Event emitted when this element is clicked\n         */\n        (e: 'click', clickEvent: MouseEvent): void;\n    }>();\n\n    const onClick = (e: MouseEvent) => {\n        emit('click', e);\n        updateActiveItemValue(props.value);\n    };\n\n    const onToggleClick = () => {\n        isOpen.value = !isOpen.value;\n    };\n\n    const hasActiveDescendant = (items: Array<BentoSecondaryNavItemsItem>, value: string): boolean => {\n        return items.some(\n            item => item.value === value || (item.items ? hasActiveDescendant(item.items, value) : false)\n        );\n    };\n\n    const hasDescendantErrors = (items: Array<BentoSecondaryNavItemsItem>): boolean =>\n        items.some(item => !!item.errorCounter || (item.items ? hasDescendantErrors(item.items) : false));\n\n    watch(\n        [activeItemValue, () => props.items],\n        ([activeValue]) => {\n            if (hasSubItems.value && props.items) {\n                if (hasActiveDescendant(props.items, activeValue) || hasDescendantErrors(props.items)) {\n                    isOpen.value = true;\n                }\n            }\n        },\n        { immediate: true, deep: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav}\n     */\n    export default { i18n: { messages } };\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav-item.scss\" />\n","<template>\n    <section class=\"b-secondary-nav-category\" :aria-label=\"label\">\n        <bento-typography el=\"h1\" class=\"b-secondary-nav-category__label\" variant=\"caption\" stronger>{{\n            label\n        }}</bento-typography>\n        <ul class=\"b-secondary-nav__list\">\n            <li v-for=\"item in items\" :key=\"item.value\">\n                <secondary-nav-item\n                    :label=\"item.label\"\n                    :value=\"item.value\"\n                    :items=\"item.items\"\n                    :error-counter=\"item.errorCounter\"\n                />\n            </li>\n        </ul>\n    </section>\n</template>\n\n<script lang=\"ts\" setup>\n    import { BentoTypography } from '@/components/typography';\n    import { SecondaryNavItem } from '../secondary-nav-item';\n    import { type BentoSecondaryNavItemsItem } from '../../secondary-nav.types';\n\n    defineProps<{\n        /**\n         * The display name of the category\n         */\n        label: string;\n        /**\n         * A list of {@see BentoSecondaryNavItemsItem} that belongs to this category\n         */\n        items: Array<BentoSecondaryNavItemsItem>;\n    }>();\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav}\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav-category.scss\" />\n","<template>\n    <nav class=\"b-secondary-nav\">\n        <bento-dropdown\n            v-if=\"isMobile\"\n            :aria-label=\"t('mobileDropdownAriaLabel')\"\n            :items=\"mobileDropdownItems\"\n            :static-categories=\"hasCategories\"\n            :model-value=\"activeItemValue\"\n            :is-option-disabled=\"isMobileOptionDisabled\"\n            @update:model-value=\"updateActiveItemValue\"\n        >\n            <template #display-value=\"{ label }\">\n                <bento-typography el=\"span\">\n                    {{ label }}\n                </bento-typography>\n            </template>\n            <template #default=\"{ label, data }\">\n                <bento-typography\n                    el=\"div\"\n                    :class=\"{ 'b-secondary-nav__option': true, 'b-secondary-nav__nested-option': !!data?.level }\"\n                >\n                    {{ label }}\n                    <bento-tag\n                        v-if=\"data?.errorCounter\"\n                        class=\"b-secondary-nav__error-counter\"\n                        variant=\"red\"\n                        :label=\"data.errorCounter\"\n                        :aria-label=\"tc('errorCount', data.errorCounter)\"\n                    >\n                        <template #icon>\n                            <cross-circle-fill-icon aria-hidden=\"true\" />\n                        </template>\n                    </bento-tag>\n                </bento-typography>\n            </template>\n        </bento-dropdown>\n        <ul v-else class=\"b-secondary-nav__list\">\n            <li v-for=\"item in items\" :key=\"item.label\">\n                <secondary-nav-category\n                    v-if=\"'items' in item && !('value' in item)\"\n                    :label=\"item.label\"\n                    :items=\"item.items\"\n                />\n                <secondary-nav-item\n                    v-else\n                    :label=\"item.label\"\n                    :value=\"item.value\"\n                    :items=\"item.items\"\n                    :error-counter=\"item.errorCounter\"\n                />\n            </li>\n        </ul>\n    </nav>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, provide, readonly, ref, toRef, watch } from 'vue';\n    import { SecondaryNavItem } from './components/secondary-nav-item';\n    import { SecondaryNavCategory } from './components/secondary-nav-category';\n    import { SECONDARY_NAV_STATE } from './secondary-nav.keys';\n    import {\n        type BentoSecondaryNavItems,\n        type BentoSecondaryNavItemsCategory,\n        type BentoSecondaryNavItemsItem,\n        type BentoSecondaryNavState,\n    } from './secondary-nav.types';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoTag } from '@/components/tag';\n    import CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import { useBreakpoints } from '@vueuse/core';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { type BentoListboxOptionItem, type BentoListboxOptions } from '@/types/listbox';\n    import { BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t, tc } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const breakpoints = useBreakpoints({\n        s: BMediaQuerySMax,\n    });\n\n    const isMobile = breakpoints.smallerOrEqual('s');\n    const props = defineProps<{\n        /**\n         * An array containing all the items on the nav. The array can have either {@see BentoSecondaryNavItemsCategory },\n         * which is used to group different items or {@see BentoSecondaryNavItemsItem } if you don't need to group them.\n         */\n        items: BentoSecondaryNavItems;\n        /**\n         * The value of the selected item.\n         * If nothing is passed, it defaults to the first item value in items.\n         */\n        value?: string;\n        /**\n         * When true, items that contain subitems are also clickable and can be selected.\n         * When false, those items only act as expand/collapse toggles.\n         */\n        allowExpandableItemNavigation?: boolean;\n    }>();\n\n    const emit = defineEmits<{\n        /**\n         * Emmited when the current selected item changes\n         */\n        (e: 'change', category: string): void;\n    }>();\n\n    const isCategory = (item: BentoSecondaryNavItems[number]): item is BentoSecondaryNavItemsCategory =>\n        'items' in item && !('value' in item);\n\n    const mapNestedItems = (items: Array<BentoSecondaryNavItemsItem>, level = 0): BentoListboxOptions =>\n        items.flatMap((item): BentoListboxOptions => {\n            const currentItem: BentoListboxOptionItem = {\n                label: item.label,\n                value: item.value,\n                data: { level, hasSubItems: !!item.items?.length, errorCounter: item.errorCounter },\n            };\n\n            if (item.items?.length) {\n                return [currentItem, ...mapNestedItems(item.items, level + 1)];\n            }\n\n            return [currentItem];\n        });\n\n    const isMobileOptionDisabled = (option: BentoListboxOptionItem): boolean =>\n        !props.allowExpandableItemNavigation && (option.data as { hasSubItems?: boolean })?.hasSubItems;\n\n    const hasCategories = computed(() => props.items.some(item => isCategory(item)));\n    const mobileDropdownItems = computed<BentoListboxOptions>(() => {\n        return props.items.flatMap(item => {\n            if (isCategory(item)) {\n                return [\n                    {\n                        label: item.label,\n                        value: `category-${item.label}`,\n                        items: mapNestedItems(item.items),\n                    } satisfies BentoListboxOptionItem,\n                ];\n            }\n\n            if (item.items?.length) {\n                return mapNestedItems([item]);\n            }\n\n            return [\n                {\n                    label: item.label,\n                    value: item.value,\n                    data: { level: 0, errorCounter: item.errorCounter },\n                } satisfies BentoListboxOptionItem,\n            ];\n        });\n    });\n\n    const flattenNestedItems = (items: Array<BentoSecondaryNavItemsItem>): Array<BentoSecondaryNavItemsItem> =>\n        items.flatMap(item => [item, ...(item.items?.length ? flattenNestedItems(item.items) : [])]);\n\n    const findFirstSelectableNestedItemValue = (items: Array<BentoSecondaryNavItemsItem>): string =>\n        flattenNestedItems(items).find(item => props.allowExpandableItemNavigation || !item.items?.length)?.value ?? '';\n\n    const activeItemValueFallback = computed(() => {\n        if (!props.items.length) {\n            return '';\n        }\n\n        return findFirstSelectableNestedItemValue(\n            props.items.flatMap(item =>\n                isCategory(item) ? flattenNestedItems(item.items) : flattenNestedItems([item])\n            )\n        );\n    });\n\n    const activeItemValue = ref(props.value ?? activeItemValueFallback.value);\n    const updateActiveItemValue = (value: string) => {\n        activeItemValue.value = value;\n        emit('change', value);\n    };\n\n    // The component's state is inject on `secondary-nav-item` to determine the\n    // current active item and to change its value\n    const state: BentoSecondaryNavState = {\n        activeItemValue: readonly(activeItemValue),\n        updateActiveItemValue,\n        allowExpandableItemNavigation: toRef(props, 'allowExpandableItemNavigation'),\n    };\n\n    watch(\n        () => props.value,\n        value => {\n            if (value !== undefined) {\n                activeItemValue.value = value;\n            }\n        }\n    );\n\n    provide(SECONDARY_NAV_STATE, state);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Secondary Nav offers users a structured way to access information.\n     * It also provides a clear hierarchy for users to understand and navigate through various information.\n     *\n     * @example\n     * import { BentoSecondaryNav } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSecondaryNav },\n     *     template: `\n     *          <bento-secondary-nav :value=\"value\" :items=\"items\" />\n     *     `,\n     *     setup() {\n     *         const value = ref(2) // Active item value\n     *         const items: BentoSecondaryNavItemInfo[] = [\n     *              { label: 'Option 1', value: 1 },\n     *              { label: 'Option 2', value: 2 },\n     *         ];\n     *         return { items, value };\n     *     }\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav.scss\" />\n"],"names":["SECONDARY_NAV_STATE","__default__$2","messages$1","tc","useI18n","activeItemValue","updateActiveItemValue","allowExpandableItemNavigation","inject","CONTENT_TRANSITION_NAME","props","__props","isOpen","ref","subItemsId","generateUid","subItemsRef","hasSubItems","computed","isItemSelected","expandleItemIsToggleOnly","contentHeight","useExpandableContentHeight","subItemsMaxHeight","conditionalClasses","emit","__emit","onClick","e","onToggleClick","hasActiveDescendant","items","value","item","hasDescendantErrors","watch","activeValue","__default__$1","__default__","messages","t","isMobile","useBreakpoints","BMediaQuerySMax","isCategory","mapNestedItems","level","currentItem","isMobileOptionDisabled","option","hasCategories","mobileDropdownItems","flattenNestedItems","findFirstSelectableNestedItemValue","activeItemValueFallback","state","readonly","toRef","provide"],"mappings":"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"}

package/dist/chunks/use-expandable-content-height.DmFeas9-.js

@@ -0,0 +1,36 @@
+import { ref as a, watch as u, onUnmounted as s, nextTick as c } from "vue";
+import { o as v } from "./resize.Bqks3WUm.js";
+const h = (o, l) => {
+  const i = a(null);
+  let t = null;
+  const n = () => {
+    c(() => {
+      const e = o.value?.scrollHeight || null;
+      i.value = l.value && e ? `${e}px` : "0";
+    });
+  }, r = () => {
+    t && (t.disconnect(), t = null);
+  };
+  return u(
+    () => o.value,
+    (e) => {
+      r(), e && (t = v(e, () => {
+        o.value === e && n();
+      }));
+    }
+  ), u(
+    l,
+    () => {
+      n();
+    },
+    { immediate: !0 }
+  ), s(() => {
+    r();
+  }), {
+    contentHeight: i
+  };
+};
+export {
+  h as u
+};
+//# sourceMappingURL=use-expandable-content-height.DmFeas9-.js.map

package/dist/chunks/use-expandable-content-height.DmFeas9-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-expandable-content-height.DmFeas9-.js","sources":["../../../vue2/src/composables/use-expandable-content-height/use-expandable-content-height.ts"],"sourcesContent":["import { nextTick, onUnmounted, ref, watch } from 'vue';\nimport { observeSizeOfElement } from '@/utils/ts/resize';\n\n/**\n * Composable function that gets the height of expandable content. Mostly to use with expanding height animations (accordion, card...).\n * Automatically observes content size changes and updates the height accordingly. Cleans up the observer on unmount.\n *\n * @example\n *  <template>\n *      <Transition :name=\"b-height__animation\">\n *          <div v-if=\"isOpen\" :style=\"contentHeight ? { 'max-height': contentHeight } : {}\" >\n *              <div ref=\"contentDiv\">\n *                  <slot />\n *              </div>\n *          </div>\n *      </Transition>\n *  </template>\n *\n *  <script script lang=\"ts\">\n *      import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\n *\n *      const { contentHeight } = useExpandableContentHeight(contentDiv, isOpen);\n *  </script>\n *\n * @param contentRef Reference to the div with the content\n * @param isOpen Reference to the boolean controlling the expanded state\n * @returns The height of the content\n */\nexport const useExpandableContentHeight = (contentRef, isOpen) => {\n    const contentHeight = ref<string | null>(null);\n    let observer: ResizeObserver | null = null;\n\n    const updateContentHeight = () => {\n        nextTick(() => {\n            const maxHeight = contentRef.value?.scrollHeight || null;\n            contentHeight.value = isOpen.value && maxHeight ? `${maxHeight}px` : '0';\n        });\n    };\n\n    const disconnectObserver = () => {\n        if (observer) {\n            observer.disconnect();\n            observer = null;\n        }\n    };\n\n    watch(\n        () => contentRef.value,\n        contentElement => {\n            disconnectObserver();\n\n            if (contentElement) {\n                observer = observeSizeOfElement(contentElement, () => {\n                    if (contentRef.value === contentElement) {\n                        updateContentHeight();\n                    }\n                });\n            }\n        }\n    );\n\n    watch(\n        isOpen,\n        () => {\n            updateContentHeight();\n        },\n        { immediate: true }\n    );\n\n    onUnmounted(() => {\n        disconnectObserver();\n    });\n\n    return {\n        contentHeight,\n    };\n};\n"],"names":["useExpandableContentHeight","contentRef","isOpen","contentHeight","ref","observer","updateContentHeight","nextTick","maxHeight","disconnectObserver","watch","contentElement","observeSizeOfElement","onUnmounted"],"mappings":";;AA4BO,MAAMA,IAA6B,CAACC,GAAYC,MAAW;AAC9D,QAAMC,IAAgBC,EAAmB,IAAI;AAC7C,MAAIC,IAAkC;AAEtC,QAAMC,IAAsB,MAAM;AAC9B,IAAAC,EAAS,MAAM;AACX,YAAMC,IAAYP,EAAW,OAAO,gBAAgB;AACpD,MAAAE,EAAc,QAAQD,EAAO,SAASM,IAAY,GAAGA,CAAS,OAAO;AAAA,IACzE,CAAC;AAAA,EACL,GAEMC,IAAqB,MAAM;AAC7B,IAAIJ,MACAA,EAAS,WAAA,GACTA,IAAW;AAAA,EAEnB;AAEA,SAAAK;AAAA,IACI,MAAMT,EAAW;AAAA,IACjB,CAAAU,MAAkB;AACd,MAAAF,EAAA,GAEIE,MACAN,IAAWO,EAAqBD,GAAgB,MAAM;AAClD,QAAIV,EAAW,UAAUU,KACrBL,EAAA;AAAA,MAER,CAAC;AAAA,IAET;AAAA,EAAA,GAGJI;AAAA,IACIR;AAAA,IACA,MAAM;AACF,MAAAI,EAAA;AAAA,IACJ;AAAA,IACA,EAAE,WAAW,GAAA;AAAA,EAAK,GAGtBO,EAAY,MAAM;AACd,IAAAJ,EAAA;AAAA,EACJ,CAAC,GAEM;AAAA,IACH,eAAAN;AAAA,EAAA;AAER;"}

package/dist/data-grid.js

@@ -1,4 +1,4 @@
-import { B as e, d as o, a as r, b as i, c as n, e as d, f as B, g as l, h as s, i as D } from "./chunks/data-grid.Ca27H24r.js";
+import { B as e, d as o, a as r, b as i, c as n, e as d, f as B, g as l, h as s, i as D } from "./chunks/data-grid.vBDlLHOW.js";
 export {
   e as BentoColumnOverflow,
   o as BentoDataGrid,

package/dist/index.js

@@ -4,15 +4,15 @@ import { u as q } from "./chunks/use-bento-toast-controller.BAoPbtq7.js";
 import { p as v, d as T } from "./chunks/typography.wIM07Hbl.js";
 import { B as $, a as J, b as Q, c as X } from "./chunks/typography.wIM07Hbl.js";
 import { B as te } from "./chunks/action-bar.CWjLoeOU.js";
-import { a as ae, b as ne } from "./chunks/accordion-item.l88yjGPT.js";
+import { a as ae, b as ne } from "./chunks/accordion-item.BMxeTYDy.js";
 import { a as se } from "./chunks/ai-tag.CjrOE5yl.js";
 import { B as Be, a as pe, b as me, c as le } from "./chunks/alert.C8Pe1-OO.js";
 import { a as ue } from "./chunks/anchor-scroller.C3zkcfPH.js";
 import { B as fe } from "./chunks/avatar.DcXyOCS4.js";
 import { B as Te, a as ye, b as xe } from "./chunks/button.Ciflfide.js";
-import { c as he, B as Ee, a as be } from "./chunks/card.ID7LqObu.js";
+import { c as he, B as Ee, a as be } from "./chunks/card.a8QL14dy.js";
 import { B as Me } from "./chunks/dashed-underline.C3lSC1_R.js";
-import { B as ve, d as De, a as Le, b as Oe, c as Ne, e as _e, f as Pe, g as Ae, h as Ge, i as Re } from "./chunks/data-grid.Ca27H24r.js";
+import { B as ve, d as De, a as Le, b as Oe, c as Ne, e as _e, f as Pe, g as Ae, h as Ge, i as Re } from "./chunks/data-grid.vBDlLHOW.js";
 import { B as we } from "./chunks/date-picker.Dnr2HuxA.js";
 import { B as He } from "./chunks/date-picker.types.Ckt7zxGy.js";
 import { B as Ue } from "./chunks/date-range-picker.CuBygd3O.js";
@@ -50,7 +50,7 @@ import { B as Fo, a as Ho, b as Vo, f as Uo, g as Yo, h as jo, c as zo, u as Ko
 import { _ as qo } from "./chunks/modal.vue_vue_type_script_setup_true_lang.CrsIyU7A.js";
 import { B as $o, a as Jo, b as Qo, c as Xo, d as ea, e as ta, f as oa, g as aa } from "./chunks/base-modal.Bn4ZXwv6.js";
 import { B as ra, a as sa } from "./chunks/modal-fullscreen.I5bjqzfd.js";
-import { n as Ba, a as pa, b as ma } from "./chunks/navigation-menu-group.BSGdcUDN.js";
+import { n as Ba, a as pa, b as ma } from "./chunks/navigation-menu-group.BJ9ZsXEn.js";
 import { B as da } from "./chunks/header.Bi3MPZKE.js";
 import { B as ca } from "./chunks/pagination.C5gZxtZY.js";
 import { B as ga } from "./chunks/payment-method.q2yow5VR.js";
@@ -60,7 +60,7 @@ import { p as Ea, B as ba, a as Ia } from "./chunks/promo-banner.kE1-WkzI.js";
 import { B as Ca, a as va, b as Da } from "./chunks/radio-group.XmRPh03c.js";
 import { r as Oa } from "./chunks/rich-text-editor.Cv_Vwt-6.js";
 import { B as _a, a as Pa, b as Aa } from "./chunks/search-bar.5tObtLfW.js";
-import { s as Ra } from "./chunks/secondary-nav.Bhn5bVYI.js";
+import { s as Ra } from "./chunks/secondary-nav.DApIImQ0.js";
 import { B as wa } from "./chunks/segmented-control.CEt2dz4n.js";
 import { B as Ha } from "./chunks/segmented-control.types.BHRLV8KU.js";
 import { B as Ua, s as Ya, a as ja } from "./chunks/selection-card-group.DHXtJpoB.js";

package/dist/navigation-menu.js

@@ -1,4 +1,4 @@
-import { n as o, a as e, b as t } from "./chunks/navigation-menu-group.BSGdcUDN.js";
+import { n as o, a as e, b as t } from "./chunks/navigation-menu-group.BJ9ZsXEn.js";
 export {
   o as BentoNavigationMenu,
   e as BentoNavigationMenuGroup,

package/dist/secondary-nav.js

@@ -1,4 +1,4 @@
-import { s as e } from "./chunks/secondary-nav.Bhn5bVYI.js";
+import { s as e } from "./chunks/secondary-nav.DApIImQ0.js";
 export {
   e as BentoSecondaryNav
 };

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue3",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "contributions": {
     "html": {
       "description-markup": "markdown",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adyen/bento-vue3",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Adyen Bento Vue 3 components",
   "type": "module",
   "main": "dist/index.js",
@@ -48,7 +48,7 @@
     "unified": "11.0.5",
     "uuid": "11.1.1",
     "vue-demi": "0.14.10",
-    "@adyen/bento-design-tokens": "2.0.0"
+    "@adyen/bento-design-tokens": "2.0.1"
   },
   "dependenciesMeta": {
     "@adyen/bento-vue-i18n-demi": {
@@ -114,10 +114,10 @@
     "vue-router": "~4.1",
     "vue-tsc": "3.3.5",
     "zod": "3.25.35",
-    "@adyen/ui-assets-icons-16": "7.9.7",
-    "@adyen/ui-assets-payment-method-icons": "13.0.1",
     "@adyen/bento-core": "0.0.1",
-    "@adyen/bento-vue-i18n-demi": "0.1.0"
+    "@adyen/bento-vue-i18n-demi": "0.1.0",
+    "@adyen/ui-assets-icons-16": "7.9.7",
+    "@adyen/ui-assets-payment-method-icons": "13.0.1"
   },
   "scripts": {
     "build": "pnpm run build:prod",

package/dist/chunks/use-expandable-content-height.Bdd9hQwq.js

@@ -1,34 +0,0 @@
-import { ref as n, watch as i, onUnmounted as r, nextTick as s } from "vue";
-import { o as m } from "./resize.Bqks3WUm.js";
-const h = (e, t) => {
-  const u = n(null);
-  let l = null;
-  const a = () => {
-    s(() => {
-      const o = e.value?.scrollHeight || null;
-      u.value = t.value && o ? `${o}px` : "0";
-    });
-  };
-  return i(
-    () => e.value,
-    () => {
-      !l && e.value && (l = m(e.value, () => {
-        e.value && a();
-      }));
-    }
-  ), i(
-    t,
-    () => {
-      a();
-    },
-    { immediate: !0 }
-  ), r(() => {
-    l && (l.disconnect(), l = null);
-  }), {
-    contentHeight: u
-  };
-};
-export {
-  h as u
-};
-//# sourceMappingURL=use-expandable-content-height.Bdd9hQwq.js.map

package/dist/chunks/use-expandable-content-height.Bdd9hQwq.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-expandable-content-height.Bdd9hQwq.js","sources":["../../../vue2/src/composables/use-expandable-content-height/use-expandable-content-height.ts"],"sourcesContent":["import { nextTick, onUnmounted, ref, watch } from 'vue';\nimport { observeSizeOfElement } from '@/utils/ts/resize';\n\n/**\n * Composable function that gets the height of expandable content. Mostly to use with expanding height animations (accordion, card...).\n * Automatically observes content size changes and updates the height accordingly. Cleans up the observer on unmount.\n *\n * @example\n *  <template>\n *      <Transition :name=\"b-height__animation\">\n *          <div v-if=\"isOpen\" :style=\"contentHeight ? { 'max-height': contentHeight } : {}\" >\n *              <div ref=\"contentDiv\">\n *                  <slot />\n *              </div>\n *          </div>\n *      </Transition>\n *  </template>\n *\n *  <script script lang=\"ts\">\n *      import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\n *\n *      const { contentHeight } = useExpandableContentHeight(contentDiv, isOpen);\n *  </script>\n *\n * @param contentRef Reference to the div with the content\n * @param isOpen Reference to the boolean controlling the expanded state\n * @returns The height of the content\n */\nexport const useExpandableContentHeight = (contentRef, isOpen) => {\n    const contentHeight = ref<string | null>(null);\n    let observer: ResizeObserver | null = null;\n\n    const updateContentHeight = () => {\n        nextTick(() => {\n            const maxHeight = contentRef.value?.scrollHeight || null;\n            contentHeight.value = isOpen.value && maxHeight ? `${maxHeight}px` : '0';\n        });\n    };\n\n    watch(\n        () => contentRef.value,\n        () => {\n            if (!observer && contentRef.value) {\n                observer = observeSizeOfElement(contentRef.value, () => {\n                    if (contentRef.value) {\n                        updateContentHeight();\n                    }\n                });\n            }\n        }\n    );\n\n    watch(\n        isOpen,\n        () => {\n            updateContentHeight();\n        },\n        { immediate: true }\n    );\n\n    onUnmounted(() => {\n        if (observer) {\n            observer.disconnect();\n            observer = null;\n        }\n    });\n\n    return {\n        contentHeight,\n    };\n};\n"],"names":["useExpandableContentHeight","contentRef","isOpen","contentHeight","ref","observer","updateContentHeight","nextTick","maxHeight","watch","observeSizeOfElement","onUnmounted"],"mappings":";;AA4BO,MAAMA,IAA6B,CAACC,GAAYC,MAAW;AAC9D,QAAMC,IAAgBC,EAAmB,IAAI;AAC7C,MAAIC,IAAkC;AAEtC,QAAMC,IAAsB,MAAM;AAC9B,IAAAC,EAAS,MAAM;AACX,YAAMC,IAAYP,EAAW,OAAO,gBAAgB;AACpD,MAAAE,EAAc,QAAQD,EAAO,SAASM,IAAY,GAAGA,CAAS,OAAO;AAAA,IACzE,CAAC;AAAA,EACL;AAEA,SAAAC;AAAA,IACI,MAAMR,EAAW;AAAA,IACjB,MAAM;AACF,MAAI,CAACI,KAAYJ,EAAW,UACxBI,IAAWK,EAAqBT,EAAW,OAAO,MAAM;AACpD,QAAIA,EAAW,SACXK,EAAA;AAAA,MAER,CAAC;AAAA,IAET;AAAA,EAAA,GAGJG;AAAA,IACIP;AAAA,IACA,MAAM;AACF,MAAAI,EAAA;AAAA,IACJ;AAAA,IACA,EAAE,WAAW,GAAA;AAAA,EAAK,GAGtBK,EAAY,MAAM;AACd,IAAIN,MACAA,EAAS,WAAA,GACTA,IAAW;AAAA,EAEnB,CAAC,GAEM;AAAA,IACH,eAAAF;AAAA,EAAA;AAER;"}