@adyen/bento-vue3 1.40.0 → 1.41.0

package/dist/chunks/{dropdown-tag.DeoUXbp4.js.map → dropdown-tag.ChFJ9l5g.js.map}

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

package/dist/chunks/{dropdown.DBxpqjEM.js → dropdown.CMKdLPHi.js}

@@ -1,20 +1,20 @@
 import { ref as $, watch as Ee, computed as c, defineComponent as z, useSlots as Oe, toRefs as Ce, openBlock as L, createBlock as P, resolveDynamicComponent as Be, mergeProps as M, withCtx as F, createElementVNode as ee, withKeys as Ye, unref as o, createVNode as Z, toHandlers as X, createSlots as re, renderList as de, renderSlot as Q, normalizeProps as ue, guardReactiveProps as ce, createElementBlock as k, toDisplayString as ve, createCommentVNode as K, normalizeClass as fe, withDirectives as G, vShow as Le, nextTick as A, useAttrs as _e, toRef as C, inject as Ze, createTextVNode as Qe } from "vue";
 import { d as xe, B as Xe } from "./typography.DNzU41ah.js";
-import { g as J } from "./generate-uid.D-HFI38h.js";
-import { u as Ge } from "./aria-label.CaUURpnB.js";
+import { a as ne, b as q, c as Ge, B as J, D as et } from "./dropdown-default-textbox.CcRQ1f4U.js";
+import { _ as Y } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { s as ie } from "./events.FNmSWp_P.js";
+import { g as V } from "./generate-uid.D-HFI38h.js";
+import { u as tt } from "./aria-label.CaUURpnB.js";
 import { u as be } from "./i18n.CPGoe9tN.js";
-import { u as et } from "./use-form-layout-loading.D3lALhtC.js";
-import { B as tt } from "./directive.O3yEdalv.js";
-import { s as ne } from "./events.FNmSWp_P.js";
-import { B as T, a as lt } from "./keyboard-navigation.C3QMVRKY.js";
-import { a as ie, b as q, c as at, B as V, D as ot } from "./dropdown-default-textbox.CcRQ1f4U.js";
-import { a as u, B as pe, b as me, c as st, u as nt } from "./use-cached-selected-values.C7Lt5U_S.js";
+import { u as lt } from "./use-form-layout-loading.D3lALhtC.js";
+import { B as at } from "./directive.O3yEdalv.js";
+import { B as T, a as ot } from "./keyboard-navigation.C3QMVRKY.js";
+import { a as u, B as pe, b as me, c as st, u as nt } from "./use-cached-selected-values.DaRzXFIt.js";
 import { u as it } from "./use-has-slot.B7eQSabc.js";
 import { F as rt, E as dt } from "./error-message.CmMyB-k9.js";
 import { P as Se } from "./popper-container.Cyf6zCPq.js";
 import "./popper-container.types.BCZMbVFD.js";
 import { B as ut } from "./popover.HArIkKve.js";
-import { _ as Y } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import "../assets/dropdown.css";
 const ye = {
   "en-US": {
@@ -206,7 +206,7 @@ const ye = {
         actions: B.value,
         divider: !0,
         fallbackPosition: ["top-start"],
-        id: J(`dropdown-options-${e.id}`),
+        id: V(`dropdown-options-${e.id}`),
         open: e.open,
         position: "bottom-start",
         style: {
@@ -380,19 +380,19 @@ const St = /* @__PURE__ */ Y(ht, [["render", xt]]), wt = { class: "b-dropdown-sm
   emits: ["clear", "close", "input", "keydown", "open"],
   setup(t, { emit: a }) {
     const s = a, l = t, n = c(() => ({
-      [`b-dropdown-small-textbox--${ie.DISABLED}`]: l.disabled,
-      [`b-dropdown-small-textbox--${ie.READONLY}`]: l.readonly,
-      [`b-dropdown-small-textbox--${ie.OPENED}`]: l.open
+      [`b-dropdown-small-textbox--${ne.DISABLED}`]: l.disabled,
+      [`b-dropdown-small-textbox--${ne.READONLY}`]: l.readonly,
+      [`b-dropdown-small-textbox--${ne.OPENED}`]: l.open
     })), e = c(() => l.open && !l.disabled && !l.readonly), i = (f) => {
       s("input", f);
     }, m = (f) => {
       s("keydown", f);
     }, r = (f) => {
-      ne(f), s("open");
+      ie(f), s("open");
     }, g = (f) => {
-      ne(f), s("close");
+      ie(f), s("close");
     }, p = (f) => {
-      ne(f), s("clear");
+      ie(f), s("clear");
     }, d = {
       [q.INPUT]: i,
       [q.OPEN]: r,
@@ -403,9 +403,9 @@ const St = /* @__PURE__ */ Y(ht, [["render", xt]]), wt = { class: "b-dropdown-sm
     return (f, E) => (L(), k("div", {
       class: fe(["b-dropdown-small-textbox", n.value])
     }, [
-      Z(at, M({ ...f.$attrs, ...f.$props }, {
+      Z(Ge, M({ ...f.$attrs, ...f.$props }, {
         class: "b-dropdown-small-textbox__textbox",
-        size: o(V).SMALL
+        size: o(J).SMALL
       }, X(d)), {
         icon: F(() => [
           ee("div", wt, [
@@ -543,7 +543,7 @@ const De = {
   i18n: { messages: De },
   name: "b-dropdown",
   components: {
-    DropdownInputDefault: ot,
+    DropdownInputDefault: et,
     DropdownInputSmall: Ot
   }
 }), At = /* @__PURE__ */ z({
@@ -675,7 +675,7 @@ const De = {
     size: {
       type: String,
       default: null,
-      validator: (t) => Object.values(V).includes(t)
+      validator: (t) => Object.values(J).includes(t)
     },
     /**
      * If enabled, dropdown will display non-selectable, static categories
@@ -706,16 +706,16 @@ const De = {
   emits: ["input", "show-more"],
   setup(t, { emit: a }) {
     var he;
-    const s = _e(), l = Oe(), n = it(l), e = t, i = a, { t: m } = be({ messages: De }), r = $(null), g = $(null), p = $(null), d = $(!1), f = J("bento-dropdown-options-container"), E = J("dropdown-label"), B = J("dropdown-description"), I = J("dropdown-error"), { isReadOnly: S } = et(C(e, "readonly")), { cachedSelectedListboxOptions: O, cachedListboxSelectedValues: h, setCachedValues: v } = st(
+    const s = _e(), l = Oe(), n = it(l), e = t, i = a, { t: m } = be({ messages: De }), r = $(null), g = $(null), p = $(null), d = $(!1), f = V("bento-dropdown-options-container"), E = V("dropdown-label"), B = V("dropdown-description"), I = V("dropdown-error"), { isReadOnly: S } = lt(C(e, "readonly")), { cachedSelectedListboxOptions: O, cachedListboxSelectedValues: h, setCachedValues: v } = st(
       C(e, "items"),
       C(e, "value"),
       C(e, "multiple")
-    ), y = $(s["aria-label"]), { ariaLabel: x, label: w } = Ce(e), j = Ge({
+    ), y = $(s["aria-label"]), { ariaLabel: x, label: w } = Ce(e), j = tt({
       // TODO: take ariaLabel ref away when aria-label prop is removed
       ariaLabel: x || y,
       label: w,
       defaultFallback: m("ariaLabelFallback")
-    }), W = e.size === V.SMALL || Ze(Tt, !1), te = c(() => W ? V.SMALL : V.DEFAULT), Re = c(() => ({
+    }), W = e.size === J.SMALL || Ze(Tt, !1), te = c(() => W ? J.SMALL : J.DEFAULT), Re = c(() => ({
       "b-dropdown--condensed": e.condensed
     })), Te = c(() => ({
       "b-dropdown__description--error": !!e.errorMessage
@@ -842,7 +842,7 @@ const De = {
             }))
           ]), 1064, ["condensed", "value", "additional-items-selected", "ariaControls", "ariaExpanded", "aria-labelledby", "aria-describedby", "aria-label", "aria-readonly", "readonly", "disabled", "display-value", "dynamic-filtering", "is-invalid", "multiple", "open", "selected-value-item", "show-slot-content-in-multiple"]))
         ], 16)), [
-          [o(lt)]
+          [o(ot)]
         ]),
         r.value ? (L(), P(o(mt), M({
           key: 1,
@@ -893,7 +893,7 @@ const De = {
           _: 3
         }, 8, ["id", "class"])) : K("", !0)
       ], 2)), [
-        [o(tt), We]
+        [o(at), We]
       ]);
     };
   }
@@ -904,4 +904,4 @@ export {
   Tt as a,
   Rt as u
 };
-//# sourceMappingURL=dropdown.DBxpqjEM.js.map
+//# sourceMappingURL=dropdown.CMKdLPHi.js.map