@adyen/bento-vue2 1.78.2 → 1.79.0

package/dist/chunks/{dropdown-default-textbox.BCOVaw-a.js.map → dropdown-default-textbox.uWZMxeI7.js.map}

@@ -1 +1 @@
-{"version":3,"file":"dropdown-default-textbox.BCOVaw-a.js","sources":["../../src/components/dropdown/dropdown.types.ts","../../src/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.types.ts","../../src/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.vue","../../src/components/dropdown/components/dropdown-default-textbox/dropdown-default-textbox.vue"],"sourcesContent":["import type {\n    BentoListboxEmptyStateProps as BentoDropdownEmptyStateProps,\n    BentoListboxSearchOptions as BentoDropdownSearchOptions,\n    BentoListboxVirtulisationOptions as BentoDropdownVirtulisationOptions,\n    BentoListboxIsOptionDisabled,\n    BentoListboxLazyLoadType,\n    BentoListboxOptions,\n    BentoListboxSelectedValue,\n} from '../../types/listbox';\nimport { type FormField } from '../../types/form-field';\nexport type { BentoDropdownSearchOptions, BentoDropdownEmptyStateProps, BentoDropdownVirtulisationOptions };\nexport interface BentoDropdownProps extends FormField {\n    /**\n     * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n     * Defines a string value that labels an interactive element.\n     */\n    ariaLabel?: string;\n    /**\n     * Renders the dropdown with a condensed style.\n     */\n    condensed?: boolean;\n    /**\n     * Empty state props used with the inner empty state component which is displayed when no search results are found.\n     */\n    emptyState?: BentoDropdownEmptyStateProps;\n    /**\n     * Sets the possibility to type into the textbox.\n     */\n    dynamicFiltering?: boolean;\n    /**\n     * Highlights the dropdown in an erroneous state.\n     * @deprecated Use \"errorMessage\" prop instead\n     */\n    error?: boolean;\n    /**\n     * Indicates whether there are more items to load\n     */\n    hasMoreItems?: boolean;\n    /**\n     * Function that dertermines which options are disabled from interaction.\n     * @type {BentoListboxIsOptionDisabled}\n     * @param {BentoListboxOptionItem} option - Dropdown option object\n     * @param {string} option.label - Option's label text\n     * @param {string|number} option.value - Option's value\n     * @param {unknown} option.data - Option's extra data to be passed to the default slot\n     */\n    isOptionDisabled?: BentoListboxIsOptionDisabled;\n    /**\n     * The option elements to populate the dropdown with.\n     * It must be an array of {@see BentoListboxOptionItem }\n     *  @property value.label - Text to be displayed in the option\n     *  @property value.value - Value of the option\n     */\n    items?: BentoListboxOptions;\n    /**\n     * Indicates if new options are lazy loading.\n     */\n    loading?: boolean;\n    /**\n     * Indicates that dropdown items are loading\n     */\n    componentLoading?: boolean;\n    /**\n     * The type of `Lazy Load`.\n     * Type \"automatic\" will enable infinite scrolling\n     * Type \"button\" will enable lazy loading with \"Show more\" button\n     */\n    lazyLoadType?: BentoListboxLazyLoadType | `${BentoListboxLazyLoadType}`;\n    /**\n     * If enabled, the user will be able to select multiple items.\n     */\n    multiple?: boolean;\n    /**\n     * Dropdown search options and events.\n     * @see BentoDropdownSearchOptions\n     */\n    search?: BentoDropdownSearchOptions;\n    /**\n     * Toggles whether to use the slot content select items shown in the textbox in multiple mode.\n     */\n    showSlotContentInMultiple?: boolean;\n    /**\n     * @deprecated Do not use. Only 'default' size should be used.\n     */\n    size?: BentoDropdownSize | `${BentoDropdownSize}`;\n    /**\n     * If enabled, dropdown will display non-selectable, static categories\n     */\n    staticCategories?: boolean;\n    /**\n     * The `input` value.\n     * Providing an empty string will select no options.\n     * Set to an empty string `''` if you don't want any of the available options to be selected.\n     * @deprecated for usage with properties since version 2.0. Use `v-model` or `model-value` instead.\n     */\n    value?: BentoListboxSelectedValue;\n    /**\n     * The `input` value.\n     * Providing an empty string will select no options.\n     * Set to an empty string `''` if you don't want any of the available options to be selected.\n     */\n    modelValue?: BentoListboxSelectedValue;\n    /**\n     * Enables virtual scrolling if set to true or by providing an object with itemHeight function.\n     * The itemHeight function is used to calculate the height of rendered item given it's index.\n     */\n    virtualScroll?: BentoDropdownVirtulisationOptions;\n    /**\n     * Enables value/label value handling. When `true`, the component expects and emits value/label\n     * pair objects instead of primitive values.\n     *\n     * This affects both the `value` prop and the `input` event payload.\n     *\n     * - **Input (`value` prop):** Expects a `{ value: string | number, label: string }` object (or an array of them for multi-select).\n     * - **Output (`input` event):** Emits a `{ value: string | number, label: string }` object (or an array of them) upon selection.\n     *\n     * This is particularly useful when a selected item's label is not available in the `items` prop,\n     * allowing the component to display the correct label for values loaded from external sources.\n     * @default false\n     */\n    enableValueLabelPair?: boolean;\n}\n\n/**\n * @deprecated Do not use. Only 'default' size should be used.\n */\nexport enum BentoDropdownSize {\n    DEFAULT = 'DropdownInputDefault',\n    SMALL = 'DropdownInputSmall',\n}\n\nexport {\n    /**\n     * @deprecated since version 2.0. Use the string literal instead.\n     */\n    BentoListboxLazyLoadType as BentoDropdownLazyLoadType,\n    BentoListboxEvent as BentoDropdownEvent,\n} from '@/types/listbox';\n","import { type PropType } from 'vue';\nimport { type Booleanish } from '@/types/prop-types';\n\n// TODO: Change this to script setup + Typescript interface\nexport const DropdownBaseTextboxProps = {\n    /**\n     * The number of additional items that have been selected in the dropdown.\n     */\n    additionalItemsSelected: { type: [Number, String] as PropType<number | string>, default: 0 },\n\n    /**\n     * Sets the possibility to type into the textbox\n     */\n    dynamicFiltering: {\n        type: Boolean,\n        default: false,\n    },\n\n    /**\n     * Sets the aria-controls attribute on the textbox. This should correspond to the popover's id that the textbox triggers.\n     */\n    ariaControls: {\n        type: String,\n        required: true,\n    },\n\n    /**\n     * Indicates whether the content the textbox triggers is visible or not. Needs to be set accordingly when the textbox is used and changed every time the popover is shown/hidden.\n     */\n    ariaExpanded: {\n        type: [String, Boolean] as PropType<Booleanish>,\n        required: true,\n    },\n\n    /**\n     * Corresponds to the label's id that labels the textbox element.\n     */\n    ariaLabelledby: {\n        type: String,\n        default: null,\n    },\n\n    /**\n     * Disables any textbox functionality\n     */\n    disabled: { type: Boolean, default: false },\n\n    /**\n     * Marks the textbox as invalid, rendering an error state\n     */\n    isInvalid: { type: Boolean, default: false },\n\n    /**\n     * Selected option's label\n     */\n    displayValue: { type: String, default: null },\n\n    /**\n     * Indicates if the dropdown is open so that\n     * the respective event can be emitted\n     */\n    open: { type: Boolean, default: false },\n\n    /**\n     * The input value\n     */\n    value: { type: String, default: '' },\n\n    /**\n     * Custom debounce time. Default: 300\n     */\n    debounceTime: { type: Number, default: 300 },\n};\n\nexport enum DropdownBaseTextboxState {\n    DISABLED = 'disabled',\n    READONLY = 'readonly',\n    HAS_ITEMS = 'has-items',\n    OPENED = 'opened',\n    ERROR = 'error',\n}\n\nexport enum DropdownBaseTextboxEvent {\n    OPEN = 'dropdown-base-open',\n    KEYDOWN = 'dropdown-base-keydown',\n    CLOSE = 'dropdown-base-close',\n    INPUT = 'dropdown-base-input',\n    CLEAR = 'dropdown-base-clear',\n}\n\nexport default DropdownBaseTextboxProps;\n","<template>\n    <div\n        :class=\"$attrs.class\"\n        data-testid=\"textbox-wrapper\"\n        @click=\"onToggleDropdown\"\n        @keydown.escape=\"onCloseDropdown\"\n    >\n        <bento-typography\n            class=\"b-dropdown-base-textbox\"\n            :class=\"conditionalClasses\"\n            el=\"div\"\n            data-testid=\"base-textbox\"\n        >\n            <input\n                v-if=\"shouldShowInput\"\n                v-bind=\"ariaAttributes\"\n                :id=\"textboxId\"\n                ref=\"textbox\"\n                class=\"b-dropdown-base-textbox__input\"\n                role=\"combobox\"\n                type=\"text\"\n                aria-autocomplete=\"list\"\n                size=\"1\"\n                :value=\"open ? value : displayValue\"\n                :disabled=\"disabled ? true : null\"\n                :readonly=\"readonly\"\n                :required=\"isRequired\"\n                @keydown=\"$emit(DropdownBaseTextboxEvent.KEYDOWN, $event)\"\n                @keydown.enter=\"onToggleDropdown\"\n                @input=\"onInputEvent\"\n            />\n            <div\n                v-else\n                :id=\"textboxId\"\n                v-bind=\"ariaAttributes\"\n                ref=\"textbox\"\n                class=\"b-dropdown-base-textbox__input\"\n                :class=\"comboboxConditionalClasses\"\n                :aria-readonly=\"readonly ? 'true' : null\"\n                role=\"combobox\"\n                :tabindex=\"disabled ? -1 : 0\"\n            >\n                <template v-if=\"shouldShowSingleSelectSlot\">\n                    <slot v-if=\"hasSlot('display-value')\" v-bind=\"selectedValueItem\" name=\"display-value\"></slot>\n                    <slot v-else v-bind=\"selectedValueItem\">\n                        {{ displayValue }}\n                    </slot>\n                </template>\n                <template v-else-if=\"shouldShowMultipleSlot\">\n                    <div class=\"b-dropdown-base-textbox__input-multiple-selected\">\n                        <div v-for=\"singleItem of selectedValueItems\" :key=\"singleItem.value\">\n                            <div class=\"b-dropdown-base-textbox__input-selected-element\">\n                                <slot v-bind=\"singleItem\">\n                                    {{ displayValue }}\n                                </slot>\n                            </div>\n                        </div>\n                    </div>\n                </template>\n                <template v-else>{{ displayValue }}</template>\n            </div>\n            <span v-if=\"additionalItemsSelected\" class=\"b-dropdown-base-textbox__additional-items\">\n                {{ additionalItemsSelected }}\n            </span>\n            <span v-if=\"hasSlot('icon') && !isFiltering\" class=\"b-dropdown-base-textbox__icon\" aria-hidden=\"true\">\n                <slot name=\"icon\"></slot>\n            </span>\n            <span\n                v-if=\"isFiltering\"\n                class=\"b-dropdown-base-textbox__clear-search\"\n                :tabindex=\"disabled ? -1 : 0\"\n                data-testid=\"clear-search-button\"\n                @click.stop=\"onClearSearch\"\n                @keydown.enter.stop=\"onClearSearch\"\n                @keyup.space=\"onClearSearch\"\n            >\n                <cross-circle-fill-small-icon v-if=\"size === BentoDropdownSize.SMALL\" :svg-title=\"t('clearSearch')\" />\n                <cross-circle-fill-icon v-else :svg-title=\"t('clearSearch')\" />\n            </span>\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, nextTick, type PropType, ref, useAttrs, useSlots, watch } from 'vue';\n    import { generateUid } from '@/core/utils/ts';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useHasSlot } from '@/composables';\n    import { BentoTypography } from '@/components/typography';\n    import { debounce } from '@/utils/ts/debounce';\n    import { type Booleanish } from '@/types/prop-types';\n    import { type BentoListboxOptionItem } from '@/types/listbox';\n    import type { HTMLAttributes } from 'vue/types/jsx.d.ts';\n    import { DropdownBaseTextboxEvent, DropdownBaseTextboxState } from './dropdown-base-textbox.types';\n    import CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import CrossCircleFillSmallIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill-small';\n    import { BentoDropdownSize } from '@/components/dropdown/dropdown.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const attrs = useAttrs();\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const props = defineProps({\n        /**\n         * The number of additional items that have been selected in the dropdown.\n         */\n        additionalItemsSelected: { type: [Number, String] as PropType<number | string>, default: 0 },\n\n        /**\n         * If the combobox DOM element should be an `input` element.\n         */\n        alwaysComboboxIsInput: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Sets the aria-controls attribute on the textbox. This should correspond to the popover's id that the textbox triggers.\n         */\n        ariaControls: { type: String, required: true },\n\n        /**\n         * Indicates whether the content the textbox triggers is visible or not. Needs to be set accordingly when the textbox is used and changed every time the popover is shown/hidden.\n         */\n        ariaExpanded: {\n            type: [String, Boolean] as PropType<Booleanish>,\n            required: true,\n        },\n\n        /**\n         * If no label element is used then the aria-label is be set should be set.\n         */\n        ariaLabel: { type: String, default: null },\n\n        /**\n         * Corresponds to the label's id that labels the textbox element.\n         */\n        ariaLabelledby: { type: String, default: null },\n\n        /**\n         * Custom debounce time for the user type event.\n         */\n        debounceTime: { type: Number, default: 300 },\n\n        /**\n         * Disables any textbox functionality\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Selected option's label\n         */\n        displayValue: { type: String, default: null },\n\n        /**\n         * Sets the possibility to type into the textbox.\n         */\n        dynamicFiltering: { type: Boolean, default: false },\n\n        /**\n         * Marks the textbox as invalid, rendering an error state\n         */\n        isInvalid: { type: Boolean, default: false },\n\n        /*\n         * If enabled, the user will be able to select multiple items.\n         */\n        multiple: { type: Boolean, default: false },\n\n        /**\n         * Indicates if the dropdown is open so that\n         * the respective event can be emitted\n         */\n        open: { type: Boolean, default: false },\n\n        /**\n         * Sets the dropdown to readonly state\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * The input value\n         */\n        value: { type: String, default: '' },\n\n        /**\n         * The selected value's list box item.\n         */\n        selectedValueItem: {\n            type: [Object, Array] as PropType<BentoListboxOptionItem | Array<BentoListboxOptionItem>>,\n            default: undefined,\n        },\n\n        /**\n         * Toggles whether to use the slot content select items shown in the textbox in multiple mode.\n         */\n        showSlotContentInMultiple: { type: Boolean, default: false },\n\n        /**\n         * Dropdown size\n         */\n        size: {\n            type: String as PropType<BentoDropdownSize | `${BentoDropdownSize}`>,\n            default: null,\n        },\n    });\n\n    const emit = defineEmits([]);\n\n    const textbox = ref(null);\n    const textboxId = generateUid('textbox');\n\n    const conditionalClasses = computed(() => ({\n        [`b-dropdown-base-textbox--${DropdownBaseTextboxState.DISABLED}`]: props.disabled,\n        [`b-dropdown-base-textbox--${DropdownBaseTextboxState.READONLY}`]: props.readonly,\n        [`b-dropdown-base-textbox--${DropdownBaseTextboxState.HAS_ITEMS}`]: !!props.additionalItemsSelected,\n    }));\n\n    const isRequired = computed(() => attrs['required'] as Booleanish);\n\n    const comboboxConditionalClasses = computed(() => ({\n        [`b-dropdown-base-textbox__input--dynamic-filtering`]: props.dynamicFiltering,\n    }));\n\n    const isFiltering = computed(() => props.dynamicFiltering && !!props.value && props.open);\n\n    const ariaAttributes = computed(\n        () =>\n            ({\n                'aria-haspopup': 'listbox',\n                'aria-controls': props.ariaControls,\n                'aria-describedby': attrs['aria-describedby']?.toString() as string,\n                'aria-expanded': props.ariaExpanded ? 'true' : 'false',\n                'aria-labelledby': props.ariaLabelledby,\n                'aria-label': props.ariaLabelledby ? null : props.ariaLabel,\n                'aria-invalid': props.isInvalid,\n                'aria-disabled': props.disabled ? true : null,\n                'aria-required': shouldShowInput.value ? null : isRequired.value,\n            }) as HTMLAttributes\n    );\n    // Cast selectedValueItem if it is an array of selected items\n    const selectedValueItems = computed(() =>\n        props.multiple ? (props.selectedValueItem as Array<BentoListboxOptionItem>) : []\n    );\n\n    const shouldShowInput = computed(() => props.dynamicFiltering && (props.open || props.alwaysComboboxIsInput));\n    const shouldShowSingleSelectSlot = computed(() => props.selectedValueItem && !props.multiple);\n    const shouldShowMultipleSlot = computed(\n        () =>\n            props.multiple &&\n            props.selectedValueItem &&\n            selectedValueItems.value.length > 0 &&\n            props.showSlotContentInMultiple\n    );\n\n    watch(\n        () => shouldShowInput.value,\n        () => {\n            if (shouldShowInput.value && !props.alwaysComboboxIsInput) {\n                nextTick(() => {\n                    textbox.value.focus();\n                });\n            }\n        }\n    );\n\n    const onOpenDropdown = async () => {\n        if (!props.disabled && !props.readonly) {\n            emit(DropdownBaseTextboxEvent.OPEN);\n            // wait for popover to open before setting focus\n            await nextTick();\n            textbox.value.focus();\n        }\n    };\n\n    const onCloseDropdown = () => {\n        if (props.open) {\n            textbox.value.focus();\n            emit(DropdownBaseTextboxEvent.CLOSE);\n        }\n    };\n\n    const onToggleDropdown = (event: Event) => {\n        const isDynamicFilteringInputClickEvent = props.open && (event.target as HTMLDivElement).tagName === 'INPUT';\n        if (isDynamicFilteringInputClickEvent) {\n            /**\n             * When there's a click even on the input during filtering\n             * and the popover is open, do not toggle the popover.\n             * Allow for click events inside the input field\n             */\n            return null;\n        }\n\n        return props.open ? onCloseDropdown() : onOpenDropdown();\n    };\n\n    const onClearSearch = () => {\n        emit(DropdownBaseTextboxEvent.CLEAR);\n        emit(DropdownBaseTextboxEvent.INPUT, '');\n        textbox.value.focus();\n    };\n    const onInputEvent = debounce<(event: Event) => void>((event: Event) => {\n        if (!props.readonly && !props.disabled) {\n            emit(DropdownBaseTextboxEvent.INPUT, (event.target as HTMLInputElement).value);\n        } else {\n            event.preventDefault();\n            event.stopPropagation();\n        }\n    }, props.debounceTime);\n\n    const focus = () => {\n        textbox.value.focus();\n    };\n\n    defineExpose({\n        focus,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Only for internal use, implements the logic of the textbox element to be implemented in the combobox.\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'dropdown-base-textbox',\n        inheritAttrs: false,\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-base-textbox.scss\" />\n","<template>\n    <div class=\"b-dropdown-default-textbox\" :class=\"conditionalClasses\" data-testid=\"default-textbox\">\n        <dropdown-base-textbox\n            ref=\"baseTextbox\"\n            v-bind=\"{ ...$attrs, ...$props }\"\n            class=\"b-dropdown-default-textbox__textbox\"\n            :value=\"value\"\n            v-on=\"listeners\"\n        >\n            <template v-for=\"(_, innerSlot) of slots\" #[innerSlot]=\"scope\">\n                <slot :name=\"innerSlot\" v-bind=\"scope ?? {}\" />\n            </template>\n            <template #icon>\n                <div class=\"b-dropdown-default-textbox__chevron\">\n                    <chevron-up-icon v-show=\"isDropdownOpen\" svg-title=\"opened\" />\n                    <chevron-down-icon v-show=\"!isDropdownOpen\" svg-title=\"closed\" />\n                </div>\n            </template>\n        </dropdown-base-textbox>\n    </div>\n</template>\n\n<script lang=\"ts\" setup>\n    import { computed, defineComponent, type PropType, ref, useSlots } from 'vue';\n    import DropdownBaseTextbox from '@/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.vue';\n    import { type Booleanish } from '@/types/prop-types';\n    import { type BentoListboxOptionItem } from '@/types/listbox';\n    import { stopEventPropagation } from '@/utils/ts/events';\n    import {\n        DropdownBaseTextboxEvent,\n        DropdownBaseTextboxState,\n    } from '../dropdown-base-textbox/dropdown-base-textbox.types';\n    import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n    import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n\n    const emit = defineEmits([\"clear\", \"close\", \"input\", \"keydown\", \"open\"]);\n\n    const slots = useSlots();\n\n    const props = defineProps({\n        /**\n         * The number of additional items that have been selected in the dropdown.\n         */\n        additionalItemsSelected: { type: [Number, String] as PropType<number | string>, default: 0 },\n\n        /**\n         * Sets the aria-controls attribute on the textbox. This should correspond to the popover's id that the textbox triggers.\n         */\n        ariaControls: {\n            type: String,\n            required: true,\n        },\n\n        /**\n         * Indicates whether the content the textbox triggers is visible or not. Needs to be set accordingly when the textbox is used and changed every time the popover is shown/hidden.\n         */\n        ariaExpanded: {\n            type: [String, Boolean] as PropType<Booleanish>,\n            required: true,\n        },\n\n        /**\n         * If no label element is used then the aria-label is be set should be set.\n         */\n        ariaLabel: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * Corresponds to the label's id that labels the textbox element.\n         */\n        ariaLabelledby: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * Renders the dropdown with a condensed style.\n         */\n        condensed: { type: Boolean, default: false },\n\n        /**\n         * Custom debounce time. Default: 300\n         */\n        debounceTime: { type: Number, default: 300 },\n\n        /**\n         * Disables any textbox functionality\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Selected option's label\n         */\n        displayValue: { type: String, default: null },\n\n        /**\n         * Sets the possibility to type into the textbox\n         */\n        dynamicFiltering: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Marks the textbox as invalid, rendering an error state\n         */\n        isInvalid: { type: Boolean, default: false },\n\n        /**\n         * Indicates if the dropdown is open so that\n         * the respective event can be emitted\n         */\n        open: { type: Boolean, default: false },\n\n        /**\n         * Sets the dropdown to readonly state\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * The selected value's list box item.\n         */\n        selectedValueItem: {\n            type: [Object, Array] as PropType<BentoListboxOptionItem | Array<BentoListboxOptionItem>>,\n            default: undefined,\n        },\n\n        /**\n         * Toggles whether to use the slot content select items shown in the textbox in multiple mode.\n         */\n        showSlotContentInMultiple: { type: Boolean, default: false },\n\n        /**\n         * The input value\n         */\n        value: { type: String, default: '' },\n\n        /*\n         * If enabled, the user will be able to select multiple items.\n         */\n        multiple: { type: Boolean, default: false },\n    });\n\n    const baseTextbox = ref(null);\n\n    const conditionalClasses = computed(() => ({\n        [`b-dropdown-default-textbox--${DropdownBaseTextboxState.ERROR}`]:\n            !props.disabled && !props.readonly && props.isInvalid,\n        [`b-dropdown-default-textbox--${DropdownBaseTextboxState.DISABLED}`]: props.disabled,\n        [`b-dropdown-default-textbox--${DropdownBaseTextboxState.READONLY}`]: props.readonly,\n        [`b-dropdown-default-textbox--${DropdownBaseTextboxState.OPENED}`]: props.open,\n        'b-dropdown-default-textbox--condensed': props.condensed,\n    }));\n\n    const isDropdownOpen = computed(() => props.open && !props.disabled && !props.readonly);\n\n    const onInput = (newInput: string) => {\n        emit('input', newInput);\n    };\n    const onKeyDown = (e: KeyboardEvent) => {\n        emit('keydown', e);\n    };\n    const openDropdown = (e: Event) => {\n        stopEventPropagation(e);\n        emit('open');\n    };\n    const closeDropdown = (e: Event) => {\n        stopEventPropagation(e);\n        emit('close');\n    };\n    const clearValue = (e: Event) => {\n        stopEventPropagation(e);\n        emit('clear');\n    };\n\n    const listeners = {\n        [DropdownBaseTextboxEvent.INPUT]: onInput,\n        [DropdownBaseTextboxEvent.OPEN]: openDropdown,\n        [DropdownBaseTextboxEvent.CLOSE]: closeDropdown,\n        [DropdownBaseTextboxEvent.CLEAR]: clearValue,\n        [DropdownBaseTextboxEvent.KEYDOWN]: onKeyDown,\n    };\n\n    const focus = () => {\n        baseTextbox.value.focus();\n    };\n\n    defineExpose({\n        focus,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * For internal use only, textbox component used in the dropdown component.\n     */\n    export default defineComponent({\n        name: 'dropdown-default-textbox',\n        inheritAttrs: false,\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-default-textbox.scss\" />\n"],"names":["BentoDropdownSize","BentoDropdownSize2","DropdownBaseTextboxState","DropdownBaseTextboxState2","DropdownBaseTextboxEvent","DropdownBaseTextboxEvent2","__default__$1","defineComponent","messages","t","useI18n","attrs","useAttrs","slots","useSlots","hasSlot","useHasSlot","textbox","ref","textboxId","generateUid","conditionalClasses","computed","props","isRequired","comboboxConditionalClasses","isFiltering","ariaAttributes","_a","shouldShowInput","selectedValueItems","shouldShowSingleSelectSlot","shouldShowMultipleSlot","watch","nextTick","onOpenDropdown","emit","onCloseDropdown","onToggleDropdown","event","onClearSearch","onInputEvent","debounce","focus","expose","__default__","baseTextbox","isDropdownOpen","onInput","newInput","onKeyDown","e","openDropdown","stopEventPropagation","closeDropdown","clearValue","listeners"],"mappings":"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"}
+{"version":3,"file":"dropdown-default-textbox.uWZMxeI7.js","sources":["../../src/components/dropdown/dropdown.types.ts","../../src/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.types.ts","../../src/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.vue","../../src/components/dropdown/components/dropdown-default-textbox/dropdown-default-textbox.vue"],"sourcesContent":["import type {\n    BentoListboxEmptyStateProps as BentoDropdownEmptyStateProps,\n    BentoListboxSearchOptions as BentoDropdownSearchOptions,\n    BentoListboxVirtulisationOptions as BentoDropdownVirtulisationOptions,\n    BentoListboxIsOptionDisabled,\n    BentoListboxLazyLoadType,\n    BentoListboxOptions,\n    BentoListboxSelectedValue,\n} from '../../types/listbox';\nimport { type FormField } from '../../types/form-field';\nexport type { BentoDropdownSearchOptions, BentoDropdownEmptyStateProps, BentoDropdownVirtulisationOptions };\nexport interface BentoDropdownProps extends FormField {\n    /**\n     * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n     * Defines a string value that labels an interactive element.\n     */\n    ariaLabel?: string;\n    /**\n     * Renders the dropdown with a condensed style.\n     */\n    condensed?: boolean;\n    /**\n     * Empty state props used with the inner empty state component which is displayed when no search results are found.\n     */\n    emptyState?: BentoDropdownEmptyStateProps;\n    /**\n     * Sets the possibility to type into the textbox.\n     */\n    dynamicFiltering?: boolean;\n    /**\n     * Highlights the dropdown in an erroneous state.\n     * @deprecated Use \"errorMessage\" prop instead\n     */\n    error?: boolean;\n    /**\n     * Indicates whether there are more items to load\n     */\n    hasMoreItems?: boolean;\n    /**\n     * Function that dertermines which options are disabled from interaction.\n     * @type {BentoListboxIsOptionDisabled}\n     * @param {BentoListboxOptionItem} option - Dropdown option object\n     * @param {string} option.label - Option's label text\n     * @param {string|number} option.value - Option's value\n     * @param {unknown} option.data - Option's extra data to be passed to the default slot\n     */\n    isOptionDisabled?: BentoListboxIsOptionDisabled;\n    /**\n     * The option elements to populate the dropdown with.\n     * It must be an array of {@see BentoListboxOptionItem }\n     *  @property value.label - Text to be displayed in the option\n     *  @property value.value - Value of the option\n     */\n    items?: BentoListboxOptions;\n    /**\n     * Indicates if new options are lazy loading.\n     */\n    loading?: boolean;\n    /**\n     * Indicates that dropdown items are loading\n     */\n    componentLoading?: boolean;\n    /**\n     * The type of `Lazy Load`.\n     * Type \"automatic\" will enable infinite scrolling\n     * Type \"button\" will enable lazy loading with \"Show more\" button\n     */\n    lazyLoadType?: BentoListboxLazyLoadType | `${BentoListboxLazyLoadType}`;\n    /**\n     * If enabled, the user will be able to select multiple items.\n     */\n    multiple?: boolean;\n    /**\n     * Dropdown search options and events.\n     * @see BentoDropdownSearchOptions\n     */\n    search?: BentoDropdownSearchOptions;\n    /**\n     * Toggles whether to use the slot content select items shown in the textbox in multiple mode.\n     */\n    showSlotContentInMultiple?: boolean;\n    /**\n     * @deprecated Do not use. Only 'default' size should be used.\n     */\n    size?: BentoDropdownSize | `${BentoDropdownSize}`;\n    /**\n     * If enabled, dropdown will display non-selectable, static categories\n     */\n    staticCategories?: boolean;\n    /**\n     * The `input` value.\n     * Providing an empty string will select no options.\n     * Set to an empty string `''` if you don't want any of the available options to be selected.\n     * @deprecated for usage with properties since version 2.0. Use `v-model` or `model-value` instead.\n     */\n    value?: BentoListboxSelectedValue;\n    /**\n     * The `input` value.\n     * Providing an empty string will select no options.\n     * Set to an empty string `''` if you don't want any of the available options to be selected.\n     */\n    modelValue?: BentoListboxSelectedValue;\n    /**\n     * Enables virtual scrolling if set to true or by providing an object with itemHeight function.\n     * The itemHeight function is used to calculate the height of rendered item given it's index.\n     */\n    virtualScroll?: BentoDropdownVirtulisationOptions;\n    /**\n     * Enables value/label value handling. When `true`, the component expects and emits value/label\n     * pair objects instead of primitive values.\n     *\n     * This affects both the `value` prop and the `input` event payload.\n     *\n     * - **Input (`value` prop):** Expects a `{ value: string | number, label: string }` object (or an array of them for multi-select).\n     * - **Output (`input` event):** Emits a `{ value: string | number, label: string }` object (or an array of them) upon selection.\n     *\n     * This is particularly useful when a selected item's label is not available in the `items` prop,\n     * allowing the component to display the correct label for values loaded from external sources.\n     * @default false\n     */\n    enableValueLabelPair?: boolean;\n}\n\n/**\n * @deprecated Do not use. Only 'default' size should be used.\n */\nexport enum BentoDropdownSize {\n    DEFAULT = 'DropdownInputDefault',\n    SMALL = 'DropdownInputSmall',\n}\n\nexport {\n    /**\n     * @deprecated since version 2.0. Use the string literal instead.\n     */\n    BentoListboxLazyLoadType as BentoDropdownLazyLoadType,\n    BentoListboxEvent as BentoDropdownEvent,\n} from '@/types/listbox';\n","import { type PropType } from 'vue';\nimport { type Booleanish } from '@/types/prop-types';\n\n// TODO: Change this to script setup + Typescript interface\nexport const DropdownBaseTextboxProps = {\n    /**\n     * The number of additional items that have been selected in the dropdown.\n     */\n    additionalItemsSelected: { type: [Number, String] as PropType<number | string>, default: 0 },\n\n    /**\n     * Sets the possibility to type into the textbox\n     */\n    dynamicFiltering: {\n        type: Boolean,\n        default: false,\n    },\n\n    /**\n     * Sets the aria-controls attribute on the textbox. This should correspond to the popover's id that the textbox triggers.\n     */\n    ariaControls: {\n        type: String,\n        required: true,\n    },\n\n    /**\n     * Indicates whether the content the textbox triggers is visible or not. Needs to be set accordingly when the textbox is used and changed every time the popover is shown/hidden.\n     */\n    ariaExpanded: {\n        type: [String, Boolean] as PropType<Booleanish>,\n        required: true,\n    },\n\n    /**\n     * Corresponds to the label's id that labels the textbox element.\n     */\n    ariaLabelledby: {\n        type: String,\n        default: null,\n    },\n\n    /**\n     * Disables any textbox functionality\n     */\n    disabled: { type: Boolean, default: false },\n\n    /**\n     * Marks the textbox as invalid, rendering an error state\n     */\n    isInvalid: { type: Boolean, default: false },\n\n    /**\n     * Selected option's label\n     */\n    displayValue: { type: String, default: null },\n\n    /**\n     * Indicates if the dropdown is open so that\n     * the respective event can be emitted\n     */\n    open: { type: Boolean, default: false },\n\n    /**\n     * The input value\n     */\n    value: { type: String, default: '' },\n\n    /**\n     * Custom debounce time. Default: 300\n     */\n    debounceTime: { type: Number, default: 300 },\n};\n\nexport enum DropdownBaseTextboxState {\n    DISABLED = 'disabled',\n    READONLY = 'readonly',\n    HAS_ITEMS = 'has-items',\n    OPENED = 'opened',\n    ERROR = 'error',\n}\n\nexport enum DropdownBaseTextboxEvent {\n    OPEN = 'dropdown-base-open',\n    KEYDOWN = 'dropdown-base-keydown',\n    CLOSE = 'dropdown-base-close',\n    INPUT = 'dropdown-base-input',\n    CLEAR = 'dropdown-base-clear',\n}\n\nexport default DropdownBaseTextboxProps;\n","<template>\n    <div\n        :class=\"$attrs.class\"\n        data-testid=\"textbox-wrapper\"\n        @click=\"onToggleDropdown\"\n        @keydown.escape=\"onCloseDropdown\"\n    >\n        <bento-typography\n            class=\"b-dropdown-base-textbox\"\n            :class=\"conditionalClasses\"\n            el=\"div\"\n            data-testid=\"base-textbox\"\n        >\n            <input\n                v-if=\"shouldShowInput\"\n                v-bind=\"ariaAttributes\"\n                :id=\"textboxId\"\n                ref=\"textbox\"\n                class=\"b-dropdown-base-textbox__input\"\n                role=\"combobox\"\n                type=\"text\"\n                aria-autocomplete=\"list\"\n                size=\"1\"\n                :value=\"open ? value : displayValue\"\n                :disabled=\"disabled ? true : null\"\n                :readonly=\"readonly\"\n                :required=\"isRequired\"\n                @keydown=\"$emit(DropdownBaseTextboxEvent.KEYDOWN, $event)\"\n                @keydown.enter=\"onToggleDropdown\"\n                @input=\"onInputEvent\"\n            />\n            <div\n                v-else\n                :id=\"textboxId\"\n                v-bind=\"ariaAttributes\"\n                ref=\"textbox\"\n                class=\"b-dropdown-base-textbox__input\"\n                :class=\"comboboxConditionalClasses\"\n                :aria-readonly=\"readonly ? 'true' : null\"\n                role=\"combobox\"\n                :tabindex=\"disabled ? -1 : 0\"\n            >\n                <template v-if=\"shouldShowSingleSelectSlot\">\n                    <slot v-if=\"hasSlot('display-value')\" v-bind=\"selectedValueItem\" name=\"display-value\"></slot>\n                    <slot v-else v-bind=\"selectedValueItem\">\n                        {{ displayValue }}\n                    </slot>\n                </template>\n                <template v-else-if=\"shouldShowMultipleSlot\">\n                    <div class=\"b-dropdown-base-textbox__input-multiple-selected\">\n                        <div v-for=\"singleItem of selectedValueItems\" :key=\"singleItem.value\">\n                            <div class=\"b-dropdown-base-textbox__input-selected-element\">\n                                <slot v-bind=\"singleItem\">\n                                    {{ displayValue }}\n                                </slot>\n                            </div>\n                        </div>\n                    </div>\n                </template>\n                <template v-else>{{ displayValue }}</template>\n            </div>\n            <span v-if=\"additionalItemsSelected\" class=\"b-dropdown-base-textbox__additional-items\">\n                {{ additionalItemsSelected }}\n            </span>\n            <span v-if=\"hasSlot('icon') && !isFiltering\" class=\"b-dropdown-base-textbox__icon\" aria-hidden=\"true\">\n                <slot name=\"icon\"></slot>\n            </span>\n            <span\n                v-if=\"isFiltering\"\n                class=\"b-dropdown-base-textbox__clear-search\"\n                :tabindex=\"disabled ? -1 : 0\"\n                data-testid=\"clear-search-button\"\n                @click.stop=\"onClearSearch\"\n                @keydown.enter.stop=\"onClearSearch\"\n                @keyup.space=\"onClearSearch\"\n            >\n                <cross-circle-fill-small-icon v-if=\"size === BentoDropdownSize.SMALL\" :svg-title=\"t('clearSearch')\" />\n                <cross-circle-fill-icon v-else :svg-title=\"t('clearSearch')\" />\n            </span>\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, nextTick, type PropType, ref, useAttrs, useSlots, watch } from 'vue';\n    import { generateUid } from '@/core/utils/ts';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useHasSlot } from '@/composables';\n    import { BentoTypography } from '@/components/typography';\n    import { debounce } from '@/utils/ts/debounce';\n    import { type Booleanish } from '@/types/prop-types';\n    import { type BentoListboxOptionItem } from '@/types/listbox';\n    import type { HTMLAttributes } from 'vue/types/jsx.d.ts';\n    import { DropdownBaseTextboxEvent, DropdownBaseTextboxState } from './dropdown-base-textbox.types';\n    import CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import CrossCircleFillSmallIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill-small';\n    import { BentoDropdownSize } from '@/components/dropdown/dropdown.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const attrs = useAttrs();\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const props = defineProps({\n        /**\n         * The number of additional items that have been selected in the dropdown.\n         */\n        additionalItemsSelected: { type: [Number, String] as PropType<number | string>, default: 0 },\n\n        /**\n         * If the combobox DOM element should be an `input` element.\n         */\n        alwaysComboboxIsInput: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Sets the aria-controls attribute on the textbox. This should correspond to the popover's id that the textbox triggers.\n         */\n        ariaControls: { type: String, required: true },\n\n        /**\n         * Indicates whether the content the textbox triggers is visible or not. Needs to be set accordingly when the textbox is used and changed every time the popover is shown/hidden.\n         */\n        ariaExpanded: {\n            type: [String, Boolean] as PropType<Booleanish>,\n            required: true,\n        },\n\n        /**\n         * If no label element is used then the aria-label is be set should be set.\n         */\n        ariaLabel: { type: String, default: null },\n\n        /**\n         * Corresponds to the label's id that labels the textbox element.\n         */\n        ariaLabelledby: { type: String, default: null },\n\n        /**\n         * Custom debounce time for the user type event.\n         */\n        debounceTime: { type: Number, default: 300 },\n\n        /**\n         * Disables any textbox functionality\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Selected option's label\n         */\n        displayValue: { type: String, default: null },\n\n        /**\n         * Sets the possibility to type into the textbox.\n         */\n        dynamicFiltering: { type: Boolean, default: false },\n\n        /**\n         * Marks the textbox as invalid, rendering an error state\n         */\n        isInvalid: { type: Boolean, default: false },\n\n        /*\n         * If enabled, the user will be able to select multiple items.\n         */\n        multiple: { type: Boolean, default: false },\n\n        /**\n         * Indicates if the dropdown is open so that\n         * the respective event can be emitted\n         */\n        open: { type: Boolean, default: false },\n\n        /**\n         * Sets the dropdown to readonly state\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * The input value\n         */\n        value: { type: String, default: '' },\n\n        /**\n         * The selected value's list box item.\n         */\n        selectedValueItem: {\n            type: [Object, Array] as PropType<BentoListboxOptionItem | Array<BentoListboxOptionItem>>,\n            default: undefined,\n        },\n\n        /**\n         * Toggles whether to use the slot content select items shown in the textbox in multiple mode.\n         */\n        showSlotContentInMultiple: { type: Boolean, default: false },\n\n        /**\n         * Dropdown size\n         */\n        size: {\n            type: String as PropType<BentoDropdownSize | `${BentoDropdownSize}`>,\n            default: null,\n        },\n    });\n\n    const emit = defineEmits([]);\n\n    const textbox = ref(null);\n    const textboxId = generateUid('textbox');\n\n    const conditionalClasses = computed(() => ({\n        [`b-dropdown-base-textbox--${DropdownBaseTextboxState.DISABLED}`]: props.disabled,\n        [`b-dropdown-base-textbox--${DropdownBaseTextboxState.READONLY}`]: props.readonly,\n        [`b-dropdown-base-textbox--${DropdownBaseTextboxState.HAS_ITEMS}`]: !!props.additionalItemsSelected,\n    }));\n\n    const isRequired = computed(() => attrs['required'] as Booleanish);\n\n    const comboboxConditionalClasses = computed(() => ({\n        [`b-dropdown-base-textbox__input--dynamic-filtering`]: props.dynamicFiltering,\n    }));\n\n    const isFiltering = computed(() => props.dynamicFiltering && !!props.value && props.open);\n\n    const ariaAttributes = computed(\n        () =>\n            ({\n                'aria-haspopup': 'listbox',\n                'aria-controls': props.ariaControls,\n                'aria-describedby': attrs['aria-describedby']?.toString() as string,\n                'aria-expanded': props.ariaExpanded ? 'true' : 'false',\n                'aria-labelledby': props.ariaLabelledby,\n                'aria-label': props.ariaLabelledby ? null : props.ariaLabel,\n                'aria-invalid': props.isInvalid,\n                'aria-disabled': props.disabled ? true : null,\n                'aria-required': shouldShowInput.value ? null : isRequired.value,\n            }) as HTMLAttributes\n    );\n    // Cast selectedValueItem if it is an array of selected items\n    const selectedValueItems = computed(() =>\n        props.multiple ? (props.selectedValueItem as Array<BentoListboxOptionItem>) : []\n    );\n\n    const shouldShowInput = computed(() => props.dynamicFiltering && (props.open || props.alwaysComboboxIsInput));\n    const shouldShowSingleSelectSlot = computed(() => props.selectedValueItem && !props.multiple);\n    const shouldShowMultipleSlot = computed(\n        () =>\n            props.multiple &&\n            props.selectedValueItem &&\n            selectedValueItems.value.length > 0 &&\n            props.showSlotContentInMultiple\n    );\n\n    watch(\n        () => shouldShowInput.value,\n        () => {\n            if (shouldShowInput.value && !props.alwaysComboboxIsInput) {\n                nextTick(() => {\n                    textbox.value.focus();\n                });\n            }\n        }\n    );\n\n    const onOpenDropdown = async () => {\n        if (!props.disabled && !props.readonly) {\n            emit(DropdownBaseTextboxEvent.OPEN);\n            // wait for popover to open before setting focus\n            await nextTick();\n            textbox.value.focus();\n        }\n    };\n\n    const onCloseDropdown = () => {\n        if (props.open) {\n            textbox.value.focus();\n            emit(DropdownBaseTextboxEvent.CLOSE);\n        }\n    };\n\n    const onToggleDropdown = (event: Event) => {\n        const isDynamicFilteringInputClickEvent = props.open && (event.target as HTMLDivElement).tagName === 'INPUT';\n        if (isDynamicFilteringInputClickEvent) {\n            /**\n             * When there's a click even on the input during filtering\n             * and the popover is open, do not toggle the popover.\n             * Allow for click events inside the input field\n             */\n            return null;\n        }\n\n        return props.open ? onCloseDropdown() : onOpenDropdown();\n    };\n\n    const onClearSearch = () => {\n        emit(DropdownBaseTextboxEvent.CLEAR);\n        emit(DropdownBaseTextboxEvent.INPUT, '');\n        textbox.value.focus();\n    };\n    const onInputEvent = debounce<(event: Event) => void>((event: Event) => {\n        if (!props.readonly && !props.disabled) {\n            emit(DropdownBaseTextboxEvent.INPUT, (event.target as HTMLInputElement).value);\n        } else {\n            event.preventDefault();\n            event.stopPropagation();\n        }\n    }, props.debounceTime);\n\n    const focus = () => {\n        textbox.value.focus();\n    };\n\n    defineExpose({\n        focus,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Only for internal use, implements the logic of the textbox element to be implemented in the combobox.\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'dropdown-base-textbox',\n        inheritAttrs: false,\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-base-textbox.scss\" />\n","<template>\n    <div class=\"b-dropdown-default-textbox\" :class=\"conditionalClasses\" data-testid=\"default-textbox\">\n        <dropdown-base-textbox\n            ref=\"baseTextbox\"\n            v-bind=\"{ ...$attrs, ...$props }\"\n            class=\"b-dropdown-default-textbox__textbox\"\n            :value=\"value\"\n            v-on=\"listeners\"\n        >\n            <template v-for=\"(_, innerSlot) of slots\" #[innerSlot]=\"scope\">\n                <slot :name=\"innerSlot\" v-bind=\"scope ?? {}\" />\n            </template>\n            <template #icon>\n                <div class=\"b-dropdown-default-textbox__chevron\">\n                    <chevron-up-icon v-show=\"isDropdownOpen\" svg-title=\"opened\" />\n                    <chevron-down-icon v-show=\"!isDropdownOpen\" svg-title=\"closed\" />\n                </div>\n            </template>\n        </dropdown-base-textbox>\n    </div>\n</template>\n\n<script lang=\"ts\" setup>\n    import { computed, defineComponent, type PropType, ref, useSlots } from 'vue';\n    import DropdownBaseTextbox from '@/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.vue';\n    import { type Booleanish } from '@/types/prop-types';\n    import { type BentoListboxOptionItem } from '@/types/listbox';\n    import { stopEventPropagation } from '@/utils/ts/events';\n    import {\n        DropdownBaseTextboxEvent,\n        DropdownBaseTextboxState,\n    } from '../dropdown-base-textbox/dropdown-base-textbox.types';\n    import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n    import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n\n    const emit = defineEmits([\"clear\", \"close\", \"input\", \"keydown\", \"open\"]);\n\n    const slots = useSlots();\n\n    const props = defineProps({\n        /**\n         * The number of additional items that have been selected in the dropdown.\n         */\n        additionalItemsSelected: { type: [Number, String] as PropType<number | string>, default: 0 },\n\n        /**\n         * Sets the aria-controls attribute on the textbox. This should correspond to the popover's id that the textbox triggers.\n         */\n        ariaControls: {\n            type: String,\n            required: true,\n        },\n\n        /**\n         * Indicates whether the content the textbox triggers is visible or not. Needs to be set accordingly when the textbox is used and changed every time the popover is shown/hidden.\n         */\n        ariaExpanded: {\n            type: [String, Boolean] as PropType<Booleanish>,\n            required: true,\n        },\n\n        /**\n         * If no label element is used then the aria-label is be set should be set.\n         */\n        ariaLabel: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * Corresponds to the label's id that labels the textbox element.\n         */\n        ariaLabelledby: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * Renders the dropdown with a condensed style.\n         */\n        condensed: { type: Boolean, default: false },\n\n        /**\n         * Custom debounce time. Default: 300\n         */\n        debounceTime: { type: Number, default: 300 },\n\n        /**\n         * Disables any textbox functionality\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Selected option's label\n         */\n        displayValue: { type: String, default: null },\n\n        /**\n         * Sets the possibility to type into the textbox\n         */\n        dynamicFiltering: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Marks the textbox as invalid, rendering an error state\n         */\n        isInvalid: { type: Boolean, default: false },\n\n        /**\n         * Indicates if the dropdown is open so that\n         * the respective event can be emitted\n         */\n        open: { type: Boolean, default: false },\n\n        /**\n         * Sets the dropdown to readonly state\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * The selected value's list box item.\n         */\n        selectedValueItem: {\n            type: [Object, Array] as PropType<BentoListboxOptionItem | Array<BentoListboxOptionItem>>,\n            default: undefined,\n        },\n\n        /**\n         * Toggles whether to use the slot content select items shown in the textbox in multiple mode.\n         */\n        showSlotContentInMultiple: { type: Boolean, default: false },\n\n        /**\n         * The input value\n         */\n        value: { type: String, default: '' },\n\n        /*\n         * If enabled, the user will be able to select multiple items.\n         */\n        multiple: { type: Boolean, default: false },\n    });\n\n    const baseTextbox = ref(null);\n\n    const conditionalClasses = computed(() => ({\n        [`b-dropdown-default-textbox--${DropdownBaseTextboxState.ERROR}`]:\n            !props.disabled && !props.readonly && props.isInvalid,\n        [`b-dropdown-default-textbox--${DropdownBaseTextboxState.DISABLED}`]: props.disabled,\n        [`b-dropdown-default-textbox--${DropdownBaseTextboxState.READONLY}`]: props.readonly,\n        [`b-dropdown-default-textbox--${DropdownBaseTextboxState.OPENED}`]: props.open,\n        'b-dropdown-default-textbox--condensed': props.condensed,\n    }));\n\n    const isDropdownOpen = computed(() => props.open && !props.disabled && !props.readonly);\n\n    const onInput = (newInput: string) => {\n        emit('input', newInput);\n    };\n    const onKeyDown = (e: KeyboardEvent) => {\n        emit('keydown', e);\n    };\n    const openDropdown = (e: Event) => {\n        stopEventPropagation(e);\n        emit('open');\n    };\n    const closeDropdown = (e: Event) => {\n        stopEventPropagation(e);\n        emit('close');\n    };\n    const clearValue = (e: Event) => {\n        stopEventPropagation(e);\n        emit('clear');\n    };\n\n    const listeners = {\n        [DropdownBaseTextboxEvent.INPUT]: onInput,\n        [DropdownBaseTextboxEvent.OPEN]: openDropdown,\n        [DropdownBaseTextboxEvent.CLOSE]: closeDropdown,\n        [DropdownBaseTextboxEvent.CLEAR]: clearValue,\n        [DropdownBaseTextboxEvent.KEYDOWN]: onKeyDown,\n    };\n\n    const focus = () => {\n        baseTextbox.value.focus();\n    };\n\n    defineExpose({\n        focus,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * For internal use only, textbox component used in the dropdown component.\n     */\n    export default defineComponent({\n        name: 'dropdown-default-textbox',\n        inheritAttrs: false,\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-default-textbox.scss\" />\n"],"names":["BentoDropdownSize","BentoDropdownSize2","DropdownBaseTextboxState","DropdownBaseTextboxState2","DropdownBaseTextboxEvent","DropdownBaseTextboxEvent2","__default__$1","defineComponent","messages","t","useI18n","attrs","useAttrs","slots","useSlots","hasSlot","useHasSlot","textbox","ref","textboxId","generateUid","conditionalClasses","computed","props","isRequired","comboboxConditionalClasses","isFiltering","ariaAttributes","_a","shouldShowInput","selectedValueItems","shouldShowSingleSelectSlot","shouldShowMultipleSlot","watch","nextTick","onOpenDropdown","emit","onCloseDropdown","onToggleDropdown","event","onClearSearch","onInputEvent","debounce","focus","expose","__default__","baseTextbox","isDropdownOpen","onInput","newInput","onKeyDown","e","openDropdown","stopEventPropagation","closeDropdown","clearValue","listeners"],"mappings":";;;;;;;;;;;;;AA8HY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,wBACAA,EAAA,QAAA,sBAFQA,IAAAD,KAAA,CAAA,CAAA,GCpDAE,IAAA,kBAAAC,OACRA,EAAA,WAAA,YACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aACAA,EAAA,SAAA,UACAA,EAAA,QAAA,SALQA,IAAAD,KAAA,CAAA,CAAA,GAQAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,sBACAA,EAAA,UAAA,yBACAA,EAAA,QAAA,uBACAA,EAAA,QAAA,uBACAA,EAAA,QAAA,uBALQA,IAAAD,KAAA,CAAA,CAAA;;;;;;;;;;;GCqPRE,IAAAC,EAAA;AAAA,EAA+B,MAAA,EAAA,UAAAC,EAAA;AAAA,EACV,MAAA;AAAA,EACX,cAAA;AAEV,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAtOA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GA4GAI,IAAAC,EAAA,IAAA,GACAC,IAAAC,EAAA,SAAA,GAEAC,IAAAC,EAAA,OAAA;AAAA,MAA2C,CAAA,4BAAApB,EAAA,QAAA,EAAA,GAAAqB,EAAA;AAAA,MACkC,CAAA,4BAAArB,EAAA,QAAA,EAAA,GAAAqB,EAAA;AAAA,MACA,CAAA,4BAAArB,EAAA,SAAA,EAAA,GAAA,CAAA,CAAAqB,EAAA;AAAA,IACG,EAAA,GAGhFC,IAAAF,EAAA,MAAAX,EAAA,QAAA,GAEAc,IAAAH,EAAA,OAAA;AAAA,MAAmD,qDAAAC,EAAA;AAAA,IACc,EAAA,GAGjEG,IAAAJ,EAAA,MAAAC,EAAA,oBAAA,CAAA,CAAAA,EAAA,SAAAA,EAAA,IAAA,GAEAI,IAAAL;AAAA,MAAuB,MAAA;;AAAA;AAAA,UAEd,iBAAA;AAAA,UACoB,iBAAAC,EAAA;AAAA,UACM,qBAAAK,IAAAjB,EAAA,kBAAA,MAAA,gBAAAiB,EAAA;AAAA,UACiC,iBAAAL,EAAA,eAAA,SAAA;AAAA,UACT,mBAAAA,EAAA;AAAA,UACtB,cAAAA,EAAA,iBAAA,OAAAA,EAAA;AAAA,UACyB,gBAAAA,EAAA;AAAA,UAC5B,iBAAAA,EAAA,WAAA,KAAA;AAAA,UACmB,iBAAAM,EAAA,QAAA,OAAAL,EAAA;AAAA,QACkB;AAAA;AAAA,IAC/D,GAGRM,IAAAR;AAAA,MAA2B,MAAAC,EAAA,WAAAA,EAAA,oBAAA,CAAA;AAAA,IACwD,GAGnFM,IAAAP,EAAA,MAAAC,EAAA,qBAAAA,EAAA,QAAAA,EAAA,sBAAA,GACAQ,IAAAT,EAAA,MAAAC,EAAA,qBAAA,CAAAA,EAAA,QAAA,GACAS,IAAAV;AAAA,MAA+B,MAAAC,EAAA,YAAAA,EAAA,qBAAAO,EAAA,MAAA,SAAA,KAAAP,EAAA;AAAA,IAKjB;AAGd,IAAAU;AAAA,MAAA,MAAAJ,EAAA;AAAA,MAC0B,MAAA;AAElB,QAAAA,EAAA,SAAA,CAAAN,EAAA,yBACIW,EAAA,MAAA;AACI,UAAAjB,EAAA,MAAA,MAAA;AAAA,QAAoB,CAAA;AAAA,MAE5B;AAAA,IACJ;AAGJ,UAAAkB,IAAA,YAAA;AACI,MAAA,CAAAZ,EAAA,YAAA,CAAAA,EAAA,aACIa,EAAAhC,EAAA,IAAA,GAEA,MAAA8B,EAAA,GACAjB,EAAA,MAAA,MAAA;AAAA,IACJ,GAGJoB,IAAA,MAAA;AACI,MAAAd,EAAA,SACIN,EAAA,MAAA,MAAA,GACAmB,EAAAhC,EAAA,KAAA;AAAA,IACJ,GAGJkC,IAAA,CAAAC,MACIhB,EAAA,QAAAgB,EAAA,OAAA,YAAA,UAOI,OAGJhB,EAAA,OAAAc,EAAA,IAAAF,EAAA,GAGJK,IAAA,MAAA;AACI,MAAAJ,EAAAhC,EAAA,KAAA,GACAgC,EAAAhC,EAAA,OAAA,EAAA,GACAa,EAAA,MAAA,MAAA;AAAA,IAAoB,GAExBwB,IAAAC,EAAA,CAAAH,MAAA;AACI,MAAA,CAAAhB,EAAA,YAAA,CAAAA,EAAA,WACIa,EAAAhC,EAAA,OAAAmC,EAAA,OAAA,KAAA,KAEAA,EAAA,eAAA,GACAA,EAAA,gBAAA;AAAA,IACJ,GAAAhB,EAAA,YAAA,GAGJoB,IAAA,MAAA;AACI,MAAA1B,EAAA,MAAA,MAAA;AAAA,IAAoB;AAGxB,WAAA2B,EAAA;AAAA,MAAa,OAAAD;AAAA,IACT,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBCzHJE,KAAAtC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,cAAA;AAEV,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBApKAM,IAAAC,EAAA,GA4GAgC,IAAA5B,EAAA,IAAA,GAEAG,IAAAC,EAAA,OAAA;AAAA,MAA2C,CAAA,+BAAApB,EAAA,KAAA,EAAA,GAAA,CAAAqB,EAAA,YAAA,CAAAA,EAAA,YAAAA,EAAA;AAAA,MAES,CAAA,+BAAArB,EAAA,QAAA,EAAA,GAAAqB,EAAA;AAAA,MAC4B,CAAA,+BAAArB,EAAA,QAAA,EAAA,GAAAqB,EAAA;AAAA,MACA,CAAA,+BAAArB,EAAA,MAAA,EAAA,GAAAqB,EAAA;AAAA,MACF,yCAAAA,EAAA;AAAA,IAC3B,EAAA,GAGnDwB,IAAAzB,EAAA,MAAAC,EAAA,QAAA,CAAAA,EAAA,YAAA,CAAAA,EAAA,QAAA,GAEAyB,IAAA,CAAAC,MAAA;AACI,MAAAb,EAAA,SAAAa,CAAA;AAAA,IAAsB,GAE1BC,IAAA,CAAAC,MAAA;AACI,MAAAf,EAAA,WAAAe,CAAA;AAAA,IAAiB,GAErBC,IAAA,CAAAD,MAAA;AACI,MAAAE,EAAAF,CAAA,GACAf,EAAA,MAAA;AAAA,IAAW,GAEfkB,IAAA,CAAAH,MAAA;AACI,MAAAE,EAAAF,CAAA,GACAf,EAAA,OAAA;AAAA,IAAY,GAEhBmB,IAAA,CAAAJ,MAAA;AACI,MAAAE,EAAAF,CAAA,GACAf,EAAA,OAAA;AAAA,IAAY,GAGhBoB,IAAA;AAAA,MAAkB,CAAApD,EAAA,KAAA,GAAA4C;AAAA,MACoB,CAAA5C,EAAA,IAAA,GAAAgD;AAAA,MACD,CAAAhD,EAAA,KAAA,GAAAkD;AAAA,MACC,CAAAlD,EAAA,KAAA,GAAAmD;AAAA,MACA,CAAAnD,EAAA,OAAA,GAAA8C;AAAA,IACE,GAGxCP,IAAA,MAAA;AACI,MAAAG,EAAA,MAAA,MAAA;AAAA,IAAwB;AAG5B,WAAAF,EAAA;AAAA,MAAa,OAAAD;AAAA,IACT,CAAA;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{dropdown-tag.DUP4wYAW.js → dropdown-tag.Ctn5KMFU.js}

@@ -1,13 +1,13 @@
 import { defineComponent as u, computed as w, toRefs as g, ref as v, watch as V } from "vue";
 import { B as D } from "./avatar.CeDqq2Z-.js";
-import { B as p, u as C } from "./dropdown.BiA1YOYJ.js";
+import { B as p, u as C } from "./dropdown.BpT6ct8O.js";
 import { u as _ } from "./form-field.D_2g7vaP.js";
 import { d as i, B as b } from "./typography.hlOAxsEn.js";
 import { n as f } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { u as M } from "./use-country-items.B3Cd3Tdo.js";
 import { B as h } from "./country.types.C0Q_hhgJ.js";
-import { L as $ } from "./listbox-option-tag.DkPz3wPc.js";
-import { B as T } from "./payment-method.CcASYR3B.js";
+import { L as $ } from "./listbox-option-tag.B94BtpSU.js";
+import { B as T } from "./payment-method.C8Ie97qE.js";
 import "../assets/dropdown-tag.css";
 const U = u({
   name: "bento-dropdown-avatar",
@@ -291,4 +291,4 @@ export {
   le as d,
   _e as e
 };
-//# sourceMappingURL=dropdown-tag.DUP4wYAW.js.map
+//# sourceMappingURL=dropdown-tag.Ctn5KMFU.js.map

package/dist/chunks/{dropdown-tag.DUP4wYAW.js.map → dropdown-tag.Ctn5KMFU.js.map}

@@ -1 +1 @@
-{"version":3,"file":"dropdown-tag.DUP4wYAW.js","sources":["../../src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue","../../src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue","../../src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue","../../src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue","../../src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue"],"sourcesContent":["<template>\n    <div>\n        <bento-dropdown\n            v-slot=\"{ label, data }\"\n            v-bind=\"$props\"\n            :items=\"dropdownItems\"\n            @update:model-value=\"onUpdateModelValue\"\n            @show-more=\"emit('show-more')\"\n            @open=\"emit('open')\"\n        >\n            <bento-avatar :username=\"label\" :src=\"data\" />\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, type PropType } from 'vue';\n    import { type BentoListboxSelectedValue } from '@/types/listbox';\n    import { type BentoAvatarListboxOptions } from './dropdown-avatar.types';\n    import { BentoAvatar } from '@/components/avatar';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the avatar dropdown with.\n         * It must be an array of {@see BentoAvatarListboxOptions }\n         * @property {string} value.label - Text to be displayed in the option.\n         * @property {string | number} value.value - Value of the option.\n         * @property {string} value.src - Image source of the avatar image.\n         */\n        items: {\n            type: Array as PropType<BentoAvatarListboxOptions>,\n            default: () => [],\n        },\n    });\n\n    const emit = defineEmits([\"input\", \"update:model-value\", \"show-more\", \"open\"]);\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    const dropdownItems = computed(() => props.items.map(({ value, label, src }) => ({ value, label, data: src })));\n\n    if (props.value) {\n        deprecate(\n            'BentoDropdownAvatar \"value\" property',\n            `The use of \"value\" prop in \"BentoDropdownAvatar\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Avatar Dropdown showing a selectable list of countries.\n     *\n     * @example\n     * import { BentoDropdownAvatar } from '@adyen/bento-vue2';\n     * import type { BentoAvatarListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdownAvatar },\n     *     template: `\n     *          <bento-dropdown-avatar\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 2\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref('user-id-1') // Default value\n     *         const options: BentoAvatarListboxOptions = [\n     *              { label: 'User 1', value: 'user-id-1' },\n     *              { label: 'User 2', value: 'user-id-2', src: 'image-source.jpeg' },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-dropdown-avatar',\n        model: { prop: 'modelValue' },\n    });\n</script>\n","<template>\n    <div>\n        <bento-dropdown\n            v-slot=\"{ label }\"\n            v-bind=\"$props\"\n            :items=\"countryItems\"\n            @update:model-value=\"onUpdateModelValue\"\n            @show-more=\"emit('show-more')\"\n            @open=\"emit('open')\"\n        >\n            <bento-typography el=\"span\">{{ label }}</bento-typography>\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, type PropType, toRefs } from 'vue';\n    import { type BentoCountryListboxOptions } from './dropdown-country.types';\n    import { type BentoListboxSelectedValue } from '@/types/listbox';\n    import { BentoTypography } from '@/components/typography';\n    import { useCountryItems } from './composables/use-country-items';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { BentoCountryVariant } from '@/components/country';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the country dropdown with.\n         * It must be an array of {@see BentoCountryListboxOptions }\n         *  * @deprecated {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\", \"update:model-value\", \"show-more\", \"open\"]);\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    const { variant, items } = toRefs(props);\n    const countryItems = useCountryItems(variant, items);\n\n    if (variant.value === 'custom' || items.value.some(item => item.label)) {\n        deprecate(\n            'BentoDropdownCountry \"custom\" variant and \"items\" prop \"label\" key',\n            'Use any of the other BentoDropdownCountry variants instead OR use BentoDropdown component for custom labels',\n            '2.0.0'\n        );\n    }\n\n    if (props.value) {\n        deprecate(\n            'BentoDropdownCountry \"value\" property',\n            `The use of \"value\" prop in \"BentoDropdownCountry\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Country Dropdown showing a selectable list of countries.\n     *\n     * @example\n     * import { BentoDropdownCountry, BentoCountryCode } from '@adyen/bento-vue2';\n     * import type { BentoCountryListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdown },\n     *     template: `\n     *          <bento-dropdown-country\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 2\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref(BentoCountryCode.NL) // Default value\n     *         const options: BentoCountryListboxOptions = [\n     *              { label: 'Option 1', value: BentoCountryCode.NL },\n     *              { label: 'Option 2', value: BentoCountryCode.BE },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'b-dropdown-country',\n        model: { prop: 'modelValue' },\n    });\n</script>\n","<template>\n    <bento-dropdown\n        v-slot=\"slotProps\"\n        v-bind=\"$props\"\n        :search=\"search\"\n        :items=\"filteredItems\"\n        @update:model-value=\"onUpdateModelValue\"\n        @show-more=\"emit('show-more')\"\n        @open=\"emit('open')\"\n    >\n        <listbox-option-tag :option=\"slotProps\" />\n    </bento-dropdown>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, type PropType, ref, watch } from 'vue';\n    import type { BentoCurrencyListboxOptions } from './dropdown-currency.types';\n    import type { BentoListboxSelectedValue } from '@/types/listbox';\n    import { ListboxOptionTag } from '@/internal/listbox/';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n    import { useSearchBarFilter } from '@/components/search-bar/useSearchBarDataFilter';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the currency dropdown with.\n         * It must be an array of {@see BentoCurrencyListboxOptions }\n         * @property {string} value.label - Text to be displayed in the option\n         * @property {BentoCurrencyISOCode} value.code - Currency ISO code of the option\n         */\n        items: {\n            type: Array as PropType<BentoCurrencyListboxOptions>,\n            default: () => [],\n        },\n    });\n\n    const emit = defineEmits([\"input\", \"update:model-value\", \"show-more\", \"open\"]);\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    const filteredItems = ref<BentoCurrencyListboxOptions>([]);\n\n    watch(\n        () => props.items,\n        () => (filteredItems.value = props.items),\n        { immediate: true }\n    );\n\n    const search = props.search\n        ? props.search\n        : {\n              debounceTime: 500,\n              searchEvent: async (searchTerm: string) => {\n                  // Combine value and label to be able to search by the currency code\n                  const searchableItems = props.items.map(item => ({\n                      ...item,\n                      label: `${item.value} ${item.label}`,\n                  }));\n\n                  const searchResults = useSearchBarFilter(\n                      ref(searchTerm),\n                      ref<BentoCurrencyListboxOptions>(searchableItems),\n                      props?.search?.searchEvent,\n                      ref(false)\n                  ).value;\n\n                  // Restore original labels by removing the prepended value\n                  const normalizedResults = searchResults?.map(result => ({\n                      ...result,\n                      label: result.label.substring(result.value.length + 1),\n                  }));\n\n                  filteredItems.value = normalizedResults;\n              },\n          };\n\n    if (props.value) {\n        deprecate(\n            'BentoDropdownCurrency \"value\" property',\n            `The use of \"value\" prop in \"BentoDropdownCurrency\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Currency Dropdown showing a selectable list of currencies.\n     *\n     * @example\n     * import { BentoDropdownCountry, BentoCountryCode } from '@adyen/bento-vue2';\n     * import type { BentoCountryListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdown },\n     *     template: `\n     *          <bento-dropdown-currency\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 2\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref(BentoCountryCode.NL) // Default value\n     *         const options: BentoCountryListboxOptions = [\n     *              { label: 'Option 1', value: BentoCountryCode.NL },\n     *              { label: 'Option 2', value: BentoCountryCode.BE },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'b-dropdown-currency',\n        model: { prop: 'modelValue' },\n    });\n</script>\n","<template>\n    <div>\n        <bento-dropdown\n            class=\"b-dropdown-payment-method\"\n            v-bind=\"$props\"\n            @update:model-value=\"onUpdateModelValue\"\n            @show-more=\"emit('show-more')\"\n            @open=\"emit('open')\"\n        >\n            <template #display-value=\"{ label, value }\">\n                <bento-payment-method :type=\"value\" :label=\"label\" />\n            </template>\n\n            <template #default=\"{ value, label, description }\">\n                <div class=\"b-dropdown-payment-method__item\">\n                    <bento-payment-method :type=\"value\" :label=\"description ? undefined : label\" />\n\n                    <div v-if=\"description\" class=\"b-dropdown-payment-method__text\">\n                        <bento-typography el=\"span\">{{ label }}</bento-typography>\n                        <bento-typography el=\"span\" class=\"b-dropdown-payment-method__description\">{{\n                            description\n                        }}</bento-typography>\n                    </div>\n                </div>\n            </template>\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, type PropType } from 'vue';\n    import { BentoPaymentMethod } from '@/components/payment-method';\n    import { BentoTypography } from '@/components/typography';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n    import { type BentoPaymentMethodListboxOptions } from './dropdown-payment-method.types';\n    import { type BentoListboxSelectedValue } from '@/types/listbox';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the payment method dropdown with.\n         * It must be an array of {@see BentoPaymentMethodListboxOptions }\n         * @property {string} value.label - Text to be displayed in the option\n         * @property {string} value.value - Payment type code that translates to a payment icon name {@see https://adyen-ui-assets.netlify.app/?path=/story/packages-ui-assets-payment-method-icons--icons}\n         */\n        items: {\n            type: Array as PropType<BentoPaymentMethodListboxOptions>,\n            default: () => [],\n        },\n    });\n\n    const emit = defineEmits([\"input\", \"update:model-value\", \"show-more\", \"open\"]);\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    if (props.value) {\n        deprecate(\n            'BentoDropdownPaymentMethod \"value\" property',\n            `The use of \"value\" prop in \"BentoDropdownPaymentMethod\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Payment method Dropdown showing a selectable list of countries.\n     *\n     * @example\n     * import { BentoDropdownPaymentMethod } from '@adyen/bento-vue2';\n     * import type { BentoPaymentMethodListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdownPaymentMethod },\n     *     template: `\n     *          <bento-dropdown-payment-method\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 'Visa'\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref('ideal') // Default value\n     *         const options: BentoPaymentMethodListboxOptions = [\n     *              { label: 'Option 1', value: 'ideal' },\n     *              { label: 'Option 2', value: 'visa' },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-dropdown-payment-method',\n        model: { prop: 'modelValue' },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-payment-method.scss\" />\n","<template>\n    <bento-dropdown\n        v-slot=\"{ label, data }\"\n        v-bind=\"$props\"\n        class=\"b-dropdown-tag\"\n        :items=\"tagItems\"\n        show-slot-content-in-multiple\n        @update:model-value=\"onUpdateModelValue\"\n        @show-more=\"emit('show-more')\"\n        @open=\"emit('open')\"\n    >\n        <listbox-option-tag :option=\"{ value: label, data, label: '' }\" />\n    </bento-dropdown>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, type PropType } from 'vue';\n    import type { BentoTagListboxOptions } from './dropdown-tag.types';\n    import type { BentoListboxSelectedValue } from '@/types/listbox';\n    import { ListboxOptionTag } from '../../../../internal';\n    import BentoDropdown from '../../../dropdown.vue';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the tag dropdown with.\n         * It must be an array of {@see BentoTagListboxOptions }\n         * @property {string} value.label - Text to be displayed in the option\n         * @property {string | number} value.value - Value of the option\n         * @property {string} value.variant - The BentTag variant shown for the option.\n         */\n        items: {\n            type: Array as PropType<BentoTagListboxOptions>,\n            default: () => [],\n        },\n    });\n\n    const emit = defineEmits([\"input\", \"update:model-value\", \"show-more\", \"open\"]);\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    const tagItems = computed(() => props.items?.map(({ label, value, variant }) => ({ label, value, data: variant })));\n\n    if (props.value) {\n        deprecate(\n            'BentoDropdownTag \"value\" property',\n            `The use of \"value\" prop in \"BentoDropdownTag\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Tag Dropdown showing a selectable list of tags.\n     *\n     * @example\n     * import { BentoDropdownTag } from '@adyen/bento-vue2';\n     * import type { BentoTagListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdownTag },\n     *     template: `\n     *          <bento-dropdown-tag\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref('unique-id-1') // Default value\n     *         const options: BentoTagListboxOptions = [\n     *              { label: 'Offline', value: 'unique-id-1', variant: 'red' },\n     *              { label: 'Online', value: 'unique-id-2', variant: 'green' },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-dropdown-tag',\n        model: { prop: 'modelValue' },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-tag.scss\" />\n"],"names":["__default__$4","defineComponent","emitValue","useFormFieldEmits","emit","onUpdateModelValue","selectedValue","dropdownItems","computed","props","value","label","src","deprecate","__default__$3","variant","items","toRefs","countryItems","useCountryItems","item","__default__$2","filteredItems","ref","watch","search","searchTerm","searchableItems","searchResults","useSearchBarFilter","_a","normalizedResults","result","__default__$1","__default__","tagItems"],"mappings":"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"}
+{"version":3,"file":"dropdown-tag.Ctn5KMFU.js","sources":["../../src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue","../../src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue","../../src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue","../../src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue","../../src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue"],"sourcesContent":["<template>\n    <div>\n        <bento-dropdown\n            v-slot=\"{ label, data }\"\n            v-bind=\"$props\"\n            :items=\"dropdownItems\"\n            @update:model-value=\"onUpdateModelValue\"\n            @show-more=\"emit('show-more')\"\n            @open=\"emit('open')\"\n        >\n            <bento-avatar :username=\"label\" :src=\"data\" />\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, type PropType } from 'vue';\n    import { type BentoListboxSelectedValue } from '@/types/listbox';\n    import { type BentoAvatarListboxOptions } from './dropdown-avatar.types';\n    import { BentoAvatar } from '@/components/avatar';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the avatar dropdown with.\n         * It must be an array of {@see BentoAvatarListboxOptions }\n         * @property {string} value.label - Text to be displayed in the option.\n         * @property {string | number} value.value - Value of the option.\n         * @property {string} value.src - Image source of the avatar image.\n         */\n        items: {\n            type: Array as PropType<BentoAvatarListboxOptions>,\n            default: () => [],\n        },\n    });\n\n    const emit = defineEmits([\"input\", \"update:model-value\", \"show-more\", \"open\"]);\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    const dropdownItems = computed(() => props.items.map(({ value, label, src }) => ({ value, label, data: src })));\n\n    if (props.value) {\n        deprecate(\n            'BentoDropdownAvatar \"value\" property',\n            `The use of \"value\" prop in \"BentoDropdownAvatar\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Avatar Dropdown showing a selectable list of countries.\n     *\n     * @example\n     * import { BentoDropdownAvatar } from '@adyen/bento-vue2';\n     * import type { BentoAvatarListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdownAvatar },\n     *     template: `\n     *          <bento-dropdown-avatar\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 2\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref('user-id-1') // Default value\n     *         const options: BentoAvatarListboxOptions = [\n     *              { label: 'User 1', value: 'user-id-1' },\n     *              { label: 'User 2', value: 'user-id-2', src: 'image-source.jpeg' },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-dropdown-avatar',\n        model: { prop: 'modelValue' },\n    });\n</script>\n","<template>\n    <div>\n        <bento-dropdown\n            v-slot=\"{ label }\"\n            v-bind=\"$props\"\n            :items=\"countryItems\"\n            @update:model-value=\"onUpdateModelValue\"\n            @show-more=\"emit('show-more')\"\n            @open=\"emit('open')\"\n        >\n            <bento-typography el=\"span\">{{ label }}</bento-typography>\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, type PropType, toRefs } from 'vue';\n    import { type BentoCountryListboxOptions } from './dropdown-country.types';\n    import { type BentoListboxSelectedValue } from '@/types/listbox';\n    import { BentoTypography } from '@/components/typography';\n    import { useCountryItems } from './composables/use-country-items';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { BentoCountryVariant } from '@/components/country';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the country dropdown with.\n         * It must be an array of {@see BentoCountryListboxOptions }\n         *  * @deprecated {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\", \"update:model-value\", \"show-more\", \"open\"]);\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    const { variant, items } = toRefs(props);\n    const countryItems = useCountryItems(variant, items);\n\n    if (variant.value === 'custom' || items.value.some(item => item.label)) {\n        deprecate(\n            'BentoDropdownCountry \"custom\" variant and \"items\" prop \"label\" key',\n            'Use any of the other BentoDropdownCountry variants instead OR use BentoDropdown component for custom labels',\n            '2.0.0'\n        );\n    }\n\n    if (props.value) {\n        deprecate(\n            'BentoDropdownCountry \"value\" property',\n            `The use of \"value\" prop in \"BentoDropdownCountry\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Country Dropdown showing a selectable list of countries.\n     *\n     * @example\n     * import { BentoDropdownCountry, BentoCountryCode } from '@adyen/bento-vue2';\n     * import type { BentoCountryListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdown },\n     *     template: `\n     *          <bento-dropdown-country\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 2\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref(BentoCountryCode.NL) // Default value\n     *         const options: BentoCountryListboxOptions = [\n     *              { label: 'Option 1', value: BentoCountryCode.NL },\n     *              { label: 'Option 2', value: BentoCountryCode.BE },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'b-dropdown-country',\n        model: { prop: 'modelValue' },\n    });\n</script>\n","<template>\n    <bento-dropdown\n        v-slot=\"slotProps\"\n        v-bind=\"$props\"\n        :search=\"search\"\n        :items=\"filteredItems\"\n        @update:model-value=\"onUpdateModelValue\"\n        @show-more=\"emit('show-more')\"\n        @open=\"emit('open')\"\n    >\n        <listbox-option-tag :option=\"slotProps\" />\n    </bento-dropdown>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, type PropType, ref, watch } from 'vue';\n    import type { BentoCurrencyListboxOptions } from './dropdown-currency.types';\n    import type { BentoListboxSelectedValue } from '@/types/listbox';\n    import { ListboxOptionTag } from '@/internal/listbox/';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n    import { useSearchBarFilter } from '@/components/search-bar/useSearchBarDataFilter';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the currency dropdown with.\n         * It must be an array of {@see BentoCurrencyListboxOptions }\n         * @property {string} value.label - Text to be displayed in the option\n         * @property {BentoCurrencyISOCode} value.code - Currency ISO code of the option\n         */\n        items: {\n            type: Array as PropType<BentoCurrencyListboxOptions>,\n            default: () => [],\n        },\n    });\n\n    const emit = defineEmits([\"input\", \"update:model-value\", \"show-more\", \"open\"]);\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    const filteredItems = ref<BentoCurrencyListboxOptions>([]);\n\n    watch(\n        () => props.items,\n        () => (filteredItems.value = props.items),\n        { immediate: true }\n    );\n\n    const search = props.search\n        ? props.search\n        : {\n              debounceTime: 500,\n              searchEvent: async (searchTerm: string) => {\n                  // Combine value and label to be able to search by the currency code\n                  const searchableItems = props.items.map(item => ({\n                      ...item,\n                      label: `${item.value} ${item.label}`,\n                  }));\n\n                  const searchResults = useSearchBarFilter(\n                      ref(searchTerm),\n                      ref<BentoCurrencyListboxOptions>(searchableItems),\n                      props?.search?.searchEvent,\n                      ref(false)\n                  ).value;\n\n                  // Restore original labels by removing the prepended value\n                  const normalizedResults = searchResults?.map(result => ({\n                      ...result,\n                      label: result.label.substring(result.value.length + 1),\n                  }));\n\n                  filteredItems.value = normalizedResults;\n              },\n          };\n\n    if (props.value) {\n        deprecate(\n            'BentoDropdownCurrency \"value\" property',\n            `The use of \"value\" prop in \"BentoDropdownCurrency\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Currency Dropdown showing a selectable list of currencies.\n     *\n     * @example\n     * import { BentoDropdownCountry, BentoCountryCode } from '@adyen/bento-vue2';\n     * import type { BentoCountryListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdown },\n     *     template: `\n     *          <bento-dropdown-currency\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 2\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref(BentoCountryCode.NL) // Default value\n     *         const options: BentoCountryListboxOptions = [\n     *              { label: 'Option 1', value: BentoCountryCode.NL },\n     *              { label: 'Option 2', value: BentoCountryCode.BE },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'b-dropdown-currency',\n        model: { prop: 'modelValue' },\n    });\n</script>\n","<template>\n    <div>\n        <bento-dropdown\n            class=\"b-dropdown-payment-method\"\n            v-bind=\"$props\"\n            @update:model-value=\"onUpdateModelValue\"\n            @show-more=\"emit('show-more')\"\n            @open=\"emit('open')\"\n        >\n            <template #display-value=\"{ label, value }\">\n                <bento-payment-method :type=\"value\" :label=\"label\" />\n            </template>\n\n            <template #default=\"{ value, label, description }\">\n                <div class=\"b-dropdown-payment-method__item\">\n                    <bento-payment-method :type=\"value\" :label=\"description ? undefined : label\" />\n\n                    <div v-if=\"description\" class=\"b-dropdown-payment-method__text\">\n                        <bento-typography el=\"span\">{{ label }}</bento-typography>\n                        <bento-typography el=\"span\" class=\"b-dropdown-payment-method__description\">{{\n                            description\n                        }}</bento-typography>\n                    </div>\n                </div>\n            </template>\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, type PropType } from 'vue';\n    import { BentoPaymentMethod } from '@/components/payment-method';\n    import { BentoTypography } from '@/components/typography';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n    import { type BentoPaymentMethodListboxOptions } from './dropdown-payment-method.types';\n    import { type BentoListboxSelectedValue } from '@/types/listbox';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the payment method dropdown with.\n         * It must be an array of {@see BentoPaymentMethodListboxOptions }\n         * @property {string} value.label - Text to be displayed in the option\n         * @property {string} value.value - Payment type code that translates to a payment icon name {@see https://adyen-ui-assets.netlify.app/?path=/story/packages-ui-assets-payment-method-icons--icons}\n         */\n        items: {\n            type: Array as PropType<BentoPaymentMethodListboxOptions>,\n            default: () => [],\n        },\n    });\n\n    const emit = defineEmits([\"input\", \"update:model-value\", \"show-more\", \"open\"]);\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    if (props.value) {\n        deprecate(\n            'BentoDropdownPaymentMethod \"value\" property',\n            `The use of \"value\" prop in \"BentoDropdownPaymentMethod\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Payment method Dropdown showing a selectable list of countries.\n     *\n     * @example\n     * import { BentoDropdownPaymentMethod } from '@adyen/bento-vue2';\n     * import type { BentoPaymentMethodListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdownPaymentMethod },\n     *     template: `\n     *          <bento-dropdown-payment-method\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 'Visa'\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref('ideal') // Default value\n     *         const options: BentoPaymentMethodListboxOptions = [\n     *              { label: 'Option 1', value: 'ideal' },\n     *              { label: 'Option 2', value: 'visa' },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-dropdown-payment-method',\n        model: { prop: 'modelValue' },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-payment-method.scss\" />\n","<template>\n    <bento-dropdown\n        v-slot=\"{ label, data }\"\n        v-bind=\"$props\"\n        class=\"b-dropdown-tag\"\n        :items=\"tagItems\"\n        show-slot-content-in-multiple\n        @update:model-value=\"onUpdateModelValue\"\n        @show-more=\"emit('show-more')\"\n        @open=\"emit('open')\"\n    >\n        <listbox-option-tag :option=\"{ value: label, data, label: '' }\" />\n    </bento-dropdown>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, type PropType } from 'vue';\n    import type { BentoTagListboxOptions } from './dropdown-tag.types';\n    import type { BentoListboxSelectedValue } from '@/types/listbox';\n    import { ListboxOptionTag } from '../../../../internal';\n    import BentoDropdown from '../../../dropdown.vue';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * The option elements to populate the tag dropdown with.\n         * It must be an array of {@see BentoTagListboxOptions }\n         * @property {string} value.label - Text to be displayed in the option\n         * @property {string | number} value.value - Value of the option\n         * @property {string} value.variant - The BentTag variant shown for the option.\n         */\n        items: {\n            type: Array as PropType<BentoTagListboxOptions>,\n            default: () => [],\n        },\n    });\n\n    const emit = defineEmits([\"input\", \"update:model-value\", \"show-more\", \"open\"]);\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    const tagItems = computed(() => props.items?.map(({ label, value, variant }) => ({ label, value, data: variant })));\n\n    if (props.value) {\n        deprecate(\n            'BentoDropdownTag \"value\" property',\n            `The use of \"value\" prop in \"BentoDropdownTag\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Tag Dropdown showing a selectable list of tags.\n     *\n     * @example\n     * import { BentoDropdownTag } from '@adyen/bento-vue2';\n     * import type { BentoTagListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdownTag },\n     *     template: `\n     *          <bento-dropdown-tag\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref('unique-id-1') // Default value\n     *         const options: BentoTagListboxOptions = [\n     *              { label: 'Offline', value: 'unique-id-1', variant: 'red' },\n     *              { label: 'Online', value: 'unique-id-2', variant: 'green' },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-dropdown-tag',\n        model: { prop: 'modelValue' },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-tag.scss\" />\n"],"names":["__default__$4","defineComponent","emitValue","useFormFieldEmits","emit","onUpdateModelValue","selectedValue","dropdownItems","computed","props","value","label","src","deprecate","__default__$3","variant","items","toRefs","countryItems","useCountryItems","item","__default__$2","filteredItems","ref","watch","search","searchTerm","searchableItems","searchResults","useSearchBarFilter","_a","normalizedResults","result","__default__$1","__default__","tagItems"],"mappings":"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"}

package/dist/chunks/{dropdown.BiA1YOYJ.js → dropdown.BpT6ct8O.js}

@@ -1,21 +1,21 @@
-import { ref as h, watch as G, computed as r, defineComponent as R, useSlots as he, toRefs as we, nextTick as x, useAttrs as Ae, toRef as L, inject as Me } from "vue";
+import { ref as w, watch as G, computed as r, defineComponent as R, useSlots as we, toRefs as he, nextTick as x, useAttrs as Ae, toRef as L, inject as Me } from "vue";
 import { d as Y, B as Pe } from "./typography.hlOAxsEn.js";
 import { g as $ } from "./generate-uid.NJ8tVoha.js";
 import { u as $e } from "./aria-label.CaUURpnB.js";
 import { u as ee } from "./index.B6WW_F-J.js";
 import { u as ke } from "./form-field.D_2g7vaP.js";
-import { a as p, b as X, B as be, c as Fe, u as Ke, d as ze } from "./use-cached-selected-values.BZd3CTeP.js";
-import { u as Ve } from "./use-form-layout-loading.D3lALhtC.js";
-import { a as Z, b as P, c as We, B as V, D as Ue } from "./dropdown-default-textbox.BCOVaw-a.js";
+import { a as p, b as X, B as be, c as Fe, u as Ke, d as ze } from "./use-cached-selected-values.FoXcm49J.js";
+import { u as Ve } from "./use-form-layout-loading.CWbjZiwP.js";
+import { a as Z, b as P, c as We, B as V, D as Ue } from "./dropdown-default-textbox.uWZMxeI7.js";
 import { u as je } from "./use-has-slot.C9lQZ6nz.js";
-import { B as E, a as qe } from "./keyboard-navigation.pB8weElW.js";
+import { B as E, a as qe } from "./keyboard-navigation.DWmhelVv.js";
 import { B as He } from "./directive.Cbdox5VL.js";
-import { F as Je, E as Ye } from "./field-label.Auq-Pzho.js";
+import { F as Je, E as Ye } from "./field-label.C3h8Q8Xd.js";
 import { P as ye } from "./popper-container.agLYtGwv.js";
-import { h as Ze } from "./button-actions.B81vY51z.js";
+import { g as Ze } from "./button-actions.C3cP-anb.js";
 import { n as k } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 /* empty css              */
-import { s as Q } from "./events.CMzGybJJ.js";
+import { s as Q } from "./events.BQOQSSb7.js";
 import "../assets/dropdown.css";
 const Qe = {
   "en-US": {
@@ -32,7 +32,7 @@ const Qe = {
     cancel: "Cancelar"
   }
 }, Xe = (n, t, o, e) => {
-  const a = h(n.value), { t: s } = ee();
+  const a = w(n.value), { t: s } = ee();
   G(n, () => {
     a.value = n.value;
   });
@@ -197,7 +197,7 @@ const Qe = {
   },
   emits: [],
   setup(n, { expose: t, emit: o }) {
-    const e = n, a = he(), { selectedValue: s, multiple: l } = we(e), i = h(null), { t: f } = ee(), m = r(() => e.open && !e.disabled), u = r(() => f("noOptionsMatchThisSearch")), y = r(() => ({
+    const e = n, a = we(), { selectedValue: s, multiple: l } = he(e), i = w(null), { t: f } = ee(), m = r(() => e.open && !e.disabled), u = r(() => f("noOptionsMatchThisSearch")), y = r(() => ({
       "b-dropdown-options-container--single": !(e != null && e.multiple)
     })), c = r(() => ({
       "b-dropdown-options-container__listbox--single": !(e != null && e.multiple)
@@ -355,7 +355,7 @@ const vt = ft.exports, mt = R({
   },
   emits: ["clear", "close", "input", "keydown", "open"],
   setup(n, { expose: t, emit: o }) {
-    const e = n, a = h(null), s = r(() => ({
+    const e = n, a = w(null), s = r(() => ({
       [`b-dropdown-small-textbox--${Z.DISABLED}`]: e.disabled,
       [`b-dropdown-small-textbox--${Z.READONLY}`]: e.readonly,
       [`b-dropdown-small-textbox--${Z.OPENED}`]: e.open
@@ -396,7 +396,7 @@ var yt = function() {
   null,
   "2e5cb799"
 );
-const ht = gt.exports, wt = (n, t) => t.value.reduce((o, e) => {
+const wt = gt.exports, ht = (n, t) => t.value.reduce((o, e) => {
   if (e.items) {
     const a = e.items.filter(
       (l) => n.value.find((i) => i.value === l.value)
@@ -411,7 +411,7 @@ const ht = gt.exports, wt = (n, t) => t.value.reduce((o, e) => {
       return (i = l.items) == null ? void 0 : i.length;
     })
   );
-  return r(() => o.value.length ? a.value ? wt(o, n) : o.value.map(({ label: l, displayValue: i }) => i ?? l).join(", ") : t.value || null);
+  return r(() => o.value.length ? a.value ? ht(o, n) : o.value.map(({ label: l, displayValue: i }) => i ?? l).join(", ") : t.value || null);
 }, Ce = (n) => {
   var t;
   (t = n.value.$children) == null || t[0].$refs.textbox.focus();
@@ -425,18 +425,18 @@ const ht = gt.exports, wt = (n, t) => t.value.reduce((o, e) => {
   isMultiple: l
 }, i, f, m) => {
   const u = async (_) => {
-    var w;
-    a.value && await x(), (w = s.value[_]) == null || w.focus();
+    var h;
+    a.value && await x(), (h = s.value[_]) == null || h.focus();
   }, y = async (_) => {
     var A, K;
     a.value && await x();
-    const w = (A = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : A.$el.querySelectorAll(
+    const h = (A = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : A.$el.querySelectorAll(
       "button"
     );
-    w.length ? (K = w[_]) == null || K.focus() : u(_);
+    h.length ? (K = h[_]) == null || K.focus() : u(_);
   }, c = (_) => {
-    var w;
-    return (w = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : w.setListboxFocusedIndex(
+    var h;
+    return (h = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : h.setListboxFocusedIndex(
       _
     );
   }, g = () => {
@@ -492,7 +492,7 @@ const ht = gt.exports, wt = (n, t) => t.value.reduce((o, e) => {
   };
 };
 function St(n, t, o, e) {
-  const a = h(n), s = h(t), l = (f, m = []) => m.flatMap((u) => u.label.toLocaleLowerCase().includes(f) ? e != null && e.value && u.items ? [...l(f, u.items)] : [u, ...l(f, u.items)] : u.items ? [...l(f, u.items)] : []);
+  const a = w(n), s = w(t), l = (f, m = []) => m.flatMap((u) => u.label.toLocaleLowerCase().includes(f) ? e != null && e.value && u.items ? [...l(f, u.items)] : [u, ...l(f, u.items)] : u.items ? [...l(f, u.items)] : []);
   return G(a, () => {
     o !== void 0 && o(a.value);
   }), r(() => {
@@ -516,12 +516,12 @@ const Ot = {
     all: "Todos",
     clearFilter: "Limpar filtro"
   }
-}, Et = Symbol("input field component injection key"), Qt = Symbol("input field hint injection key"), Xt = Symbol("input field parent component injection key"), Dt = R({
+}, Et = /* @__PURE__ */ Symbol("input field component injection key"), Qt = /* @__PURE__ */ Symbol("input field hint injection key"), Xt = /* @__PURE__ */ Symbol("input field parent component injection key"), Dt = R({
   i18n: { messages: Ot },
   name: "b-dropdown",
   components: {
     DropdownInputDefault: Ue,
-    DropdownInputSmall: ht
+    DropdownInputSmall: wt
   },
   model: { prop: "modelValue" }
 }), Bt = /* @__PURE__ */ R({
@@ -560,21 +560,21 @@ const Ot = {
   emits: ["input", "update:model-value", "show-more", "open"],
   setup(n, { expose: t, emit: o }) {
     var me;
-    const e = n, a = Ae(), s = he(), l = je(s), { t: i } = ee(), { emitValue: f } = ke(o), m = h(null), u = h(null), y = h(null), c = h(!1), g = $("bento-dropdown-options-container"), b = $("dropdown-label"), S = $("dropdown-description"), O = $("dropdown-error"), { isReadOnly: C } = Ve(L(e, "readonly")), d = r(() => e.modelValue ?? e.value), { cachedSelectedListboxOptions: I, cachedListboxSelectedValues: D, setCachedValues: B } = Fe(
+    const e = n, a = Ae(), s = we(), l = je(s), { t: i } = ee(), { emitValue: f } = ke(o), m = w(null), u = w(null), y = w(null), c = w(!1), g = $("bento-dropdown-options-container"), b = $("dropdown-label"), S = $("dropdown-description"), O = $("dropdown-error"), { isReadOnly: C } = Ve(L(e, "readonly")), d = r(() => e.modelValue ?? e.value), { cachedSelectedListboxOptions: I, cachedListboxSelectedValues: D, setCachedValues: B } = Fe(
       L(e, "items"),
       d,
       L(e, "multiple"),
       L(e, "enableValueLabelPair")
-    ), F = h(a["aria-label"]), W = h(a["aria-describedby"]), { ariaLabel: _, label: w } = we(e), A = r(() => i("ariaLabelFallback")), K = $e({
+    ), F = w(a["aria-label"]), W = w(a["aria-describedby"]), { ariaLabel: _, label: h } = he(e), A = r(() => i("ariaLabelFallback")), K = $e({
       // TODO: take ariaLabel ref away when aria-label prop is removed
       ariaLabel: _.value || F,
-      label: w,
+      label: h,
       defaultFallback: A
     }), te = e.size === V.SMALL || Me(Et, !1), Le = r(() => te ? V.SMALL : V.DEFAULT), xe = r(() => ({
       "b-dropdown--condensed": e.condensed
     })), Se = r(() => ({
       "b-dropdown__description--error": !!e.errorMessage
-    })), T = h(""), M = L(e, "items"), oe = L(e, "staticCategories"), U = St(T, M, (me = e == null ? void 0 : e.search) == null ? void 0 : me.searchEvent, oe), j = r(() => e.dynamicFiltering && !!T.value), Oe = Ct({
+    })), T = w(""), M = L(e, "items"), oe = L(e, "staticCategories"), U = St(T, M, (me = e == null ? void 0 : e.search) == null ? void 0 : me.searchEvent, oe), j = r(() => e.dynamicFiltering && !!T.value), Oe = Ct({
       items: M,
       placeholder: L(e, "placeholder"),
       isMultiSelect: L(e, "multiple"),
@@ -676,7 +676,7 @@ const Ot = {
       }
     ), t({
       focus: ve
-    }), { __sfc: !0, attrs: a, slots: s, hasSlot: l, props: e, emit: o, t: i, emitValue: f, inputContainerRef: m, inputContainerRefWrapper: u, optionsContainerRef: y, isDropdownOpen: c, dropdownOptionsContainerId: g, labelId: b, descriptionId: S, errorId: O, isReadOnly: C, dropdownValue: d, cachedSelectedListboxOptions: I, cachedListboxSelectedValues: D, setCachedValues: B, ariaLabelAttribute: F, ariaDescribedByAttribute: W, ariaLabel: _, label: w, computedAriaLabelFallbackMessage: A, computedAriaLabel: K, isInputComponent: te, computedSize: Le, conditionalClasses: xe, descriptionConditionalClasses: Se, searchTerm: T, items: M, staticCategories: oe, filteredItems: U, isSearching: j, displayValue: Oe, selectedValueItem: Ee, selectedValueIndex: ae, isMultiLevelSelect: q, flattenedItemsList: ne, isTreePattern: le, computedOptionRole: se, additionalItemsSelected: De, ariaDescribedBy: Be, listboxRef: ie, visibleDomOptions: re, updateVisibleDomOptions: H, openDropdown: de, closeDropdown: z, toggleDropdown: ue, clickOutsideDropdown: Ie, onOptionSelected: ce, emitShowMoreEvent: pe, textboxKeyboardNavigationListeners: Te, listboxKeyboardNavigationListeners: fe, listboxListeners: Ne, focus: ve, BentoDropdownOptionsContainer: nt, BentoTypography: Pe, ErrorMessage: Ye, FieldLabel: Je, vBentoClickOutsideDirective: He, vBentoKeyboardNavigationDirective: qe };
+    }), { __sfc: !0, attrs: a, slots: s, hasSlot: l, props: e, emit: o, t: i, emitValue: f, inputContainerRef: m, inputContainerRefWrapper: u, optionsContainerRef: y, isDropdownOpen: c, dropdownOptionsContainerId: g, labelId: b, descriptionId: S, errorId: O, isReadOnly: C, dropdownValue: d, cachedSelectedListboxOptions: I, cachedListboxSelectedValues: D, setCachedValues: B, ariaLabelAttribute: F, ariaDescribedByAttribute: W, ariaLabel: _, label: h, computedAriaLabelFallbackMessage: A, computedAriaLabel: K, isInputComponent: te, computedSize: Le, conditionalClasses: xe, descriptionConditionalClasses: Se, searchTerm: T, items: M, staticCategories: oe, filteredItems: U, isSearching: j, displayValue: Oe, selectedValueItem: Ee, selectedValueIndex: ae, isMultiLevelSelect: q, flattenedItemsList: ne, isTreePattern: le, computedOptionRole: se, additionalItemsSelected: De, ariaDescribedBy: Be, listboxRef: ie, visibleDomOptions: re, updateVisibleDomOptions: H, openDropdown: de, closeDropdown: z, toggleDropdown: ue, clickOutsideDropdown: Ie, onOptionSelected: ce, emitShowMoreEvent: pe, textboxKeyboardNavigationListeners: Te, listboxKeyboardNavigationListeners: fe, listboxListeners: Ne, focus: ve, BentoDropdownOptionsContainer: nt, BentoTypography: Pe, ErrorMessage: Ye, FieldLabel: Je, vBentoClickOutsideDirective: He, vBentoKeyboardNavigationDirective: qe };
   }
 });
 var It = function() {
@@ -711,4 +711,4 @@ export {
   Xt as b,
   St as u
 };
-//# sourceMappingURL=dropdown.BiA1YOYJ.js.map
+//# sourceMappingURL=dropdown.BpT6ct8O.js.map