@adyen/bento-vue2 2.1.0 → 2.2.0

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

@@ -1,7 +1,7 @@
 import { defineComponent as m, provide as b, toRef as _, useAttrs as S, ref as o, watch as C } from "vue";
-import { g as v } from "./dropdown.CpZQYisR.js";
+import { g as v } from "./dropdown.Dd8RNGXv.js";
 import { u as y } from "./index.CPOlyau9.js";
-import { I, B as E } from "./input-field.90DWNO1a.js";
+import { I, B as E } from "./input-field.FsFuEZ1l.js";
 import { S as k } from "./search.Bzm6F8rR.js";
 import { C as T } from "./cross-circle-fill.D3dEmLeQ.js";
 import { n as F } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
@@ -93,4 +93,4 @@ export {
   A as a,
   i as b
 };
-//# sourceMappingURL=search-bar.DrIwlAQj.js.map
+//# sourceMappingURL=search-bar.DFvrkNTD.js.map

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

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

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

@@ -1,7 +1,7 @@
 import { defineComponent as S, inject as $, ref as T, computed as d, watch as D, toRef as F, readonly as L, provide as R } from "vue";
-import { B as V } from "./dropdown.CpZQYisR.js";
+import { B as V } from "./dropdown.Dd8RNGXv.js";
 import { B as w } from "./typography.Cd386LC_.js";
-import { B as A } from "./tag.CgsX8v2m.js";
+import { B as A } from "./tag.DSyMRETc.js";
 import { C as M } from "./cross-circle-fill.D3dEmLeQ.js";
 import { d as P } from "./index.CL3TXc0a.js";
 import { u as O } from "./index.CPOlyau9.js";
@@ -189,4 +189,4 @@ const Te = ce.exports;
 export {
   Te as s
 };
-//# sourceMappingURL=secondary-nav.DRs5yAve.js.map
+//# sourceMappingURL=secondary-nav.BMsZqzdr.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"secondary-nav.DRs5yAve.js","sources":["../../src/components/secondary-nav/secondary-nav.keys.ts","../../src/components/secondary-nav/components/secondary-nav-item/secondary-nav-item.vue","../../src/components/secondary-nav/components/secondary-nav-category/secondary-nav-category.vue","../../src/components/secondary-nav/secondary-nav.vue"],"sourcesContent":["import { type InjectionKey } from 'vue';\nimport { type BentoSecondaryNavState } from './secondary-nav.types';\n\nexport const SECONDARY_NAV_STATE = Symbol('secondary nav state') as InjectionKey<BentoSecondaryNavState>;\n","<template>\n    <div class=\"b-secondary-nav-item\">\n        <div class=\"b-secondary-nav-item__wrapper\">\n            <button\n                class=\"b-secondary-nav-item__option\"\n                :class=\"conditionalClasses\"\n                :aria-current=\"isItemSelected ? 'page' : undefined\"\n                :aria-expanded=\"expandleItemIsToggleOnly ? `${isOpen}` : undefined\"\n                :aria-controls=\"expandleItemIsToggleOnly ? subItemsId : undefined\"\n                @click=\"expandleItemIsToggleOnly ? onToggleClick() : onClick($event)\"\n            >\n                <bento-typography class=\"b-secondary-nav-item__title\" variant=\"body\" stronger>\n                    {{ label }}\n                </bento-typography>\n                <bento-tag\n                    v-if=\"errorCounter\"\n                    class=\"b-secondary-nav-item__error-counter\"\n                    variant=\"red\"\n                    :label=\"errorCounter.toString()\"\n                    :aria-label=\"tc('errorCount', errorCounter)\"\n                >\n                    <template #icon>\n                        <cross-circle-fill-icon aria-hidden=\"true\" />\n                    </template>\n                </bento-tag>\n            </button>\n            <bento-button\n                v-if=\"hasSubItems\"\n                :aria-hidden=\"expandleItemIsToggleOnly\"\n                :tabindex=\"expandleItemIsToggleOnly ? -1 : undefined\"\n                class=\"b-secondary-nav-item__toggle\"\n                variant=\"tertiary\"\n                :aria-label=\"isOpen ? `Collapse ${label}` : `Expand ${label}`\"\n                :aria-expanded=\"!expandleItemIsToggleOnly ? `${isOpen}` : undefined\"\n                :aria-controls=\"!expandleItemIsToggleOnly ? subItemsId : undefined\"\n                @click.stop=\"onToggleClick\"\n            >\n                <template #iconLeft>\n                    <chevron-up-icon v-if=\"isOpen\" class=\"b-secondary-nav-item__icon\" aria-hidden=\"true\" />\n                    <chevron-down-icon v-else class=\"b-secondary-nav-item__icon\" aria-hidden=\"true\" />\n                </template>\n            </bento-button>\n        </div>\n        <Transition :name=\"CONTENT_TRANSITION_NAME\">\n            <div v-if=\"hasSubItems && isOpen\" :id=\"subItemsId\" :style=\"subItemsMaxHeight\">\n                <ul ref=\"subItemsRef\" class=\"b-secondary-nav-item__sub-items\">\n                    <li v-for=\"item in items\" :key=\"item.value\">\n                        <secondary-nav-item\n                            :label=\"item.label\"\n                            :value=\"item.value\"\n                            :items=\"item.items\"\n                            :error-counter=\"item.errorCounter\"\n                            is-sub-item\n                        />\n                    </li>\n                </ul>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script lang=\"ts\" setup>\n    import { SECONDARY_NAV_STATE } from '../../secondary-nav.keys';\n    import { BentoButton } from '@/components/button';\n    import { BentoTag } from '@/components/tag';\n    import { BentoTypography } from '@/components/typography';\n    import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n    import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n    import CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import { computed, inject, ref, watch } from 'vue';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { generateUid } from '@/utils/ts/generate-uid';\n    import { type BentoSecondaryNavItemsItem } from '../../secondary-nav.types';\n    import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { tc } = useI18n<{ message: MessageSchema }>({ messages });\n    const { activeItemValue, updateActiveItemValue, allowExpandableItemNavigation } = inject(SECONDARY_NAV_STATE);\n    const CONTENT_TRANSITION_NAME = 'b-secondary-nav-item__animation--content';\n\n    const props = defineProps({\n  label: null,\n  value: null,\n  items: null,\n  isSubItem: { type: Boolean },\n  errorCounter: null\n});\n\n    const isOpen = ref(false);\n    const subItemsId = generateUid('secondary-nav-sub-items');\n    const subItemsRef = ref<HTMLUListElement>(null);\n    const hasSubItems = computed(() => !!props.items?.length);\n    const isItemSelected = computed(() => activeItemValue.value === props.value);\n    const expandleItemIsToggleOnly = computed(() => hasSubItems.value && !allowExpandableItemNavigation.value);\n    const { contentHeight } = useExpandableContentHeight(subItemsRef, isOpen);\n    const subItemsMaxHeight = computed(() => (contentHeight.value ? { 'max-height': contentHeight.value } : {}));\n\n    const conditionalClasses = computed(() => ({\n        'b-secondary-nav-item__option--active': isItemSelected.value,\n        'b-secondary-nav-item__option--expandable': hasSubItems.value,\n        'b-secondary-nav-item__option--sub-item': props.isSubItem,\n    }));\n\n    const emit = defineEmits([\"click\"]);\n\n    const onClick = (e: MouseEvent) => {\n        emit('click', e);\n        updateActiveItemValue(props.value);\n    };\n\n    const onToggleClick = () => {\n        isOpen.value = !isOpen.value;\n    };\n\n    const hasActiveDescendant = (items: Array<BentoSecondaryNavItemsItem>, value: string): boolean => {\n        return items.some(\n            item => item.value === value || (item.items ? hasActiveDescendant(item.items, value) : false)\n        );\n    };\n\n    const hasDescendantErrors = (items: Array<BentoSecondaryNavItemsItem>): boolean =>\n        items.some(item => !!item.errorCounter || (item.items ? hasDescendantErrors(item.items) : false));\n\n    watch(\n        [activeItemValue, () => props.items],\n        ([activeValue]) => {\n            if (hasSubItems.value && props.items) {\n                if (hasActiveDescendant(props.items, activeValue) || hasDescendantErrors(props.items)) {\n                    isOpen.value = true;\n                }\n            }\n        },\n        { immediate: true, deep: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav}\n     */\n    export default { i18n: { messages } };\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav-item.scss\" />\n","<template>\n    <section class=\"b-secondary-nav-category\" :aria-label=\"label\">\n        <bento-typography el=\"h1\" class=\"b-secondary-nav-category__label\" variant=\"caption\" stronger>{{\n            label\n        }}</bento-typography>\n        <ul class=\"b-secondary-nav__list\">\n            <li v-for=\"item in items\" :key=\"item.value\">\n                <secondary-nav-item\n                    :label=\"item.label\"\n                    :value=\"item.value\"\n                    :items=\"item.items\"\n                    :error-counter=\"item.errorCounter\"\n                />\n            </li>\n        </ul>\n    </section>\n</template>\n\n<script lang=\"ts\" setup>\n    import { BentoTypography } from '@/components/typography';\n    import { SecondaryNavItem } from '../secondary-nav-item';\n    import { type BentoSecondaryNavItemsItem } from '../../secondary-nav.types';\n\n    defineProps({\n  label: null,\n  items: null\n});\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav}\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav-category.scss\" />\n","<template>\n    <nav class=\"b-secondary-nav\">\n        <bento-dropdown\n            v-if=\"isMobile\"\n            :aria-label=\"t('mobileDropdownAriaLabel')\"\n            :items=\"mobileDropdownItems\"\n            :static-categories=\"hasCategories\"\n            :model-value=\"activeItemValue\"\n            :is-option-disabled=\"isMobileOptionDisabled\"\n            @update:model-value=\"updateActiveItemValue\"\n        >\n            <template #display-value=\"{ label }\">\n                <bento-typography el=\"span\">\n                    {{ label }}\n                </bento-typography>\n            </template>\n            <template #default=\"{ label, data }\">\n                <bento-typography\n                    el=\"div\"\n                    :class=\"{ 'b-secondary-nav__option': true, 'b-secondary-nav__nested-option': !!data?.level }\"\n                >\n                    {{ label }}\n                    <bento-tag\n                        v-if=\"data?.errorCounter\"\n                        class=\"b-secondary-nav__error-counter\"\n                        variant=\"red\"\n                        :label=\"data.errorCounter\"\n                        :aria-label=\"tc('errorCount', data.errorCounter)\"\n                    >\n                        <template #icon>\n                            <cross-circle-fill-icon aria-hidden=\"true\" />\n                        </template>\n                    </bento-tag>\n                </bento-typography>\n            </template>\n        </bento-dropdown>\n        <ul v-else class=\"b-secondary-nav__list\">\n            <li v-for=\"item in items\" :key=\"item.label\">\n                <secondary-nav-category\n                    v-if=\"'items' in item && !('value' in item)\"\n                    :label=\"item.label\"\n                    :items=\"item.items\"\n                />\n                <secondary-nav-item\n                    v-else\n                    :label=\"item.label\"\n                    :value=\"item.value\"\n                    :items=\"item.items\"\n                    :error-counter=\"item.errorCounter\"\n                />\n            </li>\n        </ul>\n    </nav>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, provide, readonly, ref, toRef, watch } from 'vue';\n    import { SecondaryNavItem } from './components/secondary-nav-item';\n    import { SecondaryNavCategory } from './components/secondary-nav-category';\n    import { SECONDARY_NAV_STATE } from './secondary-nav.keys';\n    import {\n        type BentoSecondaryNavItems,\n        type BentoSecondaryNavItemsCategory,\n        type BentoSecondaryNavItemsItem,\n        type BentoSecondaryNavState,\n    } from './secondary-nav.types';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoTag } from '@/components/tag';\n    import CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import { useBreakpoints } from '@vueuse/core';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { type BentoListboxOptionItem, type BentoListboxOptions } from '@/types/listbox';\n    import { BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t, tc } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const breakpoints = useBreakpoints({\n        s: BMediaQuerySMax,\n    });\n\n    const isMobile = breakpoints.smallerOrEqual('s');\n    const props = defineProps({\n  items: null,\n  value: null,\n  allowExpandableItemNavigation: { type: Boolean }\n});\n\n    const emit = defineEmits([\"change\"]);\n\n    const isCategory = (item: BentoSecondaryNavItems[number]): item is BentoSecondaryNavItemsCategory =>\n        'items' in item && !('value' in item);\n\n    const mapNestedItems = (items: Array<BentoSecondaryNavItemsItem>, level = 0): BentoListboxOptions =>\n        items.flatMap((item): BentoListboxOptions => {\n            const currentItem: BentoListboxOptionItem = {\n                label: item.label,\n                value: item.value,\n                data: { level, hasSubItems: !!item.items?.length, errorCounter: item.errorCounter },\n            };\n\n            if (item.items?.length) {\n                return [currentItem, ...mapNestedItems(item.items, level + 1)];\n            }\n\n            return [currentItem];\n        });\n\n    const isMobileOptionDisabled = (option: BentoListboxOptionItem): boolean =>\n        !props.allowExpandableItemNavigation && (option.data as { hasSubItems?: boolean })?.hasSubItems;\n\n    const hasCategories = computed(() => props.items.some(item => isCategory(item)));\n    const mobileDropdownItems = computed<BentoListboxOptions>(() => {\n        return props.items.flatMap(item => {\n            if (isCategory(item)) {\n                return [\n                    {\n                        label: item.label,\n                        value: `category-${item.label}`,\n                        items: mapNestedItems(item.items),\n                    } satisfies BentoListboxOptionItem,\n                ];\n            }\n\n            if (item.items?.length) {\n                return mapNestedItems([item]);\n            }\n\n            return [\n                {\n                    label: item.label,\n                    value: item.value,\n                    data: { level: 0, errorCounter: item.errorCounter },\n                } satisfies BentoListboxOptionItem,\n            ];\n        });\n    });\n\n    const flattenNestedItems = (items: Array<BentoSecondaryNavItemsItem>): Array<BentoSecondaryNavItemsItem> =>\n        items.flatMap(item => [item, ...(item.items?.length ? flattenNestedItems(item.items) : [])]);\n\n    const findFirstSelectableNestedItemValue = (items: Array<BentoSecondaryNavItemsItem>): string =>\n        flattenNestedItems(items).find(item => props.allowExpandableItemNavigation || !item.items?.length)?.value ?? '';\n\n    const activeItemValueFallback = computed(() => {\n        if (!props.items.length) {\n            return '';\n        }\n\n        return findFirstSelectableNestedItemValue(\n            props.items.flatMap(item =>\n                isCategory(item) ? flattenNestedItems(item.items) : flattenNestedItems([item])\n            )\n        );\n    });\n\n    const activeItemValue = ref(props.value ?? activeItemValueFallback.value);\n    const updateActiveItemValue = (value: string) => {\n        activeItemValue.value = value;\n        emit('change', value);\n    };\n\n    // The component's state is inject on `secondary-nav-item` to determine the\n    // current active item and to change its value\n    const state: BentoSecondaryNavState = {\n        activeItemValue: readonly(activeItemValue),\n        updateActiveItemValue,\n        allowExpandableItemNavigation: toRef(props, 'allowExpandableItemNavigation'),\n    };\n\n    watch(\n        () => props.value,\n        value => {\n            if (value !== undefined) {\n                activeItemValue.value = value;\n            }\n        }\n    );\n\n    provide(SECONDARY_NAV_STATE, state);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Secondary Nav offers users a structured way to access information.\n     * It also provides a clear hierarchy for users to understand and navigate through various information.\n     *\n     * @example\n     * import { BentoSecondaryNav } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSecondaryNav },\n     *     template: `\n     *          <bento-secondary-nav :value=\"value\" :items=\"items\" />\n     *     `,\n     *     setup() {\n     *         const value = ref(2) // Active item value\n     *         const items: BentoSecondaryNavItemInfo[] = [\n     *              { label: 'Option 1', value: 1 },\n     *              { label: 'Option 2', value: 2 },\n     *         ];\n     *         return { items, value };\n     *     }\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-secondary-nav',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav.scss\" />\n"],"names":["SECONDARY_NAV_STATE","__default__$2","messages$1","tc","useI18n","activeItemValue","updateActiveItemValue","allowExpandableItemNavigation","inject","CONTENT_TRANSITION_NAME","isOpen","ref","subItemsId","generateUid","subItemsRef","hasSubItems","computed","props","isItemSelected","expandleItemIsToggleOnly","contentHeight","useExpandableContentHeight","subItemsMaxHeight","conditionalClasses","onClick","e","emit","onToggleClick","hasActiveDescendant","items","value","item","hasDescendantErrors","watch","activeValue","__default__$1","__default__","messages","t","breakpoints","useBreakpoints","BMediaQuerySMax","isMobile","isCategory","mapNestedItems","level","currentItem","isMobileOptionDisabled","option","hasCategories","mobileDropdownItems","flattenNestedItems","findFirstSelectableNestedItemValue","activeItemValueFallback","state","readonly","toRef","provide"],"mappings":"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"}
+{"version":3,"file":"secondary-nav.BMsZqzdr.js","sources":["../../src/components/secondary-nav/secondary-nav.keys.ts","../../src/components/secondary-nav/components/secondary-nav-item/secondary-nav-item.vue","../../src/components/secondary-nav/components/secondary-nav-category/secondary-nav-category.vue","../../src/components/secondary-nav/secondary-nav.vue"],"sourcesContent":["import { type InjectionKey } from 'vue';\nimport { type BentoSecondaryNavState } from './secondary-nav.types';\n\nexport const SECONDARY_NAV_STATE = Symbol('secondary nav state') as InjectionKey<BentoSecondaryNavState>;\n","<template>\n    <div class=\"b-secondary-nav-item\">\n        <div class=\"b-secondary-nav-item__wrapper\">\n            <button\n                class=\"b-secondary-nav-item__option\"\n                :class=\"conditionalClasses\"\n                :aria-current=\"isItemSelected ? 'page' : undefined\"\n                :aria-expanded=\"expandleItemIsToggleOnly ? `${isOpen}` : undefined\"\n                :aria-controls=\"expandleItemIsToggleOnly ? subItemsId : undefined\"\n                @click=\"expandleItemIsToggleOnly ? onToggleClick() : onClick($event)\"\n            >\n                <bento-typography class=\"b-secondary-nav-item__title\" variant=\"body\" stronger>\n                    {{ label }}\n                </bento-typography>\n                <bento-tag\n                    v-if=\"errorCounter\"\n                    class=\"b-secondary-nav-item__error-counter\"\n                    variant=\"red\"\n                    :label=\"errorCounter.toString()\"\n                    :aria-label=\"tc('errorCount', errorCounter)\"\n                >\n                    <template #icon>\n                        <cross-circle-fill-icon aria-hidden=\"true\" />\n                    </template>\n                </bento-tag>\n            </button>\n            <bento-button\n                v-if=\"hasSubItems\"\n                :aria-hidden=\"expandleItemIsToggleOnly\"\n                :tabindex=\"expandleItemIsToggleOnly ? -1 : undefined\"\n                class=\"b-secondary-nav-item__toggle\"\n                variant=\"tertiary\"\n                :aria-label=\"isOpen ? `Collapse ${label}` : `Expand ${label}`\"\n                :aria-expanded=\"!expandleItemIsToggleOnly ? `${isOpen}` : undefined\"\n                :aria-controls=\"!expandleItemIsToggleOnly ? subItemsId : undefined\"\n                @click.stop=\"onToggleClick\"\n            >\n                <template #iconLeft>\n                    <chevron-up-icon v-if=\"isOpen\" class=\"b-secondary-nav-item__icon\" aria-hidden=\"true\" />\n                    <chevron-down-icon v-else class=\"b-secondary-nav-item__icon\" aria-hidden=\"true\" />\n                </template>\n            </bento-button>\n        </div>\n        <Transition :name=\"CONTENT_TRANSITION_NAME\">\n            <div v-if=\"hasSubItems && isOpen\" :id=\"subItemsId\" :style=\"subItemsMaxHeight\">\n                <ul ref=\"subItemsRef\" class=\"b-secondary-nav-item__sub-items\">\n                    <li v-for=\"item in items\" :key=\"item.value\">\n                        <secondary-nav-item\n                            :label=\"item.label\"\n                            :value=\"item.value\"\n                            :items=\"item.items\"\n                            :error-counter=\"item.errorCounter\"\n                            is-sub-item\n                        />\n                    </li>\n                </ul>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script lang=\"ts\" setup>\n    import { SECONDARY_NAV_STATE } from '../../secondary-nav.keys';\n    import { BentoButton } from '@/components/button';\n    import { BentoTag } from '@/components/tag';\n    import { BentoTypography } from '@/components/typography';\n    import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n    import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n    import CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import { computed, inject, ref, watch } from 'vue';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { generateUid } from '@/utils/ts/generate-uid';\n    import { type BentoSecondaryNavItemsItem } from '../../secondary-nav.types';\n    import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { tc } = useI18n<{ message: MessageSchema }>({ messages });\n    const { activeItemValue, updateActiveItemValue, allowExpandableItemNavigation } = inject(SECONDARY_NAV_STATE);\n    const CONTENT_TRANSITION_NAME = 'b-secondary-nav-item__animation--content';\n\n    const props = defineProps({\n  label: null,\n  value: null,\n  items: null,\n  isSubItem: { type: Boolean },\n  errorCounter: null\n});\n\n    const isOpen = ref(false);\n    const subItemsId = generateUid('secondary-nav-sub-items');\n    const subItemsRef = ref<HTMLUListElement>(null);\n    const hasSubItems = computed(() => !!props.items?.length);\n    const isItemSelected = computed(() => activeItemValue.value === props.value);\n    const expandleItemIsToggleOnly = computed(() => hasSubItems.value && !allowExpandableItemNavigation.value);\n    const { contentHeight } = useExpandableContentHeight(subItemsRef, isOpen);\n    const subItemsMaxHeight = computed(() => (contentHeight.value ? { 'max-height': contentHeight.value } : {}));\n\n    const conditionalClasses = computed(() => ({\n        'b-secondary-nav-item__option--active': isItemSelected.value,\n        'b-secondary-nav-item__option--expandable': hasSubItems.value,\n        'b-secondary-nav-item__option--sub-item': props.isSubItem,\n    }));\n\n    const emit = defineEmits([\"click\"]);\n\n    const onClick = (e: MouseEvent) => {\n        emit('click', e);\n        updateActiveItemValue(props.value);\n    };\n\n    const onToggleClick = () => {\n        isOpen.value = !isOpen.value;\n    };\n\n    const hasActiveDescendant = (items: Array<BentoSecondaryNavItemsItem>, value: string): boolean => {\n        return items.some(\n            item => item.value === value || (item.items ? hasActiveDescendant(item.items, value) : false)\n        );\n    };\n\n    const hasDescendantErrors = (items: Array<BentoSecondaryNavItemsItem>): boolean =>\n        items.some(item => !!item.errorCounter || (item.items ? hasDescendantErrors(item.items) : false));\n\n    watch(\n        [activeItemValue, () => props.items],\n        ([activeValue]) => {\n            if (hasSubItems.value && props.items) {\n                if (hasActiveDescendant(props.items, activeValue) || hasDescendantErrors(props.items)) {\n                    isOpen.value = true;\n                }\n            }\n        },\n        { immediate: true, deep: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav}\n     */\n    export default { i18n: { messages } };\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav-item.scss\" />\n","<template>\n    <section class=\"b-secondary-nav-category\" :aria-label=\"label\">\n        <bento-typography el=\"h1\" class=\"b-secondary-nav-category__label\" variant=\"caption\" stronger>{{\n            label\n        }}</bento-typography>\n        <ul class=\"b-secondary-nav__list\">\n            <li v-for=\"item in items\" :key=\"item.value\">\n                <secondary-nav-item\n                    :label=\"item.label\"\n                    :value=\"item.value\"\n                    :items=\"item.items\"\n                    :error-counter=\"item.errorCounter\"\n                />\n            </li>\n        </ul>\n    </section>\n</template>\n\n<script lang=\"ts\" setup>\n    import { BentoTypography } from '@/components/typography';\n    import { SecondaryNavItem } from '../secondary-nav-item';\n    import { type BentoSecondaryNavItemsItem } from '../../secondary-nav.types';\n\n    defineProps({\n  label: null,\n  items: null\n});\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav}\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav-category.scss\" />\n","<template>\n    <nav class=\"b-secondary-nav\">\n        <bento-dropdown\n            v-if=\"isMobile\"\n            :aria-label=\"t('mobileDropdownAriaLabel')\"\n            :items=\"mobileDropdownItems\"\n            :static-categories=\"hasCategories\"\n            :model-value=\"activeItemValue\"\n            :is-option-disabled=\"isMobileOptionDisabled\"\n            @update:model-value=\"updateActiveItemValue\"\n        >\n            <template #display-value=\"{ label }\">\n                <bento-typography el=\"span\">\n                    {{ label }}\n                </bento-typography>\n            </template>\n            <template #default=\"{ label, data }\">\n                <bento-typography\n                    el=\"div\"\n                    :class=\"{ 'b-secondary-nav__option': true, 'b-secondary-nav__nested-option': !!data?.level }\"\n                >\n                    {{ label }}\n                    <bento-tag\n                        v-if=\"data?.errorCounter\"\n                        class=\"b-secondary-nav__error-counter\"\n                        variant=\"red\"\n                        :label=\"data.errorCounter\"\n                        :aria-label=\"tc('errorCount', data.errorCounter)\"\n                    >\n                        <template #icon>\n                            <cross-circle-fill-icon aria-hidden=\"true\" />\n                        </template>\n                    </bento-tag>\n                </bento-typography>\n            </template>\n        </bento-dropdown>\n        <ul v-else class=\"b-secondary-nav__list\">\n            <li v-for=\"item in items\" :key=\"item.label\">\n                <secondary-nav-category\n                    v-if=\"'items' in item && !('value' in item)\"\n                    :label=\"item.label\"\n                    :items=\"item.items\"\n                />\n                <secondary-nav-item\n                    v-else\n                    :label=\"item.label\"\n                    :value=\"item.value\"\n                    :items=\"item.items\"\n                    :error-counter=\"item.errorCounter\"\n                />\n            </li>\n        </ul>\n    </nav>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, provide, readonly, ref, toRef, watch } from 'vue';\n    import { SecondaryNavItem } from './components/secondary-nav-item';\n    import { SecondaryNavCategory } from './components/secondary-nav-category';\n    import { SECONDARY_NAV_STATE } from './secondary-nav.keys';\n    import {\n        type BentoSecondaryNavItems,\n        type BentoSecondaryNavItemsCategory,\n        type BentoSecondaryNavItemsItem,\n        type BentoSecondaryNavState,\n    } from './secondary-nav.types';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoTag } from '@/components/tag';\n    import CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import { useBreakpoints } from '@vueuse/core';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { type BentoListboxOptionItem, type BentoListboxOptions } from '@/types/listbox';\n    import { BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t, tc } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const breakpoints = useBreakpoints({\n        s: BMediaQuerySMax,\n    });\n\n    const isMobile = breakpoints.smallerOrEqual('s');\n    const props = defineProps({\n  items: null,\n  value: null,\n  allowExpandableItemNavigation: { type: Boolean }\n});\n\n    const emit = defineEmits([\"change\"]);\n\n    const isCategory = (item: BentoSecondaryNavItems[number]): item is BentoSecondaryNavItemsCategory =>\n        'items' in item && !('value' in item);\n\n    const mapNestedItems = (items: Array<BentoSecondaryNavItemsItem>, level = 0): BentoListboxOptions =>\n        items.flatMap((item): BentoListboxOptions => {\n            const currentItem: BentoListboxOptionItem = {\n                label: item.label,\n                value: item.value,\n                data: { level, hasSubItems: !!item.items?.length, errorCounter: item.errorCounter },\n            };\n\n            if (item.items?.length) {\n                return [currentItem, ...mapNestedItems(item.items, level + 1)];\n            }\n\n            return [currentItem];\n        });\n\n    const isMobileOptionDisabled = (option: BentoListboxOptionItem): boolean =>\n        !props.allowExpandableItemNavigation && (option.data as { hasSubItems?: boolean })?.hasSubItems;\n\n    const hasCategories = computed(() => props.items.some(item => isCategory(item)));\n    const mobileDropdownItems = computed<BentoListboxOptions>(() => {\n        return props.items.flatMap(item => {\n            if (isCategory(item)) {\n                return [\n                    {\n                        label: item.label,\n                        value: `category-${item.label}`,\n                        items: mapNestedItems(item.items),\n                    } satisfies BentoListboxOptionItem,\n                ];\n            }\n\n            if (item.items?.length) {\n                return mapNestedItems([item]);\n            }\n\n            return [\n                {\n                    label: item.label,\n                    value: item.value,\n                    data: { level: 0, errorCounter: item.errorCounter },\n                } satisfies BentoListboxOptionItem,\n            ];\n        });\n    });\n\n    const flattenNestedItems = (items: Array<BentoSecondaryNavItemsItem>): Array<BentoSecondaryNavItemsItem> =>\n        items.flatMap(item => [item, ...(item.items?.length ? flattenNestedItems(item.items) : [])]);\n\n    const findFirstSelectableNestedItemValue = (items: Array<BentoSecondaryNavItemsItem>): string =>\n        flattenNestedItems(items).find(item => props.allowExpandableItemNavigation || !item.items?.length)?.value ?? '';\n\n    const activeItemValueFallback = computed(() => {\n        if (!props.items.length) {\n            return '';\n        }\n\n        return findFirstSelectableNestedItemValue(\n            props.items.flatMap(item =>\n                isCategory(item) ? flattenNestedItems(item.items) : flattenNestedItems([item])\n            )\n        );\n    });\n\n    const activeItemValue = ref(props.value ?? activeItemValueFallback.value);\n    const updateActiveItemValue = (value: string) => {\n        activeItemValue.value = value;\n        emit('change', value);\n    };\n\n    // The component's state is inject on `secondary-nav-item` to determine the\n    // current active item and to change its value\n    const state: BentoSecondaryNavState = {\n        activeItemValue: readonly(activeItemValue),\n        updateActiveItemValue,\n        allowExpandableItemNavigation: toRef(props, 'allowExpandableItemNavigation'),\n    };\n\n    watch(\n        () => props.value,\n        value => {\n            if (value !== undefined) {\n                activeItemValue.value = value;\n            }\n        }\n    );\n\n    provide(SECONDARY_NAV_STATE, state);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Secondary Nav offers users a structured way to access information.\n     * It also provides a clear hierarchy for users to understand and navigate through various information.\n     *\n     * @example\n     * import { BentoSecondaryNav } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSecondaryNav },\n     *     template: `\n     *          <bento-secondary-nav :value=\"value\" :items=\"items\" />\n     *     `,\n     *     setup() {\n     *         const value = ref(2) // Active item value\n     *         const items: BentoSecondaryNavItemInfo[] = [\n     *              { label: 'Option 1', value: 1 },\n     *              { label: 'Option 2', value: 2 },\n     *         ];\n     *         return { items, value };\n     *     }\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-secondary-nav',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav.scss\" />\n"],"names":["SECONDARY_NAV_STATE","__default__$2","messages$1","tc","useI18n","activeItemValue","updateActiveItemValue","allowExpandableItemNavigation","inject","CONTENT_TRANSITION_NAME","isOpen","ref","subItemsId","generateUid","subItemsRef","hasSubItems","computed","props","isItemSelected","expandleItemIsToggleOnly","contentHeight","useExpandableContentHeight","subItemsMaxHeight","conditionalClasses","onClick","e","emit","onToggleClick","hasActiveDescendant","items","value","item","hasDescendantErrors","watch","activeValue","__default__$1","__default__","messages","t","breakpoints","useBreakpoints","BMediaQuerySMax","isMobile","isCategory","mapNestedItems","level","currentItem","isMobileOptionDisabled","option","hasCategories","mobileDropdownItems","flattenNestedItems","findFirstSelectableNestedItemValue","activeItemValueFallback","state","readonly","toRef","provide"],"mappings":"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"}

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

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

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

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

package/dist/chunks/select-avatar-filter.DzuDTc_M.js

@@ -0,0 +1,51 @@
+import { defineComponent as s } from "vue";
+import { c as n, S as l, e as i } from "./filter-bar.U5VrFM6-.js";
+import { B as p } from "./avatar.BN4MI-42.js";
+import { n as c } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+const f = s({
+  name: "bento-select-avatar-filter",
+  components: {
+    BentoSelectFilter: i,
+    BentoAvatar: p
+  },
+  props: {
+    ...l,
+    /**
+     * List of options that are needed to setup the country filter
+     * Available options:
+     *   - multiple: If "true", the user will be able to select multiple items.
+     *   - listboxItems: The option elements to populate the filter with {@see BentoSelectCountryFilterOptions}
+     */
+    options: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: [n.INPUT, n.UPDATE],
+  setup(o, { emit: e }) {
+    return {
+      // Enums
+      BentoFilterEvent: n,
+      // Methods
+      onUpdate: (t) => e(n.UPDATE, t)
+    };
+  }
+});
+var m = function() {
+  var e = this, r = e._self._c;
+  return e._self._setupProxy, r("bento-select-filter", e._b({ attrs: { field: e.field, label: e.label }, on: { update: e.onUpdate, input: (t) => e.$emit(e.BentoFilterEvent.INPUT, t) }, scopedSlots: e._u([{ key: "default", fn: function({ label: t, data: a }) {
+    return [r("bento-avatar", { attrs: { username: t, src: a } })];
+  } }]) }, "bento-select-filter", e.$props, !1));
+}, _ = [], u = /* @__PURE__ */ c(
+  f,
+  m,
+  _,
+  !1,
+  null,
+  null
+);
+const F = u.exports;
+export {
+  F as default
+};
+//# sourceMappingURL=select-avatar-filter.DzuDTc_M.js.map

package/dist/chunks/select-avatar-filter.DzuDTc_M.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-avatar-filter.DzuDTc_M.js","sources":["../../src/components/filter-bar/components/select-filter/variants/select-avatar-filter/select-avatar-filter.vue"],"sourcesContent":["<template>\n    <bento-select-filter\n        v-slot=\"{ label: slotLabel, data }\"\n        v-bind=\"$props\"\n        :field=\"field\"\n        :label=\"label\"\n        @update=\"onUpdate\"\n        @input=\"e => $emit(BentoFilterEvent.INPUT, e)\"\n    >\n        <bento-avatar :username=\"slotLabel\" :src=\"data\" />\n    </bento-select-filter>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, type PropType } from 'vue';\n    import { type BentoListboxSelectedValue } from '@/types/listbox';\n    import { BentoSelectFilter } from '../../index';\n    import { BentoFilterEvent, type BentoSelectAvatarFilterOptions } from '@/components/filter-bar/filter-bar.types';\n    import { BentoAvatar } from '@/components/avatar';\n    import SelectFilterProps from '@/components/filter-bar/components/select-filter/select-filter.props';\n\n    /**\n     * The Select Avatar filter displays a listbox of avatar items\n     * passed in the \"options.listboxItems\" property.\n     *\n     * @example\n     * import { BentoSelectAvatarFilter } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSelectAvatarFilter },\n     *     template: `\n     *          <bento-select-avatar-filter\n     *              :field=\"avatar\"\n     *              :label=\"Avatar\"\n     *              :options=\"{\n     *                  listboxItems: [{\n     *                      label: 'Avatar 1',\n     *                      value: 'avatar-2'\n     *                  }, {\n     *                      label: 'Avatar 2',\n     *                      value: 'avatar-2'\n     *                  }],\n     *                  :multiple=\"false\"\n     *              }\"\n     *              value=\"avatar-2\"\n     *              @update=\"updateFilterHandler\"\n     *          >\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-select-avatar-filter',\n        components: {\n            BentoSelectFilter,\n            BentoAvatar,\n        },\n        props: {\n            ...SelectFilterProps,\n\n            /**\n             * List of options that are needed to setup the country filter\n             * Available options:\n             *   - multiple: If \"true\", the user will be able to select multiple items.\n             *   - listboxItems: The option elements to populate the filter with {@see BentoSelectCountryFilterOptions}\n             */\n            options: {\n                type: Object as PropType<BentoSelectAvatarFilterOptions>,\n                default: undefined,\n            },\n        },\n        emits: [BentoFilterEvent.INPUT, BentoFilterEvent.UPDATE],\n        setup(_, { emit }) {\n            const onUpdate = (selectedValue: BentoListboxSelectedValue) => emit(BentoFilterEvent.UPDATE, selectedValue);\n\n            return {\n                // Enums\n                BentoFilterEvent,\n\n                // Methods\n                onUpdate,\n            };\n        },\n    });\n</script>\n"],"names":["_sfc_main","defineComponent","BentoSelectFilter","BentoAvatar","SelectFilterProps","BentoFilterEvent","_","emit","selectedValue"],"mappings":";;;;AAkDA,MAAAA,IAAAC,EAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,mBAAAC;AAAA,IACA,aAAAC;AAAA,EAAA;AAAA,EAEA,OAAA;AAAA,IACA,GAAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IAAA;AAAA,EACA;AAAA,EAEA,OAAA,CAAAC,EAAA,OAAAA,EAAA,MAAA;AAAA,EACA,MAAAC,GAAA,EAAA,MAAAC,KAAA;AAGA,WAAA;AAAA;AAAA,MAEA,kBAAAF;AAAA;AAAA,MAGA,UAPA,CAAAG,MAAAD,EAAAF,EAAA,QAAAG,CAAA;AAAA,IAOA;AAAA,EAEA;AACA,CAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/select-country-filter.DfLRX6oH.js

@@ -0,0 +1,55 @@
+import { defineComponent as m, ref as i, watch as f, computed as _ } from "vue";
+import { u as d } from "./use-country-items.CM_xQV9g.js";
+import { c as s, S as v, e as y } from "./filter-bar.U5VrFM6-.js";
+import { a as l } from "./country.types.BCOrkmVK.js";
+import { B as b } from "./typography.Cd386LC_.js";
+import { n as I } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+const x = {
+  name: "bento-select-country-filter"
+}, B = /* @__PURE__ */ m({
+  ...x,
+  props: {
+    ...v,
+    /**
+     * List of options that are needed to setup the country filter
+     * Available options:
+     *   - multiple: If "true", the user will be able to select multiple items.
+     *   - listboxItems: The option elements to populate the filter with {@see BentoSelectCountryFilterOptions}
+     *   - variant: Which label variant to display for the option item.
+     */
+    options: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: [s.INPUT, s.UPDATE],
+  setup(r, { emit: t }) {
+    const e = r, o = i(e.options?.variant ?? l.NAME), n = i(e.options?.listboxItems);
+    f([() => e.options?.variant, () => e.options?.listboxItems], () => {
+      o.value = e.options?.variant ?? l.NAME, n.value = e.options?.listboxItems;
+    });
+    const p = (u) => t(s.UPDATE, u), a = d(o, n), c = _(() => ({
+      ...e?.options ? e.options : {},
+      listboxItems: a.value
+    }));
+    return { __sfc: !0, props: e, emit: t, variant: o, listboxItems: n, onUpdate: p, countryItems: a, countryOptions: c, BentoFilterEvent: s, BentoTypography: b, BentoSelectFilter: y };
+  }
+});
+var F = function() {
+  var t = this, e = t._self._c, o = t._self._setupProxy;
+  return e(o.BentoSelectFilter, t._b({ attrs: { field: t.field, label: t.label, options: o.countryOptions }, on: { update: o.onUpdate, input: (n) => t.$emit(o.BentoFilterEvent.INPUT, n) }, scopedSlots: t._u([{ key: "default", fn: function({ label: n }) {
+    return [e(o.BentoTypography, { attrs: { el: "span" } }, [t._v(t._s(n))])];
+  } }]) }, "bento-select-filter", o.props, !1));
+}, E = [], P = /* @__PURE__ */ I(
+  B,
+  F,
+  E,
+  !1,
+  null,
+  null
+);
+const N = P.exports;
+export {
+  N as default
+};
+//# sourceMappingURL=select-country-filter.DfLRX6oH.js.map

package/dist/chunks/select-country-filter.DfLRX6oH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-country-filter.DfLRX6oH.js","sources":["../../src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue"],"sourcesContent":["<template>\n    <bento-select-filter\n        v-slot=\"{ label: slotLabel }\"\n        v-bind=\"props\"\n        :field=\"field\"\n        :label=\"label\"\n        :options=\"countryOptions\"\n        @update=\"onUpdate\"\n        @input=\"e => $emit(BentoFilterEvent.INPUT, e)\"\n    >\n        <bento-typography el=\"span\">{{ slotLabel }}</bento-typography>\n    </bento-select-filter>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, type PropType, ref, watch } from 'vue';\n    import { useCountryItems } from '@/components/dropdown/components/variants/dropdown-country/composables/use-country-items';\n    import { type BentoListboxSelectedValue } from '@/types/listbox';\n    import { BentoFilterEvent, type BentoSelectCountryFilterOptions } from '@/components/filter-bar/filter-bar.types';\n    import { BentoCountryVariant } from '@/components/country';\n    import { BentoTypography } from '@/components/typography';\n    import BentoSelectFilter from '../../select-filter.vue';\n    import SelectFilterProps from '@/components/filter-bar/components/select-filter/select-filter.props';\n\n    const props = defineProps({\n        ...SelectFilterProps,\n\n        /**\n         * List of options that are needed to setup the country filter\n         * Available options:\n         *   - multiple: If \"true\", the user will be able to select multiple items.\n         *   - listboxItems: The option elements to populate the filter with {@see BentoSelectCountryFilterOptions}\n         *   - variant: Which label variant to display for the option item.\n         */\n        options: {\n            type: Object as PropType<BentoSelectCountryFilterOptions>,\n            default: undefined,\n        },\n    });\n\n    const emit = defineEmits([BentoFilterEvent.INPUT, BentoFilterEvent.UPDATE]);\n\n    const variant = ref(props.options?.variant ?? BentoCountryVariant.NAME);\n    const listboxItems = ref(props.options?.listboxItems);\n\n    watch([() => props.options?.variant, () => props.options?.listboxItems], () => {\n        variant.value = props.options?.variant ?? BentoCountryVariant.NAME;\n        listboxItems.value = props.options?.listboxItems;\n    });\n\n    const onUpdate = (selectedValue: BentoListboxSelectedValue) => emit(BentoFilterEvent.UPDATE, selectedValue);\n\n    const countryItems = useCountryItems(variant, listboxItems);\n    const countryOptions = computed(() => {\n        return {\n            ...(props?.options ? props.options : {}),\n            listboxItems: countryItems.value,\n        };\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The Select Country filter displays a listbox of country items\n     * passed in the \"options.listboxItems\" property.\n     *\n     * @example\n     * import { BentoSelectCountryFilter } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSelectCountryFilter },\n     *     template: `\n     *          <bento-select-country-filter\n     *              :field=\"country\"\n     *              :label=\"Country\"\n     *              :options=\"{\n     *                  listboxItems: [{\n     *                      value: \"NL\",\n     *                  }, {\n     *                      value: \"BE\",\n     *                  }],\n     *                  variant: 'capital'\n     *              }\"\n     *              :value=\"BE\"\n     *              @update=\"updateFilterHandler\"\n     *          >\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-select-country-filter',\n    };\n</script>\n"],"names":["__default__","variant","ref","props","BentoCountryVariant","listboxItems","watch","onUpdate","selectedValue","emit","BentoFilterEvent","countryItems","useCountryItems","countryOptions","computed"],"mappings":";;;;;;AAyFI,MAAAA,IAAe;AAAA,EACX,MAAM;AACV;;;;;;;;;;;;;;;;;;iBAjDMC,IAAUC,EAAIC,EAAM,SAAS,WAAWC,EAAoB,IAAI,GAChEC,IAAeH,EAAIC,EAAM,SAAS,YAAY;AAEpD,IAAAG,EAAM,CAAC,MAAMH,EAAM,SAAS,SAAS,MAAMA,EAAM,SAAS,YAAY,GAAG,MAAM;AAC3E,MAAAF,EAAQ,QAAQE,EAAM,SAAS,WAAWC,EAAoB,MAC9DC,EAAa,QAAQF,EAAM,SAAS;AAAA,IACxC,CAAC;AAED,UAAMI,IAAW,CAACC,MAA6CC,EAAKC,EAAiB,QAAQF,CAAa,GAEpGG,IAAeC,EAAgBX,GAASI,CAAY,GACpDQ,IAAiBC,EAAS,OACrB;AAAA,MACH,GAAIX,GAAO,UAAUA,EAAM,UAAU,CAAA;AAAA,MACrC,cAAcQ,EAAa;AAAA,IAAA,EAElC;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/select-currency-filter.DZdYgqq3.js

@@ -0,0 +1,89 @@
+import { defineComponent as f, ref as a, watch as p, computed as b } from "vue";
+import { c as r, S as d, e as _ } from "./filter-bar.U5VrFM6-.js";
+import { f as v } from "./dropdown.Dd8RNGXv.js";
+import { L as h } from "./listbox-option-tag.JQxyZV07.js";
+import { n as x } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+const I = f({
+  name: "bento-select-currency-filter",
+  components: {
+    BentoSelectFilter: _,
+    ListboxOptionTag: h
+  },
+  props: {
+    ...d,
+    /**
+     * List of options that are needed to setup the country filter
+     * Available options:
+     *   - multiple: If "true", the user will be able to select multiple items.
+     *   - listboxItems: The option elements to populate the filter with {@see BentoSelectCurrencyFilterOptions}
+     */
+    options: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: [r.INPUT, r.UPDATE],
+  setup(t, { emit: e }) {
+    const l = (s) => {
+      e(r.UPDATE, s);
+    }, n = a([]);
+    p(
+      () => t.options?.listboxItems,
+      (s) => {
+        n.value = s || [];
+      },
+      { immediate: !0 }
+    );
+    const i = t.options?.search ? t.options.search : {
+      debounceTime: 500,
+      searchEvent: async (s) => {
+        if (!s) {
+          n.value = t.options?.listboxItems || [];
+          return;
+        }
+        const u = (t.options?.listboxItems || []).map((o) => ({
+          ...o,
+          label: `${o.value} ${o.label}`
+        })), m = v(
+          a(s),
+          a(u),
+          t.options?.search?.searchEvent,
+          a(!1)
+        ).value?.map((o) => ({
+          ...o,
+          label: o.label.substring(o.value.length + 1)
+        }));
+        n.value = m;
+      }
+    }, c = b(() => ({
+      ...t.options,
+      search: i,
+      listboxItems: n.value
+    }));
+    return {
+      // Enums
+      BentoFilterEvent: r,
+      // Methods
+      onUpdate: l,
+      internalOptions: c
+    };
+  }
+});
+var F = function() {
+  var e = this, l = e._self._c;
+  return e._self._setupProxy, l("bento-select-filter", e._b({ attrs: { field: e.field, label: e.label, options: e.internalOptions }, on: { update: e.onUpdate, input: (n) => e.$emit(e.BentoFilterEvent.INPUT, n) }, scopedSlots: e._u([{ key: "default", fn: function(n) {
+    return [l("listbox-option-tag", { attrs: { option: n } })];
+  } }]) }, "bento-select-filter", e.$props, !1));
+}, y = [], E = /* @__PURE__ */ x(
+  I,
+  F,
+  y,
+  !1,
+  null,
+  null
+);
+const O = E.exports;
+export {
+  O as default
+};
+//# sourceMappingURL=select-currency-filter.DZdYgqq3.js.map

package/dist/chunks/select-currency-filter.DZdYgqq3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-currency-filter.DZdYgqq3.js","sources":["../../src/components/filter-bar/components/select-filter/variants/select-currency-filter/select-currency-filter.vue"],"sourcesContent":["<template>\n    <bento-select-filter\n        v-slot=\"slotProps\"\n        v-bind=\"$props\"\n        :field=\"field\"\n        :label=\"label\"\n        :options=\"internalOptions\"\n        @update=\"onUpdate\"\n        @input=\"e => $emit(BentoFilterEvent.INPUT, e)\"\n    >\n        <listbox-option-tag :option=\"slotProps\" />\n    </bento-select-filter>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, type PropType, ref, watch } from 'vue';\n    import { type BentoListboxSelectedValue } from '@/types/listbox';\n    import { BentoSelectFilter } from '../../index';\n    import { ListboxOptionTag } from '@/internal';\n    import { BentoFilterEvent, type BentoSelectCurrencyFilterOptions } from '@/components/filter-bar/filter-bar.types';\n    import SelectFilterProps from '@/components/filter-bar/components/select-filter/select-filter.props';\n    import { useSearchBarFilter } from '@/components/search-bar';\n    import { type BentoCurrencyListboxOptions } from '@/components/dropdown';\n\n    /**\n     * The Select Country filter displays a listbox of country items\n     * passed in the \"options.listboxItems\" property.\n     *\n     * @example\n     * import { BentoCurrencyISOCode, BentoSelectCurrencyFilter } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSelectCurrencyFilter },\n     *     template: `\n     *          <bento-select-currency-filter\n     *              :field=\"currency\"\n     *              :label=\"Currency\"\n     *              :options=\"{\n     *                  listboxItems: [{\n     *                      label: 'Euro',\n     *                      value: BentoCurrencyISOCode.EUR,\n     *                  }, {\n     *                      label: 'US Dollars',\n     *                      value: BentoCurrencyISOCode.USD,\n     *                  }],\n     *                  multiple=\"false\",\n     *                  isOptionsDisabled=\"option => option.value === BentoCurrencyISOCode.USD\"\n     *              }\"\n     *              :value=\"BentoCurrencyISOCode.EUR\"\n     *              @update=\"updateFilterHandler\"\n     *          >\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-select-currency-filter',\n        components: {\n            BentoSelectFilter,\n            ListboxOptionTag,\n        },\n        props: {\n            ...SelectFilterProps,\n\n            /**\n             * List of options that are needed to setup the country filter\n             * Available options:\n             *   - multiple: If \"true\", the user will be able to select multiple items.\n             *   - listboxItems: The option elements to populate the filter with {@see BentoSelectCurrencyFilterOptions}\n             */\n            options: {\n                type: Object as PropType<BentoSelectCurrencyFilterOptions>,\n                default: undefined,\n            },\n        },\n        emits: [BentoFilterEvent.INPUT, BentoFilterEvent.UPDATE],\n        setup(props, { emit }) {\n            const onUpdate = (selectedValue: BentoListboxSelectedValue) => {\n                emit(BentoFilterEvent.UPDATE, selectedValue);\n            };\n\n            // If the parent updates the list, the local reference needs to be updated so the UI isn't empty on load\n            const filteredItems = ref<BentoCurrencyListboxOptions>([]);\n\n            watch(\n                () => props.options?.listboxItems,\n                newList => {\n                    filteredItems.value = newList || [];\n                },\n                { immediate: true }\n            );\n\n            const search = props.options?.search\n                ? props.options.search\n                : {\n                      debounceTime: 500,\n                      searchEvent: async (searchTerm: string) => {\n                          // Combine value and label to be able to search by the currency code\n                          // If searchTerm is empty, reset to the full list\n                          if (!searchTerm) {\n                              filteredItems.value = props.options?.listboxItems || [];\n                              return;\n                          }\n\n                          const searchableItems = (props.options?.listboxItems || []).map(item => ({\n                              ...item,\n                              label: `${item.value} ${item.label}`,\n                          }));\n\n                          const searchResults = useSearchBarFilter(\n                              ref(searchTerm),\n                              ref<BentoCurrencyListboxOptions>(searchableItems),\n                              props.options?.search?.searchEvent,\n                              ref(false)\n                          ).value;\n\n                          // Restore original labels by removing the prepended value\n                          const normalizedResults = searchResults?.map(result => ({\n                              ...result,\n                              label: result.label.substring(result.value.length + 1),\n                          }));\n\n                          filteredItems.value = normalizedResults;\n                      },\n                  };\n\n            const internalOptions = computed(() => ({\n                ...props.options,\n                search: search,\n                listboxItems: filteredItems.value,\n            }));\n\n            return {\n                // Enums\n                BentoFilterEvent,\n\n                // Methods\n                onUpdate,\n                internalOptions,\n            };\n        },\n    });\n</script>\n"],"names":["_sfc_main","defineComponent","BentoSelectFilter","ListboxOptionTag","SelectFilterProps","BentoFilterEvent","props","emit","onUpdate","selectedValue","filteredItems","ref","watch","newList","search","searchTerm","searchableItems","item","normalizedResults","useSearchBarFilter","result","internalOptions","computed"],"mappings":";;;;;AAsDA,MAAAA,IAAAC,EAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,mBAAAC;AAAA,IACA,kBAAAC;AAAA,EAAA;AAAA,EAEA,OAAA;AAAA,IACA,GAAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IAAA;AAAA,EACA;AAAA,EAEA,OAAA,CAAAC,EAAA,OAAAA,EAAA,MAAA;AAAA,EACA,MAAAC,GAAA,EAAA,MAAAC,KAAA;AACA,UAAAC,IAAA,CAAAC,MAAA;AACA,MAAAF,EAAAF,EAAA,QAAAI,CAAA;AAAA,IACA,GAGAC,IAAAC,EAAA,EAAA;AAEA,IAAAC;AAAA,MACA,MAAAN,EAAA,SAAA;AAAA,MACA,CAAAO,MAAA;AACA,QAAAH,EAAA,QAAAG,KAAA,CAAA;AAAA,MACA;AAAA,MACA,EAAA,WAAA,GAAA;AAAA,IAAA;AAGA,UAAAC,IAAAR,EAAA,SAAA,SACAA,EAAA,QAAA,SACA;AAAA,MACA,cAAA;AAAA,MACA,aAAA,OAAAS,MAAA;AAGA,YAAA,CAAAA,GAAA;AACA,UAAAL,EAAA,QAAAJ,EAAA,SAAA,gBAAA,CAAA;AACA;AAAA,QACA;AAEA,cAAAU,KAAAV,EAAA,SAAA,gBAAA,IAAA,IAAA,CAAAW,OAAA;AAAA,UACA,GAAAA;AAAA,UACA,OAAA,GAAAA,EAAA,KAAA,IAAAA,EAAA,KAAA;AAAA,QAAA,EACA,GAUAC,IARAC;AAAA,UACAR,EAAAI,CAAA;AAAA,UACAJ,EAAAK,CAAA;AAAA,UACAV,EAAA,SAAA,QAAA;AAAA,UACAK,EAAA,EAAA;AAAA,QAAA,EACA,OAGA,IAAA,CAAAS,OAAA;AAAA,UACA,GAAAA;AAAA,UACA,OAAAA,EAAA,MAAA,UAAAA,EAAA,MAAA,SAAA,CAAA;AAAA,QAAA,EACA;AAEA,QAAAV,EAAA,QAAAQ;AAAA,MACA;AAAA,IAAA,GAGAG,IAAAC,EAAA,OAAA;AAAA,MACA,GAAAhB,EAAA;AAAA,MACA,QAAAQ;AAAA,MACA,cAAAJ,EAAA;AAAA,IAAA,EACA;AAEA,WAAA;AAAA;AAAA,MAEA,kBAAAL;AAAA;AAAA,MAGA,UAAAG;AAAA,MACA,iBAAAa;AAAA,IAAA;AAAA,EAEA;AACA,CAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/select-payment-method-filter.8NdbJiG5.js

@@ -0,0 +1,51 @@
+import { defineComponent as s } from "vue";
+import { c as n, S as a, e as p } from "./filter-bar.U5VrFM6-.js";
+import { B as i } from "./payment-method.meF6XN_X.js";
+import { n as m } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+const f = s({
+  name: "bento-select-payment-method-filter",
+  components: {
+    BentoSelectFilter: p,
+    BentoPaymentMethod: i
+  },
+  props: {
+    ...a,
+    /**
+     * List of options that are needed to setup the payment method filter
+     * Available options:
+     *   - multiple: If "true", the user will be able to select multiple items.
+     *   - listboxItems: The option elements to populate the filter with {@see BentoSelectPaymentMethodFilterOptions}
+     */
+    options: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: [n.INPUT, n.UPDATE],
+  setup(r, { emit: e }) {
+    return {
+      // Enums
+      BentoFilterEvent: n,
+      // Methods
+      onUpdate: (t) => e(n.UPDATE, t)
+    };
+  }
+});
+var c = function() {
+  var e = this, o = e._self._c;
+  return e._self._setupProxy, o("bento-select-filter", e._b({ attrs: { field: e.field, label: e.label }, on: { update: e.onUpdate, input: (t) => e.$emit(e.BentoFilterEvent.INPUT, t) }, scopedSlots: e._u([{ key: "default", fn: function({ value: t, label: l }) {
+    return [o("bento-payment-method", { attrs: { type: t, label: l } })];
+  } }]) }, "bento-select-filter", e.$props, !1));
+}, d = [], _ = /* @__PURE__ */ m(
+  f,
+  c,
+  d,
+  !1,
+  null,
+  null
+);
+const P = _.exports;
+export {
+  P as default
+};
+//# sourceMappingURL=select-payment-method-filter.8NdbJiG5.js.map

package/dist/chunks/select-payment-method-filter.8NdbJiG5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-payment-method-filter.8NdbJiG5.js","sources":["../../src/components/filter-bar/components/select-filter/variants/select-payment-method-filter/select-payment-method-filter.vue"],"sourcesContent":["<template>\n    <bento-select-filter\n        v-slot=\"{ value, label: slotLabel }\"\n        v-bind=\"$props\"\n        :field=\"field\"\n        :label=\"label\"\n        @update=\"onUpdate\"\n        @input=\"e => $emit(BentoFilterEvent.INPUT, e)\"\n    >\n        <bento-payment-method :type=\"value\" :label=\"slotLabel\" />\n    </bento-select-filter>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, type PropType } from 'vue';\n    import { type BentoListboxSelectedValue } from '@/types/listbox';\n    import { BentoSelectFilter } from '../../index';\n    import {\n        BentoFilterEvent,\n        type BentoSelectPaymentMethodFilterOptions,\n    } from '@/components/filter-bar/filter-bar.types';\n    import { BentoPaymentMethod } from '@/components/payment-method';\n    import SelectFilterProps from '@/components/filter-bar/components/select-filter/select-filter.props';\n\n    /**\n     * The Select Payment Method filter displays a listbox of country items\n     * passed in the \"options.listboxItems\" property to be used in the FilterBar component.\n     *\n     * @example\n     * import { BentoSelectPaymentMethodFilter } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSelectPaymentMethodFilter },\n     *     template: `\n     *          <bento-select-paymnent-method-filter\n     *              :field=\"paymentMethod\"\n     *              :label=\"Payment method\"\n     *              :options=\"{\n     *                  listboxItems: [\n     *                      { label: 'Option 1', value: 'ideal' },\n     *                      { label: 'Option 2', value: 'visa' },\n     *                  ],\n     *              }\"\n     *              value=\"ideal\"\n     *              @update=\"updateFilterHandler\"\n     *          >\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-select-payment-method-filter',\n        components: {\n            BentoSelectFilter,\n            BentoPaymentMethod,\n        },\n        props: {\n            ...SelectFilterProps,\n\n            /**\n             * List of options that are needed to setup the payment method filter\n             * Available options:\n             *   - multiple: If \"true\", the user will be able to select multiple items.\n             *   - listboxItems: The option elements to populate the filter with {@see BentoSelectPaymentMethodFilterOptions}\n             */\n            options: {\n                type: Object as PropType<BentoSelectPaymentMethodFilterOptions>,\n                default: undefined,\n            },\n        },\n        emits: [BentoFilterEvent.INPUT, BentoFilterEvent.UPDATE],\n        setup(_props, { emit }) {\n            const onUpdate = (selectedValue: BentoListboxSelectedValue) => emit(BentoFilterEvent.UPDATE, selectedValue);\n\n            return {\n                // Enums\n                BentoFilterEvent,\n\n                // Methods\n                onUpdate,\n            };\n        },\n    });\n</script>\n"],"names":["_sfc_main","defineComponent","BentoSelectFilter","BentoPaymentMethod","SelectFilterProps","BentoFilterEvent","_props","emit","selectedValue"],"mappings":";;;;AAiDA,MAAAA,IAAAC,EAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,mBAAAC;AAAA,IACA,oBAAAC;AAAA,EAAA;AAAA,EAEA,OAAA;AAAA,IACA,GAAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IAAA;AAAA,EACA;AAAA,EAEA,OAAA,CAAAC,EAAA,OAAAA,EAAA,MAAA;AAAA,EACA,MAAAC,GAAA,EAAA,MAAAC,KAAA;AAGA,WAAA;AAAA;AAAA,MAEA,kBAAAF;AAAA;AAAA,MAGA,UAPA,CAAAG,MAAAD,EAAAF,EAAA,QAAAG,CAAA;AAAA,IAOA;AAAA,EAEA;AACA,CAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/select-tag-filter.CTiPiXzG.js

@@ -0,0 +1,59 @@
+import { defineComponent as c, computed as i } from "vue";
+import { c as n, S as f, e as m } from "./filter-bar.U5VrFM6-.js";
+import { L as u } from "./listbox-option-tag.JQxyZV07.js";
+import { n as _ } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+const d = c({
+  name: "bento-select-country-filter",
+  components: {
+    BentoSelectFilter: m,
+    ListboxOptionTag: u
+  },
+  props: {
+    ...f,
+    /**
+     * List of options that are needed to setup the tag filter
+     * Available options:
+     *   - multiple: If "true", the user will be able to select multiple items.
+     *   - listboxItems: The option elements to populate the filter with {@see BentoSelectTagFilterOptions}
+     */
+    options: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: [n.INPUT, n.UPDATE],
+  setup(s, { emit: t }) {
+    const o = (r) => t(n.UPDATE, r), e = i(
+      () => s?.options?.listboxItems?.map(({ label: r, value: a, variant: p }) => ({ label: r, value: a, data: p }))
+    );
+    return {
+      // Values
+      countryOptions: i(() => ({
+        ...s.options,
+        listboxItems: e.value
+      })),
+      // Methods
+      onUpdate: o,
+      // Enums
+      BentoFilterEvent: n
+    };
+  }
+});
+var b = function() {
+  var t = this, o = t._self._c;
+  return t._self._setupProxy, o("bento-select-filter", t._b({ attrs: { field: t.field, label: t.label, options: t.countryOptions }, on: { update: t.onUpdate, input: (e) => t.$emit(t.BentoFilterEvent.INPUT, e) }, scopedSlots: t._u([{ key: "default", fn: function({ label: e, data: l }) {
+    return [o("listbox-option-tag", { attrs: { option: { value: e, data: l, label: "" } } })];
+  } }]) }, "bento-select-filter", t.$props, !1));
+}, v = [], x = /* @__PURE__ */ _(
+  d,
+  b,
+  v,
+  !1,
+  null,
+  null
+);
+const U = x.exports;
+export {
+  U as default
+};
+//# sourceMappingURL=select-tag-filter.CTiPiXzG.js.map