@adyen/bento-vue2 1.44.0 → 1.45.0

package/dist/chunks/{dialog-page.CplkzZGZ.js → dialog-page.DcJ7LaOE.js}

@@ -1,36 +1,37 @@
-import { defineComponent as j, useSlots as U, ref as v, computed as r, inject as B, watch as P, nextTick as S, onUnmounted as F } from "vue";
-import { B as J } from "./button.CufUNBkv.js";
+import { defineComponent as j, useSlots as U, ref as v, computed as r, inject as B, watch as P, nextTick as E, onUnmounted as F } from "vue";
+import { B as J } from "./button.BX6ZJxF7.js";
 import { n as O } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { u as K } from "./use-has-slot.C9lQZ6nz.js";
 import { u as Y } from "./i18n.BQkEbtPM.js";
+import { i as z } from "./typography.J1v_SPG3.js";
 import "../assets/dialog-page.css";
 let N = 0;
-const z = {
+const M = {
   beforeCreate() {
     this.uuid = N.toString(), N += 1;
   }
 };
-var M = function() {
+var Z = function() {
   var e = this, t = e._self._c;
   return t("svg", e._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? t("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), t("path", { attrs: { fill: "#00112C", d: "M3.80655 7.25434L8.06077 3.00011L7.00011 1.93945L0.939453 8.00011L7.00011 14.0608L8.06077 13.0001L3.81499 8.75433L14.7508 8.74316L14.7492 7.24316L3.80655 7.25434Z" } })]);
-}, Z = [], q = /* @__PURE__ */ O(
-  z,
+}, q = [], Q = /* @__PURE__ */ O(
   M,
   Z,
+  q,
   !1,
   null,
   null
 );
-const Q = q.exports;
-var E = /* @__PURE__ */ ((l) => (l.TRANSITION_LEVEL_DEEPER = "b-dialog-page__animation--level-deeper", l.TRANSITION_LEVEL_UPPER = "b-dialog-page__animation--level-upper", l))(E || {});
-const W = Symbol("dialog registerPage injection key"), X = Symbol("dialog page config data injection key"), ee = {
+const W = Q.exports;
+var S = /* @__PURE__ */ ((l) => (l.TRANSITION_LEVEL_DEEPER = "b-dialog-page__animation--level-deeper", l.TRANSITION_LEVEL_UPPER = "b-dialog-page__animation--level-upper", l))(S || {});
+const X = Symbol("dialog registerPage injection key"), ee = Symbol("dialog page config data injection key"), te = {
   "en-US": {
     goToPreviousPage: "Go to previous page"
   }
-}, te = {
-  i18n: { messages: ee }
-}, ae = /* @__PURE__ */ j({
-  ...te,
+}, ae = {
+  i18n: { messages: te }
+}, oe = /* @__PURE__ */ j({
+  ...ae,
   __name: "dialog-page",
   props: {
     /**
@@ -70,11 +71,11 @@ const W = Symbol("dialog registerPage injection key"), X = Symbol("dialog page c
     })), x = () => {
       s.value && (_.value = s.value.scrollTop === 0, g.value = s.value.scrollHeight - s.value.clientHeight === s.value.scrollTop);
     }, p = async (i) => {
-      i && (await S(), c.value = s.value && s.value.scrollHeight > s.value.clientHeight);
-    }, { activePage: n, animation: f, isAnimationActive: u, isOpen: m, pages: w, previousPages: o, updatePage: I } = B(X);
+      i && (await E(), c.value = s.value && s.value.scrollHeight > s.value.clientHeight);
+    }, { activePage: n, animation: f, isAnimationActive: u, isOpen: m, pages: w, previousPages: o, updatePage: I } = B(ee);
     P(() => m.value, p, { immediate: !0 }), P(() => d.value, p, { immediate: !0 });
     const G = r(() => t.previousPage ? !0 : t.previousPage === null ? !1 : C.value && d.value), D = () => {
-      f.value = E.TRANSITION_LEVEL_DEEPER, u && (u.value = !1), e("animationend");
+      f.value = S.TRANSITION_LEVEL_DEEPER, u && (u.value = !1), e("animationend");
     }, H = () => {
       u && (u.value = !0);
     }, C = r(() => o.value.length > 1), h = r(() => o.value[o.value.length - 1]), L = r(() => w.value.some((i) => i === n.value)), V = async (i) => {
@@ -83,13 +84,13 @@ const W = Symbol("dialog registerPage injection key"), X = Symbol("dialog page c
         A !== -1 ? o.value = o.value.slice(0, A + 1) : o.value = [i];
       } else
         o.value.pop();
-      f.value = E.TRANSITION_LEVEL_UPPER, await S(), I(h.value);
+      f.value = S.TRANSITION_LEVEL_UPPER, await E(), I(h.value);
     };
     P(
       () => n.value,
       async () => {
-        if (await S(), !!m.value) {
-          if (n.value && !L.value) {
+        if (await E(), !!m.value) {
+          if (n.value && !L.value && z) {
             console.error(
               `The activePage passed "${n.value}" does not match the id of any of the pages`
             );
@@ -100,29 +101,29 @@ const W = Symbol("dialog registerPage injection key"), X = Symbol("dialog page c
       },
       { immediate: !0 }
     );
-    const T = B(W), { unregisterPage: y } = T(t.pageId);
-    return F(() => y()), { __sfc: !0, props: t, emit: e, slots: a, hasSlot: b, t: R, contentElement: s, hasScroll: c, isScrollAtTop: _, isScrollAtBottom: g, showPage: d, headerConditionalClasses: k, footerConditionalClasses: $, onScroll: x, calculateScroll: p, activePage: n, animation: f, isAnimationActive: u, isOpen: m, pages: w, previousPages: o, updatePage: I, showBackButton: G, updateAnimation: D, startAnimation: H, hasPreviousPages: C, lastPage: h, isActivePageValid: L, goToPreviousPage: V, registerPage: T, unregisterPage: y, BentoButton: J, ArrowLeftIcon: Q };
+    const T = B(X), { unregisterPage: y } = T(t.pageId);
+    return F(() => y()), { __sfc: !0, props: t, emit: e, slots: a, hasSlot: b, t: R, contentElement: s, hasScroll: c, isScrollAtTop: _, isScrollAtBottom: g, showPage: d, headerConditionalClasses: k, footerConditionalClasses: $, onScroll: x, calculateScroll: p, activePage: n, animation: f, isAnimationActive: u, isOpen: m, pages: w, previousPages: o, updatePage: I, showBackButton: G, updateAnimation: D, startAnimation: H, hasPreviousPages: C, lastPage: h, isActivePageValid: L, goToPreviousPage: V, registerPage: T, unregisterPage: y, BentoButton: J, ArrowLeftIcon: W };
   }
 });
-var oe = function() {
+var se = function() {
   var e = this, t = e._self._c, a = e._self._setupProxy;
   return t("Transition", { attrs: { name: a.animation, mode: "out-in" }, on: { "after-leave": a.updateAnimation, leave: a.startAnimation } }, [a.isOpen && a.showPage ? t("div", { staticClass: "b-dialog-page" }, [a.hasSlot("header") ? t("div", { staticClass: "b-dialog-page__header", class: a.headerConditionalClasses }, [a.showBackButton ? t("div", { staticClass: "b-dialog-page__back-button", style: e.backButtonStyling, attrs: { "data-testid": "back-button" } }, [t(a.BentoButton, { attrs: { variant: "tertiary" }, on: { click: function(b) {
     return a.goToPreviousPage(e.previousPage);
   } } }, [t(a.ArrowLeftIcon, { attrs: { "svg-title": a.t("goToPreviousPage") } })], 1)], 1) : e._e(), e._t("header")], 2) : e._e(), a.hasSlot("content") ? t("div", { ref: "contentElement", staticClass: "b-dialog-page__content", on: { scroll: a.onScroll } }, [e._t("content")], 2) : e._e(), a.hasSlot("footer") ? t("div", { staticClass: "b-dialog-page__footer", class: a.footerConditionalClasses }, [e._t("footer")], 2) : e._e()]) : e._e()]);
-}, se = [], ne = /* @__PURE__ */ O(
-  ae,
+}, ne = [], le = /* @__PURE__ */ O(
   oe,
   se,
+  ne,
   !1,
   null,
-  "cf863239"
+  "06db4ab2"
 );
-const ve = ne.exports;
+const ge = le.exports;
 export {
-  Q as A,
-  E as B,
-  ve as D,
-  W as a,
-  X as b
+  W as A,
+  S as B,
+  ge as D,
+  X as a,
+  ee as b
 };
-//# sourceMappingURL=dialog-page.CplkzZGZ.js.map
+//# sourceMappingURL=dialog-page.DcJ7LaOE.js.map

package/dist/chunks/dialog-page.DcJ7LaOE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-page.DcJ7LaOE.js","sources":["../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/arrow-left.vue","../../src/components/internal/dialog-page/dialog-page.types.ts","../../src/components/internal/dialog-page/dialog-page.keys.ts","../../src/components/internal/dialog-page/dialog-page.vue"],"sourcesContent":["\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M3.80655 7.25434L8.06077 3.00011L7.00011 1.93945L0.939453 8.00011L7.00011 14.0608L8.06077 13.0001L3.81499 8.75433L14.7508 8.74316L14.7492 7.24316L3.80655 7.25434Z\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n","import { Ref } from 'vue';\n\nexport enum BentoDialogPageAnimation {\n    TRANSITION_LEVEL_DEEPER = 'b-dialog-page__animation--level-deeper',\n    TRANSITION_LEVEL_UPPER = 'b-dialog-page__animation--level-upper',\n}\n\nexport interface BentoDialogPageConfigData {\n    activePage: Ref<string>;\n    animation: Ref<string>;\n    isAnimationActive?: Ref<boolean>;\n    isOpen: Ref<boolean>;\n    pages: Ref<string[]>;\n    previousPages: Ref<string[]>;\n    updatePage: (page: string) => void;\n}\n\nexport type BentoDialogPageRegisterPage = (pageId: string) => { unregisterPage: () => void };\n","export const DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY = Symbol('dialog registerPage injection key');\nexport const DIALOG_PAGE_CONFIG_INJECTION_KEY = Symbol('dialog page config data injection key');\n","<template>\n    <Transition :name=\"animation\" mode=\"out-in\" @after-leave=\"updateAnimation\" @leave=\"startAnimation\">\n        <div v-if=\"isOpen && showPage\" class=\"b-dialog-page\">\n            <div v-if=\"hasSlot('header')\" class=\"b-dialog-page__header\" :class=\"headerConditionalClasses\">\n                <div\n                    v-if=\"showBackButton\"\n                    class=\"b-dialog-page__back-button\"\n                    :style=\"backButtonStyling\"\n                    data-testid=\"back-button\"\n                >\n                    <bento-button variant=\"tertiary\" @click=\"goToPreviousPage(previousPage)\">\n                        <arrow-left-icon :svg-title=\"t('goToPreviousPage')\" />\n                    </bento-button>\n                </div>\n                <slot name=\"header\"></slot>\n            </div>\n            <div v-if=\"hasSlot('content')\" ref=\"contentElement\" class=\"b-dialog-page__content\" @scroll=\"onScroll\">\n                <slot name=\"content\" />\n            </div>\n            <div v-if=\"hasSlot('footer')\" class=\"b-dialog-page__footer\" :class=\"footerConditionalClasses\">\n                <slot name=\"footer\" />\n            </div>\n        </div>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, nextTick, onUnmounted, PropType, ref, useSlots, watch } from 'vue';\n\n    import { BentoButton } from '@/components/button';\n    import ArrowLeftIcon from '@adyen/ui-assets-icons-16/vue/arrow-left';\n\n    import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { isDevelopmentEnviroment } from '@/utils/ts/dev-environment';\n\n    import {\n        BentoDialogPageAnimation,\n        BentoDialogPageConfigData,\n        BentoDialogPageRegisterPage,\n    } from './dialog-page.types';\n    import type { CSSProperties } from 'vue/types/jsx.d.ts';\n\n    import { DIALOG_PAGE_CONFIG_INJECTION_KEY, DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY } from './dialog-page.keys';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n        /**\n         * Identifier of the page, used with activePage prop to handle navigation\n         */\n        pageId: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * Show header and actions border\n         */\n        alwaysShowBorder: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Pass custom styling to the back button to position it correctly with the header slot\n         */\n        backButtonStyling: { type: Object as PropType<CSSProperties>, default: null },\n\n        /**\n         * ID of the page for the back button to navigate to. Only use it to overwrite the default back behavior\n         * Used when the back button should not take the user to the natural previous page\n         * Set to `null` to hide back button in the page\n         */\n        previousPage: {\n            type: String,\n            default: undefined,\n        },\n    });\n\n    const emit = defineEmits([\"animationend\"]);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    // Refs\n    const contentElement = ref<HTMLDivElement>(null);\n    const hasScroll = ref(false);\n    const isScrollAtTop = ref(true);\n    const isScrollAtBottom = ref(false);\n\n    // Logic to choose which page is active/shown\n    const showPage = computed(() => (activePage.value ? activePage.value === props.pageId : true));\n\n    // Scrolling styling logic\n    const headerConditionalClasses = computed(() => ({\n        'b-dialog-page__header--with-border': props.alwaysShowBorder || (hasScroll.value && !isScrollAtTop.value),\n    }));\n\n    const footerConditionalClasses = computed(() => ({\n        'b-dialog-page__footer--with-border': props.alwaysShowBorder || (hasScroll.value && !isScrollAtBottom.value),\n    }));\n\n    const onScroll = () => {\n        if (!contentElement.value) {\n            return;\n        }\n\n        isScrollAtTop.value = contentElement.value.scrollTop === 0;\n        isScrollAtBottom.value =\n            contentElement.value.scrollHeight - contentElement.value.clientHeight === contentElement.value.scrollTop;\n    };\n\n    const calculateScroll = async watchedValue => {\n        if (!watchedValue) {\n            return;\n        }\n        // Wait for content to be rendered to be able to calculate the height\n        await nextTick();\n        hasScroll.value = contentElement.value && contentElement.value.scrollHeight > contentElement.value.clientHeight;\n    };\n\n    const { activePage, animation, isAnimationActive, isOpen, pages, previousPages, updatePage } =\n        inject<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY);\n\n    watch(() => isOpen.value, calculateScroll, { immediate: true });\n    watch(() => showPage.value, calculateScroll, { immediate: true });\n\n    // Logic to determine whether the back button should be shown on the page\n    const showBackButton = computed(() => {\n        if (props.previousPage) {\n            return true;\n        }\n        if (props.previousPage === null) {\n            return false;\n        }\n        return hasPreviousPages.value && showPage.value;\n    });\n\n    // Animation\n    const updateAnimation = () => {\n        animation.value = BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER;\n        if (isAnimationActive) {\n            isAnimationActive.value = false;\n        }\n\n        emit('animationend');\n    };\n\n    const startAnimation = () => {\n        if (isAnimationActive) {\n            isAnimationActive.value = true;\n        }\n    };\n\n    // Previous page logic\n    const hasPreviousPages = computed(() => previousPages.value.length > 1);\n    const lastPage = computed(() => previousPages.value[previousPages.value.length - 1]);\n    const isActivePageValid = computed(() => pages.value.some(page => page === activePage.value));\n\n    const goToPreviousPage = async (page: string) => {\n        if (page) {\n            const index = previousPages.value.indexOf(page);\n            if (index !== -1) {\n                previousPages.value = previousPages.value.slice(0, index + 1);\n            } else {\n                previousPages.value = [page];\n            }\n        } else {\n            previousPages.value.pop();\n        }\n\n        animation.value = BentoDialogPageAnimation.TRANSITION_LEVEL_UPPER;\n        await nextTick();\n        updatePage(lastPage.value);\n    };\n\n    // Add new page to the previousPage array to keep track of user navigation\n    watch(\n        () => activePage.value,\n        async () => {\n            await nextTick();\n            if (!isOpen.value) {\n                return;\n            }\n\n            if (!!activePage.value && !isActivePageValid.value) {\n                if (isDevelopmentEnviroment) {\n                    // eslint-disable-next-line no-console\n                    console.error(\n                        `The activePage passed \"${activePage.value}\" does not match the id of any of the pages`\n                    );\n                    return;\n                }\n            }\n\n            if (activePage.value !== lastPage.value) {\n                previousPages.value.push(activePage.value);\n            }\n        },\n        { immediate: true }\n    );\n\n    // Register page to parent component and inject data from parent component\n    const registerPage = inject<BentoDialogPageRegisterPage>(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY);\n    const { unregisterPage } = registerPage(props.pageId);\n\n    // Unregister page on unmounting the page\n    onUnmounted(() => unregisterPage());\n</script>\n\n<script lang=\"ts\">\n    /**\n     * DialogPage is an internal component used to render different pages of dialog components (Modal, ModalFullscreen and Sidepanel)\n     *\n     * @example\n     * import { DialogPage } from '@/internal';\n     *\n     * export default {\n     *     components: { DialogPage },\n     *     template: `\n     *          <dialog-page pageId='step1' always-show-border>\n     *              <template #header>Header</template>\n     *              <template #content>Content</template>\n     *              <template #footer>Footer</template>\n     *          </dialog-page>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./dialog-page.scss\" />\n"],"names":["uuid","_sfc_main$1","BentoDialogPageAnimation","BentoDialogPageAnimation2","DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY","DIALOG_PAGE_CONFIG_INJECTION_KEY","__default__","messages","slots","useSlots","hasSlot","useHasSlot","t","useI18n","contentElement","ref","hasScroll","isScrollAtTop","isScrollAtBottom","showPage","computed","activePage","props","headerConditionalClasses","footerConditionalClasses","onScroll","calculateScroll","watchedValue","nextTick","animation","isAnimationActive","isOpen","pages","previousPages","updatePage","inject","watch","showBackButton","hasPreviousPages","updateAnimation","emit","startAnimation","lastPage","isActivePageValid","page","goToPreviousPage","index","isDevelopmentEnviroment","registerPage","unregisterPage","onUnmounted"],"mappings":";;;;;;;AAKA,IAAAA,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;ACVY,IAAAE,IAAA,kBAAAC,OACRA,EAAA,0BAAA,0CACAA,EAAA,yBAAA,yCAFQA,IAAAD,KAAA,CAAA,CAAA;ACFC,MAAAE,IAAA,OAAA,mCAAA,GACAC,KAAA,OAAA,uCAAA;;;;GCuOTC,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,GAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAtJAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GACA,EAAA,GAAAI,EAAA,IAAAC,EAAA,GAGAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,EAAA,GACAE,IAAAF,EAAA,EAAA,GACAG,IAAAH,EAAA,EAAA,GAGAI,IAAAC,EAAA,MAAAC,EAAA,QAAAA,EAAA,UAAAC,EAAA,SAAA,EAAA,GAGAC,IAAAH,EAAA,OAAA;AAAA,MAAiD,sCAAAE,EAAA,oBAAAN,EAAA,SAAA,CAAAC,EAAA;AAAA,IACsD,EAAA,GAGvGO,IAAAJ,EAAA,OAAA;AAAA,MAAiD,sCAAAE,EAAA,oBAAAN,EAAA,SAAA,CAAAE,EAAA;AAAA,IACyD,EAAA,GAG1GO,IAAA,MAAA;AACI,MAAAX,EAAA,UAIAG,EAAA,QAAAH,EAAA,MAAA,cAAA,GACAI,EAAA,QAAAJ,EAAA,MAAA,eAAAA,EAAA,MAAA,iBAAAA,EAAA,MAAA;AAAA,IACmG,GAGvGY,IAAA,OAAAC,MAAA;AACI,MAAAA,MAIA,MAAAC,EAAA,GACAZ,EAAA,QAAAF,EAAA,SAAAA,EAAA,MAAA,eAAAA,EAAA,MAAA;AAAA,IAAmG,GAGvG,EAAA,YAAAO,GAAA,WAAAQ,GAAA,mBAAAC,GAAA,QAAAC,GAAA,OAAAC,GAAA,eAAAC,GAAA,YAAAC,EAAA,IAAAC,EAAA9B,EAAA;AAGA,IAAA+B,EAAA,MAAAL,EAAA,OAAAL,GAAA,EAAA,WAAA,GAAA,CAAA,GACAU,EAAA,MAAAjB,EAAA,OAAAO,GAAA,EAAA,WAAA,GAAA,CAAA;AAGA,UAAAW,IAAAjB,EAAA,MACIE,EAAA,eACI,KAEJA,EAAA,iBAAA,OACI,KAEJgB,EAAA,SAAAnB,EAAA,KAA0C,GAI9CoB,IAAA,MAAA;AACI,MAAAV,EAAA,QAAA3B,EAAA,yBACA4B,MACIA,EAAA,QAAA,KAGJU,EAAA,cAAA;AAAA,IAAmB,GAGvBC,IAAA,MAAA;AACI,MAAAX,MACIA,EAAA,QAAA;AAAA,IACJ,GAIJQ,IAAAlB,EAAA,MAAAa,EAAA,MAAA,SAAA,CAAA,GACAS,IAAAtB,EAAA,MAAAa,EAAA,MAAAA,EAAA,MAAA,SAAA,CAAA,CAAA,GACAU,IAAAvB,EAAA,MAAAY,EAAA,MAAA,KAAA,CAAAY,MAAAA,MAAAvB,EAAA,KAAA,CAAA,GAEAwB,IAAA,OAAAD,MAAA;AACI,UAAAA,GAAA;AACI,cAAAE,IAAAb,EAAA,MAAA,QAAAW,CAAA;AACA,QAAAE,MAAA,KACIb,EAAA,QAAAA,EAAA,MAAA,MAAA,GAAAa,IAAA,CAAA,IAEAb,EAAA,QAAA,CAAAW,CAAA;AAAA,MACJ;AAEA,QAAAX,EAAA,MAAA,IAAA;AAGJ,MAAAJ,EAAA,QAAA3B,EAAA,wBACA,MAAA0B,EAAA,GACAM,EAAAQ,EAAA,KAAA;AAAA,IAAyB;AAI7B,IAAAN;AAAA,MAAA,MAAAf,EAAA;AAAA,MACqB,YAAA;AAGb,YADA,MAAAO,EAAA,GACA,EAAAG,EAAA,OAIA;AAAA,cAAAV,EAAA,SAAA,CAAAsB,EAAA,SACII,GAAA;AAEI,oBAAA;AAAA,cAAQ,0BAAA1B,EAAA,KAAA;AAAA,YACsC;AAE9C;AAAA,UAAA;AAIR,UAAAA,EAAA,UAAAqB,EAAA,SACIT,EAAA,MAAA,KAAAZ,EAAA,KAAA;AAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;AAItB,UAAA2B,IAAAb,EAAA/B,CAAA,GACA,EAAA,gBAAA6C,EAAA,IAAAD,EAAA1B,EAAA,MAAA;AAGA,WAAA4B,EAAA,MAAAD,EAAA,CAAA;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}

package/dist/chunks/{dropdown-default-textbox.ZAFh7KqG.js → dropdown-default-textbox.DBoSso4J.js}

@@ -1,20 +1,32 @@
-import { defineComponent as C, useAttrs as B, useSlots as h, ref as D, computed as r, watch as F, nextTick as P } from "vue";
-import { g as V } from "./generate-uid.D-HFI38h.js";
-import { u as R } from "./use-has-slot.C9lQZ6nz.js";
-import { B as T } from "./typography.Bu_WAKdf.js";
-import { d as M } from "./debounce.DUTu11PS.js";
-import { C as U } from "./cross-circle-fill.CnYH4R_h.js";
-import { C as $ } from "./cross-circle-fill-small.Oj6lPaDy.js";
+import { defineComponent as m, useAttrs as P, useSlots as h, ref as D, computed as r, watch as F, nextTick as R } from "vue";
+import { g as V } from "./generate-uid.NJ8tVoha.js";
+import { u as T } from "./i18n.BQkEbtPM.js";
+import { u as U } from "./use-has-slot.C9lQZ6nz.js";
+import { B as M } from "./typography.J1v_SPG3.js";
+import { d as $ } from "./debounce.DUTu11PS.js";
+import { C as Y } from "./cross-circle-fill.CnYH4R_h.js";
+import { C as q } from "./cross-circle-fill-small.Oj6lPaDy.js";
 import { n as E } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { s as v } from "./events.CMzGybJJ.js";
-import { C as Y, a as q } from "./chevron-up.B2uWhZf7.js";
+import { s as S } from "./events.CMzGybJJ.js";
+import { C as z, a as K } from "./chevron-up.DVfo78kV.js";
 import "../assets/dropdown-default-textbox.css";
-var k = /* @__PURE__ */ ((l) => (l.DEFAULT = "DropdownInputDefault", l.SMALL = "DropdownInputSmall", l))(k || {}), p = /* @__PURE__ */ ((l) => (l.DISABLED = "disabled", l.READONLY = "readonly", l.HAS_ITEMS = "has-items", l.OPENED = "opened", l.ERROR = "error", l))(p || {}), n = /* @__PURE__ */ ((l) => (l.OPEN = "dropdown-base-open", l.KEYDOWN = "dropdown-base-keydown", l.CLOSE = "dropdown-base-close", l.INPUT = "dropdown-base-input", l.CLEAR = "dropdown-base-clear", l))(n || {});
-const z = C({
+var k = /* @__PURE__ */ ((n) => (n.DEFAULT = "DropdownInputDefault", n.SMALL = "DropdownInputSmall", n))(k || {}), p = /* @__PURE__ */ ((n) => (n.DISABLED = "disabled", n.READONLY = "readonly", n.HAS_ITEMS = "has-items", n.OPENED = "opened", n.ERROR = "error", n))(p || {}), s = /* @__PURE__ */ ((n) => (n.OPEN = "dropdown-base-open", n.KEYDOWN = "dropdown-base-keydown", n.CLOSE = "dropdown-base-close", n.INPUT = "dropdown-base-input", n.CLEAR = "dropdown-base-clear", n))(s || {});
+const j = {
+  "en-US": {
+    clearSearch: "Clear search"
+  },
+  "pt-BR": {
+    clearSearch: "Limpar busca"
+  },
+  "ja-JP": {
+    clearSearch: "検索をクリア"
+  }
+}, H = m({
+  i18n: { messages: j },
   name: "dropdown-base-textbox",
   inheritAttrs: !1
-}), K = /* @__PURE__ */ C({
-  ...z,
+}), W = /* @__PURE__ */ m({
+  ...H,
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
@@ -103,20 +115,20 @@ const z = C({
     }
   },
   emits: [],
-  setup(l, { expose: t, emit: o }) {
-    const e = l, a = B(), d = h(), b = R(d), i = D(null), f = V("textbox"), y = r(() => ({
+  setup(n, { expose: t, emit: o }) {
+    const e = n, { t: a } = T(), i = P(), c = h(), w = U(c), d = D(null), f = V("textbox"), y = r(() => ({
       [`b-dropdown-base-textbox--${p.DISABLED}`]: e.disabled,
       [`b-dropdown-base-textbox--${p.READONLY}`]: e.readonly,
       [`b-dropdown-base-textbox--${p.HAS_ITEMS}`]: !!e.additionalItemsSelected
     })), _ = r(() => ({
       "b-dropdown-base-textbox__input--dynamic-filtering": e.dynamicFiltering
-    })), x = r(() => e.dynamicFiltering && !!e.value && e.open), m = r(
+    })), x = r(() => e.dynamicFiltering && !!e.value && e.open), C = r(
       () => {
         var u;
         return {
           "aria-haspopup": "listbox",
           "aria-controls": e.ariaControls,
-          "aria-describedby": (u = a["aria-describedby"]) == null ? void 0 : u.toString(),
+          "aria-describedby": (u = i["aria-describedby"]) == null ? void 0 : u.toString(),
           "aria-expanded": e.ariaExpanded ? "true" : "false",
           "aria-labelledby": e.ariaLabelledby,
           "aria-label": e.ariaLabelledby ? null : e.ariaLabel,
@@ -124,36 +136,36 @@ const z = C({
           "aria-disabled": e.disabled ? !0 : null
         };
       }
-    ), w = r(
+    ), b = r(
       () => e.multiple ? e.selectedValueItem : []
-    ), c = r(() => e.dynamicFiltering && (e.open || e.alwaysComboboxIsInput)), s = r(() => e.selectedValueItem && !e.multiple), O = r(
-      () => e.multiple && e.selectedValueItem && w.value.length > 0 && e.showSlotContentInMultiple
+    ), l = r(() => e.dynamicFiltering && (e.open || e.alwaysComboboxIsInput)), O = r(() => e.selectedValueItem && !e.multiple), L = r(
+      () => e.multiple && e.selectedValueItem && b.value.length > 0 && e.showSlotContentInMultiple
     );
     F(
-      () => c.value,
+      () => l.value,
       () => {
-        c.value && !e.alwaysComboboxIsInput && P(() => {
-          i.value.focus();
+        l.value && !e.alwaysComboboxIsInput && R(() => {
+          d.value.focus();
         });
       }
     );
-    const S = () => {
-      !e.disabled && !e.readonly && (i.value.focus(), o(n.OPEN));
+    const v = () => {
+      !e.disabled && !e.readonly && (d.value.focus(), o(s.OPEN));
     }, g = () => {
-      e.open && (i.value.focus(), o(n.CLOSE));
-    }, L = (u) => e.open && u.target.tagName === "INPUT" ? null : e.open ? g() : S(), N = () => {
-      o(n.CLEAR), o(n.INPUT, ""), i.value.focus();
-    }, A = M((u) => {
-      !e.readonly && !e.disabled ? o(n.INPUT, u.target.value) : (u.preventDefault(), u.stopPropagation());
+      e.open && (d.value.focus(), o(s.CLOSE));
+    }, N = (u) => e.open && u.target.tagName === "INPUT" ? null : e.open ? g() : v(), A = () => {
+      o(s.CLEAR), o(s.INPUT, ""), d.value.focus();
+    }, B = $((u) => {
+      !e.readonly && !e.disabled ? o(s.INPUT, u.target.value) : (u.preventDefault(), u.stopPropagation());
     }, e.debounceTime), I = () => {
-      i.value.focus();
+      d.value.focus();
     };
     return t({
       focus: I
-    }), { __sfc: !0, attrs: a, slots: d, hasSlot: b, props: e, emit: o, textbox: i, textboxId: f, conditionalClasses: y, comboboxConditionalClasses: _, isFiltering: x, ariaAttributes: m, selectedValueItems: w, shouldShowInput: c, shouldShowSingleSelectSlot: s, shouldShowMultipleSlot: O, onOpenDropdown: S, onCloseDropdown: g, onToggleDropdown: L, onClearSearch: N, onInputEvent: A, focus: I, BentoTypography: T, DropdownBaseTextboxEvent: n, CrossCircleFillIcon: U, CrossCircleFillSmallIcon: $, BentoDropdownSize: k };
+    }), { __sfc: !0, t: a, attrs: i, slots: c, hasSlot: w, props: e, emit: o, textbox: d, textboxId: f, conditionalClasses: y, comboboxConditionalClasses: _, isFiltering: x, ariaAttributes: C, selectedValueItems: b, shouldShowInput: l, shouldShowSingleSelectSlot: O, shouldShowMultipleSlot: L, onOpenDropdown: v, onCloseDropdown: g, onToggleDropdown: N, onClearSearch: A, onInputEvent: B, focus: I, BentoTypography: M, DropdownBaseTextboxEvent: s, CrossCircleFillIcon: Y, CrossCircleFillSmallIcon: q, BentoDropdownSize: k };
   }
 });
-var H = function() {
+var J = function() {
   var t = this, o = t._self._c, e = t._self._setupProxy;
   return o("div", { class: t.$attrs.class, attrs: { "data-testid": "textbox-wrapper" }, on: { click: e.onToggleDropdown, keydown: function(a) {
     return !a.type.indexOf("key") && t._k(a.keyCode, "escape", void 0, a.key, void 0) ? null : e.onCloseDropdown.apply(null, arguments);
@@ -173,20 +185,20 @@ var H = function() {
     return !a.type.indexOf("key") && t._k(a.keyCode, "enter", 13, a.key, "Enter") ? null : (a.stopPropagation(), e.onClearSearch.apply(null, arguments));
   }, keyup: function(a) {
     return !a.type.indexOf("key") && t._k(a.keyCode, "space", 32, a.key, [" ", "Spacebar"]) ? null : e.onClearSearch.apply(null, arguments);
-  } } }, [t.size === e.BentoDropdownSize.SMALL ? o(e.CrossCircleFillSmallIcon, { attrs: { "svg-title": "clearSearch" } }) : o(e.CrossCircleFillIcon, { attrs: { "svg-title": "clearSearch" } })], 1) : t._e()])], 1);
-}, W = [], j = /* @__PURE__ */ E(
-  K,
-  H,
+  } } }, [t.size === e.BentoDropdownSize.SMALL ? o(e.CrossCircleFillSmallIcon, { attrs: { "svg-title": e.t("clearSearch") } }) : o(e.CrossCircleFillIcon, { attrs: { "svg-title": e.t("clearSearch") } })], 1) : t._e()])], 1);
+}, G = [], Q = /* @__PURE__ */ E(
   W,
+  J,
+  G,
   !1,
   null,
-  "499e7c98"
+  "8f74edb8"
 );
-const G = j.exports, J = C({
+const X = Q.exports, Z = m({
   name: "dropdown-default-textbox",
   inheritAttrs: !1
-}), Q = /* @__PURE__ */ C({
-  ...J,
+}), ee = /* @__PURE__ */ m({
+  ...Z,
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
@@ -277,60 +289,60 @@ const G = j.exports, J = C({
     multiple: { type: Boolean, default: !1 }
   },
   emits: ["clear", "close", "input", "keydown", "open"],
-  setup(l, { expose: t, emit: o }) {
-    const e = l, a = h(), d = D(null), b = r(() => ({
+  setup(n, { expose: t, emit: o }) {
+    const e = n, a = h(), i = D(null), c = r(() => ({
       [`b-dropdown-default-textbox--${p.ERROR}`]: !e.disabled && !e.readonly && e.isInvalid,
       [`b-dropdown-default-textbox--${p.DISABLED}`]: e.disabled,
       [`b-dropdown-default-textbox--${p.READONLY}`]: e.readonly,
       [`b-dropdown-default-textbox--${p.OPENED}`]: e.open,
       "b-dropdown-default-textbox--condensed": e.condensed
-    })), i = r(() => e.open && !e.disabled && !e.readonly), f = (s) => {
-      o("input", s);
-    }, y = (s) => {
-      o("keydown", s);
-    }, _ = (s) => {
-      v(s), o("open");
-    }, x = (s) => {
-      v(s), o("close");
-    }, m = (s) => {
-      v(s), o("clear");
-    }, w = {
-      [n.INPUT]: f,
-      [n.OPEN]: _,
-      [n.CLOSE]: x,
-      [n.CLEAR]: m,
-      [n.KEYDOWN]: y
-    }, c = () => {
-      d.value.focus();
+    })), w = r(() => e.open && !e.disabled && !e.readonly), d = (l) => {
+      o("input", l);
+    }, f = (l) => {
+      o("keydown", l);
+    }, y = (l) => {
+      S(l), o("open");
+    }, _ = (l) => {
+      S(l), o("close");
+    }, x = (l) => {
+      S(l), o("clear");
+    }, C = {
+      [s.INPUT]: d,
+      [s.OPEN]: y,
+      [s.CLOSE]: _,
+      [s.CLEAR]: x,
+      [s.KEYDOWN]: f
+    }, b = () => {
+      i.value.focus();
     };
     return t({
-      focus: c
-    }), { __sfc: !0, emit: o, slots: a, props: e, baseTextbox: d, conditionalClasses: b, isDropdownOpen: i, onInput: f, onKeyDown: y, openDropdown: _, closeDropdown: x, clearValue: m, listeners: w, focus: c, DropdownBaseTextbox: G, ChevronDownIcon: Y, ChevronUpIcon: q };
+      focus: b
+    }), { __sfc: !0, emit: o, slots: a, props: e, baseTextbox: i, conditionalClasses: c, isDropdownOpen: w, onInput: d, onKeyDown: f, openDropdown: y, closeDropdown: _, clearValue: x, listeners: C, focus: b, DropdownBaseTextbox: X, ChevronDownIcon: K, ChevronUpIcon: z };
   }
 });
-var X = function() {
+var te = function() {
   var t = this, o = t._self._c, e = t._self._setupProxy;
-  return o("div", { staticClass: "b-dropdown-default-textbox", class: e.conditionalClasses, attrs: { "data-testid": "default-textbox" } }, [o(e.DropdownBaseTextbox, t._g(t._b({ ref: "baseTextbox", staticClass: "b-dropdown-default-textbox__textbox", attrs: { value: t.value }, scopedSlots: t._u([t._l(e.slots, function(a, d) {
-    return { key: d, fn: function(b) {
-      return [t._t(d, null, null, b)];
+  return o("div", { staticClass: "b-dropdown-default-textbox", class: e.conditionalClasses, attrs: { "data-testid": "default-textbox" } }, [o(e.DropdownBaseTextbox, t._g(t._b({ ref: "baseTextbox", staticClass: "b-dropdown-default-textbox__textbox", attrs: { value: t.value }, scopedSlots: t._u([t._l(e.slots, function(a, i) {
+    return { key: i, fn: function(c) {
+      return [t._t(i, null, null, c)];
     } };
   }), { key: "icon", fn: function() {
     return [o("div", { staticClass: "b-dropdown-default-textbox__chevron" }, [o(e.ChevronUpIcon, { directives: [{ name: "show", rawName: "v-show", value: e.isDropdownOpen, expression: "isDropdownOpen" }], attrs: { "svg-title": "opened" } }), o(e.ChevronDownIcon, { directives: [{ name: "show", rawName: "v-show", value: !e.isDropdownOpen, expression: "!isDropdownOpen" }], attrs: { "svg-title": "closed" } })], 1)];
   }, proxy: !0 }], null, !0) }, "dropdown-base-textbox", { ...t.$attrs, ...t.$props }, !1), e.listeners))], 1);
-}, Z = [], ee = /* @__PURE__ */ E(
-  Q,
-  X,
-  Z,
+}, oe = [], ae = /* @__PURE__ */ E(
+  ee,
+  te,
+  oe,
   !1,
   null,
   "9ee629c5"
 );
-const ce = ee.exports;
+const _e = ae.exports;
 export {
   k as B,
-  ce as D,
+  _e as D,
   p as a,
-  n as b,
-  G as c
+  s as b,
+  X as c
 };
-//# sourceMappingURL=dropdown-default-textbox.ZAFh7KqG.js.map
+//# sourceMappingURL=dropdown-default-textbox.DBoSso4J.js.map

package/dist/chunks/dropdown-default-textbox.DBoSso4J.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-default-textbox.DBoSso4J.js","sources":["../../src/components/dropdown/dropdown.types.ts","../../src/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.types.ts","../../src/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.vue","../../src/components/dropdown/components/dropdown-default-textbox/dropdown-default-textbox.vue"],"sourcesContent":["/**\n * @deprecated Do not use. Only 'default' size should be used.\n */\nexport enum BentoDropdownSize {\n    DEFAULT = 'DropdownInputDefault',\n    SMALL = 'DropdownInputSmall',\n}\n\nexport {\n    /**\n     * @deprecated since version 2.0. Use the string literal instead.\n     */\n    BentoListboxLazyLoadType as BentoDropdownLazyLoadType,\n    BentoListboxEvent as BentoDropdownEvent,\n} from '@/types';\n\nexport type { BentoListboxSearchOptions as BentoDropdownSearchOptions } from '@/types';\nexport type { BentoListboxEmptyStateProps as BentoDropdownEmptyStateProps } from '@/types';\nexport type { BentoListboxVirtulisationOptions as BentoDropdownVirtulisationOptions } from '@/types';\n","import { PropType } from 'vue';\nimport { Booleanish } from '@/types';\n\n// TODO: Change this to script setup + Typescript interface\nexport const DropdownBaseTextboxProps = {\n    /**\n     * The number of additional items that have been selected in the dropdown.\n     */\n    additionalItemsSelected: { type: [Number, String] as PropType<number | string>, default: 0 },\n\n    /**\n     * Sets the possibility to type into the textbox\n     */\n    dynamicFiltering: {\n        type: Boolean,\n        default: false,\n    },\n\n    /**\n     * Sets the aria-controls attribute on the textbox. This should correspond to the popover's id that the textbox triggers.\n     */\n    ariaControls: {\n        type: String,\n        required: true,\n    },\n\n    /**\n     * Indicates whether the content the textbox triggers is visible or not. Needs to be set accordingly when the textbox is used and changed every time the popover is shown/hidden.\n     */\n    ariaExpanded: {\n        type: [String, Boolean] as PropType<Booleanish>,\n        required: true,\n    },\n\n    /**\n     * Corresponds to the label's id that labels the textbox element.\n     */\n    ariaLabelledby: {\n        type: String,\n        default: null,\n    },\n\n    /**\n     * Disables any textbox functionality\n     */\n    disabled: { type: Boolean, default: false },\n\n    /**\n     * Marks the textbox as invalid, rendering an error state\n     */\n    isInvalid: { type: Boolean, default: false },\n\n    /**\n     * Selected option's label\n     */\n    displayValue: { type: String, default: null },\n\n    /**\n     * Indicates if the dropdown is open so that\n     * the respective event can be emitted\n     */\n    open: { type: Boolean, default: false },\n\n    /**\n     * The input value\n     */\n    value: { type: String, default: '' },\n\n    /**\n     * Custom debounce time. Default: 300\n     */\n    debounceTime: { type: Number, default: 300 },\n};\n\nexport enum DropdownBaseTextboxState {\n    DISABLED = 'disabled',\n    READONLY = 'readonly',\n    HAS_ITEMS = 'has-items',\n    OPENED = 'opened',\n    ERROR = 'error',\n}\n\nexport enum DropdownBaseTextboxEvent {\n    OPEN = 'dropdown-base-open',\n    KEYDOWN = 'dropdown-base-keydown',\n    CLOSE = 'dropdown-base-close',\n    INPUT = 'dropdown-base-input',\n    CLEAR = 'dropdown-base-clear',\n}\n\nexport default DropdownBaseTextboxProps;\n","<template>\n    <div\n        :class=\"$attrs.class\"\n        data-testid=\"textbox-wrapper\"\n        @click=\"onToggleDropdown\"\n        @keydown.escape=\"onCloseDropdown\"\n    >\n        <bento-typography\n            class=\"b-dropdown-base-textbox\"\n            :class=\"conditionalClasses\"\n            el=\"div\"\n            data-testid=\"base-textbox\"\n        >\n            <input\n                v-if=\"shouldShowInput\"\n                v-bind=\"ariaAttributes\"\n                :id=\"textboxId\"\n                ref=\"textbox\"\n                class=\"b-dropdown-base-textbox__input\"\n                role=\"combobox\"\n                type=\"text\"\n                aria-autocomplete=\"list\"\n                size=\"1\"\n                :value=\"open ? value : displayValue\"\n                :disabled=\"disabled ? true : null\"\n                :readonly=\"readonly\"\n                @keydown=\"$emit(DropdownBaseTextboxEvent.KEYDOWN, $event)\"\n                @keydown.enter=\"onToggleDropdown\"\n                @input=\"onInputEvent\"\n            />\n            <div\n                v-else\n                :id=\"textboxId\"\n                v-bind=\"ariaAttributes\"\n                ref=\"textbox\"\n                class=\"b-dropdown-base-textbox__input\"\n                :class=\"comboboxConditionalClasses\"\n                role=\"combobox\"\n                :tabindex=\"0\"\n            >\n                <slot v-if=\"shouldShowSingleSelectSlot\" v-bind=\"selectedValueItem\">\n                    {{ displayValue }}\n                </slot>\n                <template v-else-if=\"shouldShowMultipleSlot\">\n                    <div class=\"b-dropdown-base-textbox__input-multiple-selected\">\n                        <div v-for=\"singleItem of selectedValueItems\" :key=\"singleItem.value\">\n                            <div class=\"b-dropdown-base-textbox__input-selected-element\">\n                                <slot v-bind=\"singleItem\">\n                                    {{ displayValue }}\n                                </slot>\n                            </div>\n                        </div>\n                    </div>\n                </template>\n                <template v-else>{{ displayValue }}</template>\n            </div>\n            <span v-if=\"additionalItemsSelected\" class=\"b-dropdown-base-textbox__additional-items\">\n                {{ additionalItemsSelected }}\n            </span>\n            <span v-if=\"hasSlot('icon') && !isFiltering\" class=\"b-dropdown-base-textbox__icon\" aria-hidden=\"true\">\n                <slot name=\"icon\"></slot>\n            </span>\n            <span\n                v-if=\"isFiltering\"\n                class=\"b-dropdown-base-textbox__clear-search\"\n                tabindex=\"0\"\n                data-testid=\"clear-search-button\"\n                @click.stop=\"onClearSearch\"\n                @keydown.enter.stop=\"onClearSearch\"\n                @keyup.space=\"onClearSearch\"\n            >\n                <cross-circle-fill-small-icon v-if=\"size === BentoDropdownSize.SMALL\" :svg-title=\"t('clearSearch')\" />\n                <cross-circle-fill-icon v-else :svg-title=\"t('clearSearch')\" />\n            </span>\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, nextTick, PropType, ref, useAttrs, useSlots, watch } from 'vue';\n    import { generateUid } from '@/core/utils/ts';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useHasSlot } from '@/composables';\n    import { BentoTypography } from '@/components/typography';\n    import { debounce } from '@/utils/ts/debounce';\n    import { BentoListboxOptionItem, Booleanish } from '@/types';\n    import type { HTMLAttributes } from 'vue/types/jsx.d.ts';\n    import { DropdownBaseTextboxEvent, DropdownBaseTextboxState } from './dropdown-base-textbox.types';\n    import CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import CrossCircleFillSmallIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill-small';\n    import { BentoDropdownSize } from '@/components/dropdown/dropdown.types';\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 attrs = useAttrs();\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const props = defineProps({\n        /**\n         * The number of additional items that have been selected in the dropdown.\n         */\n        additionalItemsSelected: { type: [Number, String] as PropType<number | string>, default: 0 },\n\n        /**\n         * If the combobox DOM element should be an `input` element.\n         */\n        alwaysComboboxIsInput: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Sets the aria-controls attribute on the textbox. This should correspond to the popover's id that the textbox triggers.\n         */\n        ariaControls: { type: String, required: true },\n\n        /**\n         * Indicates whether the content the textbox triggers is visible or not. Needs to be set accordingly when the textbox is used and changed every time the popover is shown/hidden.\n         */\n        ariaExpanded: {\n            type: [String, Boolean] as PropType<Booleanish>,\n            required: true,\n        },\n\n        /**\n         * If no label element is used then the aria-label is be set should be set.\n         */\n        ariaLabel: { type: String, default: null },\n\n        /**\n         * Corresponds to the label's id that labels the textbox element.\n         */\n        ariaLabelledby: { type: String, default: null },\n\n        /**\n         * Custom debounce time for the user type event.\n         */\n        debounceTime: { type: Number, default: 300 },\n\n        /**\n         * Disables any textbox functionality\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Selected option's label\n         */\n        displayValue: { type: String, default: null },\n\n        /**\n         * Sets the possibility to type into the textbox.\n         */\n        dynamicFiltering: { type: Boolean, default: false },\n\n        /**\n         * Marks the textbox as invalid, rendering an error state\n         */\n        isInvalid: { type: Boolean, default: false },\n\n        /*\n         * If enabled, the user will be able to select multiple items.\n         */\n        multiple: { type: Boolean, default: false },\n\n        /**\n         * Indicates if the dropdown is open so that\n         * the respective event can be emitted\n         */\n        open: { type: Boolean, default: false },\n\n        /**\n         * Sets the dropdown to readonly state\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * The input value\n         */\n        value: { type: String, default: '' },\n\n        /**\n         * The selected value's list box item.\n         */\n        selectedValueItem: {\n            type: [Object, Array] as PropType<BentoListboxOptionItem | BentoListboxOptionItem[]>,\n            default: undefined,\n        },\n\n        /**\n         * Toggles whether to use the slot content select items shown in the textbox in multiple mode.\n         */\n        showSlotContentInMultiple: { type: Boolean, default: false },\n\n        /**\n         * Dropdown size\n         */\n        size: {\n            type: String as PropType<BentoDropdownSize | `${BentoDropdownSize}`>,\n            default: null,\n        },\n    });\n\n    const emit = defineEmits([]);\n\n    const textbox = ref(null);\n    const textboxId = generateUid('textbox');\n\n    const conditionalClasses = computed(() => ({\n        [`b-dropdown-base-textbox--${DropdownBaseTextboxState.DISABLED}`]: props.disabled,\n        [`b-dropdown-base-textbox--${DropdownBaseTextboxState.READONLY}`]: props.readonly,\n        [`b-dropdown-base-textbox--${DropdownBaseTextboxState.HAS_ITEMS}`]: !!props.additionalItemsSelected,\n    }));\n\n    const comboboxConditionalClasses = computed(() => ({\n        [`b-dropdown-base-textbox__input--dynamic-filtering`]: props.dynamicFiltering,\n    }));\n\n    const isFiltering = computed(() => props.dynamicFiltering && !!props.value && props.open);\n\n    const ariaAttributes = computed(\n        () =>\n            ({\n                'aria-haspopup': 'listbox',\n                'aria-controls': props.ariaControls,\n                'aria-describedby': attrs['aria-describedby']?.toString() as string,\n                'aria-expanded': props.ariaExpanded ? 'true' : 'false',\n                'aria-labelledby': props.ariaLabelledby,\n                'aria-label': props.ariaLabelledby ? null : props.ariaLabel,\n                'aria-invalid': props.isInvalid,\n                'aria-disabled': props.disabled ? true : null,\n            } as HTMLAttributes)\n    );\n    // Cast selectedValueItem if it is an array of selected items\n    const selectedValueItems = computed(() =>\n        props.multiple ? (props.selectedValueItem as BentoListboxOptionItem[]) : []\n    );\n\n    const shouldShowInput = computed(() => props.dynamicFiltering && (props.open || props.alwaysComboboxIsInput));\n    const shouldShowSingleSelectSlot = computed(() => props.selectedValueItem && !props.multiple);\n    const shouldShowMultipleSlot = computed(\n        () =>\n            props.multiple &&\n            props.selectedValueItem &&\n            selectedValueItems.value.length > 0 &&\n            props.showSlotContentInMultiple\n    );\n\n    watch(\n        () => shouldShowInput.value,\n        () => {\n            if (shouldShowInput.value && !props.alwaysComboboxIsInput) {\n                nextTick(() => {\n                    textbox.value.focus();\n                });\n            }\n        }\n    );\n\n    const onOpenDropdown = () => {\n        if (!props.disabled && !props.readonly) {\n            textbox.value.focus();\n            emit(DropdownBaseTextboxEvent.OPEN);\n        }\n    };\n\n    const onCloseDropdown = () => {\n        if (props.open) {\n            textbox.value.focus();\n            emit(DropdownBaseTextboxEvent.CLOSE);\n        }\n    };\n\n    const onToggleDropdown = (event: Event) => {\n        const isDynamicFilteringInputClickEvent = props.open && (event.target as HTMLDivElement).tagName === 'INPUT';\n        if (isDynamicFilteringInputClickEvent) {\n            /**\n             * When there's a click even on the input during filtering\n             * and the popover is open, do not toggle the popover.\n             * Allow for click events inside the input field\n             */\n            return null;\n        }\n\n        return props.open ? onCloseDropdown() : onOpenDropdown();\n    };\n\n    const onClearSearch = () => {\n        emit(DropdownBaseTextboxEvent.CLEAR);\n        emit(DropdownBaseTextboxEvent.INPUT, '');\n        textbox.value.focus();\n    };\n    const onInputEvent = debounce<(event: Event) => void>((event: Event) => {\n        if (!props.readonly && !props.disabled) {\n            emit(DropdownBaseTextboxEvent.INPUT, (event.target as HTMLInputElement).value);\n        } else {\n            event.preventDefault();\n            event.stopPropagation();\n        }\n    }, props.debounceTime);\n\n    const focus = () => {\n        textbox.value.focus();\n    };\n\n    defineExpose({\n        focus,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Only for internal use, implements the logic of the textbox element to be implemented in the combobox.\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'dropdown-base-textbox',\n        inheritAttrs: false,\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-base-textbox.scss\" />\n","<template>\n    <div class=\"b-dropdown-default-textbox\" :class=\"conditionalClasses\" data-testid=\"default-textbox\">\n        <dropdown-base-textbox\n            ref=\"baseTextbox\"\n            v-bind=\"{ ...$attrs, ...$props }\"\n            class=\"b-dropdown-default-textbox__textbox\"\n            :value=\"value\"\n            v-on=\"listeners\"\n        >\n            <template v-for=\"(_, innerSlot) of slots\" #[innerSlot]=\"scope\">\n                <slot :name=\"innerSlot\" v-bind=\"scope\" />\n            </template>\n            <template #icon>\n                <div class=\"b-dropdown-default-textbox__chevron\">\n                    <chevron-up-icon v-show=\"isDropdownOpen\" svg-title=\"opened\" />\n                    <chevron-down-icon v-show=\"!isDropdownOpen\" svg-title=\"closed\" />\n                </div>\n            </template>\n        </dropdown-base-textbox>\n    </div>\n</template>\n\n<script lang=\"ts\" setup>\n    import { computed, defineComponent, PropType, ref, useSlots } from 'vue';\n    import DropdownBaseTextbox from '@/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.vue';\n    import { BentoListboxOptionItem, Booleanish } from '@/types';\n    import { stopEventPropagation } from '@/utils/ts/events';\n    import {\n        DropdownBaseTextboxEvent,\n        DropdownBaseTextboxState,\n    } from '../dropdown-base-textbox/dropdown-base-textbox.types';\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\n    const emit = defineEmits([\"clear\", \"close\", \"input\", \"keydown\", \"open\"]);\n\n    const slots = useSlots();\n\n    const props = defineProps({\n        /**\n         * The number of additional items that have been selected in the dropdown.\n         */\n        additionalItemsSelected: { type: [Number, String] as PropType<number | string>, default: 0 },\n\n        /**\n         * Sets the aria-controls attribute on the textbox. This should correspond to the popover's id that the textbox triggers.\n         */\n        ariaControls: {\n            type: String,\n            required: true,\n        },\n\n        /**\n         * Indicates whether the content the textbox triggers is visible or not. Needs to be set accordingly when the textbox is used and changed every time the popover is shown/hidden.\n         */\n        ariaExpanded: {\n            type: [String, Boolean] as PropType<Booleanish>,\n            required: true,\n        },\n\n        /**\n         * If no label element is used then the aria-label is be set should be set.\n         */\n        ariaLabel: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * Corresponds to the label's id that labels the textbox element.\n         */\n        ariaLabelledby: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * Renders the dropdown with a condensed style.\n         */\n        condensed: { type: Boolean, default: false },\n\n        /**\n         * Custom debounce time. Default: 300\n         */\n        debounceTime: { type: Number, default: 300 },\n\n        /**\n         * Disables any textbox functionality\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Selected option's label\n         */\n        displayValue: { type: String, default: null },\n\n        /**\n         * Sets the possibility to type into the textbox\n         */\n        dynamicFiltering: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Marks the textbox as invalid, rendering an error state\n         */\n        isInvalid: { type: Boolean, default: false },\n\n        /**\n         * Indicates if the dropdown is open so that\n         * the respective event can be emitted\n         */\n        open: { type: Boolean, default: false },\n\n        /**\n         * Sets the dropdown to readonly state\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * The selected value's list box item.\n         */\n        selectedValueItem: {\n            type: [Object, Array] as PropType<BentoListboxOptionItem | BentoListboxOptionItem[]>,\n            default: undefined,\n        },\n\n        /**\n         * Toggles whether to use the slot content select items shown in the textbox in multiple mode.\n         */\n        showSlotContentInMultiple: { type: Boolean, default: false },\n\n        /**\n         * The input value\n         */\n        value: { type: String, default: '' },\n\n        /*\n         * If enabled, the user will be able to select multiple items.\n         */\n        multiple: { type: Boolean, default: false },\n    });\n\n    const baseTextbox = ref(null);\n\n    const conditionalClasses = computed(() => ({\n        [`b-dropdown-default-textbox--${DropdownBaseTextboxState.ERROR}`]:\n            !props.disabled && !props.readonly && props.isInvalid,\n        [`b-dropdown-default-textbox--${DropdownBaseTextboxState.DISABLED}`]: props.disabled,\n        [`b-dropdown-default-textbox--${DropdownBaseTextboxState.READONLY}`]: props.readonly,\n        [`b-dropdown-default-textbox--${DropdownBaseTextboxState.OPENED}`]: props.open,\n        'b-dropdown-default-textbox--condensed': props.condensed,\n    }));\n\n    const isDropdownOpen = computed(() => props.open && !props.disabled && !props.readonly);\n\n    const onInput = (newInput: string) => {\n        emit('input', newInput);\n    };\n    const onKeyDown = (e: KeyboardEvent) => {\n        emit('keydown', e);\n    };\n    const openDropdown = (e: Event) => {\n        stopEventPropagation(e);\n        emit('open');\n    };\n    const closeDropdown = (e: Event) => {\n        stopEventPropagation(e);\n        emit('close');\n    };\n    const clearValue = (e: Event) => {\n        stopEventPropagation(e);\n        emit('clear');\n    };\n\n    const listeners = {\n        [DropdownBaseTextboxEvent.INPUT]: onInput,\n        [DropdownBaseTextboxEvent.OPEN]: openDropdown,\n        [DropdownBaseTextboxEvent.CLOSE]: closeDropdown,\n        [DropdownBaseTextboxEvent.CLEAR]: clearValue,\n        [DropdownBaseTextboxEvent.KEYDOWN]: onKeyDown,\n    };\n\n    const focus = () => {\n        baseTextbox.value.focus();\n    };\n\n    defineExpose({\n        focus,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * For internal use only, textbox component used in the dropdown component.\n     */\n    export default defineComponent({\n        name: 'dropdown-default-textbox',\n        inheritAttrs: false,\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-default-textbox.scss\" />\n"],"names":["BentoDropdownSize","BentoDropdownSize2","DropdownBaseTextboxState","DropdownBaseTextboxState2","DropdownBaseTextboxEvent","DropdownBaseTextboxEvent2","__default__$1","defineComponent","messages","t","useI18n","attrs","useAttrs","slots","useSlots","hasSlot","useHasSlot","textbox","ref","textboxId","generateUid","conditionalClasses","computed","props","comboboxConditionalClasses","isFiltering","ariaAttributes","_a","selectedValueItems","shouldShowInput","shouldShowSingleSelectSlot","shouldShowMultipleSlot","watch","nextTick","onOpenDropdown","emit","onCloseDropdown","onToggleDropdown","event","onClearSearch","onInputEvent","debounce","focus","expose","__default__","baseTextbox","isDropdownOpen","onInput","newInput","onKeyDown","e","openDropdown","stopEventPropagation","closeDropdown","clearValue","listeners"],"mappings":"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"}

package/dist/chunks/{dropdown-tag.Ntdp7P7W.js → dropdown-tag.XIlES6IT.js}

@@ -1,12 +1,12 @@
 import { defineComponent as a, computed as i, toRefs as m } from "vue";
-import { B as v } from "./avatar.DXzyWKsI.js";
-import { B as p } from "./dropdown.DC9un4VJ.js";
+import { B as v } from "./avatar.BgwjpLQO.js";
+import { B as p } from "./dropdown.BqsoncJr.js";
 import { n as c } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { d as y, B as b } from "./typography.Bu_WAKdf.js";
-import { u as w } from "./use-country-items.C25TI6tp.js";
-import { B as d } from "./country.types.Br0AjxGy.js";
-import { L as f } from "./listbox-option-tag.BnX0H4HE.js";
-import { B as $ } from "./payment-method.CoXB0ZAW.js";
+import { d as y, B as b } from "./typography.J1v_SPG3.js";
+import { u as w } from "./use-country-items.DPBbl1KK.js";
+import { B as d } from "./country.types.pilf5B3F.js";
+import { L as f } from "./listbox-option-tag.Co0ycEdQ.js";
+import { B as $ } from "./payment-method.UaERFtej.js";
 import "../assets/dropdown-tag.css";
 const B = a({
   name: "bento-dropdown-avatar"
@@ -212,4 +212,4 @@ export {
   nt as d,
   st as e
 };
-//# sourceMappingURL=dropdown-tag.Ntdp7P7W.js.map
+//# sourceMappingURL=dropdown-tag.XIlES6IT.js.map

package/dist/chunks/{dropdown-tag.Ntdp7P7W.js.map → dropdown-tag.XIlES6IT.js.map}

@@ -1 +1 @@
-{"version":3,"file":"dropdown-tag.Ntdp7P7W.js","sources":["../../src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue","../../src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue","../../src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue","../../src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue","../../src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue"],"sourcesContent":["<template>\n    <div>\n        <bento-dropdown v-slot=\"{ label, data }\" v-bind=\"$props\" :items=\"dropdownItems\" @input=\"onInput\">\n            <bento-avatar :username=\"label\" :src=\"data\" />\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { BentoListboxSelectedValue } from '@/types';\n    import { BentoAvatarListboxOptions } from './dropdown-avatar.types';\n    import { BentoAvatar } from '@/components/avatar';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the avatar dropdown with.\n         * It must be an array of {@see BentoAvatarListboxOptions }\n         *  * @property {string} value.label - Text to be displayed in the option.\n         *  * @property {string,number} value.value - Value of the option.\n         *  * @property {string} value.src - Image source of the avatar image.\n         */\n        items: {\n            type: Array as PropType<BentoAvatarListboxOptions>,\n            default: () => [],\n        },\n    });\n\n    const emit = defineEmits([\"input\"]);\n\n    const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', selectedValue);\n\n    const dropdownItems = computed(() => props.items.map(({ value, label, src }) => ({ value, label, data: src })));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Avatar Dropdown showing a selectable list of countries.\n     *\n     * @example\n     * import { BentoDropdownAvatar } from '@adyen/bento-vue2';\n     * import type { BentoAvatarListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdownAvatar },\n     *     template: `\n     *          <bento-dropdown-avatar\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 2\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref('user-id-1') // Default value\n     *         const options: BentoAvatarListboxOptions = [\n     *              { label: 'User 1', value: 'user-id-1' },\n     *              { label: 'User 2', value: 'user-id-2', src: 'image-source.jpeg' },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-dropdown-avatar',\n    });\n</script>\n","<template>\n    <div>\n        <bento-dropdown v-slot=\"{ label }\" v-bind=\"$props\" :items=\"countryItems\" @input=\"onInput\">\n            <bento-typography el=\"span\">{{ label }}</bento-typography>\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, PropType, toRefs } from 'vue';\n    import { BentoCountryListboxOptions } from './dropdown-country.types';\n    import { BentoListboxSelectedValue } from '@/types';\n    import { BentoTypography } from '@/components/typography';\n    import { useCountryItems } from './composables/use-country-items';\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { BentoCountryVariant } from '@/components/country';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the country dropdown with.\n         * It must be an array of {@see BentoCountryListboxOptions }\n         *  * @deprecated {string} value.label - Use BentoDropdown instead of custom labels\n         *  * @property {BentoCountryCode | string} value.value - Country code of the option\n         */\n        items: {\n            type: Array as PropType<BentoCountryListboxOptions>,\n            default: () => [],\n        },\n\n        /**\n         * Which label variant to display.\n         * @values iso, name, phone_code, capital\n         */\n        variant: {\n            type: String as PropType<BentoCountryVariant | `${BentoCountryVariant}`>,\n            default: BentoCountryVariant.CUSTOM,\n            validator: (value: BentoCountryVariant) => Object.values(BentoCountryVariant).includes(value),\n        },\n    });\n\n    const emit = defineEmits([\"input\"]);\n\n    const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', selectedValue);\n\n    const { variant, items } = toRefs(props);\n    const countryItems = useCountryItems(variant, items);\n\n    if (variant.value === 'custom' || items.value.some(item => item.label)) {\n        deprecate(\n            'BentoDropdownCountry \"custom\" variant and \"items\" prop \"label\" key',\n            'Use any of the other BentoDropdownCountry variants instead OR use BentoDropdown component for custom labels',\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Country Dropdown showing a selectable list of countries.\n     *\n     * @example\n     * import { BentoDropdownCountry, BentoCountryCode } from '@adyen/bento-vue2';\n     * import type { BentoCountryListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdown },\n     *     template: `\n     *          <bento-dropdown-country\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 2\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref(BentoCountryCode.NL) // Default value\n     *         const options: BentoCountryListboxOptions = [\n     *              { label: 'Option 1', value: BentoCountryCode.NL },\n     *              { label: 'Option 2', value: BentoCountryCode.BE },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'b-dropdown-country',\n    });\n</script>\n","<template>\n    <bento-dropdown v-slot=\"slotProps\" v-bind=\"$props\" @input=\"onInput\">\n        <listbox-option-tag :option=\"slotProps\" />\n    </bento-dropdown>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, PropType } from 'vue';\n    import type { BentoCurrencyListboxOptions } from './dropdown-currency.types';\n    import type { BentoListboxSelectedValue } from '@/types';\n    import { ListboxOptionTag } from '@/internal';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n\n    defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the country dropdown with.\n         * It must be an array of {@see BentoCurrencyListboxOptions }\n         *  * @property {string} value.label - Text to be displayed in the option\n         *  * @property {BentoCurrencyISOCode} value.code - Currency ISO code of the option\n         */\n        items: {\n            type: Array as PropType<BentoCurrencyListboxOptions>,\n            default: () => [],\n        },\n    });\n\n    const emit = defineEmits([\"input\"]);\n\n    const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', selectedValue);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Currency Dropdown showing a selectable list of currencies.\n     *\n     * @example\n     * import { BentoDropdownCountry, BentoCountryCode } from '@adyen/bento-vue2';\n     * import type { BentoCountryListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdown },\n     *     template: `\n     *          <bento-dropdown-currency\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 2\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref(BentoCountryCode.NL) // Default value\n     *         const options: BentoCountryListboxOptions = [\n     *              { label: 'Option 1', value: BentoCountryCode.NL },\n     *              { label: 'Option 2', value: BentoCountryCode.BE },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'b-dropdown-currency',\n    });\n</script>\n","<template>\n    <div>\n        <bento-dropdown v-slot=\"{ value, label }\" v-bind=\"$props\" @input=\"onInput\">\n            <bento-payment-method :type=\"value\" :label=\"label\" />\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, PropType } from 'vue';\n    import { BentoPaymentMethodListboxOptions } from './dropdown-payment-method.types';\n    import { BentoListboxSelectedValue } from '@/types';\n    import { BentoPaymentMethod } from '@/components/payment-method';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n\n    defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the payment method dropdown with.\n         * It must be an array of {@see BentoPaymentMethodListboxOptions }\n         *  * @property {string} value.label - Text to be displayed in the option\n         *  * @property {string} value.value - Payment type code that translates to a payment icon name {@see https://adyen-ui-assets.netlify.app/?path=/story/packages-ui-assets-payment-method-icons--icons}\n         */\n        items: {\n            type: Array as PropType<BentoPaymentMethodListboxOptions>,\n            default: () => [],\n        },\n    });\n\n    const emit = defineEmits([\"input\"]);\n\n    const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', selectedValue);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Payment method Dropdown showing a selectable list of countries.\n     *\n     * @example\n     * import { BentoDropdownPaymentMethod } from '@adyen/bento-vue2';\n     * import type { BentoPaymentMethodListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdownPaymentMethod },\n     *     template: `\n     *          <bento-dropdown-payment-method\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 'Visa'\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref('Ideal') // Default value\n     *         const options: BentoPaymentMethodListboxOptions = [\n     *              { label: 'Option 1', value: 'Ideal' },\n     *              { label: 'Option 2', value: 'Visa' },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-dropdown-payment-method',\n    });\n</script>\n","<template>\n    <bento-dropdown\n        v-slot=\"{ label, data }\"\n        v-bind=\"$props\"\n        class=\"b-dropdown-tag\"\n        :items=\"tagItems\"\n        show-slot-content-in-multiple\n        @input=\"onInput\"\n    >\n        <listbox-option-tag :option=\"{ value: label, data, label: '' }\" />\n    </bento-dropdown>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import type { BentoTagListboxOptions } from './dropdown-tag.types';\n    import type { BentoListboxSelectedValue } from '../../../../../types';\n    import { ListboxOptionTag } from '../../../../internal';\n    import BentoDropdown from '../../../dropdown.vue';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the tag dropdown with.\n         * It must be an array of {@see BentoTagListboxOptions }\n         *  * @property {string} value.label - Text to be displayed in the option\n         *  * @property {string,number} value.value - Value of the option\n         *  * @property {string} value.variant - The BentTag variant shown for the option.\n         */\n        items: {\n            type: Array as PropType<BentoTagListboxOptions>,\n            default: () => [],\n        },\n    });\n\n    const emit = defineEmits([\"input\"]);\n\n    const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', selectedValue);\n\n    const tagItems = computed(() => props.items?.map(({ label, value, variant }) => ({ label, value, data: variant })));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Tag Dropdown showing a selectable list of tags.\n     *\n     * @example\n     * import { BentoDropdownTag } from '@adyen/bento-vue2';\n     * import type { BentoTagListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdownTag },\n     *     template: `\n     *          <bento-dropdown-tag\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref('unique-id-1') // Default value\n     *         const options: BentoTagListboxOptions = [\n     *              { label: 'Offline', value: 'unique-id-1', variant: 'red' },\n     *              { label: 'Online', value: 'unique-id-2', variant: 'green' },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-dropdown-tag',\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-tag.scss\" />\n"],"names":["__default__$4","defineComponent","onInput","selectedValue","emit","dropdownItems","computed","props","value","label","src","__default__$3","variant","items","toRefs","countryItems","useCountryItems","item","deprecate","__default__$2","__default__$1","__default__","tagItems","_a"],"mappings":";;;;;;;;;;AAkEI,MAAAA,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAE/B,CAAA;;;;;;;;;;;;;;;;;;iBApCAC,IAAA,CAAAC,MAAAC,EAAA,SAAAD,CAAA,GAEAE,IAAAC,EAAA,MAAAC,EAAA,MAAA,IAAA,CAAA,EAAA,OAAAC,GAAA,OAAAC,GAAA,KAAAC,EAAA,OAAA,EAAA,OAAAF,GAAA,OAAAC,GAAA,MAAAC,EAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;sBCqDAC,IAAAV,EAAA;AAAA,EAA+B,MAAA;AAE/B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;iBA7CAC,IAAA,CAAAC,MAAAC,EAAA,SAAAD,CAAA,GAEA,EAAA,SAAAS,GAAA,OAAAC,EAAA,IAAAC,EAAAP,CAAA,GACAQ,IAAAC,EAAAJ,GAAAC,CAAA;AAEA,YAAAD,EAAA,UAAA,YAAAC,EAAA,MAAA,KAAA,CAAAI,MAAAA,EAAA,KAAA,MACIC;AAAA,MAAA;AAAA,MACI;AAAA,MACA;AAAA,IACA;;;;;;;;;;;;;;;;sBCQRC,IAAAlB,EAAA;AAAA,EAA+B,MAAA;AAE/B,CAAA;;;;;;;;;;;;;;;;;0CAlCA,CAAAE,MAAAC,EAAA,SAAAD,CAAA;;;;;;;;;;;;;;;;sBCkCAiB,IAAAnB,EAAA;AAAA,EAA+B,MAAA;AAE/B,CAAA;;;;;;;;;;;;;;;;;0CAlCA,CAAAE,MAAAC,EAAA,SAAAD,CAAA;;;;;;;;;;;;;;;;sBCsCAkB,IAAApB,EAAA;AAAA,EAA+B,MAAA;AAE/B,CAAA;;;;;;;;;;;;;;;;;;iBAlCAC,IAAA,CAAAC,MAAAC,EAAA,SAAAD,CAAA,GAEAmB,IAAAhB,EAAA,MAAA;;AAAA,cAAAiB,IAAAhB,EAAA,UAAA,gBAAAgB,EAAA,IAAA,CAAA,EAAA,OAAAd,GAAA,OAAAD,GAAA,SAAAI,EAAA,OAAA,EAAA,OAAAH,GAAA,OAAAD,GAAA,MAAAI,EAAA;AAAA,KAAA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dropdown-tag.XIlES6IT.js","sources":["../../src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue","../../src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue","../../src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue","../../src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue","../../src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue"],"sourcesContent":["<template>\n    <div>\n        <bento-dropdown v-slot=\"{ label, data }\" v-bind=\"$props\" :items=\"dropdownItems\" @input=\"onInput\">\n            <bento-avatar :username=\"label\" :src=\"data\" />\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { BentoListboxSelectedValue } from '@/types';\n    import { BentoAvatarListboxOptions } from './dropdown-avatar.types';\n    import { BentoAvatar } from '@/components/avatar';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the avatar dropdown with.\n         * It must be an array of {@see BentoAvatarListboxOptions }\n         *  * @property {string} value.label - Text to be displayed in the option.\n         *  * @property {string,number} value.value - Value of the option.\n         *  * @property {string} value.src - Image source of the avatar image.\n         */\n        items: {\n            type: Array as PropType<BentoAvatarListboxOptions>,\n            default: () => [],\n        },\n    });\n\n    const emit = defineEmits([\"input\"]);\n\n    const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', selectedValue);\n\n    const dropdownItems = computed(() => props.items.map(({ value, label, src }) => ({ value, label, data: src })));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Avatar Dropdown showing a selectable list of countries.\n     *\n     * @example\n     * import { BentoDropdownAvatar } from '@adyen/bento-vue2';\n     * import type { BentoAvatarListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdownAvatar },\n     *     template: `\n     *          <bento-dropdown-avatar\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 2\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref('user-id-1') // Default value\n     *         const options: BentoAvatarListboxOptions = [\n     *              { label: 'User 1', value: 'user-id-1' },\n     *              { label: 'User 2', value: 'user-id-2', src: 'image-source.jpeg' },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-dropdown-avatar',\n    });\n</script>\n","<template>\n    <div>\n        <bento-dropdown v-slot=\"{ label }\" v-bind=\"$props\" :items=\"countryItems\" @input=\"onInput\">\n            <bento-typography el=\"span\">{{ label }}</bento-typography>\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, PropType, toRefs } from 'vue';\n    import { BentoCountryListboxOptions } from './dropdown-country.types';\n    import { BentoListboxSelectedValue } from '@/types';\n    import { BentoTypography } from '@/components/typography';\n    import { useCountryItems } from './composables/use-country-items';\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { BentoCountryVariant } from '@/components/country';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the country dropdown with.\n         * It must be an array of {@see BentoCountryListboxOptions }\n         *  * @deprecated {string} value.label - Use BentoDropdown instead of custom labels\n         *  * @property {BentoCountryCode | string} value.value - Country code of the option\n         */\n        items: {\n            type: Array as PropType<BentoCountryListboxOptions>,\n            default: () => [],\n        },\n\n        /**\n         * Which label variant to display.\n         * @values iso, name, phone_code, capital\n         */\n        variant: {\n            type: String as PropType<BentoCountryVariant | `${BentoCountryVariant}`>,\n            default: BentoCountryVariant.CUSTOM,\n            validator: (value: BentoCountryVariant) => Object.values(BentoCountryVariant).includes(value),\n        },\n    });\n\n    const emit = defineEmits([\"input\"]);\n\n    const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', selectedValue);\n\n    const { variant, items } = toRefs(props);\n    const countryItems = useCountryItems(variant, items);\n\n    if (variant.value === 'custom' || items.value.some(item => item.label)) {\n        deprecate(\n            'BentoDropdownCountry \"custom\" variant and \"items\" prop \"label\" key',\n            'Use any of the other BentoDropdownCountry variants instead OR use BentoDropdown component for custom labels',\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Country Dropdown showing a selectable list of countries.\n     *\n     * @example\n     * import { BentoDropdownCountry, BentoCountryCode } from '@adyen/bento-vue2';\n     * import type { BentoCountryListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdown },\n     *     template: `\n     *          <bento-dropdown-country\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 2\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref(BentoCountryCode.NL) // Default value\n     *         const options: BentoCountryListboxOptions = [\n     *              { label: 'Option 1', value: BentoCountryCode.NL },\n     *              { label: 'Option 2', value: BentoCountryCode.BE },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'b-dropdown-country',\n    });\n</script>\n","<template>\n    <bento-dropdown v-slot=\"slotProps\" v-bind=\"$props\" @input=\"onInput\">\n        <listbox-option-tag :option=\"slotProps\" />\n    </bento-dropdown>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, PropType } from 'vue';\n    import type { BentoCurrencyListboxOptions } from './dropdown-currency.types';\n    import type { BentoListboxSelectedValue } from '@/types';\n    import { ListboxOptionTag } from '@/internal';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n\n    defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the country dropdown with.\n         * It must be an array of {@see BentoCurrencyListboxOptions }\n         *  * @property {string} value.label - Text to be displayed in the option\n         *  * @property {BentoCurrencyISOCode} value.code - Currency ISO code of the option\n         */\n        items: {\n            type: Array as PropType<BentoCurrencyListboxOptions>,\n            default: () => [],\n        },\n    });\n\n    const emit = defineEmits([\"input\"]);\n\n    const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', selectedValue);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Currency Dropdown showing a selectable list of currencies.\n     *\n     * @example\n     * import { BentoDropdownCountry, BentoCountryCode } from '@adyen/bento-vue2';\n     * import type { BentoCountryListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdown },\n     *     template: `\n     *          <bento-dropdown-currency\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 2\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref(BentoCountryCode.NL) // Default value\n     *         const options: BentoCountryListboxOptions = [\n     *              { label: 'Option 1', value: BentoCountryCode.NL },\n     *              { label: 'Option 2', value: BentoCountryCode.BE },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'b-dropdown-currency',\n    });\n</script>\n","<template>\n    <div>\n        <bento-dropdown v-slot=\"{ value, label }\" v-bind=\"$props\" @input=\"onInput\">\n            <bento-payment-method :type=\"value\" :label=\"label\" />\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, PropType } from 'vue';\n    import { BentoPaymentMethodListboxOptions } from './dropdown-payment-method.types';\n    import { BentoListboxSelectedValue } from '@/types';\n    import { BentoPaymentMethod } from '@/components/payment-method';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n\n    defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the payment method dropdown with.\n         * It must be an array of {@see BentoPaymentMethodListboxOptions }\n         *  * @property {string} value.label - Text to be displayed in the option\n         *  * @property {string} value.value - Payment type code that translates to a payment icon name {@see https://adyen-ui-assets.netlify.app/?path=/story/packages-ui-assets-payment-method-icons--icons}\n         */\n        items: {\n            type: Array as PropType<BentoPaymentMethodListboxOptions>,\n            default: () => [],\n        },\n    });\n\n    const emit = defineEmits([\"input\"]);\n\n    const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', selectedValue);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Payment method Dropdown showing a selectable list of countries.\n     *\n     * @example\n     * import { BentoDropdownPaymentMethod } from '@adyen/bento-vue2';\n     * import type { BentoPaymentMethodListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdownPaymentMethod },\n     *     template: `\n     *          <bento-dropdown-payment-method\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 'Visa'\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref('Ideal') // Default value\n     *         const options: BentoPaymentMethodListboxOptions = [\n     *              { label: 'Option 1', value: 'Ideal' },\n     *              { label: 'Option 2', value: 'Visa' },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-dropdown-payment-method',\n    });\n</script>\n","<template>\n    <bento-dropdown\n        v-slot=\"{ label, data }\"\n        v-bind=\"$props\"\n        class=\"b-dropdown-tag\"\n        :items=\"tagItems\"\n        show-slot-content-in-multiple\n        @input=\"onInput\"\n    >\n        <listbox-option-tag :option=\"{ value: label, data, label: '' }\" />\n    </bento-dropdown>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import type { BentoTagListboxOptions } from './dropdown-tag.types';\n    import type { BentoListboxSelectedValue } from '../../../../../types';\n    import { ListboxOptionTag } from '../../../../internal';\n    import BentoDropdown from '../../../dropdown.vue';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the tag dropdown with.\n         * It must be an array of {@see BentoTagListboxOptions }\n         *  * @property {string} value.label - Text to be displayed in the option\n         *  * @property {string,number} value.value - Value of the option\n         *  * @property {string} value.variant - The BentTag variant shown for the option.\n         */\n        items: {\n            type: Array as PropType<BentoTagListboxOptions>,\n            default: () => [],\n        },\n    });\n\n    const emit = defineEmits([\"input\"]);\n\n    const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', selectedValue);\n\n    const tagItems = computed(() => props.items?.map(({ label, value, variant }) => ({ label, value, data: variant })));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Tag Dropdown showing a selectable list of tags.\n     *\n     * @example\n     * import { BentoDropdownTag } from '@adyen/bento-vue2';\n     * import type { BentoTagListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdownTag },\n     *     template: `\n     *          <bento-dropdown-tag\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref('unique-id-1') // Default value\n     *         const options: BentoTagListboxOptions = [\n     *              { label: 'Offline', value: 'unique-id-1', variant: 'red' },\n     *              { label: 'Online', value: 'unique-id-2', variant: 'green' },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-dropdown-tag',\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-tag.scss\" />\n"],"names":["__default__$4","defineComponent","onInput","selectedValue","emit","dropdownItems","computed","props","value","label","src","__default__$3","variant","items","toRefs","countryItems","useCountryItems","item","deprecate","__default__$2","__default__$1","__default__","tagItems","_a"],"mappings":";;;;;;;;;;AAkEI,MAAAA,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAE/B,CAAA;;;;;;;;;;;;;;;;;;iBApCAC,IAAA,CAAAC,MAAAC,EAAA,SAAAD,CAAA,GAEAE,IAAAC,EAAA,MAAAC,EAAA,MAAA,IAAA,CAAA,EAAA,OAAAC,GAAA,OAAAC,GAAA,KAAAC,EAAA,OAAA,EAAA,OAAAF,GAAA,OAAAC,GAAA,MAAAC,EAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;sBCqDAC,IAAAV,EAAA;AAAA,EAA+B,MAAA;AAE/B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;iBA7CAC,IAAA,CAAAC,MAAAC,EAAA,SAAAD,CAAA,GAEA,EAAA,SAAAS,GAAA,OAAAC,EAAA,IAAAC,EAAAP,CAAA,GACAQ,IAAAC,EAAAJ,GAAAC,CAAA;AAEA,YAAAD,EAAA,UAAA,YAAAC,EAAA,MAAA,KAAA,CAAAI,MAAAA,EAAA,KAAA,MACIC;AAAA,MAAA;AAAA,MACI;AAAA,MACA;AAAA,IACA;;;;;;;;;;;;;;;;sBCQRC,IAAAlB,EAAA;AAAA,EAA+B,MAAA;AAE/B,CAAA;;;;;;;;;;;;;;;;;0CAlCA,CAAAE,MAAAC,EAAA,SAAAD,CAAA;;;;;;;;;;;;;;;;sBCkCAiB,IAAAnB,EAAA;AAAA,EAA+B,MAAA;AAE/B,CAAA;;;;;;;;;;;;;;;;;0CAlCA,CAAAE,MAAAC,EAAA,SAAAD,CAAA;;;;;;;;;;;;;;;;sBCsCAkB,IAAApB,EAAA;AAAA,EAA+B,MAAA;AAE/B,CAAA;;;;;;;;;;;;;;;;;;iBAlCAC,IAAA,CAAAC,MAAAC,EAAA,SAAAD,CAAA,GAEAmB,IAAAhB,EAAA,MAAA;;AAAA,cAAAiB,IAAAhB,EAAA,UAAA,gBAAAgB,EAAA,IAAA,CAAA,EAAA,OAAAd,GAAA,OAAAD,GAAA,SAAAI,EAAA,OAAA,EAAA,OAAAH,GAAA,OAAAD,GAAA,MAAAI,EAAA;AAAA,KAAA;;;;;;;;;;;;;;;;;;"}