@adyen/bento-vue2 1.95.0 → 1.96.0

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

@@ -0,0 +1,259 @@
+import { defineComponent as S, inject as $, ref as T, computed as p, watch as D, toRef as F, readonly as R, provide as L } from "vue";
+import { B as V } from "./dropdown.C70AlvOT.js";
+import { B as w } from "./typography.C8lPlsbD.js";
+import { B as A } from "./tag.CbNFG45Y.js";
+import { C as M } from "./cross-circle-fill.DTDtgLMf.js";
+import { b as P } from "./index.CJYgd0QI.js";
+import { u as O } from "./index.B6WW_F-J.js";
+import { a as z } from "./es6.Cu3DYUPA.js";
+import { B as U } from "./button.DITA6YtS.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.NJ8tVoha.js";
+import { u as J } from "./use-expandable-content-height.2WJLCL-R.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-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__ */ S({
+  ...q,
+  __name: "secondary-nav-item",
+  props: {
+    label: null,
+    value: null,
+    items: null,
+    isSubItem: { type: Boolean },
+    errorCounter: null
+  },
+  emits: ["click"],
+  setup(_, { emit: o }) {
+    const e = _, { tc: r } = O(), { activeItemValue: t, updateActiveItemValue: i, allowExpandableItemNavigation: y } = $(k), m = "b-secondary-nav-item__animation--content", u = T(!1), N = G("secondary-nav-sub-items"), g = T(null), v = p(() => {
+      var s;
+      return !!((s = e.items) != null && s.length);
+    }), d = p(() => t.value === e.value), I = p(() => v.value && !y.value), { contentHeight: b } = J(g, u), C = p(() => b.value ? { "max-height": b.value } : {}), h = p(() => ({
+      "b-secondary-nav-item__option--active": d.value,
+      "b-secondary-nav-item__option--expandable": v.value,
+      "b-secondary-nav-item__option--sub-item": e.isSubItem
+    })), x = (s) => {
+      o("click", s), i(e.value);
+    }, n = () => {
+      u.value = !u.value;
+    }, a = (s, c) => s.some(
+      (f) => f.value === c || (f.items ? a(f.items, c) : !1)
+    ), l = (s) => s.some((c) => !!c.errorCounter || (c.items ? l(c.items) : !1));
+    return D(
+      [t, () => e.items],
+      ([s]) => {
+        v.value && e.items && (a(e.items, s) || l(e.items)) && (u.value = !0);
+      },
+      { immediate: !0, deep: !0 }
+    ), { __sfc: !0, tc: r, activeItemValue: t, updateActiveItemValue: i, allowExpandableItemNavigation: y, CONTENT_TRANSITION_NAME: m, props: e, isOpen: u, subItemsId: N, subItemsRef: g, hasSubItems: v, isItemSelected: d, expandleItemIsToggleOnly: I, contentHeight: b, subItemsMaxHeight: C, conditionalClasses: h, emit: o, onClick: x, onToggleClick: n, hasActiveDescendant: a, hasDescendantErrors: l, BentoButton: U, BentoTag: A, BentoTypography: w, 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__ */ S({
+  ...Z,
+  __name: "secondary-nav-category",
+  props: {
+    label: null,
+    items: null
+  },
+  setup(_) {
+    return { __sfc: !0, BentoTypography: w, 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 ne = te.exports, ae = {
+  "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-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: ae }
+}, le = /* @__PURE__ */ S({
+  ...se,
+  __name: "secondary-nav",
+  props: {
+    items: null,
+    value: null,
+    allowExpandableItemNavigation: { type: Boolean }
+  },
+  emits: ["change"],
+  setup(_, { emit: o }) {
+    const e = _, { t: r, tc: t } = O(), i = P({
+      s: z
+    }), y = i.smallerOrEqual("s"), m = (n) => "items" in n && !("value" in n), u = (n, a = 0) => n.flatMap((l) => {
+      var c, f;
+      const s = {
+        label: l.label,
+        value: l.value,
+        data: { level: a, hasSubItems: !!((c = l.items) != null && c.length), errorCounter: l.errorCounter }
+      };
+      return (f = l.items) != null && f.length ? [s, ...u(l.items, a + 1)] : [s];
+    }), N = (n) => {
+      var a;
+      return !e.allowExpandableItemNavigation && ((a = n.data) == null ? void 0 : a.hasSubItems);
+    }, g = p(() => e.items.some((n) => m(n))), v = p(() => e.items.flatMap((n) => {
+      var a;
+      return m(n) ? [
+        {
+          label: n.label,
+          value: `category-${n.label}`,
+          items: u(n.items)
+        }
+      ] : (a = n.items) != null && a.length ? u([n]) : [
+        {
+          label: n.label,
+          value: n.value,
+          data: { level: 0, errorCounter: n.errorCounter }
+        }
+      ];
+    })), d = (n) => n.flatMap((a) => {
+      var l;
+      return [a, ...(l = a.items) != null && l.length ? d(a.items) : []];
+    }), I = (n) => {
+      var a;
+      return ((a = d(n).find((l) => {
+        var s;
+        return e.allowExpandableItemNavigation || !((s = l.items) != null && s.length);
+      })) == null ? void 0 : a.value) ?? "";
+    }, b = p(() => e.items.length ? I(
+      e.items.flatMap(
+        (n) => m(n) ? d(n.items) : d([n])
+      )
+    ) : ""), C = T(e.value ?? b.value), h = (n) => {
+      C.value = n, o("change", n);
+    }, x = {
+      activeItemValue: R(C),
+      updateActiveItemValue: h,
+      allowExpandableItemNavigation: F(e, "allowExpandableItemNavigation")
+    };
+    return D(
+      () => e.value,
+      (n) => {
+        n !== void 0 && (C.value = n);
+      }
+    ), L(k, x), { __sfc: !0, t: r, tc: t, breakpoints: i, isMobile: y, props: e, emit: o, isCategory: m, mapNestedItems: u, isMobileOptionDisabled: N, hasCategories: g, mobileDropdownItems: v, flattenNestedItems: d, findFirstSelectableNestedItemValue: I, activeItemValueFallback: b, activeItemValue: C, updateActiveItemValue: h, state: x, SecondaryNavItem: E, SecondaryNavCategory: ne, BentoDropdown: V, BentoTypography: w, 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: i }) {
+    return [e(r.BentoTypography, { class: { "b-secondary-nav__option": !0, "b-secondary-nav__nested-option": !!(i != null && i.level) }, attrs: { el: "div" } }, [o._v(" " + o._s(t) + " "), i != null && i.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(i.errorCounter))]), e("span", { staticClass: "b-secondary-nav__visually-hidden" }, [o._v(o._s(r.tc("errorCount", i.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.C7lEDaoj.js.map

package/dist/chunks/{secondary-nav.BvbT8LXa.js.map → secondary-nav.C7lEDaoj.js.map}

@@ -1 +1 @@
-{"version":3,"file":"secondary-nav.BvbT8LXa.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.C7lEDaoj.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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"}

package/dist/chunks/tab.QEKU5Udp.js

@@ -0,0 +1,256 @@
+import { defineComponent as N, ref as p, provide as g, watch as x, nextTick as k, computed as m, unref as $, onUnmounted as A, toRefs as j, inject as B } from "vue";
+import { B as G } from "./typography.C8lPlsbD.js";
+import { B as J } from "./tag.CbNFG45Y.js";
+import { C as U } from "./cross-circle-fill.DTDtgLMf.js";
+import { u as z } from "./index.B6WW_F-J.js";
+import { g as M } from "./generate-uid.NJ8tVoha.js";
+import { T as R, a as O, E as q } from "./tabs.keys.B4qGhjp2.js";
+import { F as H } from "./fixed-scroller.4xAzt_OI.js";
+import { n as S } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/tab.css";
+const F = (s, e) => {
+  const a = s === 0 ? e.length - 1 : s - 1, t = e[a];
+  return t.disabled || t.hidden ? F(a, e) : a;
+}, D = (s, e) => {
+  const a = s === e.length - 1 ? 0 : s + 1, t = e[a];
+  return t.disabled || t.hidden ? D(a, e) : a;
+}, Q = {
+  "de-DE": {
+    errorCount: "Fehler | Fehler"
+  },
+  "en-GB": {
+    errorCount: "error | errors"
+  },
+  "en-US": {
+    errorCount: "error | errors"
+  },
+  "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: "错误 | 错误"
+  }
+};
+var w = /* @__PURE__ */ ((s) => (s.ACTIVE_TAB_INDEX = "update:active-tab-index", s))(w || {});
+const V = N({
+  i18n: { messages: Q },
+  components: {
+    BentoTag: J,
+    BentoTypography: G,
+    CrossCircleFillIcon: U,
+    FixedScroller: H
+  },
+  props: {
+    /**
+     * Sets the active tab by its index (0 being the first tab item).
+     */
+    activeTabIndex: { type: Number, default: 0 },
+    /*
+     * Renders the tab with a sticky positioning.
+     */
+    sticky: { type: Boolean, default: !1 },
+    /**
+     * Additional configurable options for tabs rendered with a sticky positioning.
+     * It must be an object of type {@see BentoStickyTabsOption}
+     * @property {Ref<number>} stickyOptions.top - Top position the tabs should take up when rendered as sticky.
+     */
+    stickyOptions: { type: Object, default: null }
+  },
+  emits: [w.ACTIVE_TAB_INDEX],
+  setup(s, { emit: e }) {
+    const { tc: a } = z(), t = p([]), u = p(null), b = p(), l = p(""), n = p(!1);
+    let c;
+    g(R, l);
+    const _ = (r) => () => {
+      var o;
+      t.value = (o = t.value) == null ? void 0 : o.filter(({ id: i }) => i !== r);
+    };
+    g(O, ({
+      title: r,
+      disabled: o,
+      errorCounter: i,
+      withNotificationIndicator: f,
+      counter: h,
+      hidden: W,
+      setElementRef: Y
+    }) => {
+      const I = M("b-tab");
+      return t.value.push({
+        counter: h,
+        disabled: o,
+        errorCounter: i,
+        hidden: W,
+        id: I,
+        title: r,
+        withNotificationIndicator: f,
+        setElementRef: Y
+      }), { id: I, unregisterTab: _(I) };
+    });
+    const d = (r) => {
+      if (r.code === "ArrowLeft" || r.code === "ArrowRight") {
+        const o = t.value.find((f) => document.activeElement.id === f.id);
+        let i = t.value.indexOf(o);
+        r.code === "ArrowLeft" ? i = F(i, t.value) : r.code === "ArrowRight" && (i = D(i, t.value)), u.value.children[i].focus();
+      }
+    };
+    x(
+      [() => s.activeTabIndex, t],
+      ([r, o]) => {
+        k(() => {
+          var f;
+          const i = o[r];
+          l.value = i && !i.disabled ? i.id : (f = t.value.find(({ disabled: h }) => !h)) == null ? void 0 : f.id;
+        });
+      },
+      { immediate: !0 }
+    );
+    const C = (r) => {
+      l.value = r;
+      const o = t.value.findIndex(({ id: i }) => i === l.value);
+      e(w.ACTIVE_TAB_INDEX, o);
+    }, y = (r) => r ? "disabled" : !1, T = m(() => {
+      var r;
+      return (r = s.stickyOptions) != null && r.top ? $(s.stickyOptions.top) : 0;
+    }), P = m(() => s.sticky && T.value > 0 ? !0 : n.value), E = () => {
+      c && (c.disconnect(), c = null), n.value = !1;
+    }, K = (r) => {
+      s.sticky && T.value === 0 && (c = new IntersectionObserver(
+        ([o]) => {
+          n.value = o.intersectionRatio < 1;
+        },
+        { threshold: [1] }
+      ), c.observe(r));
+    };
+    x(
+      [() => s.sticky, b, T],
+      ([r, o]) => {
+        E(), r && o && k(() => K(o));
+      },
+      { immediate: !0 }
+    ), A(() => {
+      E();
+    });
+    const X = m(() => ({
+      "b-tabs__tab-list-wrapper--sticky": s.sticky,
+      "b-tabs__tab-list-wrapper--pinned": P.value
+    })), L = m(
+      () => {
+        var r;
+        return (
+          // This helps us detect when the tabs are pinned without calculations on the tabs positions because it makes the tabs intersect by 1 pixel with the element on top of it, which is getting aught by the intersection observer.
+          // Followed this example: https://css-tricks.com/how-to-detect-when-a-sticky-element-gets-pinned/
+          s.sticky ? {
+            top: `${(((r = s.stickyOptions) == null ? void 0 : r.top) ?? 0) - 1}px`
+          } : {}
+        );
+      }
+    );
+    return {
+      tc: a,
+      tabs: t,
+      tablist: u,
+      tablistwrapper: b,
+      activeTabId: l,
+      tablistWrapperConditionalClasses: X,
+      tablistWrapperStyles: L,
+      onKeydownTabsNavigation: d,
+      handleTabChange: C,
+      isDisabled: y
+    };
+  }
+});
+var Z = function() {
+  var e = this, a = e._self._c;
+  return e._self._setupProxy, a("div", { staticClass: "b-tabs" }, [a("div", { ref: "tablistwrapper", staticClass: "b-tabs__tab-list-wrapper", class: e.tablistWrapperConditionalClasses, style: e.tablistWrapperStyles }, [a("fixed-scroller", { attrs: { condensed: "", "extra-padding-top": 2 } }, [a("div", { ref: "tablist", staticClass: "b-tabs__tab-list", attrs: { role: "tablist" }, on: { keydown: e.onKeydownTabsNavigation } }, e._l(e.tabs, function({
+    counter: t,
+    disabled: u,
+    errorCounter: b,
+    hidden: l,
+    id: n,
+    title: c,
+    withNotificationIndicator: _,
+    setElementRef: v
+  }) {
+    return a("button", { directives: [{ name: "show", rawName: "v-show", value: !l, expression: "!hidden" }], key: n, ref: v, refInFor: !0, staticClass: "b-tabs__tab", class: {
+      "b-tabs__tab--active": e.activeTabId === n,
+      "b-tabs__tab--disabled": u
+    }, attrs: { id: n, role: "tab", type: "button", "aria-controls": `${n}-tabpanel`, "aria-hidden": l ? "true" : "false", "aria-selected": e.activeTabId === n ? "true" : "false", tabindex: e.activeTabId === n && !u.value ? null : -1, disabled: e.isDisabled(u) }, on: { click: function(d) {
+      return e.handleTabChange(n);
+    }, keydown: function(d) {
+      return !d.type.indexOf("key") && e._k(d.keyCode, "enter", 13, d.key, "Enter") && e._k(d.keyCode, "space", 32, d.key, [" ", "Spacebar"]) ? null : e.handleTabChange(n);
+    } } }, [a("span", { staticClass: "b-tabs__tab-text" }, [a("bento-typography", { staticClass: "b-tabs__tab-title", attrs: { el: "span", variant: "body", stronger: "" } }, [e._v(" " + e._s(c) + " ")]), t != null ? a("bento-typography", { staticClass: "b-tabs__tab-counter", class: {
+      "b-tabs__tab-counter--active": e.activeTabId === n
+    }, attrs: { el: "span", variant: "body", stronger: "" } }, [e._v(" " + e._s(t) + " ")]) : e._e(), b != null ? a("bento-tag", { staticClass: "b-tabs__tab-error-counter", attrs: { variant: "red" }, scopedSlots: e._u([{ key: "icon", fn: function() {
+      return [a("cross-circle-fill-icon", { attrs: { "aria-hidden": "true" } })];
+    }, proxy: !0 }], null, !0) }, [a("span", [e._v(e._s(b))]), a("span", { staticClass: "b-tabs__visually-hidden" }, [e._v(e._s(e.tc("errorCount", b)))])]) : e._e(), _ ? a("span", { staticClass: "b-tabs__tab-notification-dot", attrs: { "aria-hidden": "true" } }) : e._e()], 1), a("span", { directives: [{ name: "show", rawName: "v-show", value: e.activeTabId === n, expression: "activeTabId === id" }], staticClass: "b-tabs__tab-underline", attrs: { "aria-hidden": "true" } })]);
+  }), 0)])], 1), e._t("default")], 2);
+}, ee = [], te = /* @__PURE__ */ S(
+  V,
+  Z,
+  ee,
+  !1,
+  null,
+  "c941b744"
+);
+const ve = te.exports, ae = {
+  name: "bento-tab"
+}, re = /* @__PURE__ */ N({
+  ...ae,
+  props: {
+    counter: { default: null },
+    disabled: { type: Boolean, default: !1 },
+    errorCounter: { default: null },
+    hidden: { type: Boolean, default: !1 },
+    title: null,
+    withNotificationIndicator: { type: Boolean, default: !1 },
+    setElementRef: { type: Function, default: void 0 }
+  },
+  setup(s) {
+    const e = s, { counter: a, disabled: t, errorCounter: u, hidden: b, withNotificationIndicator: l } = j(e), n = p(), c = (T) => {
+      n.value = T;
+    };
+    g(q, c);
+    const _ = m(() => n.value ?? e.title), v = B(O), d = B(R), { id: C, unregisterTab: y } = v({
+      counter: a,
+      disabled: t,
+      errorCounter: u,
+      hidden: b,
+      title: _,
+      withNotificationIndicator: l,
+      setElementRef: e.setElementRef
+    });
+    return A(() => y()), { __sfc: !0, props: e, counter: a, disabled: t, errorCounter: u, hidden: b, withNotificationIndicator: l, componentTitle: n, setTitle: c, computedTitle: _, registerTab: v, activeTabId: d, id: C, unregisterTab: y };
+  }
+});
+var se = function() {
+  var e = this, a = e._self._c, t = e._self._setupProxy;
+  return a("div", { directives: [{ name: "show", rawName: "v-show", value: t.activeTabId === t.id, expression: "activeTabId === id" }], staticClass: "b-tab", attrs: { id: `${t.id}-tabpanel`, role: "tabpanel", "aria-labelledby": t.id } }, [t.activeTabId === t.id ? [e._t("default")] : e._e()], 2);
+}, ne = [], oe = /* @__PURE__ */ S(
+  re,
+  se,
+  ne,
+  !1,
+  null,
+  "95343e8e"
+);
+const Te = oe.exports;
+export {
+  Te as B,
+  ve as a
+};
+//# sourceMappingURL=tab.QEKU5Udp.js.map