@adyen/bento-vue2 1.34.0 → 1.35.0

package/dist/chunks/{use-cached-selected-values.B39-iEp4.js → use-cached-selected-values.it4ENg3q.js}

@@ -1,17 +1,18 @@
 import { computed as c, ref as O, onMounted as te, onUnmounted as _e, watch as se, defineComponent as $, toRef as G } from "vue";
 import { B as w } from "./typography.CqQaHXhq.js";
 import { B as ge } from "./loading-indicator.DXc7I1Lm.js";
-import { B as ye } from "./empty-state.C2ba_wDp.js";
+import { B as ye } from "./empty-state.CaQuZx7L.js";
 import { u as Y } from "./i18n.BQkEbtPM.js";
 import { d as pe } from "./debounce.DUTu11PS.js";
 import { n as D } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+/* empty css              */
 import { B as k, a as X } from "./keyboard-navigation.Clz1jOaA.js";
-import { B as Z } from "./checkbox.CaX67eM_.js";
+import { B as J } from "./checkbox.CVSzcaHk.js";
 import "./index.Cl4_42j5.js";
-import { C as Ce, a as Se } from "./chevron-up.B2uWhZf7.js";
+import { C as Ce, a as Se } from "./chevron-up.DqJmLciO.js";
 import { B as he } from "./base-button.qWj0m9-v.js";
-import { C as xe } from "./cross-small.BLUwtRB-.js";
-import { B as Ee, a as J } from "./loading-button.DDPZYO6r.js";
+import { C as xe } from "./cross-small.CZqsjZDz.js";
+import { B as Ee, a as Z } from "./loading-button.CsaWlmzb.js";
 import { o as Le } from "./resize.Bqks3WUm.js";
 import "../assets/use-cached-selected-values.css";
 const le = (t, e, s, l) => {
@@ -106,7 +107,7 @@ function Oe(t, { disabled: e, itemHeight: s, overscan: l = 5, prefixHeight: n })
     wrapperProps: p
   };
 }
-var i = /* @__PURE__ */ ((t) => (t.SELECT = "select", t.SHOW_MORE = "show-more", t.ESCAPE = "escape-pressed", t.CLICK = "click", t.ENTER = "enter-pressed", t.SPACE = "space-pressed", t.TAB = "tab-pressed", t.CLOSE_DROPDOWN = "close-dropdown", t))(i || {}), M = /* @__PURE__ */ ((t) => (t.AUTOMATIC = "automatic", t.BUTTON = "button", t.NONE = "none", t))(M || {});
+var i = /* @__PURE__ */ ((t) => (t.SELECT = "select", t.SHOW_MORE = "show-more", t.ESCAPE = "escape-pressed", t.CLICK = "click", t.ENTER = "enter-pressed", t.SPACE = "space-pressed", t.TAB = "tab-pressed", t.CLOSE_DROPDOWN = "close-dropdown", t))(i || {}), P = /* @__PURE__ */ ((t) => (t.AUTOMATIC = "automatic", t.BUTTON = "button", t.NONE = "none", t))(P || {});
 const Te = $({
   name: "bento-listbox-static-category",
   components: {
@@ -176,7 +177,7 @@ var De = function() {
   }, function(l) {
     return !l.type.indexOf("key") && e._k(l.keyCode, "tab", 9, l.key, "Tab") ? null : e.onOptionSelected(e.BentoListboxEvent.TAB, l);
   }] } }, "label", e.$attrs, !1), [e._t("default")], 2);
-}, $e = [], Ne = /* @__PURE__ */ D(
+}, $e = [], Me = /* @__PURE__ */ D(
   ke,
   De,
   $e,
@@ -184,19 +185,19 @@ var De = function() {
   null,
   "d7fb415c"
 );
-const q = Ne.exports;
+const q = Me.exports;
 let Q = 0;
-const Pe = {
+const Ne = {
   beforeCreate() {
     this.uuid = Q.toString(), Q += 1;
   }
 };
-var Me = function() {
+var Pe = function() {
   var e = this, s = e._self._c;
   return s("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"] ? s("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), s("path", { attrs: { fill: "#00112C", d: "M15.0608 4.00011L14.0001 2.93945L6.00011 10.9395L2.00011 6.93945L0.939453 8.00011L6.00011 13.0608L15.0608 4.00011Z" } })]);
 }, we = [], Fe = /* @__PURE__ */ D(
+  Ne,
   Pe,
-  Me,
   we,
   !1,
   null,
@@ -456,16 +457,16 @@ var Ke = function() {
 );
 const Xe = He.exports;
 var j = /* @__PURE__ */ ((t) => (t.DISABLED = "disabled", t.STATIC_CATEGORY = "static-category", t))(j || {}), z = /* @__PURE__ */ ((t) => (t.SELECT_CATEGORY = "select-category", t.UNSELECT_CATEGORY = "unselect-category", t))(z || {});
-const Ze = {
+const Je = {
   "en-US": {
     categoryClosed: "{category} closed",
     categoryOpened: "{category} opened"
   }
-}, Je = $({
-  i18n: { messages: Ze },
+}, Ze = $({
+  i18n: { messages: Je },
   name: "bento-listbox-multi-select-category",
   components: {
-    BentoCheckbox: Z,
+    BentoCheckbox: J,
     BentoTypography: w,
     BentoListboxOption: q,
     ChevronDownIcon: Ce,
@@ -580,7 +581,7 @@ var Qe = function() {
     return e.toggleOpen.apply(null, arguments);
   } } }, [e.isOpen ? s("chevron-up-icon", { attrs: { "svg-title": e.chevronTitle } }) : s("chevron-down-icon", { attrs: { "svg-title": e.chevronTitle } })], 1)], 1)], 1), s("div", { directives: [{ name: "show", rawName: "v-show", value: e.showItemChildren, expression: "showItemChildren" }] }, [e._t("default")], 2)], 1);
 }, et = [], tt = /* @__PURE__ */ D(
-  Je,
+  Ze,
   Qe,
   et,
   !1,
@@ -588,11 +589,11 @@ var Qe = function() {
   "f360ac3d"
 );
 const st = tt.exports;
-var P = /* @__PURE__ */ ((t) => (t.SELECT_CATEGORY = "select-category", t.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", t.UNSELECT_CATEGORY = "unselect-category", t))(P || {});
+var N = /* @__PURE__ */ ((t) => (t.SELECT_CATEGORY = "select-category", t.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", t.UNSELECT_CATEGORY = "unselect-category", t))(N || {});
 const lt = $({
   name: "listbox-multi-select-options",
   components: {
-    BentoCheckbox: Z,
+    BentoCheckbox: J,
     BentoListboxOption: q,
     BentoTypography: w,
     ListboxMultiSelectCategory: st
@@ -653,19 +654,19 @@ const lt = $({
     staticCategories: { type: Boolean, default: !1 }
   },
   emits: [
-    P.TOGGLE_CHECKBOX_SELECTION,
-    P.SELECT_CATEGORY,
-    P.UNSELECT_CATEGORY
+    N.TOGGLE_CHECKBOX_SELECTION,
+    N.SELECT_CATEGORY,
+    N.UNSELECT_CATEGORY
   ],
   setup(t, { emit: e }) {
     const s = (b) => {
-      e(P.TOGGLE_CHECKBOX_SELECTION, b);
+      e(N.TOGGLE_CHECKBOX_SELECTION, b);
     }, l = (b) => !!b.items, n = (b) => {
       const m = t.isMultiLevel && t.searching;
       return b.description && (!t.isMultiLevel || m);
     }, a = (b) => b.items ? !!b.items.find((m) => t.selectedItemsList.includes(m.value)) : t.selectedItemsList.includes(b.value), o = (b, m) => {
       if (l(m))
-        return e(b ? P.SELECT_CATEGORY : P.UNSELECT_CATEGORY, m);
+        return e(b ? N.SELECT_CATEGORY : N.UNSELECT_CATEGORY, m);
       s(m.value);
     };
     return {
@@ -681,7 +682,7 @@ const lt = $({
       selectSearch: o,
       // Enums
       BentoListboxEvent: i,
-      ListboxMultiSelectOptionsEvent: P
+      ListboxMultiSelectOptionsEvent: N
     };
   }
 });
@@ -711,6 +712,12 @@ var nt = function() {
 const it = ot.exports, ct = {
   "en-US": {
     remove: "Remove"
+  },
+  "pt-BR": {
+    remove: "Remover"
+  },
+  "ja-JP": {
+    remove: "削除"
   }
 }, rt = {
   i18n: { messages: ct }
@@ -783,7 +790,7 @@ const vt = mt.exports, ft = {
   i18n: { messages: ft },
   name: "bento-listbox-multi-select",
   components: {
-    BentoCheckbox: Z,
+    BentoCheckbox: J,
     BentoListboxOption: q,
     BentoTypography: w,
     ListboxMultiSelectOptions: it,
@@ -826,8 +833,8 @@ const vt = mt.exports, ft = {
      */
     lazyLoadType: {
       type: String,
-      default: M.NONE,
-      validator: (t) => Object.values(M).includes(t)
+      default: P.NONE,
+      validator: (t) => Object.values(P).includes(t)
     },
     /**
      * Flag that indicates that an external search it's being made
@@ -883,14 +890,14 @@ const vt = mt.exports, ft = {
       return g === 0 ? l("selectAll", { total: d }) : g === v ? l("allSelected", { total: v }) : g <= v ? l("numberOfTotalSelected", { number: g, total: v }) : l("numbersSelected", { number: g });
     }), B = (d) => {
       const v = (x) => {
-        const { isDisabled: y, isPreSelected: N } = E(x);
-        return y && N || !y;
+        const { isDisabled: y, isPreSelected: M } = E(x);
+        return y && M || !y;
       }, g = d.filter(v).filter((x) => !r.value.includes(x.value));
       e(i.SELECT, [...t.selectedValues, ...g]);
     }, u = (d) => {
       const v = (y) => {
-        const { isDisabled: N, isPreSelected: fe } = E(y);
-        return !(N && fe);
+        const { isDisabled: M, isPreSelected: fe } = E(y);
+        return !(M && fe);
       }, g = d.filter(v).map(({ value: y }) => y), x = t.selectedValues.filter((y) => !(g != null && g.includes(y.value)));
       e(i.SELECT, x);
     }, _ = () => {
@@ -913,14 +920,14 @@ const vt = mt.exports, ft = {
     }, V = c(() => {
       if (!b.value)
         return t.selectedValues;
-      const d = (y) => r.value.includes(y.value), v = (y) => !t.staticCategories && y.every((N) => d(N));
+      const d = (y) => r.value.includes(y.value), v = (y) => !t.staticCategories && y.every((M) => d(M));
       return t.items.flatMap(
         (y) => y.items && !v(y.items) ? y.items : y
       ).filter((y) => y.items ? !0 : d(y));
     }), K = c(() => {
-      var g, x, y, N;
+      var g, x, y, M;
       const d = ["automatic", "button"].includes(t.lazyLoadType), v = ((g = t.selectedValues) == null ? void 0 : g.length) > 0 && ((x = S.value) == null ? void 0 : x.length) !== ((y = m.value) == null ? void 0 : y.length);
-      return d && t.hasMoreItems ? !!((N = t.selectedValues) != null && N.length) : v;
+      return d && t.hasMoreItems ? !!((M = t.selectedValues) != null && M.length) : v;
     }), I = c(() => ["automatic", "button"].includes(t.lazyLoadType) ? !t.hasMoreItems : !0), U = c(
       () => n.value ? [n.value] : []
     ), ae = c(
@@ -1011,8 +1018,16 @@ var yt = function() {
 );
 const ee = Ct.exports, St = {
   "en-US": {
-    showMore: "Show more",
-    loading: "Loading"
+    loading: "Loading",
+    showMore: "Show more"
+  },
+  "pt-BR": {
+    loading: "Carregando",
+    showMore: "Mostrar mais"
+  },
+  "ja-JP": {
+    loading: "読み込み中",
+    showMore: "表示内容を増やす"
   }
 }, ht = 36, xt = $({
   name: "bento-listbox",
@@ -1081,8 +1096,8 @@ const ee = Ct.exports, St = {
      */
     lazyLoadType: {
       type: String,
-      default: M.NONE,
-      validator: (t) => Object.values(M).includes(t)
+      default: P.NONE,
+      validator: (t) => Object.values(P).includes(t)
     },
     /**
      * If enabled, the user will be able to select multiple items.
@@ -1130,7 +1145,7 @@ const ee = Ct.exports, St = {
     i.TAB
   ],
   setup(t, { emit: e, slots: s }) {
-    const l = O([]), n = G(t, "items"), { t: a } = Y(), o = c(() => t.lazyLoadType !== M.AUTOMATIC), r = c(() => t.lazyLoadType === M.AUTOMATIC), b = () => {
+    const l = O([]), n = G(t, "items"), { t: a } = Y(), o = c(() => t.lazyLoadType !== P.AUTOMATIC), r = c(() => t.lazyLoadType === P.AUTOMATIC), b = () => {
       var I;
       return typeof (t == null ? void 0 : t.virtualScroll) == "object" && ((I = t == null ? void 0 : t.virtualScroll) != null && I.itemHeight) ? t.virtualScroll.itemHeight : ht;
     }, {
@@ -1165,9 +1180,9 @@ const ee = Ct.exports, St = {
       var I;
       return ((I = t.items) == null ? void 0 : I.length) === 0;
     }), A = c(
-      () => t.lazyLoadType === M.BUTTON && t.hasMoreItems
+      () => t.lazyLoadType === P.BUTTON && t.hasMoreItems
     ), F = c(
-      () => t.loading ? J.LOADING : J.START
+      () => t.loading ? Z.LOADING : Z.START
     ), W = c(() => t.loading ? a("loading") : a("showMore")), V = c(() => ({
       ...t.emptyState,
       variant: "condensed"
@@ -1228,7 +1243,7 @@ var Et = function() {
   null,
   "0d827a88"
 );
-const zt = Ot.exports, H = (t, e) => {
+const Vt = Ot.exports, H = (t, e) => {
   for (const s of t) {
     if (s.value === e)
       return s.label;
@@ -1236,7 +1251,7 @@ const zt = Ot.exports, H = (t, e) => {
       return H(s.items, e);
   }
   return null;
-}, Vt = (t, e, s) => {
+}, Yt = (t, e, s) => {
   const l = O([]), n = O(), a = (b) => {
     n.value = s.value ? b.map(({ value: m }) => m) : b[0].value;
   }, o = (b) => {
@@ -1275,10 +1290,10 @@ const zt = Ot.exports, H = (t, e) => {
   };
 };
 export {
-  M as B,
+  P as B,
   i as a,
-  zt as b,
-  Vt as c,
+  Vt as b,
+  Yt as c,
   _t as u
 };
-//# sourceMappingURL=use-cached-selected-values.B39-iEp4.js.map
+//# sourceMappingURL=use-cached-selected-values.it4ENg3q.js.map

package/dist/chunks/use-cached-selected-values.it4ENg3q.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-cached-selected-values.it4ENg3q.js","sources":["../../src/composables/use-checkbox-select-all/use-checkbox-select-all.ts","../../src/composables/use-virtual-list/use-virtual-list.ts","../../src/types/listbox.ts","../../src/components/internal/listbox/components/listbox-single-select/components/listbox-single-select-category/listbox-single-select-category.vue","../../src/components/internal/listbox/components/listbox-option/listbox-option.vue","../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@6.0.2_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/checkmark.vue","../../src/components/internal/listbox/components/listbox-single-select-option/listbox-single-select-option.vue","../../src/components/internal/listbox/composables/useListboxKeyboardNavigation.ts","../../src/components/internal/listbox/components/listbox-single-select/listbox-single-select.vue","../../src/components/internal/listbox/components/listbox-multi-select/components/listbox-multi-select-options/components/listbox-multi-select-category/listbox-multi-select-category.types.ts","../../src/components/internal/listbox/components/listbox-multi-select/components/listbox-multi-select-options/components/listbox-multi-select-category/listbox-multi-select-category.vue","../../src/components/internal/listbox/components/listbox-multi-select/components/listbox-multi-select-options/listbox-multi-select-options.types.ts","../../src/components/internal/listbox/components/listbox-multi-select/components/listbox-multi-select-options/listbox-multi-select-options.vue","../../src/components/internal/listbox/components/listbox-multi-select/components/listbox-multi-select-chips/listbox-multi-select-chips.vue","../../src/components/internal/listbox/composables/use-multi-level-items/use-multi-level-items.ts","../../src/components/internal/listbox/components/listbox-multi-select/listbox-multi-select.vue","../../src/components/internal/listbox/listbox.vue","../../src/components/internal/listbox/composables/use-cached-selected-values/use-cached-selected-values.ts"],"sourcesContent":["import { computed } from 'vue';\nimport type { ComputedRef } from 'vue';\nimport type { BentoListboxMultiSelectValue, Fn } from '@/types';\nimport { BentoListboxOptions } from '@/types';\n\n/**\n * Callback function that alllows to select all the items when called\n * @callback selectAllCallback\n */\n\n/**\n * Callback function that alllows to select all the items when called\n * @callback unselectAllCallback\n */\n\n/**\n * @typedef {Object} UseCheckboxSelectAll\n * @property {Ref<boolean>} isAllSelected - Indicates if all values are selected. Pass this to the :value property.\n * @property {Ref<boolean>} isIndeterminate - Indicates if it is in an indeterminated state (not all values are selected nor unselected). Pass this to the :indeterminate property.\n * @property {(selectedValue: boolean) => void} toggleSelectAll - Handles the select all flow, selects or unselects all and nullifies the indeterminated state. Pass this to the @input method.\n */\n\n/**\n * Composable to handle a 3 way checkbox state that allows to manage\n * a \"select all\", \"unselect all\" and an intermediate state where\n * not all are selected.\n *\n * @example\n * const checkboxVModelRef = ref<number[]>([]);\n *\n * const { isAllSelected, isIndeterminate, toggleSelectAll, updateIndeterminate } = useCheckboxSelectAll(\n *    checkboxVModelRef,\n *    () => { checkboxVModelRef.value = [...] // select all logic },\n *    () => { checkboxVModelRef.value = [] // unselect all logic },\n * );\n * toggleSelectAll(true|false); // Hook this to the @input method\n * updateIndeterminate(totalOfAvailableItems);\n *\n *\n * @param {ComputedRef<BentoListboxMultiSelectValue>} selectedItemsList - Reference to the list of selected values\n * @param {ComputedRef<BentoListboxOptions>} items - Reference to the list of all available items in the dropdown\n * @param {selectAllCallback} selectAll - Callback function that alllows to select all the items when called\n * @param {unselectAllCallback} unselectAll - Callback function that alllows to select all the items when called\n * @returns {UseCheckboxSelectAll} Values to be set to the bento-checkbox value and indeterminate props, as well as functions to update them accordingly\n *\n */\nexport const useCheckboxSelectAll = (\n    selectedItemsList: ComputedRef<BentoListboxMultiSelectValue>,\n    items: ComputedRef<BentoListboxOptions>,\n    selectAll: Fn,\n    unselectAll: Fn\n) => {\n    const isAllSelected = computed(\n        () => !!selectedItemsList.value?.length && selectedItemsList.value?.length === items.value.length\n    );\n    const isIndeterminate = computed(() => {\n        // eslint-disable-next-line eqeqeq\n        if (selectedItemsList.value == undefined || selectedItemsList.value.length === 0) {\n            return false;\n        }\n\n        return selectedItemsList.value?.length !== items.value.length;\n    });\n\n    const toggleSelectAll = (selectedValue: boolean) => {\n        if (selectedValue) {\n            selectAll();\n        } else {\n            unselectAll();\n        }\n    };\n\n    return {\n        isAllSelected,\n        isIndeterminate,\n\n        toggleSelectAll,\n    };\n};\n","import { computed, onMounted, onUnmounted, Ref, ref, UnwrapRef, watch } from 'vue';\nimport type {\n    UseVirtualListContainerProps,\n    UseVirtualListOptions,\n    UseVirtualListWrapperProps,\n} from './use-virtual-list.types';\nimport { observeSizeOfElement } from '../../utils/ts/resize';\n\n/**\n * Sets up a virtual scrolling functionality on a container element and a list of items to virtually scroll over.\n * This composables returns the containerProps and wrapperProps objects that should be v-binded onto the container and wrapper elements\n * of the list you wish to virtually scroll.\n *\n * This will return a filtered down list object the user can render based on how much the user has scrolled on the container.\n *\n * @usage\n * <template>\n *  <div v-bind=\"containerProps\" @scroll=\"onScroll\">\n *    <ul v-bind=\"wrapperProps\">\n *      <li v-for=\"item in list\" :key=\"item.index\" style=\"height: 22px\">\n *        {{ item.label }}\n *      </li>\n *    </ul>\n *  </div>\n * </template>\n *\n * <script setup lang=\"ts\"\n * import { useVirtualList } from '@adyen/bento-vue2';\n *\n * const DEFAULT_OPTIONS: { label: string }[] = new Array(100)\n *       .fill(0)\n *       .map((_, index) => ({ label: `Option ${index + 1}` }));\n * const ITEMS = ref(DEFAULT_OPTIONS);\n * const ITEM_HEIGHT = 30;\n *\n * const { containerProps, wrapperProps, list, onScroll } = useVirtualList(ITEMS, { itemHeight: ITEM_HEIGHT });\n * </script>\n *\n *\n * @param items - a reference to a list of items to virtually scroll over.\n * @param options - customises how the Virtual scroller list functions.\n * @param options.itemHeight - the height in pixel or a function that returns the height in pixels for each item.\n * @param options.overscan - number of pre-rendered DOM nodes. Prevents whitespace between items if you scroll very quickly.\n * @param options.prefixHeight - the prefix height of elements present the scrollable area but not present in the items property.\n * @param options.disabled - if set to true, disables the virtual scrolling functionality.\n */\nexport function useVirtualList<T>(\n    items: Ref<T[]>,\n    { disabled, itemHeight, overscan = 5, prefixHeight }: UseVirtualListOptions\n) {\n    const containerRef: Ref<UnwrapRef<HTMLElement | null>> = ref<HTMLElement | null>(null);\n    const list = ref<T[]>([]) as Ref<T[]>;\n    const startIndex = ref(0);\n    const endIndex = ref(0);\n    const containerHeight = ref(0);\n    let listObserver;\n\n    const wrapperProps = computed<UseVirtualListWrapperProps>(() => {\n        const totalHeight =\n            typeof itemHeight === 'number'\n                ? items.value.length * itemHeight\n                : items.value.reduce((sum, _, index) => sum + itemHeight(index), 0);\n\n        const offSetTop =\n            typeof itemHeight === 'number'\n                ? startIndex.value * itemHeight\n                : items.value.slice(0, startIndex.value).reduce((sum, _, i) => sum + itemHeight(i), 0);\n\n        return {\n            style: {\n                marginTop: `${offSetTop}px`,\n                height: `${totalHeight - offSetTop}px`,\n            },\n        };\n    });\n\n    /**\n     * Gets the offset for the first item to show within the visible area.\n     * @returns offset number.\n     */\n    const getOffset = () => {\n        const prefixHeightIfSet = prefixHeight?.value ?? 0;\n        const scrollTop = Math.max(containerRef.value.scrollTop - prefixHeightIfSet, 0);\n        if (typeof itemHeight === 'number') {\n            return Math.floor(scrollTop / itemHeight);\n        }\n\n        let sum = 0;\n        let offset = 0;\n\n        for (let i = 0; i < items.value.length; i += 1) {\n            const size = itemHeight(i);\n            sum += size;\n            if (sum >= scrollTop) {\n                offset = i;\n                break;\n            }\n        }\n        return offset;\n    };\n\n    /**\n     * Gets the visible number of items based on the container size and item heights.\n     * @returns visible number of items.\n     */\n    const getVisibileNumberOfItems = () => {\n        containerHeight.value = containerRef.value.clientHeight;\n        if (typeof itemHeight === 'number') {\n            return Math.ceil(containerHeight.value / itemHeight);\n        }\n\n        const start = startIndex.value ?? 0;\n        let sum = 0;\n        let capacity = 0;\n        for (let i = start; i < items.value.length; i += 1) {\n            const size = itemHeight(i);\n            sum += size;\n            capacity = i;\n            if (sum > containerHeight.value) {\n                break;\n            }\n        }\n        return capacity - start;\n    };\n\n    const updateVisibleItems = () => {\n        if (containerRef.value) {\n            const visibleCount = getVisibileNumberOfItems();\n            startIndex.value = getOffset();\n            endIndex.value = Math.min(startIndex.value + visibleCount + overscan, items.value.length);\n            list.value = items.value.slice(startIndex.value, endIndex.value);\n        }\n    };\n\n    const onScroll = () => {\n        updateVisibleItems();\n    };\n\n    if (!disabled) {\n        onMounted(() => {\n            if (containerRef.value) {\n                containerHeight.value = containerRef.value.clientHeight;\n                // When the listbox opens we need to update the height\n                listObserver = observeSizeOfElement(containerRef.value, ({ clientHeight }) => {\n                    containerHeight.value = clientHeight;\n                    updateVisibleItems();\n                });\n                updateVisibleItems();\n            }\n        });\n\n        onUnmounted(() => {\n            listObserver?.disconnect();\n        });\n\n        watch(\n            () => items.value,\n            () => {\n                updateVisibleItems();\n            }\n        );\n    }\n\n    const containerProps: UseVirtualListContainerProps = {\n        ref: containerRef,\n        style: { overflowY: 'auto' },\n    };\n\n    if (disabled) {\n        return {\n            containerRef,\n            containerProps,\n            // eslint-disable-next-line @typescript-eslint/no-empty-function\n            onScroll: () => {},\n            list: items,\n        };\n    }\n\n    return {\n        containerRef,\n        containerProps,\n        onScroll,\n        list,\n        wrapperProps,\n    };\n}\n","import { BentoSearchBarItem } from '@/components/search-bar';\nimport { BentoEmptyState } from '@/components/empty-state';\nimport { OmitStrict } from '@/core/types/omit-strict';\nimport { BentoButtonActionObject } from '@/components/button';\nimport { UseVirtualListItemHeight } from '@/composables/use-virtual-list';\n\nexport type BentoListboxValue = string | number;\n\nexport type BentoListboxMultiSelectValue = BentoListboxValue[];\n\nexport interface BentoListboxOptionItem extends BentoSearchBarItem {\n    data?: unknown;\n    description?: string;\n    value: BentoListboxValue;\n    items?: Array<BentoListboxOptionItem>; // Reference itself for multi-level options\n}\n\nexport type BentoListboxSelectedValue = BentoListboxValue | BentoListboxMultiSelectValue;\n\nexport type BentoListboxOptions = Array<BentoListboxOptionItem>;\n\nexport type BentoListboxIsOptionDisabled = undefined | ((optionValue: BentoListboxOptionItem) => boolean);\n\nexport enum BentoListboxEvent {\n    SELECT = 'select',\n    SHOW_MORE = 'show-more',\n    ESCAPE = 'escape-pressed',\n    CLICK = 'click',\n    ENTER = 'enter-pressed',\n    SPACE = 'space-pressed',\n    TAB = 'tab-pressed',\n    CLOSE_DROPDOWN = 'close-dropdown',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoListboxLazyLoadType {\n    AUTOMATIC = 'automatic',\n    BUTTON = 'button',\n    NONE = 'none',\n}\n\nexport interface BentoListboxSearchOptions {\n    /**\n     * Custom debounce time. Default: 300\n     */\n    debounceTime?: number;\n\n    /**\n     * The event that triggers upon user filtering the listbox items.\n     */\n    searchEvent: (searchValue: string) => void;\n}\n\nexport type BentoListboxEmptyStateProps = { action: { icon?: any } & BentoButtonActionObject } & OmitStrict<\n    InstanceType<typeof BentoEmptyState>['$props'],\n    'variant' | 'image' | 'description'\n>;\n\nexport type BentoListboxVirtulisationOptions = boolean | { itemHeight: UseVirtualListItemHeight };\n","<template>\n    <div class=\"b-listbox-single-select-category\">\n        <bento-typography variant=\"caption\" el=\"span\" class=\"b-listbox-single-select-category__label-text\">\n            {{ categoryLabel }}\n        </bento-typography>\n        <div>\n            <slot />\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n\n    export default defineComponent({\n        name: 'bento-listbox-static-category',\n        components: {\n            BentoTypography,\n        },\n        props: {\n            /**\n             * Category label text\n             */\n            categoryLabel: {\n                type: String,\n                required: true,\n            },\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./listbox-single-select-category.scss\" />\n","<template>\n    <label\n        class=\"b-listbox-option\"\n        role=\"option\"\n        :class=\"conditionalClasses\"\n        v-bind=\"$attrs\"\n        @click=\"onClick\"\n        @keydown.enter=\"onOptionSelected(BentoListboxEvent.ENTER, $event)\"\n        @keydown.space=\"onOptionSelected(BentoListboxEvent.SPACE, $event)\"\n        @keydown.tab=\"onOptionSelected(BentoListboxEvent.TAB, $event)\"\n    >\n        <slot></slot>\n    </label>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent } from 'vue';\n    import { BentoKeyboardNavigationKeyDownEvent, BentoListboxEvent } from '@/types';\n\n    /**\n     * listbox option wrapper.\n     * Contains only styles and allows the Multi-Select and Single-Select DRY the styles.\n     *\n     * Options and Attributes are inherited (`inheritAttrs: true`)\n     *\n     * @example\n     * <bento-listbox-option\n     *    ...props\n     *    ...attrs\n     * />\n     */\n    export default defineComponent({\n        name: 'bento-listbox-option',\n        props: {\n            /**\n             * Setting this property to true will disable the option.\n             */\n            disabled: { type: Boolean, default: false },\n\n            /**\n             * Indicates if the value is selected. Only one element can be selected at a time.\n             */\n            selected: { type: Boolean, default: false },\n        },\n        emits: [BentoListboxEvent.CLICK, BentoListboxEvent.ENTER, BentoListboxEvent.SPACE, BentoListboxEvent.TAB],\n        setup(props, { emit }) {\n            const conditionalClasses = computed(() => ({\n                'b-listbox-option--disabled': props.disabled,\n                'b-listbox-option--selected': props.selected,\n            }));\n\n            const onClick = (e: Event) => {\n                emit(BentoListboxEvent.CLICK, e);\n            };\n\n            const onOptionSelected = (eventName, e: Event) => {\n                emit(eventName, e);\n            };\n\n            return {\n                // Enums\n                BentoKeyboardNavigationKeyDownEvent,\n                BentoListboxEvent,\n\n                // Values\n                conditionalClasses,\n\n                // Events\n                onClick,\n                onOptionSelected,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./listbox-option.scss\" />\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M15.0608 4.00011L14.0001 2.93945L6.00011 10.9395L2.00011 6.93945L0.939453 8.00011L6.00011 13.0608L15.0608 4.00011Z\"/></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    <bento-listbox-option\n        class=\"b-listbox-single-select-option\"\n        :disabled=\"disabled\"\n        :selected=\"selected\"\n        :aria-selected=\"ariaSelected\"\n        :aria-disabled=\"ariaDisabled\"\n        :tabindex=\"tabIndex\"\n        @click=\"onOptionSelected(BentoListboxEvent.SELECT)\"\n        @enter-pressed=\"onOptionSelected(BentoListboxEvent.ENTER)\"\n        @space-pressed.prevent=\"onOptionSelected(BentoListboxEvent.SPACE)\"\n        @tab-pressed=\"onOptionSelected(BentoListboxEvent.TAB)\"\n    >\n        <slot v-bind=\"option\">\n            <span class=\"b-listbox-single-select-option__text\">\n                <bento-typography el=\"span\">{{ option.label }}</bento-typography>\n                <bento-typography\n                    v-if=\"option.description\"\n                    class=\"b-listbox-single-select-option__description\"\n                    el=\"span\"\n                >\n                    {{ option.description }}\n                </bento-typography>\n            </span>\n        </slot>\n        <span class=\"b-listbox-single-select-option__check-icon\">\n            <checkmark-icon v-show=\"selected\" svg-title=\"selected\" />\n        </span>\n    </bento-listbox-option>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoListboxOption } from '../listbox-option';\n    import { BentoListboxEvent, BentoListboxOptionItem } from '@/types';\n    import CheckmarkIcon from '@adyen/ui-assets-icons-16/vue/checkmark';\n\n    /**\n     * Listbox option element.\n     *\n     * @example\n     * <bento-listbox-single-select-option\n     *      v-for=\"option in options\"\n     *      :key=\"option.value\"\n     *      :option=\"option\"\n     *      :selected=\"option.selected\"\n     *      @select=\"onOptionSelected\"\n     * />\n     */\n    export default defineComponent({\n        name: 'bento-listbox-single-select-option',\n        components: {\n            BentoListboxOption,\n            BentoTypography,\n            CheckmarkIcon,\n        },\n        props: {\n            /**\n             * Setting this property to true will disable the option.\n             */\n            disabled: { type: Boolean, default: false },\n\n            /**\n             * The option item that contains all the option item's data.\n             * @type {BentoListboxOptionItem}\n             */\n            option: {\n                type: Object as PropType<BentoListboxOptionItem>,\n                required: true,\n            },\n\n            /**\n             * Indicates if the value is selected. Only one element can be selected at a time.\n             */\n            selected: { type: Boolean, default: false },\n        },\n        emits: [BentoListboxEvent.ENTER, BentoListboxEvent.SELECT, BentoListboxEvent.SPACE, BentoListboxEvent.TAB],\n        setup(props, { emit }) {\n            const onOptionSelected = eventName => {\n                if (props.disabled) {\n                    return;\n                }\n\n                /**\n                 * Trigerred when an option is clicked or selected via keyboard navigation.\n                 * Indicates which option was selected.\n                 *\n                 * @event {string} - The corresponding event\n                 * @property {number} selectedValue - Selected option's value\n                 */\n                emit(eventName, props.option);\n            };\n\n            const ariaDisabled = computed(() => (props.disabled ? true : null));\n            const ariaSelected = computed(() => (props.selected ? true : null));\n            const tabIndex = computed(() => (props.disabled ? -1 : 0));\n\n            return {\n                // Values\n                ariaDisabled,\n                ariaSelected,\n                tabIndex,\n\n                // Enums\n                BentoListboxEvent,\n\n                // Events\n                onOptionSelected,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./listbox-single-select-option.scss\" />\n","import { computed, onMounted, ref } from 'vue';\n\nconst enum ListboxKeyboardNavigationMutationDirection {\n    INCREASE = 'increase',\n    DECREASE = 'decrease',\n}\n\nexport const useListboxKeyboardNavigation = ({ items, isOptionDisabled, hasStaticCategories }, focusItem) => {\n    // support static categories i.e. items in items\n    // we currently only support one level of static categories\n    const flattenItems = computed(() =>\n        hasStaticCategories.value ? items.value.flatMap(item => item.items) : items.value\n    );\n\n    const numberOfItems = computed(() => flattenItems.value.length - 1);\n    const focusedIndex = ref(0);\n\n    onMounted(() => {\n        if (isOptionDisabled) {\n            focusedIndex.value = items.value.findIndex(el => !isOptionDisabled(el));\n        }\n    });\n\n    const isItemDisabled = (itemIndex: number) =>\n        !isOptionDisabled || (!!isOptionDisabled && isOptionDisabled(items.value[itemIndex]));\n\n    const isItemEnabled = (itemIndex: number) =>\n        !isOptionDisabled || (!!isOptionDisabled && !isOptionDisabled(items.value[itemIndex]));\n\n    const mutateFocusedIndex = (direction: ListboxKeyboardNavigationMutationDirection) => {\n        switch (direction) {\n            case ListboxKeyboardNavigationMutationDirection.INCREASE:\n                focusedIndex.value += 1;\n                break;\n            case ListboxKeyboardNavigationMutationDirection.DECREASE:\n                focusedIndex.value -= 1;\n                break;\n            default:\n                break;\n        }\n    };\n\n    const calculateFocusedIndex = ({ edgeCaseItem, isItemBeforeEdgeCaseItem }, callback, direction) => {\n        const isEdgeCaseItem = focusedIndex.value === edgeCaseItem;\n        if (isEdgeCaseItem) {\n            return;\n        }\n        if (isItemBeforeEdgeCaseItem) {\n            if (isItemEnabled(edgeCaseItem)) {\n                mutateFocusedIndex(direction);\n            }\n        } else {\n            mutateFocusedIndex(direction);\n            if (isItemDisabled(focusedIndex.value)) {\n                callback();\n            }\n        }\n        focusItem(focusedIndex.value);\n    };\n\n    const moveToNextElement = (event?: CustomEvent<KeyboardEvent>) => {\n        // prevent arrow down to scroll down the container\n        event?.detail?.preventDefault();\n        const isIndexSecondToLastItemInArray = focusedIndex.value === numberOfItems.value - 2;\n        calculateFocusedIndex(\n            {\n                isItemBeforeEdgeCaseItem: isIndexSecondToLastItemInArray,\n                edgeCaseItem: numberOfItems.value,\n            },\n            moveToNextElement,\n            ListboxKeyboardNavigationMutationDirection.INCREASE\n        );\n    };\n\n    const moveToPreviousElement = (event?: CustomEvent<KeyboardEvent>) => {\n        // prevent arrow up to scroll up the container\n        event?.detail?.preventDefault();\n        const IsIndexSecondItemInArray = focusedIndex.value === 1;\n        calculateFocusedIndex(\n            {\n                edgeCaseItem: 0,\n                isItemBeforeEdgeCaseItem: IsIndexSecondItemInArray,\n            },\n            moveToPreviousElement,\n            ListboxKeyboardNavigationMutationDirection.DECREASE\n        );\n    };\n\n    const moveToFirstElement = () => {\n        focusedIndex.value = 0;\n        if (isItemDisabled(focusedIndex.value)) {\n            moveToNextElement();\n        } else {\n            focusItem(focusedIndex.value);\n        }\n    };\n\n    const moveToLastElement = () => {\n        focusedIndex.value = numberOfItems.value;\n        if (isItemDisabled(focusedIndex.value)) {\n            moveToPreviousElement();\n        } else {\n            focusItem(focusedIndex.value);\n        }\n    };\n\n    const setListboxFocusedIndex = (index: number) => {\n        focusedIndex.value = index;\n    };\n\n    return {\n        moveToFirstElement,\n        moveToLastElement,\n        moveToNextElement,\n        moveToPreviousElement,\n        setListboxFocusedIndex,\n    };\n};\n","<template>\n    <div v-bento-keyboard-navigation-directive v-on=\"listboxListeners\">\n        <template v-if=\"hasCategories && staticCategories\">\n            <bento-listbox-single-select-category\n                v-for=\"category in items\"\n                :key=\"category.value\"\n                :category-label=\"category.label\"\n                role=\"group\"\n            >\n                <bento-listbox-single-select-option\n                    v-for=\"option in category.items\"\n                    :key=\"option.value\"\n                    ref=\"listboxItemRef\"\n                    role=\"option\"\n                    :option=\"option\"\n                    :disabled=\"isOptionDisabled ? isOptionDisabled(option) : null\"\n                    :selected=\"option.value === selectedItem.value\"\n                    v-on=\"listboxOptionListeners\"\n                >\n                    <template v-for=\"(_, innerSlot) of slots\" #[innerSlot]=\"scope\">\n                        <slot :name=\"innerSlot\" v-bind=\"scope\" />\n                    </template>\n                </bento-listbox-single-select-option>\n            </bento-listbox-single-select-category>\n        </template>\n        <template v-else>\n            <bento-listbox-single-select-option\n                v-for=\"option in items\"\n                :key=\"option.value\"\n                ref=\"listboxItemRef\"\n                role=\"option\"\n                :option=\"option\"\n                :disabled=\"isOptionDisabled ? isOptionDisabled(option) : null\"\n                :selected=\"option.value === selectedItem.value\"\n                v-on=\"listboxOptionListeners\"\n            >\n                <template v-for=\"(_, innerSlot) of slots\" #[innerSlot]=\"scope\">\n                    <slot :name=\"innerSlot\" v-bind=\"scope\" />\n                </template>\n            </bento-listbox-single-select-option>\n        </template>\n    </div>\n</template>\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref, toRef } from 'vue';\n    import { BentoListboxSingleSelectCategory } from './components/listbox-single-select-category';\n    import { BentoListboxSingleSelectOption } from '../listbox-single-select-option';\n    import { useListboxKeyboardNavigation } from '../../composables/useListboxKeyboardNavigation';\n    import {\n        BentoKeyboardNavigationKeyDownEvent,\n        BentoListboxEvent,\n        BentoListboxIsOptionDisabled,\n        BentoListboxOptions,\n    } from '@/types';\n    import { BentoKeyboardNavigationDirective } from '@/directives';\n\n    /**\n     * Listbox single-select options list\n     *\n     * @example\n     * import { BentoListboxMultiSelect } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoListboxMultiSelect },\n     *     template: `\n     *          <bento-listbox-multi-select\n     *              :items=\"[{ label: 'Option 1', value: 'option-1' }]\"\n     *              :selected-values=\"['option-1']\"\n     *          />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-listbox-single-select',\n        components: {\n            BentoListboxSingleSelectCategory,\n            BentoListboxSingleSelectOption,\n        },\n        directives: { BentoKeyboardNavigationDirective },\n        inheritAttrs: false,\n        props: {\n            /**\n             * Function that allows the options to be disabled\n             *\n             * @type {BentoListboxIsOptionDisabled}\n             * @param {BentoListboxOptionItem} option - listbox 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: () => false,\n            },\n\n            /**\n             * The option elements to populate the listbox with.\n             * It must be an array of {@see BentoListboxOptionItem }.\n             *\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 `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            selectedValue: {\n                type: Array as PropType<BentoListboxOptions>,\n                default: undefined,\n            },\n\n            /**\n             * If enabled, dropdown will display non-selectable, static categories\n             */\n            staticCategories: { type: Boolean, default: false },\n        },\n        emits: [BentoListboxEvent.SELECT, BentoListboxEvent.ENTER, BentoListboxEvent.SPACE, BentoListboxEvent.TAB],\n        setup(props, { emit, expose, slots }) {\n            const listboxItemRef = ref([]);\n            const selectedItem = computed(() => !!props.selectedValue?.length && props.selectedValue.at(0));\n\n            /**\n             * Finds out if items have sub items\n             */\n            const hasCategories = computed(() => !!props.items.some(({ items }) => !!items));\n\n            const onOptionSelected = eventName => (selectedOption: BentoListboxOptions) => {\n                emit(eventName, [selectedOption]);\n            };\n\n            const focusItem = (nextFocusedItemIndex: number) => listboxItemRef.value[nextFocusedItemIndex].$el.focus();\n\n            // Keyboard navigation\n            const {\n                moveToNextElement,\n                moveToPreviousElement,\n                moveToFirstElement,\n                moveToLastElement,\n                setListboxFocusedIndex,\n            } = useListboxKeyboardNavigation(\n                {\n                    items: toRef(props, 'items'),\n                    isOptionDisabled: props.isOptionDisabled,\n                    hasStaticCategories: toRef(props, 'staticCategories'),\n                },\n                focusItem\n            );\n\n            const listboxListeners = {\n                [BentoKeyboardNavigationKeyDownEvent.ARROW_UP]: moveToPreviousElement,\n                [BentoKeyboardNavigationKeyDownEvent.ARROW_DOWN]: moveToNextElement,\n                [BentoKeyboardNavigationKeyDownEvent.HOME]: moveToFirstElement,\n                [BentoKeyboardNavigationKeyDownEvent.END]: moveToLastElement,\n            };\n\n            const listboxOptionListeners = {\n                [BentoListboxEvent.SELECT]: onOptionSelected(BentoListboxEvent.SELECT),\n                [BentoListboxEvent.SPACE]: onOptionSelected(BentoListboxEvent.SPACE),\n                [BentoListboxEvent.TAB]: onOptionSelected(BentoListboxEvent.TAB),\n                [BentoListboxEvent.ENTER]: onOptionSelected(BentoListboxEvent.ENTER),\n            };\n\n            expose({\n                /**\n                 * Reference for a single listbox item.\n                 * Required for keyboard navigation in dropdown as $children is removed in vue@3\n                 */\n                listboxItemRef,\n                /**\n                 * Method to set the index of the item to be focused on\n                 * Used for focus management to be kept in-sync with parent e.g. dropdowns\n                 */\n                setListboxFocusedIndex,\n            });\n\n            return {\n                // Enums\n                BentoListboxEvent,\n\n                // Values\n                listboxItemRef,\n                selectedItem,\n                slots,\n\n                // Computed\n                hasCategories,\n\n                // Methods\n                onOptionSelected,\n\n                // Keyboard navigation\n                listboxListeners,\n                listboxOptionListeners,\n            };\n        },\n    });\n</script>\n","export enum ListboxMultiSelectCategoryClass {\n    DISABLED = 'disabled',\n    STATIC_CATEGORY = 'static-category',\n}\n\nexport enum ListboxMultiSelectCategoryEvent {\n    SELECT_CATEGORY = 'select-category',\n    UNSELECT_CATEGORY = 'unselect-category',\n}\n","<template>\n    <div>\n        <bento-listbox-option class=\"b-listbox-multi-select-category__option\" :class=\"conditionalClass\">\n            <bento-checkbox\n                v-if=\"!isStaticCategory\"\n                :model-value=\"isAllSelected\"\n                :indeterminate=\"isIndeterminate\"\n                :disabled=\"hasAllPropsDisabled\"\n                :aria-label=\"category.label\"\n                :value=\"category.value\"\n                @update:model-value=\"toggleSelectAll\"\n            />\n            <span class=\"b-listbox-multi-select-category__label\">\n                <bento-typography v-bind=\"categoryLabelProps\" class=\"b-listbox-multi-select-category__label-text\">\n                    {{ category.label }}\n                </bento-typography>\n                <div\n                    v-if=\"!isStaticCategory\"\n                    class=\"b-listbox-multi-select-category__label-chevron\"\n                    data-testid=\"toggle-listbox\"\n                    @click.capture=\"toggleOpen\"\n                >\n                    <chevron-up-icon v-if=\"isOpen\" :svg-title=\"chevronTitle\" />\n                    <chevron-down-icon v-else :svg-title=\"chevronTitle\" />\n                </div>\n            </span>\n        </bento-listbox-option>\n\n        <div v-show=\"showItemChildren\">\n            <slot />\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref, toRef } from 'vue';\n    import { BentoCheckbox } from '@/components/checkbox';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoListboxOption } from '../../../../../listbox-option';\n    import {\n        BentoListboxIsOptionDisabled,\n        BentoListboxMultiSelectValue,\n        BentoListboxOptionItem,\n        BentoListboxValue,\n    } from '@/types';\n    import { useCheckboxSelectAll } from '@/composables';\n    import {\n        ListboxMultiSelectCategoryClass,\n        ListboxMultiSelectCategoryEvent,\n    } from './listbox-multi-select-category.types';\n    import { useI18n } from '@/utils/ts/i18n';\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    import messages from './messages.json';\n\n    /**\n     * Listbox multi-select category list.\n     * Allows the rendering of nested lists\n     *\n     * @example\n     * import { ListboxMultiSelectCategory } from '@/internal/listbox';\n     *\n     * export default {\n     *     components: { BentoListboxMultiSelectCategory },\n     *     template: `\n     *          <listbox-multi-select-category\n     *              :category=\"option\"\n     *              :is-option-disabled=\"true\"\n     *              :selected-items-list=\"['option-1']\"\n     *              @select-category=\"$emit('select-category', option)\"\n     *              @unselect-category=\"$emit('unselect-category', option)\"\n     *          >\n     *              <listbox-multi-select-options\n     *                  category-items\n     *                  :items=\"[{ label: 'Option 1', value: 'option-1' }]\"\n     *                  :is-multi-level=\"true\"\n     *                  :selected-items-list=\"['option-']\"\n     *                  :searching=\"false\"\n     *                  @toggle-checkbox-selection=\"value => toggleCheckboxSelection(value)\"\n     *              />\n     *          </listbox-multi-select-category>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-listbox-multi-select-category',\n        components: {\n            BentoCheckbox,\n            BentoTypography,\n            BentoListboxOption,\n            ChevronDownIcon,\n            ChevronUpIcon,\n        },\n        props: {\n            /**\n             * The option elements to populate the listbox with.\n             * It must be an array of {@see BentoListboxOptionItem }.\n             *\n             * @property {string} value.label - Text to be displayed in the option\n             * @property {string,number} value.value - Value of the option\n             * @property {BentoListboxOptionItem} value.items - Category items list\n             */\n            category: {\n                type: Object as PropType<BentoListboxOptionItem>,\n                required: true,\n            },\n\n            /**\n             * Function that allows the options to be disabled\n             *\n             * @type {BentoListboxIsOptionDisabled}\n             * @param {BentoListboxOptionItem} option - listbox 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: () => false,\n            },\n\n            /**\n             * The `input` value.\n             * Providing an empty array will select no options.\n             */\n            selectedItemsList: {\n                type: Array as PropType<BentoListboxValue[]>,\n                default: () => [],\n            },\n\n            /**\n             * If enabled, dropdown will display non-selectable, static categories\n             */\n            staticCategories: { type: Boolean, default: false },\n        },\n        emits: [ListboxMultiSelectCategoryEvent.SELECT_CATEGORY, ListboxMultiSelectCategoryEvent.UNSELECT_CATEGORY],\n        setup(props, { emit }) {\n            const isOpen = ref(false);\n            const { t } = useI18n();\n\n            // This method should be used to determine if an option is disabled as it works for both vue 2 & 3.\n            const vue2Vue3FixedisOptionDisabled = option =>\n                props.isOptionDisabled ? props.isOptionDisabled(option) : false;\n\n            const hasAllPropsDisabled = computed(() =>\n                props.category.items.every(option => vue2Vue3FixedisOptionDisabled(option))\n            );\n\n            const isStaticCategory = toRef(props, 'staticCategories');\n\n            // Display item children if is open state or if static categories is enabled\n            const showItemChildren = computed(() => isOpen.value || props.staticCategories);\n\n            const conditionalClass = computed(() => ({\n                [`b-listbox-multi-select-category--${ListboxMultiSelectCategoryClass.DISABLED}`]:\n                    hasAllPropsDisabled.value,\n                [`b-listbox-multi-select-category--${ListboxMultiSelectCategoryClass.STATIC_CATEGORY}`]:\n                    props.staticCategories,\n            }));\n\n            const toggleOpen = (event: Event) => {\n                event.preventDefault();\n                isOpen.value = !isOpen.value;\n            };\n\n            const optionStates = (option: BentoListboxOptionItem) => {\n                const isDisabled = vue2Vue3FixedisOptionDisabled(option);\n                const isPreSelected =\n                    (props.selectedItemsList as BentoListboxMultiSelectValue)?.includes(option.value) || false;\n                return { isDisabled, isPreSelected };\n            };\n\n            const enabledItems = computed(() =>\n                props.category.items.filter(option => {\n                    const { isDisabled, isPreSelected } = optionStates(option);\n                    return (isDisabled && isPreSelected) || !isDisabled;\n                })\n            );\n\n            const visibleSelectedList = computed(\n                () =>\n                    enabledItems.value?.filter(({ value }) =>\n                        props.selectedItemsList?.includes(value)\n                    ) as unknown as BentoListboxMultiSelectValue\n            );\n\n            const chevronTitle = computed(() => {\n                const messageName = isOpen.value ? 'categoryOpened' : 'categoryClosed';\n                return t(messageName, { category: props.category.label }) as string;\n            });\n\n            const categoryLabelProps = computed(\n                () =>\n                    ({\n                        el: 'span',\n                        variant: props.staticCategories ? 'caption' : 'body',\n                    } as InstanceType<typeof BentoTypography>['$props'])\n            );\n\n            const selectAll = () => {\n                emit(ListboxMultiSelectCategoryEvent.SELECT_CATEGORY);\n            };\n            const unselectAll = () => {\n                emit(ListboxMultiSelectCategoryEvent.UNSELECT_CATEGORY);\n            };\n\n            const { isAllSelected, isIndeterminate, toggleSelectAll } = useCheckboxSelectAll(\n                visibleSelectedList,\n                enabledItems,\n                selectAll,\n                unselectAll\n            );\n\n            return {\n                // Values\n                chevronTitle,\n                conditionalClass,\n                hasAllPropsDisabled,\n                isOpen,\n                isAllSelected,\n                isIndeterminate,\n                isStaticCategory,\n\n                // Computed\n                showItemChildren,\n                categoryLabelProps,\n\n                // Methods\n                toggleOpen,\n                toggleSelectAll,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./listbox-multi-select-category.scss\" />\n","export enum ListboxMultiSelectOptionsEvent {\n    SELECT_CATEGORY = 'select-category',\n    TOGGLE_CHECKBOX_SELECTION = 'toggle-checkbox-selection',\n    UNSELECT_CATEGORY = 'unselect-category',\n}\n","<template>\n    <div>\n        <div v-for=\"option in items\" :key=\"`selected-${option.value}`\">\n            <template v-if=\"searching && isMultiLevel\">\n                <bento-listbox-option\n                    class=\"b-listbox-multi-select-options\"\n                    :class=\"conditionalClasses\"\n                    :disabled=\"isOptionDisabled ? isOptionDisabled(option) : null\"\n                >\n                    <bento-checkbox\n                        :model-value=\"isOptionSelected(option)\"\n                        :aria-label=\"option.label\"\n                        :disabled=\"isOptionDisabled ? isOptionDisabled(option) : null\"\n                        :value=\"option.value\"\n                        @update:model-value=\"value => selectSearch(value, option)\"\n                    />\n                    <slot v-bind=\"option\">\n                        <span class=\"b-listbox-multi-select__option-text\">\n                            <bento-typography el=\"span\">{{ option.label }}</bento-typography>\n                            <bento-typography\n                                v-if=\"shouldShowDescription(option)\"\n                                class=\"b-listbox-multi-select__option-description\"\n                                el=\"span\"\n                            >\n                                {{ option.description }}\n                            </bento-typography>\n                        </span>\n                    </slot>\n                </bento-listbox-option>\n            </template>\n\n            <template v-else>\n                <!-- Category -->\n                <template v-if=\"option.items\">\n                    <listbox-multi-select-category\n                        :category=\"option\"\n                        :static-categories=\"staticCategories\"\n                        :is-option-disabled=\"isOptionDisabled\"\n                        :selected-items-list=\"selectedItemsList\"\n                        @select-category=\"$emit(ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, option)\"\n                        @unselect-category=\"$emit(ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, option)\"\n                    >\n                        <listbox-multi-select-options\n                            category-items\n                            :items=\"option.items\"\n                            :is-option-disabled=\"isOptionDisabled\"\n                            :is-multi-level=\"isMultiLevel\"\n                            :static-categories=\"staticCategories\"\n                            :selected-items-list=\"selectedItemsList\"\n                            :searching=\"searching\"\n                            @toggle-checkbox-selection=\"value => toggleCheckboxSelection(value)\"\n                        />\n                    </listbox-multi-select-category>\n                </template>\n\n                <!-- Option -->\n                <bento-listbox-option\n                    v-else\n                    class=\"b-listbox-multi-select-options\"\n                    :class=\"conditionalClasses\"\n                    :disabled=\"isOptionDisabled ? isOptionDisabled(option) : null\"\n                >\n                    <bento-checkbox\n                        :model-value=\"selectedItemsList\"\n                        :aria-label=\"option.label\"\n                        :disabled=\"isOptionDisabled ? isOptionDisabled(option) : null\"\n                        :value=\"option.value\"\n                        @update:model-value=\"toggleCheckboxSelection(option)\"\n                    />\n                    <slot v-bind=\"option\">\n                        <span class=\"b-listbox-multi-select__option-text\">\n                            <bento-typography el=\"span\">{{ option.label }}</bento-typography>\n                            <bento-typography\n                                v-if=\"shouldShowDescription(option)\"\n                                class=\"b-listbox-multi-select__option-description\"\n                                el=\"span\"\n                            >\n                                {{ option.description }}\n                            </bento-typography>\n                        </span>\n                    </slot>\n                </bento-listbox-option>\n            </template>\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { BentoCheckbox } from '@/components/checkbox';\n    import { BentoListboxOption } from '../../../listbox-option';\n    import { BentoTypography } from '@/components/typography';\n    import { ListboxMultiSelectCategory } from './components/listbox-multi-select-category';\n    import {\n        BentoListboxEvent,\n        BentoListboxIsOptionDisabled,\n        BentoListboxOptionItem,\n        BentoListboxOptions,\n        BentoListboxValue,\n    } from '@/types';\n    import { ListboxMultiSelectOptionsEvent } from './listbox-multi-select-options.types';\n\n    /**\n     * Listbox multi-select options list\n     *\n     * @example\n     * import { ListboxMultiSelectOptions } from './components/listbox-multi-select-options';\n     *\n     * export default {\n     *     components: { ListboxMultiSelect },\n     *     template: `\n     *          <listbox-multi-select\n     *              :items=\"[{ label: 'Option 1', value: 'option-1' }]\"\n     *              :selected-values=\"['option-1']\"\n     *          />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'listbox-multi-select-options',\n        components: {\n            BentoCheckbox,\n            BentoListboxOption,\n            BentoTypography,\n            ListboxMultiSelectCategory,\n        },\n        props: {\n            /**\n             * Indicates if the items listed are inside a category\n             * so they can be padded to right by one level in recursion.\n             * Items of categories are automatically defined as \"categoryItems\"\n             */\n            categoryItems: { type: Boolean, default: false },\n\n            /**\n             * Function that allows the options to be disabled\n             *\n             * @type {BentoListboxIsOptionDisabled}\n             * @param {BentoListboxOptionItem} option - listbox 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: () => false,\n            },\n\n            /**\n             * The option elements to populate the listbox with.\n             * It must be an array of {@see BentoListboxOptionItem }.\n             *\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             * Indicates if the elements options are inside a multi-level category\n             */\n            isMultiLevel: { type: Boolean, default: false },\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: { type: Boolean, default: false },\n\n            /**\n             * List of selected items.\n             * Providing an empty array will select no options.\n             */\n            selectedItemsList: {\n                type: Array as PropType<BentoListboxValue[]>,\n                default: () => [],\n            },\n\n            /**\n             * If enabled, dropdown will display non-selectable, static categories\n             */\n            staticCategories: { type: Boolean, default: false },\n        },\n        emits: [\n            ListboxMultiSelectOptionsEvent.TOGGLE_CHECKBOX_SELECTION,\n            ListboxMultiSelectOptionsEvent.SELECT_CATEGORY,\n            ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY,\n        ],\n        setup(props, { emit }) {\n            const toggleCheckboxSelection = (option: BentoListboxOptionItem) => {\n                emit(ListboxMultiSelectOptionsEvent.TOGGLE_CHECKBOX_SELECTION, option);\n            };\n\n            const isCategory = (option: BentoListboxOptionItem) => !!option.items;\n            const shouldShowDescription = (option: BentoListboxOptionItem) => {\n                const isSearchingMultiLevel = props.isMultiLevel && props.searching;\n\n                return option.description && (!props.isMultiLevel || isSearchingMultiLevel);\n            };\n\n            const isOptionSelected = option => {\n                if (option.items) {\n                    return !!option.items.find(item => props.selectedItemsList.includes(item.value));\n                }\n                return props.selectedItemsList.includes(option.value);\n            };\n\n            // eslint-disable-next-line consistent-return\n            const selectSearch = (selectedValue, option) => {\n                if (isCategory(option)) {\n                    return selectedValue\n                        ? emit(ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, option)\n                        : emit(ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, option);\n                }\n\n                toggleCheckboxSelection(option.value);\n            };\n\n            const conditionalClasses = computed(() => ({\n                'b-listbox-multi-select-options__static-category-option': props.staticCategories,\n                'b-listbox-multi-select-options__category-option': props.categoryItems,\n            }));\n\n            return {\n                // Values\n                conditionalClasses,\n\n                // Methods\n                isOptionSelected,\n                shouldShowDescription,\n                toggleCheckboxSelection,\n                selectSearch,\n\n                // Enums\n                BentoListboxEvent,\n                ListboxMultiSelectOptionsEvent,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./listbox-multi-select-options.scss\" />\n","<template>\n    <div class=\"b-listbox-multi-select-chips\">\n        <div v-for=\"option in items\" :key=\"`selected-${option.value}`\">\n            <base-button\n                class=\"b-listbox-multi-select-chips__chip\"\n                :disabled=\"isOptionDisabled ? isOptionDisabled(option) : null\"\n                @click=\"unselectOption(option)\"\n            >\n                <bento-typography el=\"span\" variant=\"caption\" class=\"b-listbox-multi-select-chips__option-text\">{{\n                    option.label\n                }}</bento-typography>\n                <template #iconRight><cross-small-icon :svg-title=\"t('remove')\" /></template>\n            </base-button>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { PropType } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BaseButton } from '@/components/internal/base-button';\n    import CrossSmallIcon from '@adyen/ui-assets-icons-16/vue/cross-small';\n\n    import { BentoListboxIsOptionDisabled, BentoListboxOptionItem, BentoListboxOptions } from '@/types';\n\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    defineProps({\n        /**\n         * Function that defines the options to be disabled\n         */\n        isOptionDisabled: {\n            type: Function as PropType<BentoListboxIsOptionDisabled>,\n            default: () => false,\n        },\n\n        /**\n         * The option elements to populate the listbox with.\n         * It must be an array of {@see BentoListboxOptionItem }.\n         *\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    const emit = defineEmits([\"unselect-item\", \"unselect-category\"]);\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const unselectOption = (option: BentoListboxOptionItem) =>\n        option.items ? emit('unselect-category', option) : emit('unselect-item', option);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Listbox selected options chips\n     *\n     * @example\n     * import { ListboxMultiSelectChips } from './components/listbox-multi-select-chips';\n     *\n     * export default {\n     *     components: { ListboxMultiSelectChips },\n     *     template: `\n     *          <listbox-multi-select-chips\n     *              :items=\"[\n     *                  { label: 'Option 1', value: 'option-1' },\n     *                  { label: 'Category 1', value: 'category-1',\n     *                      items: [\n     *                          { label: 'C1 - Option 1', value: 'c1-1' },\n     *                          { label: 'C1 - Option 2', value: 'c1-2' }\n     *                      ]\n     *              }]\"\n     *              :is-option-disabled=\"isOptionDisabled\"\n     *              @unselect-category=\"unselectCategory\"\n     *              @unselect-item=\"unselectItem\"\n     *          />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./listbox-multi-select-chips.scss\" />\n","import { BentoListboxOptions } from '@/types/listbox';\nimport { computed, Ref } from 'vue';\n\n/**\n * Checks if items array is flat or has multi levels and converts items into a flat array if needed\n *\n * It receives a layout of type @see BentoLayoutGroupProportions to\n * generate the class and apply it to the children of the @see BentoFormLayoutGroup component\n *\n * @param {Ref<BentoListboxOptions>} itemsList - ref of the list of items for the listbox\n * @returns {ComputedRef<boolean>} isMultiLevelSelect - Indicates if items array is multi level\n * @returns {ComputedRef<any[]>} flattenedItemsList - list of items computed into a flat array\n */\nexport const useMultiLevelItems = (itemsList: Ref<BentoListboxOptions>) => {\n    const isMultiLevelSelect = computed(() => !!itemsList.value?.find(({ items }) => !!items));\n\n    const flattenedItemsList = computed(() => {\n        if (isMultiLevelSelect.value) {\n            return itemsList.value?.reduce((acc, val) => {\n                if (val.items) {\n                    acc.push(...val.items.flat());\n                } else {\n                    acc.push(val);\n                }\n                return acc;\n            }, []);\n        }\n\n        return itemsList.value;\n    });\n\n    return {\n        isMultiLevelSelect,\n        flattenedItemsList,\n    };\n};\n","<template>\n    <div v-bento-keyboard-navigation-directive class=\"b-listbox-multi-select\" v-on=\"listboxListeners\">\n        <!-- Select all -->\n        <bento-listbox-option\n            v-if=\"showSelectAllCheckbox\"\n            ref=\"selectAllListboxItemsRef\"\n            class=\"b-listbox-multi-select__option\"\n        >\n            <bento-checkbox\n                :aria-label=\"selectAllCheckboxText\"\n                :model-value=\"isAllSelected\"\n                :indeterminate=\"isIndeterminate\"\n                @update:model-value=\"toggleSelectAll\"\n            />\n            <bento-typography el=\"span\" aria-hidden=\"true\">\n                {{ selectAllCheckboxText }}\n            </bento-typography>\n        </bento-listbox-option>\n        <hr v-if=\"showSelectAllCheckbox\" class=\"b-listbox-multi-select__divider\" />\n\n        <!-- Selected options -->\n        <div v-if=\"showSelectedItems\">\n            <listbox-multi-select-chips\n                ref=\"selectedListboxItemsRef\"\n                :items=\"selectedOptions\"\n                :is-option-disabled=\"isOptionDisabled\"\n                @unselect-category=\"unselectAllCategory\"\n                @unselect-item=\"toggleCheckboxSelection(BentoListboxEvent.SELECT, $event)\"\n            />\n\n            <hr class=\"b-listbox-multi-select__divider\" />\n        </div>\n\n        <!-- Available options -->\n        <listbox-multi-select-options\n            ref=\"listboxItemsRef\"\n            :items=\"items\"\n            :is-option-disabled=\"isOptionDisabled\"\n            :is-multi-level=\"isMultiLevelSelect\"\n            :static-categories=\"staticCategories\"\n            :searching=\"searching\"\n            :selected-items-list=\"selectedItemsList\"\n            @toggle-checkbox-selection=\"toggleCheckboxSelection(BentoListboxEvent.SELECT, $event)\"\n            @select-category=\"selectAllCategory\"\n            @unselect-category=\"unselectAllCategory\"\n            @space-pressed=\"toggleCheckboxSelection(BentoListboxEvent.SPACE, $event)\"\n            @tab-pressed=\"toggleCheckboxSelection(BentoListboxEvent.TAB, $event)\"\n            @enter-pressed=\"toggleCheckboxSelection(BentoListboxEvent.ENTER, $event)\"\n        >\n            <template v-for=\"(_, innerSlot) of slots\" #[innerSlot]=\"scope\">\n                <slot :name=\"innerSlot\" v-bind=\"scope\" />\n            </template>\n        </listbox-multi-select-options>\n    </div>\n</template>\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref, toRef } from 'vue';\n    import { BentoCheckbox } from '@/components/checkbox';\n    import { BentoListboxOption } from '../listbox-option';\n    import { BentoTypography } from '@/components/typography';\n    import { useCheckboxSelectAll } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import {\n        BentoKeyboardNavigationKeyDownEvent,\n        BentoListboxEvent,\n        BentoListboxIsOptionDisabled,\n        BentoListboxLazyLoadType,\n        BentoListboxMultiSelectValue,\n        BentoListboxOptionItem,\n        BentoListboxOptions,\n        BentoListboxValue,\n    } from '@/types';\n    import { BentoKeyboardNavigationDirective } from '@/directives';\n    import { ListboxMultiSelectOptions } from './components/listbox-multi-select-options';\n    import { ListboxMultiSelectChips } from './components/listbox-multi-select-chips';\n\n    import messages from './messages.json';\n    import { useListboxKeyboardNavigation } from '../../composables/useListboxKeyboardNavigation';\n    import { useMultiLevelItems } from '../../composables/use-multi-level-items/use-multi-level-items';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    /**\n     * Listbox multi-select options list\n     *\n     * @example\n     * import { BentoListboxMultiSelect } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoListboxMultiSelect },\n     *     template: `\n     *          <bento-listbox-multi-select\n     *              :items=\"[{ label: 'Option 1', value: 'option-1' }]\"\n     *              :selected-values=\"['option-1']\"\n     *          />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-listbox-multi-select',\n        components: {\n            BentoCheckbox,\n            BentoListboxOption,\n            BentoTypography,\n            ListboxMultiSelectOptions,\n            ListboxMultiSelectChips,\n        },\n        directives: { BentoKeyboardNavigationDirective },\n        props: {\n            /**\n             * Indicates whether there are more items to load\n             */\n            hasMoreItems: { type: Boolean, default: false },\n\n            /**\n             * Function that allows the options to be disabled\n             *\n             * @type {BentoListboxIsOptionDisabled}\n             * @param {BentoListboxOptionItem} option - listbox 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: () => false,\n            },\n\n            /**\n             * The option elements to populate the listbox with.\n             * It must be an array of {@see BentoListboxOptionItem }.\n             *\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             * 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<BentoListboxLazyLoadType | `${BentoListboxLazyLoadType}`>,\n                default: BentoListboxLazyLoadType.NONE,\n                validator: (value: BentoListboxLazyLoadType) => Object.values(BentoListboxLazyLoadType).includes(value),\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: { type: Boolean, default: false },\n\n            /**\n             * The `input` value.\n             * Providing an empty array will select no options.\n             */\n            selectedValues: {\n                type: Array as PropType<BentoListboxOptions>,\n                required: true,\n            },\n\n            /**\n             * If enabled, dropdown will display non-selectable, static categories\n             */\n            staticCategories: { type: Boolean, default: false },\n        },\n        emits: [BentoListboxEvent.SELECT],\n        setup(props, { emit, slots }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n            const selectAllListboxItemsRef = ref(null);\n            const selectedListboxItemsRef = ref(null);\n            const listboxItemsRef = ref(null);\n\n            const selectedItemsList = computed<BentoListboxValue[]>(() =>\n                props.selectedValues.map(({ value }) => value)\n            );\n\n            const { isMultiLevelSelect, flattenedItemsList } = useMultiLevelItems(toRef(props, 'items'));\n\n            const optionStates = (option: BentoListboxOptionItem) => {\n                const isDisabled = props.isOptionDisabled(option);\n                const isPreSelected =\n                    (selectedItemsList.value as BentoListboxMultiSelectValue)?.includes(option.value) || false;\n                return { isDisabled, isPreSelected };\n            };\n\n            // Items that are not disabled and pre-selected disabled items\n            const enabledItems = computed(() => {\n                if (props.searching && isMultiLevelSelect) {\n                    return props.items;\n                }\n\n                const fullItemsList = flattenedItemsList.value.filter(option => {\n                    const { isDisabled, isPreSelected } = optionStates(option);\n                    return (isDisabled && isPreSelected) || !isDisabled;\n                });\n\n                props.selectedValues.forEach(selectedValue => {\n                    if (!fullItemsList.find(item => item.value === selectedValue.value)) {\n                        fullItemsList.push(selectedValue);\n                    }\n                });\n\n                return fullItemsList;\n            });\n\n            const visibleSelectedList = computed(\n                () =>\n                    enabledItems.value?.filter(option => {\n                        if (option.items && isMultiLevelSelect.value && props.searching) {\n                            const amountOfSelectedCategoryOptions = option.items.filter(categoryOption =>\n                                (props.selectedValues ?? []).includes(categoryOption.value)\n                            ).length;\n                            return amountOfSelectedCategoryOptions === option.items.length;\n                        }\n\n                        return selectedItemsList.value?.includes(option.value); // Check for category\n                    }) as BentoListboxMultiSelectValue\n            );\n\n            const calculateTotalItems = () => {\n                if (isMultiLevelSelect.value && !props.searching) {\n                    return flattenedItemsList.value.length;\n                }\n\n                return props.items.length;\n            };\n\n            const selectAllCheckboxText = computed(() => {\n                const possibleSelections = enabledItems.value.length;\n                const total = calculateTotalItems();\n                const amountSelectedValues = visibleSelectedList.value?.length || 0;\n\n                if (amountSelectedValues === 0) {\n                    return t('selectAll', { total: possibleSelections });\n                }\n\n                if (amountSelectedValues === total) {\n                    return t('allSelected', { total });\n                }\n\n                return amountSelectedValues <= total\n                    ? t('numberOfTotalSelected', { number: amountSelectedValues, total })\n                    : t('numbersSelected', { number: amountSelectedValues });\n            });\n\n            const selectAll = (selectableItems: BentoListboxOptions) => {\n                const filterOutDisabledAndNotPreselectedOptions = option => {\n                    const { isDisabled, isPreSelected } = optionStates(option);\n                    return (isDisabled && isPreSelected) || !isDisabled;\n                };\n\n                // Adding or removing this list of values\n                const addOrRemoveList = selectableItems\n                    .filter(filterOutDisabledAndNotPreselectedOptions)\n                    .filter(item => !selectedItemsList.value.includes(item.value)); // MAKE SURE NOT TO ADD DUPLICATES\n\n                emit(BentoListboxEvent.SELECT, [...props.selectedValues, ...addOrRemoveList]);\n            };\n\n            const unselectAll = (selectableItems: BentoListboxOptions) => {\n                const findEnabledUnselectedItems = option => {\n                    const { isDisabled, isPreSelected } = optionStates(option);\n                    return !(isDisabled && isPreSelected);\n                };\n\n                const unselectedItemsList = selectableItems\n                    .filter(findEnabledUnselectedItems)\n                    .map(({ value }) => value);\n                const newSelectedList = props.selectedValues.filter(item => !unselectedItemsList?.includes(item.value));\n                emit(BentoListboxEvent.SELECT, newSelectedList);\n            };\n\n            const selectAllItems = () => {\n                selectAll(flattenedItemsList.value);\n            };\n\n            const unselectAllItems = () => {\n                unselectAll(flattenedItemsList.value);\n            };\n\n            const { isAllSelected, isIndeterminate, toggleSelectAll } = useCheckboxSelectAll(\n                visibleSelectedList,\n                enabledItems,\n                selectAllItems,\n                unselectAllItems\n            );\n\n            const selectAllCategory = (category: BentoListboxOptionItem) => {\n                selectAll(category.items);\n            };\n\n            const unselectAllCategory = (category: BentoListboxOptionItem) => {\n                unselectAll(category.items);\n            };\n\n            const toggleCheckboxSelection = (eventName, selectedOption: BentoListboxOptionItem) => {\n                let exists = false;\n                const newSelectedList = props.selectedValues.filter(({ value }) => {\n                    if (selectedOption.value === value) {\n                        exists = true;\n                        return false;\n                    }\n\n                    return true;\n                });\n\n                if (!exists) {\n                    newSelectedList.push(selectedOption);\n                }\n                emit(eventName, newSelectedList);\n            };\n\n            const selectedOptions = computed(() => {\n                if (!isMultiLevelSelect.value) {\n                    return props.selectedValues;\n                }\n\n                const isOptionSelected = (option: BentoListboxOptionItem): boolean =>\n                    (selectedItemsList.value as unknown as Array<string | number>).includes(option.value);\n\n                const categoryOptionsSelected = (categoryOptions: BentoListboxOptionItem[]): boolean =>\n                    !props.staticCategories && categoryOptions.every(option => isOptionSelected(option));\n\n                const optionsFlat = props.items.flatMap(option =>\n                    option.items && !categoryOptionsSelected(option.items) ? option.items : option\n                );\n\n                const options = optionsFlat.filter(option => {\n                    if (option.items) {\n                        return true;\n                    }\n                    return isOptionSelected(option);\n                });\n\n                return options;\n            });\n\n            const showSelectedItems = computed(() => {\n                const isLazyLoad = ['automatic', 'button'].includes(props.lazyLoadType);\n                const hasAllItemsSelected =\n                    props.selectedValues?.length > 0 &&\n                    visibleSelectedList.value?.length !== flattenedItemsList.value?.length;\n\n                if (isLazyLoad && props.hasMoreItems) {\n                    return !!props.selectedValues?.length;\n                }\n\n                return hasAllItemsSelected;\n            });\n\n            const showSelectAllCheckbox = computed(() => {\n                const isLazyLoad = ['automatic', 'button'].includes(props.lazyLoadType);\n\n                if (!isLazyLoad) {\n                    return true;\n                }\n\n                return !props.hasMoreItems;\n            });\n\n            const computedSelectAllListboxItemsRefs = computed(() =>\n                selectAllListboxItemsRef.value ? [selectAllListboxItemsRef.value] : []\n            );\n\n            // Keyboard navigation\n            const computedselectedListboxItemsRefs = computed(() =>\n                selectedListboxItemsRef.value?.$children?.length ? selectedListboxItemsRef.value.$children : []\n            );\n\n            const computedlistboxItems = computed(() =>\n                listboxItemsRef.value?.$children?.length ? listboxItemsRef.value.$children : []\n            );\n\n            const computedselectAllItemRefs = computed(() => ({ label: selectAllCheckboxText, value: isAllSelected }));\n\n            const computedItems = computed(() => [\n                computedselectAllItemRefs,\n                ...selectedOptions.value,\n                ...flattenedItemsList.value,\n            ]);\n\n            const focusItem = (nextFocusedItemIndex: number) => {\n                const multiSelectListboxItems = [\n                    ...computedSelectAllListboxItemsRefs.value,\n                    ...computedselectedListboxItemsRefs.value,\n                    ...computedlistboxItems.value,\n                ];\n                multiSelectListboxItems[nextFocusedItemIndex].$el.focus();\n            };\n\n            const { moveToNextElement, moveToPreviousElement, moveToFirstElement, moveToLastElement } =\n                useListboxKeyboardNavigation(\n                    {\n                        items: ref(computedItems),\n                        isOptionDisabled: props.isOptionDisabled,\n                        hasStaticCategories: toRef(props, 'staticCategories'),\n                    },\n                    focusItem\n                );\n\n            const listboxListeners = {\n                [BentoKeyboardNavigationKeyDownEvent.ARROW_UP]: (event: CustomEvent<KeyboardEvent>) =>\n                    moveToPreviousElement(event),\n                [BentoKeyboardNavigationKeyDownEvent.ARROW_DOWN]: (event: CustomEvent<KeyboardEvent>) =>\n                    moveToNextElement(event),\n                [BentoKeyboardNavigationKeyDownEvent.HOME]: moveToFirstElement,\n                [BentoKeyboardNavigationKeyDownEvent.END]: moveToLastElement,\n            };\n\n            return {\n                // Refs\n                selectAllListboxItemsRef,\n                selectedListboxItemsRef,\n                listboxItemsRef,\n\n                // Values\n                isAllSelected,\n                showSelectedItems,\n                isIndeterminate,\n                isMultiLevelSelect,\n                flattenedItemsList,\n                selectedItemsList,\n                selectAllCheckboxText,\n                selectedOptions,\n                showSelectAllCheckbox,\n                slots,\n\n                // Enums\n                BentoListboxEvent,\n\n                // Methods\n                selectAllCategory,\n                toggleCheckboxSelection,\n                toggleSelectAll,\n                unselectAllCategory,\n\n                // Events\n                listboxListeners,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./listbox-multi-select.scss\" />\n","<template>\n    <div\n        :id=\"id\"\n        ref=\"listboxRef\"\n        v-bento-keyboard-navigation-directive\n        class=\"b-listbox\"\n        role=\"listbox\"\n        tabindex=\"-1\"\n        :aria-busy=\"ariaBusy\"\n        :aria-atomic=\"ariaAtomic\"\n        :aria-label=\"ariaLabel\"\n        :aria-live=\"ariaLive\"\n        :style=\"containerProps?.style\"\n        @scroll=\"onListboxContainerScroll\"\n    >\n        <div v-bind=\"wrapperProps\">\n            <!-- Empty search message -->\n            <div v-if=\"isSearchResultEmpty\" class=\"b-listbox__empty-search-message\">\n                <bento-empty-state v-if=\"emptyState\" v-bind=\"limitedEmptyStateProps\" />\n                <bento-typography v-else el=\"span\">{{ noResultsMessage }}</bento-typography>\n            </div>\n\n            <template v-else>\n                <!-- Multi select -->\n                <template v-if=\"multiple\">\n                    <bento-listbox-multi-select\n                        ref=\"listboxItemRef\"\n                        :has-more-items=\"hasMoreItems\"\n                        :items=\"items\"\n                        :lazy-load-type=\"lazyLoadType\"\n                        :static-categories=\"staticCategories\"\n                        :selected-values=\"selectedValue\"\n                        :searching=\"searching\"\n                        :is-option-disabled=\"isOptionDisabled\"\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-listbox-multi-select>\n                </template>\n\n                <!-- Single select -->\n                <template v-else>\n                    <bento-listbox-single-select\n                        ref=\"listboxItemRef\"\n                        :items=\"virtualisedItems\"\n                        :selected-value=\"selectedValue\"\n                        :static-categories=\"staticCategories\"\n                        :is-option-disabled=\"isOptionDisabled\"\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-listbox-single-select>\n                </template>\n                <div v-if=\"shouldDisplayShowMoreButton\" class=\"b-listbox__lazy-load\">\n                    <bento-loading-button :state=\"loadingButtonState\" variant=\"secondary\" @click.capture=\"emitShowMore\">\n                        {{ showMoreButtonText }}\n                    </bento-loading-button>\n                </div>\n                <div v-else-if=\"loading\" class=\"b-listbox__lazy-load\">\n                    <bento-loading-indicator />\n                </div>\n            </template>\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref, toRef } from 'vue';\n    import {\n        BentoKeyboardNavigationKeyDownEvent,\n        BentoListboxEmptyStateProps,\n        BentoListboxEvent,\n        BentoListboxIsOptionDisabled,\n        BentoListboxLazyLoadType,\n        BentoListboxOptionItem,\n        BentoListboxOptions,\n        BentoListboxVirtulisationOptions,\n    } from '@/types';\n    import { BentoKeyboardNavigationDirective } from '@/directives';\n    import { BentoListboxSingleSelect } from './components/listbox-single-select';\n    import { BentoListboxMultiSelect } from './components/listbox-multi-select';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n    import { BentoLoadingButton, BentoLoadingButtonState } from '@/components/button';\n    import { BentoEmptyState } from '@/components/empty-state';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { debounce } from '@/utils/ts/debounce';\n    import { useVirtualList } from '@/composables/use-virtual-list';\n    import type { HTMLAttributes } from 'vue/types/jsx';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n    const DEFAULT_DROPDOWN_ITEM_HEIGHT = 36;\n\n    /**\n     * Listbox container.\n     * It lists all the available options.\n     *\n     * @example\n     * <bento-listbox\n     *      v-slot=\"{label, value}\"\n     *      :id=\"listboxOptionsContainerId\"\n     *      :aria-label=\"ariaLabel\"\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     * </bento-listbox>\n     */\n    export default defineComponent({\n        name: 'bento-listbox',\n        components: {\n            BentoEmptyState,\n            BentoListboxSingleSelect,\n            BentoListboxMultiSelect,\n            BentoTypography,\n            BentoLoadingIndicator,\n            BentoLoadingButton,\n        },\n        directives: { BentoKeyboardNavigationDirective },\n        i18n: { messages },\n        props: {\n            /**\n             * Defines a string value that labels an interactive element.\n             */\n            ariaLabel: { type: String, default: null },\n\n            /**\n             * Empty state props that will be used with the inner empty state component to be displayed when no search results are found.\n             */\n            emptyState: {\n                type: Object as PropType<BentoListboxEmptyStateProps>,\n                default: undefined,\n            },\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 {BentoListboxIsOptionDisabled}\n             * @param {BentoListboxOptionItem} option - Listbox 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 listbox with.\n             * It must be an array of {@see BentoListboxOptionItem }\n             *  * @property {string} value.label - Text to be displayed in the option\n             *  * @property {string,number} value.value - Value of the option\n             */\n            items: {\n                type: Array as PropType<BentoListboxOptions>,\n                required: true,\n            },\n\n            /**\n             * Indicates if new options are loading.\n             */\n            loading: { type: Boolean, default: false },\n\n            /**\n             * The type of `Lazy Load`.\n             * Type \"automatic\" will enable infinite scrolling\n             * Type \"button\" will enable lazy loading with \"Show more\" button\n             */\n            lazyLoadType: {\n                type: String as PropType<BentoListboxLazyLoadType | `${BentoListboxLazyLoadType}`>,\n                default: BentoListboxLazyLoadType.NONE,\n                validator: (value: BentoListboxLazyLoadType) => Object.values(BentoListboxLazyLoadType).includes(value),\n            },\n\n            /**\n             * If enabled, the user will be able to select multiple items.\n             */\n            multiple: { type: Boolean, default: false },\n\n            /**\n             * If enabled, dropdown will display non-selectable, static categories\n             */\n            staticCategories: { type: Boolean, default: false },\n\n            /**\n             * Messaged displayed when no items are listed in the listbox\n             */\n            noResultsMessage: { type: String, required: true },\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: BentoListboxMultiSelect.props.searching,\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: () => [],\n            },\n\n            /**\n             * Enables virtual scrolling if set to true or by providing an object with itemHeight function.\n             * The itemHeight function is used to calculate the height of rendered item given it's index.\n             */\n            virtualScroll: {\n                type: [Boolean, Object] as PropType<BentoListboxVirtulisationOptions>,\n                default: false,\n            },\n        },\n        emits: [\n            BentoListboxEvent.SELECT,\n            BentoListboxEvent.SPACE,\n            BentoListboxEvent.SHOW_MORE,\n            BentoListboxEvent.ENTER,\n            BentoListboxEvent.ESCAPE,\n            BentoListboxEvent.TAB,\n        ],\n        setup(props, { emit, slots }) {\n            const listboxItemRef = ref([]);\n            const items = toRef(props, 'items');\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const isLazyLoadListbox = computed(() => props.lazyLoadType !== BentoListboxLazyLoadType.AUTOMATIC);\n            const hasAutomaticLazyLoader = computed(() => props.lazyLoadType === BentoListboxLazyLoadType.AUTOMATIC);\n\n            // Virtual scrolling\n            const virtualScrollItemHeight = () => {\n                if (typeof props?.virtualScroll === 'object' && props?.virtualScroll?.itemHeight) {\n                    return props.virtualScroll.itemHeight;\n                }\n                return DEFAULT_DROPDOWN_ITEM_HEIGHT;\n            };\n            const {\n                containerRef: listboxRef,\n                containerProps,\n                onScroll: onContainerScroll,\n                list: virtualisedItems,\n                wrapperProps,\n            } = useVirtualList<BentoListboxOptionItem>(items, {\n                itemHeight: virtualScrollItemHeight(),\n                // Disable virtual scrolling if not enabled or if lazy loading is enabled or if multi-select\n                disabled: props?.multiple || props?.virtualScroll === false || props?.lazyLoadType !== 'none',\n            });\n\n            // Aria a11y\n            const ariaAtomic = computed<HTMLAttributes['aria-atomic']>(() =>\n                isLazyLoadListbox.value ? 'true' : undefined\n            );\n            const ariaBusy = computed<HTMLAttributes['aria-busy']>(() =>\n                isLazyLoadListbox.value && props.loading ? 'true' : 'false'\n            );\n            const ariaLive = computed<HTMLAttributes['aria-live']>(() =>\n                isLazyLoadListbox.value ? 'polite' : undefined\n            );\n\n            const onOptionSelected = eventName => (selectedItem: BentoListboxOptions) => {\n                emit(eventName, selectedItem);\n            };\n\n            const emitShowMore = () => {\n                emit(BentoListboxEvent.SHOW_MORE);\n            };\n\n            const emitShowMoreOnScrollEnd = debounce(() => {\n                const container = listboxRef.value;\n\n                if (!container) {\n                    return;\n                }\n\n                const isAtBottom = Math.round(container.scrollTop) + container.clientHeight >= container.scrollHeight;\n\n                if (props.hasMoreItems && isAtBottom && !props.loading) {\n                    emitShowMore();\n                }\n            });\n\n            const onListboxContainerScroll = () => {\n                if (hasAutomaticLazyLoader.value) {\n                    emitShowMoreOnScrollEnd();\n                } else {\n                    onContainerScroll();\n                }\n            };\n\n            const isSearchResultEmpty = computed(() => props.items?.length === 0);\n\n            const shouldDisplayShowMoreButton = computed(\n                () => props.lazyLoadType === BentoListboxLazyLoadType.BUTTON && props.hasMoreItems\n            );\n\n            const loadingButtonState = computed(() =>\n                props.loading ? BentoLoadingButtonState.LOADING : BentoLoadingButtonState.START\n            );\n\n            const showMoreButtonText = computed(() => (props.loading ? t('loading') : t('showMore')));\n\n            const limitedEmptyStateProps = computed<InstanceType<typeof BentoEmptyState>['$props']>(() => ({\n                ...props.emptyState,\n                variant: 'condensed',\n            }));\n\n            const listboxListeners = {\n                [BentoListboxEvent.SELECT]: onOptionSelected(BentoListboxEvent.SELECT),\n                [BentoListboxEvent.SPACE]: onOptionSelected(BentoListboxEvent.SPACE),\n                [BentoListboxEvent.TAB]: onOptionSelected(BentoListboxEvent.TAB),\n                [BentoListboxEvent.ENTER]: onOptionSelected(BentoListboxEvent.ENTER),\n            };\n\n            return {\n                // Refs\n                listboxRef,\n                listboxItemRef,\n\n                // a11y\n                ariaAtomic,\n                ariaBusy,\n                ariaLive,\n\n                // Values\n                containerProps,\n                isSearchResultEmpty,\n                limitedEmptyStateProps,\n                loadingButtonState,\n                slots,\n                shouldDisplayShowMoreButton,\n                showMoreButtonText,\n                virtualisedItems,\n                wrapperProps,\n\n                // Enums\n                BentoKeyboardNavigationKeyDownEvent,\n                BentoListboxEvent,\n\n                // Methods\n                onListboxContainerScroll,\n                onOptionSelected,\n                emitShowMore,\n                listboxListeners,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./listbox.scss\" />\n","import {\n    BentoListboxMultiSelectValue,\n    BentoListboxOptions,\n    BentoListboxSelectedValue,\n    BentoListboxValue,\n} from '@/types';\nimport { ref, Ref, watch } from 'vue';\n\n/**\n * Extracts an item's label from the items in the list of options\n * displayed in the Listbox.\n *\n * Searches through all items and their sub-items (categories).\n *\n * @param items List of options displayed in the Listbox\n * @param value Selected value that needs to be found in the list\n * @returns Label found\n */\nconst findItemLabel = (items: BentoListboxOptions, value: BentoListboxValue): string => {\n    // eslint-disable-next-line no-restricted-syntax\n    for (const item of items) {\n        if (item.value === value) {\n            return item.label;\n        }\n\n        if (item.items) {\n            return findItemLabel(item.items, value);\n        }\n    }\n\n    return null;\n};\n\n/**\n * Creates two lists (one with value/label pairs and one simply with values) that are\n * used to cache the internal option selections to preserve the `label` in case the\n * value is loaded from external sources and might not be found in the list of `items`\n * later on.\n *\n * This helps with external searches and lazy loaded lists.\n *\n * @param items List of options displayed in the Listbox\n * @param selectedValues Selected list of values\n * @param multiple Indicates if the Listbox is multi-select (true) or single-select (false)\n * @returns Two lists of cached items. One list with label/value pairs and one with only the values stored.\n */\nexport const useCachedSelectedValues = (\n    items: Ref<BentoListboxOptions>,\n    selectedValues: Ref<BentoListboxSelectedValue>,\n    multiple: Ref<boolean>\n) => {\n    const cachedSelectedListboxOptions = ref<BentoListboxOptions>([]);\n    const cachedListboxSelectedValues = ref<BentoListboxSelectedValue>();\n\n    const setSimpleSelectedValues = (newSelectedValues: BentoListboxOptions) => {\n        cachedListboxSelectedValues.value = multiple.value\n            ? newSelectedValues.map(({ value }) => value)\n            : newSelectedValues[0].value;\n    };\n\n    const setCachedValues = (newSelectedValues: BentoListboxOptions) => {\n        cachedSelectedListboxOptions.value = newSelectedValues;\n        setSimpleSelectedValues(newSelectedValues);\n    };\n\n    const resetCache = () => {\n        cachedSelectedListboxOptions.value = [];\n        cachedListboxSelectedValues.value = null;\n    };\n\n    watch(\n        () => selectedValues.value,\n        () => {\n            if (!selectedValues.value) {\n                resetCache();\n                return;\n            }\n\n            const isSingleSelect = !Array.isArray(selectedValues.value);\n            // Make a copy of cache\n            const cachedCopy = [...cachedSelectedListboxOptions.value];\n            // Clear cache\n            resetCache();\n\n            const addValue = (value: BentoListboxValue) => {\n                // Search label by value in \"items\"\n                let selectedItemText = findItemLabel(items.value, value);\n\n                // Search in previous cache\n                if (!selectedItemText) {\n                    selectedItemText = findItemLabel(cachedCopy, value);\n                }\n\n                // Transform value to label if not found anywhere\n                if (!selectedItemText) {\n                    selectedItemText = value.toString();\n                }\n\n                cachedSelectedListboxOptions.value.push({ value, label: selectedItemText });\n            };\n\n            if (isSingleSelect) {\n                const value = selectedValues.value as BentoListboxValue;\n\n                addValue(value);\n                setSimpleSelectedValues(cachedSelectedListboxOptions.value);\n                return;\n            }\n\n            // Add each selected value in the cache\n            (selectedValues.value as BentoListboxMultiSelectValue).forEach(addValue);\n            setSimpleSelectedValues(cachedSelectedListboxOptions.value);\n        },\n        { immediate: true }\n    );\n\n    return {\n        // Values\n        cachedSelectedListboxOptions,\n        cachedListboxSelectedValues,\n        // Methods\n        resetCache,\n        setCachedValues,\n    };\n};\n"],"names":["useCheckboxSelectAll","selectedItemsList","items","selectAll","unselectAll","isAllSelected","computed","_a","_b","isIndeterminate","selectedValue","useVirtualList","disabled","itemHeight","overscan","prefixHeight","containerRef","ref","list","startIndex","endIndex","containerHeight","listObserver","wrapperProps","totalHeight","sum","_","index","offSetTop","i","getOffset","prefixHeightIfSet","scrollTop","offset","size","getVisibileNumberOfItems","start","capacity","updateVisibleItems","visibleCount","onScroll","onMounted","observeSizeOfElement","clientHeight","onUnmounted","watch","containerProps","BentoListboxEvent","BentoListboxEvent2","BentoListboxLazyLoadType","BentoListboxLazyLoadType2","_sfc_main$9","defineComponent","BentoTypography","_sfc_main$8","props","emit","conditionalClasses","BentoKeyboardNavigationKeyDownEvent","e","eventName","uuid","_sfc_main$7","_sfc_main$6","BentoListboxOption","CheckmarkIcon","onOptionSelected","ariaDisabled","ariaSelected","tabIndex","useListboxKeyboardNavigation","isOptionDisabled","hasStaticCategories","focusItem","flattenItems","item","numberOfItems","focusedIndex","el","isItemDisabled","itemIndex","isItemEnabled","mutateFocusedIndex","direction","calculateFocusedIndex","edgeCaseItem","isItemBeforeEdgeCaseItem","callback","moveToNextElement","event","isIndexSecondToLastItemInArray","moveToPreviousElement","IsIndexSecondItemInArray","_sfc_main$5","BentoListboxSingleSelectCategory","BentoListboxSingleSelectOption","BentoKeyboardNavigationDirective","expose","slots","listboxItemRef","selectedItem","hasCategories","selectedOption","nextFocusedItemIndex","moveToFirstElement","moveToLastElement","setListboxFocusedIndex","toRef","listboxListeners","listboxOptionListeners","ListboxMultiSelectCategoryClass","ListboxMultiSelectCategoryClass2","ListboxMultiSelectCategoryEvent","ListboxMultiSelectCategoryEvent2","_sfc_main$4","messages$3","BentoCheckbox","ChevronDownIcon","ChevronUpIcon","isOpen","t","useI18n","vue2Vue3FixedisOptionDisabled","option","hasAllPropsDisabled","isStaticCategory","showItemChildren","conditionalClass","toggleOpen","optionStates","isDisabled","isPreSelected","enabledItems","visibleSelectedList","value","chevronTitle","messageName","categoryLabelProps","toggleSelectAll","ListboxMultiSelectOptionsEvent","ListboxMultiSelectOptionsEvent2","_sfc_main$3","ListboxMultiSelectCategory","toggleCheckboxSelection","isCategory","shouldShowDescription","isSearchingMultiLevel","isOptionSelected","selectSearch","__default__","messages$2","useMultiLevelItems","itemsList","isMultiLevelSelect","flattenedItemsList","acc","val","_sfc_main$1","messages$1","ListboxMultiSelectOptions","ListboxMultiSelectChips","selectAllListboxItemsRef","selectedListboxItemsRef","listboxItemsRef","fullItemsList","categoryOption","calculateTotalItems","selectAllCheckboxText","possibleSelections","total","amountSelectedValues","selectableItems","filterOutDisabledAndNotPreselectedOptions","addOrRemoveList","findEnabledUnselectedItems","unselectedItemsList","newSelectedList","selectAllItems","unselectAllItems","selectAllCategory","category","unselectAllCategory","exists","selectedOptions","categoryOptionsSelected","categoryOptions","showSelectedItems","isLazyLoad","hasAllItemsSelected","_c","_d","showSelectAllCheckbox","computedSelectAllListboxItemsRefs","computedselectedListboxItemsRefs","computedlistboxItems","computedselectAllItemRefs","computedItems","DEFAULT_DROPDOWN_ITEM_HEIGHT","_sfc_main","BentoEmptyState","BentoListboxSingleSelect","BentoListboxMultiSelect","BentoLoadingIndicator","BentoLoadingButton","messages","isLazyLoadListbox","hasAutomaticLazyLoader","virtualScrollItemHeight","listboxRef","onContainerScroll","virtualisedItems","ariaAtomic","ariaBusy","ariaLive","emitShowMore","emitShowMoreOnScrollEnd","debounce","container","isAtBottom","onListboxContainerScroll","isSearchResultEmpty","shouldDisplayShowMoreButton","loadingButtonState","BentoLoadingButtonState","showMoreButtonText","limitedEmptyStateProps","findItemLabel","useCachedSelectedValues","selectedValues","multiple","cachedSelectedListboxOptions","cachedListboxSelectedValues","setSimpleSelectedValues","newSelectedValues","setCachedValues","resetCache","isSingleSelect","cachedCopy","addValue","selectedItemText"],"mappings":"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","x_google_ignoreList":[5]}