@adyen/bento-vue2 1.89.2 → 1.91.0

package/dist/chunks/search-bar.MVJS9-Mh.js

@@ -0,0 +1,126 @@
+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.BJbWbkEQ.js";
+import { u as y } from "./index.B6WW_F-J.js";
+import { I } from "./dropdown.Ca-f8tdX.js";
+import { B as E } from "./input-field.Dh5W0Az-.js";
+import { S as k } from "./search.D53Ia3rC.js";
+import { C as T } from "./cross-circle-fill.DTDtgLMf.js";
+import { n as F } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/search-bar.css";
+var i = /* @__PURE__ */ ((r) => (r.CLEAR = "clear", r.ESCAPE = "escape-pressed", r.INPUT = "input", r.UPDATE = "update:search-term", r))(i || {}), A = /* @__PURE__ */ ((r) => (r.CLEAR = "search-clear", r.INPUT = "search-input", r.UPDATE = "update:search-term", r))(A || {});
+const P = {
+  "de-DE": {
+    clearSearch: "Suche löschen",
+    search: "Suche"
+  },
+  "en-GB": {
+    clearSearch: "Clear search",
+    search: "Search"
+  },
+  "en-US": {
+    clearSearch: "Clear search",
+    search: "Search"
+  },
+  "es-ES": {
+    clearSearch: "Borrar búsqueda",
+    search: "Buscar en"
+  },
+  "es-MX": {
+    clearSearch: "Borrar búsqueda",
+    search: "Buscar"
+  },
+  "fr-FR": {
+    clearSearch: "Effacer la recherche",
+    search: "Recherche"
+  },
+  "it-IT": {
+    clearSearch: "Cancella ricerca",
+    search: "Cerca"
+  },
+  "ja-JP": {
+    clearSearch: "検索をクリア",
+    search: "検索"
+  },
+  "pt-BR": {
+    clearSearch: "Limpar busca",
+    search: "Busca"
+  },
+  "zh-CN": {
+    clearSearch: "清除搜索",
+    search: "搜索"
+  }
+}, x = {
+  i18n: { messages: P }
+}, B = /* @__PURE__ */ m({
+  ...x,
+  __name: "search-bar",
+  props: {
+    inputFieldAriaLabel: null,
+    condensed: { type: Boolean, default: !1 },
+    debounceTime: { default: 300 },
+    disabled: { type: Boolean, default: !1 },
+    hint: { default: "" },
+    placeholder: { default: "" },
+    value: { default: void 0 }
+  },
+  emits: ["input", "clear", "escape-pressed", "blur", "focus"],
+  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();
+    S(
+      () => e.value,
+      () => {
+        s.value = e.value;
+      },
+      { immediate: !0 }
+    );
+    const p = () => {
+      s.value = "", t("clear"), t("input", "");
+    }, l = v(() => {
+      t("input", s.value);
+    }, e.debounceTime), h = (f) => {
+      s.value = f, l();
+    }, o = () => {
+      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 };
+  }
+});
+var N = function() {
+  var a = this, t = a._self._c, e = a._self._setupProxy;
+  return t("div", { staticClass: "b-search-bar" }, [t(e.BentoInputField, a._b({ ref: "bentoInputField", attrs: { "model-value": e.searchTerm, type: "search", condensed: a.condensed, "aria-label": a.inputFieldAriaLabel, "aria-hidden": !1, disabled: a.disabled, placeholder: a.placeholder }, on: { "update:model-value": e.onInputEvent, focus: function(c) {
+    return e.emit("focus");
+  }, blur: function(c) {
+    return e.emit("blur");
+  }, "escape-pressed": function(c) {
+    return e.emit(e.BentoSearchBarInternalEvent.ESCAPE);
+  } }, scopedSlots: a._u([{ key: "iconBefore", fn: function() {
+    return [t(e.SearchIcon, { attrs: { "svg-title": e.t("search"), "aria-hidden": "true" } })];
+  }, proxy: !0 }, e.searchTerm ? { key: "iconAfter", fn: function() {
+    return [t("div", { staticClass: "b-search-bar__clear-search", attrs: { tabindex: "0", "data-testid": "b-search-bar-clear-search-button" }, on: { click: e.onClearSearch, keypress: function(c) {
+      return !c.type.indexOf("key") && a._k(c.keyCode, "enter", 13, c.key, "Enter") ? null : e.onClearSearch.apply(null, arguments);
+    }, keyup: function(c) {
+      return !c.type.indexOf("key") && a._k(c.keyCode, "space", 32, c.key, [" ", "Spacebar"]) ? null : e.onClearSearch.apply(null, arguments);
+    } } }, [t(e.CrossCircleFillIcon, { attrs: { "svg-title": e.t("clearSearch") } })], 1)];
+  }, proxy: !0 } : null], null, !0) }, "bento-input-field", e.attrs, !1))], 1);
+}, R = [], L = /* @__PURE__ */ F(
+  B,
+  N,
+  R,
+  !1,
+  null,
+  "e7a2bf17"
+);
+const w = L.exports;
+export {
+  w as B,
+  A as a,
+  i as b
+};
+//# sourceMappingURL=search-bar.MVJS9-Mh.js.map

package/dist/chunks/{search-bar.DPjYDhja.js.map → search-bar.MVJS9-Mh.js.map}

@@ -1 +1 @@
-{"version":3,"file":"search-bar.DPjYDhja.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","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,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.MVJS9-Mh.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.C-nPZR-2.js

@@ -0,0 +1,226 @@
+import { defineComponent as T, inject as M, ref as w, computed as m, watch as x, toRef as B, readonly as k, provide as E } from "vue";
+import { B as $ } from "./dropdown.Ca-f8tdX.js";
+import { B as S } from "./typography.C8lPlsbD.js";
+import { j as L } from "./index.CwzYJHw2.js";
+import { u as R } from "./index.B6WW_F-J.js";
+import { a as V } from "./es6.C1DXQV6f.js";
+import { B as F } from "./button.C9b2AC9w.js";
+import { C as z } from "./chevron-down.eYtgv5ly.js";
+import { C as H } from "./chevron-up.d8cwIlA_.js";
+import { g as P } from "./generate-uid.NJ8tVoha.js";
+import { o as U } from "./resize.Bqks3WUm.js";
+import { u as j } from "./use-expandable-content-height.GkjjbmPy.js";
+import { n as D } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/secondary-nav.css";
+const O = /* @__PURE__ */ Symbol("secondary nav state"), q = {}, G = /* @__PURE__ */ T({
+  ...q,
+  __name: "secondary-nav-item",
+  props: {
+    label: null,
+    value: null,
+    items: null,
+    isSubItem: { type: Boolean }
+  },
+  emits: ["click"],
+  setup(v, { emit: t }) {
+    const a = v, { activeItemValue: e, updateActiveItemValue: s, allowExpandableItemNavigation: c } = M(O), _ = "b-secondary-nav-item__animation--content", r = w(!1), N = P("secondary-nav-sub-items"), u = w(null), b = m(() => {
+      var l;
+      return !!((l = a.items) != null && l.length);
+    }), d = m(() => e.value === a.value), I = m(() => b.value && !c.value), { updateContentHeight: f, contentHeight: p } = j(u, r), h = m(() => p.value ? { "max-height": p.value } : {}), C = m(() => ({
+      "b-secondary-nav-item__option--active": d.value,
+      "b-secondary-nav-item__option--expandable": b.value,
+      "b-secondary-nav-item__option--sub-item": a.isSubItem
+    })), n = (l) => {
+      t("click", l), s(a.value);
+    }, o = () => {
+      r.value = !r.value;
+    }, i = (l, y) => l.some(
+      (g) => g.value === y || (g.items ? i(g.items, y) : !1)
+    );
+    return x(
+      () => u.value,
+      () => {
+        let l = null;
+        !l && u.value && (l = U(u.value, () => {
+          u.value && f();
+        }));
+      }
+    ), x(
+      r,
+      () => {
+        f();
+      },
+      { immediate: !0 }
+    ), x(
+      e,
+      (l) => {
+        b.value && a.items && i(a.items, l) && (r.value = !0);
+      },
+      { immediate: !0 }
+    ), { __sfc: !0, activeItemValue: e, updateActiveItemValue: s, allowExpandableItemNavigation: c, CONTENT_TRANSITION_NAME: _, props: a, isOpen: r, subItemsId: N, subItemsRef: u, hasSubItems: b, isItemSelected: d, expandleItemIsToggleOnly: I, updateContentHeight: f, contentHeight: p, subItemsMaxHeight: h, conditionalClasses: C, emit: t, onClick: n, onToggleClick: o, hasActiveDescendant: i, BentoButton: F, BentoTypography: S, ChevronDownIcon: z, ChevronUpIcon: H };
+  }
+});
+var J = function() {
+  var t = this, a = t._self._c, e = t._self._setupProxy;
+  return a("div", { staticClass: "b-secondary-nav-item" }, [a("div", { staticClass: "b-secondary-nav-item__wrapper" }, [a("button", { staticClass: "b-secondary-nav-item__option", class: e.conditionalClasses, attrs: { "aria-current": e.isItemSelected ? "page" : void 0, "aria-expanded": e.expandleItemIsToggleOnly ? `${e.isOpen}` : void 0, "aria-controls": e.expandleItemIsToggleOnly ? e.subItemsId : void 0 }, on: { click: function(s) {
+    e.expandleItemIsToggleOnly ? e.onToggleClick() : e.onClick(s);
+  } } }, [a(e.BentoTypography, { staticClass: "b-secondary-nav-item__title", attrs: { variant: "body", stronger: "" } }, [t._v(" " + t._s(t.label) + " ")])], 1), e.hasSubItems ? a(e.BentoButton, { staticClass: "b-secondary-nav-item__toggle", attrs: { "aria-hidden": e.expandleItemIsToggleOnly, tabindex: e.expandleItemIsToggleOnly ? -1 : void 0, variant: "tertiary", "aria-label": e.isOpen ? `Collapse ${t.label}` : `Expand ${t.label}`, "aria-expanded": e.expandleItemIsToggleOnly ? void 0 : `${e.isOpen}`, "aria-controls": e.expandleItemIsToggleOnly ? void 0 : e.subItemsId }, on: { click: function(s) {
+    return s.stopPropagation(), e.onToggleClick.apply(null, arguments);
+  } }, scopedSlots: t._u([{ key: "iconLeft", fn: function() {
+    return [e.isOpen ? a(e.ChevronUpIcon, { staticClass: "b-secondary-nav-item__icon", attrs: { "aria-hidden": "true" } }) : a(e.ChevronDownIcon, { staticClass: "b-secondary-nav-item__icon", attrs: { "aria-hidden": "true" } })];
+  }, proxy: !0 }], null, !1, 3107710104) }) : t._e()], 1), a("Transition", { attrs: { name: e.CONTENT_TRANSITION_NAME } }, [e.hasSubItems && e.isOpen ? a("div", { style: e.subItemsMaxHeight, attrs: { id: e.subItemsId } }, [a("ul", { ref: "subItemsRef", staticClass: "b-secondary-nav-item__sub-items" }, t._l(t.items, function(s) {
+    return a("li", { key: s.value }, [a("secondary-nav-item", { attrs: { label: s.label, value: s.value, items: s.items, "is-sub-item": "" } })], 1);
+  }), 0)]) : t._e()])], 1);
+}, Q = [], X = /* @__PURE__ */ D(
+  G,
+  J,
+  Q,
+  !1,
+  null,
+  "384347ea"
+);
+const A = X.exports, Y = {}, K = /* @__PURE__ */ T({
+  ...Y,
+  __name: "secondary-nav-category",
+  props: {
+    label: null,
+    items: null
+  },
+  setup(v) {
+    return { __sfc: !0, BentoTypography: S, SecondaryNavItem: A };
+  }
+});
+var W = function() {
+  var t = this, a = t._self._c, e = t._self._setupProxy;
+  return a("section", { staticClass: "b-secondary-nav-category", attrs: { "aria-label": t.label } }, [a(e.BentoTypography, { staticClass: "b-secondary-nav-category__label", attrs: { el: "h1", variant: "caption", stronger: "" } }, [t._v(t._s(t.label))]), a("ul", { staticClass: "b-secondary-nav__list" }, t._l(t.items, function(s) {
+    return a("li", { key: s.value }, [a(e.SecondaryNavItem, { attrs: { label: s.label, value: s.value, items: s.items } })], 1);
+  }), 0)], 1);
+}, Z = [], ee = /* @__PURE__ */ D(
+  K,
+  W,
+  Z,
+  !1,
+  null,
+  "99d14d1a"
+);
+const ae = ee.exports, te = {
+  "de-DE": {
+    mobileDropdownAriaLabel: "Navigationsoptionen Dropdown-Menü"
+  },
+  "en-GB": {
+    mobileDropdownAriaLabel: "Navigation options drop-down"
+  },
+  "en-US": {
+    mobileDropdownAriaLabel: "Navigation options dropdown"
+  },
+  "es-ES": {
+    mobileDropdownAriaLabel: "Menú desplegable de opciones de navegación"
+  },
+  "es-MX": {
+    mobileDropdownAriaLabel: "Menú desplegable de opciones de navegación"
+  },
+  "fr-FR": {
+    mobileDropdownAriaLabel: "Menu déroulant des options de navigation"
+  },
+  "it-IT": {
+    mobileDropdownAriaLabel: "Menu a tendina delle opzioni di navigazione"
+  },
+  "ja-JP": {
+    mobileDropdownAriaLabel: "ナビゲーションオプションのドロップダウン"
+  },
+  "pt-BR": {
+    mobileDropdownAriaLabel: "Menu suspenso de opções de navegação"
+  },
+  "zh-CN": {
+    mobileDropdownAriaLabel: "导航选项下拉菜单"
+  }
+}, ne = {
+  i18n: { messages: te }
+}, se = /* @__PURE__ */ T({
+  ...ne,
+  __name: "secondary-nav",
+  props: {
+    items: null,
+    value: null,
+    allowExpandableItemNavigation: { type: Boolean }
+  },
+  emits: ["change"],
+  setup(v, { emit: t }) {
+    const a = v, { t: e } = R(), s = L({
+      s: V
+    }), c = s.smallerOrEqual("s"), _ = (n) => "items" in n && !("value" in n), r = (n, o = 0) => n.flatMap((i) => {
+      var y, g;
+      const l = {
+        label: i.label,
+        value: i.value,
+        data: { level: o, hasSubItems: !!((y = i.items) != null && y.length) }
+      };
+      return (g = i.items) != null && g.length ? [l, ...r(i.items, o + 1)] : [l];
+    }), N = (n) => {
+      var o;
+      return !a.allowExpandableItemNavigation && ((o = n.data) == null ? void 0 : o.hasSubItems);
+    }, u = m(() => a.items.some((n) => _(n))), b = m(() => a.items.flatMap((n) => {
+      var o;
+      return _(n) ? [
+        {
+          label: n.label,
+          value: `category-${n.label}`,
+          items: r(n.items)
+        }
+      ] : (o = n.items) != null && o.length ? r([n]) : [
+        {
+          label: n.label,
+          value: n.value,
+          data: { level: 0 }
+        }
+      ];
+    })), d = (n) => n.flatMap((o) => {
+      var i;
+      return [o, ...(i = o.items) != null && i.length ? d(o.items) : []];
+    }), I = (n) => {
+      var o;
+      return ((o = d(n).find((i) => {
+        var l;
+        return a.allowExpandableItemNavigation || !((l = i.items) != null && l.length);
+      })) == null ? void 0 : o.value) ?? "";
+    }, f = m(() => a.items.length ? I(
+      a.items.flatMap(
+        (n) => _(n) ? d(n.items) : d([n])
+      )
+    ) : ""), p = w(a.value ?? f.value), h = (n) => {
+      p.value = n, t("change", n);
+    }, C = {
+      activeItemValue: k(p),
+      updateActiveItemValue: h,
+      allowExpandableItemNavigation: B(a, "allowExpandableItemNavigation")
+    };
+    return x(
+      () => a.value,
+      (n) => {
+        n !== void 0 && (p.value = n);
+      }
+    ), E(O, C), { __sfc: !0, t: e, breakpoints: s, isMobile: c, props: a, emit: t, isCategory: _, mapNestedItems: r, isMobileOptionDisabled: N, hasCategories: u, mobileDropdownItems: b, flattenNestedItems: d, findFirstSelectableNestedItemValue: I, activeItemValueFallback: f, activeItemValue: p, updateActiveItemValue: h, state: C, SecondaryNavItem: A, SecondaryNavCategory: ae, BentoDropdown: $, BentoTypography: S };
+  }
+});
+var oe = function() {
+  var t = this, a = t._self._c, e = t._self._setupProxy;
+  return a("nav", { staticClass: "b-secondary-nav" }, [e.isMobile ? a(e.BentoDropdown, { attrs: { "aria-label": e.t("mobileDropdownAriaLabel"), items: e.mobileDropdownItems, "static-categories": e.hasCategories, "model-value": e.activeItemValue, "is-option-disabled": e.isMobileOptionDisabled }, on: { "update:model-value": e.updateActiveItemValue }, scopedSlots: t._u([{ key: "display-value", fn: function({ label: s }) {
+    return [a(e.BentoTypography, { attrs: { el: "span" } }, [t._v(" " + t._s(s) + " ")])];
+  } }, { key: "default", fn: function({ label: s, data: c }) {
+    return [a(e.BentoTypography, { class: { "b-secondary-nav__nested-option": !!(c != null && c.level) }, attrs: { el: "span" } }, [t._v(" " + t._s(s) + " ")])];
+  } }], null, !1, 776007699) }) : a("ul", { staticClass: "b-secondary-nav__list" }, t._l(t.items, function(s) {
+    return a("li", { key: s.label }, ["items" in s && !("value" in s) ? a(e.SecondaryNavCategory, { attrs: { label: s.label, items: s.items } }) : a(e.SecondaryNavItem, { attrs: { label: s.label, value: s.value, items: s.items } })], 1);
+  }), 0)], 1);
+}, le = [], ie = /* @__PURE__ */ D(
+  se,
+  oe,
+  le,
+  !1,
+  null,
+  "f2d49daa"
+);
+const he = ie.exports;
+export {
+  he as s
+};
+//# sourceMappingURL=secondary-nav.C-nPZR-2.js.map

package/dist/chunks/secondary-nav.C-nPZR-2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"secondary-nav.C-nPZR-2.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            </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 :label=\"item.label\" :value=\"item.value\" :items=\"item.items\" is-sub-item />\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 { 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 { computed, inject, ref, watch } from 'vue';\n    import { generateUid } from '@/core/utils/ts';\n    import { type BentoSecondaryNavItemsItem } from '../../secondary-nav.types';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n    import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\n\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});\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 { updateContentHeight, 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    watch(\n        () => subItemsRef.value,\n        () => {\n            let observer: ResizeObserver | null = null;\n\n            if (!observer && subItemsRef.value) {\n                observer = observeSizeOfElement(subItemsRef.value, () => {\n                    if (subItemsRef.value) {\n                        updateContentHeight();\n                    }\n                });\n            }\n        }\n    );\n\n    watch(\n        isOpen,\n        () => {\n            updateContentHeight();\n        },\n        { immediate: true }\n    );\n\n    watch(\n        activeItemValue,\n        value => {\n            if (hasSubItems.value && props.items && hasActiveDescendant(props.items, value)) {\n                isOpen.value = true;\n            }\n        },\n        { immediate: 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 {};\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 :label=\"item.label\" :value=\"item.value\" :items=\"item.items\" />\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 el=\"span\" :class=\"{ 'b-secondary-nav__nested-option': !!data?.level }\">\n                    {{ label }}\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 v-else :label=\"item.label\" :value=\"item.value\" :items=\"item.items\" />\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 { 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 } = 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 },\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 },\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","activeItemValue","updateActiveItemValue","allowExpandableItemNavigation","inject","CONTENT_TRANSITION_NAME","isOpen","ref","subItemsId","generateUid","subItemsRef","hasSubItems","computed","_a","props","isItemSelected","expandleItemIsToggleOnly","updateContentHeight","contentHeight","useExpandableContentHeight","subItemsMaxHeight","conditionalClasses","onClick","e","emit","onToggleClick","hasActiveDescendant","items","value","item","watch","observer","observeSizeOfElement","__default__$1","__default__","messages","t","useI18n","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.BqIiX9hv.js → segmented-control.DDtjX-V5.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.CbsNGnhw.js";
+import { b as x } from "./tooltip.BxtnF3is.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.BqIiX9hv.js.map
+//# sourceMappingURL=segmented-control.DDtjX-V5.js.map

package/dist/chunks/{segmented-control.BqIiX9hv.js.map → segmented-control.DDtjX-V5.js.map}

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.BqIiX9hv.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.DDtjX-V5.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.IPiouuot.js → selection-card-group.CLJPaknG.js}

@@ -10,8 +10,8 @@ import { a as Z } from "./radio-input.CLlYadKI.js";
 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.RxdStT3S.js";
-import { C as ae } from "./controls-group.CqotnNEF.js";
+import { E as oe } from "./error-message.CyERcfdt.js";
+import { C as ae } from "./controls-group.DSm2Ujwt.js";
 import "../assets/selection-card-group.css";
 var E = /* @__PURE__ */ ((u) => (u.DISABLED = "disabled", u.READONLY = "readonly", u.ERROR = "error", u))(E || {});
 const q = /* @__PURE__ */ Symbol("selection card radio input injection key"), le = {
@@ -237,4 +237,4 @@ export {
   E as a,
   Ve as s
 };
-//# sourceMappingURL=selection-card-group.IPiouuot.js.map
+//# sourceMappingURL=selection-card-group.CLJPaknG.js.map