@adyen/bento-vue3 2.0.1 → 2.1.0

package/dist/chunks/{draggable.BZsgR26I.js → draggable.jzTSFcM7.js}

@@ -1,10 +1,10 @@
-import { ref as l, defineComponent as k, computed as C, watch as A, openBlock as b, createBlock as U, resolveDynamicComponent as N, withCtx as z, createElementBlock as K, Fragment as V, renderList as G, renderSlot as X, createElementVNode as Y, toDisplayString as j, unref as q, nextTick as T } from "vue";
-import { u as J, a as $ } from "./draggable-handle.Cvc8gHzx.js";
-import { u as Q } from "./index.B875RXHM.js";
-import { e as W, f as d } from "./index.DCpihRYV.js";
-import { _ as Z } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { ref as l, defineComponent as C, computed as A, watch as U, openBlock as b, createBlock as N, resolveDynamicComponent as z, withCtx as K, createElementBlock as V, Fragment as G, renderList as X, renderSlot as Y, createElementVNode as j, toDisplayString as q, unref as J, nextTick as P } from "vue";
+import { u as $, a as Q } from "./draggable-handle.CKkSJP0K.js";
+import { u as W } from "./index.CGBfMQdv.js";
+import { e as Z, f as d } from "./index.DCpihRYV.js";
+import { _ as ee } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import "../assets/draggable.css";
-const ee = W(() => {
+const oe = Z(() => {
   const s = l(!1);
   return typeof window < "u" && (d(
     window,
@@ -30,7 +30,7 @@ const ee = W(() => {
   ), d(window, "blur", () => {
     s.value = !1;
   })), { isKeyboardUser: s };
-}), P = {
+}), T = {
   "de-DE": { youHaveMovedFromPositionToPosition: "Sie haben {itemLabel} von Position {indexOrigin} an Position {indexTarget} von {total} verschoben." },
   "en-GB": { youHaveMovedFromPositionToPosition: "You have moved {itemLabel} from position {indexOrigin} to position {indexTarget} of {total}." },
   "en-US": { youHaveMovedFromPositionToPosition: "You have moved {itemLabel} from position {indexOrigin} to position {indexTarget} of {total}." },
@@ -42,16 +42,16 @@ const ee = W(() => {
   "ja-JP": { youHaveMovedFromPositionToPosition: "{itemLabel} を {indexOrigin} の位置から {total} の {indexTarget} の位置に移動しました。" },
   "pt-BR": { youHaveMovedFromPositionToPosition: "Você moveu {itemLabel} da posição {indexOrigin} para a posição {indexTarget} de {total}." },
   "zh-CN": { youHaveMovedFromPositionToPosition: "您已将 {itemLabel} 从 {indexOrigin} 位置移动到 {indexTarget} 位置（共 {total} 个位置）。" }
-}, oe = {
+}, te = {
   class: "b-draggable__announcement",
   role: "status",
   "aria-live": "polite"
-}, te = {
+}, ne = {
   name: "bento-draggable",
   model: { prop: "items", event: "update:items" },
-  i18n: { messages: P }
-}, ne = /* @__PURE__ */ k({
-  ...te,
+  i18n: { messages: T }
+}, ie = /* @__PURE__ */ C({
+  ...ne,
   props: {
     announcement: { default: "" },
     disableAutoSort: { type: Boolean, default: !1 },
@@ -61,7 +61,7 @@ const ee = W(() => {
   },
   emits: ["update:items"],
   setup(s, { expose: c, emit: y }) {
-    const h = ">:not(.b-draggable__announcement)", o = s, _ = y, r = l(null), v = l(!1), m = l([]), u = l(null), E = C(() => r.value ? {
+    const h = ">:not(.b-draggable__announcement)", o = s, _ = y, r = l(null), v = l(!1), m = l([]), u = l(null), E = A(() => r.value ? {
       ...o.options,
       draggable: o.options?.draggable ?? h,
       onStart: (e) => {
@@ -79,27 +79,30 @@ const ee = W(() => {
         }
         if (!o.disableAutoSort) {
           const { oldIndex: t, newIndex: i, from: n, to: f } = e;
-          n === f && n === r.value && t !== void 0 && i !== void 0 && a(t, i);
+          n === f && n === r.value && t !== void 0 && i !== void 0 && (M(e), a(t, i));
         }
       }
-    } : {}), { announcementMessage: L, announce: g } = J(), { t: w } = Q({ messages: P }), { draggableElement: M } = $(r, E), { isKeyboardUser: H } = ee(), p = async (e) => {
-      if (await T(), e !== -1 && r.value) {
+    } : {}), { announcementMessage: L, announce: g } = $(), { t: w } = W({ messages: T }), { draggableElement: I } = Q(r, E), M = (e) => {
+      const { from: t, item: i, oldIndex: n } = e;
+      !i || n === void 0 || (i.remove(), t.insertBefore(i, t.children[n] ?? null));
+    }, { isKeyboardUser: H } = oe(), p = async (e) => {
+      if (await P(), e !== -1 && r.value) {
         const i = r.value.children[e]?.querySelector(".b-draggable-handle button");
-        await T(), i?.focus();
+        await P(), i?.focus();
       }
     }, a = async (e, t) => {
       if (e < 0 || t < 0 || e >= o.items.length || t >= o.items.length || e === t)
         return;
       const i = Array.from(o.items), [n] = i.splice(e, 1);
       i.splice(t, 0, n), u.value = n, _("update:items", i.filter(Boolean));
-      const f = n.label, R = o?.announcement || w("youHaveMovedFromPositionToPosition", {
+      const f = n.label, k = o?.announcement || w("youHaveMovedFromPositionToPosition", {
         itemLabel: f,
         indexOrigin: e + 1,
         indexTarget: t + 1,
         total: o.items.length
       });
-      o.announcement !== "disabled" && g(R);
-    }, S = (e) => a(e, e - 1), I = (e) => a(e, e + 1), F = (e) => a(e, e - 1), x = (e) => a(e, e + 1), B = (e) => a(e, 0), D = (e) => a(e, o.items.length - 1), O = (e) => ({
+      o.announcement !== "disabled" && g(k);
+    }, S = (e) => a(e, e - 1), F = (e) => a(e, e + 1), x = (e) => a(e, e - 1), B = (e) => a(e, e + 1), D = (e) => a(e, 0), O = (e) => a(e, o.items.length - 1), R = (e) => ({
       up: e === 0,
       top: e === 0,
       down: e === o.items.length - 1,
@@ -107,7 +110,7 @@ const ee = W(() => {
       left: !0,
       right: !0
     });
-    return A(
+    return U(
       () => o.items,
       async (e) => {
         if (e) {
@@ -132,7 +135,7 @@ const ee = W(() => {
       /**
        * The underlying SortableJS instance, which provides methods like `toArray()`, `sort()`, and `destroy()`.
        */
-      draggableElement: M,
+      draggableElement: I,
       /**
        * A boolean ref that is `true` when an item is being dragged.
        */
@@ -149,29 +152,29 @@ const ee = W(() => {
        * Programmatically focuses the draggable handle button at the given index.
        */
       focus: p
-    }), (e, t) => (b(), U(N(e.el), {
+    }), (e, t) => (b(), N(z(e.el), {
       ref_key: "containerRef",
       ref: r
     }, {
-      default: z(() => [
-        (b(!0), K(V, null, G(e.items, (i, n) => X(e.$slots, "default", {
+      default: K(() => [
+        (b(!0), V(G, null, X(e.items, (i, n) => Y(e.$slots, "default", {
           item: i,
           index: n,
           moveUp: () => S(n),
-          moveRight: () => x(n),
-          moveDown: () => I(n),
-          moveLeft: () => F(n),
-          moveTop: () => B(n),
-          moveBottom: () => D(n),
-          disabledMenus: O(n)
+          moveRight: () => B(n),
+          moveDown: () => F(n),
+          moveLeft: () => x(n),
+          moveTop: () => D(n),
+          moveBottom: () => O(n),
+          disabledMenus: R(n)
         }, void 0, !0)), 256)),
-        Y("div", oe, j(q(L)), 1)
+        j("div", te, q(J(L)), 1)
       ]),
       _: 3
     }, 512));
   }
-}), me = /* @__PURE__ */ Z(ne, [["__scopeId", "data-v-9485ca6b"]]);
+}), ue = /* @__PURE__ */ ee(ie, [["__scopeId", "data-v-8e20b522"]]);
 export {
-  me as d
+  ue as d
 };
-//# sourceMappingURL=draggable.BZsgR26I.js.map
+//# sourceMappingURL=draggable.jzTSFcM7.js.map

package/dist/chunks/draggable.jzTSFcM7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"draggable.jzTSFcM7.js","sources":["../../../vue2/src/components/draggable/composables/use-track-keyboard-user/use-track-keyboard-user.ts","../../../vue2/src/components/draggable/draggable.vue"],"sourcesContent":["import { createGlobalState, useEventListener } from '@vueuse/core';\nimport { ref } from 'vue';\n\nexport const useTrackKeyboardUser = createGlobalState(() => {\n    // 1. Define this OUTSIDE the setup function so it acts as a global singleton\n    const isKeyboardUser = ref(false);\n\n    if (typeof window !== 'undefined') {\n        // Switch to keyboard mode on Tab\n        useEventListener(\n            window,\n            'keydown',\n            e => {\n                if (e.key === 'Tab') {\n                    isKeyboardUser.value = true;\n                }\n            },\n            { capture: true }\n        );\n\n        // Switch back to mouse mode on click/touch\n        useEventListener(\n            window,\n            'mousedown',\n            () => {\n                isKeyboardUser.value = false;\n            },\n            { capture: true }\n        );\n\n        useEventListener(\n            window,\n            'touchstart',\n            () => {\n                isKeyboardUser.value = false;\n            },\n            { capture: true, passive: true }\n        );\n\n        useEventListener(window, 'blur', () => {\n            isKeyboardUser.value = false;\n        });\n    }\n\n    return { isKeyboardUser };\n});\n","<template>\n    <component :is=\"el\" ref=\"containerRef\">\n        <slot\n            v-for=\"(item, index) of items\"\n            :item=\"item\"\n            :index=\"index\"\n            :move-up=\"() => moveItemUp(index)\"\n            :move-right=\"() => moveItemRight(index)\"\n            :move-down=\"() => moveItemDown(index)\"\n            :move-left=\"() => moveItemLeft(index)\"\n            :move-top=\"() => moveItemTop(index)\"\n            :move-bottom=\"() => moveItemBottom(index)\"\n            :disabled-menus=\"disabledMenuItems(index)\"\n            name=\"default\"\n        ></slot>\n        <div class=\"b-draggable__announcement\" role=\"status\" aria-live=\"polite\">\n            {{ announcementMessage }}\n        </div>\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, ref, watch } from 'vue';\n    import type {\n        BentoDraggableEmits,\n        BentoDraggableItems,\n        BentoDraggableOptions,\n        BentoDraggableProps,\n        BentoDraggableSortableEvent,\n    } from './draggable.types';\n    import { useBentoDraggable } from './composables/use-bento-draggable/use-bento-draggable';\n    import { useDraggableAnnouncement } from './composables/use-draggable-announcement';\n    import { useTrackKeyboardUser } from './composables/use-track-keyboard-user';\n    import { useI18n } from '@/utils/ts/i18n';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const ALL_CHILDREN_EXCEPT_SCREEN_READER_ELEMENTS = '>:not(.b-draggable__announcement)';\n\n    const props = withDefaults(defineProps<BentoDraggableProps>(), {\n        el: 'div',\n        items: () => [],\n        options: () => ({}),\n        announcement: '',\n        disableAutoSort: false,\n    });\n\n    const emit = defineEmits<BentoDraggableEmits>();\n\n    /**\n     * Reference to the container of the draggable elements.\n     */\n    const containerRef = ref<HTMLElement | null>(null);\n    /**\n     * Indicates if there is an element being dragged inside the container.\n     */\n    const isDragging = ref<boolean>(false);\n\n    /**\n     * Internal copy of items used to track position changes for focus restoration.\n     */\n    const internalItems = ref<BentoDraggableItems>([]);\n\n    /**\n     * Tracks the item being moved via keyboard so focus can be restored to the correct element.\n     */\n    const lastMovedItem = ref<BentoDraggableItems[number] | null>(null);\n\n    const computedOptions = computed<BentoDraggableOptions>(() => {\n        if (!containerRef.value) {\n            return {};\n        }\n\n        return {\n            ...props.options,\n            draggable: props.options?.draggable ?? ALL_CHILDREN_EXCEPT_SCREEN_READER_ELEMENTS,\n            onStart: (event: BentoDraggableSortableEvent) => {\n                isDragging.value = true;\n\n                if (props.options?.onStart) {\n                    props.options?.onStart(event);\n                }\n            },\n            onEnd: (event: BentoDraggableSortableEvent) => {\n                // This is a hack to move the event to the end of the event queue.\n                // cf this issue: https://github.com/SortableJS/Sortable/issues/1184\n                setTimeout(() => {\n                    isDragging.value = false;\n\n                    if (props.options?.onEnd) {\n                        props.options?.onEnd(event);\n                    }\n                });\n            },\n            onSort: (event: BentoDraggableSortableEvent) => {\n                // Always execute the user's custom onSort callback if provided\n                if (props.options?.onSort) {\n                    props.options.onSort(event);\n                    return;\n                }\n\n                // Automatically sync the v-model unless the user explicitly disabled it\n                if (!props.disableAutoSort) {\n                    const { oldIndex, newIndex, from, to } = event;\n\n                    if (\n                        from === to &&\n                        from === containerRef.value &&\n                        oldIndex !== undefined &&\n                        newIndex !== undefined\n                    ) {\n                        restoreItemDomPosition(event);\n                        moveItem(oldIndex, newIndex);\n                    }\n                }\n            },\n        };\n    });\n\n    /**\n     * Handle reordering announcements for screen readers.\n     */\n    const { announcementMessage, announce } = useDraggableAnnouncement();\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const { draggableElement } = useBentoDraggable(containerRef, computedOptions);\n\n    /**\n     * Restores the item that SortableJS moved directly in the DOM before updating the reactive items.\n     * This keeps Vue responsible for rendering the final order and prevents the move from being applied twice.\n     *\n     * @param event SortableJS event containing the moved item and its original index.\n     */\n    const restoreItemDomPosition = (event: BentoDraggableSortableEvent) => {\n        const { from, item, oldIndex } = event;\n\n        if (!item || oldIndex === undefined) {\n            return;\n        }\n\n        item.remove();\n        from.insertBefore(item, from.children[oldIndex] ?? null);\n    };\n\n    // When moving items between sibling `bento-draggable`, the item may be removed, causing the DOM to be destroyed and temporarily lose focus\n    // This is an alternative to query element `:focus-within` as the `:focus-within` will be gone until the other `bento-draggable` adds it into the list\n    const { isKeyboardUser } = useTrackKeyboardUser();\n\n    /**\n     * Focuses the draggable handle button at the given index.\n     * Waits for the next tick to ensure the DOM has been updated before focusing.\n     *\n     * @param index - The index of the item whose handle should receive focus.\n     */\n    const focus = async (index: number) => {\n        await nextTick();\n\n        if (index !== -1 && containerRef.value) {\n            const itemElement = containerRef.value.children[index] as HTMLElement;\n            const button = itemElement?.querySelector<HTMLButtonElement>('.b-draggable-handle button');\n            await nextTick();\n            button?.focus();\n        }\n    };\n\n    /**\n     * Moves an item from one position to another within the list,\n     * emits the updated list, and announces the change for screen readers.\n     *\n     * @param indexOrigin - The current index of the item to move.\n     * @param indexTarget - The desired index to move the item to.\n     */\n    const moveItem = async (indexOrigin: number, indexTarget: number) => {\n        if (\n            indexOrigin < 0 ||\n            indexTarget < 0 ||\n            indexOrigin >= props.items.length ||\n            indexTarget >= props.items.length ||\n            indexOrigin === indexTarget\n        ) {\n            return;\n        }\n\n        const newList = Array.from(props.items as BentoDraggableItems);\n        const [removed] = newList.splice(indexOrigin, 1);\n        newList.splice(indexTarget, 0, removed);\n\n        lastMovedItem.value = removed;\n\n        // Occasionally, there may be race conditions where the index is out-of-date due to the fast drag-and-drop or\n        // other async operations like onEnd > setTimeout.\n        // Filtering out null/undefined values ensures the list remains valid.\n        emit('update:items', newList.filter(Boolean));\n\n        const itemLabel = removed.label;\n\n        const message =\n            props?.announcement ||\n            t('youHaveMovedFromPositionToPosition', {\n                itemLabel,\n                indexOrigin: indexOrigin + 1,\n                indexTarget: indexTarget + 1,\n                total: props.items.length,\n            });\n\n        if (props.announcement !== 'disabled') {\n            announce(message);\n        }\n    };\n\n    const moveItemUp = (index: number) => moveItem(index, index - 1);\n\n    const moveItemDown = (index: number) => moveItem(index, index + 1);\n\n    const moveItemLeft = (index: number) => moveItem(index, index - 1);\n\n    const moveItemRight = (index: number) => moveItem(index, index + 1);\n\n    const moveItemTop = (index: number) => moveItem(index, 0);\n\n    const moveItemBottom = (index: number) => moveItem(index, props.items.length - 1);\n\n    /**\n     * Returns a pre-calculated disabled menus object for the current item.\n     */\n    const disabledMenuItems = (index: number) => {\n        return {\n            up: index === 0,\n            top: index === 0,\n            down: index === props.items.length - 1,\n            bottom: index === props.items.length - 1,\n            left: true,\n            right: true,\n        };\n    };\n\n    /**\n     * Watch for items changes and restore focus automatically\n     */\n    watch(\n        () => props.items,\n        async newItems => {\n            if (!newItems) {\n                return;\n            }\n\n            if (isKeyboardUser.value && newItems.length > 0 && internalItems.value.length > 0) {\n                if (lastMovedItem.value) {\n                    // Within-list reorder: focus the moved item at its new position\n                    const movedItemIndex = newItems.indexOf(lastMovedItem.value);\n\n                    if (movedItemIndex !== -1) {\n                        await focus(movedItemIndex);\n                    }\n\n                    lastMovedItem.value = null;\n                } else if (newItems.length > internalItems.value.length) {\n                    // Cross-list addition: focus the newly added item\n                    const newItemIndex = newItems.findIndex(item => !internalItems.value.includes(item));\n\n                    if (newItemIndex !== -1) {\n                        await focus(newItemIndex);\n                    }\n                }\n            }\n\n            internalItems.value = [...newItems];\n        },\n        { deep: true, immediate: true }\n    );\n\n    defineExpose({\n        /**\n         * A ref to the container DOM element.\n         */\n        containerRef,\n        /**\n         * The underlying SortableJS instance, which provides methods like `toArray()`, `sort()`, and `destroy()`.\n         */\n        draggableElement,\n        /**\n         * A boolean ref that is `true` when an item is being dragged.\n         */\n        isDragging,\n        /**\n         * Announces a message to screen reader users via the live region.\n         */\n        announce,\n        /**\n         * Moves an item from one index to another and emits the updated list.\n         */\n        moveItem,\n        /**\n         * Programmatically focuses the draggable handle button at the given index.\n         */\n        focus,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Drag and drop container that transforms a list of items into draggable elements.\n     * The library is based on SortableJS.\n     * @see {@link https://github.com/SortableJS/Sortable#readme | SortableJS documentation}\n     *\n     * @example\n     * import { BentoDraggable, BentoDraggableHandle, type BentoDraggableEvents } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDraggable, BentoDraggableHandle },\n     *     template: `\n     *          <bento-draggable\n     *              v-model=\"items\"\n     *              condensed\n     *              :options=\"{\n     *                  group: 'nested',\n     *                  animation: 150\n     *              }\"\n     *          >\n     *              <template #default=\"{ item, index, moveUp, moveDown }\">\n     *                  <div :key=\"item.id\">\n     *                      <bento-draggable-handle\n     *                          :label=\"item.label\"\n     *                          @move-up=\"moveUp\"\n     *                          @move-down=\"moveDown\"\n     *                      />\n     *                  </div>\n     *              </template>\n     *          </bento-draggable>\n     *     `,\n     *      setup () {\n     *          const items = ref([\n     *              { id: '1', label: 'Item 1' },\n     *              { id: '2', label: 'Item 2' }\n     *          ]);\n     *          return {\n     *              items,\n     *          }\n     *      }\n     * }\n     */\n\n    export default {\n        name: 'bento-draggable',\n        model: { prop: 'items', event: 'update:items' },\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./draggable.scss\" />\n"],"names":["useTrackKeyboardUser","createGlobalState","isKeyboardUser","ref","useEventListener","e","__default__","messages","ALL_CHILDREN_EXCEPT_SCREEN_READER_ELEMENTS","props","__props","emit","__emit","containerRef","isDragging","internalItems","lastMovedItem","computedOptions","computed","event","oldIndex","newIndex","from","to","restoreItemDomPosition","moveItem","announcementMessage","announce","useDraggableAnnouncement","t","useI18n","draggableElement","useBentoDraggable","item","focus","index","nextTick","button","indexOrigin","indexTarget","newList","removed","itemLabel","message","moveItemUp","moveItemDown","moveItemLeft","moveItemRight","moveItemTop","moveItemBottom","disabledMenuItems","watch","newItems","movedItemIndex","newItemIndex","__expose"],"mappings":"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"}

package/dist/chunks/{drawer.D3j-d3q5.js → drawer.De-jDVb2.js}

@@ -1,7 +1,7 @@
 import { defineComponent as _, computed as s, openBlock as p, createElementBlock as w, createVNode as b, Transition as v, withCtx as M, withDirectives as f, createElementVNode as e, normalizeClass as h, renderSlot as t, vShow as B } from "vue";
 import { B as D, a as E } from "./es6.yPcTMnSH.js";
 import { d as S } from "./index.DCpihRYV.js";
-import { u as C } from "./index.B875RXHM.js";
+import { u as C } from "./index.CGBfMQdv.js";
 import { _ as I } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import "../assets/drawer.css";
 const o = {
@@ -62,4 +62,4 @@ const o = {
 export {
   $ as d
 };
-//# sourceMappingURL=drawer.D3j-d3q5.js.map
+//# sourceMappingURL=drawer.De-jDVb2.js.map

package/dist/chunks/{drawer.D3j-d3q5.js.map → drawer.De-jDVb2.js.map}

@@ -1 +1 @@
-{"version":3,"file":"drawer.D3j-d3q5.js","sources":["../../../vue2/src/components/drawer/drawer.vue"],"sourcesContent":["<template>\n    <div class=\"b-drawer\">\n        <Transition name=\"b-drawer__animation\">\n            <aside\n                v-show=\"isDrawerOpen\"\n                :id=\"props.drawerId\"\n                class=\"b-drawer__drawer\"\n                :class=\"conditionalDrawerClass\"\n                :aria-label=\"computedDrawerLabel\"\n            >\n                <div class=\"b-drawer__drawer-content\">\n                    <slot name=\"drawer\" />\n                </div>\n            </aside>\n        </Transition>\n\n        <div class=\"b-drawer__page\">\n            <div class=\"b-drawer__page-content\">\n                <slot name=\"page\" />\n            </div>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import messages from './messages.json';\n    import { type BentoDrawerProps } from './drawer.types';\n    import { BMediaQueryMMax, BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6';\n    import { useBreakpoints } from '@vueuse/core';\n    import { useI18n } from '@adyen/bento-vue-i18n-demi';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = withDefaults(defineProps<BentoDrawerProps>(), {\n        isDrawerOpen: false,\n        drawerLabel: '',\n    });\n\n    const breakpoints = useBreakpoints({\n        s: BMediaQuerySMax,\n        m: BMediaQueryMMax,\n    });\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const isSmallDevice = breakpoints.smallerOrEqual('m');\n    const isMobileDevice = breakpoints.smallerOrEqual('s');\n\n    const computedDrawerLabel = computed(() => {\n        return props.drawerLabel || t('menu');\n    });\n\n    const conditionalDrawerClass = computed(() => ({\n        'b-drawer__drawer--overlay-content': isSmallDevice.value,\n        'b-drawer__drawer--full-width': isMobileDevice.value,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The `bento-drawer` component provides a responsive drawer-based navigation system.\n     *\n     * @usage\n     * <bento-drawer\n     *     drawer-id=\"main-drawer\"\n     *     drawer-label=\"Main drawer\"\n     *     :is-drawer-open=\"true\"\n     * >\n     *     <template #menu>Drawer menu items</template>\n     *     <template #page>Main page content</template>\n     * </bento-drawer>\n     */\n    export default {\n        name: 'bento-drawer',\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./drawer.scss\" />\n"],"names":["__default__","messages","props","__props","breakpoints","useBreakpoints","BMediaQuerySMax","BMediaQueryMMax","t","useI18n","isSmallDevice","isMobileDevice","computedDrawerLabel","computed","conditionalDrawerClass"],"mappings":";;;;;;;;;;;;;;;;;;6KAyEIA,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,MAAA,EAAA,UAAAC,EAAA;AAEV;;;;;;;;AA1CA,UAAAC,IAAAC,GAKAC,IAAAC,EAAA;AAAA,MAAmC,GAAAC;AAAA,MAC5B,GAAAC;AAAA,IACA,CAAA,GAGP,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAR,EAAA,CAAA,GAEAS,IAAAN,EAAA,eAAA,GAAA,GACAO,IAAAP,EAAA,eAAA,GAAA,GAEAQ,IAAAC,EAAA,MACIX,EAAA,eAAAM,EAAA,MAAA,CAAoC,GAGxCM,IAAAD,EAAA,OAAA;AAAA,MAA+C,qCAAAH,EAAA;AAAA,MACQ,gCAAAC,EAAA;AAAA,IACJ,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"drawer.De-jDVb2.js","sources":["../../../vue2/src/components/drawer/drawer.vue"],"sourcesContent":["<template>\n    <div class=\"b-drawer\">\n        <Transition name=\"b-drawer__animation\">\n            <aside\n                v-show=\"isDrawerOpen\"\n                :id=\"props.drawerId\"\n                class=\"b-drawer__drawer\"\n                :class=\"conditionalDrawerClass\"\n                :aria-label=\"computedDrawerLabel\"\n            >\n                <div class=\"b-drawer__drawer-content\">\n                    <slot name=\"drawer\" />\n                </div>\n            </aside>\n        </Transition>\n\n        <div class=\"b-drawer__page\">\n            <div class=\"b-drawer__page-content\">\n                <slot name=\"page\" />\n            </div>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import messages from './messages.json';\n    import { type BentoDrawerProps } from './drawer.types';\n    import { BMediaQueryMMax, BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6';\n    import { useBreakpoints } from '@vueuse/core';\n    import { useI18n } from '@adyen/bento-vue-i18n-demi';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = withDefaults(defineProps<BentoDrawerProps>(), {\n        isDrawerOpen: false,\n        drawerLabel: '',\n    });\n\n    const breakpoints = useBreakpoints({\n        s: BMediaQuerySMax,\n        m: BMediaQueryMMax,\n    });\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const isSmallDevice = breakpoints.smallerOrEqual('m');\n    const isMobileDevice = breakpoints.smallerOrEqual('s');\n\n    const computedDrawerLabel = computed(() => {\n        return props.drawerLabel || t('menu');\n    });\n\n    const conditionalDrawerClass = computed(() => ({\n        'b-drawer__drawer--overlay-content': isSmallDevice.value,\n        'b-drawer__drawer--full-width': isMobileDevice.value,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The `bento-drawer` component provides a responsive drawer-based navigation system.\n     *\n     * @usage\n     * <bento-drawer\n     *     drawer-id=\"main-drawer\"\n     *     drawer-label=\"Main drawer\"\n     *     :is-drawer-open=\"true\"\n     * >\n     *     <template #menu>Drawer menu items</template>\n     *     <template #page>Main page content</template>\n     * </bento-drawer>\n     */\n    export default {\n        name: 'bento-drawer',\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./drawer.scss\" />\n"],"names":["__default__","messages","props","__props","breakpoints","useBreakpoints","BMediaQuerySMax","BMediaQueryMMax","t","useI18n","isSmallDevice","isMobileDevice","computedDrawerLabel","computed","conditionalDrawerClass"],"mappings":";;;;;;;;;;;;;;;;;;6KAyEIA,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,MAAA,EAAA,UAAAC,EAAA;AAEV;;;;;;;;AA1CA,UAAAC,IAAAC,GAKAC,IAAAC,EAAA;AAAA,MAAmC,GAAAC;AAAA,MAC5B,GAAAC;AAAA,IACA,CAAA,GAGP,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAR,EAAA,CAAA,GAEAS,IAAAN,EAAA,eAAA,GAAA,GACAO,IAAAP,EAAA,eAAA,GAAA,GAEAQ,IAAAC,EAAA,MACIX,EAAA,eAAAM,EAAA,MAAA,CAAoC,GAGxCM,IAAAD,EAAA,OAAA;AAAA,MAA+C,qCAAAH,EAAA;AAAA,MACQ,gCAAAC,EAAA;AAAA,IACJ,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{dropdown-tag.Bn5FPeEL.js → dropdown-tag.BvXqllkv.js}

@@ -1,12 +1,12 @@
 import { defineComponent as d, computed as P, openBlock as h, createElementBlock as O, normalizeProps as B, guardReactiveProps as M, createVNode as p, mergeProps as L, withCtx as y, unref as i, toRefs as C, createTextVNode as V, toDisplayString as g, ref as A, watch as R, createBlock as U, createElementVNode as T, createCommentVNode as F } from "vue";
-import { B as z } from "./avatar.DcXyOCS4.js";
-import { B as m, f as D } from "./dropdown.D_jkFrMd.js";
+import { B as z } from "./avatar.Bes5Qw12.js";
+import { B as m, f as D } from "./dropdown.BoSI-Rre.js";
 import { u as _ } from "./form-field.B60VsF8d.js";
-import { B as j } from "./typography.wIM07Hbl.js";
-import { u as q } from "./use-country-items.CYnYzs7x.js";
+import { B as j } from "./typography.B6elnWpr.js";
+import { u as q } from "./use-country-items.CAYJt6XS.js";
 import { a as E } from "./country.types.BCOrkmVK.js";
-import { L as I } from "./listbox-option-tag.CwrFdsY1.js";
-import { B as N } from "./payment-method.q2yow5VR.js";
+import { L as I } from "./listbox-option-tag.71rmQvG8.js";
+import { B as N } from "./payment-method.B69Mu88z.js";
 import { _ as S } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import "../assets/dropdown-tag.css";
 const G = d({
@@ -61,7 +61,7 @@ const G = d({
     /**
      * The option elements to populate the country dropdown with.
      * It must be an array of {@see BentoCountryListboxOptions }
-     * @deprecated Since v2.0.0. Use `BentoDropdown` instead.
+     * @deprecated Since v3.0.0. Use `BentoDropdown` instead.
      * @property {BentoCountryCode | string} value.value - Country code of the option
      */
     items: {
@@ -275,4 +275,4 @@ export {
   ue as c,
   de as d
 };
-//# sourceMappingURL=dropdown-tag.Bn5FPeEL.js.map
+//# sourceMappingURL=dropdown-tag.BvXqllkv.js.map

package/dist/chunks/{dropdown-tag.Bn5FPeEL.js.map → dropdown-tag.BvXqllkv.js.map}

@@ -1 +1 @@
-{"version":3,"file":"dropdown-tag.Bn5FPeEL.js","sources":["../../../vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue","../../../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue","../../../vue2/src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue","../../../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue","../../../vue2/src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue"],"sourcesContent":["<template>\n    <div v-bind=\"getNonAriaLabelAttributes($attrs)\">\n        <bento-dropdown\n            v-slot=\"{ label, data }\"\n            v-bind=\"{ ...$props, ariaLabel: undefined }\"\n            :aria-label=\"getAriaLabel($attrs)\"\n            :items=\"dropdownItems\"\n            @update:model-value=\"onUpdateModelValue\"\n            @show-more=\"emit('show-more')\"\n            @open=\"emit('open')\"\n        >\n            <bento-avatar :username=\"label\" :src=\"data\" />\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, type PropType } from 'vue';\n    import { isVue2 } from 'vue-demi';\n    import { type BentoListboxSelectedValue } from '@/types/listbox';\n    import { type BentoAvatarListboxOptions } from './dropdown-avatar.types';\n    import { BentoAvatar } from '@/components/avatar';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * @deprecated Since v3.0.0. Use `aria-label` instead.\n         * Defines a string value that labels an interactive element.\n         */\n        ...(isVue2 ? { ariaLabel: { type: String, default: null } } : {}),\n        /**\n         * The option elements to populate the avatar dropdown with.\n         * It must be an array of {@see BentoAvatarListboxOptions }\n         * @property {string} value.label - Text to be displayed in the option.\n         * @property {string | number} value.value - Value of the option.\n         * @property {string} value.src - Image source of the avatar image.\n         */\n        items: {\n            type: Array as PropType<BentoAvatarListboxOptions>,\n            default: () => [],\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when an option is clicked. Updates the selected option from the \"modelValue\" property linked to the v-model.\n         */\n        (e: 'update:model-value', selectedValue: BentoListboxSelectedValue);\n\n        /**\n         * Emitted when:\n         * - `lazyLoad` is `automatic` and the scroll meets the end of the list\n         * - `lazyload` is `button` and the button is clicked\n         */\n        (e: 'show-more');\n\n        /**\n         * Emitted when the dropdown is opened.\n         */\n        (e: 'open');\n    }>();\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const getAriaLabel = (attributes: Record<string, unknown>) =>\n        Object.prototype.hasOwnProperty.call(attributes, 'aria-label')\n            ? attributes['aria-label']\n            : (attributes.ariaLabel ?? props.ariaLabel);\n    const getNonAriaLabelAttributes = (attributes: Record<string, unknown>) =>\n        Object.fromEntries(Object.entries(attributes).filter(([key]) => key !== 'aria-label' && key !== 'ariaLabel'));\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    const dropdownItems = computed(() => props.items.map(({ value, label, src }) => ({ value, label, data: src })));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Avatar Dropdown showing a selectable list of countries.\n     *\n     * @example\n     * import { BentoDropdownAvatar } from '@adyen/bento-vue2';\n     * import type { BentoAvatarListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdownAvatar },\n     *     template: `\n     *          <bento-dropdown-avatar\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 2\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref('user-id-1') // Default value\n     *         const options: BentoAvatarListboxOptions = [\n     *              { label: 'User 1', value: 'user-id-1' },\n     *              { label: 'User 2', value: 'user-id-2', src: 'image-source.jpeg' },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-dropdown-avatar',\n        inheritAttrs: false,\n        model: { prop: 'modelValue', event: 'update:model-value' },\n    });\n</script>\n","<template>\n    <div v-bind=\"getNonAriaLabelAttributes($attrs)\">\n        <bento-dropdown\n            v-slot=\"{ label }\"\n            v-bind=\"{ ...$props, ariaLabel: undefined }\"\n            :aria-label=\"getAriaLabel($attrs)\"\n            :items=\"countryItems\"\n            @update:model-value=\"onUpdateModelValue\"\n            @show-more=\"emit('show-more')\"\n            @open=\"emit('open')\"\n        >\n            <bento-typography el=\"span\">{{ label }}</bento-typography>\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, type PropType, toRefs } from 'vue';\n    import { isVue2 } from 'vue-demi';\n    import { type BentoCountryListboxOptions } from './dropdown-country.types';\n    import { type BentoListboxSelectedValue } from '@/types/listbox';\n    import { BentoTypography } from '@/components/typography';\n    import { useCountryItems } from './composables/use-country-items';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n    import { BentoCountryVariant } from '@/components/country';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * @deprecated Since v3.0.0. Use `aria-label` instead.\n         * Defines a string value that labels an interactive element.\n         */\n        ...(isVue2 ? { ariaLabel: { type: String, default: null } } : {}),\n        /**\n         * The option elements to populate the country dropdown with.\n         * It must be an array of {@see BentoCountryListboxOptions }\n         * @deprecated Since v2.0.0. Use `BentoDropdown` instead.\n         * @property {BentoCountryCode | string} value.value - Country code of the option\n         */\n        items: {\n            type: Array as PropType<BentoCountryListboxOptions>,\n            default: () => [],\n        },\n\n        /**\n         * Which label variant to display.\n         * @values iso, name, phone_code, capital\n         */\n        variant: {\n            type: String as PropType<BentoCountryVariant | `${BentoCountryVariant}`>,\n            default: BentoCountryVariant.NAME,\n            validator: (value: BentoCountryVariant) => Object.values(BentoCountryVariant).includes(value),\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when an option is clicked. Updates the selected option from the \"modelValue\" property linked to the v-model.\n         */\n        (e: 'update:model-value', selectedValue: BentoListboxSelectedValue);\n\n        /**\n         * Emitted when:\n         * - `lazyLoad` is `automatic` and the scroll meets the end of the list\n         * - `lazyload` is `button` and the button is clicked\n         */\n        (e: 'show-more');\n\n        /**\n         * Emitted when the dropdown is opened.\n         */\n        (e: 'open');\n    }>();\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const getAriaLabel = (attributes: Record<string, unknown>) =>\n        Object.prototype.hasOwnProperty.call(attributes, 'aria-label')\n            ? attributes['aria-label']\n            : (attributes.ariaLabel ?? props.ariaLabel);\n    const getNonAriaLabelAttributes = (attributes: Record<string, unknown>) =>\n        Object.fromEntries(Object.entries(attributes).filter(([key]) => key !== 'aria-label' && key !== 'ariaLabel'));\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    const { variant, items } = toRefs(props);\n    const countryItems = useCountryItems(variant, items);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Country Dropdown showing a selectable list of countries.\n     *\n     * @example\n     * import { BentoDropdownCountry, BentoCountryCode } from '@adyen/bento-vue2';\n     * import type { BentoCountryListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdown },\n     *     template: `\n     *          <bento-dropdown-country\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 2\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref(BentoCountryCode.NL) // Default value\n     *         const options: BentoCountryListboxOptions = [\n     *              { value: BentoCountryCode.NL },\n     *              { value: BentoCountryCode.BE },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'b-dropdown-country',\n        inheritAttrs: false,\n        model: { prop: 'modelValue', event: 'update:model-value' },\n    });\n</script>\n","<template>\n    <bento-dropdown\n        v-slot=\"slotProps\"\n        v-bind=\"{ ...getNonAriaLabelAttributes($attrs), ...$props, ariaLabel: undefined }\"\n        :aria-label=\"getAriaLabel($attrs)\"\n        :search=\"search\"\n        :items=\"filteredItems\"\n        @update:model-value=\"onUpdateModelValue\"\n        @show-more=\"emit('show-more')\"\n        @open=\"emit('open')\"\n    >\n        <listbox-option-tag :option=\"slotProps\" />\n    </bento-dropdown>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, type PropType, ref, watch } from 'vue';\n    import { isVue2 } from 'vue-demi';\n    import type { BentoCurrencyListboxOptions } from './dropdown-currency.types';\n    import type { BentoListboxSelectedValue } from '@/types/listbox';\n    import { ListboxOptionTag } from '@/internal/listbox/';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n    import { useSearchBarFilter } from '@/components/search-bar/useSearchBarDataFilter';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * @deprecated Since v3.0.0. Use `aria-label` instead.\n         * Defines a string value that labels an interactive element.\n         */\n        ...(isVue2 ? { ariaLabel: { type: String, default: null } } : {}),\n        /**\n         * The option elements to populate the currency dropdown with.\n         * It must be an array of {@see BentoCurrencyListboxOptions }\n         * @property {string} value.label - Text to be displayed in the option\n         * @property {BentoCurrencyISOCode} value.code - Currency ISO code of the option\n         */\n        items: {\n            type: Array as PropType<BentoCurrencyListboxOptions>,\n            default: () => [],\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when an option is clicked. Updates the selected option from the \"modelValue\" property linked to the v-model.\n         */\n        (e: 'update:model-value', selectedValue: BentoListboxSelectedValue);\n\n        /**\n         * Emitted when:\n         * - `lazyLoad` is `automatic` and the scroll meets the end of the list\n         * - `lazyload` is `button` and the button is clicked\n         */\n        (e: 'show-more');\n\n        /**\n         * Emitted when the dropdown is opened.\n         */\n        (e: 'open');\n    }>();\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const getAriaLabel = (attributes: Record<string, unknown>) =>\n        Object.prototype.hasOwnProperty.call(attributes, 'aria-label')\n            ? attributes['aria-label']\n            : (attributes.ariaLabel ?? props.ariaLabel);\n    const getNonAriaLabelAttributes = (attributes: Record<string, unknown>) =>\n        Object.fromEntries(Object.entries(attributes).filter(([key]) => key !== 'aria-label' && key !== 'ariaLabel'));\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    const filteredItems = ref<BentoCurrencyListboxOptions>([]);\n\n    watch(\n        () => props.items,\n        () => (filteredItems.value = props.items),\n        { immediate: true }\n    );\n\n    const search = props.search\n        ? props.search\n        : {\n              debounceTime: 500,\n              searchEvent: async (searchTerm: string) => {\n                  // Combine value and label to be able to search by the currency code\n                  const searchableItems = props.items.map(item => ({\n                      ...item,\n                      label: `${item.value} ${item.label}`,\n                  }));\n\n                  const searchResults = useSearchBarFilter(\n                      ref(searchTerm),\n                      ref<BentoCurrencyListboxOptions>(searchableItems),\n                      props?.search?.searchEvent,\n                      ref(false)\n                  ).value;\n\n                  // Restore original labels by removing the prepended value\n                  const normalizedResults = searchResults?.map(result => ({\n                      ...result,\n                      label: result.label.substring(result.value.length + 1),\n                  }));\n\n                  filteredItems.value = normalizedResults;\n              },\n          };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Currency Dropdown showing a selectable list of currencies.\n     *\n     * @example\n     * import { BentoDropdownCountry, BentoCountryCode } from '@adyen/bento-vue2';\n     * import type { BentoCountryListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdown },\n     *     template: `\n     *          <bento-dropdown-currency\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 2\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref(BentoCountryCode.NL) // Default value\n     *         const options: BentoCountryListboxOptions = [\n     *              { label: 'Option 1', value: BentoCountryCode.NL },\n     *              { label: 'Option 2', value: BentoCountryCode.BE },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'b-dropdown-currency',\n        inheritAttrs: false,\n        model: { prop: 'modelValue', event: 'update:model-value' },\n    });\n</script>\n","<template>\n    <div v-bind=\"getNonAriaLabelAttributes($attrs)\">\n        <bento-dropdown\n            class=\"b-dropdown-payment-method\"\n            v-bind=\"{ ...$props, ariaLabel: undefined }\"\n            :aria-label=\"getAriaLabel($attrs)\"\n            @update:model-value=\"onUpdateModelValue\"\n            @show-more=\"emit('show-more')\"\n            @open=\"emit('open')\"\n        >\n            <template #display-value=\"{ label, value }\">\n                <bento-payment-method :type=\"value\" :label=\"label\" />\n            </template>\n\n            <template #default=\"{ value, label, description }\">\n                <div class=\"b-dropdown-payment-method__item\">\n                    <bento-payment-method :type=\"value\" :label=\"description ? undefined : label\" />\n\n                    <div v-if=\"description\" class=\"b-dropdown-payment-method__text\">\n                        <bento-typography el=\"span\">{{ label }}</bento-typography>\n                        <bento-typography el=\"span\" class=\"b-dropdown-payment-method__description\">{{\n                            description\n                        }}</bento-typography>\n                    </div>\n                </div>\n            </template>\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, type PropType } from 'vue';\n    import { isVue2 } from 'vue-demi';\n    import { BentoPaymentMethod } from '@/components/payment-method';\n    import { BentoTypography } from '@/components/typography';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n    import { type BentoPaymentMethodListboxOptions } from './dropdown-payment-method.types';\n    import { type BentoListboxSelectedValue } from '@/types/listbox';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * @deprecated Since v3.0.0. Use `aria-label` instead.\n         * Defines a string value that labels an interactive element.\n         */\n        ...(isVue2 ? { ariaLabel: { type: String, default: null } } : {}),\n        /**\n         * The option elements to populate the payment method dropdown with.\n         * It must be an array of {@see BentoPaymentMethodListboxOptions }\n         * @property {string} value.label - Text to be displayed in the option\n         * @property {string} value.value - Payment type code that translates to a payment icon name {@see https://adyen-ui-assets.netlify.app/?path=/story/packages-ui-assets-payment-method-icons--icons}\n         */\n        items: {\n            type: Array as PropType<BentoPaymentMethodListboxOptions>,\n            default: () => [],\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when an option is clicked. Updates the selected option from the \"modelValue\" property linked to the v-model.\n         */\n        (e: 'update:model-value', selectedValue: BentoListboxSelectedValue);\n\n        /**\n         * Emitted when:\n         * - `lazyLoad` is `automatic` and the scroll meets the end of the list\n         * - `lazyload` is `button` and the button is clicked\n         */\n        (e: 'show-more');\n\n        /**\n         * Emitted when the dropdown is opened.\n         */\n        (e: 'open');\n    }>();\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const getAriaLabel = (attributes: Record<string, unknown>) =>\n        Object.prototype.hasOwnProperty.call(attributes, 'aria-label')\n            ? attributes['aria-label']\n            : (attributes.ariaLabel ?? props.ariaLabel);\n    const getNonAriaLabelAttributes = (attributes: Record<string, unknown>) =>\n        Object.fromEntries(Object.entries(attributes).filter(([key]) => key !== 'aria-label' && key !== 'ariaLabel'));\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Payment method Dropdown showing a selectable list of countries.\n     *\n     * @example\n     * import { BentoDropdownPaymentMethod } from '@adyen/bento-vue2';\n     * import type { BentoPaymentMethodListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdownPaymentMethod },\n     *     template: `\n     *          <bento-dropdown-payment-method\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 'Visa'\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref('ideal') // Default value\n     *         const options: BentoPaymentMethodListboxOptions = [\n     *              { label: 'Option 1', value: 'ideal' },\n     *              { label: 'Option 2', value: 'visa' },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-dropdown-payment-method',\n        inheritAttrs: false,\n        model: { prop: 'modelValue', event: 'update:model-value' },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-payment-method.scss\" />\n","<template>\n    <bento-dropdown\n        v-slot=\"{ label, data }\"\n        v-bind=\"{ ...getNonAriaLabelAttributes($attrs), ...$props, ariaLabel: undefined }\"\n        class=\"b-dropdown-tag\"\n        :aria-label=\"getAriaLabel($attrs)\"\n        :items=\"tagItems\"\n        show-slot-content-in-multiple\n        @update:model-value=\"onUpdateModelValue\"\n        @show-more=\"emit('show-more')\"\n        @open=\"emit('open')\"\n    >\n        <listbox-option-tag :option=\"{ value: label, data, label: '' }\" />\n    </bento-dropdown>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, type PropType } from 'vue';\n    import { isVue2 } from 'vue-demi';\n    import type { BentoTagListboxOptions } from './dropdown-tag.types';\n    import type { BentoListboxSelectedValue } from '@/types/listbox';\n    import { ListboxOptionTag } from '../../../../internal';\n    import BentoDropdown from '../../../dropdown.vue';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * @deprecated Since v3.0.0. Use `aria-label` instead.\n         * Defines a string value that labels an interactive element.\n         */\n        ...(isVue2 ? { ariaLabel: { type: String, default: null } } : {}),\n        /**\n         * The option elements to populate the tag dropdown with.\n         * It must be an array of {@see BentoTagListboxOptions }\n         * @property {string} value.label - Text to be displayed in the option\n         * @property {string | number} value.value - Value of the option\n         * @property {string} value.variant - The BentTag variant shown for the option.\n         */\n        items: {\n            type: Array as PropType<BentoTagListboxOptions>,\n            default: () => [],\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when an option is clicked. Updates the selected option from the \"modelValue\" property linked to the v-model.\n         */\n        (e: 'update:model-value', selectedValue: BentoListboxSelectedValue);\n\n        /**\n         * Emitted when:\n         * - `lazyLoad` is `automatic` and the scroll meets the end of the list\n         * - `lazyload` is `button` and the button is clicked\n         */\n        (e: 'show-more');\n\n        /**\n         * Emitted when the dropdown is opened.\n         */\n        (e: 'open');\n    }>();\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const getAriaLabel = (attributes: Record<string, unknown>) =>\n        Object.prototype.hasOwnProperty.call(attributes, 'aria-label')\n            ? attributes['aria-label']\n            : (attributes.ariaLabel ?? props.ariaLabel);\n    const getNonAriaLabelAttributes = (attributes: Record<string, unknown>) =>\n        Object.fromEntries(Object.entries(attributes).filter(([key]) => key !== 'aria-label' && key !== 'ariaLabel'));\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    const tagItems = computed(() => props.items?.map(({ label, value, variant }) => ({ label, value, data: variant })));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Tag Dropdown showing a selectable list of tags.\n     *\n     * @example\n     * import { BentoDropdownTag } from '@adyen/bento-vue2';\n     * import type { BentoTagListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdownTag },\n     *     template: `\n     *          <bento-dropdown-tag\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref('unique-id-1') // Default value\n     *         const options: BentoTagListboxOptions = [\n     *              { label: 'Offline', value: 'unique-id-1', variant: 'red' },\n     *              { label: 'Online', value: 'unique-id-2', variant: 'green' },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-dropdown-tag',\n        inheritAttrs: false,\n        model: { prop: 'modelValue', event: 'update:model-value' },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-tag.scss\" />\n"],"names":["__default__$4","defineComponent","props","__props","emit","__emit","emitValue","useFormFieldEmits","getAriaLabel","attributes","getNonAriaLabelAttributes","key","onUpdateModelValue","selectedValue","dropdownItems","computed","value","label","src","__default__$3","variant","items","toRefs","countryItems","useCountryItems","__default__$2","filteredItems","ref","watch","search","searchTerm","searchableItems","item","normalizedResults","useSearchBarFilter","result","__default__$1","__default__","tagItems"],"mappings":"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"}
+{"version":3,"file":"dropdown-tag.BvXqllkv.js","sources":["../../../vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue","../../../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue","../../../vue2/src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue","../../../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue","../../../vue2/src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue"],"sourcesContent":["<template>\n    <div v-bind=\"getNonAriaLabelAttributes($attrs)\">\n        <bento-dropdown\n            v-slot=\"{ label, data }\"\n            v-bind=\"{ ...$props, ariaLabel: undefined }\"\n            :aria-label=\"getAriaLabel($attrs)\"\n            :items=\"dropdownItems\"\n            @update:model-value=\"onUpdateModelValue\"\n            @show-more=\"emit('show-more')\"\n            @open=\"emit('open')\"\n        >\n            <bento-avatar :username=\"label\" :src=\"data\" />\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, type PropType } from 'vue';\n    import { isVue2 } from 'vue-demi';\n    import { type BentoListboxSelectedValue } from '@/types/listbox';\n    import { type BentoAvatarListboxOptions } from './dropdown-avatar.types';\n    import { BentoAvatar } from '@/components/avatar';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * @deprecated Since v3.0.0. Use `aria-label` instead.\n         * Defines a string value that labels an interactive element.\n         */\n        ...(isVue2 ? { ariaLabel: { type: String, default: null } } : {}),\n        /**\n         * The option elements to populate the avatar dropdown with.\n         * It must be an array of {@see BentoAvatarListboxOptions }\n         * @property {string} value.label - Text to be displayed in the option.\n         * @property {string | number} value.value - Value of the option.\n         * @property {string} value.src - Image source of the avatar image.\n         */\n        items: {\n            type: Array as PropType<BentoAvatarListboxOptions>,\n            default: () => [],\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when an option is clicked. Updates the selected option from the \"modelValue\" property linked to the v-model.\n         */\n        (e: 'update:model-value', selectedValue: BentoListboxSelectedValue);\n\n        /**\n         * Emitted when:\n         * - `lazyLoad` is `automatic` and the scroll meets the end of the list\n         * - `lazyload` is `button` and the button is clicked\n         */\n        (e: 'show-more');\n\n        /**\n         * Emitted when the dropdown is opened.\n         */\n        (e: 'open');\n    }>();\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const getAriaLabel = (attributes: Record<string, unknown>) =>\n        Object.prototype.hasOwnProperty.call(attributes, 'aria-label')\n            ? attributes['aria-label']\n            : (attributes.ariaLabel ?? props.ariaLabel);\n    const getNonAriaLabelAttributes = (attributes: Record<string, unknown>) =>\n        Object.fromEntries(Object.entries(attributes).filter(([key]) => key !== 'aria-label' && key !== 'ariaLabel'));\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    const dropdownItems = computed(() => props.items.map(({ value, label, src }) => ({ value, label, data: src })));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Avatar Dropdown showing a selectable list of countries.\n     *\n     * @example\n     * import { BentoDropdownAvatar } from '@adyen/bento-vue2';\n     * import type { BentoAvatarListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdownAvatar },\n     *     template: `\n     *          <bento-dropdown-avatar\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 2\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref('user-id-1') // Default value\n     *         const options: BentoAvatarListboxOptions = [\n     *              { label: 'User 1', value: 'user-id-1' },\n     *              { label: 'User 2', value: 'user-id-2', src: 'image-source.jpeg' },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-dropdown-avatar',\n        inheritAttrs: false,\n        model: { prop: 'modelValue', event: 'update:model-value' },\n    });\n</script>\n","<template>\n    <div v-bind=\"getNonAriaLabelAttributes($attrs)\">\n        <bento-dropdown\n            v-slot=\"{ label }\"\n            v-bind=\"{ ...$props, ariaLabel: undefined }\"\n            :aria-label=\"getAriaLabel($attrs)\"\n            :items=\"countryItems\"\n            @update:model-value=\"onUpdateModelValue\"\n            @show-more=\"emit('show-more')\"\n            @open=\"emit('open')\"\n        >\n            <bento-typography el=\"span\">{{ label }}</bento-typography>\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, type PropType, toRefs } from 'vue';\n    import { isVue2 } from 'vue-demi';\n    import { type BentoCountryListboxOptions } from './dropdown-country.types';\n    import { type BentoListboxSelectedValue } from '@/types/listbox';\n    import { BentoTypography } from '@/components/typography';\n    import { useCountryItems } from './composables/use-country-items';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n    import { BentoCountryVariant } from '@/components/country';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * @deprecated Since v3.0.0. Use `aria-label` instead.\n         * Defines a string value that labels an interactive element.\n         */\n        ...(isVue2 ? { ariaLabel: { type: String, default: null } } : {}),\n        /**\n         * The option elements to populate the country dropdown with.\n         * It must be an array of {@see BentoCountryListboxOptions }\n         * @deprecated Since v3.0.0. Use `BentoDropdown` instead.\n         * @property {BentoCountryCode | string} value.value - Country code of the option\n         */\n        items: {\n            type: Array as PropType<BentoCountryListboxOptions>,\n            default: () => [],\n        },\n\n        /**\n         * Which label variant to display.\n         * @values iso, name, phone_code, capital\n         */\n        variant: {\n            type: String as PropType<BentoCountryVariant | `${BentoCountryVariant}`>,\n            default: BentoCountryVariant.NAME,\n            validator: (value: BentoCountryVariant) => Object.values(BentoCountryVariant).includes(value),\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when an option is clicked. Updates the selected option from the \"modelValue\" property linked to the v-model.\n         */\n        (e: 'update:model-value', selectedValue: BentoListboxSelectedValue);\n\n        /**\n         * Emitted when:\n         * - `lazyLoad` is `automatic` and the scroll meets the end of the list\n         * - `lazyload` is `button` and the button is clicked\n         */\n        (e: 'show-more');\n\n        /**\n         * Emitted when the dropdown is opened.\n         */\n        (e: 'open');\n    }>();\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const getAriaLabel = (attributes: Record<string, unknown>) =>\n        Object.prototype.hasOwnProperty.call(attributes, 'aria-label')\n            ? attributes['aria-label']\n            : (attributes.ariaLabel ?? props.ariaLabel);\n    const getNonAriaLabelAttributes = (attributes: Record<string, unknown>) =>\n        Object.fromEntries(Object.entries(attributes).filter(([key]) => key !== 'aria-label' && key !== 'ariaLabel'));\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    const { variant, items } = toRefs(props);\n    const countryItems = useCountryItems(variant, items);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Country Dropdown showing a selectable list of countries.\n     *\n     * @example\n     * import { BentoDropdownCountry, BentoCountryCode } from '@adyen/bento-vue2';\n     * import type { BentoCountryListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdown },\n     *     template: `\n     *          <bento-dropdown-country\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 2\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref(BentoCountryCode.NL) // Default value\n     *         const options: BentoCountryListboxOptions = [\n     *              { value: BentoCountryCode.NL },\n     *              { value: BentoCountryCode.BE },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'b-dropdown-country',\n        inheritAttrs: false,\n        model: { prop: 'modelValue', event: 'update:model-value' },\n    });\n</script>\n","<template>\n    <bento-dropdown\n        v-slot=\"slotProps\"\n        v-bind=\"{ ...getNonAriaLabelAttributes($attrs), ...$props, ariaLabel: undefined }\"\n        :aria-label=\"getAriaLabel($attrs)\"\n        :search=\"search\"\n        :items=\"filteredItems\"\n        @update:model-value=\"onUpdateModelValue\"\n        @show-more=\"emit('show-more')\"\n        @open=\"emit('open')\"\n    >\n        <listbox-option-tag :option=\"slotProps\" />\n    </bento-dropdown>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, type PropType, ref, watch } from 'vue';\n    import { isVue2 } from 'vue-demi';\n    import type { BentoCurrencyListboxOptions } from './dropdown-currency.types';\n    import type { BentoListboxSelectedValue } from '@/types/listbox';\n    import { ListboxOptionTag } from '@/internal/listbox/';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n    import { useSearchBarFilter } from '@/components/search-bar/useSearchBarDataFilter';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * @deprecated Since v3.0.0. Use `aria-label` instead.\n         * Defines a string value that labels an interactive element.\n         */\n        ...(isVue2 ? { ariaLabel: { type: String, default: null } } : {}),\n        /**\n         * The option elements to populate the currency dropdown with.\n         * It must be an array of {@see BentoCurrencyListboxOptions }\n         * @property {string} value.label - Text to be displayed in the option\n         * @property {BentoCurrencyISOCode} value.code - Currency ISO code of the option\n         */\n        items: {\n            type: Array as PropType<BentoCurrencyListboxOptions>,\n            default: () => [],\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when an option is clicked. Updates the selected option from the \"modelValue\" property linked to the v-model.\n         */\n        (e: 'update:model-value', selectedValue: BentoListboxSelectedValue);\n\n        /**\n         * Emitted when:\n         * - `lazyLoad` is `automatic` and the scroll meets the end of the list\n         * - `lazyload` is `button` and the button is clicked\n         */\n        (e: 'show-more');\n\n        /**\n         * Emitted when the dropdown is opened.\n         */\n        (e: 'open');\n    }>();\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const getAriaLabel = (attributes: Record<string, unknown>) =>\n        Object.prototype.hasOwnProperty.call(attributes, 'aria-label')\n            ? attributes['aria-label']\n            : (attributes.ariaLabel ?? props.ariaLabel);\n    const getNonAriaLabelAttributes = (attributes: Record<string, unknown>) =>\n        Object.fromEntries(Object.entries(attributes).filter(([key]) => key !== 'aria-label' && key !== 'ariaLabel'));\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    const filteredItems = ref<BentoCurrencyListboxOptions>([]);\n\n    watch(\n        () => props.items,\n        () => (filteredItems.value = props.items),\n        { immediate: true }\n    );\n\n    const search = props.search\n        ? props.search\n        : {\n              debounceTime: 500,\n              searchEvent: async (searchTerm: string) => {\n                  // Combine value and label to be able to search by the currency code\n                  const searchableItems = props.items.map(item => ({\n                      ...item,\n                      label: `${item.value} ${item.label}`,\n                  }));\n\n                  const searchResults = useSearchBarFilter(\n                      ref(searchTerm),\n                      ref<BentoCurrencyListboxOptions>(searchableItems),\n                      props?.search?.searchEvent,\n                      ref(false)\n                  ).value;\n\n                  // Restore original labels by removing the prepended value\n                  const normalizedResults = searchResults?.map(result => ({\n                      ...result,\n                      label: result.label.substring(result.value.length + 1),\n                  }));\n\n                  filteredItems.value = normalizedResults;\n              },\n          };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Currency Dropdown showing a selectable list of currencies.\n     *\n     * @example\n     * import { BentoDropdownCountry, BentoCountryCode } from '@adyen/bento-vue2';\n     * import type { BentoCountryListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdown },\n     *     template: `\n     *          <bento-dropdown-currency\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 2\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref(BentoCountryCode.NL) // Default value\n     *         const options: BentoCountryListboxOptions = [\n     *              { label: 'Option 1', value: BentoCountryCode.NL },\n     *              { label: 'Option 2', value: BentoCountryCode.BE },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'b-dropdown-currency',\n        inheritAttrs: false,\n        model: { prop: 'modelValue', event: 'update:model-value' },\n    });\n</script>\n","<template>\n    <div v-bind=\"getNonAriaLabelAttributes($attrs)\">\n        <bento-dropdown\n            class=\"b-dropdown-payment-method\"\n            v-bind=\"{ ...$props, ariaLabel: undefined }\"\n            :aria-label=\"getAriaLabel($attrs)\"\n            @update:model-value=\"onUpdateModelValue\"\n            @show-more=\"emit('show-more')\"\n            @open=\"emit('open')\"\n        >\n            <template #display-value=\"{ label, value }\">\n                <bento-payment-method :type=\"value\" :label=\"label\" />\n            </template>\n\n            <template #default=\"{ value, label, description }\">\n                <div class=\"b-dropdown-payment-method__item\">\n                    <bento-payment-method :type=\"value\" :label=\"description ? undefined : label\" />\n\n                    <div v-if=\"description\" class=\"b-dropdown-payment-method__text\">\n                        <bento-typography el=\"span\">{{ label }}</bento-typography>\n                        <bento-typography el=\"span\" class=\"b-dropdown-payment-method__description\">{{\n                            description\n                        }}</bento-typography>\n                    </div>\n                </div>\n            </template>\n        </bento-dropdown>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineComponent, type PropType } from 'vue';\n    import { isVue2 } from 'vue-demi';\n    import { BentoPaymentMethod } from '@/components/payment-method';\n    import { BentoTypography } from '@/components/typography';\n    import BentoDropdown from '@/components/dropdown/dropdown.vue';\n    import { type BentoPaymentMethodListboxOptions } from './dropdown-payment-method.types';\n    import { type BentoListboxSelectedValue } from '@/types/listbox';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * @deprecated Since v3.0.0. Use `aria-label` instead.\n         * Defines a string value that labels an interactive element.\n         */\n        ...(isVue2 ? { ariaLabel: { type: String, default: null } } : {}),\n        /**\n         * The option elements to populate the payment method dropdown with.\n         * It must be an array of {@see BentoPaymentMethodListboxOptions }\n         * @property {string} value.label - Text to be displayed in the option\n         * @property {string} value.value - Payment type code that translates to a payment icon name {@see https://adyen-ui-assets.netlify.app/?path=/story/packages-ui-assets-payment-method-icons--icons}\n         */\n        items: {\n            type: Array as PropType<BentoPaymentMethodListboxOptions>,\n            default: () => [],\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when an option is clicked. Updates the selected option from the \"modelValue\" property linked to the v-model.\n         */\n        (e: 'update:model-value', selectedValue: BentoListboxSelectedValue);\n\n        /**\n         * Emitted when:\n         * - `lazyLoad` is `automatic` and the scroll meets the end of the list\n         * - `lazyload` is `button` and the button is clicked\n         */\n        (e: 'show-more');\n\n        /**\n         * Emitted when the dropdown is opened.\n         */\n        (e: 'open');\n    }>();\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const getAriaLabel = (attributes: Record<string, unknown>) =>\n        Object.prototype.hasOwnProperty.call(attributes, 'aria-label')\n            ? attributes['aria-label']\n            : (attributes.ariaLabel ?? props.ariaLabel);\n    const getNonAriaLabelAttributes = (attributes: Record<string, unknown>) =>\n        Object.fromEntries(Object.entries(attributes).filter(([key]) => key !== 'aria-label' && key !== 'ariaLabel'));\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Payment method Dropdown showing a selectable list of countries.\n     *\n     * @example\n     * import { BentoDropdownPaymentMethod } from '@adyen/bento-vue2';\n     * import type { BentoPaymentMethodListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdownPaymentMethod },\n     *     template: `\n     *          <bento-dropdown-payment-method\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 'Visa'\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref('ideal') // Default value\n     *         const options: BentoPaymentMethodListboxOptions = [\n     *              { label: 'Option 1', value: 'ideal' },\n     *              { label: 'Option 2', value: 'visa' },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-dropdown-payment-method',\n        inheritAttrs: false,\n        model: { prop: 'modelValue', event: 'update:model-value' },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-payment-method.scss\" />\n","<template>\n    <bento-dropdown\n        v-slot=\"{ label, data }\"\n        v-bind=\"{ ...getNonAriaLabelAttributes($attrs), ...$props, ariaLabel: undefined }\"\n        class=\"b-dropdown-tag\"\n        :aria-label=\"getAriaLabel($attrs)\"\n        :items=\"tagItems\"\n        show-slot-content-in-multiple\n        @update:model-value=\"onUpdateModelValue\"\n        @show-more=\"emit('show-more')\"\n        @open=\"emit('open')\"\n    >\n        <listbox-option-tag :option=\"{ value: label, data, label: '' }\" />\n    </bento-dropdown>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, type PropType } from 'vue';\n    import { isVue2 } from 'vue-demi';\n    import type { BentoTagListboxOptions } from './dropdown-tag.types';\n    import type { BentoListboxSelectedValue } from '@/types/listbox';\n    import { ListboxOptionTag } from '../../../../internal';\n    import BentoDropdown from '../../../dropdown.vue';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n    const props = defineProps({\n        ...BentoDropdown.props,\n        /**\n         * @deprecated Since v3.0.0. Use `aria-label` instead.\n         * Defines a string value that labels an interactive element.\n         */\n        ...(isVue2 ? { ariaLabel: { type: String, default: null } } : {}),\n        /**\n         * The option elements to populate the tag dropdown with.\n         * It must be an array of {@see BentoTagListboxOptions }\n         * @property {string} value.label - Text to be displayed in the option\n         * @property {string | number} value.value - Value of the option\n         * @property {string} value.variant - The BentTag variant shown for the option.\n         */\n        items: {\n            type: Array as PropType<BentoTagListboxOptions>,\n            default: () => [],\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when an option is clicked. Updates the selected option from the \"modelValue\" property linked to the v-model.\n         */\n        (e: 'update:model-value', selectedValue: BentoListboxSelectedValue);\n\n        /**\n         * Emitted when:\n         * - `lazyLoad` is `automatic` and the scroll meets the end of the list\n         * - `lazyload` is `button` and the button is clicked\n         */\n        (e: 'show-more');\n\n        /**\n         * Emitted when the dropdown is opened.\n         */\n        (e: 'open');\n    }>();\n\n    const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n    const getAriaLabel = (attributes: Record<string, unknown>) =>\n        Object.prototype.hasOwnProperty.call(attributes, 'aria-label')\n            ? attributes['aria-label']\n            : (attributes.ariaLabel ?? props.ariaLabel);\n    const getNonAriaLabelAttributes = (attributes: Record<string, unknown>) =>\n        Object.fromEntries(Object.entries(attributes).filter(([key]) => key !== 'aria-label' && key !== 'ariaLabel'));\n\n    const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n    const tagItems = computed(() => props.items?.map(({ label, value, variant }) => ({ label, value, data: variant })));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Tag Dropdown showing a selectable list of tags.\n     *\n     * @example\n     * import { BentoDropdownTag } from '@adyen/bento-vue2';\n     * import type { BentoTagListboxOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdownTag },\n     *     template: `\n     *          <bento-dropdown-tag\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref('unique-id-1') // Default value\n     *         const options: BentoTagListboxOptions = [\n     *              { label: 'Offline', value: 'unique-id-1', variant: 'red' },\n     *              { label: 'Online', value: 'unique-id-2', variant: 'green' },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-dropdown-tag',\n        inheritAttrs: false,\n        model: { prop: 'modelValue', event: 'update:model-value' },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-tag.scss\" />\n"],"names":["__default__$4","defineComponent","props","__props","emit","__emit","emitValue","useFormFieldEmits","getAriaLabel","attributes","getNonAriaLabelAttributes","key","onUpdateModelValue","selectedValue","dropdownItems","computed","value","label","src","__default__$3","variant","items","toRefs","countryItems","useCountryItems","__default__$2","filteredItems","ref","watch","search","searchTerm","searchableItems","item","normalizedResults","useSearchBarFilter","result","__default__$1","__default__","tagItems"],"mappings":"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"}

package/dist/chunks/{dropdown.D_jkFrMd.js → dropdown.BoSI-Rre.js}

@@ -1,7 +1,7 @@
 import { computed as r, ref as A, onMounted as Wt, onUnmounted as qt, watch as he, defineComponent as Q, resolveComponent as H, openBlock as p, createElementBlock as I, createVNode as q, withCtx as R, createTextVNode as ne, toDisplayString as j, createElementVNode as Z, renderSlot as J, mergeProps as V, withKeys as Se, getCurrentInstance as at, createCommentVNode as Y, createBlock as F, withModifiers as Oe, normalizeProps as ve, guardReactiveProps as Ae, withDirectives as Le, vShow as ze, nextTick as be, toRef as de, resolveDirective as Lt, toHandlers as fe, Fragment as Ce, renderList as re, createSlots as Ee, normalizeClass as we, unref as v, useSlots as Ge, useAttrs as vt, toRefs as Yt, resolveDynamicComponent as It, inject as ft } from "vue";
-import { B as Be } from "./typography.wIM07Hbl.js";
+import { B as Be } from "./typography.B6elnWpr.js";
 import { g as De } from "./generate-uid.DBWe4g6T.js";
-import { u as Re } from "./index.B875RXHM.js";
+import { u as Re } from "./index.CGBfMQdv.js";
 import { s as Fe } from "./events.BQOQSSb7.js";
 import { u as Et } from "./use-has-slot.CyMiImRQ.js";
 import { _ as jt } from "./cross-circle-fill.DJbpTaVE.js";
@@ -15,15 +15,15 @@ import { u as Xt } from "./use-form-layout-loading.CWbjZiwP.js";
 import { B as Zt } from "./directive.D1-d-C2K.js";
 import { B as le, a as je } from "./keyboard-navigation.DWmhelVv.js";
 import { B as At } from "./loading-indicator.BPol9I84.js";
-import { B as wt } from "./empty-state.DpUC-3wv.js";
-import { o as Qt } from "./resize.Bqks3WUm.js";
-import { B as tt, _ as el } from "./minus-small.DBR64xRS.js";
-import { _ as tl } from "./checkmark-small.DJcd8Sd7.js";
-import { B as ll } from "./chip.Bv6IGch0.js";
-import { b as lt, a as al, h as ol, e as sl } from "./button-actions.uIjzze43.js";
-import { F as nl } from "./field-label.Cz11fn_F.js";
+import { B as wt } from "./empty-state.BuK12EGe.js";
+import { B as tt, _ as Qt } from "./minus-small.DBR64xRS.js";
+import { _ as el } from "./checkmark-small.DJcd8Sd7.js";
+import { B as tl } from "./chip.D4OozULC.js";
+import { b as lt, a as ll, h as al, e as ol } from "./button-actions.DvuGEQxM.js";
+import { o as sl } from "./resize.Bqks3WUm.js";
+import { F as nl } from "./field-label.vrUwhoOg.js";
 import { P as ht } from "./popper-container.Rfj8UdMD.js";
-import { E as il } from "./error-message.Bt0CznQM.js";
+import { E as il } from "./error-message.DJ5l0EUH.js";
 import "../assets/dropdown.css";
 const _t = (e, a, o, l) => {
   const i = r(
@@ -81,7 +81,7 @@ function rl(e, { disabled: a, itemHeight: o, overscan: l = 5, prefixHeight: i })
     h();
   };
   a || (Wt(() => {
-    s.value && (u.value = s.value.clientHeight, c = Qt(s.value, ({ clientHeight: T }) => {
+    s.value && (u.value = s.value.clientHeight, c = sl(s.value, ({ clientHeight: T }) => {
       u.value = T, h();
     }), h());
   }), qt(() => {
@@ -680,7 +680,7 @@ const El = /* @__PURE__ */ ue(Ll, [["render", Il]]), Ol = { key: 0 }, Tl = {
       class: we(["b-checkbox-input", o.value]),
       role: "presentation"
     }, [
-      i.indeterminate ? (p(), F(v(el), {
+      i.indeterminate ? (p(), F(v(Qt), {
         key: 0,
         class: "b-checkbox-input__icon",
         "svg-title": "",
@@ -691,7 +691,7 @@ const El = /* @__PURE__ */ ue(Ll, [["render", Il]]), Ol = { key: 0 }, Tl = {
         "svg-title": "",
         "aria-hidden": "true",
         "data-testid": "decorative-checkbox-double-checkmark-icon"
-      })) : i.checked ? (p(), F(v(tl), {
+      })) : i.checked ? (p(), F(v(el), {
         key: 2,
         class: "b-checkbox-input__icon",
         "svg-title": "",
@@ -739,7 +739,7 @@ const Dt = {
       () => o.loading ? lt.LOADING : lt.START
     ), s = r(() => o.loading ? a("loading") : a("showMore"));
     return (n, t) => l.value || n.loading ? (p(), I("div", _l, [
-      l.value ? (p(), F(v(al), {
+      l.value ? (p(), F(v(ll), {
         key: 0,
         state: i.value,
         tabindex: n.tabindex,
@@ -1490,7 +1490,7 @@ const Yl = /* @__PURE__ */ ue(Kl, [["render", ql], ["__scopeId", "data-v-dba55b0
           (p(!0), I(Ce, null, re(Te.value, (E) => (p(), I("li", {
             key: E.value
           }, [
-            q(v(ll), {
+            q(v(tl), {
               ref_for: !0,
               ref_key: "selectedListboxItemsRef",
               ref: b,
@@ -2108,7 +2108,7 @@ const gt = {
       "b-dropdown-options-container--single": !s?.multiple
     })), S = r(() => ({
       "b-dropdown-options-container__listbox--single": !s?.multiple
-    })), { actions: h, internalSelectedValue: N, listeners: w, onEscapeKey: $, onOutsideDropdownClick: T } = ia(n, t, c, i), M = r(() => s?.multiple ? ol : ht), _ = r(() => {
+    })), { actions: h, internalSelectedValue: N, listeners: w, onEscapeKey: $, onOutsideDropdownClick: T } = ia(n, t, c, i), M = r(() => s?.multiple ? al : ht), _ = r(() => {
       const L = {
         "min-width": `${s?.targetElement?.clientWidth}px`,
         "max-width": "min(500px, 95%)"
@@ -2942,7 +2942,7 @@ const Kt = {
   "zh-CN": { all: "全部", ariaLabelFallback: "下拉菜单", clearSearch: "清除筛选器" }
 }, Fa = { class: "b-dropdown__autocomplete-hidden-prefix" }, Va = Q({
   i18n: { messages: Kt },
-  name: "b-dropdown",
+  name: "bento-dropdown",
   components: {
     DropdownInputDefault: Oa,
     DropdownInputSmall: Da
@@ -3176,7 +3176,7 @@ const Kt = {
       ], 16)), [
         [v(je)]
       ]),
-      d.value ? (p(), F(v(sl), {
+      d.value ? (p(), F(v(ol), {
         key: 1,
         disabled: m.teleport?.disabled,
         to: m.teleport?.to
@@ -3237,7 +3237,7 @@ const Kt = {
       [v(Zt), g.value]
     ]);
   }
-}), fo = /* @__PURE__ */ ue(za, [["__scopeId", "data-v-656b38f1"]]);
+}), fo = /* @__PURE__ */ ue(za, [["__scopeId", "data-v-1ca3a8a7"]]);
 export {
   fo as B,
   Oa as D,
@@ -3254,4 +3254,4 @@ export {
   yt as j,
   na as u
 };
-//# sourceMappingURL=dropdown.D_jkFrMd.js.map
+//# sourceMappingURL=dropdown.BoSI-Rre.js.map