@adyen/bento-vue2 2.0.1 → 2.1.0

package/dist/chunks/{scroll-to-section.DhW8SFy0.js → scroll-to-section.CzeBpNj4.js}

@@ -1,7 +1,7 @@
 import { ref as v, watchEffect as I, computed as y, unref as S, watch as D, nextTick as T } from "vue";
 import { a as F, b as M, w as k, t as w, r as A } from "./index.CL3TXc0a.js";
 import { u as b } from "./utils.DWmc2mUI.js";
-import { p as x } from "./typography.D1OZJbEa.js";
+import { p as x } from "./typography.Cd386LC_.js";
 const R = (a, n) => {
   const l = v(n.default?.value ?? -1), { y: o } = F(), { height: u } = M(), t = () => {
     const s = w(a), g = u.value, d = g / 2;
@@ -98,4 +98,4 @@ export {
   V as s,
   K as u
 };
-//# sourceMappingURL=scroll-to-section.DhW8SFy0.js.map
+//# sourceMappingURL=scroll-to-section.CzeBpNj4.js.map

package/dist/chunks/{scroll-to-section.DhW8SFy0.js.map → scroll-to-section.CzeBpNj4.js.map}

@@ -1 +1 @@
-{"version":3,"file":"scroll-to-section.DhW8SFy0.js","sources":["../../src/composables/use-scroll-spy/use-scroll-spy.ts","../../src/composables/use-section-navigation-keyboard/use-section-navigation-keyboard.ts","../../src/utils/ts/scroll-to-section/scroll-to-section.ts"],"sourcesContent":["import { type Ref, ref, watchEffect } from 'vue';\nimport { type MaybeRef, refDebounced, toValue, useWindowScroll, useWindowSize, watchThrottled } from '@vueuse/core';\n\n/**\n * Options for the useScrollSpy composable.\n */\nexport interface UseScrollSpyOptions {\n    /**\n     * The default active index to use when no item is active or initially.\n     */\n    default?: Ref<number>;\n\n    /**\n     * Debounce delay in milliseconds for the active index. No debounce if not provided.\n     */\n    debounce?: number;\n}\n\n/**\n * Composable to spy on scroll position and determine the active item based on visibility.\n *\n * @param items - The list of elements to spy on.\n * @param options - Configuration options for the scroll spy.\n * @returns An object containing the active index.\n */\nexport const useScrollSpy = (items: MaybeRef<Array<Element>>, options: UseScrollSpyOptions) => {\n    const activeIndex = ref(options.default?.value ?? -1);\n\n    const { y: scrollY } = useWindowScroll();\n    const { height: windowHeight } = useWindowSize();\n\n    // Logic to find the \"winner\" when there are multiple items on the same page\n    const calculateActiveIndex = () => {\n        const list = toValue(items);\n        const viewportHeight = windowHeight.value;\n        const midpoint = viewportHeight / 2;\n\n        let winnerIndex = -1;\n        let maxVisibleRatio = 0;\n\n        for (let i = 0; i < list.length; i++) {\n            const item = list[i];\n            const el = item;\n\n            if (!el) {\n                continue;\n            }\n\n            const rect = el.getBoundingClientRect();\n\n            // Constraint 1: Must pass midpoint\n            if (rect.top > midpoint) {\n                continue;\n            }\n\n            // Constraint 2: Must be visible\n            const visibleHeight = Math.min(rect.bottom, viewportHeight) - Math.max(rect.top, 0);\n            if (visibleHeight <= 0) {\n                continue;\n            }\n\n            // Constraint 3: Highest visible % wins\n            const ratio = visibleHeight / rect.height;\n\n            if (ratio > maxVisibleRatio) {\n                maxVisibleRatio = ratio;\n                winnerIndex = i;\n            }\n        }\n\n        // Only update if changed to avoid unnecessary patch triggers\n        if (winnerIndex !== -1 && activeIndex.value !== winnerIndex) {\n            activeIndex.value = winnerIndex;\n        }\n    };\n\n    watchThrottled([scrollY, windowHeight], calculateActiveIndex, { throttle: 100, trailing: true });\n\n    watchEffect(() => {\n        if (toValue(items).length) {\n            calculateActiveIndex();\n        }\n    });\n\n    return {\n        activeIndex: options.debounce ? refDebounced(activeIndex, options.debounce) : activeIndex,\n    };\n};\n","import { computed, nextTick, type Ref, ref, unref, watch } from 'vue';\nimport { unrefElement } from '@/directives/click-outside/utils';\nimport type {\n    UseSectionNavigationKeyboardOptions,\n    UseSectionNavigationKeyboardReturn,\n} from './use-section-navigation-keyboard.types';\nimport { type MaybeRef } from '@/types/maybe-ref';\n\n/**\n * Resolves a navigation ref to a focusable root element.\n * @param target Navigation item component or element ref.\n * @returns Focusable root element when available.\n */\nconst getDefaultFocusableElement = (target: unknown) => {\n    const element = unrefElement(target as Parameters<typeof unrefElement>[0]);\n\n    return element instanceof HTMLElement ? element : null;\n};\n\n/**\n * Provides roving keyboard focus behavior for section navigation controls.\n * @param items Navigation items used to derive enabled indices.\n * @param options Configuration for disabled items, initial index, and focus behavior.\n * @returns Keyboard handlers, item refs, and focus state helpers.\n */\nexport const useSectionNavigationKeyboard = <Item, Target = unknown>(\n    items: MaybeRef<ReadonlyArray<Item>>,\n    options: UseSectionNavigationKeyboardOptions<Item, Target> = {}\n): UseSectionNavigationKeyboardReturn<Target> => {\n    const navigationItemRefs = ref<Array<Target>>([]) as Ref<Array<Target>>;\n    const enabledIndices = computed(() =>\n        unref(items)\n            .map((item, index) => ({ disabled: options.isDisabled?.(item), index }))\n            .filter(({ disabled }) => !disabled)\n            .map(({ index }) => index)\n    );\n\n    /**\n     * Resolves the initial focus index from the configured index or first enabled item.\n     * @returns Initial index for roving focus.\n     */\n    const getInitialIndex = () =>\n        enabledIndices.value.includes(options.initialIndex?.value ?? -1)\n            ? (options.initialIndex?.value as number)\n            : (enabledIndices.value[0] ?? -1);\n    const focusedIndex = ref(getInitialIndex()) as Ref<number>;\n\n    /**\n     * Focuses a navigation item by index.\n     * @param index Index of the item to focus.\n     */\n    const focusItem = (index: number) => {\n        const target = navigationItemRefs.value[index] as Target;\n\n        if (options.focusTarget?.(target)) {\n            return;\n        }\n\n        const element = options.getFocusableElement?.(target) ?? getDefaultFocusableElement(target);\n\n        element?.focus();\n    };\n\n    /**\n     * Focuses the new item after Vue applies the updated tabindex.\n     * @param newIndex Newly focused item index.\n     * @param oldIndex Previously focused item index.\n     */\n    const onFocusedIndexChange = async (newIndex: number, oldIndex: number) => {\n        if (newIndex !== oldIndex) {\n            await nextTick();\n            focusItem(newIndex);\n        }\n    };\n\n    watch(focusedIndex, onFocusedIndexChange);\n\n    /**\n     * Moves focus to the next or previous enabled item.\n     * @param direction Direction to move focus in.\n     */\n    const moveFocus = (direction: 1 | -1) => {\n        const indices = enabledIndices.value;\n        const currentPosition = indices.indexOf(focusedIndex.value);\n        const nextPosition =\n            currentPosition === -1 ? 0 : (currentPosition + direction + indices.length) % indices.length;\n\n        focusedIndex.value = indices[nextPosition] ?? -1;\n    };\n\n    /**\n     * Handles arrow, Home, and End key navigation.\n     * @param e Keyboard event from the navigation container.\n     */\n    const onKeydownNavigation = (e: KeyboardEvent) => {\n        switch (e.key) {\n            case 'ArrowRight':\n            case 'ArrowDown':\n                e.preventDefault();\n                moveFocus(1);\n                break;\n            case 'ArrowLeft':\n            case 'ArrowUp':\n                e.preventDefault();\n                moveFocus(-1);\n                break;\n            case 'Home':\n                e.preventDefault();\n                focusedIndex.value = enabledIndices.value[0] ?? -1;\n                break;\n            case 'End':\n                e.preventDefault();\n                focusedIndex.value = enabledIndices.value[enabledIndices.value.length - 1] ?? -1;\n                break;\n        }\n    };\n\n    /**\n     * Checks whether an item should be in the tab order.\n     * @param index Item index to check.\n     * @returns Whether the item is currently focusable.\n     */\n    const isFocusable = (index: number) => focusedIndex.value === index;\n\n    return {\n        focusedIndex,\n        isFocusable,\n        navigationItemRefs,\n        onKeydownNavigation,\n    };\n};\n","import { unrefElement } from '@/directives/click-outside/utils';\nimport { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\nimport type { ScrollToSectionOptions, ScrollToSectionTarget } from './scroll-to-section.types';\n\n/**\n * Gets the URL fragment href for an element ref target.\n *\n * @param elementRef The element ref used as the section target.\n */\nexport const getElementFragmentHref = (elementRef?: ScrollToSectionTarget) => {\n    const id = unrefElement(elementRef)?.id;\n\n    return id ? `#${id}` : undefined;\n};\n\n/**\n * Scrolls to a section target and optionally updates scroll offset and URL hash.\n *\n * @param elementRef The element ref used as the section target.\n * @param options Scroll behavior options.\n */\nexport const scrollToSection = (elementRef: ScrollToSectionTarget, options: ScrollToSectionOptions = {}) => {\n    const { disabled, scrollOffset, updateHash } = options;\n\n    if (disabled) {\n        return;\n    }\n\n    const el = unrefElement(elementRef);\n\n    if (!el) {\n        printDevelopmentWarning(`[${options.warningPrefix ?? 'bento'}] element ref not found`);\n        return;\n    }\n\n    if (typeof scrollOffset === 'number' && el.style.scrollMarginTop) {\n        el.style.scrollMarginTop = `${scrollOffset}px`;\n    } else if (typeof scrollOffset === 'number') {\n        const currentScrollMargin = window.getComputedStyle(el).scrollMarginTop;\n\n        if (currentScrollMargin === '0px' || currentScrollMargin === '') {\n            el.style.scrollMarginTop = `${scrollOffset}px`;\n        }\n    }\n\n    if (!el.hasAttribute('tabindex')) {\n        el.setAttribute('tabindex', '-1');\n    }\n\n    if (updateHash) {\n        if (!el.id) {\n            printDevelopmentWarning(`[${options.warningPrefix ?? 'bento'}] section target must have an id`);\n        } else {\n            window.history.pushState(null, '', `#${el.id}`);\n        }\n    }\n\n    el.scrollIntoView({\n        behavior: 'smooth',\n        block: 'start',\n        inline: 'nearest',\n    });\n\n    el.focus({ preventScroll: true });\n};\n"],"names":["useScrollSpy","items","options","activeIndex","ref","scrollY","useWindowScroll","windowHeight","useWindowSize","calculateActiveIndex","list","toValue","viewportHeight","midpoint","winnerIndex","maxVisibleRatio","i","el","rect","visibleHeight","ratio","watchThrottled","watchEffect","refDebounced","getDefaultFocusableElement","target","element","unrefElement","useSectionNavigationKeyboard","navigationItemRefs","enabledIndices","computed","unref","item","index","disabled","focusedIndex","focusItem","watch","newIndex","oldIndex","nextTick","moveFocus","direction","indices","currentPosition","nextPosition","getElementFragmentHref","elementRef","id","scrollToSection","scrollOffset","updateHash","printDevelopmentWarning","currentScrollMargin"],"mappings":"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"}
+{"version":3,"file":"scroll-to-section.CzeBpNj4.js","sources":["../../src/composables/use-scroll-spy/use-scroll-spy.ts","../../src/composables/use-section-navigation-keyboard/use-section-navigation-keyboard.ts","../../src/utils/ts/scroll-to-section/scroll-to-section.ts"],"sourcesContent":["import { type Ref, ref, watchEffect } from 'vue';\nimport { type MaybeRef, refDebounced, toValue, useWindowScroll, useWindowSize, watchThrottled } from '@vueuse/core';\n\n/**\n * Options for the useScrollSpy composable.\n */\nexport interface UseScrollSpyOptions {\n    /**\n     * The default active index to use when no item is active or initially.\n     */\n    default?: Ref<number>;\n\n    /**\n     * Debounce delay in milliseconds for the active index. No debounce if not provided.\n     */\n    debounce?: number;\n}\n\n/**\n * Composable to spy on scroll position and determine the active item based on visibility.\n *\n * @param items - The list of elements to spy on.\n * @param options - Configuration options for the scroll spy.\n * @returns An object containing the active index.\n */\nexport const useScrollSpy = (items: MaybeRef<Array<Element>>, options: UseScrollSpyOptions) => {\n    const activeIndex = ref(options.default?.value ?? -1);\n\n    const { y: scrollY } = useWindowScroll();\n    const { height: windowHeight } = useWindowSize();\n\n    // Logic to find the \"winner\" when there are multiple items on the same page\n    const calculateActiveIndex = () => {\n        const list = toValue(items);\n        const viewportHeight = windowHeight.value;\n        const midpoint = viewportHeight / 2;\n\n        let winnerIndex = -1;\n        let maxVisibleRatio = 0;\n\n        for (let i = 0; i < list.length; i++) {\n            const item = list[i];\n            const el = item;\n\n            if (!el) {\n                continue;\n            }\n\n            const rect = el.getBoundingClientRect();\n\n            // Constraint 1: Must pass midpoint\n            if (rect.top > midpoint) {\n                continue;\n            }\n\n            // Constraint 2: Must be visible\n            const visibleHeight = Math.min(rect.bottom, viewportHeight) - Math.max(rect.top, 0);\n            if (visibleHeight <= 0) {\n                continue;\n            }\n\n            // Constraint 3: Highest visible % wins\n            const ratio = visibleHeight / rect.height;\n\n            if (ratio > maxVisibleRatio) {\n                maxVisibleRatio = ratio;\n                winnerIndex = i;\n            }\n        }\n\n        // Only update if changed to avoid unnecessary patch triggers\n        if (winnerIndex !== -1 && activeIndex.value !== winnerIndex) {\n            activeIndex.value = winnerIndex;\n        }\n    };\n\n    watchThrottled([scrollY, windowHeight], calculateActiveIndex, { throttle: 100, trailing: true });\n\n    watchEffect(() => {\n        if (toValue(items).length) {\n            calculateActiveIndex();\n        }\n    });\n\n    return {\n        activeIndex: options.debounce ? refDebounced(activeIndex, options.debounce) : activeIndex,\n    };\n};\n","import { computed, nextTick, type Ref, ref, unref, watch } from 'vue';\nimport { unrefElement } from '@/directives/click-outside/utils';\nimport type {\n    UseSectionNavigationKeyboardOptions,\n    UseSectionNavigationKeyboardReturn,\n} from './use-section-navigation-keyboard.types';\nimport { type MaybeRef } from '@/types/maybe-ref';\n\n/**\n * Resolves a navigation ref to a focusable root element.\n * @param target Navigation item component or element ref.\n * @returns Focusable root element when available.\n */\nconst getDefaultFocusableElement = (target: unknown) => {\n    const element = unrefElement(target as Parameters<typeof unrefElement>[0]);\n\n    return element instanceof HTMLElement ? element : null;\n};\n\n/**\n * Provides roving keyboard focus behavior for section navigation controls.\n * @param items Navigation items used to derive enabled indices.\n * @param options Configuration for disabled items, initial index, and focus behavior.\n * @returns Keyboard handlers, item refs, and focus state helpers.\n */\nexport const useSectionNavigationKeyboard = <Item, Target = unknown>(\n    items: MaybeRef<ReadonlyArray<Item>>,\n    options: UseSectionNavigationKeyboardOptions<Item, Target> = {}\n): UseSectionNavigationKeyboardReturn<Target> => {\n    const navigationItemRefs = ref<Array<Target>>([]) as Ref<Array<Target>>;\n    const enabledIndices = computed(() =>\n        unref(items)\n            .map((item, index) => ({ disabled: options.isDisabled?.(item), index }))\n            .filter(({ disabled }) => !disabled)\n            .map(({ index }) => index)\n    );\n\n    /**\n     * Resolves the initial focus index from the configured index or first enabled item.\n     * @returns Initial index for roving focus.\n     */\n    const getInitialIndex = () =>\n        enabledIndices.value.includes(options.initialIndex?.value ?? -1)\n            ? (options.initialIndex?.value as number)\n            : (enabledIndices.value[0] ?? -1);\n    const focusedIndex = ref(getInitialIndex()) as Ref<number>;\n\n    /**\n     * Focuses a navigation item by index.\n     * @param index Index of the item to focus.\n     */\n    const focusItem = (index: number) => {\n        const target = navigationItemRefs.value[index] as Target;\n\n        if (options.focusTarget?.(target)) {\n            return;\n        }\n\n        const element = options.getFocusableElement?.(target) ?? getDefaultFocusableElement(target);\n\n        element?.focus();\n    };\n\n    /**\n     * Focuses the new item after Vue applies the updated tabindex.\n     * @param newIndex Newly focused item index.\n     * @param oldIndex Previously focused item index.\n     */\n    const onFocusedIndexChange = async (newIndex: number, oldIndex: number) => {\n        if (newIndex !== oldIndex) {\n            await nextTick();\n            focusItem(newIndex);\n        }\n    };\n\n    watch(focusedIndex, onFocusedIndexChange);\n\n    /**\n     * Moves focus to the next or previous enabled item.\n     * @param direction Direction to move focus in.\n     */\n    const moveFocus = (direction: 1 | -1) => {\n        const indices = enabledIndices.value;\n        const currentPosition = indices.indexOf(focusedIndex.value);\n        const nextPosition =\n            currentPosition === -1 ? 0 : (currentPosition + direction + indices.length) % indices.length;\n\n        focusedIndex.value = indices[nextPosition] ?? -1;\n    };\n\n    /**\n     * Handles arrow, Home, and End key navigation.\n     * @param e Keyboard event from the navigation container.\n     */\n    const onKeydownNavigation = (e: KeyboardEvent) => {\n        switch (e.key) {\n            case 'ArrowRight':\n            case 'ArrowDown':\n                e.preventDefault();\n                moveFocus(1);\n                break;\n            case 'ArrowLeft':\n            case 'ArrowUp':\n                e.preventDefault();\n                moveFocus(-1);\n                break;\n            case 'Home':\n                e.preventDefault();\n                focusedIndex.value = enabledIndices.value[0] ?? -1;\n                break;\n            case 'End':\n                e.preventDefault();\n                focusedIndex.value = enabledIndices.value[enabledIndices.value.length - 1] ?? -1;\n                break;\n        }\n    };\n\n    /**\n     * Checks whether an item should be in the tab order.\n     * @param index Item index to check.\n     * @returns Whether the item is currently focusable.\n     */\n    const isFocusable = (index: number) => focusedIndex.value === index;\n\n    return {\n        focusedIndex,\n        isFocusable,\n        navigationItemRefs,\n        onKeydownNavigation,\n    };\n};\n","import { unrefElement } from '@/directives/click-outside/utils';\nimport { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\nimport type { ScrollToSectionOptions, ScrollToSectionTarget } from './scroll-to-section.types';\n\n/**\n * Gets the URL fragment href for an element ref target.\n *\n * @param elementRef The element ref used as the section target.\n */\nexport const getElementFragmentHref = (elementRef?: ScrollToSectionTarget) => {\n    const id = unrefElement(elementRef)?.id;\n\n    return id ? `#${id}` : undefined;\n};\n\n/**\n * Scrolls to a section target and optionally updates scroll offset and URL hash.\n *\n * @param elementRef The element ref used as the section target.\n * @param options Scroll behavior options.\n */\nexport const scrollToSection = (elementRef: ScrollToSectionTarget, options: ScrollToSectionOptions = {}) => {\n    const { disabled, scrollOffset, updateHash } = options;\n\n    if (disabled) {\n        return;\n    }\n\n    const el = unrefElement(elementRef);\n\n    if (!el) {\n        printDevelopmentWarning(`[${options.warningPrefix ?? 'bento'}] element ref not found`);\n        return;\n    }\n\n    if (typeof scrollOffset === 'number' && el.style.scrollMarginTop) {\n        el.style.scrollMarginTop = `${scrollOffset}px`;\n    } else if (typeof scrollOffset === 'number') {\n        const currentScrollMargin = window.getComputedStyle(el).scrollMarginTop;\n\n        if (currentScrollMargin === '0px' || currentScrollMargin === '') {\n            el.style.scrollMarginTop = `${scrollOffset}px`;\n        }\n    }\n\n    if (!el.hasAttribute('tabindex')) {\n        el.setAttribute('tabindex', '-1');\n    }\n\n    if (updateHash) {\n        if (!el.id) {\n            printDevelopmentWarning(`[${options.warningPrefix ?? 'bento'}] section target must have an id`);\n        } else {\n            window.history.pushState(null, '', `#${el.id}`);\n        }\n    }\n\n    el.scrollIntoView({\n        behavior: 'smooth',\n        block: 'start',\n        inline: 'nearest',\n    });\n\n    el.focus({ preventScroll: true });\n};\n"],"names":["useScrollSpy","items","options","activeIndex","ref","scrollY","useWindowScroll","windowHeight","useWindowSize","calculateActiveIndex","list","toValue","viewportHeight","midpoint","winnerIndex","maxVisibleRatio","i","el","rect","visibleHeight","ratio","watchThrottled","watchEffect","refDebounced","getDefaultFocusableElement","target","element","unrefElement","useSectionNavigationKeyboard","navigationItemRefs","enabledIndices","computed","unref","item","index","disabled","focusedIndex","focusItem","watch","newIndex","oldIndex","nextTick","moveFocus","direction","indices","currentPosition","nextPosition","getElementFragmentHref","elementRef","id","scrollToSection","scrollOffset","updateHash","printDevelopmentWarning","currentScrollMargin"],"mappings":"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"}

package/dist/chunks/{search-bar.--4KVNkf.js → search-bar.DrIwlAQj.js}

@@ -1,7 +1,7 @@
-import { defineComponent as m, provide as _, toRef as b, useAttrs as S, ref as o, watch as C } from "vue";
-import { g as v } from "./dropdown.Bnq4kP7k.js";
+import { defineComponent as m, provide as b, toRef as _, useAttrs as S, ref as o, watch as C } from "vue";
+import { g as v } from "./dropdown.CpZQYisR.js";
 import { u as y } from "./index.CPOlyau9.js";
-import { I, B as E } from "./input-field.D912rZS_.js";
+import { I, B as E } from "./input-field.90DWNO1a.js";
 import { S as k } from "./search.Bzm6F8rR.js";
 import { C as T } from "./cross-circle-fill.D3dEmLeQ.js";
 import { n as F } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
@@ -20,10 +20,10 @@ const B = {
   "pt-BR": { clearSearch: "Limpar busca", search: "Busca" },
   "zh-CN": { clearSearch: "清除搜索", search: "搜索" }
 }, P = {
-  i18n: { messages: B }
+  i18n: { messages: B },
+  name: "bento-search-bar"
 }, x = /* @__PURE__ */ m({
   ...P,
-  __name: "search-bar",
   props: {
     inputFieldAriaLabel: null,
     condensed: { type: Boolean, default: !1 },
@@ -36,7 +36,7 @@ const B = {
   emits: ["input", "clear", "escape-pressed", "blur", "focus"],
   setup(r, { expose: a, emit: s }) {
     const e = r, { t: c } = y();
-    _(I, b(e, "hint"));
+    b(I, _(e, "hint"));
     const d = S(), t = o(e.value), n = o();
     C(
       () => e.value,
@@ -85,7 +85,7 @@ var N = function() {
   R,
   !1,
   null,
-  "e7a2bf17"
+  "9cc7774c"
 );
 const j = g.exports;
 export {
@@ -93,4 +93,4 @@ export {
   A as a,
   i as b
 };
-//# sourceMappingURL=search-bar.--4KVNkf.js.map
+//# sourceMappingURL=search-bar.DrIwlAQj.js.map

package/dist/chunks/{search-bar.--4KVNkf.js.map → search-bar.DrIwlAQj.js.map}

@@ -1 +1 @@
-{"version":3,"file":"search-bar.--4KVNkf.js","sources":["../../src/components/search-bar/search-bar.types.ts","../../src/components/search-bar/search-bar.vue"],"sourcesContent":["export enum BentoSearchBarInternalEvent {\n    CLEAR = 'clear',\n    ESCAPE = 'escape-pressed',\n    INPUT = 'input',\n    UPDATE = 'update:search-term',\n}\n\nexport enum BentoSearchBarEvent {\n    CLEAR = 'search-clear',\n    INPUT = 'search-input',\n    UPDATE = 'update:search-term',\n}\n\nexport interface BentoSearchBarItem {\n    label: string;\n    items?: Array<BentoSearchBarItem>;\n}\n\nexport type BentoSearchBarData = Array<BentoSearchBarItem>;\n\nexport interface BentoSearchBarProps {\n    /**\n     * Text that labels an the search bar input element\n     */\n    inputFieldAriaLabel: string;\n\n    /**\n     * Reduces height of the search bar. Default: false\n     */\n    condensed?: boolean;\n\n    /**\n     * Custom debounce time. Default: 300\n     */\n    debounceTime?: number;\n\n    /**\n     * Disables the text input.\n     */\n    disabled?: boolean;\n\n    /**\n     * Text displayed as a hint when the field is not empty\n     */\n    hint?: string;\n\n    /**\n     * Text displayed as the placeholder of the input-field\n     */\n    placeholder?: string;\n\n    /**\n     * Text displayed as the value being searched\n     */\n    value?: string;\n}\n","<template>\n    <div class=\"b-search-bar\">\n        <bento-input-field\n            ref=\"bentoInputField\"\n            v-bind=\"attrs\"\n            :model-value=\"searchTerm\"\n            type=\"search\"\n            :condensed=\"condensed\"\n            :aria-label=\"inputFieldAriaLabel\"\n            :aria-hidden=\"false\"\n            :disabled=\"disabled\"\n            :placeholder=\"placeholder\"\n            @update:model-value=\"onInputEvent\"\n            @focus=\"emit('focus')\"\n            @blur=\"emit('blur')\"\n            @escape-pressed=\"emit(BentoSearchBarInternalEvent.ESCAPE)\"\n        >\n            <template #iconBefore>\n                <search-icon :svg-title=\"t('search')\" aria-hidden=\"true\" />\n            </template>\n\n            <template v-if=\"searchTerm\" #iconAfter>\n                <div\n                    class=\"b-search-bar__clear-search\"\n                    tabindex=\"0\"\n                    data-testid=\"b-search-bar-clear-search-button\"\n                    @click=\"onClearSearch\"\n                    @keypress.enter=\"onClearSearch\"\n                    @keyup.space=\"onClearSearch\"\n                >\n                    <cross-circle-fill-icon :svg-title=\"t('clearSearch')\" />\n                </div>\n            </template>\n        </bento-input-field>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { provide, ref, toRef, useAttrs, watch } from 'vue';\n    import { debounce } from '@/utils/ts/debounce';\n    import { BentoSearchBarInternalEvent, type BentoSearchBarProps } from './search-bar.types';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { INPUT_FIELD_HINT_INJECTION_KEY } from '@/components/input-field/input-field.keys';\n    // eslint-disable-next-line @typescript-eslint/consistent-type-imports\n    import BentoInputField from '@/components/input-field/input-field.vue';\n    import SearchIcon from '@adyen/ui-assets-icons-16/vue/search';\n    import CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  inputFieldAriaLabel: null,\n  condensed: { type: Boolean, default: false },\n  debounceTime: { default: 300 },\n  disabled: { type: Boolean, default: false },\n  hint: { default: '' },\n  placeholder: { default: '' },\n  value: { default: undefined }\n});\n\n    const emit = defineEmits([\"input\", \"clear\", \"escape-pressed\", \"blur\", \"focus\"]);\n\n    provide(INPUT_FIELD_HINT_INJECTION_KEY, toRef(props, 'hint'));\n\n    const attrs = useAttrs();\n    const searchTerm = ref(props.value);\n    const bentoInputField = ref<InstanceType<typeof BentoInputField> | null>();\n\n    watch(\n        () => props.value,\n        () => {\n            searchTerm.value = props.value;\n        },\n        { immediate: true }\n    );\n\n    const onClearSearch = () => {\n        searchTerm.value = '';\n        emit('clear');\n        emit('input', '');\n    };\n\n    const debouncedEmit = debounce(() => {\n        emit('input', searchTerm.value);\n    }, props.debounceTime);\n\n    const onInputEvent = (value: string) => {\n        searchTerm.value = value;\n        debouncedEmit();\n    };\n\n    const focus = () => {\n        // bentoInputField.value?.focusInput();\n        bentoInputField.value.focusInput();\n    };\n\n    // Expose method so that it can be used to focus on the input from outside the component\n    defineExpose({\n        /**\n         * Focus on the input field when called.\n         */\n        focus,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Search functionality to help users find the desired data quicker.\n     * When a user starts typing, the data is dynamically filtered to\n     * only show the relevant results.\n     *\n     * Clearing the search field displays the entire list again.\n     *\n     * @example\n     * import {\n     *     BentoSearchBar,\n     *     BentoSearchBarData,\n     *     useSearchBarFilter\n     * } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSearchBar },\n     *     template: `\n     *          <bento-search-bar\n     *              input-field-aria-label=\"Search bar\"\n     *              v-model=\"searchTerm\"\n     *              @input=\"onInput\"\n     *              @clear=\"onClearSearch\"\n     *          />\n     *          // Render the filtered data\n     *          {{ filteredData }}\n     *     `,\n     *     setup() {\n     *         const searchTerm = ref('');\n     *         const data = ref<BentoSearchBarData>([]);\n     *         const filteredData = useSearchBarFilter(searchTerm, data);\n     *\n     *         consdt onInput = () => {}\n     *         consdt onClearSearch = () => {}\n     *\n     *         return {\n     *             searchTerm,\n     *             filteredData,\n     *             onInput,\n     *             onClearSearch,\n     *         };\n     *     }\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./search-bar.scss\" />\n"],"names":["BentoSearchBarInternalEvent","BentoSearchBarInternalEvent2","BentoSearchBarEvent","BentoSearchBarEvent2","__default__","messages","t","useI18n","provide","INPUT_FIELD_HINT_INJECTION_KEY","toRef","props","attrs","useAttrs","searchTerm","ref","bentoInputField","watch","onClearSearch","emit","debouncedEmit","debounce","onInputEvent","value","focus","expose"],"mappings":";;;;;;;;AAAO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,QAAA,SACAA,EAAA,SAAA,kBACAA,EAAA,QAAA,SACAA,EAAA,SAAA,sBAJQA,IAAAD,KAAA,CAAA,CAAA,GAOLE,IAAA,kBAAAC,OACHA,EAAA,QAAA,gBACAA,EAAA,QAAA,gBACAA,EAAA,SAAA,sBAHQA,IAAAD,KAAA,CAAA,CAAA;;;;;;;;;;;;;GCiJRE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;iBAvGA,EAAA,GAAAC,EAAA,IAAAC,EAAA;AAcA,IAAAC,EAAAC,GAAAC,EAAAC,GAAA,MAAA,CAAA;AAEA,UAAAC,IAAAC,EAAA,GACAC,IAAAC,EAAAJ,EAAA,KAAA,GACAK,IAAAD,EAAA;AAEA,IAAAE;AAAA,MAAA,MAAAN,EAAA;AAAA,MACgB,MAAA;AAER,QAAAG,EAAA,QAAAH,EAAA;AAAA,MAAyB;AAAA,MAC7B,EAAA,WAAA,GAAA;AAAA,IACkB;AAGtB,UAAAO,IAAA,MAAA;AACI,MAAAJ,EAAA,QAAA,IACAK,EAAA,OAAA,GACAA,EAAA,SAAA,EAAA;AAAA,IAAgB,GAGpBC,IAAAC,EAAA,MAAA;AACI,MAAAF,EAAA,SAAAL,EAAA,KAAA;AAAA,IAA8B,GAAAH,EAAA,YAAA,GAGlCW,IAAA,CAAAC,MAAA;AACI,MAAAT,EAAA,QAAAS,GACAH,EAAA;AAAA,IAAc,GAGlBI,IAAA,MAAA;AAEI,MAAAR,EAAA,MAAA,WAAA;AAAA,IAAiC;AAIrC,WAAAS,EAAA;AAAA;AAAA;AAAA;AAAA,MAAa,OAAAD;AAAA,IAIT,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"search-bar.DrIwlAQj.js","sources":["../../src/components/search-bar/search-bar.types.ts","../../src/components/search-bar/search-bar.vue"],"sourcesContent":["export enum BentoSearchBarInternalEvent {\n    CLEAR = 'clear',\n    ESCAPE = 'escape-pressed',\n    INPUT = 'input',\n    UPDATE = 'update:search-term',\n}\n\nexport enum BentoSearchBarEvent {\n    CLEAR = 'search-clear',\n    INPUT = 'search-input',\n    UPDATE = 'update:search-term',\n}\n\nexport interface BentoSearchBarItem {\n    label: string;\n    items?: Array<BentoSearchBarItem>;\n}\n\nexport type BentoSearchBarData = Array<BentoSearchBarItem>;\n\nexport interface BentoSearchBarProps {\n    /**\n     * Text that labels an the search bar input element\n     */\n    inputFieldAriaLabel: string;\n\n    /**\n     * Reduces height of the search bar. Default: false\n     */\n    condensed?: boolean;\n\n    /**\n     * Custom debounce time. Default: 300\n     */\n    debounceTime?: number;\n\n    /**\n     * Disables the text input.\n     */\n    disabled?: boolean;\n\n    /**\n     * Text displayed as a hint when the field is not empty\n     */\n    hint?: string;\n\n    /**\n     * Text displayed as the placeholder of the input-field\n     */\n    placeholder?: string;\n\n    /**\n     * Text displayed as the value being searched\n     */\n    value?: string;\n}\n","<template>\n    <div class=\"b-search-bar\">\n        <bento-input-field\n            ref=\"bentoInputField\"\n            v-bind=\"attrs\"\n            :model-value=\"searchTerm\"\n            type=\"search\"\n            :condensed=\"condensed\"\n            :aria-label=\"inputFieldAriaLabel\"\n            :aria-hidden=\"false\"\n            :disabled=\"disabled\"\n            :placeholder=\"placeholder\"\n            @update:model-value=\"onInputEvent\"\n            @focus=\"emit('focus')\"\n            @blur=\"emit('blur')\"\n            @escape-pressed=\"emit(BentoSearchBarInternalEvent.ESCAPE)\"\n        >\n            <template #iconBefore>\n                <search-icon :svg-title=\"t('search')\" aria-hidden=\"true\" />\n            </template>\n\n            <template v-if=\"searchTerm\" #iconAfter>\n                <div\n                    class=\"b-search-bar__clear-search\"\n                    tabindex=\"0\"\n                    data-testid=\"b-search-bar-clear-search-button\"\n                    @click=\"onClearSearch\"\n                    @keypress.enter=\"onClearSearch\"\n                    @keyup.space=\"onClearSearch\"\n                >\n                    <cross-circle-fill-icon :svg-title=\"t('clearSearch')\" />\n                </div>\n            </template>\n        </bento-input-field>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { provide, ref, toRef, useAttrs, watch } from 'vue';\n    import { debounce } from '@/utils/ts/debounce';\n    import { BentoSearchBarInternalEvent, type BentoSearchBarProps } from './search-bar.types';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { INPUT_FIELD_HINT_INJECTION_KEY } from '@/components/input-field/input-field.keys';\n    // eslint-disable-next-line @typescript-eslint/consistent-type-imports\n    import BentoInputField from '@/components/input-field/input-field.vue';\n    import SearchIcon from '@adyen/ui-assets-icons-16/vue/search';\n    import CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  inputFieldAriaLabel: null,\n  condensed: { type: Boolean, default: false },\n  debounceTime: { default: 300 },\n  disabled: { type: Boolean, default: false },\n  hint: { default: '' },\n  placeholder: { default: '' },\n  value: { default: undefined }\n});\n\n    const emit = defineEmits([\"input\", \"clear\", \"escape-pressed\", \"blur\", \"focus\"]);\n\n    provide(INPUT_FIELD_HINT_INJECTION_KEY, toRef(props, 'hint'));\n\n    const attrs = useAttrs();\n    const searchTerm = ref(props.value);\n    const bentoInputField = ref<InstanceType<typeof BentoInputField> | null>();\n\n    watch(\n        () => props.value,\n        () => {\n            searchTerm.value = props.value;\n        },\n        { immediate: true }\n    );\n\n    const onClearSearch = () => {\n        searchTerm.value = '';\n        emit('clear');\n        emit('input', '');\n    };\n\n    const debouncedEmit = debounce(() => {\n        emit('input', searchTerm.value);\n    }, props.debounceTime);\n\n    const onInputEvent = (value: string) => {\n        searchTerm.value = value;\n        debouncedEmit();\n    };\n\n    const focus = () => {\n        // bentoInputField.value?.focusInput();\n        bentoInputField.value.focusInput();\n    };\n\n    // Expose method so that it can be used to focus on the input from outside the component\n    defineExpose({\n        /**\n         * Focus on the input field when called.\n         */\n        focus,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Search functionality to help users find the desired data quicker.\n     * When a user starts typing, the data is dynamically filtered to\n     * only show the relevant results.\n     *\n     * Clearing the search field displays the entire list again.\n     *\n     * @example\n     * import {\n     *     BentoSearchBar,\n     *     BentoSearchBarData,\n     *     useSearchBarFilter\n     * } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSearchBar },\n     *     template: `\n     *          <bento-search-bar\n     *              input-field-aria-label=\"Search bar\"\n     *              v-model=\"searchTerm\"\n     *              @input=\"onInput\"\n     *              @clear=\"onClearSearch\"\n     *          />\n     *          // Render the filtered data\n     *          {{ filteredData }}\n     *     `,\n     *     setup() {\n     *         const searchTerm = ref('');\n     *         const data = ref<BentoSearchBarData>([]);\n     *         const filteredData = useSearchBarFilter(searchTerm, data);\n     *\n     *         consdt onInput = () => {}\n     *         consdt onClearSearch = () => {}\n     *\n     *         return {\n     *             searchTerm,\n     *             filteredData,\n     *             onInput,\n     *             onClearSearch,\n     *         };\n     *     }\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-search-bar',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./search-bar.scss\" />\n"],"names":["BentoSearchBarInternalEvent","BentoSearchBarInternalEvent2","BentoSearchBarEvent","BentoSearchBarEvent2","__default__","messages","t","useI18n","provide","INPUT_FIELD_HINT_INJECTION_KEY","toRef","props","attrs","useAttrs","searchTerm","ref","bentoInputField","watch","onClearSearch","emit","debouncedEmit","debounce","onInputEvent","value","focus","expose"],"mappings":";;;;;;;;AAAO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,QAAA,SACAA,EAAA,SAAA,kBACAA,EAAA,QAAA,SACAA,EAAA,SAAA,sBAJQA,IAAAD,KAAA,CAAA,CAAA,GAOLE,IAAA,kBAAAC,OACHA,EAAA,QAAA,gBACAA,EAAA,QAAA,gBACAA,EAAA,SAAA,sBAHQA,IAAAD,KAAA,CAAA,CAAA;;;;;;;;;;;;;GCiJRE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;;;;;iBAxGA,EAAA,GAAAC,EAAA,IAAAC,EAAA;AAcA,IAAAC,EAAAC,GAAAC,EAAAC,GAAA,MAAA,CAAA;AAEA,UAAAC,IAAAC,EAAA,GACAC,IAAAC,EAAAJ,EAAA,KAAA,GACAK,IAAAD,EAAA;AAEA,IAAAE;AAAA,MAAA,MAAAN,EAAA;AAAA,MACgB,MAAA;AAER,QAAAG,EAAA,QAAAH,EAAA;AAAA,MAAyB;AAAA,MAC7B,EAAA,WAAA,GAAA;AAAA,IACkB;AAGtB,UAAAO,IAAA,MAAA;AACI,MAAAJ,EAAA,QAAA,IACAK,EAAA,OAAA,GACAA,EAAA,SAAA,EAAA;AAAA,IAAgB,GAGpBC,IAAAC,EAAA,MAAA;AACI,MAAAF,EAAA,SAAAL,EAAA,KAAA;AAAA,IAA8B,GAAAH,EAAA,YAAA,GAGlCW,IAAA,CAAAC,MAAA;AACI,MAAAT,EAAA,QAAAS,GACAH,EAAA;AAAA,IAAc,GAGlBI,IAAA,MAAA;AAEI,MAAAR,EAAA,MAAA,WAAA;AAAA,IAAiC;AAIrC,WAAAS,EAAA;AAAA;AAAA;AAAA;AAAA,MAAa,OAAAD;AAAA,IAIT,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{secondary-nav.CgdV0QwZ.js → secondary-nav.DRs5yAve.js}

@@ -1,12 +1,12 @@
 import { defineComponent as S, inject as $, ref as T, computed as d, watch as D, toRef as F, readonly as L, provide as R } from "vue";
-import { B as V } from "./dropdown.Bnq4kP7k.js";
-import { B as w } from "./typography.D1OZJbEa.js";
-import { B as A } from "./tag.Dz1FQSZb.js";
+import { B as V } from "./dropdown.CpZQYisR.js";
+import { B as w } from "./typography.Cd386LC_.js";
+import { B as A } from "./tag.CgsX8v2m.js";
 import { C as M } from "./cross-circle-fill.D3dEmLeQ.js";
 import { d as P } from "./index.CL3TXc0a.js";
 import { u as O } from "./index.CPOlyau9.js";
 import { a as z } from "./es6.yPcTMnSH.js";
-import { B as U } from "./button.DII5Ifwa.js";
+import { B as U } from "./button.tsTeQRcP.js";
 import { C as H } from "./chevron-down.B_QiVCoO.js";
 import { C as j } from "./chevron-up.YQRo8uKs.js";
 import { g as G } from "./generate-uid.DBWe4g6T.js";
@@ -37,9 +37,9 @@ const k = /* @__PURE__ */ Symbol("secondary nav state"), X = {
   },
   emits: ["click"],
   setup(p, { emit: o }) {
-    const r = p, { tc: e } = O(), { activeItemValue: t, updateActiveItemValue: s, allowExpandableItemNavigation: f } = $(k), m = "b-secondary-nav-item__animation--content", l = T(!1), x = G("secondary-nav-sub-items"), g = T(null), _ = d(() => !!r.items?.length), c = d(() => t.value === r.value), y = d(() => _.value && !f.value), { contentHeight: v } = J(g, l), b = d(() => v.value ? { "max-height": v.value } : {}), I = d(() => ({
+    const r = p, { tc: e } = O(), { activeItemValue: t, updateActiveItemValue: s, allowExpandableItemNavigation: f } = $(k), m = "b-secondary-nav-item__animation--content", l = T(!1), x = G("secondary-nav-sub-items"), g = T(null), v = d(() => !!r.items?.length), c = d(() => t.value === r.value), y = d(() => v.value && !f.value), { contentHeight: _ } = J(g, l), b = d(() => _.value ? { "max-height": _.value } : {}), I = d(() => ({
       "b-secondary-nav-item__option--active": c.value,
-      "b-secondary-nav-item__option--expandable": _.value,
+      "b-secondary-nav-item__option--expandable": v.value,
       "b-secondary-nav-item__option--sub-item": r.isSubItem
     })), h = (u) => {
       o("click", u), s(r.value);
@@ -51,10 +51,10 @@ const k = /* @__PURE__ */ Symbol("secondary nav state"), X = {
     return D(
       [t, () => r.items],
       ([u]) => {
-        _.value && r.items && (n(r.items, u) || i(r.items)) && (l.value = !0);
+        v.value && r.items && (n(r.items, u) || i(r.items)) && (l.value = !0);
       },
       { immediate: !0, deep: !0 }
-    ), { __sfc: !0, tc: e, activeItemValue: t, updateActiveItemValue: s, allowExpandableItemNavigation: f, CONTENT_TRANSITION_NAME: m, props: r, isOpen: l, subItemsId: x, subItemsRef: g, hasSubItems: _, isItemSelected: c, expandleItemIsToggleOnly: y, contentHeight: v, subItemsMaxHeight: b, conditionalClasses: I, emit: o, onClick: h, onToggleClick: a, hasActiveDescendant: n, hasDescendantErrors: i, BentoButton: U, BentoTag: A, BentoTypography: w, ChevronDownIcon: H, ChevronUpIcon: j, CrossCircleFillIcon: M };
+    ), { __sfc: !0, tc: e, activeItemValue: t, updateActiveItemValue: s, allowExpandableItemNavigation: f, CONTENT_TRANSITION_NAME: m, props: r, isOpen: l, subItemsId: x, subItemsRef: g, hasSubItems: v, isItemSelected: c, expandleItemIsToggleOnly: y, contentHeight: _, subItemsMaxHeight: b, conditionalClasses: I, emit: o, onClick: h, onToggleClick: a, hasActiveDescendant: n, hasDescendantErrors: i, BentoButton: U, BentoTag: A, BentoTypography: w, ChevronDownIcon: H, ChevronUpIcon: j, CrossCircleFillIcon: M };
   }
 });
 var Y = function() {
@@ -115,10 +115,10 @@ const ae = te.exports, ne = {
   "pt-BR": { errorCount: "erro | erros", mobileDropdownAriaLabel: "Menu suspenso de opções de navegação" },
   "zh-CN": { errorCount: "错误 | 错误", mobileDropdownAriaLabel: "导航选项下拉菜单" }
 }, se = {
-  i18n: { messages: ne }
+  i18n: { messages: ne },
+  name: "bento-secondary-nav"
 }, le = /* @__PURE__ */ S({
   ...se,
-  __name: "secondary-nav",
   props: {
     items: null,
     value: null,
@@ -135,7 +135,7 @@ const ae = te.exports, ne = {
         data: { level: n, hasSubItems: !!i.items?.length, errorCounter: i.errorCounter }
       };
       return i.items?.length ? [u, ...l(i.items, n + 1)] : [u];
-    }), x = (a) => !r.allowExpandableItemNavigation && a.data?.hasSubItems, g = d(() => r.items.some((a) => m(a))), _ = d(() => r.items.flatMap((a) => m(a) ? [
+    }), x = (a) => !r.allowExpandableItemNavigation && a.data?.hasSubItems, g = d(() => r.items.some((a) => m(a))), v = d(() => r.items.flatMap((a) => m(a) ? [
       {
         label: a.label,
         value: `category-${a.label}`,
@@ -147,11 +147,11 @@ const ae = te.exports, ne = {
         value: a.value,
         data: { level: 0, errorCounter: a.errorCounter }
       }
-    ])), c = (a) => a.flatMap((n) => [n, ...n.items?.length ? c(n.items) : []]), y = (a) => c(a).find((n) => r.allowExpandableItemNavigation || !n.items?.length)?.value ?? "", v = d(() => r.items.length ? y(
+    ])), c = (a) => a.flatMap((n) => [n, ...n.items?.length ? c(n.items) : []]), y = (a) => c(a).find((n) => r.allowExpandableItemNavigation || !n.items?.length)?.value ?? "", _ = d(() => r.items.length ? y(
       r.items.flatMap(
         (a) => m(a) ? c(a.items) : c([a])
       )
-    ) : ""), b = T(r.value ?? v.value), I = (a) => {
+    ) : ""), b = T(r.value ?? _.value), I = (a) => {
       b.value = a, o("change", a);
     }, h = {
       activeItemValue: L(b),
@@ -163,7 +163,7 @@ const ae = te.exports, ne = {
       (a) => {
         a !== void 0 && (b.value = a);
       }
-    ), R(k, h), { __sfc: !0, t: e, tc: t, breakpoints: s, isMobile: f, props: r, emit: o, isCategory: m, mapNestedItems: l, isMobileOptionDisabled: x, hasCategories: g, mobileDropdownItems: _, flattenNestedItems: c, findFirstSelectableNestedItemValue: y, activeItemValueFallback: v, activeItemValue: b, updateActiveItemValue: I, state: h, SecondaryNavItem: E, SecondaryNavCategory: ae, BentoDropdown: V, BentoTypography: w, BentoTag: A, CrossCircleFillIcon: M };
+    ), R(k, h), { __sfc: !0, t: e, tc: t, breakpoints: s, isMobile: f, props: r, emit: o, isCategory: m, mapNestedItems: l, isMobileOptionDisabled: x, hasCategories: g, mobileDropdownItems: v, flattenNestedItems: c, findFirstSelectableNestedItemValue: y, activeItemValueFallback: _, activeItemValue: b, updateActiveItemValue: I, state: h, SecondaryNavItem: E, SecondaryNavCategory: ae, BentoDropdown: V, BentoTypography: w, BentoTag: A, CrossCircleFillIcon: M };
   }
 });
 var ie = function() {
@@ -183,10 +183,10 @@ var ie = function() {
   ue,
   !1,
   null,
-  "face0d1c"
+  "dc49f43a"
 );
 const Te = ce.exports;
 export {
   Te as s
 };
-//# sourceMappingURL=secondary-nav.CgdV0QwZ.js.map
+//# sourceMappingURL=secondary-nav.DRs5yAve.js.map

package/dist/chunks/{secondary-nav.CgdV0QwZ.js.map → secondary-nav.DRs5yAve.js.map}

@@ -1 +1 @@
-{"version":3,"file":"secondary-nav.CgdV0QwZ.js","sources":["../../src/components/secondary-nav/secondary-nav.keys.ts","../../src/components/secondary-nav/components/secondary-nav-item/secondary-nav-item.vue","../../src/components/secondary-nav/components/secondary-nav-category/secondary-nav-category.vue","../../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  label: null,\n  value: null,\n  items: null,\n  isSubItem: { type: Boolean },\n  errorCounter: null\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([\"click\"]);\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  label: null,\n  items: null\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  items: null,\n  value: null,\n  allowExpandableItemNavigation: { type: Boolean }\n});\n\n    const emit = defineEmits([\"change\"]);\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","isOpen","ref","subItemsId","generateUid","subItemsRef","hasSubItems","computed","props","isItemSelected","expandleItemIsToggleOnly","contentHeight","useExpandableContentHeight","subItemsMaxHeight","conditionalClasses","onClick","e","emit","onToggleClick","hasActiveDescendant","items","value","item","hasDescendantErrors","watch","activeValue","__default__$1","__default__","messages","t","breakpoints","useBreakpoints","BMediaQuerySMax","isMobile","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.DRs5yAve.js","sources":["../../src/components/secondary-nav/secondary-nav.keys.ts","../../src/components/secondary-nav/components/secondary-nav-item/secondary-nav-item.vue","../../src/components/secondary-nav/components/secondary-nav-category/secondary-nav-category.vue","../../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  label: null,\n  value: null,\n  items: null,\n  isSubItem: { type: Boolean },\n  errorCounter: null\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([\"click\"]);\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  label: null,\n  items: null\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  items: null,\n  value: null,\n  allowExpandableItemNavigation: { type: Boolean }\n});\n\n    const emit = defineEmits([\"change\"]);\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        name: 'bento-secondary-nav',\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","isOpen","ref","subItemsId","generateUid","subItemsRef","hasSubItems","computed","props","isItemSelected","expandleItemIsToggleOnly","contentHeight","useExpandableContentHeight","subItemsMaxHeight","conditionalClasses","onClick","e","emit","onToggleClick","hasActiveDescendant","items","value","item","hasDescendantErrors","watch","activeValue","__default__$1","__default__","messages","t","breakpoints","useBreakpoints","BMediaQuerySMax","isMobile","isCategory","mapNestedItems","level","currentItem","isMobileOptionDisabled","option","hasCategories","mobileDropdownItems","flattenNestedItems","findFirstSelectableNestedItemValue","activeItemValueFallback","state","readonly","toRef","provide"],"mappings":";;;;;;;;;;;;;;;AAGO,MAAAA,IAAA,uBAAA,qBAAA;;;;;;;;;;;;GC2IHC,IAAA,EAAA,MAAA,EAAA,UAAAC,EAAA,EAAA;;;;;;;;;;;;iBAhEA,EAAA,IAAAC,EAAA,IAAAC,EAAA,GACA,EAAA,iBAAAC,GAAA,uBAAAC,GAAA,+BAAAC,EAAA,IAAAC,EAAAR,CAAA,GACAS,IAAA,4CAUAC,IAAAC,EAAA,EAAA,GACAC,IAAAC,EAAA,yBAAA,GACAC,IAAAH,EAAA,IAAA,GACAI,IAAAC,EAAA,MAAA,CAAA,CAAAC,EAAA,OAAA,MAAA,GACAC,IAAAF,EAAA,MAAAX,EAAA,UAAAY,EAAA,KAAA,GACAE,IAAAH,EAAA,MAAAD,EAAA,SAAA,CAAAR,EAAA,KAAA,GACA,EAAA,eAAAa,EAAA,IAAAC,EAAAP,GAAAJ,CAAA,GACAY,IAAAN,EAAA,MAAAI,EAAA,QAAA,EAAA,cAAAA,EAAA,MAAA,IAAA,CAAA,CAAA,GAEAG,IAAAP,EAAA,OAAA;AAAA,MAA2C,wCAAAE,EAAA;AAAA,MACgB,4CAAAH,EAAA;AAAA,MACC,0CAAAE,EAAA;AAAA,IACR,EAAA,GAKpDO,IAAA,CAAAC,MAAA;AACI,MAAAC,EAAA,SAAAD,CAAA,GACAnB,EAAAW,EAAA,KAAA;AAAA,IAAiC,GAGrCU,IAAA,MAAA;AACI,MAAAjB,EAAA,QAAA,CAAAA,EAAA;AAAA,IAAuB,GAG3BkB,IAAA,CAAAC,GAAAC,MACID,EAAA;AAAA,MAAa,CAAAE,MAAAA,EAAA,UAAAD,MAAAC,EAAA,QAAAH,EAAAG,EAAA,OAAAD,CAAA,IAAA;AAAA,IAC8E,GAI/FE,IAAA,CAAAH,MAAAA,EAAA,KAAA,CAAAE,MAAA,CAAA,CAAAA,EAAA,iBAAAA,EAAA,QAAAC,EAAAD,EAAA,KAAA,IAAA,GAAA;AAGA,WAAAE;AAAA,MAAA,CAAA5B,GAAA,MAAAY,EAAA,KAAA;AAAA,MACuC,CAAA,CAAAiB,CAAA,MAAA;AAE/B,QAAAnB,EAAA,SAAAE,EAAA,UACIW,EAAAX,EAAA,OAAAiB,CAAA,KAAAF,EAAAf,EAAA,KAAA,OACIP,EAAA,QAAA;AAAA,MAER;AAAA,MACJ,EAAA,WAAA,IAAA,MAAA,GAAA;AAAA,IAC8B;;;;;;;;;;;;;;;;;;;;;;;;qBCrGlCyB,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCgLAC,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,GAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;iBArIA,EAAA,GAAAC,GAAA,IAAAnC,EAAA,IAAAC,EAAA,GAEAmC,IAAAC,EAAA;AAAA,MAAmC,GAAAC;AAAA,IAC5B,CAAA,GAGPC,IAAAH,EAAA,eAAA,GAAA,GASAI,IAAA,CAAAZ,MAAA,WAAAA,KAAA,EAAA,WAAAA,IAGAa,IAAA,CAAAf,GAAAgB,IAAA,MAAAhB,EAAA,QAAA,CAAAE,MAAA;AAEQ,YAAAe,IAAA;AAAA,QAA4C,OAAAf,EAAA;AAAA,QAC5B,OAAAA,EAAA;AAAA,QACA,MAAA,EAAA,OAAAc,GAAA,aAAA,CAAA,CAAAd,EAAA,OAAA,QAAA,cAAAA,EAAA,aAAA;AAAA,MACsE;AAGtF,aAAAA,EAAA,OAAA,SACI,CAAAe,GAAA,GAAAF,EAAAb,EAAA,OAAAc,IAAA,CAAA,CAAA,IAGJ,CAAAC,CAAA;AAAA,IAAmB,CAAA,GAG3BC,IAAA,CAAAC,MAAA,CAAA/B,EAAA,iCAAA+B,EAAA,MAAA,aAGAC,IAAAjC,EAAA,MAAAC,EAAA,MAAA,KAAA,CAAAc,MAAAY,EAAAZ,CAAA,CAAA,CAAA,GACAmB,IAAAlC,EAAA,MACIC,EAAA,MAAA,QAAA,CAAAc,MACIY,EAAAZ,CAAA,IACI;AAAA,MAAO;AAAA,QACH,OAAAA,EAAA;AAAA,QACgB,OAAA,YAAAA,EAAA,KAAA;AAAA,QACiB,OAAAa,EAAAb,EAAA,KAAA;AAAA,MACG;AAAA,IACpC,IAIRA,EAAA,OAAA,SACIa,EAAA,CAAAb,CAAA,CAAA,IAGJ;AAAA,MAAO;AAAA,QACH,OAAAA,EAAA;AAAA,QACgB,OAAAA,EAAA;AAAA,QACA,MAAA,EAAA,OAAA,GAAA,cAAAA,EAAA,aAAA;AAAA,MACsC;AAAA,IACtD,CACJ,CACH,GAGLoB,IAAA,CAAAtB,MAAAA,EAAA,QAAA,CAAAE,MAAA,CAAAA,GAAA,GAAAA,EAAA,OAAA,SAAAoB,EAAApB,EAAA,KAAA,IAAA,CAAA,CAAA,CAAA,GAGAqB,IAAA,CAAAvB,MAAAsB,EAAAtB,CAAA,EAAA,KAAA,CAAAE,MAAAd,EAAA,iCAAA,CAAAc,EAAA,OAAA,MAAA,GAAA,SAAA,IAGAsB,IAAArC,EAAA,MACIC,EAAA,MAAA,SAIAmC;AAAA,MAAOnC,EAAA,MAAA;AAAA,QACS,CAAAc,MAAAY,EAAAZ,CAAA,IAAAoB,EAAApB,EAAA,KAAA,IAAAoB,EAAA,CAAApB,CAAA,CAAA;AAAA,MACqE;AAAA,IACjF,IANA,EAOJ,GAGJ1B,IAAAM,EAAAM,EAAA,SAAAoC,EAAA,KAAA,GACA/C,IAAA,CAAAwB,MAAA;AACI,MAAAzB,EAAA,QAAAyB,GACAJ,EAAA,UAAAI,CAAA;AAAA,IAAoB,GAKxBwB,IAAA;AAAA,MAAsC,iBAAAC,EAAAlD,CAAA;AAAA,MACO,uBAAAC;AAAA,MACzC,+BAAAkD,EAAAvC,GAAA,+BAAA;AAAA,IAC2E;AAG/E,WAAAgB;AAAA,MAAA,MAAAhB,EAAA;AAAA,MACgB,CAAAa,MAAA;AAER,QAAAA,MAAA,WACIzB,EAAA,QAAAyB;AAAA,MACJ;AAAA,IACJ,GAGJ2B,EAAAzD,GAAAsD,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{segmented-control.nYpRQTGc.js → segmented-control.CcQoBTfT.js}

@@ -1,7 +1,7 @@
 import { defineComponent as c, ref as i, computed as d, toRef as v, watch as g, onMounted as C } from "vue";
-import { B as h, p as B } from "./typography.D1OZJbEa.js";
+import { B as h, p as B } from "./typography.Cd386LC_.js";
 import { g as y } from "./generate-uid.DBWe4g6T.js";
-import { b as w } from "./tooltip.DFYc5NKM.js";
+import { b as w } from "./tooltip.BOe7LOfD.js";
 import { n as p } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { o as x } from "./resize.Bqks3WUm.js";
 import "../assets/segmented-control.css";
@@ -105,4 +105,4 @@ const U = F.exports;
 export {
   U as B
 };
-//# sourceMappingURL=segmented-control.nYpRQTGc.js.map
+//# sourceMappingURL=segmented-control.CcQoBTfT.js.map

package/dist/chunks/{segmented-control.nYpRQTGc.js.map → segmented-control.CcQoBTfT.js.map}

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.nYpRQTGc.js","sources":["../../src/components/segmented-control/components/segmented-control-button/segmented-control-button.vue","../../src/components/segmented-control/segmented-control.vue"],"sourcesContent":["<template>\n    <div class=\"b-segmented-control-button\" :class=\"conditionalClasses\">\n        <input\n            :id=\"segmentedControlButtonId\"\n            v-bento-tooltip-directive=\"tooltipText\"\n            :aria-checked=\"isChecked\"\n            :aria-label=\"label\"\n            :checked=\"isChecked\"\n            :disabled=\"disabled\"\n            :value=\"value\"\n            type=\"radio\"\n            class=\"b-segmented-control-button__input\"\n            role=\"radio\"\n            @change=\"onClick\"\n        />\n        <label v-if=\"label\" :for=\"segmentedControlButtonId\" class=\"b-segmented-control-button__label-container\">\n            <bento-typography\n                ref=\"segmentedControlButtonLabel\"\n                class=\"b-segmented-control-button__label\"\n                el=\"span\"\n                variant=\"body\"\n                stronger\n            >\n                {{ label }}\n            </bento-typography>\n        </label>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, type ComputedRef, ref } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { generateUid } from '@/utils/ts/generate-uid';\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives';\n\n    const props = defineProps({\n  disabled: { type: Boolean, default: false },\n  fullWidth: { type: Boolean, default: false },\n  label: null,\n  modelValue: { default: null },\n  tooltipText: { default: undefined },\n  truncate: { type: Boolean, default: false },\n  value: null,\n  wrap: { type: Boolean, default: false }\n});\n\n    const emit = defineEmits([\"update:model-value\"]);\n\n    const segmentedControlButtonLabel = ref();\n    const segmentedControlButtonId = generateUid('segmented-control-button');\n    const isChecked: ComputedRef<boolean> = computed(() => props.value === props.modelValue);\n    const conditionalClasses = computed(() => ({\n        'b-segmented-control-button--hug-content': !props.fullWidth,\n        'b-segmented-control-button--full-width': props.fullWidth,\n        'b-segmented-control-button--truncate': props.truncate,\n        'b-segmented-control-button--wrap': props.wrap && !props.truncate,\n    }));\n    const onClick = () => {\n        if (!props.disabled) {\n            emit('update:model-value', props.value);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Internal component to be used within the BentoSegmentedControl component only\n     */\n    export default {\n        name: 'bento-segmented-control-button',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./segmented-control-button.scss\" />\n","<template>\n    <div ref=\"segmentedControlRef\" role=\"group\" class=\"b-segmented-control\" :class=\"conditionalClasses\">\n        <segmented-control-button\n            v-for=\"(item, index) in computedItems\"\n            ref=\"segmentedControlButtonRef\"\n            :key=\"`segmented-control-item-${index}-${item.label}`\"\n            class=\"b-segmented-control__item\"\n            :label=\"item.label\"\n            :value=\"item.value\"\n            :disabled=\"item.disabled\"\n            :truncate=\"truncate\"\n            :wrap=\"wrap\"\n            :full-width=\"fullWidth\"\n            :model-value=\"inputValue\"\n            :tooltip-text=\"item.tooltipText\"\n            @update:model-value=\"onInput\"\n        />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, ref, toRef, watch } from 'vue';\n    import SegmentedControlButton from './components/segmented-control-button/segmented-control-button.vue';\n    import { type BentoSegmentedControlProps, type BentoSegmentedControlValue } from './segmented-control.types';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n\n    const emit = defineEmits([\"update:model-value\", \"input\"]);\n\n    const props = defineProps({\n  fullWidth: { type: Boolean, default: false },\n  items: null,\n  modelValue: { default: null },\n  wrap: { type: Boolean, default: false }\n});\n\n    const inputValue = toRef(props, 'modelValue');\n\n    const segmentedControlRef = ref();\n    const segmentedControlButtonRef = ref();\n    const hasEllipsis = ref();\n\n    const truncate = computed(() => !props.wrap);\n\n    watch(\n        () => props.items,\n        () => {\n            if (props.items.length > 5) {\n                printDevelopmentWarning(\n                    'Do not use when you need to provide more than 5 segments at a time. If you need to provide more options, use a dropdown component.'\n                );\n            }\n        },\n        { immediate: true }\n    );\n\n    onMounted(() => {\n        observeSizeOfElement(segmentedControlRef.value, () => {\n            if (segmentedControlRef.value) {\n                hasEllipsis.value = segmentedControlButtonRef?.value?.map(\n                    el =>\n                        el.$refs.segmentedControlButtonLabel.$el.offsetWidth <\n                        el.$refs.segmentedControlButtonLabel.$el.scrollWidth\n                );\n            }\n        });\n    });\n\n    const computedItems = computed(() =>\n        props.items.map((el, index) => ({\n            ...el,\n            tooltipText: truncate.value && hasEllipsis?.value?.[index] ? el.label : undefined,\n        }))\n    );\n\n    const onInput = value => {\n        emit('update:model-value', value);\n        emit('input', value);\n    };\n\n    const conditionalClasses = computed(() => ({\n        'b-segmented-control--hug': !props.fullWidth,\n        'b-segmented-control--full-width': props.fullWidth,\n        'b-segmented-control--truncate': truncate.value,\n        'b-segmented-control--wrap': props.wrap,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * @example\n     * import { BentoSegmentedControl } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSegmentedControl },\n     *     template: `\n     *          <bento-segmented-control\n     *              :items=\"[{ label: 'Segment 1', value: 1 }, { label: 'Segment 2', value: 2 }, { label: 'Segment 3', value: 3, disabled: true }]\"\n     *              :model-value=\"1\"\n     *              @update:model-value=\"yourUpdateHandler\"\n     *          />\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-segmented-control',\n        model: { prop: 'modelValue' },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./segmented-control.scss\" />\n"],"names":["__default__$1","segmentedControlButtonLabel","ref","segmentedControlButtonId","generateUid","isChecked","computed","props","conditionalClasses","emit","__default__","inputValue","toRef","segmentedControlRef","segmentedControlButtonRef","hasEllipsis","truncate","watch","printDevelopmentWarning","onMounted","observeSizeOfElement","el","computedItems","index","onInput","value"],"mappings":";;;;;;;AAoEI,MAAAA,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;iBAtBAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,0BAAA,GACAC,IAAAC,EAAA,MAAAC,EAAA,UAAAA,EAAA,UAAA,GACAC,IAAAF,EAAA,OAAA;AAAA,MAA2C,2CAAA,CAAAC,EAAA;AAAA,MACW,0CAAAA,EAAA;AAAA,MACF,wCAAAA,EAAA;AAAA,MACF,oCAAAA,EAAA,QAAA,CAAAA,EAAA;AAAA,IACW,EAAA;sJAE7D,MAAA;AACI,MAAAA,EAAA,YACIE,EAAA,sBAAAF,EAAA,KAAA;AAAA,IACJ;;;;;;;;;;;;;;qBC4CJG,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,OAAA,EAAA,MAAA,aAAA;AAEV;;;;;;;;;;iBAvEAC,IAAAC,EAAAL,GAAA,YAAA,GAEAM,IAAAX,EAAA,GACAY,IAAAZ,EAAA,GACAa,IAAAb,EAAA,GAEAc,IAAAV,EAAA,MAAA,CAAAC,EAAA,IAAA;AAEA,IAAAU;AAAA,MAAA,MAAAV,EAAA;AAAA,MACgB,MAAA;AAER,QAAAA,EAAA,MAAA,SAAA,KACIW;AAAA,UAAA;AAAA,QACI;AAAA,MAER;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB,GAGtBC,EAAA,MAAA;AACI,MAAAC,EAAAP,EAAA,OAAA,MAAA;AACI,QAAAA,EAAA,UACIE,EAAA,QAAAD,GAAA,OAAA;AAAA,UAAsD,CAAAO,MAAAA,EAAA,MAAA,4BAAA,IAAA,cAAAA,EAAA,MAAA,4BAAA,IAAA;AAAA,QAGL;AAAA,MAErD,CAAA;AAAA,IACH,CAAA;AAGL,UAAAC,IAAAhB;AAAA,MAAsB,MAAAC,EAAA,MAAA,IAAA,CAAAc,GAAAE,OAAA;AAAA,QACc,GAAAF;AAAA,QACzB,aAAAL,EAAA,SAAAD,GAAA,QAAAQ,CAAA,IAAAF,EAAA,QAAA;AAAA,MACqE,EAAA;AAAA,IAC1E,GAGNG,IAAA,CAAAC,MAAA;AACI,MAAAhB,EAAA,sBAAAgB,CAAA,GACAhB,EAAA,SAAAgB,CAAA;AAAA,IAAmB,GAGvBjB,IAAAF,EAAA,OAAA;AAAA,MAA2C,4BAAA,CAAAC,EAAA;AAAA,MACJ,mCAAAA,EAAA;AAAA,MACM,iCAAAS,EAAA;AAAA,MACC,6BAAAT,EAAA;AAAA,IACP,EAAA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"segmented-control.CcQoBTfT.js","sources":["../../src/components/segmented-control/components/segmented-control-button/segmented-control-button.vue","../../src/components/segmented-control/segmented-control.vue"],"sourcesContent":["<template>\n    <div class=\"b-segmented-control-button\" :class=\"conditionalClasses\">\n        <input\n            :id=\"segmentedControlButtonId\"\n            v-bento-tooltip-directive=\"tooltipText\"\n            :aria-checked=\"isChecked\"\n            :aria-label=\"label\"\n            :checked=\"isChecked\"\n            :disabled=\"disabled\"\n            :value=\"value\"\n            type=\"radio\"\n            class=\"b-segmented-control-button__input\"\n            role=\"radio\"\n            @change=\"onClick\"\n        />\n        <label v-if=\"label\" :for=\"segmentedControlButtonId\" class=\"b-segmented-control-button__label-container\">\n            <bento-typography\n                ref=\"segmentedControlButtonLabel\"\n                class=\"b-segmented-control-button__label\"\n                el=\"span\"\n                variant=\"body\"\n                stronger\n            >\n                {{ label }}\n            </bento-typography>\n        </label>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, type ComputedRef, ref } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { generateUid } from '@/utils/ts/generate-uid';\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives';\n\n    const props = defineProps({\n  disabled: { type: Boolean, default: false },\n  fullWidth: { type: Boolean, default: false },\n  label: null,\n  modelValue: { default: null },\n  tooltipText: { default: undefined },\n  truncate: { type: Boolean, default: false },\n  value: null,\n  wrap: { type: Boolean, default: false }\n});\n\n    const emit = defineEmits([\"update:model-value\"]);\n\n    const segmentedControlButtonLabel = ref();\n    const segmentedControlButtonId = generateUid('segmented-control-button');\n    const isChecked: ComputedRef<boolean> = computed(() => props.value === props.modelValue);\n    const conditionalClasses = computed(() => ({\n        'b-segmented-control-button--hug-content': !props.fullWidth,\n        'b-segmented-control-button--full-width': props.fullWidth,\n        'b-segmented-control-button--truncate': props.truncate,\n        'b-segmented-control-button--wrap': props.wrap && !props.truncate,\n    }));\n    const onClick = () => {\n        if (!props.disabled) {\n            emit('update:model-value', props.value);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Internal component to be used within the BentoSegmentedControl component only\n     */\n    export default {\n        name: 'bento-segmented-control-button',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./segmented-control-button.scss\" />\n","<template>\n    <div ref=\"segmentedControlRef\" role=\"group\" class=\"b-segmented-control\" :class=\"conditionalClasses\">\n        <segmented-control-button\n            v-for=\"(item, index) in computedItems\"\n            ref=\"segmentedControlButtonRef\"\n            :key=\"`segmented-control-item-${index}-${item.label}`\"\n            class=\"b-segmented-control__item\"\n            :label=\"item.label\"\n            :value=\"item.value\"\n            :disabled=\"item.disabled\"\n            :truncate=\"truncate\"\n            :wrap=\"wrap\"\n            :full-width=\"fullWidth\"\n            :model-value=\"inputValue\"\n            :tooltip-text=\"item.tooltipText\"\n            @update:model-value=\"onInput\"\n        />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, ref, toRef, watch } from 'vue';\n    import SegmentedControlButton from './components/segmented-control-button/segmented-control-button.vue';\n    import { type BentoSegmentedControlProps, type BentoSegmentedControlValue } from './segmented-control.types';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n\n    const emit = defineEmits([\"update:model-value\", \"input\"]);\n\n    const props = defineProps({\n  fullWidth: { type: Boolean, default: false },\n  items: null,\n  modelValue: { default: null },\n  wrap: { type: Boolean, default: false }\n});\n\n    const inputValue = toRef(props, 'modelValue');\n\n    const segmentedControlRef = ref();\n    const segmentedControlButtonRef = ref();\n    const hasEllipsis = ref();\n\n    const truncate = computed(() => !props.wrap);\n\n    watch(\n        () => props.items,\n        () => {\n            if (props.items.length > 5) {\n                printDevelopmentWarning(\n                    'Do not use when you need to provide more than 5 segments at a time. If you need to provide more options, use a dropdown component.'\n                );\n            }\n        },\n        { immediate: true }\n    );\n\n    onMounted(() => {\n        observeSizeOfElement(segmentedControlRef.value, () => {\n            if (segmentedControlRef.value) {\n                hasEllipsis.value = segmentedControlButtonRef?.value?.map(\n                    el =>\n                        el.$refs.segmentedControlButtonLabel.$el.offsetWidth <\n                        el.$refs.segmentedControlButtonLabel.$el.scrollWidth\n                );\n            }\n        });\n    });\n\n    const computedItems = computed(() =>\n        props.items.map((el, index) => ({\n            ...el,\n            tooltipText: truncate.value && hasEllipsis?.value?.[index] ? el.label : undefined,\n        }))\n    );\n\n    const onInput = value => {\n        emit('update:model-value', value);\n        emit('input', value);\n    };\n\n    const conditionalClasses = computed(() => ({\n        'b-segmented-control--hug': !props.fullWidth,\n        'b-segmented-control--full-width': props.fullWidth,\n        'b-segmented-control--truncate': truncate.value,\n        'b-segmented-control--wrap': props.wrap,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * @example\n     * import { BentoSegmentedControl } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSegmentedControl },\n     *     template: `\n     *          <bento-segmented-control\n     *              :items=\"[{ label: 'Segment 1', value: 1 }, { label: 'Segment 2', value: 2 }, { label: 'Segment 3', value: 3, disabled: true }]\"\n     *              :model-value=\"1\"\n     *              @update:model-value=\"yourUpdateHandler\"\n     *          />\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-segmented-control',\n        model: { prop: 'modelValue' },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./segmented-control.scss\" />\n"],"names":["__default__$1","segmentedControlButtonLabel","ref","segmentedControlButtonId","generateUid","isChecked","computed","props","conditionalClasses","emit","__default__","inputValue","toRef","segmentedControlRef","segmentedControlButtonRef","hasEllipsis","truncate","watch","printDevelopmentWarning","onMounted","observeSizeOfElement","el","computedItems","index","onInput","value"],"mappings":";;;;;;;AAoEI,MAAAA,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;iBAtBAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,0BAAA,GACAC,IAAAC,EAAA,MAAAC,EAAA,UAAAA,EAAA,UAAA,GACAC,IAAAF,EAAA,OAAA;AAAA,MAA2C,2CAAA,CAAAC,EAAA;AAAA,MACW,0CAAAA,EAAA;AAAA,MACF,wCAAAA,EAAA;AAAA,MACF,oCAAAA,EAAA,QAAA,CAAAA,EAAA;AAAA,IACW,EAAA;sJAE7D,MAAA;AACI,MAAAA,EAAA,YACIE,EAAA,sBAAAF,EAAA,KAAA;AAAA,IACJ;;;;;;;;;;;;;;qBC4CJG,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,OAAA,EAAA,MAAA,aAAA;AAEV;;;;;;;;;;iBAvEAC,IAAAC,EAAAL,GAAA,YAAA,GAEAM,IAAAX,EAAA,GACAY,IAAAZ,EAAA,GACAa,IAAAb,EAAA,GAEAc,IAAAV,EAAA,MAAA,CAAAC,EAAA,IAAA;AAEA,IAAAU;AAAA,MAAA,MAAAV,EAAA;AAAA,MACgB,MAAA;AAER,QAAAA,EAAA,MAAA,SAAA,KACIW;AAAA,UAAA;AAAA,QACI;AAAA,MAER;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB,GAGtBC,EAAA,MAAA;AACI,MAAAC,EAAAP,EAAA,OAAA,MAAA;AACI,QAAAA,EAAA,UACIE,EAAA,QAAAD,GAAA,OAAA;AAAA,UAAsD,CAAAO,MAAAA,EAAA,MAAA,4BAAA,IAAA,cAAAA,EAAA,MAAA,4BAAA,IAAA;AAAA,QAGL;AAAA,MAErD,CAAA;AAAA,IACH,CAAA;AAGL,UAAAC,IAAAhB;AAAA,MAAsB,MAAAC,EAAA,MAAA,IAAA,CAAAc,GAAAE,OAAA;AAAA,QACc,GAAAF;AAAA,QACzB,aAAAL,EAAA,SAAAD,GAAA,QAAAQ,CAAA,IAAAF,EAAA,QAAA;AAAA,MACqE,EAAA;AAAA,IAC1E,GAGNG,IAAA,CAAAC,MAAA;AACI,MAAAhB,EAAA,sBAAAgB,CAAA,GACAhB,EAAA,SAAAgB,CAAA;AAAA,IAAmB,GAGvBjB,IAAAF,EAAA,OAAA;AAAA,MAA2C,4BAAA,CAAAC,EAAA;AAAA,MACJ,mCAAAA,EAAA;AAAA,MACM,iCAAAS,EAAA;AAAA,MACC,6BAAAT,EAAA;AAAA,IACP,EAAA;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/segmented-control.types.BHRLV8KU.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.types.BHRLV8KU.js","sources":["../../src/components/segmented-control/segmented-control.types.ts"],"sourcesContent":["export type BentoSegmentedControlValue = string | number;\nexport interface BentoSegmentedControlProps {\n    /**\n     * If set to true, renders the component full width.\n     */\n    fullWidth?: boolean;\n\n    /**\n     * Items that will populate the segmented control.\n     */\n    items: Array<BentoSegmentedControlItem>;\n\n    /**\n     * Determines the selected value of the group. Corresponds to the BentoSegmentedControlItem's value.\n     */\n    modelValue?: BentoSegmentedControlValue;\n\n    /**\n     * If set to true, wraps the items in the segmented control to show their content whenever these don't fit in the available space anymore.\n     */\n    wrap?: boolean;\n}\n\nexport interface BentoSegmentedControlItem {\n    label: string;\n    value: string | number;\n    disabled?: boolean;\n}\n\n/**\n * @deprecated Since v2.0.0. Use `update:model-value` or `v-model` instead.\n */\nexport enum BentoSegmentedControlEvent {\n    UPDATE = 'update:model-value',\n}\n"],"names":["BentoSegmentedControlEvent"],"mappings":"AAgCO,IAAKA,sBAAAA,OACRA,EAAA,SAAS,sBADDA,IAAAA,KAAA,CAAA,CAAA;"}
+{"version":3,"file":"segmented-control.types.BHRLV8KU.js","sources":["../../src/components/segmented-control/segmented-control.types.ts"],"sourcesContent":["export type BentoSegmentedControlValue = string | number;\nexport interface BentoSegmentedControlProps {\n    /**\n     * If set to true, renders the component full width.\n     */\n    fullWidth?: boolean;\n\n    /**\n     * Items that will populate the segmented control.\n     */\n    items: Array<BentoSegmentedControlItem>;\n\n    /**\n     * Determines the selected value of the group. Corresponds to the BentoSegmentedControlItem's value.\n     */\n    modelValue?: BentoSegmentedControlValue;\n\n    /**\n     * If set to true, wraps the items in the segmented control to show their content whenever these don't fit in the available space anymore.\n     */\n    wrap?: boolean;\n}\n\nexport interface BentoSegmentedControlItem {\n    label: string;\n    value: string | number;\n    disabled?: boolean;\n}\n\n/**\n * @deprecated Since v3.0.0. Use `update:model-value` or `v-model` instead.\n */\nexport enum BentoSegmentedControlEvent {\n    UPDATE = 'update:model-value',\n}\n"],"names":["BentoSegmentedControlEvent"],"mappings":"AAgCO,IAAKA,sBAAAA,OACRA,EAAA,SAAS,sBADDA,IAAAA,KAAA,CAAA,CAAA;"}