@adyen/bento-vue2 1.25.0 → 1.26.0

package/dist/chunks/{dropdown.7d4a8dfc.js.map → dropdown.10c034aa.js.map}

@@ -1 +1 @@
-{"version":3,"file":"dropdown.7d4a8dfc.js","sources":["../../src/components/dropdown/dropdown.types.ts","../../src/components/dropdown/components/dropdown-options-container/composables/use-dropdown-options-listbox.ts","../../src/components/dropdown/components/dropdown-options-container/dropdown-options-container.vue","../../../../node_modules/@adyen/ui-assets-icons-16/dist/vue/chevron-down-small.vue","../../../../node_modules/@adyen/ui-assets-icons-16/dist/vue/chevron-up-small.vue","../../src/components/dropdown/components/dropdown-small-textbox/dropdown-small-textbox.vue","../../src/components/dropdown/composables/use-display-value.ts","../../src/components/dropdown/composables/use-keyboard-navigation.ts","../../src/components/search-bar/useSearchBarDataFilter.ts","../../src/components/input-field/input-field.keys.ts","../../src/components/dropdown/dropdown.vue"],"sourcesContent":["/**\n * @deprecated Do not use. Only 'default' size should be used.\n */\nexport enum BentoDropdownSize {\n    DEFAULT = 'DropdownInputDefault',\n    SMALL = 'DropdownInputSmall',\n}\n\nexport {\n    /**\n     * @deprecated since version 2.0. Use the string literal instead.\n     */\n    BentoListboxLazyLoadType as BentoDropdownLazyLoadType,\n    BentoListboxEvent as BentoDropdownEvent,\n} from '@/types';\n\nexport type { BentoListboxSearchOptions as BentoDropdownSearchOptions } from '@/types';\nexport type { BentoListboxEmptyStateProps as BentoDropdownEmptyStateProps } from '@/types';\nexport type { BentoListboxVirtulisationOptions as BentoDropdownVirtulisationOptions } from '@/types';\n","import { computed, ref, Ref, watch } from 'vue';\nimport { BentoListboxEvent, BentoListboxOptions } from '@/types';\nimport { BentoDropdownEvent } from '../../../dropdown.types';\nimport { useI18n } from '@/utils/ts/i18n';\nimport messages from '../messages.json';\n\ntype MessageSchema = (typeof messages)['en-US'];\n\n/**\n * A composable that handles all dropdown options option selecting logic & listeners.\n * If single select dropdown then emits straight up to dropdown.\n * If multi select dropdown then stores selections in internal state and only emits when Apply button is pressed.\n *\n * @param selectedValue The selectedValue property passed into the dropdown options container component.\n * @param multiple The multiple property  passed into the dropdown options container component.\n * @param isOpen The isOpen property passed into the dropdown options container component.\n * @param emit The emit function for the dropdown options container component.\n */\nexport const useDropdownOptionsListbox = (\n    selectedValue: Ref<BentoListboxOptions>,\n    multiple: Ref<boolean>,\n    isOpen: Ref<boolean>,\n    emit: (event: BentoListboxEvent | BentoDropdownEvent, selectedValue?: BentoListboxOptions) => void\n) => {\n    const internalSelectedValue = ref(selectedValue.value);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    watch(selectedValue, () => {\n        internalSelectedValue.value = selectedValue.value;\n    });\n\n    // Multi-select dropdown cancel and apply button logic\n    const isApplyButtonDisabled = computed(\n        () => JSON.stringify(internalSelectedValue.value) === JSON.stringify(selectedValue.value)\n    );\n\n    const onApplyClick = () => {\n        emit(BentoListboxEvent.SELECT, internalSelectedValue.value);\n        emit(BentoDropdownEvent.CLOSE_DROPDOWN);\n    };\n\n    const onCancelClick = () => {\n        internalSelectedValue.value = selectedValue.value;\n        emit(BentoDropdownEvent.CLOSE_DROPDOWN);\n    };\n\n    const onOutsideDropdownClick = () => {\n        if (isOpen.value && multiple.value) {\n            internalSelectedValue.value = selectedValue.value;\n        }\n    };\n\n    const actions = computed(() => [\n        {\n            title: t('apply') as string,\n            event: onApplyClick,\n            disabled: isApplyButtonDisabled.value,\n        },\n        {\n            title: t('cancel') as string,\n            event: onCancelClick,\n        },\n    ]);\n\n    // Click and keyboard navigation event listners\n    const onOptionSelected = (newSelectedValue: BentoListboxOptions) => {\n        internalSelectedValue.value = newSelectedValue;\n        if (!multiple.value) {\n            emit(BentoDropdownEvent.SELECT, newSelectedValue);\n        }\n    };\n\n    const onTabKey = (newSelectedValue: BentoListboxOptions) => {\n        onOptionSelected(newSelectedValue);\n        emit(BentoDropdownEvent.TAB);\n    };\n\n    const onEnterKey = (newSelectedValue: BentoListboxOptions) => {\n        onOptionSelected(newSelectedValue);\n        emit(BentoDropdownEvent.ENTER);\n    };\n\n    const onSpaceKey = (newSelectedValue: BentoListboxOptions) => {\n        onOptionSelected(newSelectedValue);\n        emit(BentoDropdownEvent.SPACE);\n    };\n\n    const onEscapeKey = () => {\n        onCancelClick();\n        emit(BentoListboxEvent.ESCAPE);\n    };\n\n    const emitShowMoreEvent = () => {\n        emit(BentoDropdownEvent.SHOW_MORE);\n    };\n\n    const listeners = {\n        [BentoListboxEvent.SELECT]: onOptionSelected,\n        [BentoListboxEvent.SHOW_MORE]: emitShowMoreEvent,\n        [BentoListboxEvent.TAB]: onTabKey,\n        [BentoListboxEvent.SPACE]: onSpaceKey,\n        [BentoListboxEvent.ENTER]: onEnterKey,\n    };\n\n    return {\n        // Values\n        actions,\n        internalSelectedValue,\n\n        // Methods\n        listeners,\n        onEscapeKey,\n        onOutsideDropdownClick,\n    };\n};\n","<template>\n    <component\n        :is=\"popperContainerOrPopoverComponent\"\n        class=\"b-dropdown-options-container\"\n        :class=\"conditionalClasses\"\n        v-bind=\"popperContainerOrPopoverProps\"\n    >\n        <div @keydown.esc=\"onEscapeKey\">\n            <bento-listbox\n                :id=\"id\"\n                ref=\"dropdownOptionsListboxRef\"\n                :aria-label=\"ariaLabel\"\n                class=\"b-dropdown-options-container__listbox\"\n                :class=\"conditionalListboxClasses\"\n                :empty-state=\"emptyState\"\n                :is-option-disabled=\"isOptionDisabled\"\n                :items=\"items\"\n                :selected-value=\"internalSelectedValue\"\n                :multiple=\"multiple\"\n                :static-categories=\"staticCategories\"\n                :no-results-message=\"noResultsMessage\"\n                :searching=\"searching\"\n                :loading=\"loading\"\n                :lazy-load-type=\"lazyLoadType\"\n                :has-more-items=\"hasMoreItems\"\n                :virtual-scroll=\"virtualScroll\"\n                v-on=\"listeners\"\n            >\n                <template v-for=\"(_, innerSlot) of slots\" #[innerSlot]=\"scope\">\n                    <slot :name=\"innerSlot\" v-bind=\"scope\" />\n                </template>\n            </bento-listbox>\n        </div>\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, PropType, ref, toRefs, useSlots } from 'vue';\n    import { BentoListbox } from '@/internal';\n    import { BentoListboxEvent, BentoListboxIsOptionDisabled, BentoListboxOptions } from '@/types';\n    import { PopperContainer } from '@/components/popper-container';\n    import {\n        BentoDropdownEmptyStateProps,\n        BentoDropdownEvent,\n        BentoDropdownLazyLoadType,\n        BentoDropdownSize,\n        BentoDropdownVirtulisationOptions,\n    } from '../../dropdown.types';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { BentoPopover } from '@/components/popover';\n    import { useDropdownOptionsListbox } from './composables/use-dropdown-options-listbox';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const slots = useSlots();\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when the dropdown is closing.\n         */\n        (e: BentoDropdownEvent.CLOSE_DROPDOWN);\n\n        /**\n         * Emitted when the `ENTER` key is pressed\n         */\n        (e: BentoListboxEvent.ENTER, newSelectedValue: BentoListboxOptions);\n\n        /**\n         * Emitted when the `ESCAPE` key is pressed\n         */\n        (e: BentoListboxEvent.ESCAPE);\n\n        /**\n         * Emitted when an item is selected\n         */\n        (e: BentoListboxEvent.SELECT, newSelectedValue: BentoListboxOptions);\n\n        /**\n         * Emitted when:\n         * - `lazyLoad` is `automatic` and the scroll meets the end of the list\n         * - `lazyload` is `button` and the button is clicked\n         */\n        (e: BentoDropdownEvent.SHOW_MORE);\n\n        /**\n         * Emitted when the `SPACE` key is pressed\n         */\n        (e: BentoListboxEvent.SPACE, newSelectedValue: BentoListboxOptions);\n\n        /**\n         * Emitted when the `TAB` key is pressed\n         */\n        (e: BentoListboxEvent.TAB, newSelectedValue: BentoListboxOptions);\n    }>();\n\n    const props = defineProps({\n        /**\n         * Defines a string value that labels an interactive element.\n         */\n        ariaLabel: { type: String, default: null },\n\n        /**\n         * Empty state props used with the inner empty state component which is displayed when no search results are found.\n         */\n        emptyState: {\n            type: Object as PropType<BentoDropdownEmptyStateProps>,\n            default: undefined,\n        },\n\n        /**\n         * Disables dropdown functionality\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Indicates whether there are more items to load\n         */\n        hasMoreItems: { type: Boolean, default: false },\n\n        /**\n         *  Identifies the listbox whose contents are controlled by the the combobox on which the aria-controls attribute is set.\n         */\n        id: { type: String, required: true },\n\n        /**\n         * Dropdown input size\n         */\n        inputSize: {\n            type: String as PropType<BentoDropdownSize | `${BentoDropdownSize}`>,\n            default: BentoDropdownSize.DEFAULT,\n            validator: (value: BentoDropdownSize) => Object.values(BentoDropdownSize).includes(value),\n        },\n\n        /**\n         * Function that allows the options to be disabled\n         *\n         * @type {BentoDropdownIsOptionDisabled}\n         * @param {BentoDropdownOptionItem} 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: {\n            type: Function as PropType<BentoListboxIsOptionDisabled>,\n            default: undefined,\n        },\n\n        /**\n         * The option elements to populate the dropdown with.\n         * It must be an array of {@see BentoDropdownOptionItem }\n         *  * @property {string} value.label - Text to be displayed in the option\n         *  * @property {string,number} value.value - Value of the option\n         */\n        items: {\n            type: Array as PropType<BentoListboxOptions>,\n            required: true,\n        },\n\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: {\n            type: String as PropType<BentoDropdownLazyLoadType | `${BentoDropdownLazyLoadType}`>,\n            default: BentoDropdownLazyLoadType.AUTOMATIC,\n            validator: (value: BentoDropdownLazyLoadType) => Object.values(BentoDropdownLazyLoadType).includes(value),\n        },\n\n        /**\n         * Indicates if new options are loading.\n         */\n        loading: { 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 container can be displayed.\n         */\n        open: { type: Boolean, required: true },\n\n        /**\n         * The `input` value.\n         * Providing an empty string or empty array will select no options.\n         * Set to an empty string `''` if you don't want any of the available options to be selected for single select\n         */\n        selectedValue: {\n            type: Array as PropType<BentoListboxOptions>,\n            default: null,\n        },\n\n        /**\n         * Flag that indicates that an external search it's being made\n         * to filter out the items inside the the multi-select listbox\n         *\n         * If enabled, hides the \"Select all\" checkbox in \"multiple\" mode.\n         */\n        searching: BentoListbox.props.searching,\n\n        /**\n         * If enabled, dropdown will display non-selectable, static categories\n         */\n        staticCategories: { type: Boolean, default: false },\n\n        /**\n         * Reference to the DOM element or Vue component for positioning\n         * the Dropdown container.\n         */\n        targetElement: { type: PopperContainer.props.targetElement.type, required: true },\n\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: {\n            type: [Boolean, Object] as PropType<BentoDropdownVirtulisationOptions>,\n            default: false,\n        },\n    });\n\n    const { selectedValue, multiple } = toRefs(props);\n    const dropdownOptionsListboxRef = ref(null);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const isDropdownOpen = computed(() => props.open && !props.disabled);\n    const noResultsMessage = computed(() => t('noOptionsMatchThisSearch') as string);\n\n    const conditionalClasses = computed(() => ({\n        'b-dropdown-options-container--single': !props?.multiple,\n    }));\n\n    const conditionalListboxClasses = computed(() => ({\n        'b-dropdown-options-container__listbox--small': props.inputSize === BentoDropdownSize.SMALL,\n        'b-dropdown-options-container__listbox--single': !props?.multiple,\n    }));\n\n    const { actions, internalSelectedValue, listeners, onEscapeKey, onOutsideDropdownClick } =\n        useDropdownOptionsListbox(selectedValue, multiple, isDropdownOpen, emit);\n\n    // Use different components depending on if the dropdown is a single or multi-select\n    const popperContainerOrPopoverComponent = computed(() => (props?.multiple ? BentoPopover : PopperContainer));\n\n    const popperContainerOrPopoverProps = computed(() => {\n        const containerMinAndMaxWidth = {\n            'min-width': `${(props?.targetElement as HTMLElement)?.clientWidth}px`,\n            'max-width': 'min(500px, 95%)',\n        };\n\n        return props?.multiple\n            ? ({\n                  actionsLayout: 'space-between',\n                  actions: actions.value,\n                  divider: true,\n                  fallbackPosition: ['top-start'],\n                  id: generateUid(`dropdown-options-${props.id}`),\n                  open: props.open,\n                  position: 'bottom-start',\n                  style: {\n                      width: 'auto',\n                      ...containerMinAndMaxWidth,\n                  },\n                  targetElement: props.targetElement,\n              } as InstanceType<typeof BentoPopover>['$props'])\n            : ({\n                  fallbackPosition: ['top-start'],\n                  offset: [0, 8],\n                  position: 'bottom-start',\n                  style: {\n                      display: isDropdownOpen.value ? 'block' : 'none',\n                      ...containerMinAndMaxWidth,\n                  },\n                  targetElement: props.targetElement,\n              } as InstanceType<typeof PopperContainer>['$props']);\n    });\n\n    defineExpose({\n        onOutsideDropdownClick,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Dropdown options container.\n     * It lists all the available options.\n     *\n     * @example\n     * <bento-dropdown-options-container\n     *      v-if=\"inputContainerRef\" <!-- Ref to the input to match the width -->\n     *      :id=\"dropdownOptionsContainerId\"\n     *      :target-element=\"inputContainerRef\"\n     *      :aria-label=\"ariaLabel\"\n     *      :open=\"isDropdownOpen\"\n     *      :disabled=\"disabled\"\n     *      :multiple=\"multiple\"\n     *      :selected=\"value\"\n     *      :isOptionDisabled=\"option => option.value === 2\"\n     *      :items=\"[{\n     *         { label: 'Option 1', value: 1 },\n     *         { label: 'Option 2', value: 2 },\n     *      }]\"\n     *      @select=\"onOptionSelected\"\n     * />\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-dropdown-options-container',\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-options-container.scss\" />\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M5.00011 5.43922L8.00011 8.43922L11.0001 5.43922L12.0608 6.49988L8.00011 10.5605L3.93945 6.49988L5.00011 5.43922Z\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M10.9999 10.5608L7.9999 7.56077L4.9999 10.5608L3.93924 9.50011L7.9999 5.43945L12.0606 9.50011L10.9999 10.5608Z\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n","<template>\n    <div class=\"b-dropdown-small-textbox\" :class=\"conditionalClasses\">\n        <dropdown-base-textbox\n            v-bind=\"{ ...$attrs, ...$props }\"\n            class=\"b-dropdown-small-textbox__textbox\"\n            v-on=\"listeners\"\n        >\n            <template #icon>\n                <div class=\"b-dropdown-small-textbox__chevron\">\n                    <chevron-up-small-icon v-show=\"isDropdownOpen\" svg-title=\"opened\" />\n                    <chevron-down-small-icon v-show=\"!isDropdownOpen\" svg-title=\"closed\" />\n                </div>\n            </template>\n        </dropdown-base-textbox>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import {\n        DropdownBaseTextboxEvent,\n        DropdownBaseTextboxState,\n    } from '@/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.types';\n    import { Booleanish } from '@/types';\n    import DropdownBaseTextbox from '@/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.vue';\n    import ChevronDownSmallIcon from '@adyen/ui-assets-icons-16/vue/chevron-down-small';\n    import ChevronUpSmallIcon from '@adyen/ui-assets-icons-16/vue/chevron-up-small';\n\n    const emit = defineEmits<{\n        /**\n         * Emitted on click, space, enter and esc user events. It will close the dropdown.\n         */\n        (e: 'open');\n\n        /**\n         * Emitted on click, space and enter user events. It will open the dropdown.\n         */\n        (e: 'close');\n    }>();\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: { 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. 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: { 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         * 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    const conditionalClasses = computed(() => ({\n        [`b-dropdown-small-textbox--${DropdownBaseTextboxState.DISABLED}`]: props.disabled,\n        [`b-dropdown-small-textbox--${DropdownBaseTextboxState.READONLY}`]: props.readonly,\n        [`b-dropdown-small-textbox--${DropdownBaseTextboxState.OPENED}`]: props.open,\n    }));\n\n    const isDropdownOpen = computed(() => props.open && !props.disabled && !props.readonly);\n\n    const openDropdown = () => {\n        emit('open');\n    };\n\n    const closeDropdown = () => {\n        emit('close');\n    };\n\n    const listeners = {\n        [DropdownBaseTextboxEvent.OPEN]: openDropdown,\n        [DropdownBaseTextboxEvent.CLOSE]: closeDropdown,\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * For internal use only, textbox component in its small variant used in the dropdown component.\n     */\n    export default defineComponent({\n        name: 'dropdown-small-textbox',\n        inheritAttrs: false,\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-small-textbox.scss\" />\n","import { computed, Ref } from 'vue';\nimport { UseDisplayValueOptions } from './use-display-value.types';\nimport { BentoListboxOptions } from '@/types';\n\n/**\n * Generates the `displayValue` for the Category Multi Select based on\n * the selection, the placeholder or it can be empty if there's nothing to show.\n *\n * @param options Multi select options\n * @returns The text to be displayed by the dropdown\n */\nconst categoryMultiSelect = (selectedValues: Ref<BentoListboxOptions>, items: Ref<BentoListboxOptions>) =>\n    items.value\n        .reduce((acc, option) => {\n            // Category items\n            if (option.items) {\n                const selectedCategoryOptions = option.items.filter(categoryOption =>\n                    selectedValues.value.find(selectedOption => selectedOption.value === categoryOption.value)\n                );\n\n                // If the category is fully selected add the category name\n                const isCategoryFullySelected = selectedCategoryOptions.length === option.items.length;\n                if (isCategoryFullySelected) {\n                    acc.push(option.label);\n                } else {\n                    // If category is partially selected add each selected option and category\n                    selectedCategoryOptions.forEach(({ label }) => acc.push(label));\n                }\n            }\n\n            // Non-category option\n            if (selectedValues.value.find(selectedOption => selectedOption.value === option.value)) {\n                acc.push(option.label);\n            }\n\n            return acc;\n        }, [])\n        .join(', ');\n\n/**\n * Generates the `displayValue` for the Dropdown based on\n * the selection, the placeholder or it can be empty if there's nothing to show.\n *\n * When there is a selected value but the value is not present in the list, the\n * value is then returned as there is no way to know what the text/label is.\n *\n * @param options Options needed to calculate the display value based on the type of Dropdown (single, multi, category)\n * @returns The text to be displayed by the dropdown\n */\nexport const useDisplayValue = ({ items, placeholder, selectedValues }: UseDisplayValueOptions) => {\n    const isCategoryMultilevel = computed(() => items.value.find(option => option.items?.length));\n\n    const displayValue = computed(() => {\n        // If no value selected, return placeholder or nothing\n        if (!selectedValues.value.length) {\n            return placeholder.value || null;\n        }\n\n        // Category multi select\n        if (isCategoryMultilevel.value) {\n            return categoryMultiSelect(selectedValues, items);\n        }\n\n        return selectedValues.value.map(({ label }) => label).join(', ');\n    });\n\n    return displayValue;\n};\n","import { BentoKeyboardNavigationKeyDownEvent } from '@/types';\nimport { BentoListboxEvent } from '@/types/listbox';\nimport { computed, nextTick, Ref } from 'vue';\nimport {\n    UseListboxKeyboardNavigationOptions,\n    UseTextboxKeyboardNavigationOptions,\n} from './use-keyboard-navigation.types';\n\n/**\n * Returns the focus to the textbox of the dropdown if it exists\n * when the dropdown is being closed.\n * @param elementToFocusOn Reference to the input container\n */\nconst focusOnTextbox = (elementToFocusOn: Ref) => {\n    elementToFocusOn.value.$children?.[0].$refs.textbox.focus();\n};\n\n/**\n * Controls the keyboard navigation inside the Dropdown's textbox for Single and Multi select.\n * Adds support for the keys:\n *\n * - Arrow up\n * - Arrow Down\n * - End key\n * - Home key\n * - Escape key\n * - Space key\n * - Enter Key\n *\n * @param options Options from the Dropdown to handle the navigation\n * @param toggleDropdown Function to open/close the Dropdown\n * @param openDropdown Function to open the Dropdown\n * @param closeDropdown Function to close the Dropdown\n * @returns List of event listeners available to the Dropdown's textbox\n */\nexport const useTextboxKeyboardNavigation = (\n    {\n        inputContainerRef,\n        optionsContainerRef,\n        selectedValueIndex,\n        isDropdownOpen,\n        isDynamicFltering,\n        items,\n        isMultiple,\n    }: UseTextboxKeyboardNavigationOptions,\n    toggleDropdown: () => void,\n    openDropdown: () => void,\n    closeDropdown: () => void\n) => {\n    const onArrowDown = ({ detail: event }) => {\n        event.preventDefault();\n        if (!isDropdownOpen.value) {\n            openDropdown();\n            nextTick(() => {\n                if (isMultiple) {\n                    optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[0].$el.focus();\n                } else {\n                    optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[\n                        selectedValueIndex.value\n                    ].$el.focus();\n                }\n            });\n        }\n    };\n    const onArrowUp = ({ detail: event }) => {\n        event.preventDefault();\n        if (!isDropdownOpen.value) {\n            openDropdown();\n            nextTick(() => {\n                optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[0].$el.focus();\n            });\n        }\n    };\n\n    const onEndKey = () => {\n        if (!isDropdownOpen.value) {\n            openDropdown();\n            nextTick(() => {\n                if (isMultiple) {\n                    const firstLayer =\n                        optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;\n                    optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[\n                        firstLayer.length - 1\n                    ].$children[items.length - 1].$el.focus();\n                } else {\n                    optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[\n                        items.length - 1\n                    ].$el.focus();\n                }\n            });\n        }\n    };\n\n    const onEscapeKey = () => {\n        if (isDropdownOpen.value) {\n            closeDropdown();\n            focusOnTextbox(inputContainerRef);\n        }\n    };\n\n    const onHomeKey = () => {\n        if (!isDropdownOpen.value) {\n            openDropdown();\n        }\n        nextTick(() => {\n            optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[0].$el.focus();\n        });\n    };\n\n    const onSpaceKey = ({ detail: event }) => {\n        event.preventDefault();\n        toggleDropdown();\n        if (isDropdownOpen.value) {\n            nextTick(() => {\n                if (isMultiple) {\n                    optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[0].$el.focus();\n                } else {\n                    optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[\n                        selectedValueIndex.value\n                    ].$el.focus();\n                }\n            });\n        }\n    };\n\n    const onEnterKey = () => {\n        toggleDropdown();\n        if (isDropdownOpen.value) {\n            nextTick(() => {\n                if (isMultiple) {\n                    optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[0].$el.focus();\n                } else {\n                    optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[\n                        selectedValueIndex.value\n                    ].$el.focus();\n                }\n            });\n        }\n    };\n\n    const textboxKeyboardNavigationListeners = computed(() => ({\n        ...(!isDynamicFltering.value ? { [BentoKeyboardNavigationKeyDownEvent.SPACE]: onSpaceKey } : {}),\n        [BentoKeyboardNavigationKeyDownEvent.ENTER]: onEnterKey,\n        [BentoKeyboardNavigationKeyDownEvent.ARROW_DOWN]: onArrowDown,\n        [BentoKeyboardNavigationKeyDownEvent.ARROW_UP]: onArrowUp,\n        [BentoKeyboardNavigationKeyDownEvent.END]: onEndKey,\n        [BentoKeyboardNavigationKeyDownEvent.ESCAPE]: onEscapeKey,\n        [BentoKeyboardNavigationKeyDownEvent.HOME]: onHomeKey,\n    }));\n\n    return textboxKeyboardNavigationListeners;\n};\n\n/**\n * Controls the keyboard navigation inside the Dropdown's listbox container for Single and Multi select.\n * Adds support for the keys:\n *\n * - Escape key\n * - Enter Key\n * - Tab\n * - Space key\n *\n * @param options Options from the Dropdown to handle the navigation inside the listbox\n * @param closeDropdown Function to close the Dropdown\n * @returns List of event listeners available to the Dropdown's listbox container\n */\nexport const useListboxKeyboardNavigation = (\n    { inputContainerRef, isDropdownOpen }: UseListboxKeyboardNavigationOptions,\n    closeDropdown: () => void\n) => {\n    const closeDropdownAndFocusOnTextbox = () => {\n        if (isDropdownOpen.value) {\n            closeDropdown();\n        }\n        nextTick(() => {\n            focusOnTextbox(inputContainerRef);\n        });\n    };\n\n    const listboxKeyboardNavigationListeners = {\n        [BentoListboxEvent.ENTER]: closeDropdownAndFocusOnTextbox,\n        [BentoListboxEvent.ESCAPE]: closeDropdownAndFocusOnTextbox,\n        [BentoListboxEvent.TAB]: closeDropdownAndFocusOnTextbox,\n        [BentoListboxEvent.SPACE]: closeDropdownAndFocusOnTextbox,\n    };\n\n    return listboxKeyboardNavigationListeners;\n};\n","import { computed, ref, Ref, watch } from 'vue';\nimport { BentoSearchBarItem } from './search-bar.types';\n\n/**\n * Filters an array {@see BentoSearchBarData} containing elements of type {@see BentoSearchBarItem}\n * by the {@param searchTerm}.\n *\n * @param {Ref<String>} searchTerm - Text that satisfies the search criteria.\n * @param {Ref<BentoSearchBarData>} data - Array to be filtered by {@param searchTerm}\n * @returns {Ref<BentoSearchBarData>} New instance of the array filtered by the {@param searchTerm} text\n */\nexport function useSearchBarFilter<T extends BentoSearchBarItem>(\n    searchTerm: Ref<string>,\n    data: Ref<T[]>,\n    searchEvent?: (searchValue: string) => void\n) {\n    const searchTermRef = ref(searchTerm);\n    const dataRef = ref(data);\n\n    const findHits = (searchTermLowerCased: string, options: Array<BentoSearchBarItem> = []) =>\n        options.flatMap(option => {\n            if (option.label.toLocaleLowerCase().includes(searchTermLowerCased)) {\n                return [option, ...findHits(searchTermLowerCased, option.items)];\n            }\n\n            if (option.items) {\n                return [...findHits(searchTermLowerCased, option.items)];\n            }\n\n            return [];\n        });\n\n    // If search event exists trigger it on the search term changing\n    watch(searchTermRef, () => {\n        if (searchEvent !== undefined) {\n            searchEvent(searchTermRef.value);\n        }\n    });\n\n    const filterInputData = computed(() => {\n        if (!searchTermRef.value) {\n            return dataRef.value;\n        }\n        // If search event exists, emit the new search value into the event and do not manipulate data.\n        if (searchEvent !== undefined) {\n            return dataRef.value;\n        }\n\n        const searchTermLowerCased = searchTermRef.value.toLocaleLowerCase();\n        const filtered = findHits(searchTermLowerCased, dataRef.value);\n        return filtered;\n    });\n\n    return filterInputData;\n}\n","export const INPUT_FIELD_COMPONENT_INJECTION_KEY = Symbol('input field component injection key');\n","<!-- TODO: Remove aria props as these are part of JSX elements /vue/types/jsx.d.ts -->\n<!-- eslint-disable vue/attribute-hyphenation -->\n<template>\n    <div v-bento-click-outside-directive=\"clickOutsideDropdown\" class=\"b-dropdown\" :class=\"conditionalClasses\">\n        <field-label\n            v-if=\"label\"\n            :id=\"labelId\"\n            :condensed=\"condensed\"\n            :label=\"label\"\n            :tooltip-text=\"tooltipText\"\n            :optional=\"optional\"\n            :required=\"required\"\n        />\n        <div\n            ref=\"inputContainerRefWrapper\"\n            v-bento-keyboard-navigation-directive\n            v-on=\"textboxKeyboardNavigationListeners\"\n        >\n            <component\n                :is=\"size\"\n                ref=\"inputContainerRef\"\n                :condensed=\"condensed\"\n                :value=\"searchTerm\"\n                :additional-items-selected=\"additionalItemsSelected\"\n                :ariaControls=\"dropdownOptionsContainerId\"\n                :ariaExpanded=\"isDropdownOpen\"\n                :aria-labelledby=\"label ? labelId : null\"\n                :aria-describedby=\"ariaDescribedBy\"\n                :aria-label=\"computedAriaLabel\"\n                :aria-readonly=\"isReadOnly\"\n                :readonly=\"isReadOnly\"\n                :disabled=\"disabled\"\n                :display-value=\"displayValue\"\n                :dynamic-filtering=\"dynamicFiltering\"\n                :is-invalid=\"!!errorMessage || error\"\n                :multiple=\"multiple\"\n                :open=\"isDropdownOpen\"\n                :selected-value-item=\"!isInputComponent ? selectedValueItem : undefined\"\n                :show-slot-content-in-multiple=\"showSlotContentInMultiple\"\n                @input=\"searchTerm = $event\"\n                @open=\"toggleDropdown\"\n                @close=\"toggleDropdown\"\n            >\n                <template v-for=\"(_, innerSlot) of slots\" #[innerSlot]=\"scope\">\n                    <slot :name=\"innerSlot\" v-bind=\"scope\" />\n                </template>\n            </component>\n        </div>\n        <bento-dropdown-options-container\n            v-if=\"inputContainerRef\"\n            :id=\"dropdownOptionsContainerId\"\n            ref=\"optionsContainerRef\"\n            :aria-label=\"computedAriaLabel\"\n            :empty-state=\"emptyState\"\n            :debounce-time=\"search?.debounceTime\"\n            :disabled=\"disabled\"\n            :input-size=\"size\"\n            :is-option-disabled=\"isOptionDisabled\"\n            :items=\"filteredItems\"\n            :multiple=\"multiple\"\n            :static-categories=\"staticCategories\"\n            :open=\"isDropdownOpen\"\n            :selected-value=\"cachedSelectedListboxOptions\"\n            :searching=\"isSearching\"\n            :target-element=\"inputContainerRefWrapper\"\n            :loading=\"loading\"\n            :has-more-items=\"hasMoreItems\"\n            :lazy-load-type=\"lazyLoadType\"\n            :virtual-scroll=\"virtualScroll\"\n            v-on=\"listboxListeners\"\n        >\n            <template v-for=\"(_, innerSlot) of slots\" #[innerSlot]=\"scope\">\n                <slot :name=\"innerSlot\" v-bind=\"scope\" />\n            </template>\n        </bento-dropdown-options-container>\n        <error-message\n            v-if=\"!!errorMessage\"\n            :id=\"errorId\"\n            :error-message=\"errorMessage\"\n            class=\"b-dropdown__error-message\"\n        />\n        <bento-typography\n            v-if=\"description || hasSlot('description')\"\n            :id=\"descriptionId\"\n            class=\"b-dropdown__description\"\n            :class=\"descriptionConditionalClasses\"\n            el=\"span\"\n        >\n            <slot name=\"description\">\n                {{ description }}\n            </slot>\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, inject, PropType, Ref, ref, toRef, toRefs, useAttrs, useSlots } from 'vue';\n\n    // Components\n    import { BentoDropdownOptionsContainer } from './components/dropdown-options-container';\n    import { BentoTypography } from '@/components/typography';\n    import { DropdownInputDefault, DropdownInputSmall } from './components';\n    import { BentoListbox, ErrorMessage, FieldLabel, useCachedSelectedValues, useMultiLevelItems } from '@/internal';\n\n    // Utils\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    // Composables\n    import { useDisplayValue, useListboxKeyboardNavigation, useTextboxKeyboardNavigation } from './composables';\n\n    import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading';\n    import { useSearchBarFilter } from '@/components/search-bar/useSearchBarDataFilter';\n\n    // Directives\n    import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives/click-outside';\n    import { BentoKeyboardNavigationDirective as vBentoKeyboardNavigationDirective } from '@/directives';\n\n    // Types\n    import {\n        BentoDropdownEmptyStateProps,\n        BentoDropdownEvent,\n        BentoDropdownLazyLoadType,\n        BentoDropdownSearchOptions,\n        BentoDropdownSize,\n        BentoDropdownVirtulisationOptions,\n    } from './dropdown.types';\n    import {\n        BentoListboxEvent,\n        BentoListboxIsOptionDisabled,\n        BentoListboxMultiSelectValue,\n        BentoListboxOptions,\n        BentoListboxSelectedValue,\n    } from '@/types';\n\n    import messages from './messages.json';\n    import { useHasSlot } from '@/composables';\n    import { INPUT_FIELD_COMPONENT_INJECTION_KEY } from '@/components/input-field/input-field.keys';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const attrs = useAttrs();\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const props = defineProps({\n        /**\n         * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n         */\n        /**\n         * Defines a string value that labels an interactive element.\n         */\n        ariaLabel: { type: String, default: null },\n\n        /**\n         * Renders the dropdown with a condensed style.\n         */\n        condensed: { type: Boolean, default: false },\n\n        /**\n         * Empty state props used with the inner empty state component which is displayed when no search results are found.\n         */\n        emptyState: {\n            type: Object as PropType<BentoDropdownEmptyStateProps>,\n            default: undefined,\n        },\n\n        /**\n         * Disables dropdown functionality.\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Sets the possibility to type into the textbox.\n         */\n        dynamicFiltering: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Highlights the dropdown in an erroneous state.\n         *\n         * @deprecated Use \"errorMessage\" prop instead\n         */\n        error: { type: Boolean, default: false },\n\n        /**\n         * Highlights the dropdown in an erroneous state with an error message.\n         */\n        errorMessage: { type: String, default: null },\n\n        /**\n         * Descriptive supporting text visbile underneath the dropdown.\n         */\n        description: { type: String, default: null },\n\n        /**\n         * Indicates whether there are more items to load\n         */\n        hasMoreItems: { type: Boolean, default: false },\n\n        /**\n         * Function that dertermines which options are disabled from interaction.\n         *\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: {\n            type: Function as PropType<BentoListboxIsOptionDisabled>,\n            default: undefined,\n        },\n\n        /**\n         * The option elements to populate the dropdown with.\n         * It must be an array of {@see BentoListboxOptionItem }\n         *  * @property {string} value.label - Text to be displayed in the option\n         *  * @property {string,number} value.value - Value of the option\n         */\n        items: {\n            type: Array as PropType<BentoListboxOptions>,\n            default: () => [],\n        },\n\n        /**\n         * Text that is displayed as a label above the element.\n         */\n        label: { type: String, default: null },\n\n        /**\n         * Indicates if new options are loading.\n         */\n        loading: { type: Boolean, default: false },\n\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: {\n            type: String as PropType<BentoDropdownLazyLoadType | `${BentoDropdownLazyLoadType}`>,\n            default: BentoListbox.props.lazyLoadType.default,\n            validator: (value: BentoDropdownLazyLoadType) => Object.values(BentoDropdownLazyLoadType).includes(value),\n        },\n\n        /*\n         * If enabled, the user will be able to select multiple items.\n         */\n        multiple: { type: Boolean, default: false },\n\n        /**\n         * Highlights the dropdown is optional.\n         */\n        optional: { type: Boolean, default: false },\n\n        /**\n         * Text that appears in the form control when it has no value set\n         */\n        placeholder: { type: String, default: null },\n\n        /**\n         * Sets the dropdown to readonly state\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * Highlights the dropdown is required.\n         */\n        required: { type: Boolean, default: false },\n\n        /**\n         * Dropdown search options and events.\n         * @see BentoDropdownSearchOptions\n         */\n        search: {\n            type: Object as PropType<BentoDropdownSearchOptions>,\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         * @deprecated Do not use. Only 'default' size should be used.\n         */\n        size: {\n            type: String as PropType<BentoDropdownSize | `${BentoDropdownSize}`>,\n            default: null,\n            validator: (value: BentoDropdownSize) => Object.values(BentoDropdownSize).includes(value),\n        },\n\n        /**\n         * If enabled, dropdown will display non-selectable, static categories\n         */\n        staticCategories: { type: Boolean, default: false },\n\n        /**\n         * Adds a info icon next to the label to display the passed tooltip message.\n         */\n        tooltipText: { type: String, default: null },\n\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        value: {\n            type: [String, Number, Array] as PropType<BentoListboxSelectedValue>,\n            default: null,\n        },\n\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: {\n            type: [Boolean, Object] as PropType<BentoDropdownVirtulisationOptions>,\n            default: false,\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when an option is clicked. Updates the selected option from the \"value\" property linked to the v-model.\n         */\n        (e: 'input', selectedValue: BentoListboxSelectedValue);\n\n        /**\n         * Emitted when:\n         * - `lazyLoad` is `automatic` and the scroll meets the end of the list\n         * - `lazyload` is `button` and the button is clicked\n         */\n        (e: 'show-more');\n    }>();\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const inputContainerRef = ref(null);\n    const inputContainerRefWrapper = ref(null);\n    const optionsContainerRef: Ref<InstanceType<typeof BentoDropdownOptionsContainer>> = ref(null);\n    const isDropdownOpen = ref(false);\n    const dropdownOptionsContainerId = generateUid('bento-dropdown-options-container');\n    const labelId = generateUid('dropdown-label');\n    const descriptionId = generateUid('dropdown-description');\n    const errorId = generateUid('dropdown-error');\n\n    const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n\n    const { cachedSelectedListboxOptions, cachedListboxSelectedValues, setCachedValues } = useCachedSelectedValues(\n        toRef(props, 'items'),\n        toRef(props, 'value'),\n        toRef(props, 'multiple')\n    );\n\n    const ariaLabelAttribute = ref(attrs['aria-label']);\n    const { ariaLabel } = toRefs(props);\n    const computedAriaLabel = useAriaLabel({\n        ariaLabel: ariaLabelAttribute.value as string,\n        // TODO: take this line away when the aria-label props is removed\n        label: ariaLabel,\n        defaultFallback: t('ariaLabelFallback'),\n    });\n\n    // Inject input field component key to change the dropdown size\n    const isInputComponent =\n        props.size === BentoDropdownSize.SMALL || inject(INPUT_FIELD_COMPONENT_INJECTION_KEY, false);\n    const size = computed(() => (isInputComponent ? BentoDropdownSize.SMALL : BentoDropdownSize.DEFAULT));\n\n    const conditionalClasses = computed(() => ({\n        'b-dropdown--condensed': props.condensed,\n    }));\n\n    // Description styles\n    const descriptionConditionalClasses = computed(() => ({\n        'b-dropdown__description--error': !!props.errorMessage,\n    }));\n\n    // Filtering\n    const searchTerm = ref('');\n    const items = toRef(props, 'items');\n    const filteredItems = useSearchBarFilter(searchTerm, items, props?.search?.searchEvent);\n    const isSearching = computed(() => props.dynamicFiltering && !!searchTerm.value);\n\n    const displayValue = useDisplayValue({\n        items,\n        placeholder: toRef(props, 'placeholder'),\n        selectedValues: cachedSelectedListboxOptions,\n    });\n\n    const selectedValueItem = computed(() => {\n        if (props?.multiple && Array.isArray(props.value)) {\n            return props.items.filter(\n                ({ value }) => props?.value && (props?.value as BentoListboxMultiSelectValue).includes(value)\n            );\n        }\n        if (!props.multiple && props.staticCategories) {\n            // Find the category that holds the selected value\n            const category = props.items.find(categoryItem =>\n                categoryItem.items.some(item => item.value === props.value)\n            );\n            // Find the specific item within the category\n            const selectedCategoryItem = category ? category.items.find(item => item.value === props.value) : null;\n\n            return selectedCategoryItem;\n        }\n\n        return props.items.find(({ value }) => value === props?.value);\n    });\n\n    const selectedValueIndex = computed(() => {\n        const index = props.items.findIndex(({ value }) => props.value === value);\n        return index > 0 ? index : 0;\n    });\n\n    const { isMultiLevelSelect, flattenedItemsList } = useMultiLevelItems(items);\n\n    const additionalItemsSelected = computed(() => {\n        if (props.multiple && !props.hasMoreItems) {\n            const selectedItems = (props?.value as BentoListboxMultiSelectValue)?.length;\n            const total = isMultiLevelSelect.value ? flattenedItemsList.value.length : items.value.length;\n            return total === selectedItems ? t('all') : selectedItems;\n        }\n\n        return null;\n    });\n\n    // ARIA\n    const ariaDescribedBy = computed(\n        () => `${props.description ? descriptionId : ''} ${props.errorMessage ? errorId : ''}`.trim() || null\n    );\n\n    const openDropdown = () => {\n        if (isReadOnly.value) {\n            return;\n        }\n        isDropdownOpen.value = true;\n    };\n\n    const closeDropdown = () => {\n        isDropdownOpen.value = false;\n    };\n\n    const toggleDropdown = () => {\n        if (isReadOnly.value) {\n            return;\n        }\n        isDropdownOpen.value = !isDropdownOpen.value;\n\n        // Clear search\n        if (isSearching.value) {\n            searchTerm.value = '';\n        }\n    };\n\n    const clickOutsideDropdown = () => {\n        if (isSearching.value) {\n            searchTerm.value = '';\n        }\n\n        if (isDropdownOpen.value) {\n            isDropdownOpen.value = false;\n            // Reset the internal dropdown options state\n            optionsContainerRef.value.onOutsideDropdownClick();\n        }\n    };\n\n    const onOptionSelected = (selectedValue: BentoListboxOptions) => {\n        // Clear and close the dropdown on single selection\n        if (!props.multiple) {\n            searchTerm.value = '';\n            isDropdownOpen.value = false;\n        }\n\n        setCachedValues(selectedValue);\n        emit('input', cachedListboxSelectedValues.value);\n    };\n\n    const emitShowMoreEvent = () => {\n        emit(BentoDropdownEvent.SHOW_MORE);\n    };\n\n    const textboxKeyboardNavigationListeners = useTextboxKeyboardNavigation(\n        {\n            inputContainerRef,\n            optionsContainerRef,\n            selectedValueIndex,\n            isDropdownOpen,\n            isDynamicFltering: toRef(props, 'dynamicFiltering'),\n            items: props.items,\n            isMultiple: props.multiple,\n        },\n        toggleDropdown,\n        openDropdown,\n        closeDropdown\n    );\n\n    const listboxKeyboardNavigationListeners = useListboxKeyboardNavigation(\n        {\n            inputContainerRef,\n            isDropdownOpen,\n        },\n        closeDropdown\n    );\n\n    const listboxListeners = {\n        [BentoListboxEvent.CLOSE_DROPDOWN]: closeDropdown,\n        [BentoListboxEvent.SELECT]: onOptionSelected,\n        [BentoListboxEvent.SHOW_MORE]: emitShowMoreEvent,\n        ...listboxKeyboardNavigationListeners,\n    };\n\n    if (props.error) {\n        deprecate(\n            'BentoDropdown \"error\" property',\n            `Use the BentoDropdown \"errorMessage\" property instead to indicate that there is a modifier error.\n                        Having the field as \"undefined\" will hide/remove the error.\n                        <bento-dropdown errorMessage=\"Error message text\" />`,\n            '2.0.0'\n        );\n    }\n\n    if (props.size) {\n        deprecate('BentoDropdown \"size\" property', `Do not use. Only 'default' size should be used.`, '2.0.0');\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Dropdown shows a selected option's.\n     * Use a dropdown when you want users to select options\n     * from a list of pre-defined options.\n     *\n     * @example\n     * import { BentoDropdown } from '@adyen/bento-vue2';\n     * import type { BentoDropdownOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdown },\n     *     template: `\n     *          <bento-dropdown\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(2) // Default value\n     *         const options: BentoDropdownOptions = [\n     *              { label: 'Option 1', value: 1 },\n     *              { label: 'Option 2', value: 2 },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'b-dropdown',\n        components: {\n            DropdownInputDefault,\n            DropdownInputSmall,\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown.scss\" />\n"],"names":["BentoDropdownSize","BentoDropdownSize2","useDropdownOptionsListbox","selectedValue","multiple","isOpen","emit","internalSelectedValue","ref","t","useI18n","watch","isApplyButtonDisabled","computed","onApplyClick","BentoListboxEvent","onCancelClick","onOutsideDropdownClick","actions","onOptionSelected","newSelectedValue","onTabKey","onEnterKey","onSpaceKey","onEscapeKey","emitShowMoreEvent","listeners","__default__$2","defineComponent","messages$1","slots","useSlots","toRefs","props","dropdownOptionsListboxRef","isDropdownOpen","noResultsMessage","conditionalClasses","conditionalListboxClasses","popperContainerOrPopoverComponent","BentoPopover","PopperContainer","popperContainerOrPopoverProps","containerMinAndMaxWidth","_a","generateUid","expose","uuid$1","_sfc_main$3","uuid","_sfc_main$2","__default__$1","DropdownBaseTextboxState","openDropdown","closeDropdown","DropdownBaseTextboxEvent","categoryMultiSelect","selectedValues","items","acc","option","selectedCategoryOptions","categoryOption","selectedOption","label","useDisplayValue","placeholder","isCategoryMultilevel","focusOnTextbox","elementToFocusOn","useTextboxKeyboardNavigation","inputContainerRef","optionsContainerRef","selectedValueIndex","isDynamicFltering","isMultiple","toggleDropdown","onArrowDown","event","nextTick","_b","onArrowUp","onEndKey","firstLayer","onHomeKey","BentoKeyboardNavigationKeyDownEvent","useListboxKeyboardNavigation","closeDropdownAndFocusOnTextbox","useSearchBarFilter","searchTerm","data","searchEvent","searchTermRef","dataRef","findHits","searchTermLowerCased","options","INPUT_FIELD_COMPONENT_INJECTION_KEY","__default__","messages","DropdownInputDefault","DropdownInputSmall","attrs","useAttrs","hasSlot","useHasSlot","inputContainerRefWrapper","dropdownOptionsContainerId","labelId","descriptionId","errorId","isReadOnly","useFormLayoutFieldLoading","toRef","cachedSelectedListboxOptions","cachedListboxSelectedValues","setCachedValues","useCachedSelectedValues","ariaLabelAttribute","ariaLabel","computedAriaLabel","useAriaLabel","isInputComponent","inject","size","descriptionConditionalClasses","filteredItems","isSearching","displayValue","selectedValueItem","value","category","categoryItem","item","index","isMultiLevelSelect","flattenedItemsList","useMultiLevelItems","additionalItemsSelected","selectedItems","ariaDescribedBy","clickOutsideDropdown","textboxKeyboardNavigationListeners","listboxKeyboardNavigationListeners","listboxListeners","deprecate"],"mappings":"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","x_google_ignoreList":[3,4]}
+{"version":3,"file":"dropdown.10c034aa.js","sources":["../../src/components/dropdown/dropdown.types.ts","../../src/components/dropdown/components/dropdown-options-container/composables/use-dropdown-options-listbox.ts","../../src/components/dropdown/components/dropdown-options-container/dropdown-options-container.vue","../../../../node_modules/@adyen/ui-assets-icons-16/dist/vue/chevron-down-small.vue","../../../../node_modules/@adyen/ui-assets-icons-16/dist/vue/chevron-up-small.vue","../../src/components/dropdown/components/dropdown-small-textbox/dropdown-small-textbox.vue","../../src/components/dropdown/composables/use-display-value.ts","../../src/components/dropdown/composables/use-keyboard-navigation.ts","../../src/components/search-bar/useSearchBarDataFilter.ts","../../src/components/input-field/input-field.keys.ts","../../src/components/dropdown/dropdown.vue"],"sourcesContent":["/**\n * @deprecated Do not use. Only 'default' size should be used.\n */\nexport enum BentoDropdownSize {\n    DEFAULT = 'DropdownInputDefault',\n    SMALL = 'DropdownInputSmall',\n}\n\nexport {\n    /**\n     * @deprecated since version 2.0. Use the string literal instead.\n     */\n    BentoListboxLazyLoadType as BentoDropdownLazyLoadType,\n    BentoListboxEvent as BentoDropdownEvent,\n} from '@/types';\n\nexport type { BentoListboxSearchOptions as BentoDropdownSearchOptions } from '@/types';\nexport type { BentoListboxEmptyStateProps as BentoDropdownEmptyStateProps } from '@/types';\nexport type { BentoListboxVirtulisationOptions as BentoDropdownVirtulisationOptions } from '@/types';\n","import { computed, ref, Ref, watch } from 'vue';\nimport { BentoListboxEvent, BentoListboxOptions } from '@/types';\nimport { BentoDropdownEvent } from '../../../dropdown.types';\nimport { useI18n } from '@/utils/ts/i18n';\nimport messages from '../messages.json';\n\ntype MessageSchema = (typeof messages)['en-US'];\n\n/**\n * A composable that handles all dropdown options option selecting logic & listeners.\n * If single select dropdown then emits straight up to dropdown.\n * If multi select dropdown then stores selections in internal state and only emits when Apply button is pressed.\n *\n * @param selectedValue The selectedValue property passed into the dropdown options container component.\n * @param multiple The multiple property  passed into the dropdown options container component.\n * @param isOpen The isOpen property passed into the dropdown options container component.\n * @param emit The emit function for the dropdown options container component.\n */\nexport const useDropdownOptionsListbox = (\n    selectedValue: Ref<BentoListboxOptions>,\n    multiple: Ref<boolean>,\n    isOpen: Ref<boolean>,\n    emit: (event: BentoListboxEvent | BentoDropdownEvent, selectedValue?: BentoListboxOptions) => void\n) => {\n    const internalSelectedValue = ref(selectedValue.value);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    watch(selectedValue, () => {\n        internalSelectedValue.value = selectedValue.value;\n    });\n\n    // Multi-select dropdown cancel and apply button logic\n    const isApplyButtonDisabled = computed(\n        () => JSON.stringify(internalSelectedValue.value) === JSON.stringify(selectedValue.value)\n    );\n\n    const onApplyClick = () => {\n        emit(BentoListboxEvent.SELECT, internalSelectedValue.value);\n        emit(BentoDropdownEvent.CLOSE_DROPDOWN);\n    };\n\n    const onCancelClick = () => {\n        internalSelectedValue.value = selectedValue.value;\n        emit(BentoDropdownEvent.CLOSE_DROPDOWN);\n    };\n\n    const onOutsideDropdownClick = () => {\n        if (isOpen.value && multiple.value) {\n            internalSelectedValue.value = selectedValue.value;\n        }\n    };\n\n    const actions = computed(() => [\n        {\n            title: t('apply') as string,\n            event: onApplyClick,\n            disabled: isApplyButtonDisabled.value,\n        },\n        {\n            title: t('cancel') as string,\n            event: onCancelClick,\n        },\n    ]);\n\n    // Click and keyboard navigation event listners\n    const onOptionSelected = (newSelectedValue: BentoListboxOptions) => {\n        internalSelectedValue.value = newSelectedValue;\n        if (!multiple.value) {\n            emit(BentoDropdownEvent.SELECT, newSelectedValue);\n        }\n    };\n\n    const onTabKey = (newSelectedValue: BentoListboxOptions) => {\n        onOptionSelected(newSelectedValue);\n        emit(BentoDropdownEvent.TAB);\n    };\n\n    const onEnterKey = (newSelectedValue: BentoListboxOptions) => {\n        onOptionSelected(newSelectedValue);\n        emit(BentoDropdownEvent.ENTER);\n    };\n\n    const onSpaceKey = (newSelectedValue: BentoListboxOptions) => {\n        onOptionSelected(newSelectedValue);\n        emit(BentoDropdownEvent.SPACE);\n    };\n\n    const onEscapeKey = () => {\n        onCancelClick();\n        emit(BentoListboxEvent.ESCAPE);\n    };\n\n    const emitShowMoreEvent = () => {\n        emit(BentoDropdownEvent.SHOW_MORE);\n    };\n\n    const listeners = {\n        [BentoListboxEvent.SELECT]: onOptionSelected,\n        [BentoListboxEvent.SHOW_MORE]: emitShowMoreEvent,\n        [BentoListboxEvent.TAB]: onTabKey,\n        [BentoListboxEvent.SPACE]: onSpaceKey,\n        [BentoListboxEvent.ENTER]: onEnterKey,\n    };\n\n    return {\n        // Values\n        actions,\n        internalSelectedValue,\n\n        // Methods\n        listeners,\n        onEscapeKey,\n        onOutsideDropdownClick,\n    };\n};\n","<template>\n    <component\n        :is=\"popperContainerOrPopoverComponent\"\n        class=\"b-dropdown-options-container\"\n        :class=\"conditionalClasses\"\n        v-bind=\"popperContainerOrPopoverProps\"\n    >\n        <div @keydown.esc=\"onEscapeKey\">\n            <bento-listbox\n                :id=\"id\"\n                ref=\"dropdownOptionsListboxRef\"\n                :aria-label=\"ariaLabel\"\n                class=\"b-dropdown-options-container__listbox\"\n                :class=\"conditionalListboxClasses\"\n                :empty-state=\"emptyState\"\n                :is-option-disabled=\"isOptionDisabled\"\n                :items=\"items\"\n                :selected-value=\"internalSelectedValue\"\n                :multiple=\"multiple\"\n                :static-categories=\"staticCategories\"\n                :no-results-message=\"noResultsMessage\"\n                :searching=\"searching\"\n                :loading=\"loading\"\n                :lazy-load-type=\"lazyLoadType\"\n                :has-more-items=\"hasMoreItems\"\n                :virtual-scroll=\"virtualScroll\"\n                v-on=\"listeners\"\n            >\n                <template v-for=\"(_, innerSlot) of slots\" #[innerSlot]=\"scope\">\n                    <slot :name=\"innerSlot\" v-bind=\"scope\" />\n                </template>\n            </bento-listbox>\n        </div>\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, PropType, ref, toRefs, useSlots } from 'vue';\n    import { BentoListbox } from '@/internal';\n    import { BentoListboxEvent, BentoListboxIsOptionDisabled, BentoListboxOptions } from '@/types';\n    import { PopperContainer } from '@/components/popper-container';\n    import {\n        BentoDropdownEmptyStateProps,\n        BentoDropdownEvent,\n        BentoDropdownLazyLoadType,\n        BentoDropdownSize,\n        BentoDropdownVirtulisationOptions,\n    } from '../../dropdown.types';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { BentoPopover } from '@/components/popover';\n    import { useDropdownOptionsListbox } from './composables/use-dropdown-options-listbox';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const slots = useSlots();\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when the dropdown is closing.\n         */\n        (e: BentoDropdownEvent.CLOSE_DROPDOWN);\n\n        /**\n         * Emitted when the `ENTER` key is pressed\n         */\n        (e: BentoListboxEvent.ENTER, newSelectedValue: BentoListboxOptions);\n\n        /**\n         * Emitted when the `ESCAPE` key is pressed\n         */\n        (e: BentoListboxEvent.ESCAPE);\n\n        /**\n         * Emitted when an item is selected\n         */\n        (e: BentoListboxEvent.SELECT, newSelectedValue: BentoListboxOptions);\n\n        /**\n         * Emitted when:\n         * - `lazyLoad` is `automatic` and the scroll meets the end of the list\n         * - `lazyload` is `button` and the button is clicked\n         */\n        (e: BentoDropdownEvent.SHOW_MORE);\n\n        /**\n         * Emitted when the `SPACE` key is pressed\n         */\n        (e: BentoListboxEvent.SPACE, newSelectedValue: BentoListboxOptions);\n\n        /**\n         * Emitted when the `TAB` key is pressed\n         */\n        (e: BentoListboxEvent.TAB, newSelectedValue: BentoListboxOptions);\n    }>();\n\n    const props = defineProps({\n        /**\n         * Defines a string value that labels an interactive element.\n         */\n        ariaLabel: { type: String, default: null },\n\n        /**\n         * Empty state props used with the inner empty state component which is displayed when no search results are found.\n         */\n        emptyState: {\n            type: Object as PropType<BentoDropdownEmptyStateProps>,\n            default: undefined,\n        },\n\n        /**\n         * Disables dropdown functionality\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Indicates whether there are more items to load\n         */\n        hasMoreItems: { type: Boolean, default: false },\n\n        /**\n         *  Identifies the listbox whose contents are controlled by the the combobox on which the aria-controls attribute is set.\n         */\n        id: { type: String, required: true },\n\n        /**\n         * Dropdown input size\n         */\n        inputSize: {\n            type: String as PropType<BentoDropdownSize | `${BentoDropdownSize}`>,\n            default: BentoDropdownSize.DEFAULT,\n            validator: (value: BentoDropdownSize) => Object.values(BentoDropdownSize).includes(value),\n        },\n\n        /**\n         * Function that allows the options to be disabled\n         *\n         * @type {BentoDropdownIsOptionDisabled}\n         * @param {BentoDropdownOptionItem} 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: {\n            type: Function as PropType<BentoListboxIsOptionDisabled>,\n            default: undefined,\n        },\n\n        /**\n         * The option elements to populate the dropdown with.\n         * It must be an array of {@see BentoDropdownOptionItem }\n         *  * @property {string} value.label - Text to be displayed in the option\n         *  * @property {string,number} value.value - Value of the option\n         */\n        items: {\n            type: Array as PropType<BentoListboxOptions>,\n            required: true,\n        },\n\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: {\n            type: String as PropType<BentoDropdownLazyLoadType | `${BentoDropdownLazyLoadType}`>,\n            default: BentoDropdownLazyLoadType.AUTOMATIC,\n            validator: (value: BentoDropdownLazyLoadType) => Object.values(BentoDropdownLazyLoadType).includes(value),\n        },\n\n        /**\n         * Indicates if new options are loading.\n         */\n        loading: { 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 container can be displayed.\n         */\n        open: { type: Boolean, required: true },\n\n        /**\n         * The `input` value.\n         * Providing an empty string or empty array will select no options.\n         * Set to an empty string `''` if you don't want any of the available options to be selected for single select\n         */\n        selectedValue: {\n            type: Array as PropType<BentoListboxOptions>,\n            default: null,\n        },\n\n        /**\n         * Flag that indicates that an external search it's being made\n         * to filter out the items inside the the multi-select listbox\n         *\n         * If enabled, hides the \"Select all\" checkbox in \"multiple\" mode.\n         */\n        searching: BentoListbox.props.searching,\n\n        /**\n         * If enabled, dropdown will display non-selectable, static categories\n         */\n        staticCategories: { type: Boolean, default: false },\n\n        /**\n         * Reference to the DOM element or Vue component for positioning\n         * the Dropdown container.\n         */\n        targetElement: { type: PopperContainer.props.targetElement.type, required: true },\n\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: {\n            type: [Boolean, Object] as PropType<BentoDropdownVirtulisationOptions>,\n            default: false,\n        },\n    });\n\n    const { selectedValue, multiple } = toRefs(props);\n    const dropdownOptionsListboxRef = ref(null);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const isDropdownOpen = computed(() => props.open && !props.disabled);\n    const noResultsMessage = computed(() => t('noOptionsMatchThisSearch') as string);\n\n    const conditionalClasses = computed(() => ({\n        'b-dropdown-options-container--single': !props?.multiple,\n    }));\n\n    const conditionalListboxClasses = computed(() => ({\n        'b-dropdown-options-container__listbox--small': props.inputSize === BentoDropdownSize.SMALL,\n        'b-dropdown-options-container__listbox--single': !props?.multiple,\n    }));\n\n    const { actions, internalSelectedValue, listeners, onEscapeKey, onOutsideDropdownClick } =\n        useDropdownOptionsListbox(selectedValue, multiple, isDropdownOpen, emit);\n\n    // Use different components depending on if the dropdown is a single or multi-select\n    const popperContainerOrPopoverComponent = computed(() => (props?.multiple ? BentoPopover : PopperContainer));\n\n    const popperContainerOrPopoverProps = computed(() => {\n        const containerMinAndMaxWidth = {\n            'min-width': `${(props?.targetElement as HTMLElement)?.clientWidth}px`,\n            'max-width': 'min(500px, 95%)',\n        };\n\n        return props?.multiple\n            ? ({\n                  actionsLayout: 'space-between',\n                  actions: actions.value,\n                  divider: true,\n                  fallbackPosition: ['top-start'],\n                  id: generateUid(`dropdown-options-${props.id}`),\n                  open: props.open,\n                  position: 'bottom-start',\n                  style: {\n                      width: 'auto',\n                      ...containerMinAndMaxWidth,\n                  },\n                  targetElement: props.targetElement,\n              } as InstanceType<typeof BentoPopover>['$props'])\n            : ({\n                  fallbackPosition: ['top-start'],\n                  offset: [0, 8],\n                  position: 'bottom-start',\n                  style: {\n                      display: isDropdownOpen.value ? 'block' : 'none',\n                      ...containerMinAndMaxWidth,\n                  },\n                  targetElement: props.targetElement,\n              } as InstanceType<typeof PopperContainer>['$props']);\n    });\n\n    defineExpose({\n        onOutsideDropdownClick,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Dropdown options container.\n     * It lists all the available options.\n     *\n     * @example\n     * <bento-dropdown-options-container\n     *      v-if=\"inputContainerRef\" <!-- Ref to the input to match the width -->\n     *      :id=\"dropdownOptionsContainerId\"\n     *      :target-element=\"inputContainerRef\"\n     *      :aria-label=\"ariaLabel\"\n     *      :open=\"isDropdownOpen\"\n     *      :disabled=\"disabled\"\n     *      :multiple=\"multiple\"\n     *      :selected=\"value\"\n     *      :isOptionDisabled=\"option => option.value === 2\"\n     *      :items=\"[{\n     *         { label: 'Option 1', value: 1 },\n     *         { label: 'Option 2', value: 2 },\n     *      }]\"\n     *      @select=\"onOptionSelected\"\n     * />\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-dropdown-options-container',\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-options-container.scss\" />\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M5.00011 5.43922L8.00011 8.43922L11.0001 5.43922L12.0608 6.49988L8.00011 10.5605L3.93945 6.49988L5.00011 5.43922Z\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M10.9999 10.5608L7.9999 7.56077L4.9999 10.5608L3.93924 9.50011L7.9999 5.43945L12.0606 9.50011L10.9999 10.5608Z\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n","<template>\n    <div class=\"b-dropdown-small-textbox\" :class=\"conditionalClasses\">\n        <dropdown-base-textbox\n            v-bind=\"{ ...$attrs, ...$props }\"\n            class=\"b-dropdown-small-textbox__textbox\"\n            v-on=\"listeners\"\n        >\n            <template #icon>\n                <div class=\"b-dropdown-small-textbox__chevron\">\n                    <chevron-up-small-icon v-show=\"isDropdownOpen\" svg-title=\"opened\" />\n                    <chevron-down-small-icon v-show=\"!isDropdownOpen\" svg-title=\"closed\" />\n                </div>\n            </template>\n        </dropdown-base-textbox>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import {\n        DropdownBaseTextboxEvent,\n        DropdownBaseTextboxState,\n    } from '@/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.types';\n    import { Booleanish } from '@/types';\n    import DropdownBaseTextbox from '@/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.vue';\n    import ChevronDownSmallIcon from '@adyen/ui-assets-icons-16/vue/chevron-down-small';\n    import ChevronUpSmallIcon from '@adyen/ui-assets-icons-16/vue/chevron-up-small';\n\n    const emit = defineEmits<{\n        /**\n         * Emitted on click, space, enter and esc user events. It will close the dropdown.\n         */\n        (e: 'open');\n\n        /**\n         * Emitted on click, space and enter user events. It will open the dropdown.\n         */\n        (e: 'close');\n    }>();\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: { 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. 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: { 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         * 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    const conditionalClasses = computed(() => ({\n        [`b-dropdown-small-textbox--${DropdownBaseTextboxState.DISABLED}`]: props.disabled,\n        [`b-dropdown-small-textbox--${DropdownBaseTextboxState.READONLY}`]: props.readonly,\n        [`b-dropdown-small-textbox--${DropdownBaseTextboxState.OPENED}`]: props.open,\n    }));\n\n    const isDropdownOpen = computed(() => props.open && !props.disabled && !props.readonly);\n\n    const openDropdown = () => {\n        emit('open');\n    };\n\n    const closeDropdown = () => {\n        emit('close');\n    };\n\n    const listeners = {\n        [DropdownBaseTextboxEvent.OPEN]: openDropdown,\n        [DropdownBaseTextboxEvent.CLOSE]: closeDropdown,\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * For internal use only, textbox component in its small variant used in the dropdown component.\n     */\n    export default defineComponent({\n        name: 'dropdown-small-textbox',\n        inheritAttrs: false,\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-small-textbox.scss\" />\n","import { computed, Ref } from 'vue';\nimport { UseDisplayValueOptions } from './use-display-value.types';\nimport { BentoListboxOptions } from '@/types';\n\n/**\n * Generates the `displayValue` for the Category Multi Select based on\n * the selection, the placeholder or it can be empty if there's nothing to show.\n *\n * @param options Multi select options\n * @returns The text to be displayed by the dropdown\n */\nconst categoryMultiSelect = (selectedValues: Ref<BentoListboxOptions>, items: Ref<BentoListboxOptions>) =>\n    items.value\n        .reduce((acc, option) => {\n            // Category items\n            if (option.items) {\n                const selectedCategoryOptions = option.items.filter(categoryOption =>\n                    selectedValues.value.find(selectedOption => selectedOption.value === categoryOption.value)\n                );\n\n                // If the category is fully selected add the category name\n                const isCategoryFullySelected = selectedCategoryOptions.length === option.items.length;\n                if (isCategoryFullySelected) {\n                    acc.push(option.label);\n                } else {\n                    // If category is partially selected add each selected option and category\n                    selectedCategoryOptions.forEach(({ label }) => acc.push(label));\n                }\n            }\n\n            // Non-category option\n            if (selectedValues.value.find(selectedOption => selectedOption.value === option.value)) {\n                acc.push(option.label);\n            }\n\n            return acc;\n        }, [])\n        .join(', ');\n\n/**\n * Generates the `displayValue` for the Dropdown based on\n * the selection, the placeholder or it can be empty if there's nothing to show.\n *\n * When there is a selected value but the value is not present in the list, the\n * value is then returned as there is no way to know what the text/label is.\n *\n * @param options Options needed to calculate the display value based on the type of Dropdown (single, multi, category)\n * @returns The text to be displayed by the dropdown\n */\nexport const useDisplayValue = ({ items, placeholder, selectedValues }: UseDisplayValueOptions) => {\n    const isCategoryMultilevel = computed(() => items.value.find(option => option.items?.length));\n\n    const displayValue = computed(() => {\n        // If no value selected, return placeholder or nothing\n        if (!selectedValues.value.length) {\n            return placeholder.value || null;\n        }\n\n        // Category multi select\n        if (isCategoryMultilevel.value) {\n            return categoryMultiSelect(selectedValues, items);\n        }\n\n        return selectedValues.value.map(({ label }) => label).join(', ');\n    });\n\n    return displayValue;\n};\n","import { BentoKeyboardNavigationKeyDownEvent } from '@/types';\nimport { BentoListboxEvent } from '@/types/listbox';\nimport { computed, nextTick, Ref } from 'vue';\nimport {\n    UseListboxKeyboardNavigationOptions,\n    UseTextboxKeyboardNavigationOptions,\n} from './use-keyboard-navigation.types';\n\n/**\n * Returns the focus to the textbox of the dropdown if it exists\n * when the dropdown is being closed.\n * @param elementToFocusOn Reference to the input container\n */\nconst focusOnTextbox = (elementToFocusOn: Ref) => {\n    elementToFocusOn.value.$children?.[0].$refs.textbox.focus();\n};\n\n/**\n * Controls the keyboard navigation inside the Dropdown's textbox for Single and Multi select.\n * Adds support for the keys:\n *\n * - Arrow up\n * - Arrow Down\n * - End key\n * - Home key\n * - Escape key\n * - Space key\n * - Enter Key\n *\n * @param options Options from the Dropdown to handle the navigation\n * @param toggleDropdown Function to open/close the Dropdown\n * @param openDropdown Function to open the Dropdown\n * @param closeDropdown Function to close the Dropdown\n * @returns List of event listeners available to the Dropdown's textbox\n */\nexport const useTextboxKeyboardNavigation = (\n    {\n        inputContainerRef,\n        optionsContainerRef,\n        selectedValueIndex,\n        isDropdownOpen,\n        isDynamicFltering,\n        items,\n        isMultiple,\n    }: UseTextboxKeyboardNavigationOptions,\n    toggleDropdown: () => void,\n    openDropdown: () => void,\n    closeDropdown: () => void\n) => {\n    const onArrowDown = ({ detail: event }) => {\n        event.preventDefault();\n        if (!isDropdownOpen.value) {\n            openDropdown();\n            nextTick(() => {\n                if (isMultiple) {\n                    optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[0].$el.focus();\n                } else {\n                    optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[\n                        selectedValueIndex.value\n                    ].$el.focus();\n                }\n            });\n        }\n    };\n    const onArrowUp = ({ detail: event }) => {\n        event.preventDefault();\n        if (!isDropdownOpen.value) {\n            openDropdown();\n            nextTick(() => {\n                optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[0].$el.focus();\n            });\n        }\n    };\n\n    const onEndKey = () => {\n        if (!isDropdownOpen.value) {\n            openDropdown();\n            nextTick(() => {\n                if (isMultiple) {\n                    const firstLayer =\n                        optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;\n                    optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[\n                        firstLayer.length - 1\n                    ].$children[items.length - 1].$el.focus();\n                } else {\n                    optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[\n                        items.length - 1\n                    ].$el.focus();\n                }\n            });\n        }\n    };\n\n    const onEscapeKey = () => {\n        if (isDropdownOpen.value) {\n            closeDropdown();\n            focusOnTextbox(inputContainerRef);\n        }\n    };\n\n    const onHomeKey = () => {\n        if (!isDropdownOpen.value) {\n            openDropdown();\n        }\n        nextTick(() => {\n            optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[0].$el.focus();\n        });\n    };\n\n    const onSpaceKey = ({ detail: event }) => {\n        event.preventDefault();\n        toggleDropdown();\n        if (isDropdownOpen.value) {\n            nextTick(() => {\n                if (isMultiple) {\n                    optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[0].$el.focus();\n                } else {\n                    optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[\n                        selectedValueIndex.value\n                    ].$el.focus();\n                }\n            });\n        }\n    };\n\n    const onEnterKey = () => {\n        toggleDropdown();\n        if (isDropdownOpen.value) {\n            nextTick(() => {\n                if (isMultiple) {\n                    optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[0].$el.focus();\n                } else {\n                    optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[\n                        selectedValueIndex.value\n                    ].$el.focus();\n                }\n            });\n        }\n    };\n\n    const textboxKeyboardNavigationListeners = computed(() => ({\n        ...(!isDynamicFltering.value ? { [BentoKeyboardNavigationKeyDownEvent.SPACE]: onSpaceKey } : {}),\n        [BentoKeyboardNavigationKeyDownEvent.ENTER]: onEnterKey,\n        [BentoKeyboardNavigationKeyDownEvent.ARROW_DOWN]: onArrowDown,\n        [BentoKeyboardNavigationKeyDownEvent.ARROW_UP]: onArrowUp,\n        [BentoKeyboardNavigationKeyDownEvent.END]: onEndKey,\n        [BentoKeyboardNavigationKeyDownEvent.ESCAPE]: onEscapeKey,\n        [BentoKeyboardNavigationKeyDownEvent.HOME]: onHomeKey,\n    }));\n\n    return textboxKeyboardNavigationListeners;\n};\n\n/**\n * Controls the keyboard navigation inside the Dropdown's listbox container for Single and Multi select.\n * Adds support for the keys:\n *\n * - Escape key\n * - Enter Key\n * - Tab\n * - Space key\n *\n * @param options Options from the Dropdown to handle the navigation inside the listbox\n * @param closeDropdown Function to close the Dropdown\n * @returns List of event listeners available to the Dropdown's listbox container\n */\nexport const useListboxKeyboardNavigation = (\n    { inputContainerRef, isDropdownOpen }: UseListboxKeyboardNavigationOptions,\n    closeDropdown: () => void\n) => {\n    const closeDropdownAndFocusOnTextbox = () => {\n        if (isDropdownOpen.value) {\n            closeDropdown();\n        }\n        nextTick(() => {\n            focusOnTextbox(inputContainerRef);\n        });\n    };\n\n    const listboxKeyboardNavigationListeners = {\n        [BentoListboxEvent.ENTER]: closeDropdownAndFocusOnTextbox,\n        [BentoListboxEvent.ESCAPE]: closeDropdownAndFocusOnTextbox,\n        [BentoListboxEvent.TAB]: closeDropdownAndFocusOnTextbox,\n        [BentoListboxEvent.SPACE]: closeDropdownAndFocusOnTextbox,\n    };\n\n    return listboxKeyboardNavigationListeners;\n};\n","import { computed, ref, Ref, watch } from 'vue';\nimport { BentoSearchBarItem } from './search-bar.types';\n\n/**\n * Filters an array {@see BentoSearchBarData} containing elements of type {@see BentoSearchBarItem}\n * by the {@param searchTerm}.\n *\n * @param {Ref<String>} searchTerm - Text that satisfies the search criteria.\n * @param {Ref<BentoSearchBarData>} data - Array to be filtered by {@param searchTerm}\n * @returns {Ref<BentoSearchBarData>} New instance of the array filtered by the {@param searchTerm} text\n */\nexport function useSearchBarFilter<T extends BentoSearchBarItem>(\n    searchTerm: Ref<string>,\n    data: Ref<T[]>,\n    searchEvent?: (searchValue: string) => void\n) {\n    const searchTermRef = ref(searchTerm);\n    const dataRef = ref(data);\n\n    const findHits = (searchTermLowerCased: string, options: Array<BentoSearchBarItem> = []) =>\n        options.flatMap(option => {\n            if (option.label.toLocaleLowerCase().includes(searchTermLowerCased)) {\n                return [option, ...findHits(searchTermLowerCased, option.items)];\n            }\n\n            if (option.items) {\n                return [...findHits(searchTermLowerCased, option.items)];\n            }\n\n            return [];\n        });\n\n    // If search event exists trigger it on the search term changing\n    watch(searchTermRef, () => {\n        if (searchEvent !== undefined) {\n            searchEvent(searchTermRef.value);\n        }\n    });\n\n    const filterInputData = computed(() => {\n        if (!searchTermRef.value) {\n            return dataRef.value;\n        }\n        // If search event exists, emit the new search value into the event and do not manipulate data.\n        if (searchEvent !== undefined) {\n            return dataRef.value;\n        }\n\n        const searchTermLowerCased = searchTermRef.value.toLocaleLowerCase();\n        const filtered = findHits(searchTermLowerCased, dataRef.value);\n        return filtered;\n    });\n\n    return filterInputData;\n}\n","export const INPUT_FIELD_COMPONENT_INJECTION_KEY = Symbol('input field component injection key');\n","<!-- TODO: Remove aria props as these are part of JSX elements /vue/types/jsx.d.ts -->\n<!-- eslint-disable vue/attribute-hyphenation -->\n<template>\n    <div v-bento-click-outside-directive=\"clickOutsideDropdown\" class=\"b-dropdown\" :class=\"conditionalClasses\">\n        <field-label\n            v-if=\"label\"\n            :id=\"labelId\"\n            :condensed=\"condensed\"\n            :label=\"label\"\n            :tooltip-text=\"tooltipText\"\n            :optional=\"optional\"\n            :required=\"required\"\n        />\n        <div\n            ref=\"inputContainerRefWrapper\"\n            v-bento-keyboard-navigation-directive\n            v-on=\"textboxKeyboardNavigationListeners\"\n        >\n            <component\n                :is=\"size\"\n                ref=\"inputContainerRef\"\n                :condensed=\"condensed\"\n                :value=\"searchTerm\"\n                :additional-items-selected=\"additionalItemsSelected\"\n                :ariaControls=\"dropdownOptionsContainerId\"\n                :ariaExpanded=\"isDropdownOpen\"\n                :aria-labelledby=\"label ? labelId : null\"\n                :aria-describedby=\"ariaDescribedBy\"\n                :aria-label=\"computedAriaLabel\"\n                :aria-readonly=\"isReadOnly\"\n                :readonly=\"isReadOnly\"\n                :disabled=\"disabled\"\n                :display-value=\"displayValue\"\n                :dynamic-filtering=\"dynamicFiltering\"\n                :is-invalid=\"!!errorMessage || error\"\n                :multiple=\"multiple\"\n                :open=\"isDropdownOpen\"\n                :selected-value-item=\"!isInputComponent ? selectedValueItem : undefined\"\n                :show-slot-content-in-multiple=\"showSlotContentInMultiple\"\n                @input=\"searchTerm = $event\"\n                @open=\"toggleDropdown\"\n                @close=\"toggleDropdown\"\n            >\n                <template v-for=\"(_, innerSlot) of slots\" #[innerSlot]=\"scope\">\n                    <slot :name=\"innerSlot\" v-bind=\"scope\" />\n                </template>\n            </component>\n        </div>\n        <bento-dropdown-options-container\n            v-if=\"inputContainerRef\"\n            :id=\"dropdownOptionsContainerId\"\n            ref=\"optionsContainerRef\"\n            :aria-label=\"computedAriaLabel\"\n            :empty-state=\"emptyState\"\n            :debounce-time=\"search?.debounceTime\"\n            :disabled=\"disabled\"\n            :input-size=\"size\"\n            :is-option-disabled=\"isOptionDisabled\"\n            :items=\"filteredItems\"\n            :multiple=\"multiple\"\n            :static-categories=\"staticCategories\"\n            :open=\"isDropdownOpen\"\n            :selected-value=\"cachedSelectedListboxOptions\"\n            :searching=\"isSearching\"\n            :target-element=\"inputContainerRefWrapper\"\n            :loading=\"loading\"\n            :has-more-items=\"hasMoreItems\"\n            :lazy-load-type=\"lazyLoadType\"\n            :virtual-scroll=\"virtualScroll\"\n            v-on=\"listboxListeners\"\n        >\n            <template v-for=\"(_, innerSlot) of slots\" #[innerSlot]=\"scope\">\n                <slot :name=\"innerSlot\" v-bind=\"scope\" />\n            </template>\n        </bento-dropdown-options-container>\n        <error-message\n            v-if=\"!!errorMessage\"\n            :id=\"errorId\"\n            :error-message=\"errorMessage\"\n            class=\"b-dropdown__error-message\"\n        />\n        <bento-typography\n            v-if=\"description || hasSlot('description')\"\n            :id=\"descriptionId\"\n            class=\"b-dropdown__description\"\n            :class=\"descriptionConditionalClasses\"\n            el=\"span\"\n        >\n            <slot name=\"description\">\n                {{ description }}\n            </slot>\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, inject, PropType, Ref, ref, toRef, toRefs, useAttrs, useSlots } from 'vue';\n\n    // Components\n    import { BentoDropdownOptionsContainer } from './components/dropdown-options-container';\n    import { BentoTypography } from '@/components/typography';\n    import { DropdownInputDefault, DropdownInputSmall } from './components';\n    import { BentoListbox, ErrorMessage, FieldLabel, useCachedSelectedValues, useMultiLevelItems } from '@/internal';\n\n    // Utils\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    // Composables\n    import { useDisplayValue, useListboxKeyboardNavigation, useTextboxKeyboardNavigation } from './composables';\n\n    import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading';\n    import { useSearchBarFilter } from '@/components/search-bar/useSearchBarDataFilter';\n\n    // Directives\n    import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives/click-outside';\n    import { BentoKeyboardNavigationDirective as vBentoKeyboardNavigationDirective } from '@/directives';\n\n    // Types\n    import {\n        BentoDropdownEmptyStateProps,\n        BentoDropdownEvent,\n        BentoDropdownLazyLoadType,\n        BentoDropdownSearchOptions,\n        BentoDropdownSize,\n        BentoDropdownVirtulisationOptions,\n    } from './dropdown.types';\n    import {\n        BentoListboxEvent,\n        BentoListboxIsOptionDisabled,\n        BentoListboxMultiSelectValue,\n        BentoListboxOptions,\n        BentoListboxSelectedValue,\n    } from '@/types';\n\n    import messages from './messages.json';\n    import { useHasSlot } from '@/composables';\n    import { INPUT_FIELD_COMPONENT_INJECTION_KEY } from '@/components/input-field/input-field.keys';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const attrs = useAttrs();\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const props = defineProps({\n        /**\n         * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n         */\n        /**\n         * Defines a string value that labels an interactive element.\n         */\n        ariaLabel: { type: String, default: null },\n\n        /**\n         * Renders the dropdown with a condensed style.\n         */\n        condensed: { type: Boolean, default: false },\n\n        /**\n         * Empty state props used with the inner empty state component which is displayed when no search results are found.\n         */\n        emptyState: {\n            type: Object as PropType<BentoDropdownEmptyStateProps>,\n            default: undefined,\n        },\n\n        /**\n         * Disables dropdown functionality.\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Sets the possibility to type into the textbox.\n         */\n        dynamicFiltering: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Highlights the dropdown in an erroneous state.\n         *\n         * @deprecated Use \"errorMessage\" prop instead\n         */\n        error: { type: Boolean, default: false },\n\n        /**\n         * Highlights the dropdown in an erroneous state with an error message.\n         */\n        errorMessage: { type: String, default: null },\n\n        /**\n         * Descriptive supporting text visbile underneath the dropdown.\n         */\n        description: { type: String, default: null },\n\n        /**\n         * Indicates whether there are more items to load\n         */\n        hasMoreItems: { type: Boolean, default: false },\n\n        /**\n         * Function that dertermines which options are disabled from interaction.\n         *\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: {\n            type: Function as PropType<BentoListboxIsOptionDisabled>,\n            default: undefined,\n        },\n\n        /**\n         * The option elements to populate the dropdown with.\n         * It must be an array of {@see BentoListboxOptionItem }\n         *  * @property {string} value.label - Text to be displayed in the option\n         *  * @property {string,number} value.value - Value of the option\n         */\n        items: {\n            type: Array as PropType<BentoListboxOptions>,\n            default: () => [],\n        },\n\n        /**\n         * Text that is displayed as a label above the element.\n         */\n        label: { type: String, default: null },\n\n        /**\n         * Indicates if new options are loading.\n         */\n        loading: { type: Boolean, default: false },\n\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: {\n            type: String as PropType<BentoDropdownLazyLoadType | `${BentoDropdownLazyLoadType}`>,\n            default: BentoListbox.props.lazyLoadType.default,\n            validator: (value: BentoDropdownLazyLoadType) => Object.values(BentoDropdownLazyLoadType).includes(value),\n        },\n\n        /*\n         * If enabled, the user will be able to select multiple items.\n         */\n        multiple: { type: Boolean, default: false },\n\n        /**\n         * Highlights the dropdown is optional.\n         */\n        optional: { type: Boolean, default: false },\n\n        /**\n         * Text that appears in the form control when it has no value set\n         */\n        placeholder: { type: String, default: null },\n\n        /**\n         * Sets the dropdown to readonly state\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * Highlights the dropdown is required.\n         */\n        required: { type: Boolean, default: false },\n\n        /**\n         * Dropdown search options and events.\n         * @see BentoDropdownSearchOptions\n         */\n        search: {\n            type: Object as PropType<BentoDropdownSearchOptions>,\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         * @deprecated Do not use. Only 'default' size should be used.\n         */\n        size: {\n            type: String as PropType<BentoDropdownSize | `${BentoDropdownSize}`>,\n            default: null,\n            validator: (value: BentoDropdownSize) => Object.values(BentoDropdownSize).includes(value),\n        },\n\n        /**\n         * If enabled, dropdown will display non-selectable, static categories\n         */\n        staticCategories: { type: Boolean, default: false },\n\n        /**\n         * Adds a info icon next to the label to display the passed tooltip message.\n         */\n        tooltipText: { type: String, default: null },\n\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        value: {\n            type: [String, Number, Array] as PropType<BentoListboxSelectedValue>,\n            default: null,\n        },\n\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: {\n            type: [Boolean, Object] as PropType<BentoDropdownVirtulisationOptions>,\n            default: false,\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when an option is clicked. Updates the selected option from the \"value\" property linked to the v-model.\n         */\n        (e: 'input', selectedValue: BentoListboxSelectedValue);\n\n        /**\n         * Emitted when:\n         * - `lazyLoad` is `automatic` and the scroll meets the end of the list\n         * - `lazyload` is `button` and the button is clicked\n         */\n        (e: 'show-more');\n    }>();\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const inputContainerRef = ref(null);\n    const inputContainerRefWrapper = ref(null);\n    const optionsContainerRef: Ref<InstanceType<typeof BentoDropdownOptionsContainer>> = ref(null);\n    const isDropdownOpen = ref(false);\n    const dropdownOptionsContainerId = generateUid('bento-dropdown-options-container');\n    const labelId = generateUid('dropdown-label');\n    const descriptionId = generateUid('dropdown-description');\n    const errorId = generateUid('dropdown-error');\n\n    const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n\n    const { cachedSelectedListboxOptions, cachedListboxSelectedValues, setCachedValues } = useCachedSelectedValues(\n        toRef(props, 'items'),\n        toRef(props, 'value'),\n        toRef(props, 'multiple')\n    );\n\n    const ariaLabelAttribute = ref(attrs['aria-label']);\n    const { ariaLabel } = toRefs(props);\n    const computedAriaLabel = useAriaLabel({\n        ariaLabel: ariaLabelAttribute.value as string,\n        // TODO: take this line away when the aria-label props is removed\n        label: ariaLabel,\n        defaultFallback: t('ariaLabelFallback'),\n    });\n\n    // Inject input field component key to change the dropdown size\n    const isInputComponent =\n        props.size === BentoDropdownSize.SMALL || inject(INPUT_FIELD_COMPONENT_INJECTION_KEY, false);\n    const size = computed(() => (isInputComponent ? BentoDropdownSize.SMALL : BentoDropdownSize.DEFAULT));\n\n    const conditionalClasses = computed(() => ({\n        'b-dropdown--condensed': props.condensed,\n    }));\n\n    // Description styles\n    const descriptionConditionalClasses = computed(() => ({\n        'b-dropdown__description--error': !!props.errorMessage,\n    }));\n\n    // Filtering\n    const searchTerm = ref('');\n    const items = toRef(props, 'items');\n    const filteredItems = useSearchBarFilter(searchTerm, items, props?.search?.searchEvent);\n    const isSearching = computed(() => props.dynamicFiltering && !!searchTerm.value);\n\n    const displayValue = useDisplayValue({\n        items,\n        placeholder: toRef(props, 'placeholder'),\n        selectedValues: cachedSelectedListboxOptions,\n    });\n\n    const selectedValueItem = computed(() => {\n        if (props?.multiple && Array.isArray(props.value)) {\n            return props.items.filter(\n                ({ value }) => props?.value && (props?.value as BentoListboxMultiSelectValue).includes(value)\n            );\n        }\n        if (!props.multiple && props.staticCategories) {\n            // Find the category that holds the selected value\n            const category = props.items.find(categoryItem =>\n                categoryItem.items.some(item => item.value === props.value)\n            );\n            // Find the specific item within the category\n            const selectedCategoryItem = category ? category.items.find(item => item.value === props.value) : null;\n\n            return selectedCategoryItem;\n        }\n\n        return props.items.find(({ value }) => value === props?.value);\n    });\n\n    const selectedValueIndex = computed(() => {\n        const index = props.items.findIndex(({ value }) => props.value === value);\n        return index > 0 ? index : 0;\n    });\n\n    const { isMultiLevelSelect, flattenedItemsList } = useMultiLevelItems(items);\n\n    const additionalItemsSelected = computed(() => {\n        if (props.multiple && !props.hasMoreItems) {\n            const selectedItems = (props?.value as BentoListboxMultiSelectValue)?.length;\n            const total = isMultiLevelSelect.value ? flattenedItemsList.value.length : items.value.length;\n            return total === selectedItems ? t('all') : selectedItems;\n        }\n\n        return null;\n    });\n\n    // ARIA\n    const ariaDescribedBy = computed(\n        () => `${props.description ? descriptionId : ''} ${props.errorMessage ? errorId : ''}`.trim() || null\n    );\n\n    const openDropdown = () => {\n        if (isReadOnly.value) {\n            return;\n        }\n        isDropdownOpen.value = true;\n    };\n\n    const closeDropdown = () => {\n        isDropdownOpen.value = false;\n    };\n\n    const toggleDropdown = () => {\n        if (isReadOnly.value) {\n            return;\n        }\n        isDropdownOpen.value = !isDropdownOpen.value;\n\n        // Clear search\n        if (isSearching.value) {\n            searchTerm.value = '';\n        }\n    };\n\n    const clickOutsideDropdown = () => {\n        if (isSearching.value) {\n            searchTerm.value = '';\n        }\n\n        if (isDropdownOpen.value) {\n            isDropdownOpen.value = false;\n            // Reset the internal dropdown options state\n            optionsContainerRef.value.onOutsideDropdownClick();\n        }\n    };\n\n    const onOptionSelected = (selectedValue: BentoListboxOptions) => {\n        // Clear and close the dropdown on single selection\n        if (!props.multiple) {\n            searchTerm.value = '';\n            isDropdownOpen.value = false;\n        }\n\n        setCachedValues(selectedValue);\n        emit('input', cachedListboxSelectedValues.value);\n    };\n\n    const emitShowMoreEvent = () => {\n        emit(BentoDropdownEvent.SHOW_MORE);\n    };\n\n    const textboxKeyboardNavigationListeners = useTextboxKeyboardNavigation(\n        {\n            inputContainerRef,\n            optionsContainerRef,\n            selectedValueIndex,\n            isDropdownOpen,\n            isDynamicFltering: toRef(props, 'dynamicFiltering'),\n            items: props.items,\n            isMultiple: props.multiple,\n        },\n        toggleDropdown,\n        openDropdown,\n        closeDropdown\n    );\n\n    const listboxKeyboardNavigationListeners = useListboxKeyboardNavigation(\n        {\n            inputContainerRef,\n            isDropdownOpen,\n        },\n        closeDropdown\n    );\n\n    const listboxListeners = {\n        [BentoListboxEvent.CLOSE_DROPDOWN]: closeDropdown,\n        [BentoListboxEvent.SELECT]: onOptionSelected,\n        [BentoListboxEvent.SHOW_MORE]: emitShowMoreEvent,\n        ...listboxKeyboardNavigationListeners,\n    };\n\n    if (props.error) {\n        deprecate(\n            'BentoDropdown \"error\" property',\n            `Use the BentoDropdown \"errorMessage\" property instead to indicate that there is a modifier error.\n                        Having the field as \"undefined\" will hide/remove the error.\n                        <bento-dropdown errorMessage=\"Error message text\" />`,\n            '2.0.0'\n        );\n    }\n\n    if (props.size) {\n        deprecate('BentoDropdown \"size\" property', `Do not use. Only 'default' size should be used.`, '2.0.0');\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Dropdown shows a selected option's.\n     * Use a dropdown when you want users to select options\n     * from a list of pre-defined options.\n     *\n     * @example\n     * import { BentoDropdown } from '@adyen/bento-vue2';\n     * import type { BentoDropdownOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdown },\n     *     template: `\n     *          <bento-dropdown\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(2) // Default value\n     *         const options: BentoDropdownOptions = [\n     *              { label: 'Option 1', value: 1 },\n     *              { label: 'Option 2', value: 2 },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'b-dropdown',\n        components: {\n            DropdownInputDefault,\n            DropdownInputSmall,\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown.scss\" />\n"],"names":["BentoDropdownSize","BentoDropdownSize2","useDropdownOptionsListbox","selectedValue","multiple","isOpen","emit","internalSelectedValue","ref","t","useI18n","watch","isApplyButtonDisabled","computed","onApplyClick","BentoListboxEvent","onCancelClick","onOutsideDropdownClick","actions","onOptionSelected","newSelectedValue","onTabKey","onEnterKey","onSpaceKey","onEscapeKey","emitShowMoreEvent","listeners","__default__$2","defineComponent","messages$1","slots","useSlots","toRefs","props","dropdownOptionsListboxRef","isDropdownOpen","noResultsMessage","conditionalClasses","conditionalListboxClasses","popperContainerOrPopoverComponent","BentoPopover","PopperContainer","popperContainerOrPopoverProps","containerMinAndMaxWidth","_a","generateUid","expose","uuid$1","_sfc_main$3","uuid","_sfc_main$2","__default__$1","DropdownBaseTextboxState","openDropdown","closeDropdown","DropdownBaseTextboxEvent","categoryMultiSelect","selectedValues","items","acc","option","selectedCategoryOptions","categoryOption","selectedOption","label","useDisplayValue","placeholder","isCategoryMultilevel","focusOnTextbox","elementToFocusOn","useTextboxKeyboardNavigation","inputContainerRef","optionsContainerRef","selectedValueIndex","isDynamicFltering","isMultiple","toggleDropdown","onArrowDown","event","nextTick","_b","onArrowUp","onEndKey","firstLayer","onHomeKey","BentoKeyboardNavigationKeyDownEvent","useListboxKeyboardNavigation","closeDropdownAndFocusOnTextbox","useSearchBarFilter","searchTerm","data","searchEvent","searchTermRef","dataRef","findHits","searchTermLowerCased","options","INPUT_FIELD_COMPONENT_INJECTION_KEY","__default__","messages","DropdownInputDefault","DropdownInputSmall","attrs","useAttrs","hasSlot","useHasSlot","inputContainerRefWrapper","dropdownOptionsContainerId","labelId","descriptionId","errorId","isReadOnly","useFormLayoutFieldLoading","toRef","cachedSelectedListboxOptions","cachedListboxSelectedValues","setCachedValues","useCachedSelectedValues","ariaLabelAttribute","ariaLabel","computedAriaLabel","useAriaLabel","isInputComponent","inject","size","descriptionConditionalClasses","filteredItems","isSearching","displayValue","selectedValueItem","value","category","categoryItem","item","index","isMultiLevelSelect","flattenedItemsList","useMultiLevelItems","additionalItemsSelected","selectedItems","ariaDescribedBy","clickOutsideDropdown","textboxKeyboardNavigationListeners","listboxKeyboardNavigationListeners","listboxListeners","deprecate"],"mappings":"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","x_google_ignoreList":[3,4]}

package/dist/chunks/{error-message.db315e68.js → error-message.31ec12b7.js}

@@ -1,6 +1,6 @@
 import { defineComponent as o, computed as _ } from "vue";
 import { BentoInfoIcon as i } from "../info-icon.js";
-import { B as a } from "./index.d97166c6.js";
+import { B as a } from "./index.dd30e538.js";
 import { u as l } from "./i18n.eb5b985b.js";
 import { n } from "./_plugin-vue2_normalizer.71e2aa87.js";
 import { C as p } from "./cross-circle-fill.27580c4b.js";
@@ -108,4 +108,4 @@ export {
   M as E,
   S as F
 };
-//# sourceMappingURL=error-message.db315e68.js.map
+//# sourceMappingURL=error-message.31ec12b7.js.map

package/dist/chunks/{error-message.db315e68.js.map → error-message.31ec12b7.js.map}

@@ -1 +1 @@
-{"version":3,"file":"error-message.db315e68.js","sources":["../../src/components/internal/field-label/field-label.vue","../../src/components/internal/error-message/error-message.vue"],"sourcesContent":["<template>\n    <label class=\"b-field-label\" :class=\"conditionalClasses\">\n        <bento-typography el=\"span\" stronger>\n            <template v-if=\"label\"> {{ label }}</template>\n            <template v-else><slot></slot></template>\n        </bento-typography>\n        <bento-typography v-if=\"!!tooltipText\" el=\"span\" class=\"b-field-label__tooltip-wrapper\">\n            <bento-info-icon :tooltip-text=\"tooltipText\" class=\"b-field-label__tooltip\" />\n        </bento-typography>\n        <bento-typography v-if=\"required\" class=\"b-field-label__requirement\" el=\"span\"\n            >({{ t('required') }})</bento-typography\n        >\n        <bento-typography v-else-if=\"optional\" class=\"b-field-label__requirement\" el=\"span\"\n            >({{ t('optional') }})</bento-typography\n        >\n    </label>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoInfoIcon } from '@/components/info-icon';\n    import { BentoTypography } from '@/components/typography';\n\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n    import { computed } from 'vue';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n        /**\n         * Renders the dropdown with a condensed style.\n         */\n        condensed: { type: Boolean, default: false },\n        /**\n         * Field label\n         */\n        label: {\n            type: String,\n            default: null,\n        },\n        /**\n         * Sets the field as optional\n         */\n        optional: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Sets the field as required\n         */\n        required: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Adds a info icon next to the label to display the passed tooltip message.\n         */\n        tooltipText: {\n            type: String,\n            default: null,\n        },\n    });\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const conditionalClasses = computed(() => ({ 'b-field-label--condensed': props.condensed }));\n</script>\n\n<script lang=\"ts\">\n    /**\n    * Internal component to handle the labels for all field components\n\n    * @example\n    * import { FieldLabel } from '@/components/internal/field-label';\n    *\n    * export default {\n    *     components: { FieldLabel },\n    *     template: `\n    *          <field-label label=\"Label\" tooltip-text=\"Tooltip info\" required />\n    *     `\n    * }\n    */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./field-label.scss\" />\n","<template>\n    <bento-typography :id=\"$attrs.id\" class=\"b-error-message\" el=\"span\" aria-live=\"polite\">\n        <div class=\"b-error-message__icon\">\n            <cross-circle-icon :svg-title=\"t('error')\" />\n        </div>\n        {{ errorMessage }}\n    </bento-typography>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoTypography } from '@/components/typography';\n    import CrossCircleIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import { useI18n } from '@/utils/ts/i18n';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    /**\n     * An error message component should be used whenever it is necessary to add an error message to a component.\n     * If adding to a form component, the proper accessibility measures should be taken when necessary\n     * (ex. associating an element with this one using aria-describedby).\n\n    * @example\n    * import { ErrorMessage } from '@/components/internal/error-message';\n    *\n    * export default {\n    *     components: { ErrorMessage },\n    *     template: `\n    *          <error-message :error-message=\"errorMessage\" />\n    *     `\n    * }\n    */\n\n    defineProps({\n        /**\n         * The rendered error message\n         */\n        errorMessage: {\n            type: String,\n            required: true,\n        },\n    });\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n        name: 'error-message',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./error-message.scss\" />\n"],"names":["__default__$1","messages$1","useI18n","conditionalClasses","computed","props","__default__","messages","t"],"mappings":";;;;;;;;;;;;GAmFIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBArBA,EAAA,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAA,OAAA,EAAA,4BAAAC,EAAA,UAAA,EAAA;;;;;;;;;;;;;;;;;;;;;GCnBAC,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;;;;AAPA,UAAA,EAAA,GAAAC,EAAA,IAAAN,EAAA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"error-message.31ec12b7.js","sources":["../../src/components/internal/field-label/field-label.vue","../../src/components/internal/error-message/error-message.vue"],"sourcesContent":["<template>\n    <label class=\"b-field-label\" :class=\"conditionalClasses\">\n        <bento-typography el=\"span\" stronger>\n            <template v-if=\"label\"> {{ label }}</template>\n            <template v-else><slot></slot></template>\n        </bento-typography>\n        <bento-typography v-if=\"!!tooltipText\" el=\"span\" class=\"b-field-label__tooltip-wrapper\">\n            <bento-info-icon :tooltip-text=\"tooltipText\" class=\"b-field-label__tooltip\" />\n        </bento-typography>\n        <bento-typography v-if=\"required\" class=\"b-field-label__requirement\" el=\"span\"\n            >({{ t('required') }})</bento-typography\n        >\n        <bento-typography v-else-if=\"optional\" class=\"b-field-label__requirement\" el=\"span\"\n            >({{ t('optional') }})</bento-typography\n        >\n    </label>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoInfoIcon } from '@/components/info-icon';\n    import { BentoTypography } from '@/components/typography';\n\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n    import { computed } from 'vue';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n        /**\n         * Renders the dropdown with a condensed style.\n         */\n        condensed: { type: Boolean, default: false },\n        /**\n         * Field label\n         */\n        label: {\n            type: String,\n            default: null,\n        },\n        /**\n         * Sets the field as optional\n         */\n        optional: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Sets the field as required\n         */\n        required: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Adds a info icon next to the label to display the passed tooltip message.\n         */\n        tooltipText: {\n            type: String,\n            default: null,\n        },\n    });\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const conditionalClasses = computed(() => ({ 'b-field-label--condensed': props.condensed }));\n</script>\n\n<script lang=\"ts\">\n    /**\n    * Internal component to handle the labels for all field components\n\n    * @example\n    * import { FieldLabel } from '@/components/internal/field-label';\n    *\n    * export default {\n    *     components: { FieldLabel },\n    *     template: `\n    *          <field-label label=\"Label\" tooltip-text=\"Tooltip info\" required />\n    *     `\n    * }\n    */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./field-label.scss\" />\n","<template>\n    <bento-typography :id=\"$attrs.id\" class=\"b-error-message\" el=\"span\" aria-live=\"polite\">\n        <div class=\"b-error-message__icon\">\n            <cross-circle-icon :svg-title=\"t('error')\" />\n        </div>\n        {{ errorMessage }}\n    </bento-typography>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoTypography } from '@/components/typography';\n    import CrossCircleIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import { useI18n } from '@/utils/ts/i18n';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    /**\n     * An error message component should be used whenever it is necessary to add an error message to a component.\n     * If adding to a form component, the proper accessibility measures should be taken when necessary\n     * (ex. associating an element with this one using aria-describedby).\n\n    * @example\n    * import { ErrorMessage } from '@/components/internal/error-message';\n    *\n    * export default {\n    *     components: { ErrorMessage },\n    *     template: `\n    *          <error-message :error-message=\"errorMessage\" />\n    *     `\n    * }\n    */\n\n    defineProps({\n        /**\n         * The rendered error message\n         */\n        errorMessage: {\n            type: String,\n            required: true,\n        },\n    });\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n        name: 'error-message',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./error-message.scss\" />\n"],"names":["__default__$1","messages$1","useI18n","conditionalClasses","computed","props","__default__","messages","t"],"mappings":";;;;;;;;;;;;GAmFIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBArBA,EAAA,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAA,OAAA,EAAA,4BAAAC,EAAA,UAAA,EAAA;;;;;;;;;;;;;;;;;;;;;GCnBAC,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;;;;AAPA,UAAA,EAAA,GAAAC,EAAA,IAAAN,EAAA;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{fixed-scroller.3135f86c.js → fixed-scroller.4eb9a9ac.js}

@@ -1,5 +1,5 @@
 import { ref as r, onMounted as R, computed as f, defineComponent as x } from "vue";
-import { a as L } from "./button.e5f5638f.js";
+import { a as L } from "./button.9d6435ae.js";
 import { u as y } from "./i18n.eb5b985b.js";
 import { C, a as b } from "./chevron-left.5edf02ac.js";
 import { o as m } from "./resize.a041304d.js";
@@ -105,4 +105,4 @@ const U = P.exports;
 export {
   U as F
 };
-//# sourceMappingURL=fixed-scroller.3135f86c.js.map
+//# sourceMappingURL=fixed-scroller.4eb9a9ac.js.map

package/dist/chunks/{fixed-scroller.3135f86c.js.map → fixed-scroller.4eb9a9ac.js.map}

@@ -1 +1 @@
-{"version":3,"file":"fixed-scroller.3135f86c.js","sources":["../../src/components/internal/fixed-scroller/composables/useFixedScroller.ts","../../src/components/internal/fixed-scroller/fixed-scroller.vue"],"sourcesContent":["import { observeSizeOfElement } from '@/utils/ts/resize';\nimport { computed, onMounted, ref } from 'vue';\nimport type { Ref } from 'vue';\n\n// Adding an offset of \"1\" so that the border can be shown within the boundaries\nconst OVERFLOW_CLIP_OFFSET = 1;\n// Add the gradient offset to the calculations\nconst GRADIENT_OFFSET = 40;\n\ninterface useFixedScrollerProps {\n    contentRef?: Ref<HTMLElement | undefined>;\n    containerRef?: Ref<HTMLElement | undefined>;\n    leftButtonRef?: Ref<HTMLElement | undefined>;\n    rightButtonRef?: Ref<HTMLElement | undefined>;\n}\n\n/**\n * Function to calculate the offset of each view and change the \"view\" via offsets\n * through the functions `scrollLeft` and `scrollRight` whilst providing a way to\n * show and hide the buttons based on the current \"view\" via\n * `shouldShowLeftButton` and `shouldShowRightButton`.\n *\n * Each view is pre-calculated (offsetArray) and updated if the content changes as a computed ref:\n * First view: Always 0 (x axis beginning).\n * Last view: total content space - visible width\n * Intermediate views: Previous offset (to the left) plus the visible space taking\n *                     away the space the buttons take so that the whole view can be rendered\n *\n *\n * @param {useFixedScrollerProps} props - All the necessary references to calculate the scroll\n * @param {Ref<HTMLElement | undefined>} props.containerRef - Reference to the container, this defines the visible space width\n * @param {Ref<HTMLElement | undefined>} props.contentRef - Reference to the content itself, this defines the total content width\n * @param {Ref<HTMLElement | undefined>} props.leftButtonRef - Reference to the left button, used to calculate total space in which the content will be rendered\n * @param {Ref<HTMLElement | undefined>} props.rightButtonRef - Reference to the right button, used to calculate total space in which the content will be rendered\n * @returns {Object} response - Values used in the view to show the buttons and to change the view right or left\n * @returns {Ref<number>} response.offset - Offset value by which the view will move on the x axis. To be used in `styles`.\n * @returns {ComputedRef<boolean>} response.shouldShowLeftButton - Indicates if the button on the left should be shown\n * @returns {ComputedRef<boolean>} response.shouldShowRightButton - Indicates if the button on the right should be shown\n * @returns {() => {}} response.scrollLeft - Used to shift the view to the left\n * @returns {() => {}} response.scrollRight - Used to shift the view to the right\n */\nexport const useFixedScroller = ({\n    contentRef,\n    containerRef,\n    leftButtonRef,\n    rightButtonRef,\n}: useFixedScrollerProps) => {\n    const offset = ref(0);\n    const currentView = ref(0);\n\n    // Calculated using 'scrollWidth' to get the full width of the content\n    const totalContentWidth = ref(0);\n    // Calculated using 'clientWidth' to get the rendered componen width\n    const visibleSpaceWidth = ref(0);\n\n    onMounted(() => {\n        observeSizeOfElement(containerRef.value, () => {\n            if (containerRef.value) {\n                // Set new width when resized\n                visibleSpaceWidth.value = containerRef.value.offsetWidth;\n                // Reset the offset and view\n                currentView.value = 0;\n                offset.value = 0;\n            }\n        });\n\n        observeSizeOfElement(contentRef.value, () => {\n            totalContentWidth.value = contentRef.value?.scrollWidth;\n        });\n    });\n\n    // Sum of the space used by the Left and Right buttons\n    // Used to calculate how much space the \"actual\" visible space is\n    const buttonsWidth = computed(() => {\n        const leftButtonWidth = leftButtonRef.value?.scrollWidth\n            ? leftButtonRef.value.scrollWidth + GRADIENT_OFFSET\n            : 0;\n        const rightButtonWidth = rightButtonRef.value?.scrollWidth\n            ? rightButtonRef.value.scrollWidth + GRADIENT_OFFSET\n            : 0;\n\n        return leftButtonWidth + rightButtonWidth;\n    });\n    // Total number of pages/views available.\n    // Calculated as \"ceil\" because if the space doesn't fit \"one view\" (irrational number) the content flows to the next view (integer).\n    const totalViews = computed(() => Math.ceil(totalContentWidth.value / visibleSpaceWidth.value) ?? 0);\n\n    // Calculation of offsets per view (index).\n    // This allows to easily swap the offset without on-the-fly calculations\n    const offsetArray = computed(() => {\n        const calculatedOffsetList = new Array(totalViews.value).fill(0);\n\n        calculatedOffsetList.forEach((_, index) => {\n            // First offset will be 0\n            if (index === 0) {\n                return;\n            }\n\n            // Calculate last\n            if (index === totalViews.value - 1) {\n                calculatedOffsetList[calculatedOffsetList.length - 1] = -(\n                    totalContentWidth.value -\n                    visibleSpaceWidth.value +\n                    OVERFLOW_CLIP_OFFSET\n                );\n\n                return;\n            }\n\n            // Calculate each offset - Move 1 view\n            const previousOffset = calculatedOffsetList[index - 1];\n            calculatedOffsetList[index] = -(visibleSpaceWidth.value + Math.abs(previousOffset) - buttonsWidth.value);\n        });\n\n        return calculatedOffsetList;\n    });\n\n    // Hide left button when it's the first view\n    const shouldShowLeftButton = computed(() => currentView.value !== 0);\n    // Hide right button if it's the last view\n    const shouldShowRightButton = computed(\n        () => offset.value >= -(totalContentWidth.value - visibleSpaceWidth.value - 1)\n    );\n\n    /**\n     * Shifts the current offset by one view to the left.\n     */\n    const scrollLeft = () => {\n        // Do nothing if it is already in page 0\n        if (currentView.value === 0) {\n            return;\n        }\n\n        currentView.value -= 1;\n        offset.value = offsetArray.value[currentView.value];\n    };\n\n    /**\n     * Shifts the current offset by one view to the right.\n     */\n    const scrollRight = () => {\n        // Do nothing if it is already in last page\n        if (currentView.value === totalViews.value - 1) {\n            return;\n        }\n\n        currentView.value += 1;\n        offset.value = offsetArray.value[currentView.value];\n    };\n\n    return {\n        offset,\n        shouldShowLeftButton,\n        shouldShowRightButton,\n\n        // Methods\n        scrollLeft,\n        scrollRight,\n    };\n};\n","<template>\n    <div ref=\"fixedScrollerRef\" class=\"b-fixed-scroller\">\n        <div class=\"b-fixed-scroller__container\">\n            <div\n                ref=\"contentRef\"\n                class=\"b-fixed-scroller__content\"\n                :style=\"{\n                    transform: `translateX(${offset}px)`,\n                    paddingTop: shouldShowLeftButton || shouldShowRightButton ? `${extraPaddingTop}px` : null,\n                }\"\n            >\n                <slot></slot>\n            </div>\n        </div>\n\n        <div v-if=\"shouldShowLeftButton\" ref=\"leftButtonRef\" class=\"b-fixed-scroller__left\">\n            <bento-button variant=\"secondary\" :aria-label=\"t('scrollLeft')\" :condensed=\"condensed\" @click=\"scrollLeft\">\n                <template #iconLeft>\n                    <chevron-left-icon svg-title=\"checked\" aria-hidden=\"true\" />\n                </template>\n            </bento-button>\n        </div>\n        <div v-if=\"shouldShowRightButton\" ref=\"rightButtonRef\" class=\"b-fixed-scroller__right\">\n            <bento-button\n                variant=\"secondary\"\n                :aria-label=\"t('scrollRight')\"\n                :condensed=\"condensed\"\n                @click=\"scrollRight\"\n            >\n                <template #iconLeft>\n                    <chevron-right-icon svg-title=\"checked\" aria-hidden=\"true\" />\n                </template>\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { ref } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { useFixedScroller } from './composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import ChevronLeftIcon from '@adyen/ui-assets-icons-16/vue/chevron-left';\n    import ChevronRightIcon from '@adyen/ui-assets-icons-16/vue/chevron-right';\n\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 contentRef = ref(null);\n    const fixedScrollerRef = ref(null);\n    const leftButtonRef = ref(null);\n    const rightButtonRef = ref(null);\n\n    defineProps({\n        /**\n         * Applies the condensed style to the buttons\n         */\n        condensed: { type: Boolean, default: false },\n        /**\n         * Padding to be applied to the top of the scroller container\n         */\n        extraPaddingTop: { type: Number, default: 0 },\n    });\n\n    const { offset, shouldShowLeftButton, shouldShowRightButton, scrollLeft, scrollRight } = useFixedScroller({\n        contentRef,\n        containerRef: fixedScrollerRef,\n        leftButtonRef,\n        rightButtonRef,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Allows to horizontally scroll content by one view at a time.\n     *\n     * @example\n     * import { FixedScroller } from '@/internal';\n     *\n     * export default {\n     *     components: { FixedScroller },\n     *     template: `\n     *          <fixed-scroller>\n     *              <div style=\"display: flex; gap: 8px;\">\n     *                  {{ Content here }}\n     *              </div>\n     *          </fixed-scroller>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./fixed-scroller.scss\" />\n"],"names":["OVERFLOW_CLIP_OFFSET","GRADIENT_OFFSET","useFixedScroller","contentRef","containerRef","leftButtonRef","rightButtonRef","offset","ref","currentView","totalContentWidth","visibleSpaceWidth","onMounted","observeSizeOfElement","_a","buttonsWidth","computed","leftButtonWidth","rightButtonWidth","_b","totalViews","offsetArray","calculatedOffsetList","_","index","previousOffset","shouldShowLeftButton","shouldShowRightButton","__default__","messages","t","useI18n","fixedScrollerRef","scrollLeft","scrollRight"],"mappings":";;;;;;;AAKA,MAAAA,IAAA,GAEAC,IAAA,IAkCOC,IAAA,CAAA;AAAA,EAA0B,YAAAC;AAAA,EAC7B,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC;AAEJ,MAAA;AACI,QAAAC,IAAAC,EAAA,CAAA,GACAC,IAAAD,EAAA,CAAA,GAGAE,IAAAF,EAAA,CAAA,GAEAG,IAAAH,EAAA,CAAA;AAEA,EAAAI,EAAA,MAAA;AACI,IAAAC,EAAAT,EAAA,OAAA,MAAA;AACI,MAAAA,EAAA,UAEIO,EAAA,QAAAP,EAAA,MAAA,aAEAK,EAAA,QAAA,GACAF,EAAA,QAAA;AAAA,IACJ,CAAA,GAGJM,EAAAV,EAAA,OAAA,MAAA;;AACI,MAAAO,EAAA,SAAAI,IAAAX,EAAA,UAAA,gBAAAW,EAAA;AAAA,IAA4C,CAAA;AAAA,EAC/C,CAAA;AAKL,QAAAC,IAAAC,EAAA,MAAA;;AACI,UAAAC,KAAAH,IAAAT,EAAA,UAAA,QAAAS,EAAA,cAAAT,EAAA,MAAA,cAAAJ,IAAA,GAGAiB,KAAAC,IAAAb,EAAA,UAAA,QAAAa,EAAA,cAAAb,EAAA,MAAA,cAAAL,IAAA;AAIA,WAAAgB,IAAAC;AAAA,EAAyB,CAAA,GAI7BE,IAAAJ,EAAA,MAAA,KAAA,KAAAN,EAAA,QAAAC,EAAA,KAAA,KAAA,CAAA,GAIAU,IAAAL,EAAA,MAAA;AACI,UAAAM,IAAA,IAAA,MAAAF,EAAA,KAAA,EAAA,KAAA,CAAA;AAEA,WAAAE,EAAA,QAAA,CAAAC,GAAAC,MAAA;AAEI,UAAAA,MAAA;AACI;AAIJ,UAAAA,MAAAJ,EAAA,QAAA,GAAA;AACI,QAAAE,EAAAA,EAAA,SAAA,CAAA,IAAA,EAAAZ,EAAA,QAAAC,EAAA,QAAAX;AAMA;AAAA;AAIJ,YAAAyB,IAAAH,EAAAE,IAAA,CAAA;AACA,MAAAF,EAAAE,CAAA,IAAA,EAAAb,EAAA,QAAA,KAAA,IAAAc,CAAA,IAAAV,EAAA;AAAA,IAAkG,CAAA,GAGtGO;AAAA,EAAO,CAAA,GAIXI,IAAAV,EAAA,MAAAP,EAAA,UAAA,CAAA,GAEAkB,IAAAX;AAAA,IAA8B,MAAAT,EAAA,SAAA,EAAAG,EAAA,QAAAC,EAAA,QAAA;AAAA,EACkD;AA6BhF,SAAA;AAAA,IAAO,QAAAJ;AAAA,IACH,sBAAAmB;AAAA,IACA,uBAAAC;AAAA;AAAA,IACA,YA1BJ,MAAA;AAEI,MAAAlB,EAAA,UAAA,MAIAA,EAAA,SAAA,GACAF,EAAA,QAAAc,EAAA,MAAAZ,EAAA,KAAA;AAAA,IAAkD;AAAA,IAsBlD,aAhBJ,MAAA;AAEI,MAAAA,EAAA,UAAAW,EAAA,QAAA,MAIAX,EAAA,SAAA,GACAF,EAAA,QAAAc,EAAA,MAAAZ,EAAA,KAAA;AAAA,IAAkD;AAAA,EAUlD;AAER;;;;;GClEImB,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;AA9CA,UAAA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAEA5B,IAAAK,EAAA,IAAA,GACAwB,IAAAxB,EAAA,IAAA,GACAH,IAAAG,EAAA,IAAA,GACAF,IAAAE,EAAA,IAAA,GAaA,EAAA,QAAAD,GAAA,sBAAAmB,GAAA,uBAAAC,GAAA,YAAAM,GAAA,aAAAC,EAAA,IAAAhC,EAAA;AAAA,MAA0G,YAAAC;AAAA,MACtG,cAAA6B;AAAA,MACc,eAAA3B;AAAA,MACd,gBAAAC;AAAA,IACA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"fixed-scroller.4eb9a9ac.js","sources":["../../src/components/internal/fixed-scroller/composables/useFixedScroller.ts","../../src/components/internal/fixed-scroller/fixed-scroller.vue"],"sourcesContent":["import { observeSizeOfElement } from '@/utils/ts/resize';\nimport { computed, onMounted, ref } from 'vue';\nimport type { Ref } from 'vue';\n\n// Adding an offset of \"1\" so that the border can be shown within the boundaries\nconst OVERFLOW_CLIP_OFFSET = 1;\n// Add the gradient offset to the calculations\nconst GRADIENT_OFFSET = 40;\n\ninterface useFixedScrollerProps {\n    contentRef?: Ref<HTMLElement | undefined>;\n    containerRef?: Ref<HTMLElement | undefined>;\n    leftButtonRef?: Ref<HTMLElement | undefined>;\n    rightButtonRef?: Ref<HTMLElement | undefined>;\n}\n\n/**\n * Function to calculate the offset of each view and change the \"view\" via offsets\n * through the functions `scrollLeft` and `scrollRight` whilst providing a way to\n * show and hide the buttons based on the current \"view\" via\n * `shouldShowLeftButton` and `shouldShowRightButton`.\n *\n * Each view is pre-calculated (offsetArray) and updated if the content changes as a computed ref:\n * First view: Always 0 (x axis beginning).\n * Last view: total content space - visible width\n * Intermediate views: Previous offset (to the left) plus the visible space taking\n *                     away the space the buttons take so that the whole view can be rendered\n *\n *\n * @param {useFixedScrollerProps} props - All the necessary references to calculate the scroll\n * @param {Ref<HTMLElement | undefined>} props.containerRef - Reference to the container, this defines the visible space width\n * @param {Ref<HTMLElement | undefined>} props.contentRef - Reference to the content itself, this defines the total content width\n * @param {Ref<HTMLElement | undefined>} props.leftButtonRef - Reference to the left button, used to calculate total space in which the content will be rendered\n * @param {Ref<HTMLElement | undefined>} props.rightButtonRef - Reference to the right button, used to calculate total space in which the content will be rendered\n * @returns {Object} response - Values used in the view to show the buttons and to change the view right or left\n * @returns {Ref<number>} response.offset - Offset value by which the view will move on the x axis. To be used in `styles`.\n * @returns {ComputedRef<boolean>} response.shouldShowLeftButton - Indicates if the button on the left should be shown\n * @returns {ComputedRef<boolean>} response.shouldShowRightButton - Indicates if the button on the right should be shown\n * @returns {() => {}} response.scrollLeft - Used to shift the view to the left\n * @returns {() => {}} response.scrollRight - Used to shift the view to the right\n */\nexport const useFixedScroller = ({\n    contentRef,\n    containerRef,\n    leftButtonRef,\n    rightButtonRef,\n}: useFixedScrollerProps) => {\n    const offset = ref(0);\n    const currentView = ref(0);\n\n    // Calculated using 'scrollWidth' to get the full width of the content\n    const totalContentWidth = ref(0);\n    // Calculated using 'clientWidth' to get the rendered componen width\n    const visibleSpaceWidth = ref(0);\n\n    onMounted(() => {\n        observeSizeOfElement(containerRef.value, () => {\n            if (containerRef.value) {\n                // Set new width when resized\n                visibleSpaceWidth.value = containerRef.value.offsetWidth;\n                // Reset the offset and view\n                currentView.value = 0;\n                offset.value = 0;\n            }\n        });\n\n        observeSizeOfElement(contentRef.value, () => {\n            totalContentWidth.value = contentRef.value?.scrollWidth;\n        });\n    });\n\n    // Sum of the space used by the Left and Right buttons\n    // Used to calculate how much space the \"actual\" visible space is\n    const buttonsWidth = computed(() => {\n        const leftButtonWidth = leftButtonRef.value?.scrollWidth\n            ? leftButtonRef.value.scrollWidth + GRADIENT_OFFSET\n            : 0;\n        const rightButtonWidth = rightButtonRef.value?.scrollWidth\n            ? rightButtonRef.value.scrollWidth + GRADIENT_OFFSET\n            : 0;\n\n        return leftButtonWidth + rightButtonWidth;\n    });\n    // Total number of pages/views available.\n    // Calculated as \"ceil\" because if the space doesn't fit \"one view\" (irrational number) the content flows to the next view (integer).\n    const totalViews = computed(() => Math.ceil(totalContentWidth.value / visibleSpaceWidth.value) ?? 0);\n\n    // Calculation of offsets per view (index).\n    // This allows to easily swap the offset without on-the-fly calculations\n    const offsetArray = computed(() => {\n        const calculatedOffsetList = new Array(totalViews.value).fill(0);\n\n        calculatedOffsetList.forEach((_, index) => {\n            // First offset will be 0\n            if (index === 0) {\n                return;\n            }\n\n            // Calculate last\n            if (index === totalViews.value - 1) {\n                calculatedOffsetList[calculatedOffsetList.length - 1] = -(\n                    totalContentWidth.value -\n                    visibleSpaceWidth.value +\n                    OVERFLOW_CLIP_OFFSET\n                );\n\n                return;\n            }\n\n            // Calculate each offset - Move 1 view\n            const previousOffset = calculatedOffsetList[index - 1];\n            calculatedOffsetList[index] = -(visibleSpaceWidth.value + Math.abs(previousOffset) - buttonsWidth.value);\n        });\n\n        return calculatedOffsetList;\n    });\n\n    // Hide left button when it's the first view\n    const shouldShowLeftButton = computed(() => currentView.value !== 0);\n    // Hide right button if it's the last view\n    const shouldShowRightButton = computed(\n        () => offset.value >= -(totalContentWidth.value - visibleSpaceWidth.value - 1)\n    );\n\n    /**\n     * Shifts the current offset by one view to the left.\n     */\n    const scrollLeft = () => {\n        // Do nothing if it is already in page 0\n        if (currentView.value === 0) {\n            return;\n        }\n\n        currentView.value -= 1;\n        offset.value = offsetArray.value[currentView.value];\n    };\n\n    /**\n     * Shifts the current offset by one view to the right.\n     */\n    const scrollRight = () => {\n        // Do nothing if it is already in last page\n        if (currentView.value === totalViews.value - 1) {\n            return;\n        }\n\n        currentView.value += 1;\n        offset.value = offsetArray.value[currentView.value];\n    };\n\n    return {\n        offset,\n        shouldShowLeftButton,\n        shouldShowRightButton,\n\n        // Methods\n        scrollLeft,\n        scrollRight,\n    };\n};\n","<template>\n    <div ref=\"fixedScrollerRef\" class=\"b-fixed-scroller\">\n        <div class=\"b-fixed-scroller__container\">\n            <div\n                ref=\"contentRef\"\n                class=\"b-fixed-scroller__content\"\n                :style=\"{\n                    transform: `translateX(${offset}px)`,\n                    paddingTop: shouldShowLeftButton || shouldShowRightButton ? `${extraPaddingTop}px` : null,\n                }\"\n            >\n                <slot></slot>\n            </div>\n        </div>\n\n        <div v-if=\"shouldShowLeftButton\" ref=\"leftButtonRef\" class=\"b-fixed-scroller__left\">\n            <bento-button variant=\"secondary\" :aria-label=\"t('scrollLeft')\" :condensed=\"condensed\" @click=\"scrollLeft\">\n                <template #iconLeft>\n                    <chevron-left-icon svg-title=\"checked\" aria-hidden=\"true\" />\n                </template>\n            </bento-button>\n        </div>\n        <div v-if=\"shouldShowRightButton\" ref=\"rightButtonRef\" class=\"b-fixed-scroller__right\">\n            <bento-button\n                variant=\"secondary\"\n                :aria-label=\"t('scrollRight')\"\n                :condensed=\"condensed\"\n                @click=\"scrollRight\"\n            >\n                <template #iconLeft>\n                    <chevron-right-icon svg-title=\"checked\" aria-hidden=\"true\" />\n                </template>\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { ref } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { useFixedScroller } from './composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import ChevronLeftIcon from '@adyen/ui-assets-icons-16/vue/chevron-left';\n    import ChevronRightIcon from '@adyen/ui-assets-icons-16/vue/chevron-right';\n\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 contentRef = ref(null);\n    const fixedScrollerRef = ref(null);\n    const leftButtonRef = ref(null);\n    const rightButtonRef = ref(null);\n\n    defineProps({\n        /**\n         * Applies the condensed style to the buttons\n         */\n        condensed: { type: Boolean, default: false },\n        /**\n         * Padding to be applied to the top of the scroller container\n         */\n        extraPaddingTop: { type: Number, default: 0 },\n    });\n\n    const { offset, shouldShowLeftButton, shouldShowRightButton, scrollLeft, scrollRight } = useFixedScroller({\n        contentRef,\n        containerRef: fixedScrollerRef,\n        leftButtonRef,\n        rightButtonRef,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Allows to horizontally scroll content by one view at a time.\n     *\n     * @example\n     * import { FixedScroller } from '@/internal';\n     *\n     * export default {\n     *     components: { FixedScroller },\n     *     template: `\n     *          <fixed-scroller>\n     *              <div style=\"display: flex; gap: 8px;\">\n     *                  {{ Content here }}\n     *              </div>\n     *          </fixed-scroller>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./fixed-scroller.scss\" />\n"],"names":["OVERFLOW_CLIP_OFFSET","GRADIENT_OFFSET","useFixedScroller","contentRef","containerRef","leftButtonRef","rightButtonRef","offset","ref","currentView","totalContentWidth","visibleSpaceWidth","onMounted","observeSizeOfElement","_a","buttonsWidth","computed","leftButtonWidth","rightButtonWidth","_b","totalViews","offsetArray","calculatedOffsetList","_","index","previousOffset","shouldShowLeftButton","shouldShowRightButton","__default__","messages","t","useI18n","fixedScrollerRef","scrollLeft","scrollRight"],"mappings":";;;;;;;AAKA,MAAAA,IAAA,GAEAC,IAAA,IAkCOC,IAAA,CAAA;AAAA,EAA0B,YAAAC;AAAA,EAC7B,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC;AAEJ,MAAA;AACI,QAAAC,IAAAC,EAAA,CAAA,GACAC,IAAAD,EAAA,CAAA,GAGAE,IAAAF,EAAA,CAAA,GAEAG,IAAAH,EAAA,CAAA;AAEA,EAAAI,EAAA,MAAA;AACI,IAAAC,EAAAT,EAAA,OAAA,MAAA;AACI,MAAAA,EAAA,UAEIO,EAAA,QAAAP,EAAA,MAAA,aAEAK,EAAA,QAAA,GACAF,EAAA,QAAA;AAAA,IACJ,CAAA,GAGJM,EAAAV,EAAA,OAAA,MAAA;;AACI,MAAAO,EAAA,SAAAI,IAAAX,EAAA,UAAA,gBAAAW,EAAA;AAAA,IAA4C,CAAA;AAAA,EAC/C,CAAA;AAKL,QAAAC,IAAAC,EAAA,MAAA;;AACI,UAAAC,KAAAH,IAAAT,EAAA,UAAA,QAAAS,EAAA,cAAAT,EAAA,MAAA,cAAAJ,IAAA,GAGAiB,KAAAC,IAAAb,EAAA,UAAA,QAAAa,EAAA,cAAAb,EAAA,MAAA,cAAAL,IAAA;AAIA,WAAAgB,IAAAC;AAAA,EAAyB,CAAA,GAI7BE,IAAAJ,EAAA,MAAA,KAAA,KAAAN,EAAA,QAAAC,EAAA,KAAA,KAAA,CAAA,GAIAU,IAAAL,EAAA,MAAA;AACI,UAAAM,IAAA,IAAA,MAAAF,EAAA,KAAA,EAAA,KAAA,CAAA;AAEA,WAAAE,EAAA,QAAA,CAAAC,GAAAC,MAAA;AAEI,UAAAA,MAAA;AACI;AAIJ,UAAAA,MAAAJ,EAAA,QAAA,GAAA;AACI,QAAAE,EAAAA,EAAA,SAAA,CAAA,IAAA,EAAAZ,EAAA,QAAAC,EAAA,QAAAX;AAMA;AAAA;AAIJ,YAAAyB,IAAAH,EAAAE,IAAA,CAAA;AACA,MAAAF,EAAAE,CAAA,IAAA,EAAAb,EAAA,QAAA,KAAA,IAAAc,CAAA,IAAAV,EAAA;AAAA,IAAkG,CAAA,GAGtGO;AAAA,EAAO,CAAA,GAIXI,IAAAV,EAAA,MAAAP,EAAA,UAAA,CAAA,GAEAkB,IAAAX;AAAA,IAA8B,MAAAT,EAAA,SAAA,EAAAG,EAAA,QAAAC,EAAA,QAAA;AAAA,EACkD;AA6BhF,SAAA;AAAA,IAAO,QAAAJ;AAAA,IACH,sBAAAmB;AAAA,IACA,uBAAAC;AAAA;AAAA,IACA,YA1BJ,MAAA;AAEI,MAAAlB,EAAA,UAAA,MAIAA,EAAA,SAAA,GACAF,EAAA,QAAAc,EAAA,MAAAZ,EAAA,KAAA;AAAA,IAAkD;AAAA,IAsBlD,aAhBJ,MAAA;AAEI,MAAAA,EAAA,UAAAW,EAAA,QAAA,MAIAX,EAAA,SAAA,GACAF,EAAA,QAAAc,EAAA,MAAAZ,EAAA,KAAA;AAAA,IAAkD;AAAA,EAUlD;AAER;;;;;GClEImB,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;AA9CA,UAAA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAEA5B,IAAAK,EAAA,IAAA,GACAwB,IAAAxB,EAAA,IAAA,GACAH,IAAAG,EAAA,IAAA,GACAF,IAAAE,EAAA,IAAA,GAaA,EAAA,QAAAD,GAAA,sBAAAmB,GAAA,uBAAAC,GAAA,YAAAM,GAAA,aAAAC,EAAA,IAAAhC,EAAA;AAAA,MAA0G,YAAAC;AAAA,MACtG,cAAA6B;AAAA,MACc,eAAA3B;AAAA,MACd,gBAAAC;AAAA,IACA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{footer-actions.32891b25.js → footer-actions.a1e09b4f.js}

@@ -1,7 +1,7 @@
 import { defineComponent as i, toRefs as r, computed as l, onMounted as c } from "vue";
-import { B as _ } from "./index.d97166c6.js";
-import { B as u } from "./button.e5f5638f.js";
-import { B as d } from "./button-actions.a03a672f.js";
+import { B as _ } from "./index.dd30e538.js";
+import { B as u } from "./button.9d6435ae.js";
+import { B as d } from "./button-actions.81db18e8.js";
 import { n as p } from "./_plugin-vue2_normalizer.71e2aa87.js";
 import "../assets/footer-actions.css";
 const f = {}, g = /* @__PURE__ */ i({
@@ -95,4 +95,4 @@ const w = b.exports;
 export {
   w as F
 };
-//# sourceMappingURL=footer-actions.32891b25.js.map
+//# sourceMappingURL=footer-actions.a1e09b4f.js.map

package/dist/chunks/{footer-actions.32891b25.js.map → footer-actions.a1e09b4f.js.map}

@@ -1 +1 @@
-{"version":3,"file":"footer-actions.32891b25.js","sources":["../../src/components/internal/footer-actions/footer-actions.vue"],"sourcesContent":["<template>\n    <div class=\"b-footer-actions\">\n        <div class=\"b-footer-actions__wrapper\">\n            <bento-typography v-if=\"actionsLabel\" class=\"b-footer-actions__label\" el=\"span\" variant=\"body\" stronger>\n                {{ actionsLabel }}\n            </bento-typography>\n\n            <bento-button-actions\n                v-if=\"alignedActions.leftAligned\"\n                class=\"b-footer-actions__left-group\"\n                :actions=\"alignedActions.leftAligned\"\n                layout=\"buttons-start\"\n            ></bento-button-actions>\n\n            <bento-button-actions\n                class=\"b-footer-actions__right-group\"\n                :actions=\"alignedActions.rightAligned\"\n                layout=\"buttons-end\"\n            ></bento-button-actions>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoTypography } from '@/components/typography';\n    import { computed, onMounted, PropType, toRefs } from 'vue';\n    import { BentoButtonActions, BentoButtonActionsList, BentoButtonVariant } from '@/components/button';\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         * But you may change the color of 1-st action to red with 'critial' key\n         * Not more than 3 action buttons can be provided\n         * Or 2 action buttons and 1 Label for them\n         *\n         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * `title`: Button's text.\n         *\n         * `event`: Event triggered when clicking the Button.\n         *\n         * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n         *\n         * ```\n         * [{\n         *   title: 'Primary',2\n         *   event: () => { ... },\n         *   icon: FourPeopleIcon\n         * }, {\n         *   title: 'Secondary',\n         *   event: () => { ... }\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            required: true,\n        },\n        /**\n         * Text label that is displayed left to the action buttons\n         */\n        actionsLabel: {\n            type: String,\n            default: null,\n        },\n        /**\n         * If passed - sets first button color to red\n         */\n        destructiveActions: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    const { actions, destructiveActions } = toRefs(props);\n\n    const alignedActions = computed(() => {\n        const rightAlignedButtons =\n            actions.value.length < 3 ? actions.value : actions.value.slice(0, actions.value.length - 1);\n\n        // Add red color to the 1-st Action button\n        rightAlignedButtons[0].critical = destructiveActions.value || rightAlignedButtons[0].critical;\n\n        return {\n            leftAligned:\n                actions.value.length === 3\n                    ? [\n                          {\n                              ...actions.value[actions.value.length - 1],\n                              variant: BentoButtonVariant.SECONDARY,\n                          },\n                      ]\n                    : null,\n            rightAligned: [...rightAlignedButtons],\n        };\n    });\n\n    onMounted(() => {\n        if (props.actions && props.actions.length > 3) {\n            throw new Error('Not more than 3 action buttons may be provided to Bento Modal default variant');\n        }\n\n        if (props.actionsLabel && props.actions && props.actions.length > 2) {\n            throw new Error(\n                'Not more than 2 action buttons may be provided with actions label to Bento Modal default variant'\n            );\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n    * Internal component to handle the logic of displaying actions in default Modal and Sidepanel\n\n    * @example\n    * import { FooterActions } from '@/components/internal/footer-actions';\n    *\n    * export default {\n    *     components: { FooterActions },\n    *     template: `\n    *          <footer-actions :actions=\"BentoButtonActionsList\" actions-label=\"Label\" :destructive-actions=\"true\" />\n    *     `\n    * }\n    */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./footer-actions.scss\" />\n"],"names":["__default__","actions","destructiveActions","toRefs","props","alignedActions","computed","rightAlignedButtons","BentoButtonVariant","onMounted"],"mappings":";;;;;;AA+HI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAlDA,EAAA,SAAAC,GAAA,oBAAAC,EAAA,IAAAC,EAAAC,CAAA,GAEAC,IAAAC,EAAA,MAAA;AACI,YAAAC,IAAAN,EAAA,MAAA,SAAA,IAAAA,EAAA,QAAAA,EAAA,MAAA,MAAA,GAAAA,EAAA,MAAA,SAAA,CAAA;AAIA,aAAAM,EAAA,CAAA,EAAA,WAAAL,EAAA,SAAAK,EAAA,CAAA,EAAA,UAEA;AAAA,QAAO,aAAAN,EAAA,MAAA,WAAA,IAAA;AAAA,UAGO;AAAA,YACI,GAAAA,EAAA,MAAAA,EAAA,MAAA,SAAA,CAAA;AAAA,YAC6C,SAAAO,EAAA;AAAA,UACb;AAAA,QAChC,IAAA;AAAA,QAEJ,cAAA,CAAA,GAAAD,CAAA;AAAA,MAC2B;AAAA,IACzC,CAAA;AAGJ,WAAAE,EAAA,MAAA;AACI,UAAAL,EAAA,WAAAA,EAAA,QAAA,SAAA;AACI,cAAA,IAAA,MAAA,+EAAA;AAGJ,UAAAA,EAAA,gBAAAA,EAAA,WAAAA,EAAA,QAAA,SAAA;AACI,cAAA,IAAA;AAAA,UAAU;AAAA,QACN;AAAA,IAER,CAAA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"footer-actions.a1e09b4f.js","sources":["../../src/components/internal/footer-actions/footer-actions.vue"],"sourcesContent":["<template>\n    <div class=\"b-footer-actions\">\n        <div class=\"b-footer-actions__wrapper\">\n            <bento-typography v-if=\"actionsLabel\" class=\"b-footer-actions__label\" el=\"span\" variant=\"body\" stronger>\n                {{ actionsLabel }}\n            </bento-typography>\n\n            <bento-button-actions\n                v-if=\"alignedActions.leftAligned\"\n                class=\"b-footer-actions__left-group\"\n                :actions=\"alignedActions.leftAligned\"\n                layout=\"buttons-start\"\n            ></bento-button-actions>\n\n            <bento-button-actions\n                class=\"b-footer-actions__right-group\"\n                :actions=\"alignedActions.rightAligned\"\n                layout=\"buttons-end\"\n            ></bento-button-actions>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoTypography } from '@/components/typography';\n    import { computed, onMounted, PropType, toRefs } from 'vue';\n    import { BentoButtonActions, BentoButtonActionsList, BentoButtonVariant } from '@/components/button';\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         * But you may change the color of 1-st action to red with 'critial' key\n         * Not more than 3 action buttons can be provided\n         * Or 2 action buttons and 1 Label for them\n         *\n         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * `title`: Button's text.\n         *\n         * `event`: Event triggered when clicking the Button.\n         *\n         * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n         *\n         * ```\n         * [{\n         *   title: 'Primary',2\n         *   event: () => { ... },\n         *   icon: FourPeopleIcon\n         * }, {\n         *   title: 'Secondary',\n         *   event: () => { ... }\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            required: true,\n        },\n        /**\n         * Text label that is displayed left to the action buttons\n         */\n        actionsLabel: {\n            type: String,\n            default: null,\n        },\n        /**\n         * If passed - sets first button color to red\n         */\n        destructiveActions: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    const { actions, destructiveActions } = toRefs(props);\n\n    const alignedActions = computed(() => {\n        const rightAlignedButtons =\n            actions.value.length < 3 ? actions.value : actions.value.slice(0, actions.value.length - 1);\n\n        // Add red color to the 1-st Action button\n        rightAlignedButtons[0].critical = destructiveActions.value || rightAlignedButtons[0].critical;\n\n        return {\n            leftAligned:\n                actions.value.length === 3\n                    ? [\n                          {\n                              ...actions.value[actions.value.length - 1],\n                              variant: BentoButtonVariant.SECONDARY,\n                          },\n                      ]\n                    : null,\n            rightAligned: [...rightAlignedButtons],\n        };\n    });\n\n    onMounted(() => {\n        if (props.actions && props.actions.length > 3) {\n            throw new Error('Not more than 3 action buttons may be provided to Bento Modal default variant');\n        }\n\n        if (props.actionsLabel && props.actions && props.actions.length > 2) {\n            throw new Error(\n                'Not more than 2 action buttons may be provided with actions label to Bento Modal default variant'\n            );\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n    * Internal component to handle the logic of displaying actions in default Modal and Sidepanel\n\n    * @example\n    * import { FooterActions } from '@/components/internal/footer-actions';\n    *\n    * export default {\n    *     components: { FooterActions },\n    *     template: `\n    *          <footer-actions :actions=\"BentoButtonActionsList\" actions-label=\"Label\" :destructive-actions=\"true\" />\n    *     `\n    * }\n    */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./footer-actions.scss\" />\n"],"names":["__default__","actions","destructiveActions","toRefs","props","alignedActions","computed","rightAlignedButtons","BentoButtonVariant","onMounted"],"mappings":";;;;;;AA+HI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAlDA,EAAA,SAAAC,GAAA,oBAAAC,EAAA,IAAAC,EAAAC,CAAA,GAEAC,IAAAC,EAAA,MAAA;AACI,YAAAC,IAAAN,EAAA,MAAA,SAAA,IAAAA,EAAA,QAAAA,EAAA,MAAA,MAAA,GAAAA,EAAA,MAAA,SAAA,CAAA;AAIA,aAAAM,EAAA,CAAA,EAAA,WAAAL,EAAA,SAAAK,EAAA,CAAA,EAAA,UAEA;AAAA,QAAO,aAAAN,EAAA,MAAA,WAAA,IAAA;AAAA,UAGO;AAAA,YACI,GAAAA,EAAA,MAAAA,EAAA,MAAA,SAAA,CAAA;AAAA,YAC6C,SAAAO,EAAA;AAAA,UACb;AAAA,QAChC,IAAA;AAAA,QAEJ,cAAA,CAAA,GAAAD,CAAA;AAAA,MAC2B;AAAA,IACzC,CAAA;AAGJ,WAAAE,EAAA,MAAA;AACI,UAAAL,EAAA,WAAAA,EAAA,QAAA,SAAA;AACI,cAAA,IAAA,MAAA,+EAAA;AAGJ,UAAAA,EAAA,gBAAAA,EAAA,WAAAA,EAAA,QAAA,SAAA;AACI,cAAA,IAAA;AAAA,UAAU;AAAA,QACN;AAAA,IAER,CAAA;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{index.ec632d95.js → index.15b088b9.js}

@@ -1,13 +1,13 @@
 import { defineComponent as r, computed as a, useSlots as O, useAttrs as E, inject as f, ref as I, toRefs as L } from "vue";
-import { c as x, a as m, b as F } from "./index.94acf214.js";
-import { B as k, a as v } from "./index.d97166c6.js";
+import { c as x, a as m, b as F } from "./index.671768a1.js";
+import { B as k, a as v } from "./index.dd30e538.js";
 import { n as l } from "./_plugin-vue2_normalizer.71e2aa87.js";
-import { a as R } from "./button.e5f5638f.js";
+import { a as R } from "./button.9d6435ae.js";
 import { C as $ } from "./cross.04678d81.js";
 import { u as w } from "./use-has-slot.fbeb19ec.js";
 import { u as D } from "./aria-label.ac9651a5.js";
-import { c as b, B as N } from "./button-actions.a03a672f.js";
-import "../assets/index37.css";
+import { c as b, B as N } from "./button-actions.81db18e8.js";
+import "../assets/index28.css";
 const V = r({
   components: { BentoTypography: k },
   props: {
@@ -289,4 +289,4 @@ export {
   G as P,
   _t as a
 };
-//# sourceMappingURL=index.ec632d95.js.map
+//# sourceMappingURL=index.15b088b9.js.map