@adyen/bento-vue2 1.84.2 → 1.86.0

package/dist/chunks/dialog-page.QpRiNPyx.js

@@ -1,137 +0,0 @@
-import { defineComponent as U, useSlots as F, ref as T, computed as n, inject as A, watch as m, nextTick as P, onUnmounted as H } from "vue";
-import { B as J } from "./button.DIU6m9wD.js";
-/* empty css              */
-import { n as N } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { u as K } from "./use-has-slot.C9lQZ6nz.js";
-import { u as Y } from "./index.B6WW_F-J.js";
-import { i as z } from "./typography.Bq-EGj9y.js";
-import { d as M } from "./index.BDK4hwK_.js";
-import "../assets/dialog-page.css";
-let B = 0;
-const Z = {
-  beforeCreate() {
-    this.uuid = B.toString(), B += 1;
-  }
-};
-var q = function() {
-  var e = this, t = e._self._c;
-  return t("svg", e._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? t("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), t("path", { attrs: { fill: "#001222", d: "M3.80655 7.25434L8.06077 3.00011L7.00011 1.93945L0.939453 8.00011L7.00011 14.0608L8.06077 13.0001L3.81499 8.75433L14.7508 8.74316L14.7492 7.24316L3.80655 7.25434Z" } })]);
-}, Q = [], W = /* @__PURE__ */ N(
-  Z,
-  q,
-  Q,
-  !1,
-  null,
-  null
-);
-const X = W.exports;
-var h = /* @__PURE__ */ ((i) => (i.TRANSITION_LEVEL_DEEPER = "b-dialog-page__animation--level-deeper", i.TRANSITION_LEVEL_UPPER = "b-dialog-page__animation--level-upper", i))(h || {});
-const ee = /* @__PURE__ */ Symbol("dialog registerPage injection key"), te = /* @__PURE__ */ Symbol("dialog page config data injection key"), ae = {
-  "en-US": {
-    goToPreviousPage: "Go to previous page"
-  },
-  "ja-JP": {
-    goToPreviousPage: "前のページに移動"
-  },
-  "pt-BR": {
-    goToPreviousPage: "Ir para a página anterior"
-  }
-}, oe = {
-  i18n: { messages: ae }
-}, se = /* @__PURE__ */ U({
-  ...oe,
-  __name: "dialog-page",
-  props: {
-    /**
-     * Identifier of the page, used with activePage prop to handle navigation
-     */
-    pageId: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Show header and actions border
-     */
-    alwaysShowBorder: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Pass custom styling to the back button to position it correctly with the header slot
-     */
-    backButtonStyling: { type: Object, default: null },
-    /**
-     * ID of the page for the back button to navigate to. Only use it to overwrite the default back behavior
-     * Used when the back button should not take the user to the natural previous page
-     * Set to `null` to hide back button in the page
-     */
-    previousPage: {
-      type: String,
-      default: void 0
-    }
-  },
-  emits: ["animationend"],
-  setup(i, { emit: e }) {
-    const t = i, a = F(), b = K(a), { t: O } = Y(), l = T(null), v = T(!1), { arrivedState: u } = M(l), _ = n(() => s.value ? s.value === t.pageId : !0), R = n(() => ({
-      "b-dialog-page__header--with-border": t.alwaysShowBorder || v.value && !u.top
-    })), k = n(() => ({
-      "b-dialog-page__footer--with-border": t.alwaysShowBorder || v.value && !u.bottom
-    })), x = n(() => !(u.bottom && u.top)), $ = () => {
-      l.value;
-    }, g = async (r) => {
-      r && (await P(), v.value = l.value && l.value.scrollHeight > l.value.clientHeight);
-    }, { activePage: s, animation: d, isAnimationActive: c, isOpen: p, pages: S, previousPages: o, updatePage: E } = A(te);
-    m(() => p.value, g, { immediate: !0 }), m(() => _.value, g, { immediate: !0 });
-    const G = n(() => t.previousPage ? !0 : t.previousPage === null ? !1 : w.value && _.value), D = () => {
-      d.value = h.TRANSITION_LEVEL_DEEPER, c && (c.value = !1), e("animationend");
-    }, j = () => {
-      c && (c.value = !0);
-    }, w = n(() => o.value.length > 1), f = n(() => o.value[o.value.length - 1]), I = n(() => S.value.some((r) => r === s.value)), V = async (r) => {
-      if (r) {
-        const C = o.value.indexOf(r);
-        C !== -1 ? o.value = o.value.slice(0, C + 1) : o.value = [r];
-      } else
-        o.value.pop();
-      d.value = h.TRANSITION_LEVEL_UPPER, await P(), E(f.value);
-    };
-    m(
-      () => s.value,
-      async () => {
-        if (await P(), !!p.value) {
-          if (s.value && !I.value && z) {
-            console.error(
-              `The activePage passed "${s.value}" does not match the id of any of the pages`
-            );
-            return;
-          }
-          s.value !== f.value && o.value.push(s.value);
-        }
-      },
-      { immediate: !0 }
-    );
-    const L = A(ee), { unregisterPage: y } = L(t.pageId);
-    return H(() => y()), { __sfc: !0, props: t, emit: e, slots: a, hasSlot: b, t: O, contentElement: l, hasScroll: v, arrivedState: u, showPage: _, headerConditionalClasses: R, footerConditionalClasses: k, isScrollable: x, onScroll: $, calculateScroll: g, activePage: s, animation: d, isAnimationActive: c, isOpen: p, pages: S, previousPages: o, updatePage: E, showBackButton: G, updateAnimation: D, startAnimation: j, hasPreviousPages: w, lastPage: f, isActivePageValid: I, goToPreviousPage: V, registerPage: L, unregisterPage: y, BentoButton: J, ArrowLeftIcon: X };
-  }
-});
-var ne = function() {
-  var e = this, t = e._self._c, a = e._self._setupProxy;
-  return t("Transition", { attrs: { name: a.animation, mode: "out-in" }, on: { "after-leave": a.updateAnimation, leave: a.startAnimation } }, [a.isOpen && a.showPage ? t("div", { staticClass: "b-dialog-page" }, [a.hasSlot("header") ? t("div", { staticClass: "b-dialog-page__header", class: a.headerConditionalClasses }, [a.showBackButton ? t("div", { staticClass: "b-dialog-page__back-button", style: e.backButtonStyling, attrs: { "data-testid": "back-button" } }, [t(a.BentoButton, { attrs: { variant: "tertiary" }, on: { click: function(b) {
-    return a.goToPreviousPage(e.previousPage);
-  } } }, [t(a.ArrowLeftIcon, { attrs: { "svg-title": a.t("goToPreviousPage") } })], 1)], 1) : e._e(), e._t("header")], 2) : e._e(), a.hasSlot("content") ? t("div", { ref: "contentElement", staticClass: "b-dialog-page__content", attrs: { tabindex: a.isScrollable ? 0 : null }, on: { scroll: a.onScroll } }, [e._t("content")], 2) : e._e(), a.hasSlot("footer") ? t("div", { staticClass: "b-dialog-page__footer", class: a.footerConditionalClasses }, [e._t("footer")], 2) : e._e()]) : e._e()]);
-}, ie = [], re = /* @__PURE__ */ N(
-  se,
-  ne,
-  ie,
-  !1,
-  null,
-  "8bfb8442"
-);
-const fe = re.exports;
-export {
-  X as A,
-  h as B,
-  fe as D,
-  ee as a,
-  te as b
-};
-//# sourceMappingURL=dialog-page.QpRiNPyx.js.map

package/dist/chunks/dialog-page.QpRiNPyx.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dialog-page.QpRiNPyx.js","sources":["../../../ui-assets/icons-16/dist/vue/arrow-left.vue","../../src/components/internal/dialog-page/dialog-page.types.ts","../../src/components/internal/dialog-page/dialog-page.keys.ts","../../src/components/internal/dialog-page/dialog-page.vue"],"sourcesContent":["\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=\"#001222\" d=\"M3.80655 7.25434L8.06077 3.00011L7.00011 1.93945L0.939453 8.00011L7.00011 14.0608L8.06077 13.0001L3.81499 8.75433L14.7508 8.74316L14.7492 7.24316L3.80655 7.25434Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","import { type Ref } from 'vue';\n\nexport enum BentoDialogPageAnimation {\n    TRANSITION_LEVEL_DEEPER = 'b-dialog-page__animation--level-deeper',\n    TRANSITION_LEVEL_UPPER = 'b-dialog-page__animation--level-upper',\n}\n\nexport interface BentoDialogPageConfigData {\n    activePage: Ref<string>;\n    animation: Ref<string>;\n    isAnimationActive?: Ref<boolean>;\n    isOpen: Ref<boolean>;\n    pages: Ref<Array<string>>;\n    previousPages: Ref<Array<string>>;\n    updatePage: (page: string) => void;\n}\n\nexport type BentoDialogPageRegisterPage = (pageId: string) => { unregisterPage: () => void };\n","export const DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY = Symbol('dialog registerPage injection key');\nexport const DIALOG_PAGE_CONFIG_INJECTION_KEY = Symbol('dialog page config data injection key');\n","<template>\n    <Transition :name=\"animation\" mode=\"out-in\" @after-leave=\"updateAnimation\" @leave=\"startAnimation\">\n        <div v-if=\"isOpen && showPage\" class=\"b-dialog-page\">\n            <div v-if=\"hasSlot('header')\" class=\"b-dialog-page__header\" :class=\"headerConditionalClasses\">\n                <div\n                    v-if=\"showBackButton\"\n                    class=\"b-dialog-page__back-button\"\n                    :style=\"backButtonStyling\"\n                    data-testid=\"back-button\"\n                >\n                    <bento-button variant=\"tertiary\" @click=\"goToPreviousPage(previousPage)\">\n                        <arrow-left-icon :svg-title=\"t('goToPreviousPage')\" />\n                    </bento-button>\n                </div>\n                <slot name=\"header\"></slot>\n            </div>\n            <div\n                v-if=\"hasSlot('content')\"\n                ref=\"contentElement\"\n                class=\"b-dialog-page__content\"\n                :tabindex=\"isScrollable ? 0 : null\"\n                @scroll=\"onScroll\"\n            >\n                <slot name=\"content\" />\n            </div>\n            <div v-if=\"hasSlot('footer')\" class=\"b-dialog-page__footer\" :class=\"footerConditionalClasses\">\n                <slot name=\"footer\" />\n            </div>\n        </div>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, nextTick, onUnmounted, type PropType, ref, useSlots, watch } from 'vue';\n\n    import { BentoButton } from '@/components/button';\n    import ArrowLeftIcon from '@adyen/ui-assets-icons-16/vue/arrow-left';\n\n    import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { isDevelopmentEnviroment } from '@/utils/ts/dev-environment';\n\n    import {\n        BentoDialogPageAnimation,\n        type BentoDialogPageConfigData,\n        type BentoDialogPageRegisterPage,\n    } from './dialog-page.types';\n    import type { CSSProperties } from 'vue/types/jsx.d.ts';\n\n    import { DIALOG_PAGE_CONFIG_INJECTION_KEY, DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY } from './dialog-page.keys';\n\n    import messages from './messages.json';\n    import { useScroll } from '@vueuse/core';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n        /**\n         * Identifier of the page, used with activePage prop to handle navigation\n         */\n        pageId: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * Show header and actions border\n         */\n        alwaysShowBorder: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Pass custom styling to the back button to position it correctly with the header slot\n         */\n        backButtonStyling: { type: Object as PropType<CSSProperties>, default: null },\n\n        /**\n         * ID of the page for the back button to navigate to. Only use it to overwrite the default back behavior\n         * Used when the back button should not take the user to the natural previous page\n         * Set to `null` to hide back button in the page\n         */\n        previousPage: {\n            type: String,\n            default: undefined,\n        },\n    });\n\n    const emit = defineEmits([\"animationend\"]);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    // Refs\n    const contentElement = ref<HTMLDivElement>(null);\n    const hasScroll = ref(false);\n\n    const { arrivedState } = useScroll(contentElement);\n\n    // Logic to choose which page is active/shown\n    const showPage = computed(() => (activePage.value ? activePage.value === props.pageId : true));\n\n    // Scrolling styling logic\n    const headerConditionalClasses = computed(() => ({\n        'b-dialog-page__header--with-border': props.alwaysShowBorder || (hasScroll.value && !arrivedState.top),\n    }));\n\n    const footerConditionalClasses = computed(() => ({\n        'b-dialog-page__footer--with-border': props.alwaysShowBorder || (hasScroll.value && !arrivedState.bottom),\n    }));\n\n    const isScrollable = computed(() => !(arrivedState.bottom && arrivedState.top));\n\n    const onScroll = () => {\n        if (!contentElement.value) {\n            return;\n        }\n    };\n\n    const calculateScroll = async watchedValue => {\n        if (!watchedValue) {\n            return;\n        }\n        // Wait for content to be rendered to be able to calculate the height\n        await nextTick();\n        hasScroll.value = contentElement.value && contentElement.value.scrollHeight > contentElement.value.clientHeight;\n    };\n\n    const { activePage, animation, isAnimationActive, isOpen, pages, previousPages, updatePage } =\n        inject<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY);\n\n    watch(() => isOpen.value, calculateScroll, { immediate: true });\n    watch(() => showPage.value, calculateScroll, { immediate: true });\n\n    // Logic to determine whether the back button should be shown on the page\n    const showBackButton = computed(() => {\n        if (props.previousPage) {\n            return true;\n        }\n        if (props.previousPage === null) {\n            return false;\n        }\n        return hasPreviousPages.value && showPage.value;\n    });\n\n    // Animation\n    const updateAnimation = () => {\n        animation.value = BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER;\n        if (isAnimationActive) {\n            isAnimationActive.value = false;\n        }\n\n        emit('animationend');\n    };\n\n    const startAnimation = () => {\n        if (isAnimationActive) {\n            isAnimationActive.value = true;\n        }\n    };\n\n    // Previous page logic\n    const hasPreviousPages = computed(() => previousPages.value.length > 1);\n    const lastPage = computed(() => previousPages.value[previousPages.value.length - 1]);\n    const isActivePageValid = computed(() => pages.value.some(page => page === activePage.value));\n\n    const goToPreviousPage = async (page: string) => {\n        if (page) {\n            const index = previousPages.value.indexOf(page);\n            if (index !== -1) {\n                previousPages.value = previousPages.value.slice(0, index + 1);\n            } else {\n                previousPages.value = [page];\n            }\n        } else {\n            previousPages.value.pop();\n        }\n\n        animation.value = BentoDialogPageAnimation.TRANSITION_LEVEL_UPPER;\n        await nextTick();\n        updatePage(lastPage.value);\n    };\n\n    // Add new page to the previousPage array to keep track of user navigation\n    watch(\n        () => activePage.value,\n        async () => {\n            await nextTick();\n            if (!isOpen.value) {\n                return;\n            }\n\n            if (!!activePage.value && !isActivePageValid.value) {\n                if (isDevelopmentEnviroment) {\n                    // eslint-disable-next-line no-console\n                    console.error(\n                        `The activePage passed \"${activePage.value}\" does not match the id of any of the pages`\n                    );\n                    return;\n                }\n            }\n\n            if (activePage.value !== lastPage.value) {\n                previousPages.value.push(activePage.value);\n            }\n        },\n        { immediate: true }\n    );\n\n    // Register page to parent component and inject data from parent component\n    const registerPage = inject<BentoDialogPageRegisterPage>(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY);\n    const { unregisterPage } = registerPage(props.pageId);\n\n    // Unregister page on unmounting the page\n    onUnmounted(() => unregisterPage());\n</script>\n\n<script lang=\"ts\">\n    /**\n     * DialogPage is an internal component used to render different pages of dialog components (Modal, ModalFullscreen and Sidepanel)\n     *\n     * @example\n     * import { DialogPage } from '@/internal';\n     *\n     * export default {\n     *     components: { DialogPage },\n     *     template: `\n     *          <dialog-page pageId='step1' always-show-border>\n     *              <template #header>Header</template>\n     *              <template #content>Content</template>\n     *              <template #footer>Footer</template>\n     *          </dialog-page>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./dialog-page.scss\" />\n"],"names":["uuid","_sfc_main$1","BentoDialogPageAnimation","BentoDialogPageAnimation2","DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY","DIALOG_PAGE_CONFIG_INJECTION_KEY","__default__","messages","slots","useSlots","hasSlot","useHasSlot","t","useI18n","contentElement","ref","hasScroll","arrivedState","useScroll","showPage","computed","activePage","props","headerConditionalClasses","footerConditionalClasses","isScrollable","onScroll","calculateScroll","watchedValue","nextTick","animation","isAnimationActive","isOpen","pages","previousPages","updatePage","inject","watch","showBackButton","hasPreviousPages","updateAnimation","emit","startAnimation","lastPage","isActivePageValid","page","goToPreviousPage","index","isDevelopmentEnviroment","registerPage","unregisterPage","onUnmounted"],"mappings":"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"}

package/dist/chunks/dropdown-default-textbox.Cq68tN9F.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown-default-textbox.Cq68tN9F.js","sources":["../../src/components/dropdown/dropdown.types.ts","../../src/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.types.ts","../../src/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.vue","../../src/components/dropdown/components/dropdown-default-textbox/dropdown-default-textbox.vue"],"sourcesContent":["import type {\n    BentoListboxEmptyStateProps as BentoDropdownEmptyStateProps,\n    BentoListboxSearchOptions as BentoDropdownSearchOptions,\n    BentoListboxVirtulisationOptions as BentoDropdownVirtulisationOptions,\n    BentoListboxIsOptionDisabled,\n    BentoListboxLazyLoadType,\n    BentoListboxOptions,\n    BentoListboxSelectedValue,\n} from '../../types/listbox';\nimport { type FormField } from '../../types/form-field';\nexport type { BentoDropdownSearchOptions, BentoDropdownEmptyStateProps, BentoDropdownVirtulisationOptions };\nexport interface BentoDropdownProps extends FormField {\n    /**\n     * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n     * Defines a string value that labels an interactive element.\n     */\n    ariaLabel?: string;\n    /**\n     * Renders the dropdown with a condensed style.\n     */\n    condensed?: boolean;\n    /**\n     * Empty state props used with the inner empty state component which is displayed when no search results are found.\n     */\n    emptyState?: BentoDropdownEmptyStateProps;\n    /**\n     * Sets the possibility to type into the textbox.\n     */\n    dynamicFiltering?: boolean;\n    /**\n     * Highlights the dropdown in an erroneous state.\n     * @deprecated Use \"errorMessage\" prop instead\n     */\n    error?: boolean;\n    /**\n     * Indicates whether there are more items to load\n     */\n    hasMoreItems?: boolean;\n    /**\n     * Function that dertermines which options are disabled from interaction.\n     * @type {BentoListboxIsOptionDisabled}\n     * @param {BentoListboxOptionItem} option - Dropdown option object\n     * @param {string} option.label - Option's label text\n     * @param {string|number} option.value - Option's value\n     * @param {unknown} option.data - Option's extra data to be passed to the default slot\n     */\n    isOptionDisabled?: BentoListboxIsOptionDisabled;\n    /**\n     * The option elements to populate the dropdown with.\n     * It must be an array of {@see BentoListboxOptionItem }\n     *  @property value.label - Text to be displayed in the option\n     *  @property value.value - Value of the option\n     */\n    items?: BentoListboxOptions;\n    /**\n     * Indicates if new options are lazy loading.\n     */\n    loading?: boolean;\n    /**\n     * Indicates that dropdown items are loading\n     */\n    componentLoading?: boolean;\n    /**\n     * The type of `Lazy Load`.\n     * Type \"automatic\" will enable infinite scrolling\n     * Type \"button\" will enable lazy loading with \"Show more\" button\n     */\n    lazyLoadType?: BentoListboxLazyLoadType | `${BentoListboxLazyLoadType}`;\n    /**\n     * If enabled, the user will be able to select multiple items.\n     */\n    multiple?: boolean;\n    /**\n     * Dropdown search options and events.\n     * @see BentoDropdownSearchOptions\n     */\n    search?: BentoDropdownSearchOptions;\n    /**\n     * Toggles whether to use the slot content select items shown in the textbox in multiple mode.\n     */\n    showSlotContentInMultiple?: boolean;\n    /**\n     * @deprecated Do not use. Only 'default' size should be used.\n     */\n    size?: BentoDropdownSize | `${BentoDropdownSize}`;\n    /**\n     * If enabled, dropdown will display non-selectable, static categories\n     */\n    staticCategories?: boolean;\n    /**\n     * The `input` value.\n     * Providing an empty string will select no options.\n     * Set to an empty string `''` if you don't want any of the available options to be selected.\n     * @deprecated for usage with properties since version 2.0. Use `v-model` or `model-value` instead.\n     */\n    value?: BentoListboxSelectedValue;\n    /**\n     * The `input` value.\n     * Providing an empty string will select no options.\n     * Set to an empty string `''` if you don't want any of the available options to be selected.\n     */\n    modelValue?: BentoListboxSelectedValue;\n    /**\n     * Enables virtual scrolling if set to true or by providing an object with itemHeight function.\n     * The itemHeight function is used to calculate the height of rendered item given it's index.\n     */\n    virtualScroll?: BentoDropdownVirtulisationOptions;\n    /**\n     * Enables value/label value handling. When `true`, the component expects and emits value/label\n     * pair objects instead of primitive values.\n     *\n     * This affects both the `value` prop and the `input` event payload.\n     *\n     * - **Input (`value` prop):** Expects a `{ value: string | number, label: string }` object (or an array of them for multi-select).\n     * - **Output (`input` event):** Emits a `{ value: string | number, label: string }` object (or an array of them) upon selection.\n     *\n     * This is particularly useful when a selected item's label is not available in the `items` prop,\n     * allowing the component to display the correct label for values loaded from external sources.\n     * @default false\n     */\n    enableValueLabelPair?: boolean;\n}\n\n/**\n * @deprecated Do not use. Only 'default' size should be used.\n */\nexport enum BentoDropdownSize {\n    DEFAULT = 'DropdownInputDefault',\n    SMALL = 'DropdownInputSmall',\n}\n\nexport {\n    /**\n     * @deprecated since version 2.0. Use the string literal instead.\n     */\n    BentoListboxLazyLoadType as BentoDropdownLazyLoadType,\n    BentoListboxEvent as BentoDropdownEvent,\n} from '@/types/listbox';\n","import { type PropType } from 'vue';\nimport { type Booleanish } from '@/types/prop-types';\n\n// TODO: Change this to script setup + Typescript interface\nexport const DropdownBaseTextboxProps = {\n    /**\n     * The number of additional items that have been selected in the dropdown.\n     */\n    additionalItemsSelected: { type: [Number, String] as PropType<number | string>, default: 0 },\n\n    /**\n     * Sets the possibility to type into the textbox\n     */\n    dynamicFiltering: {\n        type: Boolean,\n        default: false,\n    },\n\n    /**\n     * Sets the aria-controls attribute on the textbox. This should correspond to the popover's id that the textbox triggers.\n     */\n    ariaControls: {\n        type: String,\n        required: true,\n    },\n\n    /**\n     * Indicates whether the content the textbox triggers is visible or not. Needs to be set accordingly when the textbox is used and changed every time the popover is shown/hidden.\n     */\n    ariaExpanded: {\n        type: [String, Boolean] as PropType<Booleanish>,\n        required: true,\n    },\n\n    /**\n     * Corresponds to the label's id that labels the textbox element.\n     */\n    ariaLabelledby: {\n        type: String,\n        default: null,\n    },\n\n    /**\n     * Disables any textbox functionality\n     */\n    disabled: { type: Boolean, default: false },\n\n    /**\n     * Marks the textbox as invalid, rendering an error state\n     */\n    isInvalid: { type: Boolean, default: false },\n\n    /**\n     * Selected option's label\n     */\n    displayValue: { type: String, default: null },\n\n    /**\n     * Indicates if the dropdown is open so that\n     * the respective event can be emitted\n     */\n    open: { type: Boolean, default: false },\n\n    /**\n     * The input value\n     */\n    value: { type: String, default: '' },\n\n    /**\n     * Custom debounce time. Default: 300\n     */\n    debounceTime: { type: Number, default: 300 },\n};\n\nexport enum DropdownBaseTextboxState {\n    DISABLED = 'disabled',\n    READONLY = 'readonly',\n    HAS_ITEMS = 'has-items',\n    OPENED = 'opened',\n    ERROR = 'error',\n}\n\nexport enum DropdownBaseTextboxEvent {\n    OPEN = 'dropdown-base-open',\n    KEYDOWN = 'dropdown-base-keydown',\n    CLOSE = 'dropdown-base-close',\n    INPUT = 'dropdown-base-input',\n    CLEAR = 'dropdown-base-clear',\n}\n\nexport default DropdownBaseTextboxProps;\n","<template>\n    <div\n        :class=\"$attrs.class\"\n        data-testid=\"textbox-wrapper\"\n        @click=\"onToggleDropdown\"\n        @keydown.escape=\"onCloseDropdown\"\n    >\n        <bento-typography\n            class=\"b-dropdown-base-textbox\"\n            :class=\"conditionalClasses\"\n            el=\"div\"\n            data-testid=\"base-textbox\"\n        >\n            <input\n                v-if=\"shouldShowInput\"\n                v-bind=\"ariaAttributes\"\n                :id=\"textboxId\"\n                ref=\"textbox\"\n                class=\"b-dropdown-base-textbox__input\"\n                role=\"combobox\"\n                type=\"text\"\n                aria-autocomplete=\"list\"\n                size=\"1\"\n                :value=\"open ? value : displayValue\"\n                :disabled=\"disabled ? true : null\"\n                :readonly=\"readonly\"\n                :required=\"isRequired\"\n                @keydown=\"$emit(DropdownBaseTextboxEvent.KEYDOWN, $event)\"\n                @keydown.enter=\"onToggleDropdown\"\n                @input=\"onInputEvent\"\n            />\n            <div\n                v-else\n                :id=\"textboxId\"\n                v-bind=\"ariaAttributes\"\n                ref=\"textbox\"\n                class=\"b-dropdown-base-textbox__input\"\n                :class=\"comboboxConditionalClasses\"\n                :aria-readonly=\"readonly ? 'true' : null\"\n                role=\"combobox\"\n                :tabindex=\"disabled ? -1 : 0\"\n            >\n                <template v-if=\"shouldShowSingleSelectSlot\">\n                    <slot v-if=\"hasSlot('display-value')\" v-bind=\"selectedValueItem\" name=\"display-value\"></slot>\n                    <slot v-else v-bind=\"selectedValueItem\">\n                        {{ displayValue }}\n                    </slot>\n                </template>\n                <template v-else-if=\"shouldShowMultipleSlot\">\n                    <div class=\"b-dropdown-base-textbox__input-multiple-selected\">\n                        <div v-for=\"singleItem of selectedValueItems\" :key=\"singleItem.value\">\n                            <div class=\"b-dropdown-base-textbox__input-selected-element\">\n                                <slot v-bind=\"singleItem\">\n                                    {{ displayValue }}\n                                </slot>\n                            </div>\n                        </div>\n                    </div>\n                </template>\n                <template v-else>{{ displayValue }}</template>\n            </div>\n            <span v-if=\"additionalItemsSelected\" class=\"b-dropdown-base-textbox__additional-items\">\n                {{ additionalItemsSelected }}\n            </span>\n            <span v-if=\"hasSlot('icon') && !isFiltering\" class=\"b-dropdown-base-textbox__icon\" aria-hidden=\"true\">\n                <slot name=\"icon\"></slot>\n            </span>\n            <span\n                v-if=\"isFiltering\"\n                class=\"b-dropdown-base-textbox__clear-search\"\n                :tabindex=\"disabled ? -1 : 0\"\n                data-testid=\"clear-search-button\"\n                @click.stop=\"onClearSearch\"\n                @keydown.enter.stop=\"onClearSearch\"\n                @keyup.space=\"onClearSearch\"\n            >\n                <cross-circle-fill-small-icon v-if=\"size === BentoDropdownSize.SMALL\" :svg-title=\"t('clearSearch')\" />\n                <cross-circle-fill-icon v-else :svg-title=\"t('clearSearch')\" />\n            </span>\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, nextTick, type PropType, ref, useAttrs, useSlots, watch } from 'vue';\n    import { generateUid } from '@/core/utils/ts';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useHasSlot } from '@/composables';\n    import { BentoTypography } from '@/components/typography';\n    import { debounce } from '@/utils/ts/debounce';\n    import { type Booleanish } from '@/types/prop-types';\n    import { type BentoListboxOptionItem } from '@/types/listbox';\n    import type { HTMLAttributes } from 'vue/types/jsx.d.ts';\n    import { DropdownBaseTextboxEvent, DropdownBaseTextboxState } from './dropdown-base-textbox.types';\n    import CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import CrossCircleFillSmallIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill-small';\n    import { BentoDropdownSize } from '@/components/dropdown/dropdown.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const attrs = useAttrs();\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const props = defineProps({\n        /**\n         * The number of additional items that have been selected in the dropdown.\n         */\n        additionalItemsSelected: { type: [Number, String] as PropType<number | string>, default: 0 },\n\n        /**\n         * If the combobox DOM element should be an `input` element.\n         */\n        alwaysComboboxIsInput: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Sets the aria-controls attribute on the textbox. This should correspond to the popover's id that the textbox triggers.\n         */\n        ariaControls: { type: String, required: true },\n\n        /**\n         * Indicates whether the content the textbox triggers is visible or not. Needs to be set accordingly when the textbox is used and changed every time the popover is shown/hidden.\n         */\n        ariaExpanded: {\n            type: [String, Boolean] as PropType<Booleanish>,\n            required: true,\n        },\n\n        /**\n         * If no label element is used then the aria-label is be set should be set.\n         */\n        ariaLabel: { type: String, default: null },\n\n        /**\n         * Corresponds to the label's id that labels the textbox element.\n         */\n        ariaLabelledby: { type: String, default: null },\n\n        /**\n         * Custom debounce time for the user type event.\n         */\n        debounceTime: { type: Number, default: 300 },\n\n        /**\n         * Disables any textbox functionality\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Selected option's label\n         */\n        displayValue: { type: String, default: null },\n\n        /**\n         * Sets the possibility to type into the textbox.\n         */\n        dynamicFiltering: { type: Boolean, default: false },\n\n        /**\n         * Marks the textbox as invalid, rendering an error state\n         */\n        isInvalid: { type: Boolean, default: false },\n\n        /*\n         * If enabled, the user will be able to select multiple items.\n         */\n        multiple: { type: Boolean, default: false },\n\n        /**\n         * Indicates if the dropdown is open so that\n         * the respective event can be emitted\n         */\n        open: { type: Boolean, default: false },\n\n        /**\n         * Sets the dropdown to readonly state\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * The input value\n         */\n        value: { type: String, default: '' },\n\n        /**\n         * The selected value's list box item.\n         */\n        selectedValueItem: {\n            type: [Object, Array] as PropType<BentoListboxOptionItem | Array<BentoListboxOptionItem>>,\n            default: undefined,\n        },\n\n        /**\n         * Toggles whether to use the slot content select items shown in the textbox in multiple mode.\n         */\n        showSlotContentInMultiple: { type: Boolean, default: false },\n\n        /**\n         * Dropdown size\n         */\n        size: {\n            type: String as PropType<BentoDropdownSize | `${BentoDropdownSize}`>,\n            default: null,\n        },\n    });\n\n    const emit = defineEmits([]);\n\n    const textbox = ref(null);\n    const textboxId = generateUid('textbox');\n\n    const conditionalClasses = computed(() => ({\n        [`b-dropdown-base-textbox--${DropdownBaseTextboxState.DISABLED}`]: props.disabled,\n        [`b-dropdown-base-textbox--${DropdownBaseTextboxState.READONLY}`]: props.readonly,\n        [`b-dropdown-base-textbox--${DropdownBaseTextboxState.HAS_ITEMS}`]: !!props.additionalItemsSelected,\n    }));\n\n    const isRequired = computed(() => attrs['required'] as Booleanish);\n\n    const comboboxConditionalClasses = computed(() => ({\n        [`b-dropdown-base-textbox__input--dynamic-filtering`]: props.dynamicFiltering,\n    }));\n\n    const isFiltering = computed(() => props.dynamicFiltering && !!props.value && props.open);\n\n    const ariaAttributes = computed(\n        () =>\n            ({\n                'aria-haspopup': 'listbox',\n                'aria-controls': props.ariaControls,\n                'aria-describedby': attrs['aria-describedby']?.toString() as string,\n                'aria-expanded': props.ariaExpanded ? 'true' : 'false',\n                'aria-labelledby': props.ariaLabelledby,\n                'aria-label': props.ariaLabelledby ? null : props.ariaLabel,\n                'aria-invalid': props.isInvalid,\n                'aria-disabled': props.disabled ? true : null,\n                'aria-required': shouldShowInput.value ? null : isRequired.value,\n            }) as HTMLAttributes\n    );\n    // Cast selectedValueItem if it is an array of selected items\n    const selectedValueItems = computed(() =>\n        props.multiple ? (props.selectedValueItem as Array<BentoListboxOptionItem>) : []\n    );\n\n    const shouldShowInput = computed(() => props.dynamicFiltering && (props.open || props.alwaysComboboxIsInput));\n    const shouldShowSingleSelectSlot = computed(() => props.selectedValueItem && !props.multiple);\n    const shouldShowMultipleSlot = computed(\n        () =>\n            props.multiple &&\n            props.selectedValueItem &&\n            selectedValueItems.value.length > 0 &&\n            props.showSlotContentInMultiple\n    );\n\n    watch(\n        () => shouldShowInput.value,\n        () => {\n            if (shouldShowInput.value && !props.alwaysComboboxIsInput) {\n                nextTick(() => {\n                    textbox.value.focus();\n                });\n            }\n        }\n    );\n\n    const onOpenDropdown = async () => {\n        if (!props.disabled && !props.readonly) {\n            emit(DropdownBaseTextboxEvent.OPEN);\n            // wait for popover to open before setting focus\n            await nextTick();\n            textbox.value.focus();\n        }\n    };\n\n    const onCloseDropdown = () => {\n        if (props.open) {\n            textbox.value.focus();\n            emit(DropdownBaseTextboxEvent.CLOSE);\n        }\n    };\n\n    const onToggleDropdown = (event: Event) => {\n        const isDynamicFilteringInputClickEvent = props.open && (event.target as HTMLDivElement).tagName === 'INPUT';\n        if (isDynamicFilteringInputClickEvent) {\n            /**\n             * When there's a click even on the input during filtering\n             * and the popover is open, do not toggle the popover.\n             * Allow for click events inside the input field\n             */\n            return null;\n        }\n\n        return props.open ? onCloseDropdown() : onOpenDropdown();\n    };\n\n    const onClearSearch = () => {\n        emit(DropdownBaseTextboxEvent.CLEAR);\n        emit(DropdownBaseTextboxEvent.INPUT, '');\n        textbox.value.focus();\n    };\n    const onInputEvent = debounce<(event: Event) => void>((event: Event) => {\n        if (!props.readonly && !props.disabled) {\n            emit(DropdownBaseTextboxEvent.INPUT, (event.target as HTMLInputElement).value);\n        } else {\n            event.preventDefault();\n            event.stopPropagation();\n        }\n    }, props.debounceTime);\n\n    const focus = () => {\n        textbox.value.focus();\n    };\n\n    defineExpose({\n        focus,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Only for internal use, implements the logic of the textbox element to be implemented in the combobox.\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'dropdown-base-textbox',\n        inheritAttrs: false,\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-base-textbox.scss\" />\n","<template>\n    <div class=\"b-dropdown-default-textbox\" :class=\"conditionalClasses\" data-testid=\"default-textbox\">\n        <dropdown-base-textbox\n            ref=\"baseTextbox\"\n            v-bind=\"{ ...$attrs, ...$props }\"\n            class=\"b-dropdown-default-textbox__textbox\"\n            :value=\"value\"\n            v-on=\"listeners\"\n        >\n            <template v-for=\"(_, innerSlot) of slots\" #[innerSlot]=\"scope\">\n                <slot :name=\"innerSlot\" v-bind=\"scope ?? {}\" />\n            </template>\n            <template #icon>\n                <div class=\"b-dropdown-default-textbox__chevron\">\n                    <chevron-up-icon v-show=\"isDropdownOpen\" svg-title=\"opened\" />\n                    <chevron-down-icon v-show=\"!isDropdownOpen\" svg-title=\"closed\" />\n                </div>\n            </template>\n        </dropdown-base-textbox>\n    </div>\n</template>\n\n<script lang=\"ts\" setup>\n    import { computed, defineComponent, type PropType, ref, useSlots } from 'vue';\n    import DropdownBaseTextbox from '@/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.vue';\n    import { type Booleanish } from '@/types/prop-types';\n    import { type BentoListboxOptionItem } from '@/types/listbox';\n    import { stopEventPropagation } from '@/utils/ts/events';\n    import {\n        DropdownBaseTextboxEvent,\n        DropdownBaseTextboxState,\n    } from '../dropdown-base-textbox/dropdown-base-textbox.types';\n    import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n    import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n\n    const emit = defineEmits([\"clear\", \"close\", \"input\", \"keydown\", \"open\"]);\n\n    const slots = useSlots();\n\n    const props = defineProps({\n        /**\n         * The number of additional items that have been selected in the dropdown.\n         */\n        additionalItemsSelected: { type: [Number, String] as PropType<number | string>, default: 0 },\n\n        /**\n         * Sets the aria-controls attribute on the textbox. This should correspond to the popover's id that the textbox triggers.\n         */\n        ariaControls: {\n            type: String,\n            required: true,\n        },\n\n        /**\n         * Indicates whether the content the textbox triggers is visible or not. Needs to be set accordingly when the textbox is used and changed every time the popover is shown/hidden.\n         */\n        ariaExpanded: {\n            type: [String, Boolean] as PropType<Booleanish>,\n            required: true,\n        },\n\n        /**\n         * If no label element is used then the aria-label is be set should be set.\n         */\n        ariaLabel: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * Corresponds to the label's id that labels the textbox element.\n         */\n        ariaLabelledby: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * Renders the dropdown with a condensed style.\n         */\n        condensed: { type: Boolean, default: false },\n\n        /**\n         * Custom debounce time. Default: 300\n         */\n        debounceTime: { type: Number, default: 300 },\n\n        /**\n         * Disables any textbox functionality\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Selected option's label\n         */\n        displayValue: { type: String, default: null },\n\n        /**\n         * Sets the possibility to type into the textbox\n         */\n        dynamicFiltering: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Marks the textbox as invalid, rendering an error state\n         */\n        isInvalid: { type: Boolean, default: false },\n\n        /**\n         * Indicates if the dropdown is open so that\n         * the respective event can be emitted\n         */\n        open: { type: Boolean, default: false },\n\n        /**\n         * Sets the dropdown to readonly state\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * The selected value's list box item.\n         */\n        selectedValueItem: {\n            type: [Object, Array] as PropType<BentoListboxOptionItem | Array<BentoListboxOptionItem>>,\n            default: undefined,\n        },\n\n        /**\n         * Toggles whether to use the slot content select items shown in the textbox in multiple mode.\n         */\n        showSlotContentInMultiple: { type: Boolean, default: false },\n\n        /**\n         * The input value\n         */\n        value: { type: String, default: '' },\n\n        /*\n         * If enabled, the user will be able to select multiple items.\n         */\n        multiple: { type: Boolean, default: false },\n    });\n\n    const baseTextbox = ref(null);\n\n    const conditionalClasses = computed(() => ({\n        [`b-dropdown-default-textbox--${DropdownBaseTextboxState.ERROR}`]:\n            !props.disabled && !props.readonly && props.isInvalid,\n        [`b-dropdown-default-textbox--${DropdownBaseTextboxState.DISABLED}`]: props.disabled,\n        [`b-dropdown-default-textbox--${DropdownBaseTextboxState.READONLY}`]: props.readonly,\n        [`b-dropdown-default-textbox--${DropdownBaseTextboxState.OPENED}`]: props.open,\n        'b-dropdown-default-textbox--condensed': props.condensed,\n    }));\n\n    const isDropdownOpen = computed(() => props.open && !props.disabled && !props.readonly);\n\n    const onInput = (newInput: string) => {\n        emit('input', newInput);\n    };\n    const onKeyDown = (e: KeyboardEvent) => {\n        emit('keydown', e);\n    };\n    const openDropdown = (e: Event) => {\n        stopEventPropagation(e);\n        emit('open');\n    };\n    const closeDropdown = (e: Event) => {\n        stopEventPropagation(e);\n        emit('close');\n    };\n    const clearValue = (e: Event) => {\n        stopEventPropagation(e);\n        emit('clear');\n    };\n\n    const listeners = {\n        [DropdownBaseTextboxEvent.INPUT]: onInput,\n        [DropdownBaseTextboxEvent.OPEN]: openDropdown,\n        [DropdownBaseTextboxEvent.CLOSE]: closeDropdown,\n        [DropdownBaseTextboxEvent.CLEAR]: clearValue,\n        [DropdownBaseTextboxEvent.KEYDOWN]: onKeyDown,\n    };\n\n    const focus = () => {\n        baseTextbox.value.focus();\n    };\n\n    defineExpose({\n        focus,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * For internal use only, textbox component used in the dropdown component.\n     */\n    export default defineComponent({\n        name: 'dropdown-default-textbox',\n        inheritAttrs: false,\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-default-textbox.scss\" />\n"],"names":["BentoDropdownSize","BentoDropdownSize2","DropdownBaseTextboxState","DropdownBaseTextboxState2","DropdownBaseTextboxEvent","DropdownBaseTextboxEvent2","__default__$1","defineComponent","messages","t","useI18n","attrs","useAttrs","slots","useSlots","hasSlot","useHasSlot","textbox","ref","textboxId","generateUid","conditionalClasses","computed","props","isRequired","comboboxConditionalClasses","isFiltering","ariaAttributes","_a","shouldShowInput","selectedValueItems","shouldShowSingleSelectSlot","shouldShowMultipleSlot","watch","nextTick","onOpenDropdown","emit","onCloseDropdown","onToggleDropdown","event","onClearSearch","onInputEvent","debounce","focus","expose","__default__","baseTextbox","isDropdownOpen","onInput","newInput","onKeyDown","e","openDropdown","stopEventPropagation","closeDropdown","clearValue","listeners"],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown.C2pXf8Li.js","sources":["../../src/components/dropdown/components/dropdown-options-container/composables/use-dropdown-options-listbox.ts","../../src/components/dropdown/components/dropdown-options-container/dropdown-options-container.vue","../../../ui-assets/icons-16/dist/vue/chevron-down-small.vue","../../../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":["import { computed, ref, type Ref, watch } from 'vue';\nimport { BentoListboxEvent, type BentoListboxOptions } from '@/types/listbox';\nimport { BentoDropdownEvent } from '../../../dropdown.types';\nimport { useI18n } from '@/utils/ts/i18n';\nimport messages from '../messages.json';\n\ntype MessageSchema = (typeof messages)['en-US'];\n\n/**\n * A composable that handles all dropdown options option selecting logic & listeners.\n * If single select dropdown then emits straight up to dropdown.\n * If multi select dropdown then stores selections in internal state and only emits when Apply button is pressed.\n *\n * @param selectedValue The selectedValue property passed into the dropdown options container component.\n * @param multiple The multiple property  passed into the dropdown options container component.\n * @param isOpen The isOpen property passed into the dropdown options container component.\n * @param emit The emit function for the dropdown options container component.\n */\nexport const useDropdownOptionsListbox = (\n    selectedValue: Ref<BentoListboxOptions>,\n    multiple: Ref<boolean>,\n    isOpen: Ref<boolean>,\n    emit: (event: BentoListboxEvent | BentoDropdownEvent, selectedValue?: BentoListboxOptions) => void\n) => {\n    const internalSelectedValue = ref(selectedValue.value);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    watch(selectedValue, () => {\n        internalSelectedValue.value = selectedValue.value;\n    });\n\n    // Multi-select dropdown cancel and apply button logic\n    const isApplyButtonDisabled = computed(\n        () => JSON.stringify(internalSelectedValue.value) === JSON.stringify(selectedValue.value)\n    );\n\n    const onApplyClick = () => {\n        emit(BentoListboxEvent.SELECT, internalSelectedValue.value);\n        emit(BentoDropdownEvent.CLOSE_DROPDOWN);\n    };\n\n    const onCancelClick = () => {\n        internalSelectedValue.value = selectedValue.value;\n        emit(BentoDropdownEvent.CLOSE_DROPDOWN);\n    };\n\n    const onOutsideDropdownClick = () => {\n        if (isOpen.value && multiple.value) {\n            internalSelectedValue.value = selectedValue.value;\n        }\n    };\n\n    const actions = computed(() => [\n        {\n            title: t('apply') as string,\n            event: onApplyClick,\n            disabled: isApplyButtonDisabled.value,\n        },\n        {\n            title: t('cancel') as string,\n            event: onCancelClick,\n        },\n    ]);\n\n    // Click and keyboard navigation event listners\n    const onOptionSelected = (newSelectedValue: BentoListboxOptions) => {\n        internalSelectedValue.value = newSelectedValue;\n        if (!multiple.value) {\n            emit(BentoDropdownEvent.SELECT, newSelectedValue);\n        }\n    };\n\n    const onTabKey = (newSelectedValue: BentoListboxOptions) => {\n        onOptionSelected(newSelectedValue);\n        emit(BentoDropdownEvent.TAB);\n    };\n\n    const onEnterKey = (newSelectedValue: BentoListboxOptions) => {\n        onOptionSelected(newSelectedValue);\n        emit(BentoDropdownEvent.ENTER);\n    };\n\n    const onSpaceKey = (newSelectedValue: BentoListboxOptions) => {\n        onOptionSelected(newSelectedValue);\n        emit(BentoDropdownEvent.SPACE);\n    };\n\n    const onEscapeKey = () => {\n        onCancelClick();\n        emit(BentoListboxEvent.ESCAPE);\n    };\n\n    const emitShowMoreEvent = () => {\n        emit(BentoDropdownEvent.SHOW_MORE);\n    };\n\n    const listeners = {\n        [BentoListboxEvent.SELECT]: onOptionSelected,\n        [BentoListboxEvent.SHOW_MORE]: emitShowMoreEvent,\n        [BentoListboxEvent.TAB]: onTabKey,\n        [BentoListboxEvent.SPACE]: onSpaceKey,\n        [BentoListboxEvent.ENTER]: onEnterKey,\n    };\n\n    return {\n        // Values\n        actions,\n        internalSelectedValue,\n\n        // Methods\n        listeners,\n        onEscapeKey,\n        onOutsideDropdownClick,\n    };\n};\n","<template>\n    <component\n        :is=\"popperContainerOrPopoverComponent\"\n        class=\"b-dropdown-options-container\"\n        :class=\"conditionalClasses\"\n        v-bind=\"popperContainerOrPopoverProps\"\n    >\n        <div @keydown.esc=\"onEscapeKey\">\n            <bento-listbox\n                :id=\"id\"\n                ref=\"dropdownOptionsListboxRef\"\n                :aria-label=\"ariaLabel\"\n                class=\"b-dropdown-options-container__listbox\"\n                :class=\"conditionalListboxClasses\"\n                :component-loading=\"componentLoading\"\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, type PropType, ref, toRefs, useSlots } from 'vue';\n    import { BentoListbox } from '@/internal';\n    import {\n        type BentoListboxEvent,\n        type BentoListboxIsOptionDisabled,\n        type BentoListboxOptions,\n    } from '@/types/listbox';\n    import { PopperContainer } from '@/components/popper-container';\n    import {\n        type BentoDropdownEmptyStateProps,\n        type BentoDropdownEvent,\n        BentoDropdownLazyLoadType,\n        type 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 '@/core/utils/ts';\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    const props = defineProps({\n        /**\n         * Defines a string value that labels an interactive element.\n         */\n        ariaLabel: { type: String, default: null },\n\n        /**\n         * Indicates that dropdown items are loading\n         */\n        componentLoading: { 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         * 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 lazy 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                  ariaLabel: props.ariaLabel,\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=\"#001222\" 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    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\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=\"#001222\" 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    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","<template>\n    <div class=\"b-dropdown-small-textbox\" :class=\"conditionalClasses\">\n        <dropdown-base-textbox\n            ref=\"baseTextbox\"\n            v-bind=\"{ ...$attrs, ...$props }\"\n            class=\"b-dropdown-small-textbox__textbox\"\n            :size=\"BentoDropdownSize.SMALL\"\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, type PropType, ref } from 'vue';\n    import {\n        DropdownBaseTextboxEvent,\n        DropdownBaseTextboxState,\n    } from '@/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.types';\n    import { BentoDropdownSize } from '@/components/dropdown/dropdown.types';\n    import { type Booleanish } from '@/types/prop-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    import { stopEventPropagation } from '@/utils/ts/events';\n\n    const emit = defineEmits([\"clear\", \"close\", \"input\", \"keydown\", \"open\"]);\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 baseTextbox = ref(null);\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 onInput = (newInput: string) => {\n        emit('input', newInput);\n    };\n    const onKeyDown = (e: KeyboardEvent) => {\n        emit('keydown', e);\n    };\n    const openDropdown = (e: Event) => {\n        stopEventPropagation(e);\n        emit('open');\n    };\n    const closeDropdown = (e: Event) => {\n        stopEventPropagation(e);\n        emit('close');\n    };\n    const clearValue = (e: Event) => {\n        stopEventPropagation(e);\n        emit('clear');\n    };\n\n    const listeners = {\n        [DropdownBaseTextboxEvent.INPUT]: onInput,\n        [DropdownBaseTextboxEvent.OPEN]: openDropdown,\n        [DropdownBaseTextboxEvent.CLOSE]: closeDropdown,\n        [DropdownBaseTextboxEvent.CLEAR]: clearValue,\n        [DropdownBaseTextboxEvent.KEYDOWN]: onKeyDown,\n    };\n\n    const focus = () => {\n        baseTextbox.value.focus();\n    };\n\n    defineExpose({\n        focus,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * For internal use only, textbox component 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, type Ref } from 'vue';\nimport { type UseDisplayValueOptions } from './use-display-value.types';\nimport { type BentoListboxOptions } from '@/types/listbox';\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.displayValue ?? option.label);\n                } else {\n                    // If category is partially selected add each selected option and category\n                    selectedCategoryOptions.forEach(({ label, displayValue }) => acc.push(displayValue ?? label));\n                }\n            }\n\n            // Non-category option\n            if (selectedValues.value.find(selectedOption => selectedOption.value === option.value)) {\n                acc.push(option.displayValue ?? 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, isMultiSelect }: UseDisplayValueOptions) => {\n    const isCategoryMultilevel = computed(\n        () => isMultiSelect.value && items.value.find(option => option.items?.length)\n    );\n\n    const computedDisplayValue = 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, displayValue }) => displayValue ?? label).join(', ');\n    });\n\n    return computedDisplayValue;\n};\n","import { BentoKeyboardNavigationKeyDownEvent } from '@/types/keyboard-navigation';\nimport { BentoListboxEvent } from '@/types/listbox';\nimport { computed, nextTick, type Ref } from 'vue';\nimport {\n    type UseListboxKeyboardNavigationOptions,\n    type 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 Down\n * - Arrow Up\n * - Home key\n * - End key\n * - Space key\n * - Enter key\n * - Tab\n * - Escape 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 focusOnOption = async (index: number) => {\n        if (isDynamicFltering.value) {\n            await nextTick();\n        }\n        items.value[index]?.focus();\n    };\n\n    const focusOnChip = async (index: number) => {\n        if (isDynamicFltering.value) {\n            await nextTick();\n        }\n\n        const chips =\n            optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef?.$el.querySelectorAll(\n                'button'\n            );\n\n        if (chips.length) {\n            chips[index]?.focus();\n        } else {\n            focusOnOption(index);\n        }\n    };\n\n    const setListboxFocusedIndex = (selectedIndex: number) => {\n        return optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef?.setListboxFocusedIndex(\n            selectedIndex\n        );\n    };\n\n    const skipToFirstOption = () => {\n        if (!isDropdownOpen.value) {\n            openDropdown();\n        }\n\n        nextTick(() => {\n            setListboxFocusedIndex(0);\n            focusOnOption(0);\n        });\n    };\n\n    const skipToLastOption = () => {\n        if (!isDropdownOpen.value) {\n            openDropdown();\n        }\n\n        nextTick(() => {\n            setListboxFocusedIndex(items.value.length - 1);\n            focusOnOption(items.value.length - 1);\n        });\n    };\n\n    const onArrowDown = ({ detail: event }) => {\n        event.preventDefault();\n\n        skipToFirstOption();\n    };\n\n    const onArrowUp = ({ detail: event }) => {\n        event.preventDefault();\n\n        skipToLastOption();\n    };\n\n    const onHomeKey = () => {\n        skipToFirstOption();\n    };\n\n    const onEndKey = () => {\n        skipToLastOption();\n    };\n\n    const onSpaceKey = ({ detail: event }) => {\n        event.preventDefault();\n        toggleDropdown();\n        if (isDropdownOpen.value) {\n            nextTick(() => {\n                if (isMultiple) {\n                    focusOnChip(0);\n                } else {\n                    setListboxFocusedIndex(selectedValueIndex.value);\n                    focusOnOption(selectedValueIndex.value);\n                }\n            });\n        }\n    };\n\n    const onEnterKey = ({ detail: event }) => {\n        event.preventDefault();\n        toggleDropdown();\n        if (isDropdownOpen.value) {\n            nextTick(() => {\n                if (isMultiple) {\n                    focusOnChip(0);\n                } else {\n                    setListboxFocusedIndex(selectedValueIndex.value);\n                    focusOnOption(selectedValueIndex.value);\n                }\n            });\n        }\n    };\n\n    const onTab = () => {\n        // tab should not navigate through a combobox\n        if (isDropdownOpen.value) {\n            closeDropdown();\n        }\n    };\n\n    const onEscapeKey = () => {\n        if (isDropdownOpen.value) {\n            closeDropdown();\n            focusOnTextbox(inputContainerRef);\n        }\n    };\n\n    const textboxKeyboardNavigationListeners = computed(() => ({\n        [BentoKeyboardNavigationKeyDownEvent.ARROW_DOWN]: onArrowDown,\n        [BentoKeyboardNavigationKeyDownEvent.ARROW_UP]: onArrowUp,\n        [BentoKeyboardNavigationKeyDownEvent.HOME]: onHomeKey,\n        [BentoKeyboardNavigationKeyDownEvent.END]: onEndKey,\n        ...(!isDynamicFltering.value ? { [BentoKeyboardNavigationKeyDownEvent.SPACE]: onSpaceKey } : {}),\n        [BentoKeyboardNavigationKeyDownEvent.ENTER]: onEnterKey,\n        [BentoKeyboardNavigationKeyDownEvent.TAB]: onTab,\n        [BentoKeyboardNavigationKeyDownEvent.ESCAPE]: onEscapeKey,\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, type Ref, watch } from 'vue';\nimport { type 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 * @param {Ref<Boolean>} ignoreGroups - Boolean that determines if search returns items with subitems\n */\nexport function useSearchBarFilter<T extends BentoSearchBarItem>(\n    searchTerm: Ref<string>,\n    data: Ref<Array<T>>,\n    searchEvent?: (searchValue: string) => void,\n    ignoreGroups?: Ref<boolean>\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                if (ignoreGroups?.value && option.items) {\n                    return [...findHits(searchTermLowerCased, option.items)];\n                }\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');\nexport const INPUT_FIELD_HINT_INJECTION_KEY = Symbol('input field hint injection key');\nexport const INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY = Symbol('input field parent 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=\"computedSize\"\n                ref=\"inputContainerRef\"\n                :condensed=\"condensed\"\n                :value=\"searchTerm\"\n                :additional-items-selected=\"additionalItemsSelected\"\n                :aria-controls=\"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                :required=\"required\"\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            :component-loading=\"componentLoading\"\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 {\n        computed,\n        defineComponent,\n        inject,\n        nextTick,\n        type Ref,\n        ref,\n        toRef,\n        toRefs,\n        useAttrs,\n        useSlots,\n        watch,\n    } from 'vue';\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 '@/core/utils/ts';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n    // Composables\n    import { useDisplayValue, useListboxKeyboardNavigation, useTextboxKeyboardNavigation } from './composables';\n    import { useVisibleDomOptions } from '@/internal/listbox/composables/use-visible-dom-options/use-visible-dom-options';\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 { BentoDropdownEvent, type BentoDropdownProps, BentoDropdownSize } from './dropdown.types';\n    import {\n        BentoListboxEvent,\n        type BentoListboxItemRole,\n        type BentoListboxMultiSelectValue,\n        type BentoListboxOptions,\n        type BentoListboxSelectedValue,\n        type BentoListboxSelectedValueLabelPair,\n    } from '@/types/listbox';\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  description: { default: null },\n  disabled: { type: Boolean, default: false },\n  errorMessage: { default: null },\n  label: { default: null },\n  optional: { type: Boolean, default: false },\n  placeholder: { default: null },\n  readonly: { type: Boolean, default: false },\n  required: { type: Boolean, default: false },\n  tooltipText: { default: null },\n  ariaLabel: { default: null },\n  condensed: { type: Boolean, default: false },\n  emptyState: { default: undefined },\n  dynamicFiltering: { type: Boolean, default: false },\n  error: { type: Boolean, default: false },\n  hasMoreItems: { type: Boolean, default: false },\n  isOptionDisabled: { type: Function, default: undefined },\n  items: { default: () => [] },\n  loading: { type: Boolean, default: false },\n  componentLoading: { type: Boolean, default: false },\n  lazyLoadType: { default: BentoListbox.props.lazyLoadType.default },\n  multiple: { type: Boolean, default: false },\n  search: { default: undefined },\n  showSlotContentInMultiple: { type: Boolean, default: false },\n  size: { default: null },\n  staticCategories: { type: Boolean, default: false },\n  value: { default: null },\n  modelValue: { default: null },\n  virtualScroll: { type: Boolean, default: false },\n  enableValueLabelPair: { type: Boolean, default: false }\n});\n\n    const emit = defineEmits([\"input\", \"update:model-value\", \"show-more\", \"open\"]);\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\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 dropdownValue = computed(() => props.modelValue ?? props.value);\n\n    const { cachedSelectedListboxOptions, cachedListboxSelectedValues, setCachedValues } = useCachedSelectedValues(\n        toRef(props, 'items'),\n        dropdownValue,\n        toRef(props, 'multiple'),\n        toRef(props, 'enableValueLabelPair')\n    );\n\n    const ariaLabelAttribute = ref(attrs['aria-label']);\n    const ariaDescribedByAttribute = ref(attrs['aria-describedby']);\n    const { ariaLabel, label } = toRefs(props);\n\n    // vue-i18n issue with t() used in script - direct usage in template works\n    // requires either createI18n({ legacy: false }) or to be wrapped in computed()\n    const computedAriaLabelFallbackMessage = computed(() => t('ariaLabelFallback'));\n    const computedAriaLabel = useAriaLabel({\n        // TODO: take ariaLabel ref away when aria-label prop is removed\n        ariaLabel: ariaLabel.value || (ariaLabelAttribute as Ref<string>),\n        label,\n        defaultFallback: computedAriaLabelFallbackMessage,\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 computedSize = 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 staticCategories = toRef(props, 'staticCategories');\n    const filteredItems = useSearchBarFilter(searchTerm, items, props?.search?.searchEvent, staticCategories);\n    const isSearching = computed(() => props.dynamicFiltering && !!searchTerm.value);\n\n    const displayValue = useDisplayValue({\n        items,\n        placeholder: toRef(props, 'placeholder'),\n        isMultiSelect: toRef(props, 'multiple'),\n        selectedValues: cachedSelectedListboxOptions,\n    });\n\n    const selectedValueItem = computed(() => {\n        if (props?.multiple && Array.isArray(dropdownValue.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 === dropdownValue.value)\n            );\n            // Find the specific item within the category\n            const selectedCategoryItem = category\n                ? category.items.find(item => item.value === dropdownValue.value)\n                : null;\n\n            return selectedCategoryItem;\n        }\n\n        return props.items.find(({ value }) => value === dropdownValue.value);\n    });\n\n    const selectedValueIndex = computed(() => {\n        const index = filteredItems.value.findIndex(({ value }) => {\n            return props.enableValueLabelPair\n                ? (dropdownValue.value as BentoListboxSelectedValueLabelPair).value === value\n                : dropdownValue.value === value;\n        });\n        return index > -1 ? index : 0;\n    });\n\n    const { isMultiLevelSelect, flattenedItemsList } = useMultiLevelItems(items);\n\n    const isTreePattern = computed(() => isMultiLevelSelect.value && !props.staticCategories);\n\n    const computedOptionRole = computed<BentoListboxItemRole>(() => (isTreePattern.value ? 'treeitem' : 'option'));\n\n    const additionalItemsSelected = computed(() => {\n        if (props.multiple) {\n            const selectedItemsCount = Array.isArray(dropdownValue.value) ? dropdownValue.value.length : 0;\n            const total = isMultiLevelSelect.value ? flattenedItemsList.value.length : items.value.length;\n\n            if (selectedItemsCount === 0) {\n                return null;\n            }\n\n            // Display count always - show \"all\" only when is not external filtering (hasMoreItems = true)\n            if (!props.hasMoreItems && total > 0 && total === selectedItemsCount) {\n                return t('all');\n            }\n\n            return selectedItemsCount;\n        }\n\n        return null;\n    });\n\n    // ARIA\n    const ariaDescribedBy = computed(\n        () =>\n            [\n                props.description ? descriptionId : null,\n                ariaDescribedByAttribute.value,\n                props.errorMessage ? errorId : null,\n            ]\n                .filter(Boolean)\n                .join(' ') || null\n    );\n\n    const listboxRef = computed(() => optionsContainerRef.value?.$el as HTMLDivElement);\n\n    const { visibleDomOptions, updateVisibleDomOptions } = useVisibleDomOptions(\n        listboxRef,\n        filteredItems,\n        computedOptionRole\n    );\n\n    const openDropdown = () => {\n        if (isReadOnly.value) {\n            return;\n        }\n        isDropdownOpen.value = true;\n        nextTick(() => {\n            updateVisibleDomOptions();\n        });\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        nextTick(() => {\n            updateVisibleDomOptions();\n        });\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            focus();\n        }\n\n        setCachedValues(selectedValue);\n\n        /**\n         * Emit the value/label pair objects if enableValueLabelPair is enabled,\n         * otherwise just emit the list of selected values (number or string)\n         */\n        emitValue(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: visibleDomOptions,\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\n    if (props.value) {\n        deprecate(\n            'BentoDropdown \"value\" property',\n            `The use of \"value\" prop in \"BentoDropdown\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\n            '2.0.0'\n        );\n    }\n\n    const focus = () => {\n        inputContainerRef.value.focus();\n    };\n\n    watch(\n        () => isDropdownOpen.value,\n        (isOpen: boolean) => {\n            if (isOpen) {\n                emit('open');\n            }\n        }\n    );\n\n    defineExpose({\n        focus,\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        model: { prop: 'modelValue' },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown.scss\" />\n"],"names":["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","baseTextbox","DropdownBaseTextboxState","onInput","newInput","onKeyDown","e","openDropdown","stopEventPropagation","closeDropdown","clearValue","DropdownBaseTextboxEvent","focus","categoryMultiSelect","selectedValues","items","acc","option","selectedCategoryOptions","categoryOption","selectedOption","label","displayValue","useDisplayValue","placeholder","isMultiSelect","isCategoryMultilevel","focusOnTextbox","elementToFocusOn","useTextboxKeyboardNavigation","inputContainerRef","optionsContainerRef","selectedValueIndex","isDynamicFltering","isMultiple","toggleDropdown","focusOnOption","index","nextTick","focusOnChip","chips","_b","setListboxFocusedIndex","selectedIndex","skipToFirstOption","skipToLastOption","onArrowDown","event","onArrowUp","onHomeKey","onEndKey","onTab","BentoKeyboardNavigationKeyDownEvent","useListboxKeyboardNavigation","closeDropdownAndFocusOnTextbox","useSearchBarFilter","searchTerm","data","searchEvent","ignoreGroups","searchTermRef","dataRef","findHits","searchTermLowerCased","options","INPUT_FIELD_COMPONENT_INJECTION_KEY","INPUT_FIELD_HINT_INJECTION_KEY","INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY","__default__","messages","DropdownInputDefault","DropdownInputSmall","attrs","useAttrs","hasSlot","useHasSlot","emitValue","useFormFieldEmits","inputContainerRefWrapper","dropdownOptionsContainerId","labelId","descriptionId","errorId","isReadOnly","useFormLayoutFieldLoading","toRef","dropdownValue","cachedSelectedListboxOptions","cachedListboxSelectedValues","setCachedValues","useCachedSelectedValues","ariaLabelAttribute","ariaDescribedByAttribute","ariaLabel","computedAriaLabelFallbackMessage","computedAriaLabel","useAriaLabel","isInputComponent","BentoDropdownSize","inject","computedSize","descriptionConditionalClasses","staticCategories","filteredItems","isSearching","selectedValueItem","value","category","categoryItem","item","isMultiLevelSelect","flattenedItemsList","useMultiLevelItems","isTreePattern","computedOptionRole","additionalItemsSelected","selectedItemsCount","total","ariaDescribedBy","listboxRef","visibleDomOptions","updateVisibleDomOptions","useVisibleDomOptions","clickOutsideDropdown","textboxKeyboardNavigationListeners","listboxKeyboardNavigationListeners","listboxListeners","deprecate"],"mappings":"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"}

package/dist/chunks/field-label.CEkJnsiL.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"field-label.CEkJnsiL.js","sources":["../../src/components/internal/error-message/error-message.vue","../../src/components/internal/field-label/field-label.vue"],"sourcesContent":["<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","<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"],"names":["__default__$1","messages$1","t","useI18n","__default__","messages","conditionalClasses","computed","props"],"mappings":";;;;;;;;;;;;;;;;;GA+CIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;;;;AAPA,UAAA,EAAA,GAAAC,EAAA,IAAAC,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCwCAC,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBArBA,EAAA,GAAAH,EAAA,IAAAC,EAAA,GAEAG,IAAAC,EAAA,OAAA,EAAA,4BAAAC,EAAA,UAAA,EAAA;;;;;;;;;;;;;;;;"}