@adyen/bento-vue2 1.102.0 → 1.103.0

package/dist/chunks/scroll-to-section.DhW8SFy0.js

@@ -0,0 +1,101 @@
+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";
+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;
+    let f = -1, m = 0;
+    for (let e = 0; e < s.length; e++) {
+      const r = s[e];
+      if (!r)
+        continue;
+      const c = r.getBoundingClientRect();
+      if (c.top > d)
+        continue;
+      const h = Math.min(c.bottom, g) - Math.max(c.top, 0);
+      if (h <= 0)
+        continue;
+      const p = h / c.height;
+      p > m && (m = p, f = e);
+    }
+    f !== -1 && l.value !== f && (l.value = f);
+  };
+  return k([o, u], t, { throttle: 100, trailing: !0 }), I(() => {
+    w(a).length && t();
+  }), {
+    activeIndex: n.debounce ? A(l, n.debounce) : l
+  };
+}, E = (a) => {
+  const n = b(a);
+  return n instanceof HTMLElement ? n : null;
+}, K = (a, n = {}) => {
+  const l = v([]), o = y(
+    () => S(a).map((e, i) => ({ disabled: n.isDisabled?.(e), index: i })).filter(({ disabled: e }) => !e).map(({ index: e }) => e)
+  ), t = v(o.value.includes(n.initialIndex?.value ?? -1) ? n.initialIndex?.value : o.value[0] ?? -1), s = (e) => {
+    const i = l.value[e];
+    if (n.focusTarget?.(i))
+      return;
+    (n.getFocusableElement?.(i) ?? E(i))?.focus();
+  };
+  D(t, async (e, i) => {
+    e !== i && (await T(), s(e));
+  });
+  const d = (e) => {
+    const i = o.value, r = i.indexOf(t.value), c = r === -1 ? 0 : (r + e + i.length) % i.length;
+    t.value = i[c] ?? -1;
+  };
+  return {
+    focusedIndex: t,
+    isFocusable: (e) => t.value === e,
+    navigationItemRefs: l,
+    onKeydownNavigation: (e) => {
+      switch (e.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          e.preventDefault(), d(1);
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          e.preventDefault(), d(-1);
+          break;
+        case "Home":
+          e.preventDefault(), t.value = o.value[0] ?? -1;
+          break;
+        case "End":
+          e.preventDefault(), t.value = o.value[o.value.length - 1] ?? -1;
+          break;
+      }
+    }
+  };
+}, N = (a) => {
+  const n = b(a)?.id;
+  return n ? `#${n}` : void 0;
+}, V = (a, n = {}) => {
+  const { disabled: l, scrollOffset: o, updateHash: u } = n;
+  if (l)
+    return;
+  const t = b(a);
+  if (!t) {
+    x(`[${n.warningPrefix ?? "bento"}] element ref not found`);
+    return;
+  }
+  if (typeof o == "number" && t.style.scrollMarginTop)
+    t.style.scrollMarginTop = `${o}px`;
+  else if (typeof o == "number") {
+    const s = window.getComputedStyle(t).scrollMarginTop;
+    (s === "0px" || s === "") && (t.style.scrollMarginTop = `${o}px`);
+  }
+  t.hasAttribute("tabindex") || t.setAttribute("tabindex", "-1"), u && (t.id ? window.history.pushState(null, "", `#${t.id}`) : x(`[${n.warningPrefix ?? "bento"}] section target must have an id`)), t.scrollIntoView({
+    behavior: "smooth",
+    block: "start",
+    inline: "nearest"
+  }), t.focus({ preventScroll: !0 });
+};
+export {
+  R as a,
+  N as g,
+  V as s,
+  K as u
+};
+//# sourceMappingURL=scroll-to-section.DhW8SFy0.js.map

package/dist/chunks/scroll-to-section.DhW8SFy0.js.map

@@ -0,0 +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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"}

package/dist/chunks/{search-bar.8iDkgmjw.js → search-bar.CRfYCmkl.js}

@@ -1,57 +1,24 @@
 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.DIqgVVXB.js";
-import { u as y } from "./index.B6WW_F-J.js";
-import { I, B as E } from "./input-field.BEV5lhwO.js";
+import { g as v } from "./dropdown.Ce2P9MZ-.js";
+import { u as y } from "./index.CPOlyau9.js";
+import { I, B as E } from "./input-field.BTt1ORWU.js";
 import { S as k } from "./search.D53Ia3rC.js";
 import { C as T } from "./cross-circle-fill.DTDtgLMf.js";
 import { n as F } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/search-bar.css";
 var i = /* @__PURE__ */ ((r) => (r.CLEAR = "clear", r.ESCAPE = "escape-pressed", r.INPUT = "input", r.UPDATE = "update:search-term", r))(i || {}), A = /* @__PURE__ */ ((r) => (r.CLEAR = "search-clear", r.INPUT = "search-input", r.UPDATE = "update:search-term", r))(A || {});
 const B = {
-  "de-DE": {
-    clearSearch: "Suche löschen",
-    search: "Suche"
-  },
-  "en-GB": {
-    clearSearch: "Clear search",
-    search: "Search"
-  },
-  "en-US": {
-    clearSearch: "Clear search",
-    search: "Search"
-  },
-  "es-419": {
-    clearSearch: "Borrar búsqueda",
-    search: "Buscar"
-  },
-  "es-ES": {
-    clearSearch: "Borrar búsqueda",
-    search: "Buscar en"
-  },
-  "es-MX": {
-    clearSearch: "Borrar búsqueda",
-    search: "Buscar"
-  },
-  "fr-FR": {
-    clearSearch: "Effacer la recherche",
-    search: "Recherche"
-  },
-  "it-IT": {
-    clearSearch: "Cancella ricerca",
-    search: "Cerca"
-  },
-  "ja-JP": {
-    clearSearch: "検索をクリア",
-    search: "検索"
-  },
-  "pt-BR": {
-    clearSearch: "Limpar busca",
-    search: "Busca"
-  },
-  "zh-CN": {
-    clearSearch: "清除搜索",
-    search: "搜索"
-  }
+  "de-DE": { clearSearch: "Suche löschen", search: "Suche" },
+  "en-GB": { clearSearch: "Clear search", search: "Search" },
+  "en-US": { clearSearch: "Clear search", search: "Search" },
+  "es-419": { clearSearch: "Borrar búsqueda", search: "Buscar" },
+  "es-ES": { clearSearch: "Borrar búsqueda", search: "Buscar en" },
+  "es-MX": { clearSearch: "Borrar búsqueda", search: "Buscar" },
+  "fr-FR": { clearSearch: "Effacer la recherche", search: "Recherche" },
+  "it-IT": { clearSearch: "Cancella ricerca", search: "Cerca" },
+  "ja-JP": { clearSearch: "検索をクリア", search: "検索" },
+  "pt-BR": { clearSearch: "Limpar busca", search: "Busca" },
+  "zh-CN": { clearSearch: "清除搜索", search: "搜索" }
 }, P = {
   i18n: { messages: B }
 }, x = /* @__PURE__ */ m({
@@ -126,4 +93,4 @@ export {
   A as a,
   i as b
 };
-//# sourceMappingURL=search-bar.8iDkgmjw.js.map
+//# sourceMappingURL=search-bar.CRfYCmkl.js.map

package/dist/chunks/{search-bar.8iDkgmjw.js.map → search-bar.CRfYCmkl.js.map}

@@ -1 +1 @@
-{"version":3,"file":"search-bar.8iDkgmjw.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.CRfYCmkl.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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/secondary-nav.B1Tj7MAA.js

@@ -0,0 +1,192 @@
+import { defineComponent as w, 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.Ce2P9MZ-.js";
+import { B as S } from "./typography.D1OZJbEa.js";
+import { B as A } from "./tag.BC7FFENr.js";
+import { C as M } from "./cross-circle-fill.DTDtgLMf.js";
+import { d as P } from "./index.CL3TXc0a.js";
+import { u as O } from "./index.CPOlyau9.js";
+import { a as z } from "./es6.Cu3DYUPA.js";
+import { B as U } from "./button.C4kKejsg.js";
+import { C as H } from "./chevron-down.eYtgv5ly.js";
+import { C as j } from "./chevron-up.d8cwIlA_.js";
+import { g as G } from "./generate-uid.DBWe4g6T.js";
+import { u as J } from "./use-expandable-content-height.Bdd9hQwq.js";
+import { n as B } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/secondary-nav.css";
+const k = /* @__PURE__ */ Symbol("secondary nav state"), X = {
+  "de-DE": { errorCount: "Fehler | Fehler" },
+  "en-GB": { errorCount: "error | errors" },
+  "en-US": { errorCount: "error | errors" },
+  "es-419": { errorCount: "error | errores" },
+  "es-ES": { errorCount: "error | errores" },
+  "es-MX": { errorCount: "error | errores" },
+  "fr-FR": { errorCount: "erreur | erreurs" },
+  "it-IT": { errorCount: "errore | errori" },
+  "ja-JP": { errorCount: "エラー | エラー" },
+  "pt-BR": { errorCount: "erro | erros" },
+  "zh-CN": { errorCount: "错误 | 错误" }
+}, q = { i18n: { messages: X } }, Q = /* @__PURE__ */ w({
+  ...q,
+  __name: "secondary-nav-item",
+  props: {
+    label: null,
+    value: null,
+    items: null,
+    isSubItem: { type: Boolean },
+    errorCounter: null
+  },
+  emits: ["click"],
+  setup(p, { emit: o }) {
+    const e = p, { tc: r } = O(), { activeItemValue: t, updateActiveItemValue: s, allowExpandableItemNavigation: f } = $(k), _ = "b-secondary-nav-item__animation--content", l = T(!1), x = G("secondary-nav-sub-items"), y = T(null), m = d(() => !!e.items?.length), c = d(() => t.value === e.value), g = d(() => m.value && !f.value), { contentHeight: v } = J(y, l), b = d(() => v.value ? { "max-height": v.value } : {}), I = d(() => ({
+      "b-secondary-nav-item__option--active": c.value,
+      "b-secondary-nav-item__option--expandable": m.value,
+      "b-secondary-nav-item__option--sub-item": e.isSubItem
+    })), h = (u) => {
+      o("click", u), s(e.value);
+    }, a = () => {
+      l.value = !l.value;
+    }, n = (u, C) => u.some(
+      (N) => N.value === C || (N.items ? n(N.items, C) : !1)
+    ), i = (u) => u.some((C) => !!C.errorCounter || (C.items ? i(C.items) : !1));
+    return D(
+      [t, () => e.items],
+      ([u]) => {
+        m.value && e.items && (n(e.items, u) || i(e.items)) && (l.value = !0);
+      },
+      { immediate: !0, deep: !0 }
+    ), { __sfc: !0, tc: r, activeItemValue: t, updateActiveItemValue: s, allowExpandableItemNavigation: f, CONTENT_TRANSITION_NAME: _, props: e, isOpen: l, subItemsId: x, subItemsRef: y, hasSubItems: m, isItemSelected: c, expandleItemIsToggleOnly: g, contentHeight: v, subItemsMaxHeight: b, conditionalClasses: I, emit: o, onClick: h, onToggleClick: a, hasActiveDescendant: n, hasDescendantErrors: i, BentoButton: U, BentoTag: A, BentoTypography: S, ChevronDownIcon: H, ChevronUpIcon: j, CrossCircleFillIcon: M };
+  }
+});
+var Y = function() {
+  var o = this, e = o._self._c, r = o._self._setupProxy;
+  return e("div", { staticClass: "b-secondary-nav-item" }, [e("div", { staticClass: "b-secondary-nav-item__wrapper" }, [e("button", { staticClass: "b-secondary-nav-item__option", class: r.conditionalClasses, attrs: { "aria-current": r.isItemSelected ? "page" : void 0, "aria-expanded": r.expandleItemIsToggleOnly ? `${r.isOpen}` : void 0, "aria-controls": r.expandleItemIsToggleOnly ? r.subItemsId : void 0 }, on: { click: function(t) {
+    r.expandleItemIsToggleOnly ? r.onToggleClick() : r.onClick(t);
+  } } }, [e(r.BentoTypography, { staticClass: "b-secondary-nav-item__title", attrs: { variant: "body", stronger: "" } }, [o._v(" " + o._s(o.label) + " ")]), o.errorCounter ? e(r.BentoTag, { staticClass: "b-secondary-nav-item__error-counter", attrs: { variant: "red" }, scopedSlots: o._u([{ key: "icon", fn: function() {
+    return [e(r.CrossCircleFillIcon, { attrs: { "aria-hidden": "true" } })];
+  }, proxy: !0 }], null, !1, 196511213) }, [e("span", [o._v(o._s(o.errorCounter))]), e("span", { staticClass: "b-secondary-nav-item__visually-hidden" }, [o._v(o._s(r.tc("errorCount", o.errorCounter)))])]) : o._e()], 1), r.hasSubItems ? e(r.BentoButton, { staticClass: "b-secondary-nav-item__toggle", attrs: { "aria-hidden": r.expandleItemIsToggleOnly, tabindex: r.expandleItemIsToggleOnly ? -1 : void 0, variant: "tertiary", "aria-label": r.isOpen ? `Collapse ${o.label}` : `Expand ${o.label}`, "aria-expanded": r.expandleItemIsToggleOnly ? void 0 : `${r.isOpen}`, "aria-controls": r.expandleItemIsToggleOnly ? void 0 : r.subItemsId }, on: { click: function(t) {
+    return t.stopPropagation(), r.onToggleClick.apply(null, arguments);
+  } }, scopedSlots: o._u([{ key: "iconLeft", fn: function() {
+    return [r.isOpen ? e(r.ChevronUpIcon, { staticClass: "b-secondary-nav-item__icon", attrs: { "aria-hidden": "true" } }) : e(r.ChevronDownIcon, { staticClass: "b-secondary-nav-item__icon", attrs: { "aria-hidden": "true" } })];
+  }, proxy: !0 }], null, !1, 3107710104) }) : o._e()], 1), e("Transition", { attrs: { name: r.CONTENT_TRANSITION_NAME } }, [r.hasSubItems && r.isOpen ? e("div", { style: r.subItemsMaxHeight, attrs: { id: r.subItemsId } }, [e("ul", { ref: "subItemsRef", staticClass: "b-secondary-nav-item__sub-items" }, o._l(o.items, function(t) {
+    return e("li", { key: t.value }, [e("secondary-nav-item", { attrs: { label: t.label, value: t.value, items: t.items, "error-counter": t.errorCounter, "is-sub-item": "" } })], 1);
+  }), 0)]) : o._e()])], 1);
+}, K = [], W = /* @__PURE__ */ B(
+  Q,
+  Y,
+  K,
+  !1,
+  null,
+  "14334916"
+);
+const E = W.exports, Z = {}, ee = /* @__PURE__ */ w({
+  ...Z,
+  __name: "secondary-nav-category",
+  props: {
+    label: null,
+    items: null
+  },
+  setup(p) {
+    return { __sfc: !0, BentoTypography: S, SecondaryNavItem: E };
+  }
+});
+var re = function() {
+  var o = this, e = o._self._c, r = o._self._setupProxy;
+  return e("section", { staticClass: "b-secondary-nav-category", attrs: { "aria-label": o.label } }, [e(r.BentoTypography, { staticClass: "b-secondary-nav-category__label", attrs: { el: "h1", variant: "caption", stronger: "" } }, [o._v(o._s(o.label))]), e("ul", { staticClass: "b-secondary-nav__list" }, o._l(o.items, function(t) {
+    return e("li", { key: t.value }, [e(r.SecondaryNavItem, { attrs: { label: t.label, value: t.value, items: t.items, "error-counter": t.errorCounter } })], 1);
+  }), 0)], 1);
+}, oe = [], te = /* @__PURE__ */ B(
+  ee,
+  re,
+  oe,
+  !1,
+  null,
+  "777b2ce6"
+);
+const ae = te.exports, ne = {
+  "de-DE": { errorCount: "Fehler | Fehler", mobileDropdownAriaLabel: "Navigationsoptionen Dropdown-Menü" },
+  "en-GB": { errorCount: "error | errors", mobileDropdownAriaLabel: "Navigation options drop-down" },
+  "en-US": { errorCount: "error | errors", mobileDropdownAriaLabel: "Navigation options dropdown" },
+  "es-419": { errorCount: "error | errores", mobileDropdownAriaLabel: "Menú desplegable de opciones de navegación" },
+  "es-ES": { errorCount: "error | errores", mobileDropdownAriaLabel: "Menú desplegable de opciones de navegación" },
+  "es-MX": { errorCount: "error | errores", mobileDropdownAriaLabel: "Menú desplegable de opciones de navegación" },
+  "fr-FR": { errorCount: "erreur | erreurs", mobileDropdownAriaLabel: "Menu déroulant des options de navigation" },
+  "it-IT": { errorCount: "errore | errori", mobileDropdownAriaLabel: "Menu a tendina delle opzioni di navigazione" },
+  "ja-JP": { errorCount: "エラー | エラー", mobileDropdownAriaLabel: "ナビゲーションオプションのドロップダウン" },
+  "pt-BR": { errorCount: "erro | erros", mobileDropdownAriaLabel: "Menu suspenso de opções de navegação" },
+  "zh-CN": { errorCount: "错误 | 错误", mobileDropdownAriaLabel: "导航选项下拉菜单" }
+}, se = {
+  i18n: { messages: ne }
+}, le = /* @__PURE__ */ w({
+  ...se,
+  __name: "secondary-nav",
+  props: {
+    items: null,
+    value: null,
+    allowExpandableItemNavigation: { type: Boolean }
+  },
+  emits: ["change"],
+  setup(p, { emit: o }) {
+    const e = p, { t: r, tc: t } = O(), s = P({
+      s: z
+    }), f = s.smallerOrEqual("s"), _ = (a) => "items" in a && !("value" in a), l = (a, n = 0) => a.flatMap((i) => {
+      const u = {
+        label: i.label,
+        value: i.value,
+        data: { level: n, hasSubItems: !!i.items?.length, errorCounter: i.errorCounter }
+      };
+      return i.items?.length ? [u, ...l(i.items, n + 1)] : [u];
+    }), x = (a) => !e.allowExpandableItemNavigation && a.data?.hasSubItems, y = d(() => e.items.some((a) => _(a))), m = d(() => e.items.flatMap((a) => _(a) ? [
+      {
+        label: a.label,
+        value: `category-${a.label}`,
+        items: l(a.items)
+      }
+    ] : a.items?.length ? l([a]) : [
+      {
+        label: a.label,
+        value: a.value,
+        data: { level: 0, errorCounter: a.errorCounter }
+      }
+    ])), c = (a) => a.flatMap((n) => [n, ...n.items?.length ? c(n.items) : []]), g = (a) => c(a).find((n) => e.allowExpandableItemNavigation || !n.items?.length)?.value ?? "", v = d(() => e.items.length ? g(
+      e.items.flatMap(
+        (a) => _(a) ? c(a.items) : c([a])
+      )
+    ) : ""), b = T(e.value ?? v.value), I = (a) => {
+      b.value = a, o("change", a);
+    }, h = {
+      activeItemValue: L(b),
+      updateActiveItemValue: I,
+      allowExpandableItemNavigation: F(e, "allowExpandableItemNavigation")
+    };
+    return D(
+      () => e.value,
+      (a) => {
+        a !== void 0 && (b.value = a);
+      }
+    ), R(k, h), { __sfc: !0, t: r, tc: t, breakpoints: s, isMobile: f, props: e, emit: o, isCategory: _, mapNestedItems: l, isMobileOptionDisabled: x, hasCategories: y, mobileDropdownItems: m, flattenNestedItems: c, findFirstSelectableNestedItemValue: g, activeItemValueFallback: v, activeItemValue: b, updateActiveItemValue: I, state: h, SecondaryNavItem: E, SecondaryNavCategory: ae, BentoDropdown: V, BentoTypography: S, BentoTag: A, CrossCircleFillIcon: M };
+  }
+});
+var ie = function() {
+  var o = this, e = o._self._c, r = o._self._setupProxy;
+  return e("nav", { staticClass: "b-secondary-nav" }, [r.isMobile ? e(r.BentoDropdown, { attrs: { "aria-label": r.t("mobileDropdownAriaLabel"), items: r.mobileDropdownItems, "static-categories": r.hasCategories, "model-value": r.activeItemValue, "is-option-disabled": r.isMobileOptionDisabled }, on: { "update:model-value": r.updateActiveItemValue }, scopedSlots: o._u([{ key: "display-value", fn: function({ label: t }) {
+    return [e(r.BentoTypography, { attrs: { el: "span" } }, [o._v(" " + o._s(t) + " ")])];
+  } }, { key: "default", fn: function({ label: t, data: s }) {
+    return [e(r.BentoTypography, { class: { "b-secondary-nav__option": !0, "b-secondary-nav__nested-option": !!s?.level }, attrs: { el: "div" } }, [o._v(" " + o._s(t) + " "), s?.errorCounter ? e(r.BentoTag, { staticClass: "b-secondary-nav__error-counter", attrs: { variant: "red" }, scopedSlots: o._u([{ key: "icon", fn: function() {
+      return [e(r.CrossCircleFillIcon, { attrs: { "aria-hidden": "true" } })];
+    }, proxy: !0 }], null, !0) }, [e("span", [o._v(o._s(s.errorCounter))]), e("span", { staticClass: "b-secondary-nav__visually-hidden" }, [o._v(o._s(r.tc("errorCount", s.errorCounter)))])]) : o._e()], 1)];
+  } }], null, !1, 2211008849) }) : e("ul", { staticClass: "b-secondary-nav__list" }, o._l(o.items, function(t) {
+    return e("li", { key: t.label }, ["items" in t && !("value" in t) ? e(r.SecondaryNavCategory, { attrs: { label: t.label, items: t.items } }) : e(r.SecondaryNavItem, { attrs: { label: t.label, value: t.value, items: t.items, "error-counter": t.errorCounter } })], 1);
+  }), 0)], 1);
+}, ue = [], ce = /* @__PURE__ */ B(
+  le,
+  ie,
+  ue,
+  !1,
+  null,
+  "900dc964"
+);
+const Te = ce.exports;
+export {
+  Te as s
+};
+//# sourceMappingURL=secondary-nav.B1Tj7MAA.js.map

package/dist/chunks/{secondary-nav.CmvSHxvS.js.map → secondary-nav.B1Tj7MAA.js.map}

@@ -1 +1 @@
-{"version":3,"file":"secondary-nav.CmvSHxvS.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 v-if=\"errorCounter\" class=\"b-secondary-nav-item__error-counter\" variant=\"red\">\n                    <template #icon>\n                        <cross-circle-fill-icon aria-hidden=\"true\" />\n                    </template>\n                    <span>{{ errorCounter }}</span>\n                    <span class=\"b-secondary-nav-item__visually-hidden\">{{ tc('errorCount', errorCounter) }}</span>\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 '@/core/utils/ts';\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 v-if=\"data?.errorCounter\" class=\"b-secondary-nav__error-counter\" variant=\"red\">\n                        <template #icon>\n                            <cross-circle-fill-icon aria-hidden=\"true\" />\n                        </template>\n                        <span>{{ data.errorCounter }}</span>\n                        <span class=\"b-secondary-nav__visually-hidden\">{{ tc('errorCount', data.errorCounter) }}</span>\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","_a","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","_b","isMobileOptionDisabled","option","hasCategories","mobileDropdownItems","flattenNestedItems","findFirstSelectableNestedItemValue","activeItemValueFallback","state","readonly","toRef","provide"],"mappings":"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"}
+{"version":3,"file":"secondary-nav.B1Tj7MAA.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 v-if=\"errorCounter\" class=\"b-secondary-nav-item__error-counter\" variant=\"red\">\n                    <template #icon>\n                        <cross-circle-fill-icon aria-hidden=\"true\" />\n                    </template>\n                    <span>{{ errorCounter }}</span>\n                    <span class=\"b-secondary-nav-item__visually-hidden\">{{ tc('errorCount', errorCounter) }}</span>\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 '@/core/utils/ts';\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 v-if=\"data?.errorCounter\" class=\"b-secondary-nav__error-counter\" variant=\"red\">\n                        <template #icon>\n                            <cross-circle-fill-icon aria-hidden=\"true\" />\n                        </template>\n                        <span>{{ data.errorCounter }}</span>\n                        <span class=\"b-secondary-nav__visually-hidden\">{{ tc('errorCount', data.errorCounter) }}</span>\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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"}