@adyen/bento-vue2 1.52.0 → 1.54.0

package/dist/chunks/{use-cached-selected-values.CxlYYUbd.js → use-cached-selected-values.DHpjo2tV.js}

@@ -1,16 +1,16 @@
-import { computed as r, ref as O, onMounted as de, onUnmounted as ge, watch as be, defineComponent as w, toRef as F, useSlots as pe } from "vue";
+import { computed as r, ref as O, onMounted as de, onUnmounted as ge, watch as be, defineComponent as P, toRef as F, useSlots as pe } from "vue";
 import { B as G } from "./typography.J1v_SPG3.js";
 import { B as ye } from "./loading-indicator.z8COalOc.js";
 import { B as Ce } from "./empty-state.JbgxSrnv.js";
 import { u as H } from "./i18n.BQkEbtPM.js";
 import { d as Se } from "./debounce.DUTu11PS.js";
 import "./index.Cl4_42j5.js";
-import { B as X } from "./checkbox.BeYtbfPv.js";
+import { B as X } from "./checkbox.DloQJI-K.js";
 import { B as he } from "./chip.BeK9uqmW.js";
 import { C as xe, a as Ee } from "./chevron-up.CSVyoaTy.js";
 import { B as k, a as J } from "./keyboard-navigation.pB8weElW.js";
 import { n as D } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { d as Le, e as ce } from "./button-actions.DAvSJtOB.js";
+import { d as Le, e as ce } from "./button-actions.XlUhz42n.js";
 /* empty css              */
 import { o as Oe } from "./resize.Bqks3WUm.js";
 import "../assets/use-cached-selected-values.css";
@@ -107,7 +107,7 @@ function Te(s, { disabled: e, itemHeight: t, overscan: l = 5, prefixHeight: n })
   };
 }
 var c = /* @__PURE__ */ ((s) => (s.SELECT = "select", s.SHOW_MORE = "show-more", s.ESCAPE = "escape-pressed", s.CLICK = "click", s.ENTER = "enter-pressed", s.SPACE = "space-pressed", s.TAB = "tab-pressed", s.CLOSE_DROPDOWN = "close-dropdown", s))(c || {}), $ = /* @__PURE__ */ ((s) => (s.AUTOMATIC = "automatic", s.BUTTON = "button", s.NONE = "none", s))($ || {});
-const Ie = w({
+const Ie = P({
   name: "bento-listbox-static-category",
   components: {
     BentoTypography: G
@@ -133,7 +133,7 @@ var Ae = function() {
   null,
   "4aa8cc6e"
 );
-const ke = Re.exports, De = w({
+const ke = Re.exports, De = P({
   name: "bento-listbox-option",
   props: {
     /**
@@ -176,7 +176,7 @@ var Me = 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);
-}, Ne = [], we = /* @__PURE__ */ D(
+}, Ne = [], Pe = /* @__PURE__ */ D(
   De,
   Me,
   Ne,
@@ -184,9 +184,9 @@ var Me = function() {
   null,
   "d7fb415c"
 );
-const Y = we.exports;
+const Y = Pe.exports;
 let re = 0;
-const Pe = {
+const we = {
   beforeCreate() {
     this.uuid = re.toString(), re += 1;
   }
@@ -195,14 +195,14 @@ var $e = function() {
   var e = this, t = e._self._c;
   return t("svg", e._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? t("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), t("path", { attrs: { fill: "#00112C", d: "M15.0608 4.00011L14.0001 2.93945L6.00011 10.9395L2.00011 6.93945L0.939453 8.00011L6.00011 13.0608L15.0608 4.00011Z" } })]);
 }, Fe = [], Ge = /* @__PURE__ */ D(
-  Pe,
+  we,
   $e,
   Fe,
   !1,
   null,
   null
 );
-const Ue = Ge.exports, ze = w({
+const Ue = Ge.exports, ze = P({
   name: "bento-listbox-single-select-option",
   components: {
     BentoListboxOption: Y,
@@ -323,7 +323,7 @@ const We = Ke.exports, ve = ({ items: s, isOptionDisabled: e, hasStaticCategorie
       a.value = f;
     }
   };
-}, qe = w({
+}, qe = P({
   name: "bento-listbox-single-select",
   components: {
     BentoListboxSingleSelectCategory: ke,
@@ -465,7 +465,7 @@ const Ze = {
     categoryClosed: "{category} closed",
     categoryOpened: "{category} opened"
   }
-}, Qe = w({
+}, Qe = P({
   i18n: { messages: Ze },
   name: "bento-listbox-multi-select-category",
   components: {
@@ -524,8 +524,8 @@ const Ze = {
     })), v = (m) => {
       m.preventDefault(), t.value = !t.value;
     }, C = (m) => {
-      var P;
-      const x = n(m), B = ((P = s.selectedItemsList) == null ? void 0 : P.includes(m.value)) || !1;
+      var w;
+      const x = n(m), B = ((w = s.selectedItemsList) == null ? void 0 : w.includes(m.value)) || !1;
       return { isDisabled: x, isPreSelected: B };
     }, S = r(
       () => s.category.items.filter((m) => {
@@ -593,7 +593,7 @@ var et = function() {
 );
 const lt = st.exports;
 var N = /* @__PURE__ */ ((s) => (s.SELECT_CATEGORY = "select-category", s.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", s.UNSELECT_CATEGORY = "unselect-category", s))(N || {});
-const nt = w({
+const nt = P({
   name: "listbox-multi-select-options",
   components: {
     BentoCheckbox: X,
@@ -731,7 +731,7 @@ const ct = it.exports, rt = (s) => {
     numbersSelected: "{number} selected",
     selectAll: "Select all ({total})"
   }
-}, dt = { i18n: { messages: ut } }, bt = /* @__PURE__ */ w({
+}, dt = { i18n: { messages: ut } }, bt = /* @__PURE__ */ P({
   ...dt,
   __name: "listbox-multi-select",
   props: {
@@ -794,7 +794,7 @@ const ct = it.exports, rt = (s) => {
       h,
       g,
       L
-    ), P = (u) => {
+    ), w = (u) => {
       f(u.items);
     }, K = (u) => {
       d(u.items);
@@ -848,7 +848,7 @@ const ct = it.exports, rt = (s) => {
       [k.HOME]: ae,
       [k.END]: ie
     };
-    return { __sfc: !0, props: t, emit: e, t: l, slots: n, selectAllListboxItemsRef: o, selectedListboxItemsRef: a, listboxItemsRef: b, selectedItemsList: i, isMultiLevelSelect: v, flattenedItemsList: C, optionStates: S, enabledItems: h, visibleSelectedList: A, calculateTotalItems: T, selectAllCheckboxText: R, selectAll: f, unselectAll: d, selectAllItems: g, unselectAllItems: L, isAllSelected: m, isIndeterminate: x, toggleSelectAll: B, selectAllCategory: P, unselectAllCategory: K, toggleCheckboxSelection: W, selectedOptions: V, showSelectedItems: I, showSelectAllCheckbox: U, computedSelectAllListboxItemsRefs: Z, computedselectedListboxItemsRefs: Q, computedlistboxItems: ee, computedselectAllItemRefs: te, computedItems: se, focusItem: le, moveToNextElement: ne, moveToPreviousElement: oe, moveToFirstElement: ae, moveToLastElement: ie, listboxListeners: me, BentoCheckbox: X, BentoTypography: G, BentoChip: he, BentoListboxOption: Y, ListboxMultiSelectOptions: ct, vBentoKeyboardNavigationDirective: J, BentoListboxEvent: c };
+    return { __sfc: !0, props: t, emit: e, t: l, slots: n, selectAllListboxItemsRef: o, selectedListboxItemsRef: a, listboxItemsRef: b, selectedItemsList: i, isMultiLevelSelect: v, flattenedItemsList: C, optionStates: S, enabledItems: h, visibleSelectedList: A, calculateTotalItems: T, selectAllCheckboxText: R, selectAll: f, unselectAll: d, selectAllItems: g, unselectAllItems: L, isAllSelected: m, isIndeterminate: x, toggleSelectAll: B, selectAllCategory: w, unselectAllCategory: K, toggleCheckboxSelection: W, selectedOptions: V, showSelectedItems: I, showSelectAllCheckbox: U, computedSelectAllListboxItemsRefs: Z, computedselectedListboxItemsRefs: Q, computedlistboxItems: ee, computedselectAllItemRefs: te, computedItems: se, focusItem: le, moveToNextElement: ne, moveToPreviousElement: oe, moveToFirstElement: ae, moveToLastElement: ie, listboxListeners: me, BentoCheckbox: X, BentoTypography: G, BentoChip: he, BentoListboxOption: Y, ListboxMultiSelectOptions: ct, vBentoKeyboardNavigationDirective: J, BentoListboxEvent: c };
   }
 });
 var ft = function() {
@@ -891,7 +891,7 @@ const ue = mt.exports, _t = {
     loading: "Carregando",
     showMore: "Mostrar mais"
   }
-}, gt = 36, pt = w({
+}, gt = 36, pt = P({
   name: "bento-listbox",
   components: {
     BentoEmptyState: Ce,
@@ -948,7 +948,7 @@ const ue = mt.exports, _t = {
       required: !0
     },
     /**
-     * Indicates if new options are loading.
+     * Indicates if new options are lazy loading.
      */
     loading: { type: Boolean, default: !1 },
     /**
@@ -961,6 +961,10 @@ const ue = mt.exports, _t = {
       default: $.NONE,
       validator: (s) => Object.values($).includes(s)
     },
+    /**
+     * Indicates the listbox is loading filtered items.
+     */
+    componentLoading: { type: Boolean, default: !1 },
     /**
      * If enabled, the user will be able to select multiple items.
      */
@@ -1021,11 +1025,11 @@ const ue = mt.exports, _t = {
       // Disable virtual scrolling if not enabled or if lazy loading is enabled or if multi-select
       disabled: (s == null ? void 0 : s.multiple) || (s == null ? void 0 : s.virtualScroll) === !1 || (s == null ? void 0 : s.lazyLoadType) !== "none"
     }), T = r(
-      () => a.value ? "true" : void 0
+      () => s.componentLoading !== void 0 || a.value ? "true" : void 0
     ), R = r(
-      () => a.value && s.loading ? "true" : "false"
+      () => a.value && s.loading || s.componentLoading ? "true" : "false"
     ), f = r(
-      () => a.value ? "polite" : void 0
+      () => a.value || s.componentLoading !== void 0 ? "polite" : void 0
     ), d = (I) => (U) => {
       e(I, U);
     }, g = () => {
@@ -1043,7 +1047,7 @@ const ue = mt.exports, _t = {
       return ((I = s.items) == null ? void 0 : I.length) === 0;
     }), B = r(
       () => s.lazyLoadType === $.BUTTON && s.hasMoreItems
-    ), P = r(
+    ), w = r(
       () => s.loading ? ce.LOADING : ce.START
     ), K = r(() => s.loading ? o("loading") : o("showMore")), W = r(() => ({
       ...s.emptyState,
@@ -1066,7 +1070,7 @@ const ue = mt.exports, _t = {
       containerProps: C,
       isSearchResultEmpty: x,
       limitedEmptyStateProps: W,
-      loadingButtonState: P,
+      loadingButtonState: w,
       slots: t,
       shouldDisplayShowMoreButton: B,
       showMoreButtonText: K,
@@ -1086,7 +1090,7 @@ const ue = mt.exports, _t = {
 var yt = function() {
   var l;
   var e = this, t = e._self._c;
-  return e._self._setupProxy, t("div", { directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "listboxRef", staticClass: "b-listbox", style: (l = e.containerProps) == null ? void 0 : l.style, attrs: { id: e.id, role: "listbox", tabindex: "-1", "aria-busy": e.ariaBusy, "aria-atomic": e.ariaAtomic, "aria-label": e.ariaLabel, "aria-live": e.ariaLive }, on: { scroll: e.onListboxContainerScroll } }, [t("div", e._b({}, "div", e.wrapperProps, !1), [e.isSearchResultEmpty ? t("div", { staticClass: "b-listbox__empty-search-message" }, [e.emptyState ? t("bento-empty-state", e._b({}, "bento-empty-state", e.limitedEmptyStateProps, !1)) : t("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(e.noResultsMessage))])], 1) : [e.multiple ? [t("bento-listbox-multi-select", e._g({ ref: "listboxItemRef", attrs: { "has-more-items": e.hasMoreItems, items: e.items, "lazy-load-type": e.lazyLoadType, "static-categories": e.staticCategories, "selected-values": e.selectedValue, searching: e.searching, "is-option-disabled": e.isOptionDisabled }, scopedSlots: e._u([e._l(e.slots, function(n, o) {
+  return e._self._setupProxy, t("div", { directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "listboxRef", staticClass: "b-listbox", style: (l = e.containerProps) == null ? void 0 : l.style, attrs: { id: e.id, role: "listbox", tabindex: "-1", "aria-busy": e.ariaBusy, "aria-atomic": e.ariaAtomic, "aria-label": e.ariaLabel, "aria-live": e.ariaLive }, on: { scroll: e.onListboxContainerScroll } }, [t("div", e._b({}, "div", e.wrapperProps, !1), [e.componentLoading ? t("div", { staticClass: "b-listbox__loading-filtered-items" }, [t("bento-loading-indicator")], 1) : e.isSearchResultEmpty ? t("div", { staticClass: "b-listbox__empty-search-message" }, [e.emptyState ? t("bento-empty-state", e._b({}, "bento-empty-state", e.limitedEmptyStateProps, !1)) : t("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(e.noResultsMessage))])], 1) : [e.multiple ? [t("bento-listbox-multi-select", e._g({ ref: "listboxItemRef", attrs: { "has-more-items": e.hasMoreItems, items: e.items, "lazy-load-type": e.lazyLoadType, "static-categories": e.staticCategories, "selected-values": e.selectedValue, searching: e.searching, "is-option-disabled": e.isOptionDisabled }, scopedSlots: e._u([e._l(e.slots, function(n, o) {
     return { key: o, fn: function(a) {
       return [e._t(o, null, null, a)];
     } };
@@ -1103,9 +1107,9 @@ var yt = function() {
   Ct,
   !1,
   null,
-  "9ad46841"
+  "37a9ab16"
 );
-const Pt = St.exports, j = (s, e) => {
+const wt = St.exports, j = (s, e) => {
   for (const t of s) {
     if (t.value === e)
       return t;
@@ -1118,7 +1122,7 @@ const Pt = St.exports, j = (s, e) => {
   return null;
 }, $t = (s, e, t) => {
   const l = O([]), n = O(), o = (i) => {
-    n.value = t.value ? i.map(({ value: v }) => v) : i[0].value;
+    t.value ? n.value = i.map(({ value: v }) => v) : n.value = i.length > 0 ? i[0].value : null;
   }, a = (i) => {
     l.value = i, o(i);
   }, b = () => {
@@ -1127,7 +1131,7 @@ const Pt = St.exports, j = (s, e) => {
   return be(
     () => e.value,
     () => {
-      if (!e.value) {
+      if (!e.value && e.value !== 0) {
         b();
         return;
       }
@@ -1157,8 +1161,8 @@ const Pt = St.exports, j = (s, e) => {
 export {
   $ as B,
   c as a,
-  Pt as b,
+  wt as b,
   $t as c,
   rt as u
 };
-//# sourceMappingURL=use-cached-selected-values.CxlYYUbd.js.map
+//# sourceMappingURL=use-cached-selected-values.DHpjo2tV.js.map