@adyen/bento-vue2 1.26.0 → 1.28.0

package/dist/chunks/dropdown.yhhQCKve.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.yhhQCKve.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        :aria-label=\"ariaLabel\"\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        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         * 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--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            :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, label } = toRefs(props);\n    const computedAriaLabel = useAriaLabel({\n        // TODO: take ariaLabel ref away when aria-label prop is removed\n        ariaLabel: ariaLabel || (ariaLabelAttribute as Ref<string>),\n        label,\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) {\n            const selectedItems = (props?.value as BentoListboxMultiSelectValue)?.length;\n            const total = isMultiLevelSelect.value ? flattenedItemsList.value.length : items.value.length;\n\n            // Display count always - show \"all\" only when is not external filtering (hasMoreItems = true)\n            return !props.hasMoreItems && 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","total","ariaDescribedBy","clickOutsideDropdown","textboxKeyboardNavigationListeners","listboxKeyboardNavigationListeners","listboxListeners","deprecate"],"mappings":"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","x_google_ignoreList":[3,4]}

package/dist/chunks/empty-state.BqVOj4v1.js

@@ -0,0 +1,151 @@
+import { defineComponent as D, ref as v, computed as l, watch as d } from "vue";
+import { B as L } from "./button.DhAUh5JA.js";
+import { c as C, B as b } from "./typography.Bjtu3Gca.js";
+import { o as A } from "./resize.Bqks3WUm.js";
+import { n as y } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/empty-state.css";
+const p = (e, s, r) => {
+  const a = e[s];
+  return a ? typeof a == "function" ? a() : Promise.resolve(a) : new Promise((n, o) => {
+    (typeof queueMicrotask == "function" ? queueMicrotask : setTimeout)(
+      o.bind(
+        null,
+        new Error(
+          "Unknown variable dynamic import: " + s + (s.split("/").length !== r ? ". Note that variables only represent file names one level deep." : "")
+        )
+      )
+    );
+  });
+};
+var t = /* @__PURE__ */ ((e) => (e.FULL_PAGE = "full-page", e.EMBEDDED = "embedded", e.BASIC = "basic", e.CONDENSED = "condensed", e))(t || {}), _ = /* @__PURE__ */ ((e) => (e.GENERIC_USE1 = "1-generic-use", e.GENERIC_USE2 = "2-generic-use", e.GENERIC_USE3 = "3-generic-use", e.GENERIC_USE4 = "4-generic-use", e.ADDING_PAYMENT_METHOD = "adding-payment-methods", e.ADYEN_GIVING = "adyen-giving", e.INTERNAL_ERROR = "internal-error", e.NO_RESULTS_FOUND = "no-results-found", e.NOTIFICATIONS_CLEARED = "notifications-cleared", e.PAGE_NOT_FOUND = "page-not-found", e.PLANNED_MAINTENANCE = "planned-maintenance", e.REFERRALS = "referrals", e.SUCCESS = "success", e.UPLOAD_FILES = "upload-files", e.WRONG_ENVIRONMENT = "wrong-environment", e))(_ || {}), c = /* @__PURE__ */ ((e) => (e.SMALL = "small", e.LARGE = "large", e[e.NULL = null] = "NULL", e))(c || {});
+const O = {}, h = /* @__PURE__ */ D({
+  ...O,
+  __name: "empty-state",
+  props: {
+    /**
+     * Defines the button at the end of the component.
+     */
+    action: {
+      type: Object,
+      default: null,
+      validator: (e) => !!(e.title && e.event)
+    },
+    /**
+     * The empty state description.
+     * Gives additional details to the issue.
+     * This can be used or the default slot
+     */
+    description: {
+      type: String,
+      default: null
+    },
+    /**
+     * Sets the heading HTML DOM element.
+     * @values h1, h2, h3, h4, h5, h6, div, p, span
+     */
+    headingEl: {
+      type: String,
+      default: null,
+      validator: (e) => Object.values(C).includes(e)
+    },
+    /**
+     * Name of the illustration for the empty state.
+     */
+    image: {
+      type: String,
+      default: null,
+      validator: (e) => Object.values(_).includes(e)
+    },
+    /**
+     * The empty state heading.
+     * Should clearly explain the issue.
+     */
+    title: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Types of different empty states
+     * @values full-page, embedded, basic, condensed
+     */
+    variant: {
+      type: String,
+      default: "basic",
+      validator: (e) => Object.values(t).includes(e)
+    }
+  },
+  setup(e) {
+    const s = e, r = 740, a = {
+      [t.FULL_PAGE]: "h2",
+      [t.EMBEDDED]: "h3",
+      [t.BASIC]: "h3",
+      [t.CONDENSED]: "div"
+    }, n = v(null), o = v(0), u = l(() => o.value < r), i = l(() => {
+      switch (s.variant) {
+        case t.FULL_PAGE:
+          return u.value ? c.SMALL : c.LARGE;
+        case t.EMBEDDED:
+          return u.value ? null : c.SMALL;
+        default:
+          return null;
+      }
+    }), g = v("");
+    d(
+      [() => s.image, i],
+      async () => {
+        s.image && i.value && (i.value === "small" ? g.value = (await p(/* @__PURE__ */ Object.assign({ "./assets/small/1-generic-use.svg": () => import("./1-generic-use.CZhwP2Yc.js"), "./assets/small/2-generic-use.svg": () => import("./2-generic-use.CNKjB4B7.js"), "./assets/small/3-generic-use.svg": () => import("./3-generic-use.BLEzR04g.js"), "./assets/small/4-generic-use.svg": () => import("./4-generic-use.CULEpvgj.js"), "./assets/small/adding-payment-methods.svg": () => import("./adding-payment-methods.Dle8zt43.js"), "./assets/small/adyen-giving.svg": () => import("./adyen-giving.Ffw_DlJK.js"), "./assets/small/internal-error.svg": () => import("./internal-error.BmrwJFpR.js"), "./assets/small/no-results-found.svg": () => import("./no-results-found.Bg_ZcEid.js"), "./assets/small/notifications-cleared.svg": () => import("./notifications-cleared.BMZk37uf.js"), "./assets/small/page-not-found.svg": () => import("./page-not-found.COJLPVaU.js"), "./assets/small/planned-maintenance.svg": () => import("./planned-maintenance.C61sWB9h.js"), "./assets/small/referrals.svg": () => import("./referrals.aX8WZigH.js"), "./assets/small/success.svg": () => import("./success.nNwxJRBS.js"), "./assets/small/upload-files.svg": () => import("./upload-files.jTQY6y2X.js"), "./assets/small/wrong-environment.svg": () => import("./wrong-environment.BOsyKdRI.js") }), `./assets/small/${s.image}.svg`, 4)).default : g.value = (await p(/* @__PURE__ */ Object.assign({ "./assets/large/1-generic-use.svg": () => import("./1-generic-use.R6x8PEGA.js"), "./assets/large/2-generic-use.svg": () => import("./2-generic-use.w0fUhovx.js"), "./assets/large/3-generic-use.svg": () => import("./3-generic-use.D3NFHgI4.js"), "./assets/large/4-generic-use.svg": () => import("./4-generic-use.D82y3n39.js"), "./assets/large/adding-payment-methods.svg": () => import("./adding-payment-methods.BJZLPxtM.js"), "./assets/large/adyen-giving.svg": () => import("./adyen-giving.LiKHj_jY.js"), "./assets/large/internal-error.svg": () => import("./internal-error.BLZodVBE.js"), "./assets/large/no-results-found.svg": () => import("./no-results-found.BqvYsBR6.js"), "./assets/large/notifications-cleared.svg": () => import("./notifications-cleared.C7W9ZXY7.js"), "./assets/large/page-not-found.svg": () => import("./page-not-found.DWW6W-PZ.js"), "./assets/large/planned-maintenance.svg": () => import("./planned-maintenance.jmWYTdet.js"), "./assets/large/referrals.svg": () => import("./referrals.BvtT-kQS.js"), "./assets/large/success.svg": () => import("./success.DhioLvPD.js"), "./assets/large/upload-files.svg": () => import("./upload-files.5wQwbfkp.js"), "./assets/large/wrong-environment.svg": () => import("./wrong-environment.BiHTPtbJ.js") }), `./assets/large/${s.image}.svg`, 4)).default);
+      },
+      { immediate: !0 }
+    );
+    const f = l(() => ({
+      "b-empty-state__image--small": i.value === "small",
+      "b-empty-state__image--large": i.value === "large"
+    })), m = l(
+      () => s.headingEl || a[s.variant]
+    ), E = l(() => ({
+      el: m.value,
+      medium: s.variant !== t.CONDENSED,
+      strongest: s.variant === t.CONDENSED,
+      variant: s.variant === t.CONDENSED ? "body" : "title"
+    })), N = l(() => {
+      switch (s.variant) {
+        case t.FULL_PAGE:
+          return "primary";
+        case t.CONDENSED:
+          return "tertiary";
+        default:
+          return "secondary";
+      }
+    });
+    return d(n, () => {
+      A(n.value, () => {
+        n.value && (o.value = n.value.offsetWidth);
+      });
+    }), { __sfc: !0, WIDTH_BREAKPOINT: r, HEADING_ELEMENT_MAP: a, props: s, rootRef: n, containerWidth: o, isBelowBreakpoint: u, imageVariant: i, imageSvg: g, imageConditionalClasses: f, headingElement: m, headingProps: E, actionVariant: N, BentoButton: L, BentoTypography: b };
+  }
+});
+var R = function() {
+  var s = this, r = s._self._c, a = s._self._setupProxy;
+  return r("div", { ref: "rootRef", staticClass: "b-empty-state" }, [s.image && a.imageVariant ? r("img", { staticClass: "b-empty-state__image", class: a.imageConditionalClasses, attrs: { alt: "", src: a.imageSvg } }) : s._e(), r(a.BentoTypography, s._b({ staticClass: "b-empty-state__title" }, "bento-typography", a.headingProps, !1), [s._t("title", function() {
+    return [s._v(" " + s._s(s.title) + " ")];
+  })], 2), s.variant !== "condensed" ? r(a.BentoTypography, { staticClass: "b-empty-state__details", attrs: { variant: "body" } }, [s._t("default", function() {
+    return [s._v(" " + s._s(s.description) + " ")];
+  })], 2) : s._e(), s.action ? r(a.BentoButton, { attrs: { type: "button", variant: a.actionVariant }, on: { click: s.action.event }, scopedSlots: s._u([s.action.icon ? { key: "iconLeft", fn: function() {
+    return [r(s.action.icon, { tag: "component", attrs: { "svg-title": s.action.title } })];
+  }, proxy: !0 } : null], null, !0) }, [s._v(" " + s._s(s.action.title) + " ")]) : s._e()], 1);
+}, T = [], G = /* @__PURE__ */ y(
+  h,
+  R,
+  T,
+  !1,
+  null,
+  "f86ead8f"
+);
+const F = G.exports;
+export {
+  F as B,
+  t as a,
+  _ as b,
+  c
+};
+//# sourceMappingURL=empty-state.BqVOj4v1.js.map

package/dist/chunks/empty-state.BqVOj4v1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.BqVOj4v1.js","sources":["../../src/components/empty-state/empty-state.types.ts","../../src/components/empty-state/empty-state.vue"],"sourcesContent":["export enum BentoEmptyStateVariant {\n    FULL_PAGE = 'full-page',\n    EMBEDDED = 'embedded',\n    BASIC = 'basic',\n    CONDENSED = 'condensed',\n}\n\nexport enum BentoEmptyStateImage {\n    GENERIC_USE1 = '1-generic-use',\n    GENERIC_USE2 = '2-generic-use',\n    GENERIC_USE3 = '3-generic-use',\n    GENERIC_USE4 = '4-generic-use',\n    ADDING_PAYMENT_METHOD = 'adding-payment-methods',\n    ADYEN_GIVING = 'adyen-giving',\n    INTERNAL_ERROR = 'internal-error',\n    NO_RESULTS_FOUND = 'no-results-found',\n    NOTIFICATIONS_CLEARED = 'notifications-cleared',\n    PAGE_NOT_FOUND = 'page-not-found',\n    PLANNED_MAINTENANCE = 'planned-maintenance',\n    REFERRALS = 'referrals',\n    SUCCESS = 'success',\n    UPLOAD_FILES = 'upload-files',\n    WRONG_ENVIRONMENT = 'wrong-environment',\n}\n\nexport enum BentoEmptyStateImageVariant {\n    SMALL = 'small',\n    LARGE = 'large',\n    NULL = null,\n}\n","<template>\n    <div ref=\"rootRef\" class=\"b-empty-state\">\n        <!-- illustration -->\n        <img\n            v-if=\"image && imageVariant\"\n            alt=\"\"\n            class=\"b-empty-state__image\"\n            :class=\"imageConditionalClasses\"\n            :src=\"imageSvg\"\n        />\n\n        <!-- heading -->\n        <bento-typography v-bind=\"headingProps\" class=\"b-empty-state__title\">\n            <slot name=\"title\">\n                {{ title }}\n            </slot>\n        </bento-typography>\n\n        <!-- details -->\n        <bento-typography v-if=\"variant !== 'condensed'\" variant=\"body\" class=\"b-empty-state__details\">\n            <slot>\n                {{ description }}\n            </slot>\n        </bento-typography>\n\n        <!-- action -->\n        <bento-button v-if=\"action\" type=\"button\" :variant=\"actionVariant\" @click=\"action.event\">\n            <template v-if=\"action.icon\" #iconLeft>\n                <component :is=\"action.icon\" :svg-title=\"action.title\"></component>\n            </template>\n            {{ action.title }}\n        </bento-button>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, ref, watch } from 'vue';\n\n    import { BentoButton, BentoButtonActionObject, BentoButtonVariant } from '@/components/button';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n\n    import { BentoEmptyStateImage, BentoEmptyStateImageVariant, BentoEmptyStateVariant } from './empty-state.types';\n\n    const WIDTH_BREAKPOINT = 740;\n\n    const HEADING_ELEMENT_MAP = {\n        [BentoEmptyStateVariant.FULL_PAGE]: 'h2',\n        [BentoEmptyStateVariant.EMBEDDED]: 'h3',\n        [BentoEmptyStateVariant.BASIC]: 'h3',\n        [BentoEmptyStateVariant.CONDENSED]: 'div',\n    };\n\n    const props = defineProps({\n        /**\n         * Defines the button at the end of the component.\n         */\n        action: {\n            type: Object as PropType<BentoButtonActionObject>,\n            default: null,\n            validator: (value: BentoButtonActionObject) => Boolean(value.title && value.event),\n        },\n\n        /**\n         * The empty state description.\n         * Gives additional details to the issue.\n         * This can be used or the default slot\n         */\n        description: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * Sets the heading HTML DOM element.\n         * @values h1, h2, h3, h4, h5, h6, div, p, span\n         */\n        headingEl: {\n            type: String as PropType<`${BentoTypographyElement}`>,\n            default: null,\n            validator: (value: BentoTypographyElement) => Object.values(BentoTypographyElement).includes(value),\n        },\n\n        /**\n         * Name of the illustration for the empty state.\n         */\n        image: {\n            type: String as PropType<`${BentoEmptyStateImage}`>,\n            default: null,\n            validator: (value: BentoEmptyStateImage) => Object.values(BentoEmptyStateImage).includes(value),\n        },\n\n        /**\n         * The empty state heading.\n         * Should clearly explain the issue.\n         */\n        title: {\n            type: String,\n            default: '',\n        },\n\n        /**\n         * Types of different empty states\n         * @values full-page, embedded, basic, condensed\n         */\n        variant: {\n            type: String as PropType<`${BentoEmptyStateVariant}`>,\n            default: 'basic',\n            validator: (value: BentoEmptyStateVariant) => Object.values(BentoEmptyStateVariant).includes(value),\n        },\n    });\n\n    const rootRef = ref<HTMLDivElement>(null);\n    const containerWidth = ref(0);\n\n    const isBelowBreakpoint = computed(() => containerWidth.value < WIDTH_BREAKPOINT);\n\n    const imageVariant = computed<BentoEmptyStateImageVariant>(() => {\n        switch (props.variant) {\n            case BentoEmptyStateVariant.FULL_PAGE:\n                return isBelowBreakpoint.value ? BentoEmptyStateImageVariant.SMALL : BentoEmptyStateImageVariant.LARGE;\n            case BentoEmptyStateVariant.EMBEDDED:\n                return isBelowBreakpoint.value ? null : BentoEmptyStateImageVariant.SMALL;\n            default:\n                return null;\n        }\n    });\n\n    const imageSvg = ref('');\n\n    watch(\n        [() => props.image, imageVariant],\n        async () => {\n            if (props.image && imageVariant.value) {\n                // rollup only supports one variable in a dynamic path\n                /* v8 ignore next 4 */\n                if (imageVariant.value === 'small') {\n                    imageSvg.value = (await import(`./assets/small/${props.image}.svg`)).default;\n                } else {\n                    imageSvg.value = (await import(`./assets/large/${props.image}.svg`)).default;\n                }\n            }\n        },\n        { immediate: true }\n    );\n\n    const imageConditionalClasses = computed(() => ({\n        'b-empty-state__image--small': imageVariant.value === 'small',\n        'b-empty-state__image--large': imageVariant.value === 'large',\n    }));\n\n    const headingElement = computed(\n        () => (props.headingEl || HEADING_ELEMENT_MAP[props.variant]) as BentoTypographyElement\n    );\n\n    const headingProps = computed(() => ({\n        el: headingElement.value,\n        medium: props.variant !== BentoEmptyStateVariant.CONDENSED,\n        strongest: props.variant === BentoEmptyStateVariant.CONDENSED,\n        variant: (props.variant === BentoEmptyStateVariant.CONDENSED ? 'body' : 'title') as BentoTypographyVariant,\n    }));\n\n    const actionVariant = computed<`${BentoButtonVariant}`>(() => {\n        switch (props.variant) {\n            case BentoEmptyStateVariant.FULL_PAGE:\n                return 'primary';\n            case BentoEmptyStateVariant.CONDENSED:\n                return 'tertiary';\n            default:\n                return 'secondary';\n        }\n    });\n\n    // Lifecycle\n    watch(rootRef, () => {\n        // Use ResizeObserver so that image is only fetched if needed (visible).\n        observeSizeOfElement(rootRef.value, () => {\n            if (rootRef.value) {\n                containerWidth.value = rootRef.value.offsetWidth;\n            }\n        });\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Empty states are moments in the user experience when there is nothing to display.\n     * This component can be used to provide:\n     * - Information about system status\n     * - Contextual learning cues\n     * - Direct pathways for key tasks\n     *\n     * @example\n     * import { BentoEmptyState } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoEmptyState },\n     *     template: `\n     *          <bento-empty-state\n     *              title=\"No results were found\"\n     *              image=\"no-results-found\"\n     *              variant=\"full-page\"\n     *              :action=\"{ title: 'Reset filters', event: () => {} }\"\n     *          >\n     *              Try a different term or reset search filters\n     *          </bento-empty-state>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./empty-state.scss\" />\n"],"names":["BentoEmptyStateVariant","BentoEmptyStateVariant2","BentoEmptyStateImage","BentoEmptyStateImage2","BentoEmptyStateImageVariant","BentoEmptyStateImageVariant2","__default__","WIDTH_BREAKPOINT","HEADING_ELEMENT_MAP","rootRef","ref","containerWidth","isBelowBreakpoint","computed","imageVariant","props","imageSvg","watch","__variableDynamicImportRuntimeHelper","imageConditionalClasses","headingElement","headingProps","actionVariant","observeSizeOfElement"],"mappings":"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"}

package/dist/chunks/error-message.BSxUoE3_.js

@@ -0,0 +1,107 @@
+import { defineComponent as o, computed as i } from "vue";
+import { B as _ } from "./info-icon.CLguYHRt.js";
+import { B as a } from "./typography.Bjtu3Gca.js";
+import { u as n } from "./i18n.BQkEbtPM.js";
+import { n as l } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { C as p } from "./cross-circle-fill.CnYH4R_h.js";
+import "../assets/error-message.css";
+const c = {
+  "en-US": {
+    optional: "optional",
+    required: "required"
+  }
+}, f = {
+  i18n: { messages: c }
+}, d = /* @__PURE__ */ o({
+  ...f,
+  __name: "field-label",
+  props: {
+    /**
+     * Renders the dropdown with a condensed style.
+     */
+    condensed: { type: Boolean, default: !1 },
+    /**
+     * Field label
+     */
+    label: {
+      type: String,
+      default: null
+    },
+    /**
+     * Sets the field as optional
+     */
+    optional: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Sets the field as required
+     */
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Adds a info icon next to the label to display the passed tooltip message.
+     */
+    tooltipText: {
+      type: String,
+      default: null
+    }
+  },
+  setup(r) {
+    const e = r, { t: s } = n(), t = i(() => ({ "b-field-label--condensed": e.condensed }));
+    return { __sfc: !0, props: e, t: s, conditionalClasses: t, BentoInfoIcon: _, BentoTypography: a };
+  }
+});
+var u = function() {
+  var e = this, s = e._self._c, t = e._self._setupProxy;
+  return s("label", { staticClass: "b-field-label", class: t.conditionalClasses }, [s(t.BentoTypography, { attrs: { el: "span", stronger: "" } }, [e.label ? [e._v(" " + e._s(e.label))] : [e._t("default")]], 2), e.tooltipText ? s(t.BentoTypography, { staticClass: "b-field-label__tooltip-wrapper", attrs: { el: "span" } }, [s(t.BentoInfoIcon, { staticClass: "b-field-label__tooltip", attrs: { "tooltip-text": e.tooltipText } })], 1) : e._e(), e.required ? s(t.BentoTypography, { staticClass: "b-field-label__requirement", attrs: { el: "span" } }, [e._v("(" + e._s(t.t("required")) + ")")]) : e.optional ? s(t.BentoTypography, { staticClass: "b-field-label__requirement", attrs: { el: "span" } }, [e._v("(" + e._s(t.t("optional")) + ")")]) : e._e()], 1);
+}, m = [], b = /* @__PURE__ */ l(
+  d,
+  u,
+  m,
+  !1,
+  null,
+  "2ce625aa"
+);
+const S = b.exports, g = {
+  "en-US": {
+    error: "Error"
+  }
+}, y = {
+  i18n: { messages: g },
+  name: "error-message"
+}, C = /* @__PURE__ */ o({
+  ...y,
+  props: {
+    /**
+     * The rendered error message
+     */
+    errorMessage: {
+      type: String,
+      required: !0
+    }
+  },
+  setup(r) {
+    const { t: e } = n();
+    return { __sfc: !0, t: e, BentoTypography: a, CrossCircleIcon: p };
+  }
+});
+var v = function() {
+  var e = this, s = e._self._c, t = e._self._setupProxy;
+  return s(t.BentoTypography, { staticClass: "b-error-message", attrs: { id: e.$attrs.id, el: "span", "aria-live": "polite" } }, [s("div", { staticClass: "b-error-message__icon" }, [s(t.CrossCircleIcon, { attrs: { "svg-title": t.t("error") } })], 1), e._v(" " + e._s(e.errorMessage) + " ")]);
+}, B = [], x = /* @__PURE__ */ l(
+  C,
+  v,
+  B,
+  !1,
+  null,
+  "2490b85a"
+);
+const E = x.exports;
+export {
+  E,
+  S as F
+};
+//# sourceMappingURL=error-message.BSxUoE3_.js.map

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

@@ -1 +1 @@
-{"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;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"error-message.BSxUoE3_.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","t","useI18n","conditionalClasses","computed","props","__default__","messages"],"mappings":";;;;;;;;;;;;GAmFIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBArBA,EAAA,GAAAC,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,GAAAN,EAAA,IAAAC,EAAA;;;;;;;;;;;;;;;;"}

package/dist/chunks/events.CMzGybJJ.js

@@ -0,0 +1,47 @@
+(() => {
+  const e = {
+    capture: !1,
+    passive: !1,
+    once: !1
+  };
+  try {
+    const t = {
+      get capture() {
+        return e.capture = !0, !1;
+      },
+      get passive() {
+        return e.passive = !0, !1;
+      },
+      get once() {
+        return e.once = !0, !1;
+      }
+    };
+    document.addEventListener("test", null, t), document.removeEventListener("test", null, t);
+  } catch {
+  }
+  return e;
+})();
+function c(e, t, o, u) {
+  if (t.indexOf(" ") >= 0) {
+    const s = t.split(" ").map((n) => c(e, n, o));
+    return () => s.forEach((n) => n && n());
+  }
+  let r;
+  const a = (s) => {
+    try {
+      o(s);
+    } finally {
+    }
+  }, i = () => {
+    e.removeEventListener(t, a, r);
+  };
+  return e.addEventListener(t, a, r), i;
+}
+const p = (e) => {
+  e && (e.preventDefault(), e.stopImmediatePropagation(), e.stopPropagation());
+};
+export {
+  c as l,
+  p as s
+};
+//# sourceMappingURL=events.CMzGybJJ.js.map

package/dist/chunks/events.CMzGybJJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"events.CMzGybJJ.js","sources":["../../src/utils/ts/events.ts"],"sourcesContent":["import { ListenOptions } from '@/types/utils-events';\n\n/**\n * Browser event options object feature support\n * @type {object}\n * @property {boolean} capture\n * @property {boolean} passive\n * @property {boolean} once\n */\nconst optionsSupport = (() => {\n    const support = {\n        capture: false,\n        passive: false,\n        once: false,\n    };\n\n    try {\n        // `addEventListener`/`removeEventListener` last argument can be boolean or Object.\n        // Old browsers only support boolean, so passing an Object would make them evaluate are true.\n        // To detect Object support and each feature, we provide an object with getters.\n        // If the getter is invoked means that browser supports that specific feature.\n        const options = {\n            get capture() {\n                support.capture = true;\n                return false;\n            },\n            get passive() {\n                support.passive = true;\n                return false;\n            },\n            get once() {\n                support.once = true;\n                return false;\n            },\n        };\n        // eslint-disable-next-line scanjs-rules/call_addEventListener\n        document.addEventListener('test', null, options);\n        document.removeEventListener('test', null, options);\n    } catch {\n        // ignored\n    }\n\n    return support;\n})();\n\n/**\n * Attach event listeners using options object (implementing browser fallbacks), easy cleanup\n *\n * @param {EventTarget}  target              - Target where the event will be attached\n * @param {string}       type                - Event type(s). Accepts multiple types separated by space\n * @param {EventHandler} listener            - Handler function\n * @param {ListenOptions}[options]           - Listener options\n * @param {boolean}      [options.capture]   - Capture event listener\n * @param {boolean}      [options.passive]   - Passive event listener\n * @param {boolean}      [options.once]      - Auto cleanup after event is fired for the first time\n * @param {boolean}      [options.self]      - Only trigger if the target of the event is itself\n * @param {Vue}          [options.vm]        - Auto cleanup when vue instance is destroyed\n * @param {Function}     [options.onCleanup] - Callback function invoked after cleaning up\n * @return {Function} Cleanup function that removes the listener\n */\nexport function listen(target: EventTarget, type: string, listener: EventListener, options?: ListenOptions) {\n    if (type.indexOf(' ') >= 0) {\n        const cleanupBatch = type.split(' ').map(eventType => listen(target, eventType, listener, options));\n        return () => cleanupBatch.forEach(cleanup => cleanup && cleanup());\n    }\n\n    let eventOptions: boolean | AddEventListenerOptions;\n    let useNativeOnce = false;\n\n    // Listener wrapper\n    const eventListener = event => {\n        if (options?.self && event.target !== target) {\n            return;\n        }\n        try {\n            listener(event);\n        } finally {\n            if (options?.once) {\n                cleanup();\n            }\n        }\n    };\n\n    // Cleanup function\n    const cleanup = () => {\n        if (!useNativeOnce) {\n            target.removeEventListener(type, eventListener, eventOptions);\n        }\n        options?.vm?.$off('hook:beforeDestroy', cleanup);\n        options?.onCleanup?.();\n    };\n\n    // addEventListener options adjustments\n    if (options?.capture) {\n        eventOptions = optionsSupport.capture ? { capture: true } : true;\n    }\n\n    if (options?.passive && optionsSupport.passive) {\n        eventOptions = { ...(eventOptions as AddEventListenerOptions), passive: true };\n    }\n\n    if (options?.once && optionsSupport.once) {\n        // `self`, `vm` and `onCleanup` options forces to skip native `once`\n        if (!options?.self && !options?.vm && !options?.onCleanup) {\n            useNativeOnce = true;\n            eventOptions = { ...(eventOptions as AddEventListenerOptions), once: true };\n        }\n    }\n\n    // TODO: vue 3 uses old vue event emitter, do we need this?\n    // https://v3-migration.vuejs.org/breaking-changes/events-api.html#event-bus\n    // if (options?.vm) {\n    //     if (!(options.vm instanceof Vue)) {\n    //         throw new TypeError('options.vm is not a Vue component instance');\n    //     }\n    //     options.vm.$once('hook:beforeDestroy', cleanup);\n    // }\n    // eslint-disable-next-line scanjs-rules/call_addEventListener\n    target.addEventListener(type, eventListener, eventOptions);\n    return cleanup;\n}\n\n/**\n * Prevents the event from bubbling\n * @param {Event} event - Triggered event\n */\nexport const stopEventPropagation = (event: Event) => {\n    if (event) {\n        event.preventDefault();\n        event.stopImmediatePropagation();\n        event.stopPropagation();\n    }\n};\n"],"names":["support","options","listen","target","type","listener","cleanupBatch","eventType","cleanup","eventOptions","eventListener","event","stopEventPropagation"],"mappings":"CASwB,MAAM;AAC1B,QAAMA,IAAU;AAAA,IACZ,SAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAM;AAAA,EACV;AAEI,MAAA;AAKA,UAAMC,IAAU;AAAA,MACZ,IAAI,UAAU;AACV,eAAAD,EAAQ,UAAU,IACX;AAAA,MACX;AAAA,MACA,IAAI,UAAU;AACV,eAAAA,EAAQ,UAAU,IACX;AAAA,MACX;AAAA,MACA,IAAI,OAAO;AACP,eAAAA,EAAQ,OAAO,IACR;AAAA,MAAA;AAAA,IAEf;AAES,aAAA,iBAAiB,QAAQ,MAAMC,CAAO,GACtC,SAAA,oBAAoB,QAAQ,MAAMA,CAAO;AAAA,EAAA,QAC9C;AAAA,EAAA;AAID,SAAAD;AACX,GAAG;AAiBI,SAASE,EAAOC,GAAqBC,GAAcC,GAAyBJ,GAAyB;AACxG,MAAIG,EAAK,QAAQ,GAAG,KAAK,GAAG;AACxB,UAAME,IAAeF,EAAK,MAAM,GAAG,EAAE,IAAI,CAAaG,MAAAL,EAAOC,GAAQI,GAAWF,CAAiB,CAAC;AAClG,WAAO,MAAMC,EAAa,QAAQ,CAAAE,MAAWA,KAAWA,GAAS;AAAA,EAAA;AAGjE,MAAAC;AAIJ,QAAMC,IAAgB,CAASC,MAAA;AAIvB,QAAA;AACA,MAAAN,EAASM,CAAK;AAAA,IAAA,UAChB;AAAA,IAGE;AAAA,EAER,GAGMH,IAAU,MAAM;AAEP,IAAAL,EAAA,oBAAoBC,GAAMM,GAAeD,CAAY;AAAA,EAIpE;AA4BO,SAAAN,EAAA,iBAAiBC,GAAMM,GAAeD,CAAY,GAClDD;AACX;AAMa,MAAAI,IAAuB,CAACD,MAAiB;AAClD,EAAIA,MACAA,EAAM,eAAe,GACrBA,EAAM,yBAAyB,GAC/BA,EAAM,gBAAgB;AAE9B;"}