@adyen/bento-vue2 1.94.0 → 1.96.0

package/dist/chunks/{search-bar.DeKlBnxE.js → search-bar.D-WK8eMQ.js}

@@ -1,8 +1,7 @@
-import { defineComponent as m, provide as _, toRef as b, useAttrs as C, ref as u, watch as S } from "vue";
-import { d as v } from "./use-cached-selected-values.Bnmcr7Ji.js";
+import { defineComponent as m, provide as _, toRef as b, useAttrs as C, ref as o, watch as S } from "vue";
+import { d as v } from "./use-cached-selected-values.D0s14AxT.js";
 import { u as y } from "./index.B6WW_F-J.js";
-import { I } from "./dropdown.Dx0HybJ8.js";
-import { B as E } from "./input-field.CRsU2NBh.js";
+import { I, B as E } from "./input-field.BkQZ6Qzl.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";
@@ -67,7 +66,7 @@ const P = {
   setup(r, { expose: a, emit: t }) {
     const e = r, { t: c } = y();
     _(I, b(e, "hint"));
-    const d = C(), s = u(e.value), n = u();
+    const d = C(), s = o(e.value), n = o();
     S(
       () => e.value,
       () => {
@@ -81,15 +80,15 @@ const P = {
       t("input", s.value);
     }, e.debounceTime), h = (f) => {
       s.value = f, l();
-    }, o = () => {
+    }, u = () => {
       n.value.focusInput();
     };
     return a({
       /**
        * Focus on the input field when called.
        */
-      focus: o
-    }), { __sfc: !0, t: c, props: e, emit: t, attrs: d, searchTerm: s, bentoInputField: n, onClearSearch: p, debouncedEmit: l, onInputEvent: h, focus: o, BentoSearchBarInternalEvent: i, BentoInputField: E, SearchIcon: k, CrossCircleFillIcon: T };
+      focus: u
+    }), { __sfc: !0, t: c, props: e, emit: t, attrs: d, searchTerm: s, bentoInputField: n, onClearSearch: p, debouncedEmit: l, onInputEvent: h, focus: u, BentoSearchBarInternalEvent: i, BentoInputField: E, SearchIcon: k, CrossCircleFillIcon: T };
   }
 });
 var N = function() {
@@ -117,10 +116,10 @@ var N = function() {
   null,
   "e7a2bf17"
 );
-const w = L.exports;
+const j = L.exports;
 export {
-  w as B,
+  j as B,
   A as a,
   i as b
 };
-//# sourceMappingURL=search-bar.DeKlBnxE.js.map
+//# sourceMappingURL=search-bar.D-WK8eMQ.js.map

package/dist/chunks/{search-bar.DeKlBnxE.js.map → search-bar.D-WK8eMQ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"search-bar.DeKlBnxE.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.D-WK8eMQ.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.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.BLF9iQOV.js.map → secondary-nav.C7lEDaoj.js.map}

@@ -1 +1 @@
-{"version":3,"file":"secondary-nav.BLF9iQOV.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/{segmented-control.BBG-0da6.js → segmented-control.C0JtDa4q.js}

@@ -1,7 +1,7 @@
 import { defineComponent as m, ref as c, computed as d, toRef as g, watch as C, onMounted as h } from "vue";
 import { B, p as y } from "./typography.C8lPlsbD.js";
 import { g as w } from "./generate-uid.NJ8tVoha.js";
-import { b as x } from "./tooltip.DmFTmAGi.js";
+import { b as x } from "./tooltip.CnkqMpOA.js";
 import { n as f } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { o as $ } from "./resize.Bqks3WUm.js";
 import "../assets/segmented-control.css";
@@ -110,4 +110,4 @@ const q = P.exports;
 export {
   q as B
 };
-//# sourceMappingURL=segmented-control.BBG-0da6.js.map
+//# sourceMappingURL=segmented-control.C0JtDa4q.js.map

package/dist/chunks/{segmented-control.BBG-0da6.js.map → segmented-control.C0JtDa4q.js.map}

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

package/dist/chunks/{selection-card-group.CXBbA_P1.js → selection-card-group.ZZ_qF1L1.js}

@@ -1,5 +1,5 @@
 import { defineComponent as O, useSlots as D, computed as n, inject as F, ref as h, watch as j, provide as P, onMounted as W } from "vue";
-import { c as Y } from "./index.DZx81HG1.js";
+import { d as Y } from "./index.CJYgd0QI.js";
 import { a as Q, B as U } from "./es6.Cu3DYUPA.js";
 import { B as H } from "./typography.C8lPlsbD.js";
 import { C as J } from "./checkbox-input.08E9BNeF.js";
@@ -11,7 +11,7 @@ import { n as N } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { u as ee } from "./form-field.D_2g7vaP.js";
 import { G as te } from "./grid-layout.1aIiz2N_.js";
 import { E as oe } from "./error-message.CyERcfdt.js";
-import { C as ae } from "./controls-group.CcI4EbW_.js";
+import { C as ae } from "./controls-group.Bzpsrtcx.js";
 import "../assets/selection-card-group.css";
 var B = /* @__PURE__ */ ((u) => (u.DISABLED = "disabled", u.READONLY = "readonly", u.ERROR = "error", u))(B || {});
 const q = /* @__PURE__ */ Symbol("selection card radio input injection key"), le = {
@@ -237,4 +237,4 @@ export {
   B as a,
   Ve as s
 };
-//# sourceMappingURL=selection-card-group.CXBbA_P1.js.map
+//# sourceMappingURL=selection-card-group.ZZ_qF1L1.js.map