@adyen/bento-vue2 1.52.0 → 1.54.0

package/dist/chunks/{dropdown-tag.CvZ1jckk.js.map → dropdown-tag.D3py85f0.js.map}

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

package/dist/chunks/{dropdown.CcHoKbLz.js → dropdown.CI6ccgJJ.js}

@@ -1,20 +1,20 @@
-import { ref as C, watch as ue, computed as p, defineComponent as R, useSlots as pe, toRefs as fe, nextTick as L, useAttrs as Le, toRef as x, inject as Oe } from "vue";
+import { ref as C, watch as ue, computed as p, defineComponent as A, useSlots as pe, toRefs as fe, nextTick as L, useAttrs as Le, toRef as x, inject as Oe } from "vue";
 import { d as ie, B as Ee } from "./typography.J1v_SPG3.js";
+import { a as U, b as M, c as De, B as P, D as Be } from "./dropdown-default-textbox.CDTdHfTv.js";
+/* empty css              */
+import { n as F } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { s as q } from "./events.CMzGybJJ.js";
 import { g as k } from "./generate-uid.NJ8tVoha.js";
-import { u as De } from "./aria-label.CaUURpnB.js";
+import { u as Ie } from "./aria-label.CaUURpnB.js";
 import { u as V } from "./i18n.BQkEbtPM.js";
-import { u as Be } from "./use-form-layout-loading.D3lALhtC.js";
-import { a as U, b as P, c as Ie, B as F, D as Te } from "./dropdown-default-textbox.CDTdHfTv.js";
+import { u as Te } from "./use-form-layout-loading.D3lALhtC.js";
 import { u as Ne } from "./use-has-slot.C9lQZ6nz.js";
-import { a as u, b as H, B as J, c as Re, u as Ae } from "./use-cached-selected-values.CxlYYUbd.js";
+import { a as u, b as H, B as J, c as Ae, u as Re } from "./use-cached-selected-values.DHpjo2tV.js";
 import { B as D, a as $e } from "./keyboard-navigation.pB8weElW.js";
-import { B as Me } from "./directive.O3yEdalv.js";
-import { F as Pe, E as ke } from "./error-message.B1-ekAMa.js";
-import { P as re } from "./popper-container.CiEkF7eb.js";
-import { B as Fe } from "./popover.Cb6utVhS.js";
-import { n as K } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-/* empty css              */
-import { s as q } from "./events.CMzGybJJ.js";
+import { B as Me } from "./directive.Cbdox5VL.js";
+import { F as Pe, E as ke } from "./error-message.qHRfH-8Y.js";
+import { P as re } from "./popper-container.DWY19wS0.js";
+import { B as Fe } from "./popover.C4PNSrnW.js";
 import "../assets/dropdown.css";
 const Ke = {
   "en-US": {
@@ -53,14 +53,14 @@ const Ke = {
       title: l("cancel"),
       event: c
     }
-  ]), d = (b) => {
-    n.value = b, t.value || e(u.SELECT, b);
-  }, g = (b) => {
-    d(b), e(u.TAB);
-  }, h = (b) => {
-    d(b), e(u.ENTER);
-  }, v = (b) => {
-    d(b), e(u.SPACE);
+  ]), d = (y) => {
+    n.value = y, t.value || e(u.SELECT, y);
+  }, g = (y) => {
+    d(y), e(u.TAB);
+  }, h = (y) => {
+    d(y), e(u.ENTER);
+  }, v = (y) => {
+    d(y), e(u.SPACE);
   }, O = () => {
     c(), e(u.ESCAPE);
   }, w = () => {
@@ -81,16 +81,20 @@ const Ke = {
     onEscapeKey: O,
     onOutsideDropdownClick: m
   };
-}, je = R({
+}, je = A({
   i18n: { messages: Ke },
   name: "bento-dropdown-options-container"
-}), We = /* @__PURE__ */ R({
+}), We = /* @__PURE__ */ A({
   ...je,
   props: {
     /**
      * Defines a string value that labels an interactive element.
      */
     ariaLabel: { type: String, default: null },
+    /**
+     * Indicates that dropdown items are loading
+     */
+    componentLoading: { type: Boolean, default: !1 },
     /**
      * Empty state props used with the inner empty state component which is displayed when no search results are found.
      */
@@ -144,7 +148,7 @@ const Ke = {
       validator: (a) => Object.values(J).includes(a)
     },
     /**
-     * Indicates if new options are loading.
+     * Indicates if new options are lazy loading.
      */
     loading: { type: Boolean, default: !1 },
     /**
@@ -196,7 +200,7 @@ const Ke = {
       "b-dropdown-options-container--single": !(e != null && e.multiple)
     })), g = p(() => ({
       "b-dropdown-options-container__listbox--single": !(e != null && e.multiple)
-    })), { actions: h, internalSelectedValue: v, listeners: O, onEscapeKey: w, onOutsideDropdownClick: S } = ze(l, s, m, o), b = p(() => e != null && e.multiple ? Fe : re), I = p(() => {
+    })), { actions: h, internalSelectedValue: v, listeners: O, onEscapeKey: w, onOutsideDropdownClick: S } = ze(l, s, m, o), y = p(() => e != null && e.multiple ? Fe : re), I = p(() => {
       var T;
       const B = {
         "min-width": `${(T = e == null ? void 0 : e.targetElement) == null ? void 0 : T.clientWidth}px`,
@@ -228,25 +232,25 @@ const Ke = {
     });
     return t({
       onOutsideDropdownClick: S
-    }), { __sfc: !0, slots: n, emit: o, props: e, selectedValue: l, multiple: s, dropdownOptionsListboxRef: i, t: c, isDropdownOpen: m, noResultsMessage: r, conditionalClasses: d, conditionalListboxClasses: g, actions: h, internalSelectedValue: v, listeners: O, onEscapeKey: w, onOutsideDropdownClick: S, popperContainerOrPopoverComponent: b, popperContainerOrPopoverProps: I, BentoListbox: H };
+    }), { __sfc: !0, slots: n, emit: o, props: e, selectedValue: l, multiple: s, dropdownOptionsListboxRef: i, t: c, isDropdownOpen: m, noResultsMessage: r, conditionalClasses: d, conditionalListboxClasses: g, actions: h, internalSelectedValue: v, listeners: O, onEscapeKey: w, onOutsideDropdownClick: S, popperContainerOrPopoverComponent: y, popperContainerOrPopoverProps: I, BentoListbox: H };
   }
 });
 var Ue = function() {
   var t = this, o = t._self._c, e = t._self._setupProxy;
   return o(e.popperContainerOrPopoverComponent, t._b({ tag: "component", staticClass: "b-dropdown-options-container", class: e.conditionalClasses, attrs: { "aria-label": t.ariaLabel } }, "component", e.popperContainerOrPopoverProps, !1), [o("div", { on: { keydown: function(n) {
     return !n.type.indexOf("key") && t._k(n.keyCode, "esc", 27, n.key, ["Esc", "Escape"]) ? null : e.onEscapeKey.apply(null, arguments);
-  } } }, [o(e.BentoListbox, t._g({ ref: "dropdownOptionsListboxRef", staticClass: "b-dropdown-options-container__listbox", class: e.conditionalListboxClasses, attrs: { id: t.id, "aria-label": t.ariaLabel, "empty-state": t.emptyState, "is-option-disabled": t.isOptionDisabled, items: t.items, "selected-value": e.internalSelectedValue, multiple: e.multiple, "static-categories": t.staticCategories, "no-results-message": e.noResultsMessage, searching: t.searching, loading: t.loading, "lazy-load-type": t.lazyLoadType, "has-more-items": t.hasMoreItems, "virtual-scroll": t.virtualScroll }, scopedSlots: t._u([t._l(e.slots, function(n, l) {
+  } } }, [o(e.BentoListbox, t._g({ ref: "dropdownOptionsListboxRef", staticClass: "b-dropdown-options-container__listbox", class: e.conditionalListboxClasses, attrs: { id: t.id, "aria-label": t.ariaLabel, "component-loading": t.componentLoading, "empty-state": t.emptyState, "is-option-disabled": t.isOptionDisabled, items: t.items, "selected-value": e.internalSelectedValue, multiple: e.multiple, "static-categories": t.staticCategories, "no-results-message": e.noResultsMessage, searching: t.searching, loading: t.loading, "lazy-load-type": t.lazyLoadType, "has-more-items": t.hasMoreItems, "virtual-scroll": t.virtualScroll }, scopedSlots: t._u([t._l(e.slots, function(n, l) {
     return { key: l, fn: function(s) {
       return [t._t(l, null, null, s)];
     } };
   })], null, !0) }, e.listeners))], 1)]);
-}, qe = [], He = /* @__PURE__ */ K(
+}, qe = [], He = /* @__PURE__ */ F(
   We,
   Ue,
   qe,
   !1,
   null,
-  "b7543bfc"
+  "35feb278"
 );
 const Je = He.exports;
 let de = 0;
@@ -258,7 +262,7 @@ const Ve = {
 var Ye = function() {
   var t = this, o = t._self._c;
   return o("svg", t._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? o("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), o("path", { attrs: { fill: "#00112C", d: "M5.00011 5.43922L8.00011 8.43922L11.0001 5.43922L12.0608 6.49988L8.00011 10.5605L3.93945 6.49988L5.00011 5.43922Z" } })]);
-}, Ze = [], Qe = /* @__PURE__ */ K(
+}, Ze = [], Qe = /* @__PURE__ */ F(
   Ve,
   Ye,
   Ze,
@@ -276,7 +280,7 @@ const Ge = {
 var et = function() {
   var t = this, o = t._self._c;
   return o("svg", t._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? o("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), o("path", { attrs: { fill: "#00112C", d: "M10.9999 10.5608L7.9999 7.56077L4.9999 10.5608L3.93924 9.50011L7.9999 5.43945L12.0606 9.50011L10.9999 10.5608Z" } })]);
-}, tt = [], ot = /* @__PURE__ */ K(
+}, tt = [], ot = /* @__PURE__ */ F(
   Ge,
   et,
   tt,
@@ -284,10 +288,10 @@ var et = function() {
   null,
   null
 );
-const nt = ot.exports, at = R({
+const nt = ot.exports, at = A({
   name: "dropdown-small-textbox",
   inheritAttrs: !1
-}), st = /* @__PURE__ */ R({
+}), st = /* @__PURE__ */ A({
   ...at,
   props: {
     /**
@@ -364,17 +368,17 @@ const nt = ot.exports, at = R({
     }, d = (v) => {
       q(v), o("clear");
     }, g = {
-      [P.INPUT]: i,
-      [P.OPEN]: m,
-      [P.CLOSE]: r,
-      [P.CLEAR]: d,
-      [P.KEYDOWN]: c
+      [M.INPUT]: i,
+      [M.OPEN]: m,
+      [M.CLOSE]: r,
+      [M.CLEAR]: d,
+      [M.KEYDOWN]: c
     }, h = () => {
       n.value.focus();
     };
     return t({
       focus: h
-    }), { __sfc: !0, emit: o, props: e, baseTextbox: n, conditionalClasses: l, isDropdownOpen: s, onInput: i, onKeyDown: c, openDropdown: m, closeDropdown: r, clearValue: d, listeners: g, focus: h, BentoDropdownSize: F, DropdownBaseTextbox: Ie, ChevronDownSmallIcon: Xe, ChevronUpSmallIcon: nt };
+    }), { __sfc: !0, emit: o, props: e, baseTextbox: n, conditionalClasses: l, isDropdownOpen: s, onInput: i, onKeyDown: c, openDropdown: m, closeDropdown: r, clearValue: d, listeners: g, focus: h, BentoDropdownSize: P, DropdownBaseTextbox: De, ChevronDownSmallIcon: Xe, ChevronUpSmallIcon: nt };
   }
 });
 var lt = function() {
@@ -382,7 +386,7 @@ var lt = function() {
   return o("div", { staticClass: "b-dropdown-small-textbox", class: e.conditionalClasses }, [o(e.DropdownBaseTextbox, t._g(t._b({ ref: "baseTextbox", staticClass: "b-dropdown-small-textbox__textbox", attrs: { size: e.BentoDropdownSize.SMALL }, scopedSlots: t._u([{ key: "icon", fn: function() {
     return [o("div", { staticClass: "b-dropdown-small-textbox__chevron" }, [o(e.ChevronUpSmallIcon, { directives: [{ name: "show", rawName: "v-show", value: e.isDropdownOpen, expression: "isDropdownOpen" }], attrs: { "svg-title": "opened" } }), o(e.ChevronDownSmallIcon, { directives: [{ name: "show", rawName: "v-show", value: !e.isDropdownOpen, expression: "!isDropdownOpen" }], attrs: { "svg-title": "closed" } })], 1)];
   }, proxy: !0 }]) }, "dropdown-base-textbox", { ...t.$attrs, ...t.$props }, !1), e.listeners))], 1);
-}, it = [], rt = /* @__PURE__ */ K(
+}, it = [], rt = /* @__PURE__ */ F(
   st,
   lt,
   it,
@@ -419,18 +423,18 @@ const dt = rt.exports, ct = (a, t) => t.value.reduce((o, e) => {
   isMultiple: s
 }, i, c, m) => {
   const r = async (f) => {
-    var y, E;
-    n.value && await L(), (E = (y = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : y.$el.querySelectorAll('[role="option"]')[f]) == null || E.focus();
+    var b, E;
+    n.value && await L(), (E = (b = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : b.$el.querySelectorAll('[role="option"]')[f]) == null || E.focus();
   }, d = async (f) => {
-    var E, z;
+    var E, K;
     n.value && await L();
-    const y = (E = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : E.$el.querySelectorAll(
+    const b = (E = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : E.$el.querySelectorAll(
       "button"
     );
-    y.length ? (z = y[f]) == null || z.focus() : r(f);
+    b.length ? (K = b[f]) == null || K.focus() : r(f);
   }, g = (f) => {
-    var y;
-    return (y = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : y.setListboxFocusedIndex(
+    var b;
+    return (b = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : b.setListboxFocusedIndex(
       f
     );
   }, h = ({ detail: f }) => {
@@ -445,8 +449,8 @@ const dt = rt.exports, ct = (a, t) => t.value.reduce((o, e) => {
     e.value || (c(), L(() => {
       var f;
       if (s) {
-        const y = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
-        (f = y == null ? void 0 : y[y.length - 1].$el.querySelectorAll('[role="option"]')[l.length - 1]) == null || f.focus();
+        const b = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
+        (f = b == null ? void 0 : b[b.length - 1].$el.querySelectorAll('[role="option"]')[l.length - 1]) == null || f.focus();
       } else
         g(l.length - 1), r(l.length - 1);
     }));
@@ -454,7 +458,7 @@ const dt = rt.exports, ct = (a, t) => t.value.reduce((o, e) => {
     e.value && (m(), ve(a));
   }, S = () => {
     e.value && m();
-  }, b = () => {
+  }, y = () => {
     e.value || c(), L(() => {
       s ? d(0) : r(0);
     });
@@ -474,7 +478,7 @@ const dt = rt.exports, ct = (a, t) => t.value.reduce((o, e) => {
     [D.ARROW_UP]: v,
     [D.END]: O,
     [D.ESCAPE]: w,
-    [D.HOME]: b,
+    [D.HOME]: y,
     [D.TAB]: S
   }));
 }, ft = ({ inputContainerRef: a, isDropdownOpen: t }, o) => {
@@ -515,15 +519,15 @@ const mt = {
     all: "Todos",
     clearFilter: "Limpar filtro"
   }
-}, bt = Symbol("input field component injection key"), Ft = Symbol("input field hint injection key"), Kt = Symbol("input field parent component injection key"), yt = R({
+}, yt = Symbol("input field component injection key"), Ft = Symbol("input field hint injection key"), Kt = Symbol("input field parent component injection key"), bt = A({
   i18n: { messages: mt },
   name: "b-dropdown",
   components: {
-    DropdownInputDefault: Te,
+    DropdownInputDefault: Be,
     DropdownInputSmall: dt
   }
-}), _t = /* @__PURE__ */ R({
-  ...yt,
+}), _t = /* @__PURE__ */ A({
+  ...bt,
   props: {
     /**
      * @deprecated from version 2.0.0. Use the aria-label attribute instead.
@@ -600,9 +604,13 @@ const mt = {
      */
     label: { type: String, default: null },
     /**
-     * Indicates if new options are loading.
+     * Indicates if new options are lazy loading.
      */
     loading: { type: Boolean, default: !1 },
+    /**
+     * Indicates that dropdown items are loading
+     */
+    componentLoading: { type: Boolean, default: !1 },
     /**
      * The type of `Lazy Load`.
      * Type "automatic" will enable infinite scrolling
@@ -651,7 +659,7 @@ const mt = {
     size: {
       type: String,
       default: null,
-      validator: (a) => Object.values(F).includes(a)
+      validator: (a) => Object.values(P).includes(a)
     },
     /**
      * If enabled, dropdown will display non-selectable, static categories
@@ -682,21 +690,21 @@ const mt = {
   emits: ["input", "show-more"],
   setup(a, { expose: t, emit: o }) {
     var le;
-    const e = a, n = Le(), l = pe(), s = Ne(l), { t: i } = V(), c = C(null), m = C(null), r = C(null), d = C(!1), g = k("bento-dropdown-options-container"), h = k("dropdown-label"), v = k("dropdown-description"), O = k("dropdown-error"), { isReadOnly: w } = Be(x(e, "readonly")), { cachedSelectedListboxOptions: S, cachedListboxSelectedValues: b, setCachedValues: I } = Re(
+    const e = a, n = Le(), l = pe(), s = Ne(l), { t: i } = V(), c = C(null), m = C(null), r = C(null), d = C(!1), g = k("bento-dropdown-options-container"), h = k("dropdown-label"), v = k("dropdown-description"), O = k("dropdown-error"), { isReadOnly: w } = Te(x(e, "readonly")), { cachedSelectedListboxOptions: S, cachedListboxSelectedValues: y, setCachedValues: I } = Ae(
       x(e, "items"),
       x(e, "value"),
       x(e, "multiple")
-    ), B = C(n["aria-label"]), { ariaLabel: T, label: f } = fe(e), y = De({
+    ), B = C(n["aria-label"]), { ariaLabel: T, label: f } = fe(e), b = Ie({
       // TODO: take ariaLabel ref away when aria-label prop is removed
       ariaLabel: T || B,
       label: f,
       defaultFallback: i("ariaLabelFallback")
-    }), E = e.size === F.SMALL || Oe(bt, !1), z = p(() => E ? F.SMALL : F.DEFAULT), me = p(() => ({
+    }), E = e.size === P.SMALL || Oe(yt, !1), K = p(() => E ? P.SMALL : P.DEFAULT), me = p(() => ({
       "b-dropdown--condensed": e.condensed
-    })), be = p(() => ({
+    })), ye = p(() => ({
       "b-dropdown__description--error": !!e.errorMessage
-    })), N = C(""), A = x(e, "items"), Y = x(e, "staticCategories"), Z = vt(N, A, (le = e == null ? void 0 : e.search) == null ? void 0 : le.searchEvent, Y), W = p(() => e.dynamicFiltering && !!N.value), ye = ut({
-      items: A,
+    })), N = C(""), R = x(e, "items"), Y = x(e, "staticCategories"), Z = vt(N, R, (le = e == null ? void 0 : e.search) == null ? void 0 : le.searchEvent, Y), j = p(() => e.dynamicFiltering && !!N.value), be = ut({
+      items: R,
       placeholder: x(e, "placeholder"),
       isMultiSelect: x(e, "multiple"),
       selectedValues: S
@@ -707,33 +715,32 @@ const mt = {
         );
       if (!e.multiple && e.staticCategories) {
         const _ = e.items.find(
-          (M) => M.items.some((xe) => xe.value === e.value)
+          (W) => W.items.some((xe) => xe.value === e.value)
         );
-        return _ ? _.items.find((M) => M.value === e.value) : null;
+        return _ ? _.items.find((W) => W.value === e.value) : null;
       }
       return e.items.find(({ value: _ }) => _ === (e == null ? void 0 : e.value));
     }), Q = p(() => {
       const _ = Z.value.findIndex(({ value: $ }) => e.value === $);
-      return _ > 0 ? _ : 0;
-    }), { isMultiLevelSelect: X, flattenedItemsList: G } = Ae(A), ge = p(() => {
-      var _;
+      return _ > -1 ? _ : 0;
+    }), { isMultiLevelSelect: X, flattenedItemsList: G } = Re(R), ge = p(() => {
       if (e.multiple) {
-        const $ = (_ = e == null ? void 0 : e.value) == null ? void 0 : _.length, M = X.value ? G.value.length : A.value.length;
-        return !e.hasMoreItems && M === $ ? i("all") : $;
+        const _ = Array.isArray(e.value) ? e.value.length : 0, $ = X.value ? G.value.length : R.value.length;
+        return _ === 0 ? null : !e.hasMoreItems && $ > 0 && $ === _ ? i("all") : _;
       }
       return null;
     }), he = p(
       () => `${e.description ? v : ""} ${e.errorMessage ? O : ""}`.trim() || null
     ), ee = () => {
       w.value || (d.value = !0);
-    }, j = () => {
+    }, z = () => {
       d.value = !1;
     }, te = () => {
-      w.value || (d.value = !d.value, W.value && (N.value = ""));
+      w.value || (d.value = !d.value, j.value && (N.value = ""));
     }, Ce = () => {
-      W.value && (N.value = ""), d.value && (d.value = !1, r.value.onOutsideDropdownClick());
+      j.value && (N.value = ""), d.value && (d.value = !1, r.value.onOutsideDropdownClick());
     }, oe = (_) => {
-      e.multiple || (N.value = "", d.value = !1), I(_), o("input", b.value);
+      e.multiple || (N.value = "", d.value = !1), I(_), o("input", y.value);
     }, ne = () => {
       o(u.SHOW_MORE);
     }, we = pt(
@@ -748,15 +755,15 @@ const mt = {
       },
       te,
       ee,
-      j
+      z
     ), ae = ft(
       {
         inputContainerRef: c,
         isDropdownOpen: d
       },
-      j
+      z
     ), Se = {
-      [u.CLOSE_DROPDOWN]: j,
+      [u.CLOSE_DROPDOWN]: z,
       [u.SELECT]: oe,
       [u.SHOW_MORE]: ne,
       ...ae
@@ -773,7 +780,7 @@ const mt = {
     };
     return t({
       focus: se
-    }), { __sfc: !0, attrs: n, slots: l, hasSlot: s, props: e, emit: o, t: i, inputContainerRef: c, inputContainerRefWrapper: m, optionsContainerRef: r, isDropdownOpen: d, dropdownOptionsContainerId: g, labelId: h, descriptionId: v, errorId: O, isReadOnly: w, cachedSelectedListboxOptions: S, cachedListboxSelectedValues: b, setCachedValues: I, ariaLabelAttribute: B, ariaLabel: T, label: f, computedAriaLabel: y, isInputComponent: E, size: z, conditionalClasses: me, descriptionConditionalClasses: be, searchTerm: N, items: A, staticCategories: Y, filteredItems: Z, isSearching: W, displayValue: ye, selectedValueItem: _e, selectedValueIndex: Q, isMultiLevelSelect: X, flattenedItemsList: G, additionalItemsSelected: ge, ariaDescribedBy: he, openDropdown: ee, closeDropdown: j, toggleDropdown: te, clickOutsideDropdown: Ce, onOptionSelected: oe, emitShowMoreEvent: ne, textboxKeyboardNavigationListeners: we, listboxKeyboardNavigationListeners: ae, listboxListeners: Se, focus: se, BentoDropdownOptionsContainer: Je, BentoTypography: Ee, ErrorMessage: ke, FieldLabel: Pe, vBentoClickOutsideDirective: Me, vBentoKeyboardNavigationDirective: $e };
+    }), { __sfc: !0, attrs: n, slots: l, hasSlot: s, props: e, emit: o, t: i, inputContainerRef: c, inputContainerRefWrapper: m, optionsContainerRef: r, isDropdownOpen: d, dropdownOptionsContainerId: g, labelId: h, descriptionId: v, errorId: O, isReadOnly: w, cachedSelectedListboxOptions: S, cachedListboxSelectedValues: y, setCachedValues: I, ariaLabelAttribute: B, ariaLabel: T, label: f, computedAriaLabel: b, isInputComponent: E, size: K, conditionalClasses: me, descriptionConditionalClasses: ye, searchTerm: N, items: R, staticCategories: Y, filteredItems: Z, isSearching: j, displayValue: be, selectedValueItem: _e, selectedValueIndex: Q, isMultiLevelSelect: X, flattenedItemsList: G, additionalItemsSelected: ge, ariaDescribedBy: he, openDropdown: ee, closeDropdown: z, toggleDropdown: te, clickOutsideDropdown: Ce, onOptionSelected: oe, emitShowMoreEvent: ne, textboxKeyboardNavigationListeners: we, listboxKeyboardNavigationListeners: ae, listboxListeners: Se, focus: se, BentoDropdownOptionsContainer: Je, BentoTypography: Ee, ErrorMessage: ke, FieldLabel: Pe, vBentoClickOutsideDirective: Me, vBentoKeyboardNavigationDirective: $e };
   }
 });
 var gt = function() {
@@ -785,27 +792,27 @@ var gt = function() {
     return { key: s, fn: function(i) {
       return [t._t(s, null, null, i)];
     } };
-  })], null, !0) })], 1), e.inputContainerRef ? o(e.BentoDropdownOptionsContainer, t._g({ ref: "optionsContainerRef", attrs: { id: e.dropdownOptionsContainerId, "aria-label": e.computedAriaLabel, "empty-state": t.emptyState, "debounce-time": (n = t.search) == null ? void 0 : n.debounceTime, disabled: t.disabled, "is-option-disabled": t.isOptionDisabled, items: e.filteredItems, multiple: t.multiple, "static-categories": e.staticCategories, open: e.isDropdownOpen, "selected-value": e.cachedSelectedListboxOptions, searching: e.isSearching, "target-element": e.inputContainerRefWrapper, loading: t.loading, "has-more-items": t.hasMoreItems, "lazy-load-type": t.lazyLoadType, "virtual-scroll": t.virtualScroll }, scopedSlots: t._u([t._l(e.slots, function(l, s) {
+  })], null, !0) })], 1), e.inputContainerRef ? o(e.BentoDropdownOptionsContainer, t._g({ ref: "optionsContainerRef", attrs: { id: e.dropdownOptionsContainerId, "aria-label": e.computedAriaLabel, "component-loading": t.componentLoading, "empty-state": t.emptyState, "debounce-time": (n = t.search) == null ? void 0 : n.debounceTime, disabled: t.disabled, "is-option-disabled": t.isOptionDisabled, items: e.filteredItems, multiple: t.multiple, "static-categories": e.staticCategories, open: e.isDropdownOpen, "selected-value": e.cachedSelectedListboxOptions, searching: e.isSearching, "target-element": e.inputContainerRefWrapper, loading: t.loading, "has-more-items": t.hasMoreItems, "lazy-load-type": t.lazyLoadType, "virtual-scroll": t.virtualScroll }, scopedSlots: t._u([t._l(e.slots, function(l, s) {
     return { key: s, fn: function(i) {
       return [t._t(s, null, null, i)];
     } };
   })], null, !0) }, e.listboxListeners)) : t._e(), t.errorMessage ? o(e.ErrorMessage, { staticClass: "b-dropdown__error-message", attrs: { id: e.errorId, "error-message": t.errorMessage } }) : t._e(), t.description || e.hasSlot("description") ? o(e.BentoTypography, { staticClass: "b-dropdown__description", class: e.descriptionConditionalClasses, attrs: { id: e.descriptionId, el: "span" } }, [t._t("description", function() {
     return [t._v(" " + t._s(t.description) + " ")];
   })], 2) : t._e()], 1);
-}, ht = [], Ct = /* @__PURE__ */ K(
+}, ht = [], Ct = /* @__PURE__ */ F(
   _t,
   gt,
   ht,
   !1,
   null,
-  "de09bc83"
+  "1bb5aad4"
 );
 const zt = Ct.exports;
 export {
   zt as B,
   Ft as I,
-  bt as a,
+  yt as a,
   Kt as b,
   vt as u
 };
-//# sourceMappingURL=dropdown.CcHoKbLz.js.map
+//# sourceMappingURL=dropdown.CI6ccgJJ.js.map