@adyen/bento-vue2 1.92.2 → 1.93.0

package/dist/chunks/{dialog-page.EdejG53a.js.map → dialog-page.CziegEuc.js.map}

@@ -1 +1 @@
-{"version":3,"file":"dialog-page.EdejG53a.js","sources":["../../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":["import { type 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<Array<string>>;\n    previousPages: Ref<Array<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\n                v-if=\"hasSlot('content')\"\n                ref=\"contentElement\"\n                class=\"b-dialog-page__content\"\n                :tabindex=\"isScrollable ? 0 : null\"\n                @scroll=\"onScroll\"\n            >\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, onMounted, onUnmounted, type 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        type BentoDialogPageConfigData,\n        type 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    import { useScroll } from '@vueuse/core';\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 isMounted = ref(false);\n\n    const { arrivedState } = useScroll(contentElement);\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 && !arrivedState.top),\n    }));\n\n    const footerConditionalClasses = computed(() => ({\n        'b-dialog-page__footer--with-border': props.alwaysShowBorder || (hasScroll.value && !arrivedState.bottom),\n    }));\n\n    const isScrollable = computed(() => !(arrivedState.bottom && arrivedState.top));\n\n    const onScroll = () => {\n        if (!contentElement.value) {\n            return;\n        }\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        if (!isMounted.value) {\n            return;\n        }\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        if (!isMounted.value) {\n            return;\n        }\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 (!isMounted.value || !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    onMounted(() => {\n        isMounted.value = true;\n    });\n\n    // Unregister page on unmounting the page\n    onUnmounted(() => {\n        isMounted.value = false;\n        unregisterPage();\n    });\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":["BentoDialogPageAnimation","BentoDialogPageAnimation2","DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY","DIALOG_PAGE_CONFIG_INJECTION_KEY","__default__","messages","slots","useSlots","hasSlot","useHasSlot","t","useI18n","contentElement","ref","hasScroll","isMounted","arrivedState","useScroll","showPage","computed","activePage","props","headerConditionalClasses","footerConditionalClasses","isScrollable","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","onMounted","onUnmounted"],"mappings":";;;;;;;;;AAEO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,0BAAA,0CACAA,EAAA,yBAAA,yCAFQA,IAAAD,KAAA,CAAA,CAAA;ACFL,MAAAE,IAAA,uBAAA,mCAAA,GACAC,IAAA,uBAAA,uCAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GC0PHC,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAlKAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GACA,EAAA,GAAAI,EAAA,IAAAC,EAAA,GAGAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,EAAA,GACAE,IAAAF,EAAA,EAAA,GAEA,EAAA,cAAAG,EAAA,IAAAC,EAAAL,CAAA,GAGAM,IAAAC,EAAA,MAAAC,EAAA,QAAAA,EAAA,UAAAC,EAAA,SAAA,EAAA,GAGAC,IAAAH,EAAA,OAAA;AAAA,MAAiD,sCAAAE,EAAA,oBAAAP,EAAA,SAAA,CAAAE,EAAA;AAAA,IACqD,EAAA,GAGtGO,IAAAJ,EAAA,OAAA;AAAA,MAAiD,sCAAAE,EAAA,oBAAAP,EAAA,SAAA,CAAAE,EAAA;AAAA,IACqD,EAAA,GAGtGQ,IAAAL,EAAA,MAAA,EAAAH,EAAA,UAAAA,EAAA,IAAA,GAEAS,IAAA,MAAA;AACI,MAAAb,EAAA;AAAA,IAEA,GAGJc,IAAA,OAAAC,MAAA;AACI,MAAAA,MAIA,MAAAC,EAAA,GACAb,EAAA,UAGAD,EAAA,QAAAF,EAAA,SAAAA,EAAA,MAAA,eAAAA,EAAA,MAAA;AAAA,IAAmG,GAGvG,EAAA,YAAAQ,GAAA,WAAAS,GAAA,mBAAAC,GAAA,QAAAC,GAAA,OAAAC,GAAA,eAAAC,GAAA,YAAAC,EAAA,IAAAC,EAAAhC,CAAA;AAGA,IAAAiC,EAAA,MAAAL,EAAA,OAAAL,GAAA,EAAA,WAAA,GAAA,CAAA,GACAU,EAAA,MAAAlB,EAAA,OAAAQ,GAAA,EAAA,WAAA,GAAA,CAAA;AAGA,UAAAW,IAAAlB,EAAA,MACIE,EAAA,eACI,KAEJA,EAAA,iBAAA,OACI,KAEJiB,EAAA,SAAApB,EAAA,KAA0C,GAI9CqB,IAAA,MAAA;AACI,MAAAV,EAAA,QAAA7B,EAAA,yBACA8B,MACIA,EAAA,QAAA,KAGJU,EAAA,cAAA;AAAA,IAAmB,GAGvBC,IAAA,MAAA;AACI,MAAAX,MACIA,EAAA,QAAA;AAAA,IACJ,GAIJQ,IAAAnB,EAAA,MAAAc,EAAA,MAAA,SAAA,CAAA,GACAS,IAAAvB,EAAA,MAAAc,EAAA,MAAAA,EAAA,MAAA,SAAA,CAAA,CAAA,GACAU,IAAAxB,EAAA,MAAAa,EAAA,MAAA,KAAA,CAAAY,MAAAA,MAAAxB,EAAA,KAAA,CAAA,GAEAyB,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;AAKJ,MAFAJ,EAAA,QAAA7B,EAAA,wBACA,MAAA4B,EAAA,GACAb,EAAA,SAGAmB,EAAAQ,EAAA,KAAA;AAAA,IAAyB;AAI7B,IAAAN;AAAA,MAAA,MAAAhB,EAAA;AAAA,MACqB,YAAA;AAGb,YADA,MAAAQ,EAAA,GACA,GAAAb,EAAA,SAAA,CAAAgB,EAAA,QAIA;AAAA,cAAAX,EAAA,SAAA,CAAAuB,EAAA,SACII,GAAA;AAEI,oBAAA;AAAA,cAAQ,0BAAA3B,EAAA,KAAA;AAAA,YACsC;AAE9C;AAAA,UAAA;AAIR,UAAAA,EAAA,UAAAsB,EAAA,SACIT,EAAA,MAAA,KAAAb,EAAA,KAAA;AAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;AAItB,UAAA4B,IAAAb,EAAAjC,CAAA,GACA,EAAA,gBAAA+C,EAAA,IAAAD,EAAA3B,EAAA,MAAA;AAEA,WAAA6B,EAAA,MAAA;AACI,MAAAnC,EAAA,QAAA;AAAA,IAAkB,CAAA,GAItBoC,EAAA,MAAA;AACI,MAAApC,EAAA,QAAA,IACAkC,EAAA;AAAA,IAAe,CAAA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dialog-page.CziegEuc.js","sources":["../../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":["import { type 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<Array<string>>;\n    previousPages: Ref<Array<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\n                v-if=\"hasSlot('content')\"\n                ref=\"contentElement\"\n                class=\"b-dialog-page__content\"\n                :tabindex=\"isScrollable ? 0 : null\"\n                @scroll=\"onScroll\"\n            >\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, onMounted, onUnmounted, type 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        type BentoDialogPageConfigData,\n        type 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    import { useScroll } from '@vueuse/core';\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 isMounted = ref(false);\n\n    const { arrivedState } = useScroll(contentElement);\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 && !arrivedState.top),\n    }));\n\n    const footerConditionalClasses = computed(() => ({\n        'b-dialog-page__footer--with-border': props.alwaysShowBorder || (hasScroll.value && !arrivedState.bottom),\n    }));\n\n    const isScrollable = computed(() => !(arrivedState.bottom && arrivedState.top));\n\n    const onScroll = () => {\n        if (!contentElement.value) {\n            return;\n        }\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        if (!isMounted.value) {\n            return;\n        }\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        if (!isMounted.value) {\n            return;\n        }\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 (!isMounted.value || !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    onMounted(() => {\n        isMounted.value = true;\n    });\n\n    // Unregister page on unmounting the page\n    onUnmounted(() => {\n        isMounted.value = false;\n        unregisterPage();\n    });\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":["BentoDialogPageAnimation","BentoDialogPageAnimation2","DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY","DIALOG_PAGE_CONFIG_INJECTION_KEY","__default__","messages","slots","useSlots","hasSlot","useHasSlot","t","useI18n","contentElement","ref","hasScroll","isMounted","arrivedState","useScroll","showPage","computed","activePage","props","headerConditionalClasses","footerConditionalClasses","isScrollable","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","onMounted","onUnmounted"],"mappings":"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"}

package/dist/chunks/{draggable-handle.BR_aQH5N.js → draggable-handle.BsGnEMAT.js}

@@ -1,5 +1,5 @@
 import { defineComponent as h, computed as n } from "vue";
-import { f as u } from "./button-actions.CXD6_9qN.js";
+import { f as u } from "./button-actions.CdsmKyvj.js";
 import { u as b } from "./index.B6WW_F-J.js";
 import { G as f } from "./grab.BxiVZ1RZ.js";
 /* empty css              */
@@ -242,4 +242,4 @@ const E = N.exports;
 export {
   E as d
 };
-//# sourceMappingURL=draggable-handle.BR_aQH5N.js.map
+//# sourceMappingURL=draggable-handle.BsGnEMAT.js.map

package/dist/chunks/{draggable-handle.BR_aQH5N.js.map → draggable-handle.BsGnEMAT.js.map}

@@ -1 +1 @@
-{"version":3,"file":"draggable-handle.BR_aQH5N.js","sources":["../../../ui-assets/icons-16/dist/vue/arrow-top.vue","../../../ui-assets/icons-16/dist/vue/arrow-bottom.vue","../../src/components/draggable/components/draggable-handle/draggable-handle.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=\"#001222\" d=\"M8.75023 3.81089L13.0001 8.06077L14.0608 7.00011L8.00011 0.939453L1.93945 7.00011L3.00011 8.06077L7.25023 3.81066V14.7502H8.75023V3.81089Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","\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=\"#001222\" d=\"M7.25434 12.1937L3.00011 7.93952L1.93945 9.00018L8.00011 15.0608L14.0608 9.00018L13.0001 7.93952L8.75433 12.1853L8.74316 1.24951L7.24316 1.25104L7.25434 12.1937Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","<template>\n    <bento-menu\n        class=\"b-draggable-handle\"\n        :class=\"computedClasses\"\n        :data=\"menuData\"\n        :menu-width=\"250\"\n        :button=\"buttonComputedProps\"\n    >\n        <template #iconLeft>\n            <span class=\"b-draggable-handle__icon\">\n                <grab-icon aria-hidden=\"true\" />\n            </span>\n        </template>\n    </bento-menu>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import { BentoMenu, type BentoMenuItem, type BentoMenuProps } from '@/components/menu';\n    import { type BentoDraggableHandleProps } from './draggable-handle.types';\n    import { useI18n } from '@/utils/ts/i18n';\n    import GrabIcon from '@adyen/ui-assets-icons-16/vue/grab';\n    import ArrowTopIcon from '@adyen/ui-assets-icons-16/vue/arrow-top';\n    import ArrowLeftIcon from '@adyen/ui-assets-icons-16/vue/arrow-left';\n    import ArrowRightIcon from '@adyen/ui-assets-icons-16/vue/arrow-right';\n    import ArrowBottomIcon from '@adyen/ui-assets-icons-16/vue/arrow-bottom';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  condensed: { default: false },\n  disabled: { type: Boolean, default: false },\n  disabledMenus: { default: () => ({}) },\n  label: null,\n  variant: { default: 'up-and-down' }\n});\n    const emit = defineEmits([\"move-bottom\", \"move-down\", \"move-left\", \"move-right\", \"move-top\", \"move-up\"]);\n\n    const buttonComputedProps = computed(\n        () =>\n            ({\n                'aria-label': t('reorderLabel', { label: props.label }),\n                condensed: props.condensed,\n                disabled: props.disabled,\n                variant: 'tertiary',\n            }) as BentoMenuProps['button']\n    );\n\n    const computedClasses = computed(() => ({\n        /**\n         * Disables the handle and prevents the entire\n         * element from being dragged.\n         * Used by `useBentoDraggable`\n         */\n        'b-draggable-handle--disabled': props.disabled,\n    }));\n\n    /**\n     * Renders the menus for the draggable handle.\n     */\n    const menuData = computed(() => {\n        const MENUS: {\n            [key: string]: BentoMenuItem;\n        } = {\n            up: {\n                text: t('moveUp'),\n                handler: () => emit('move-up'),\n                disabled: props.disabledMenus.up,\n                icon: ArrowTopIcon,\n            },\n            down: {\n                text: t('moveDown'),\n                handler: () => emit('move-down'),\n                disabled: props.disabledMenus.down,\n                icon: ArrowBottomIcon,\n            },\n            left: {\n                text: t('moveLeft'),\n                handler: () => emit('move-left'),\n                disabled: props.disabledMenus.left,\n                icon: ArrowLeftIcon,\n            },\n            right: {\n                text: t('moveRight'),\n                handler: () => emit('move-right'),\n                disabled: props.disabledMenus.right,\n                icon: ArrowRightIcon,\n            },\n            top: {\n                text: t('moveToTheTop'),\n                handler: () => emit('move-top'),\n                disabled: props.disabledMenus.top,\n                icon: ArrowTopIcon,\n            },\n            bottom: {\n                text: t('moveToTheBottom'),\n                handler: () => emit('move-bottom'),\n                disabled: props.disabledMenus.bottom,\n                icon: ArrowBottomIcon,\n            },\n        };\n\n        // Render the menus and dividers according to the variant\n        return props.variant === 'up-and-down'\n            ? [\n                  MENUS.up,\n                  // Divider added after \"Move down\"\n                  {\n                      ...MENUS.down,\n                      addDivider: true,\n                  },\n                  MENUS.top,\n                  MENUS.bottom,\n              ]\n            : [\n                  MENUS.up,\n                  MENUS.down,\n                  MENUS.left,\n                  // Divider added after \"Move right\"\n                  {\n                      ...MENUS.right,\n                      addDivider: true,\n                  },\n                  MENUS.top,\n                  MENUS.bottom,\n              ];\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Bento drag and drop handle component.\n     *\n     * @example\n     * import { BentoDraggableHandle } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDraggableHandle },\n     *     template: `\n     *          <bento-draggable-handle\n     *              bottom\n     *              condensed\n     *              down\n     *              left\n     *              right\n     *              top\n     *              up\n     *              \\@move-bottom=\"moveBottom(index)\"\n     *              \\@move-down=\"moveDown(index)\"\n     *              \\@move-left=\"moveLeft(index)\"\n     *              \\@move-right=\"moveRight(index)\"\n     *              \\@move-top=\"moveTop(index)\"\n     *              \\@move-up=\"moveUp(index)\"\n     *          />\n     *     `,\n     *     setup() {\n     *          const moveBottom = () => {}\n     *          const moveDown = () => {}\n     *          const moveLeft = () => {}\n     *          const moveRight = () => {}\n     *          const moveTop = () => {}\n     *          const moveUp = () => {}\n     *     }\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-draggable-handle',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./draggable-handle.scss\" />\n"],"names":["uuid$1","_sfc_main$2","uuid","_sfc_main$1","__default__","messages","useI18n","buttonComputedProps","computed","props","computedClasses","menuData","MENUS","emit","ArrowTopIcon","ArrowBottomIcon","ArrowLeftIcon","ArrowRightIcon"],"mappings":";;;;;;;;;AAOA,IAAAA,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;ACPA,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GC0JIE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;;;iBA7IA,EAAA,EAAA,IAAAC,EAAA,GAWAC,IAAAC;AAAA,MAA4B,OAAA;AAAA,QAEnB,cAAA,EAAA,gBAAA,EAAA,OAAAC,EAAA,MAAA,CAAA;AAAA,QACyD,WAAAA,EAAA;AAAA,QACrC,UAAAA,EAAA;AAAA,QACD,SAAA;AAAA,MACP;AAAA,IACb,GAGRC,IAAAF,EAAA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAAwC,gCAAAC,EAAA;AAAA,IAME,EAAA,GAM1CE,IAAAH,EAAA,MAAA;AACI,YAAAI,IAAA;AAAA,QAEI,IAAA;AAAA,UACI,MAAA,EAAA,QAAA;AAAA,UACgB,SAAA,MAAAC,EAAA,SAAA;AAAA,UACa,UAAAJ,EAAA,cAAA;AAAA,UACC,MAAAK;AAAA,QACxB;AAAA,QACV,MAAA;AAAA,UACM,MAAA,EAAA,UAAA;AAAA,UACgB,SAAA,MAAAD,EAAA,WAAA;AAAA,UACa,UAAAJ,EAAA,cAAA;AAAA,UACD,MAAAM;AAAA,QACxB;AAAA,QACV,MAAA;AAAA,UACM,MAAA,EAAA,UAAA;AAAA,UACgB,SAAA,MAAAF,EAAA,WAAA;AAAA,UACa,UAAAJ,EAAA,cAAA;AAAA,UACD,MAAAO;AAAA,QACxB;AAAA,QACV,OAAA;AAAA,UACO,MAAA,EAAA,WAAA;AAAA,UACgB,SAAA,MAAAH,EAAA,YAAA;AAAA,UACa,UAAAJ,EAAA,cAAA;AAAA,UACF,MAAAQ;AAAA,QACxB;AAAA,QACV,KAAA;AAAA,UACK,MAAA,EAAA,cAAA;AAAA,UACqB,SAAA,MAAAJ,EAAA,UAAA;AAAA,UACQ,UAAAJ,EAAA,cAAA;AAAA,UACA,MAAAK;AAAA,QACxB;AAAA,QACV,QAAA;AAAA,UACQ,MAAA,EAAA,iBAAA;AAAA,UACqB,SAAA,MAAAD,EAAA,aAAA;AAAA,UACQ,UAAAJ,EAAA,cAAA;AAAA,UACH,MAAAM;AAAA,QACxB;AAAA,MACV;AAIJ,aAAAN,EAAA,YAAA,gBAAA;AAAA,QACMG,EAAA;AAAA;AAAA,QACU;AAAA,UAEN,GAAAA,EAAA;AAAA,UACa,YAAA;AAAA,QACG;AAAA,QAChBA,EAAA;AAAA,QACMA,EAAA;AAAA,MACA,IAAA;AAAA,QAEVA,EAAA;AAAA,QACUA,EAAA;AAAA,QACAA,EAAA;AAAA;AAAA,QACA;AAAA,UAEN,GAAAA,EAAA;AAAA,UACa,YAAA;AAAA,QACG;AAAA,QAChBA,EAAA;AAAA,QACMA,EAAA;AAAA,MACA;AAAA,IACV,CAAA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"draggable-handle.BsGnEMAT.js","sources":["../../../ui-assets/icons-16/dist/vue/arrow-top.vue","../../../ui-assets/icons-16/dist/vue/arrow-bottom.vue","../../src/components/draggable/components/draggable-handle/draggable-handle.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=\"#001222\" d=\"M8.75023 3.81089L13.0001 8.06077L14.0608 7.00011L8.00011 0.939453L1.93945 7.00011L3.00011 8.06077L7.25023 3.81066V14.7502H8.75023V3.81089Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","\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=\"#001222\" d=\"M7.25434 12.1937L3.00011 7.93952L1.93945 9.00018L8.00011 15.0608L14.0608 9.00018L13.0001 7.93952L8.75433 12.1853L8.74316 1.24951L7.24316 1.25104L7.25434 12.1937Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","<template>\n    <bento-menu\n        class=\"b-draggable-handle\"\n        :class=\"computedClasses\"\n        :data=\"menuData\"\n        :menu-width=\"250\"\n        :button=\"buttonComputedProps\"\n    >\n        <template #iconLeft>\n            <span class=\"b-draggable-handle__icon\">\n                <grab-icon aria-hidden=\"true\" />\n            </span>\n        </template>\n    </bento-menu>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import { BentoMenu, type BentoMenuItem, type BentoMenuProps } from '@/components/menu';\n    import { type BentoDraggableHandleProps } from './draggable-handle.types';\n    import { useI18n } from '@/utils/ts/i18n';\n    import GrabIcon from '@adyen/ui-assets-icons-16/vue/grab';\n    import ArrowTopIcon from '@adyen/ui-assets-icons-16/vue/arrow-top';\n    import ArrowLeftIcon from '@adyen/ui-assets-icons-16/vue/arrow-left';\n    import ArrowRightIcon from '@adyen/ui-assets-icons-16/vue/arrow-right';\n    import ArrowBottomIcon from '@adyen/ui-assets-icons-16/vue/arrow-bottom';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  condensed: { default: false },\n  disabled: { type: Boolean, default: false },\n  disabledMenus: { default: () => ({}) },\n  label: null,\n  variant: { default: 'up-and-down' }\n});\n    const emit = defineEmits([\"move-bottom\", \"move-down\", \"move-left\", \"move-right\", \"move-top\", \"move-up\"]);\n\n    const buttonComputedProps = computed(\n        () =>\n            ({\n                'aria-label': t('reorderLabel', { label: props.label }),\n                condensed: props.condensed,\n                disabled: props.disabled,\n                variant: 'tertiary',\n            }) as BentoMenuProps['button']\n    );\n\n    const computedClasses = computed(() => ({\n        /**\n         * Disables the handle and prevents the entire\n         * element from being dragged.\n         * Used by `useBentoDraggable`\n         */\n        'b-draggable-handle--disabled': props.disabled,\n    }));\n\n    /**\n     * Renders the menus for the draggable handle.\n     */\n    const menuData = computed(() => {\n        const MENUS: {\n            [key: string]: BentoMenuItem;\n        } = {\n            up: {\n                text: t('moveUp'),\n                handler: () => emit('move-up'),\n                disabled: props.disabledMenus.up,\n                icon: ArrowTopIcon,\n            },\n            down: {\n                text: t('moveDown'),\n                handler: () => emit('move-down'),\n                disabled: props.disabledMenus.down,\n                icon: ArrowBottomIcon,\n            },\n            left: {\n                text: t('moveLeft'),\n                handler: () => emit('move-left'),\n                disabled: props.disabledMenus.left,\n                icon: ArrowLeftIcon,\n            },\n            right: {\n                text: t('moveRight'),\n                handler: () => emit('move-right'),\n                disabled: props.disabledMenus.right,\n                icon: ArrowRightIcon,\n            },\n            top: {\n                text: t('moveToTheTop'),\n                handler: () => emit('move-top'),\n                disabled: props.disabledMenus.top,\n                icon: ArrowTopIcon,\n            },\n            bottom: {\n                text: t('moveToTheBottom'),\n                handler: () => emit('move-bottom'),\n                disabled: props.disabledMenus.bottom,\n                icon: ArrowBottomIcon,\n            },\n        };\n\n        // Render the menus and dividers according to the variant\n        return props.variant === 'up-and-down'\n            ? [\n                  MENUS.up,\n                  // Divider added after \"Move down\"\n                  {\n                      ...MENUS.down,\n                      addDivider: true,\n                  },\n                  MENUS.top,\n                  MENUS.bottom,\n              ]\n            : [\n                  MENUS.up,\n                  MENUS.down,\n                  MENUS.left,\n                  // Divider added after \"Move right\"\n                  {\n                      ...MENUS.right,\n                      addDivider: true,\n                  },\n                  MENUS.top,\n                  MENUS.bottom,\n              ];\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Bento drag and drop handle component.\n     *\n     * @example\n     * import { BentoDraggableHandle } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDraggableHandle },\n     *     template: `\n     *          <bento-draggable-handle\n     *              bottom\n     *              condensed\n     *              down\n     *              left\n     *              right\n     *              top\n     *              up\n     *              \\@move-bottom=\"moveBottom(index)\"\n     *              \\@move-down=\"moveDown(index)\"\n     *              \\@move-left=\"moveLeft(index)\"\n     *              \\@move-right=\"moveRight(index)\"\n     *              \\@move-top=\"moveTop(index)\"\n     *              \\@move-up=\"moveUp(index)\"\n     *          />\n     *     `,\n     *     setup() {\n     *          const moveBottom = () => {}\n     *          const moveDown = () => {}\n     *          const moveLeft = () => {}\n     *          const moveRight = () => {}\n     *          const moveTop = () => {}\n     *          const moveUp = () => {}\n     *     }\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-draggable-handle',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./draggable-handle.scss\" />\n"],"names":["uuid$1","_sfc_main$2","uuid","_sfc_main$1","__default__","messages","useI18n","buttonComputedProps","computed","props","computedClasses","menuData","MENUS","emit","ArrowTopIcon","ArrowBottomIcon","ArrowLeftIcon","ArrowRightIcon"],"mappings":";;;;;;;;;AAOA,IAAAA,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;ACPA,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GC0JIE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;;;iBA7IA,EAAA,EAAA,IAAAC,EAAA,GAWAC,IAAAC;AAAA,MAA4B,OAAA;AAAA,QAEnB,cAAA,EAAA,gBAAA,EAAA,OAAAC,EAAA,MAAA,CAAA;AAAA,QACyD,WAAAA,EAAA;AAAA,QACrC,UAAAA,EAAA;AAAA,QACD,SAAA;AAAA,MACP;AAAA,IACb,GAGRC,IAAAF,EAAA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAAwC,gCAAAC,EAAA;AAAA,IAME,EAAA,GAM1CE,IAAAH,EAAA,MAAA;AACI,YAAAI,IAAA;AAAA,QAEI,IAAA;AAAA,UACI,MAAA,EAAA,QAAA;AAAA,UACgB,SAAA,MAAAC,EAAA,SAAA;AAAA,UACa,UAAAJ,EAAA,cAAA;AAAA,UACC,MAAAK;AAAA,QACxB;AAAA,QACV,MAAA;AAAA,UACM,MAAA,EAAA,UAAA;AAAA,UACgB,SAAA,MAAAD,EAAA,WAAA;AAAA,UACa,UAAAJ,EAAA,cAAA;AAAA,UACD,MAAAM;AAAA,QACxB;AAAA,QACV,MAAA;AAAA,UACM,MAAA,EAAA,UAAA;AAAA,UACgB,SAAA,MAAAF,EAAA,WAAA;AAAA,UACa,UAAAJ,EAAA,cAAA;AAAA,UACD,MAAAO;AAAA,QACxB;AAAA,QACV,OAAA;AAAA,UACO,MAAA,EAAA,WAAA;AAAA,UACgB,SAAA,MAAAH,EAAA,YAAA;AAAA,UACa,UAAAJ,EAAA,cAAA;AAAA,UACF,MAAAQ;AAAA,QACxB;AAAA,QACV,KAAA;AAAA,UACK,MAAA,EAAA,cAAA;AAAA,UACqB,SAAA,MAAAJ,EAAA,UAAA;AAAA,UACQ,UAAAJ,EAAA,cAAA;AAAA,UACA,MAAAK;AAAA,QACxB;AAAA,QACV,QAAA;AAAA,UACQ,MAAA,EAAA,iBAAA;AAAA,UACqB,SAAA,MAAAD,EAAA,aAAA;AAAA,UACQ,UAAAJ,EAAA,cAAA;AAAA,UACH,MAAAM;AAAA,QACxB;AAAA,MACV;AAIJ,aAAAN,EAAA,YAAA,gBAAA;AAAA,QACMG,EAAA;AAAA;AAAA,QACU;AAAA,UAEN,GAAAA,EAAA;AAAA,UACa,YAAA;AAAA,QACG;AAAA,QAChBA,EAAA;AAAA,QACMA,EAAA;AAAA,MACA,IAAA;AAAA,QAEVA,EAAA;AAAA,QACUA,EAAA;AAAA,QACAA,EAAA;AAAA;AAAA,QACA;AAAA,UAEN,GAAAA,EAAA;AAAA,UACa,YAAA;AAAA,QACG;AAAA,QAChBA,EAAA;AAAA,QACMA,EAAA;AAAA,MACA;AAAA,IACV,CAAA;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/drawer.BqqodvlR.js

@@ -0,0 +1,47 @@
+import { defineComponent as l, computed as o } from "vue";
+import { B as _, a as c } from "./es6.Cu3DYUPA.js";
+import { a as m } from "./index.ByaCaB1Z.js";
+import { u as p } from "./index.B6WW_F-J.js";
+import { n as u } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/drawer.css";
+const w = {
+  "en-US": {
+    menu: "Menu"
+  }
+}, f = {
+  name: "bento-drawer",
+  i18n: { messages: w }
+}, v = /* @__PURE__ */ l({
+  ...f,
+  props: {
+    isDrawerOpen: { type: Boolean, default: !1 },
+    drawerId: null,
+    drawerLabel: { default: "" }
+  },
+  setup(s) {
+    const r = s, e = m({
+      s: c,
+      m: _
+    }), { t: a } = p(), t = e.smallerOrEqual("m"), n = e.smallerOrEqual("s"), i = o(() => r.drawerLabel || a("menu")), d = o(() => ({
+      "b-drawer__drawer--overlay-content": t.value,
+      "b-drawer__drawer--full-width": n.value
+    }));
+    return { __sfc: !0, props: r, breakpoints: e, t: a, isSmallDevice: t, isMobileDevice: n, computedDrawerLabel: i, conditionalDrawerClass: d };
+  }
+});
+var b = function() {
+  var r = this, e = r._self._c, a = r._self._setupProxy;
+  return e("div", { staticClass: "b-drawer" }, [e("Transition", { attrs: { name: "b-drawer__animation" } }, [e("aside", { directives: [{ name: "show", rawName: "v-show", value: r.isDrawerOpen, expression: "isDrawerOpen" }], staticClass: "b-drawer__drawer", class: a.conditionalDrawerClass, attrs: { id: a.props.drawerId, "aria-label": a.computedDrawerLabel } }, [e("div", { staticClass: "b-drawer__drawer-content" }, [r._t("drawer")], 2)])]), e("div", { staticClass: "b-drawer__page" }, [e("div", { staticClass: "b-drawer__page-content" }, [r._t("page")], 2)])], 1);
+}, C = [], D = /* @__PURE__ */ u(
+  v,
+  b,
+  C,
+  !1,
+  null,
+  "3a4878d5"
+);
+const g = D.exports;
+export {
+  g as d
+};
+//# sourceMappingURL=drawer.BqqodvlR.js.map

package/dist/chunks/drawer.BqqodvlR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.BqqodvlR.js","sources":["../../src/components/drawer/drawer.vue"],"sourcesContent":["<template>\n    <div class=\"b-drawer\">\n        <Transition name=\"b-drawer__animation\">\n            <aside\n                v-show=\"isDrawerOpen\"\n                :id=\"props.drawerId\"\n                class=\"b-drawer__drawer\"\n                :class=\"conditionalDrawerClass\"\n                :aria-label=\"computedDrawerLabel\"\n            >\n                <div class=\"b-drawer__drawer-content\">\n                    <slot name=\"drawer\" />\n                </div>\n            </aside>\n        </Transition>\n\n        <div class=\"b-drawer__page\">\n            <div class=\"b-drawer__page-content\">\n                <slot name=\"page\" />\n            </div>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import messages from './messages.json';\n    import { type BentoDrawerProps } from './drawer.types';\n    import { BMediaQueryMMax, BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6';\n    import { useBreakpoints } from '@vueuse/core';\n    import { useI18n } from '@adyen/bento-vue-i18n-demi';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  isDrawerOpen: { type: Boolean, default: false },\n  drawerId: null,\n  drawerLabel: { default: '' }\n});\n\n    const breakpoints = useBreakpoints({\n        s: BMediaQuerySMax,\n        m: BMediaQueryMMax,\n    });\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const isSmallDevice = breakpoints.smallerOrEqual('m');\n    const isMobileDevice = breakpoints.smallerOrEqual('s');\n\n    const computedDrawerLabel = computed(() => {\n        return props.drawerLabel || t('menu');\n    });\n\n    const conditionalDrawerClass = computed(() => ({\n        'b-drawer__drawer--overlay-content': isSmallDevice.value,\n        'b-drawer__drawer--full-width': isMobileDevice.value,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The `bento-drawer` component provides a responsive drawer-based navigation system.\n     *\n     * @usage\n     * <bento-drawer\n     *     drawer-id=\"main-drawer\"\n     *     drawer-label=\"Main drawer\"\n     *     :is-drawer-open=\"true\"\n     * >\n     *     <template #menu>Drawer menu items</template>\n     *     <template #page>Main page content</template>\n     * </bento-drawer>\n     */\n    export default {\n        name: 'bento-drawer',\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./drawer.scss\" />\n"],"names":["__default__","messages","breakpoints","useBreakpoints","BMediaQuerySMax","BMediaQueryMMax","t","useI18n","isSmallDevice","isMobileDevice","computedDrawerLabel","computed","props","conditionalDrawerClass"],"mappings":";;;;;;;;;;GA0EIA,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,MAAA,EAAA,UAAAC,EAAA;AAEV;;;;;;;;iBArCAC,IAAAC,EAAA;AAAA,MAAmC,GAAAC;AAAA,MAC5B,GAAAC;AAAA,IACA,CAAA,GAGP,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAEAC,IAAAN,EAAA,eAAA,GAAA,GACAO,IAAAP,EAAA,eAAA,GAAA,GAEAQ,IAAAC,EAAA,MACIC,EAAA,eAAAN,EAAA,MAAA,CAAoC,GAGxCO,IAAAF,EAAA,OAAA;AAAA,MAA+C,qCAAAH,EAAA;AAAA,MACQ,gCAAAC,EAAA;AAAA,IACJ,EAAA;;;;;;;;;;;;;;;;"}

package/dist/chunks/{dropdown-tag.z3rsxbpW.js → dropdown-tag.C6hkNptM.js}

@@ -1,12 +1,12 @@
 import { defineComponent as u, computed as w, toRefs as g, ref as v, watch as V } from "vue";
 import { B as D } from "./avatar.rwWPYJnt.js";
-import { B as p, u as C } from "./dropdown.BYJwx-JD.js";
+import { B as p, u as C } from "./dropdown.CF6Gf7ya.js";
 import { u as _ } from "./form-field.D_2g7vaP.js";
 import { d as i, B as b } from "./typography.C8lPlsbD.js";
 import { n as f } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { u as M } from "./use-country-items.B4j8pAvW.js";
 import { a as h } from "./country.types.jjXwaoMl.js";
-import { L as $ } from "./listbox-option-tag.CvbE-EuG.js";
+import { L as $ } from "./listbox-option-tag.B28d45lY.js";
 import { B as T } from "./payment-method.B3CkgsAY.js";
 import "../assets/dropdown-tag.css";
 const U = u({
@@ -291,4 +291,4 @@ export {
   le as d,
   _e as e
 };
-//# sourceMappingURL=dropdown-tag.z3rsxbpW.js.map
+//# sourceMappingURL=dropdown-tag.C6hkNptM.js.map

package/dist/chunks/{dropdown-tag.z3rsxbpW.js.map → dropdown-tag.C6hkNptM.js.map}

@@ -1 +1 @@
-{"version":3,"file":"dropdown-tag.z3rsxbpW.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\n            v-slot=\"{ label, data }\"\n            v-bind=\"$props\"\n            :items=\"dropdownItems\"\n            @update:model-value=\"onUpdateModelValue\"\n            @show-more=\"emit('show-more')\"\n            @open=\"emit('open')\"\n        >\n            <bento-avatar :username=\"label\" :src=\"data\" />\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, type PropType } from 'vue';\n    import { type BentoListboxSelectedValue } from '@/types/listbox';\n    import { type BentoAvatarListboxOptions } from './dropdown-avatar.types';\n    import { BentoAvatar } from '@/components/avatar';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n    import { deprecate } from '@/utils/ts/deprecate';\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\", \"update:model-value\", \"show-more\", \"open\"]);\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    const dropdownItems = computed(() => props.items.map(({ value, label, src }) => ({ value, label, data: src })));\n\n    if (props.value) {\n        deprecate(\n            'BentoDropdownAvatar \"value\" property',\n            `The use of \"value\" prop in \"BentoDropdownAvatar\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\n            '2.0.0'\n        );\n    }\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        model: { prop: 'modelValue' },\n    });\n</script>\n","<template>\n    <div>\n        <bento-dropdown\n            v-slot=\"{ label }\"\n            v-bind=\"$props\"\n            :items=\"countryItems\"\n            @update:model-value=\"onUpdateModelValue\"\n            @show-more=\"emit('show-more')\"\n            @open=\"emit('open')\"\n        >\n            <bento-typography el=\"span\">{{ label }}</bento-typography>\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, type PropType, toRefs } from 'vue';\n    import { type BentoCountryListboxOptions } from './dropdown-country.types';\n    import { type BentoListboxSelectedValue } from '@/types/listbox';\n    import { BentoTypography } from '@/components/typography';\n    import { useCountryItems } from './composables/use-country-items';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\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 Since v2.0.0. Use `BentoDropdown` instead.\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\", \"update:model-value\", \"show-more\", \"open\"]);\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(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\n    if (props.value) {\n        deprecate(\n            'BentoDropdownCountry \"value\" property',\n            `The use of \"value\" prop in \"BentoDropdownCountry\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\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        model: { prop: 'modelValue' },\n    });\n</script>\n","<template>\n    <bento-dropdown\n        v-slot=\"slotProps\"\n        v-bind=\"$props\"\n        :search=\"search\"\n        :items=\"filteredItems\"\n        @update:model-value=\"onUpdateModelValue\"\n        @show-more=\"emit('show-more')\"\n        @open=\"emit('open')\"\n    >\n        <listbox-option-tag :option=\"slotProps\" />\n    </bento-dropdown>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, type PropType, ref, watch } from 'vue';\n    import type { BentoCurrencyListboxOptions } from './dropdown-currency.types';\n    import type { BentoListboxSelectedValue } from '@/types/listbox';\n    import { ListboxOptionTag } from '@/internal/listbox/';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n    import { useSearchBarFilter } from '@/components/search-bar/useSearchBarDataFilter';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the currency 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\", \"update:model-value\", \"show-more\", \"open\"]);\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    const filteredItems = ref<BentoCurrencyListboxOptions>([]);\n\n    watch(\n        () => props.items,\n        () => (filteredItems.value = props.items),\n        { immediate: true }\n    );\n\n    const search = props.search\n        ? props.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                  const searchableItems = props.items.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?.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    if (props.value) {\n        deprecate(\n            'BentoDropdownCurrency \"value\" property',\n            `The use of \"value\" prop in \"BentoDropdownCurrency\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\n            '2.0.0'\n        );\n    }\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        model: { prop: 'modelValue' },\n    });\n</script>\n","<template>\n    <div>\n        <bento-dropdown\n            class=\"b-dropdown-payment-method\"\n            v-bind=\"$props\"\n            @update:model-value=\"onUpdateModelValue\"\n            @show-more=\"emit('show-more')\"\n            @open=\"emit('open')\"\n        >\n            <template #display-value=\"{ label, value }\">\n                <bento-payment-method :type=\"value\" :label=\"label\" />\n            </template>\n\n            <template #default=\"{ value, label, description }\">\n                <div class=\"b-dropdown-payment-method__item\">\n                    <bento-payment-method :type=\"value\" :label=\"description ? undefined : label\" />\n\n                    <div v-if=\"description\" class=\"b-dropdown-payment-method__text\">\n                        <bento-typography el=\"span\">{{ label }}</bento-typography>\n                        <bento-typography el=\"span\" class=\"b-dropdown-payment-method__description\">{{\n                            description\n                        }}</bento-typography>\n                    </div>\n                </div>\n            </template>\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, type PropType } from 'vue';\n    import { BentoPaymentMethod } from '@/components/payment-method';\n    import { BentoTypography } from '@/components/typography';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n    import { type BentoPaymentMethodListboxOptions } from './dropdown-payment-method.types';\n    import { type BentoListboxSelectedValue } from '@/types/listbox';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    const props = 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\", \"update:model-value\", \"show-more\", \"open\"]);\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    if (props.value) {\n        deprecate(\n            'BentoDropdownPaymentMethod \"value\" property',\n            `The use of \"value\" prop in \"BentoDropdownPaymentMethod\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\n            '2.0.0'\n        );\n    }\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        model: { prop: 'modelValue' },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-payment-method.scss\" />\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        @update:model-value=\"onUpdateModelValue\"\n        @show-more=\"emit('show-more')\"\n        @open=\"emit('open')\"\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, type PropType } from 'vue';\n    import type { BentoTagListboxOptions } from './dropdown-tag.types';\n    import type { BentoListboxSelectedValue } from '@/types/listbox';\n    import { ListboxOptionTag } from '../../../../internal';\n    import BentoDropdown from '../../../dropdown.vue';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n    import { deprecate } from '@/utils/ts/deprecate';\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\", \"update:model-value\", \"show-more\", \"open\"]);\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    const tagItems = computed(() => props.items?.map(({ label, value, variant }) => ({ label, value, data: variant })));\n\n    if (props.value) {\n        deprecate(\n            'BentoDropdownTag \"value\" property',\n            `The use of \"value\" prop in \"BentoDropdownTag\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\n            '2.0.0'\n        );\n    }\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        model: { prop: 'modelValue' },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-tag.scss\" />\n"],"names":["__default__$4","defineComponent","emitValue","useFormFieldEmits","emit","onUpdateModelValue","selectedValue","dropdownItems","computed","props","value","label","src","deprecate","__default__$3","variant","items","toRefs","countryItems","useCountryItems","item","__default__$2","filteredItems","ref","watch","search","searchTerm","searchableItems","searchResults","useSearchBarFilter","_a","normalizedResults","result","__default__$1","__default__","tagItems"],"mappings":"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"}
+{"version":3,"file":"dropdown-tag.C6hkNptM.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\n            v-slot=\"{ label, data }\"\n            v-bind=\"$props\"\n            :items=\"dropdownItems\"\n            @update:model-value=\"onUpdateModelValue\"\n            @show-more=\"emit('show-more')\"\n            @open=\"emit('open')\"\n        >\n            <bento-avatar :username=\"label\" :src=\"data\" />\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, type PropType } from 'vue';\n    import { type BentoListboxSelectedValue } from '@/types/listbox';\n    import { type BentoAvatarListboxOptions } from './dropdown-avatar.types';\n    import { BentoAvatar } from '@/components/avatar';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n    import { deprecate } from '@/utils/ts/deprecate';\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\", \"update:model-value\", \"show-more\", \"open\"]);\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    const dropdownItems = computed(() => props.items.map(({ value, label, src }) => ({ value, label, data: src })));\n\n    if (props.value) {\n        deprecate(\n            'BentoDropdownAvatar \"value\" property',\n            `The use of \"value\" prop in \"BentoDropdownAvatar\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\n            '2.0.0'\n        );\n    }\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        model: { prop: 'modelValue' },\n    });\n</script>\n","<template>\n    <div>\n        <bento-dropdown\n            v-slot=\"{ label }\"\n            v-bind=\"$props\"\n            :items=\"countryItems\"\n            @update:model-value=\"onUpdateModelValue\"\n            @show-more=\"emit('show-more')\"\n            @open=\"emit('open')\"\n        >\n            <bento-typography el=\"span\">{{ label }}</bento-typography>\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, type PropType, toRefs } from 'vue';\n    import { type BentoCountryListboxOptions } from './dropdown-country.types';\n    import { type BentoListboxSelectedValue } from '@/types/listbox';\n    import { BentoTypography } from '@/components/typography';\n    import { useCountryItems } from './composables/use-country-items';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\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 Since v2.0.0. Use `BentoDropdown` instead.\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\", \"update:model-value\", \"show-more\", \"open\"]);\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(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\n    if (props.value) {\n        deprecate(\n            'BentoDropdownCountry \"value\" property',\n            `The use of \"value\" prop in \"BentoDropdownCountry\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\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        model: { prop: 'modelValue' },\n    });\n</script>\n","<template>\n    <bento-dropdown\n        v-slot=\"slotProps\"\n        v-bind=\"$props\"\n        :search=\"search\"\n        :items=\"filteredItems\"\n        @update:model-value=\"onUpdateModelValue\"\n        @show-more=\"emit('show-more')\"\n        @open=\"emit('open')\"\n    >\n        <listbox-option-tag :option=\"slotProps\" />\n    </bento-dropdown>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, type PropType, ref, watch } from 'vue';\n    import type { BentoCurrencyListboxOptions } from './dropdown-currency.types';\n    import type { BentoListboxSelectedValue } from '@/types/listbox';\n    import { ListboxOptionTag } from '@/internal/listbox/';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n    import { useSearchBarFilter } from '@/components/search-bar/useSearchBarDataFilter';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the currency 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\", \"update:model-value\", \"show-more\", \"open\"]);\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    const filteredItems = ref<BentoCurrencyListboxOptions>([]);\n\n    watch(\n        () => props.items,\n        () => (filteredItems.value = props.items),\n        { immediate: true }\n    );\n\n    const search = props.search\n        ? props.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                  const searchableItems = props.items.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?.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    if (props.value) {\n        deprecate(\n            'BentoDropdownCurrency \"value\" property',\n            `The use of \"value\" prop in \"BentoDropdownCurrency\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\n            '2.0.0'\n        );\n    }\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        model: { prop: 'modelValue' },\n    });\n</script>\n","<template>\n    <div>\n        <bento-dropdown\n            class=\"b-dropdown-payment-method\"\n            v-bind=\"$props\"\n            @update:model-value=\"onUpdateModelValue\"\n            @show-more=\"emit('show-more')\"\n            @open=\"emit('open')\"\n        >\n            <template #display-value=\"{ label, value }\">\n                <bento-payment-method :type=\"value\" :label=\"label\" />\n            </template>\n\n            <template #default=\"{ value, label, description }\">\n                <div class=\"b-dropdown-payment-method__item\">\n                    <bento-payment-method :type=\"value\" :label=\"description ? undefined : label\" />\n\n                    <div v-if=\"description\" class=\"b-dropdown-payment-method__text\">\n                        <bento-typography el=\"span\">{{ label }}</bento-typography>\n                        <bento-typography el=\"span\" class=\"b-dropdown-payment-method__description\">{{\n                            description\n                        }}</bento-typography>\n                    </div>\n                </div>\n            </template>\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, type PropType } from 'vue';\n    import { BentoPaymentMethod } from '@/components/payment-method';\n    import { BentoTypography } from '@/components/typography';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n    import { type BentoPaymentMethodListboxOptions } from './dropdown-payment-method.types';\n    import { type BentoListboxSelectedValue } from '@/types/listbox';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    const props = 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\", \"update:model-value\", \"show-more\", \"open\"]);\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    if (props.value) {\n        deprecate(\n            'BentoDropdownPaymentMethod \"value\" property',\n            `The use of \"value\" prop in \"BentoDropdownPaymentMethod\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\n            '2.0.0'\n        );\n    }\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        model: { prop: 'modelValue' },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-payment-method.scss\" />\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        @update:model-value=\"onUpdateModelValue\"\n        @show-more=\"emit('show-more')\"\n        @open=\"emit('open')\"\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, type PropType } from 'vue';\n    import type { BentoTagListboxOptions } from './dropdown-tag.types';\n    import type { BentoListboxSelectedValue } from '@/types/listbox';\n    import { ListboxOptionTag } from '../../../../internal';\n    import BentoDropdown from '../../../dropdown.vue';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n    import { deprecate } from '@/utils/ts/deprecate';\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\", \"update:model-value\", \"show-more\", \"open\"]);\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    const tagItems = computed(() => props.items?.map(({ label, value, variant }) => ({ label, value, data: variant })));\n\n    if (props.value) {\n        deprecate(\n            'BentoDropdownTag \"value\" property',\n            `The use of \"value\" prop in \"BentoDropdownTag\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\n            '2.0.0'\n        );\n    }\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        model: { prop: 'modelValue' },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-tag.scss\" />\n"],"names":["__default__$4","defineComponent","emitValue","useFormFieldEmits","emit","onUpdateModelValue","selectedValue","dropdownItems","computed","props","value","label","src","deprecate","__default__$3","variant","items","toRefs","countryItems","useCountryItems","item","__default__$2","filteredItems","ref","watch","search","searchTerm","searchableItems","searchResults","useSearchBarFilter","_a","normalizedResults","result","__default__$1","__default__","tagItems"],"mappings":"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"}

package/dist/chunks/{dropdown.BYJwx-JD.js → dropdown.CF6Gf7ya.js}

@@ -12,14 +12,14 @@ import { C as Ue } from "./chevron-up.d8cwIlA_.js";
 /* empty css              */
 import { u as We } from "./aria-label.CaUURpnB.js";
 import { u as je } from "./form-field.D_2g7vaP.js";
-import { B as m, b as ne, a as xe, d as He, u as Ye, c as Je, e as Xe } from "./use-cached-selected-values.Du8-wWR2.js";
+import { B as m, b as ne, a as xe, d as He, u as Ye, c as Je, e as Xe } from "./use-cached-selected-values.C6aShVBp.js";
 import { u as Ze } from "./use-form-layout-loading.CWbjZiwP.js";
 import { B as N, a as Qe } from "./keyboard-navigation.DWmhelVv.js";
 import { B as Ge } from "./directive.Bfr4fuOy.js";
-import { F as et } from "./field-label.DjjjkcO6.js";
+import { F as et } from "./field-label.D7w7mHvW.js";
 import { E as tt } from "./error-message.CyERcfdt.js";
-import { P as we } from "./popper-container.C_n9Ds1W.js";
-import { h as at } from "./button-actions.CXD6_9qN.js";
+import { P as we } from "./popper-container.D7-KbKnN.js";
+import { h as at } from "./button-actions.CdsmKyvj.js";
 import "../assets/dropdown.css";
 var z = /* @__PURE__ */ ((l) => (l.DEFAULT = "DropdownInputDefault", l.SMALL = "DropdownInputSmall", l))(z || {});
 const ot = {
@@ -1145,4 +1145,4 @@ export {
   ga as c,
   zt as u
 };
-//# sourceMappingURL=dropdown.BYJwx-JD.js.map
+//# sourceMappingURL=dropdown.CF6Gf7ya.js.map