@kong/kongponents 9.64.5 → 9.64.6

package/dist/kongponents127.es.js

@@ -1,41 +1,40 @@
-import { defineComponent as dt, useCssVars as ct, useAttrs as vt, useSlots as ft, watch as B, useTemplateRef as Z, computed as m, ref as h, useId as qe, nextTick as X, onMounted as mt, onBeforeUnmount as pt, openBlock as f, createElementBlock as w, normalizeStyle as ie, normalizeClass as ne, createBlock as q, mergeProps as re, createSlots as de, withCtx as k, createTextVNode as Y, toDisplayString as z, renderSlot as L, createCommentVNode as P, createElementVNode as N, createVNode as $, unref as S, withKeys as H, Fragment as Le, renderList as Ne, withModifiers as O } from "vue";
-import ht from "./kongponents183.es.js";
-import _ from "./kongponents36.es.js";
-import Be from "./kongponents55.es.js";
-import gt from "./kongponents57.es.js";
-import bt from "./kongponents62.es.js";
-import yt from "./kongponents29.es.js";
-import wt from "./kongponents30.es.js";
+import { defineComponent as rt, useCssVars as dt, useAttrs as ct, useSlots as vt, watch as B, useTemplateRef as Q, computed as p, ref as g, useId as Ve, nextTick as Z, onMounted as ft, openBlock as f, createElementBlock as w, normalizeStyle as oe, normalizeClass as ue, createBlock as q, mergeProps as ie, createSlots as ne, withCtx as k, createTextVNode as X, toDisplayString as P, renderSlot as N, createCommentVNode as K, createElementVNode as L, createVNode as $, unref as C, withKeys as H, Fragment as qe, renderList as Ne, withModifiers as O } from "vue";
+import mt from "./kongponents201.es.js";
+import Y from "./kongponents36.es.js";
+import Le from "./kongponents55.es.js";
+import pt from "./kongponents57.es.js";
+import ht from "./kongponents62.es.js";
+import gt from "./kongponents29.es.js";
+import yt from "./kongponents30.es.js";
 /* empty css                 */
-import kt from "./kongponents230.es.js";
-import It from "./kongponents231.es.js";
-import St from "./kongponents200.es.js";
-import ce from "./kongponents186.es.js";
-import Ct from "./kongponents201.es.js";
-import { KUI_SPACE_40 as At, KUI_ICON_SIZE_40 as ve } from "./kongponents191.es.js";
-import { ResizeObserverHelper as $t } from "./kongponents202.es.js";
-import { sanitizeInput as Et } from "./kongponents180.es.js";
-import { useEventListener as xt } from "./kongponents203.es.js";
-import { getUniqueStringId as Ft } from "./kongponents160.es.js";
-import { normalizeSize as Te } from "./kongponents184.es.js";
-const zt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"], Kt = { key: 0 }, Mt = {
+import bt from "./kongponents202.es.js";
+import wt from "./kongponents203.es.js";
+import kt from "./kongponents204.es.js";
+import re from "./kongponents187.es.js";
+import It from "./kongponents205.es.js";
+import { KUI_SPACE_40 as St, KUI_ICON_SIZE_40 as de } from "./kongponents185.es.js";
+import { sanitizeInput as Ct } from "./kongponents180.es.js";
+import { useResizeObserver as At } from "./kongponents192.es.js";
+import { getUniqueStringId as $t } from "./kongponents160.es.js";
+import { normalizeSize as Te } from "./kongponents193.es.js";
+const Et = { "data-testid": "multiselect-container" }, xt = ["id", "tabindex"], Ft = { key: 0 }, Pt = {
   key: 1,
   class: "expanded-selection-empty"
-}, Vt = { class: "multiselect-selection-badge-label" }, qt = ["aria-label", "onClick"], Lt = { class: "multiselect-icons-container" }, Nt = {
+}, Kt = { class: "multiselect-selection-badge-label" }, zt = ["aria-label", "onClick"], Mt = { class: "multiselect-icons-container" }, Vt = {
   key: 0,
   class: "multiselect-input-wrapper"
-}, Bt = {
+}, qt = {
   key: 2,
   class: "multiselect-empty",
   "data-propagate-clicks": "false"
-}, Tt = {
+}, Nt = {
   key: 1,
   class: "help-text"
-}, Ut = {
+}, Lt = {
   key: 2,
   "aria-hidden": "true",
   class: "staging-area"
-}, Dt = { class: "multiselect-selection-badge-label" }, Rt = 36, Ht = "Filter...", dl = /* @__PURE__ */ dt({
+}, Tt = { class: "multiselect-selection-badge-label" }, Bt = 36, Dt = "Filter...", ul = /* @__PURE__ */ rt({
   inheritAttrs: !1,
   __name: "KMultiselect",
   props: {
@@ -52,7 +51,7 @@ const zt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
     selectedRowCount: { default: 1 },
     collapsedContext: { type: Boolean },
     items: { default: () => [] },
-    filterFunction: { type: Function, default: (o) => o.items.filter((ee) => ee.label?.toLowerCase().includes(o.query?.toLowerCase())) },
+    filterFunction: { type: Function, default: (s) => s.items.filter((_) => _.label?.toLowerCase().includes(s.query?.toLowerCase())) },
     autosuggest: { type: Boolean },
     enableItemCreation: { type: Boolean },
     loading: { type: Boolean },
@@ -62,17 +61,17 @@ const zt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
     itemCreationValidator: { type: Function, default: () => !0 }
   },
   emits: ["selected", "input", "change", "update:modelValue", "query-change", "item-added", "item-removed"],
-  setup(o, { emit: ee }) {
-    ct((e) => ({
-      fbe45d06: _e.value
+  setup(s, { emit: _ }) {
+    dt((e) => ({
+      b7f724e8: Ye.value
     }));
-    const Ue = (e) => {
+    const Be = (e) => {
       const t = [], l = (a) => {
         "value" in a ? t.push(a.value) : "items" in a && Array.isArray(a.items) && a.items.forEach((u) => t.push(u.value));
       };
       return e.forEach(l), t;
     }, De = (e) => {
-      const t = Ue(e), l = new Set(t);
+      const t = Be(e), l = new Set(t);
       return t.length === l.size;
     }, Re = (e) => {
       for (const t of e)
@@ -87,55 +86,55 @@ const zt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
               return !1;
         }
       return !0;
-    }, b = vt(), te = ft(), { cloneDeep: G, stripRequiredLabel: He } = ht();
-    B(() => o.items, (e) => {
+    }, y = ct(), ee = vt(), { cloneDeep: G, stripRequiredLabel: Ue } = mt();
+    B(() => s.items, (e) => {
       !e.length || Re(e) && De(e) || console.warn("KMultiselect: Items must have a label & value and value must be unique");
     }, { immediate: !0 });
-    const I = ee, fe = Z("kMultiselectItems"), me = m(() => b.required !== void 0 && String(b.required) !== "false"), Oe = m(() => He(o.label, me.value)), Ge = () => !!(o.labelAttributes?.help || o.labelAttributes?.info || te["label-tooltip"]), pe = (e) => K.value || F.value || e?.disabled ? "neutral" : o.error ? "danger" : "info", he = {
+    const I = _, ce = Q("kMultiselectItems"), ve = p(() => y.required !== void 0 && String(y.required) !== "false"), He = p(() => Ue(s.label, ve.value)), Oe = () => !!(s.labelAttributes?.help || s.labelAttributes?.info || ee["label-tooltip"]), fe = (e) => z.value || F.value || e?.disabled ? "neutral" : s.error ? "danger" : "info", me = {
       hideCaret: !0,
       placement: "bottom-start",
       popoverTimeout: 0,
       popoverClasses: "k-multiselect-popover multiselect-popover"
-    }, J = h(0), T = h(0), Je = qe(), ge = m(() => b.id ? String(b.id) : Je), be = qe(), W = Z("multiselectElement"), We = Z("multiselectDropdownInputElement"), ye = Z("multiselectSelectionsStagingElement"), le = m(() => o.selectedRowCount * Rt), p = h(""), we = m(() => !(!p.value || n.value.filter((e) => e.label === p.value).length)), x = h(null), n = h([]), C = h([]), j = h([]), r = h([]), v = h([]), g = h([]), A = /* @__PURE__ */ new Set(), ae = h([]), U = h([]), je = m(() => U.value.map((e) => e.label).join(", ")), ke = h(!1), D = h(!1), oe = h(!1), K = m(() => b?.disabled !== void 0 && String(b?.disabled) !== "false"), F = m(() => b?.readonly !== void 0 && String(b?.readonly) !== "false"), Qe = m({
+    }, J = g(0), T = g(0), Ge = Ve(), pe = p(() => y.id ? String(y.id) : Ge), he = Ve(), ge = Q("multiselectElement"), Je = Q("multiselectDropdownInputElement"), ye = Q("multiselectSelectionsStagingElement"), W = p(() => s.selectedRowCount * Bt), h = g(""), be = p(() => !(!h.value || r.value.filter((e) => e.label === h.value).length)), x = g(null), r = g([]), A = g([]), j = g([]), n = g([]), v = g([]), m = g([]), S = /* @__PURE__ */ new Set(), te = g([]), D = g([]), We = p(() => D.value.map((e) => e.label).join(", ")), we = g(!1), R = g(!1), le = g(!1), z = p(() => y?.disabled !== void 0 && String(y?.disabled) !== "false"), F = p(() => y?.readonly !== void 0 && String(y?.readonly) !== "false"), je = p({
       get() {
-        return o.modelValue;
+        return s.modelValue;
       },
       set(e) {
-        const t = n.value.filter((l) => e.includes(l.value));
-        t.length ? Ee(t) : e.length || ue();
+        const t = r.value.filter((l) => e.includes(l.value));
+        t.length ? $e(t) : e.length || se();
       }
-    }), Ze = m(() => {
-      const e = { ...b };
+    }), Qe = p(() => {
+      const e = { ...y };
       return delete e.class, e;
-    }), Ie = () => !!(o.dropdownFooterText || te["dropdown-footer-text"] || te["dropdown-footer"]), Xe = m(() => o.dropdownFooterPosition ?? o.dropdownFooterTextPosition ?? "sticky"), Ye = () => ({
-      ...he,
-      ...o.kpopAttributes,
-      popoverClasses: `${he.popoverClasses} ${o.kpopAttributes?.popoverClasses ?? ""} ${Ie() ? "has-dropdown-footer" : ""}`,
-      width: R.value + "px",
-      maxWidth: R.value + "px",
-      disabled: b.disabled !== void 0 && String(b.disabled) !== "false" || b.readonly !== void 0 && String(b.readonly) !== "false"
-    }), _e = m(() => Te(o.dropdownMaxHeight)), et = m(() => {
-      const e = o.width ? o.width : "300";
+    }), ke = () => !!(s.dropdownFooterText || ee["dropdown-footer-text"] || ee["dropdown-footer"]), Ze = p(() => s.dropdownFooterPosition ?? s.dropdownFooterTextPosition ?? "sticky"), Xe = () => ({
+      ...me,
+      ...s.kpopAttributes,
+      popoverClasses: `${me.popoverClasses} ${s.kpopAttributes?.popoverClasses ?? ""} ${ke() ? "has-dropdown-footer" : ""}`,
+      width: U.value + "px",
+      maxWidth: U.value + "px",
+      disabled: y.disabled !== void 0 && String(y.disabled) !== "false" || y.readonly !== void 0 && String(y.readonly) !== "false"
+    }), Ye = p(() => Te(s.dropdownMaxHeight)), _e = p(() => {
+      const e = s.width ? s.width : "300";
       return Te(e);
-    }), tt = m(() => ({
-      width: et.value
-    })), Se = m(() => ({
-      width: R.value + "px"
-    })), Ce = m(() => {
-      if (r.value.length === 0) {
-        if (!o.collapsedContext && o.placeholder)
-          return o.placeholder;
-        if (o.collapsedContext && o.searchPlaceholder)
-          return o.searchPlaceholder;
+    }), et = p(() => ({
+      width: _e.value
+    })), Ie = p(() => ({
+      width: U.value + "px"
+    })), Se = p(() => {
+      if (n.value.length === 0) {
+        if (!s.collapsedContext && s.placeholder)
+          return s.placeholder;
+        if (s.collapsedContext && s.searchPlaceholder)
+          return s.searchPlaceholder;
       }
-      return r.value.length === 1 ? `${r.value.length} item selected` : `${r.value.length} items selected`;
-    }), lt = m(() => o.autosuggest ? n.value : o.filterFunction({ items: n.value, query: p.value })), Ae = m(() => {
-      if (o.autosuggest || !p.value)
-        return C.value;
-      const e = lt.value, t = new Set(e.map((a) => a.value)), l = [];
-      for (const a of C.value)
+      return n.value.length === 1 ? `${n.value.length} item selected` : `${n.value.length} items selected`;
+    }), tt = p(() => s.autosuggest ? r.value : s.filterFunction({ items: r.value, query: h.value })), Ce = p(() => {
+      if (s.autosuggest || !h.value)
+        return A.value;
+      const e = tt.value, t = new Set(e.map((a) => a.value)), l = [];
+      for (const a of A.value)
         if (E(a)) {
-          const u = a.items.filter((s) => t.has(s.value));
+          const u = a.items.filter((o) => t.has(o.value));
           u.length > 0 && l.push({
             label: a.label,
             key: a.key,
@@ -144,143 +143,149 @@ const zt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
         } else
           t.has(a.value) && l.push(a);
       return l;
-    }), at = (e) => {
-      (K.value || e?.target?.dataset.propagateClicks === "false") && e.stopPropagation();
-    }, $e = async (e, t, l) => {
-      e ? t.value || (p.value = "", l(), ze(), await X(), We.value?.$el?.querySelector("input")?.focus({ preventScroll: !0 })) : t.value && (p.value = "", l());
+    }), lt = (e) => {
+      (z.value || e?.target?.dataset.propagateClicks === "false") && e.stopPropagation();
+    }, Ae = async (e, t, l) => {
+      e ? t.value || (h.value = "", l(), Fe(), await Z(), Je.value?.$el?.querySelector("input")?.focus({ preventScroll: !0 })) : t.value && (h.value = "", l());
     }, M = () => {
       setTimeout(() => {
         const e = ye.value;
-        if (o.collapsedContext) {
+        if (s.collapsedContext) {
           T.value++;
           return;
         }
         if (e) {
-          if (e.clientHeight > le.value) {
-            const l = Array.from(e.querySelectorAll(".multiselect-selection-badge")).filter((s) => s.offsetTop >= le.value), a = v.value.length - l.length, u = v.value.splice(a, l.length);
-            for (const s of u)
-              A.has(s.value) || (A.add(s.value), g.value.push(s));
+          const t = e.clientHeight;
+          if (t <= W.value && m.value.length > 0) {
+            const l = m.value.shift();
+            l && (v.value.push(l), S.delete(l.value)), T.value++;
+            return;
+          }
+          if (t > W.value) {
+            const l = Array.from(e.querySelectorAll(".multiselect-selection-badge")).filter((o) => o.offsetTop >= W.value), a = v.value.length - l.length, u = v.value.splice(a, l.length);
+            for (const o of u)
+              S.has(o.value) || (S.add(o.value), m.value.push(o));
           }
           T.value++;
         }
       }, 0);
-    }, ot = (e) => {
-      const t = new Map(r.value.map((l) => [l.value, l]));
-      r.value = e.map((l) => t.get(l)).filter((l) => l !== void 0), v.value = [...r.value], g.value = [], A.clear(), M();
-    }, Ee = (e) => {
+    }, at = (e) => {
+      const t = new Map(n.value.map((l) => [l.value, l]));
+      n.value = e.map((l) => t.get(l)).filter((l) => l !== void 0), v.value = [...n.value], m.value = [], S.clear(), M();
+    }, $e = (e) => {
       e.forEach((t) => {
-        const l = n.value.filter((a) => a.value === t.value)?.[0] || null;
-        l && (l.selected = !0, r.value.filter((a) => a.value === l.value).length || (r.value.push(l), v.value.push(l)));
+        const l = r.value.filter((a) => a.value === t.value)?.[0] || null;
+        l && (l.selected = !0, n.value.filter((a) => a.value === l.value).length || (n.value.push(l), v.value.push(l)));
       }), M();
     }, st = (e, t = !1) => {
       const l = new Set(e.map((a) => a.value));
-      r.value = r.value.filter((a) => !l.has(a.value)), v.value = v.value.filter((a) => !l.has(a.value)), g.value = g.value.filter((a) => !l.has(a.value)), e.forEach((a) => {
-        if (A.delete(a.value), a.selected = !1, g.value.length) {
-          const u = g.value.pop();
-          u && (v.value.push(u), A.delete(u.value));
+      n.value = n.value.filter((a) => !l.has(a.value)), v.value = v.value.filter((a) => !l.has(a.value)), m.value = m.value.filter((a) => !l.has(a.value)), e.forEach((a) => {
+        if (S.delete(a.value), a.selected = !1, m.value.length) {
+          const u = m.value.pop();
+          u && (v.value.push(u), S.delete(u.value));
         }
-        o.enableItemCreation && a.custom && (n.value = n.value.filter((u) => u.value !== a.value), C.value = C.value.filter((u) => E(u) ? !0 : u.value !== a.value), I("item-removed", a));
+        s.enableItemCreation && a.custom && (r.value = r.value.filter((u) => u.value !== a.value), A.value = A.value.filter((u) => E(u) ? !0 : u.value !== a.value), I("item-removed", a));
       }), t && M();
-    }, se = (e, t) => {
-      let l = !1, a = t ? e : n.value.filter((s) => s.value === e.value)?.[0] || null;
-      if (o.enableItemCreation && a?.custom && (l = !0), a === null && (a = r.value.filter((s) => s.value === e.value)?.[0] || null), a === null)
+    }, ae = (e, t) => {
+      let l = !1, a = t ? e : r.value.filter((o) => o.value === e.value)?.[0] || null;
+      if (s.enableItemCreation && a?.custom && (l = !0), a === null && (a = n.value.filter((o) => o.value === e.value)?.[0] || null), a === null)
         return;
       if (a.selected) {
-        if (r.value = r.value.filter((s) => s.value !== e.value), v.value.filter((s) => s.value === e.value).length ? v.value = v.value.filter((s) => s.value !== e.value) : A.delete(e.value) && (g.value = g.value.filter((s) => s.value !== e.value)), a.selected = !1, g.value.length) {
-          const s = g.value.pop();
-          s && (v.value.push(s), A.delete(s.value));
+        if (n.value = n.value.filter((o) => o.value !== e.value), v.value.filter((o) => o.value === e.value).length ? v.value = v.value.filter((o) => o.value !== e.value) : S.delete(e.value) && (m.value = m.value.filter((o) => o.value !== e.value)), a.selected = !1, m.value.length) {
+          const o = m.value.pop();
+          o && (v.value.push(o), S.delete(o.value));
         }
-        l && (n.value = n.value.filter((s) => s.value !== e.value), C.value = C.value.filter((s) => E(s) ? !0 : s.value !== e.value), I("item-removed", e));
+        l && (r.value = r.value.filter((o) => o.value !== e.value), A.value = A.value.filter((o) => E(o) ? !0 : o.value !== e.value), I("item-removed", e));
       } else
-        a.selected = !0, r.value.push(a), v.value.push(a), t && (a.custom = !0, n.value.push(a), C.value.unshift(a));
+        a.selected = !0, n.value.push(a), v.value.push(a), t && (a.custom = !0, r.value.push(a), A.value.unshift(a));
       M();
-      const u = r.value.map((s) => s.value);
-      I("selected", r.value), I("change", a), I("update:modelValue", u);
-    }, xe = (e) => {
-      o.enableItemCreation && Fe(), e.preventDefault();
-    }, Fe = () => {
-      if (!o.enableItemCreation || !p.value || !we.value || !o.itemCreationValidator(p.value))
+      const u = n.value.map((o) => o.value);
+      I("selected", n.value), I("change", a), I("update:modelValue", u);
+    }, Ee = (e) => {
+      s.enableItemCreation && xe(), e.preventDefault();
+    }, xe = () => {
+      if (!s.enableItemCreation || !h.value || !be.value || !s.itemCreationValidator(h.value))
         return;
-      const e = n.value.length + 1, t = {
-        label: p.value.trim(),
-        value: Ft(),
-        key: `${Et(p.value.trim()).replace(/ /gi, "-")?.replace(/[^a-z0-9-_]/gi, "")}-${e}`
+      const e = r.value.length + 1, t = {
+        label: h.value.trim(),
+        value: $t(),
+        key: `${Ct(h.value.trim()).replace(/ /gi, "-")?.replace(/[^a-z0-9-_]/gi, "")}-${e}`
       };
-      I("item-added", t), se(t, !0), p.value = "";
-    }, E = (e) => "items" in e && Array.isArray(e.items), ze = () => {
+      I("item-added", t), ae(t, !0), h.value = "";
+    }, E = (e) => "items" in e && Array.isArray(e.items), Fe = () => {
       const e = [], t = [], l = [];
-      for (const s of Ae.value)
-        E(s) ? l.push(s) : t.push(s);
-      const a = t.filter((s) => s.selected), u = t.filter((s) => !s.selected);
+      for (const o of Ce.value)
+        E(o) ? l.push(o) : t.push(o);
+      const a = t.filter((o) => o.selected), u = t.filter((o) => !o.selected);
       e.push(...a, ...u);
-      for (const s of l) {
-        const i = s.items.filter((d) => d.selected), y = s.items.filter((d) => !d.selected);
+      for (const o of l) {
+        const i = o.items.filter((d) => d.selected), b = o.items.filter((d) => !d.selected);
         e.push({
-          label: s.label,
-          key: s.key,
-          items: [...i, ...y]
+          label: o.label,
+          key: o.key,
+          items: [...i, ...b]
         });
       }
       j.value = e;
-    }, ue = () => {
-      n.value.forEach((t) => {
+    }, se = () => {
+      r.value.forEach((t) => {
         t.disabled || (t.selected = !1, t.custom && I("item-removed", t));
-      }), n.value = n.value.filter((t) => !(t.custom && !t.disabled)), C.value = C.value.filter((t) => E(t) ? !0 : !(t.custom && !t.disabled)), r.value = r.value.filter((t) => t.disabled), v.value = v.value.filter((t) => t.disabled), g.value = g.value.filter((t) => (t.disabled || A.delete(t.value), t.disabled)), p.value = "", M();
-      const e = r.value.map((t) => t.value);
-      I("selected", r.value), I("update:modelValue", e), I("query-change", "");
+      }), r.value = r.value.filter((t) => !(t.custom && !t.disabled)), A.value = A.value.filter((t) => E(t) ? !0 : !(t.custom && !t.disabled)), n.value = n.value.filter((t) => t.disabled), v.value = v.value.filter((t) => t.disabled), m.value = m.value.filter((t) => (t.disabled || S.delete(t.value), t.disabled)), h.value = "", M();
+      const e = n.value.map((t) => t.value);
+      I("selected", n.value), I("update:modelValue", e), I("query-change", "");
     }, Pe = (e) => {
-      p.value = e.trim(), I("query-change", e.trim());
-    }, ut = (e, t) => {
-      e.keyCode === 27 && (t.value = !1), (e.key === "ArrowDown" || e.key === "ArrowUp") && fe.value?.setFocus(e.key === "ArrowDown" ? "down" : "up");
+      h.value = e.trim(), I("query-change", e.trim());
+    }, ot = (e, t) => {
+      e.keyCode === 27 && (t.value = !1), (e.key === "ArrowDown" || e.key === "ArrowUp") && ce.value?.setFocus(e.key === "ArrowDown" ? "down" : "up");
     }, Ke = () => {
       x.value?.showPopover();
-    }, it = (e) => {
-      (e.key === "ArrowDown" || e.key === "ArrowUp") && fe.value?.setFocus(e.key === "ArrowDown" ? "down" : "up");
-    }, nt = async () => {
-      oe.value = !0, Me();
-    }, Me = () => {
-      ke.value || (ke.value = !0, I("query-change", ""));
+    }, ut = (e) => {
+      (e.key === "ArrowDown" || e.key === "ArrowUp") && ce.value?.setFocus(e.key === "ArrowDown" ? "down" : "up");
+    }, it = async () => {
+      le.value = !0, ze();
+    }, ze = () => {
+      we.value || (we.value = !0, I("query-change", ""));
     };
     B(T, () => {
       setTimeout(() => {
         const e = ye.value;
-        if (o.collapsedContext) {
-          ae.value = G(v.value), U.value = [], J.value++;
+        if (s.collapsedContext) {
+          te.value = G(v.value), D.value = [], J.value++;
           return;
         }
         if (e)
-          if (e.clientHeight > le.value) {
+          if (e.clientHeight > W.value) {
             const l = v.value.pop();
-            l && !A.has(l.value) && (g.value.push(l), A.add(l.value)), T.value++;
+            l && !S.has(l.value) && (m.value.push(l), S.add(l.value)), T.value++;
           } else
-            ae.value = G(v.value), U.value = G(g.value), J.value++;
+            te.value = G(v.value), D.value = G(m.value), J.value++;
       }, 0);
     }), B(J, async () => {
-      x.value && typeof x.value.updatePopper == "function" && (await X(), x.value.updatePopper());
-    }), B(Ae, () => {
-      ze();
-    }), B(Qe, (e, t) => {
+      x.value && typeof x.value.updatePopper == "function" && (await Z(), x.value.updatePopper());
+    }), B(Ce, () => {
+      Fe();
+    }), B(je, (e, t) => {
       if (JSON.stringify(e) !== JSON.stringify(t)) {
-        const l = r.value.map((d) => d.value);
+        const l = n.value.map((d) => d.value);
         if (JSON.stringify(l) === JSON.stringify(e))
           return;
         if (!e.length) {
-          ue();
+          se();
           return;
         }
-        const a = new Set(t), u = new Set(e), s = new Set(l), i = n.value.filter(
-          (d) => u.has(d.value) && !s.has(d.value)
-        ), y = r.value.filter((d) => !u.has(d.value) && a.has(d.value));
-        y.length && st(y), i.length && Ee(i), ot(e);
+        const a = new Set(t), u = new Set(e), o = new Set(l), i = r.value.filter(
+          (d) => u.has(d.value) && !o.has(d.value)
+        ), b = n.value.filter((d) => !u.has(d.value) && a.has(d.value));
+        b.length && st(b), i.length && $e(i), at(e);
       }
     }, {
       // When items and modelValue change together, let the items watcher add new options
       // before ordering the selected badges.
       flush: "post"
-    }), B(() => o.items, (e, t) => {
+    }), B(() => s.items, (e, t) => {
       if (JSON.stringify(e) === JSON.stringify(t))
         return;
-      const l = G(o.items), a = l.some((i) => E(i)), u = [], s = [];
+      const l = G(s.items), a = l.some((i) => E(i)), u = [], o = [];
       if (a)
         for (const i of l)
           E(i) ? u.push(...i.items) : u.push(i);
@@ -288,282 +293,282 @@ const zt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
         const i = /* @__PURE__ */ new Map();
         for (const c of l)
           E(c) || (c.group && (i.has(c.group) || i.set(c.group, []), i.get(c.group).push(c)), u.push(c));
-        const y = Array.from(i.keys()).sort(
+        const b = Array.from(i.keys()).sort(
           (c, V) => c.toLowerCase().localeCompare(V.toLowerCase())
         ), d = u.filter((c) => !c.group);
-        s.push(...d);
-        for (const c of y)
-          s.push({
+        o.push(...d);
+        for (const c of b)
+          o.push({
             label: c,
             items: i.get(c)
           });
       }
-      n.value = u;
-      for (let i = 0; i < n.value.length; i++) {
-        n.value[i].selected === void 0 && (n.value[i].selected = !1);
-        let y = `${n.value[i].label?.replace(/ /gi, "-")?.replace(/[^a-z0-9-_]/gi, "")}-${i}`;
-        if (y.includes("undefined") && (y = `multiselect-item-label-${i}`), n.value[i].key = y, o.modelValue.includes(n.value[i].value) || n.value[i].selected) {
-          const d = n.value[i];
-          d.selected = !0, r.value.filter((c) => c.value === d.value).length || r.value.push(d), v.value.filter((c) => c.value === d.value).length || v.value.push(d);
+      r.value = u;
+      for (let i = 0; i < r.value.length; i++) {
+        r.value[i].selected === void 0 && (r.value[i].selected = !1);
+        let b = `${r.value[i].label?.replace(/ /gi, "-")?.replace(/[^a-z0-9-_]/gi, "")}-${i}`;
+        if (b.includes("undefined") && (b = `multiselect-item-label-${i}`), r.value[i].key = b, s.modelValue.includes(r.value[i].value) || r.value[i].selected) {
+          const d = r.value[i];
+          d.selected = !0, n.value.filter((c) => c.value === d.value).length || n.value.push(d), v.value.filter((c) => c.value === d.value).length || v.value.push(d);
         }
       }
       if (a) {
-        const i = [], y = [];
+        const i = [], b = [];
         for (const d of l)
           if (E(d)) {
-            const c = d.items.map((V) => n.value.find((rt) => rt.value === V.value)).filter((V) => V !== void 0);
-            y.push({
+            const c = d.items.map((V) => r.value.find((nt) => nt.value === V.value)).filter((V) => V !== void 0);
+            b.push({
               label: d.label,
               key: d.key,
               items: c
             });
           } else {
-            const c = n.value.find((V) => V.value === d.value);
+            const c = r.value.find((V) => V.value === d.value);
             c && i.push(c);
           }
-        s.push(...i, ...y);
+        o.push(...i, ...b);
       }
-      C.value = s, M(), x.value && typeof x.value.updatePopper == "function" && X(() => {
+      A.value = o, M(), x.value && typeof x.value.updatePopper == "function" && Z(() => {
         x.value.updatePopper();
       });
     }, { deep: !0, immediate: !0 });
-    const R = h(300), Ve = async () => {
-      R.value = 300, await X(), R.value = W.value?.clientWidth || 300, M();
-    }, Q = h();
-    return mt(() => {
-      xt("resize", Ve), Q.value = $t.create(Ve), Q.value.observe(W.value);
-    }), pt(() => {
-      Q.value && W.value && Q.value.unobserve(W.value);
+    const U = g(300), Me = async () => {
+      U.value = 300, await Z(), U.value = ge.value?.clientWidth || 300, v.value = [...n.value], m.value = [], S.clear(), M();
+    };
+    return ft(() => {
+      Me();
+    }), At(ge, () => {
+      Me();
     }), (e, t) => (f(), w("div", {
-      class: ne(["k-multiselect", [e.$attrs.class, { "multiselect-error": o.error }]]),
-      style: ie(tt.value)
+      class: ue(["k-multiselect", [e.$attrs.class, { "multiselect-error": s.error }]]),
+      style: oe(et.value)
     }, [
-      o.label ? (f(), q(gt, re({ key: 0 }, o.labelAttributes, {
-        "data-testid": o.labelAttributes["data-testid"] ? o.labelAttributes["data-testid"] : "multiselect-label",
-        for: ge.value,
-        required: me.value
-      }), de({
+      s.label ? (f(), q(pt, ie({ key: 0 }, s.labelAttributes, {
+        "data-testid": s.labelAttributes["data-testid"] ? s.labelAttributes["data-testid"] : "multiselect-label",
+        for: pe.value,
+        required: ve.value
+      }), ne({
         default: k(() => [
-          Y(z(Oe.value) + " ", 1)
+          X(P(He.value) + " ", 1)
         ]),
         _: 2
       }, [
-        Ge() ? {
+        Oe() ? {
           name: "tooltip",
           fn: k(() => [
-            L(e.$slots, "label-tooltip", {}, void 0, !0)
+            N(e.$slots, "label-tooltip", {}, void 0, !0)
           ]),
           key: "0"
         } : void 0
-      ]), 1040, ["data-testid", "for", "required"])) : P("", !0),
-      N("div", zt, [
-        $(yt, null, {
+      ]), 1040, ["data-testid", "for", "required"])) : K("", !0),
+      L("div", Et, [
+        $(gt, null, {
           default: k(({ isToggled: l, toggle: a }) => [
-            $(bt, re({
+            $(ht, ie({
               ref_key: "popper",
               ref: x,
               "hide-close-icon": "",
-              offset: `var(--kui-space-40, ${S(At)})`
-            }, Ye(), {
-              onClose: () => $e(!1, l, a),
-              onOpen: () => $e(!0, l, a)
+              offset: `var(--kui-space-40, ${C(St)})`
+            }, Xe(), {
+              onClose: () => Ae(!1, l, a),
+              onOpen: () => Ae(!0, l, a)
             }), {
               content: k(() => [
-                N("div", {
+                L("div", {
                   class: "multiselect-list",
                   onClick: t[7] || (t[7] = O(() => {
                   }, ["stop"])),
-                  onMouseenter: t[8] || (t[8] = () => D.value = !0),
-                  onMouseleave: t[9] || (t[9] = () => D.value = !1)
+                  onMouseenter: t[8] || (t[8] = () => R.value = !0),
+                  onMouseleave: t[9] || (t[9] = () => R.value = !1)
                 }, [
-                  !o.collapsedContext && !F.value ? (f(), w("div", Nt, [
-                    $(Be, {
+                  !s.collapsedContext && !F.value ? (f(), w("div", Vt, [
+                    $(Le, {
                       ref: "multiselectDropdownInputElement",
                       autocapitalize: "off",
                       autocomplete: "off",
                       autocorrect: "off",
                       class: "multiselect-dropdown-input",
                       "data-testid": "multiselect-dropdown-input",
-                      "model-value": p.value,
+                      "model-value": h.value,
                       name: "multiselect-options-search",
-                      placeholder: o.searchPlaceholder || Ht,
+                      placeholder: s.searchPlaceholder || Dt,
                       spellcheck: "false",
                       type: "text",
                       onClick: t[5] || (t[5] = O(() => {
                       }, ["stop"])),
-                      onFocus: Me,
-                      onKeydown: H(xe, ["enter"]),
+                      onFocus: ze,
+                      onKeydown: H(Ee, ["enter"]),
                       onKeyup: [
-                        it,
+                        ut,
                         t[6] || (t[6] = H(O(() => {
                         }, ["stop"]), ["enter"]))
                       ],
                       "onUpdate:modelValue": Pe
                     }, null, 8, ["model-value", "placeholder"])
-                  ])) : P("", !0),
-                  $(kt, {
+                  ])) : K("", !0),
+                  $(bt, {
                     ref: "kMultiselectItems",
-                    "filter-string": p.value,
-                    "item-creation-enabled": o.enableItemCreation && we.value,
-                    "item-creation-valid": o.itemCreationValidator(p.value),
+                    "filter-string": h.value,
+                    "item-creation-enabled": s.enableItemCreation && be.value,
+                    "item-creation-valid": s.itemCreationValidator(h.value),
                     items: j.value,
-                    onAddItem: Fe,
-                    onSelected: se
+                    onAddItem: xe,
+                    onSelected: ae
                   }, {
                     content: k(({ item: u }) => [
-                      L(e.$slots, "item-template", {
+                      N(e.$slots, "item-template", {
                         class: "multiselect-item",
                         item: u
                       }, void 0, !0)
                     ]),
                     _: 3
                   }, 8, ["filter-string", "item-creation-enabled", "item-creation-valid", "items"]),
-                  !j.value.length && !e.$slots.empty && !o.enableItemCreation ? (f(), q(It, {
+                  !j.value.length && !e.$slots.empty && !s.enableItemCreation ? (f(), q(wt, {
                     key: "multiselect-empty-item",
                     class: "multiselect-empty-item",
                     "data-testid": "multiselect-empty-item",
                     item: { label: "No results", value: "no_results", disabled: !0 }
-                  })) : P("", !0),
-                  e.$slots.empty && !o.loading && !j.value.length ? (f(), w("div", Bt, [
-                    L(e.$slots, "empty", {}, void 0, !0)
-                  ])) : P("", !0)
+                  })) : K("", !0),
+                  e.$slots.empty && !s.loading && !j.value.length ? (f(), w("div", qt, [
+                    N(e.$slots, "empty", {}, void 0, !0)
+                  ])) : K("", !0)
                 ], 32),
-                Ie() ? (f(), w("div", {
+                ke() ? (f(), w("div", {
                   key: 0,
-                  class: ne(["dropdown-footer", `dropdown-footer-${Xe.value}`]),
+                  class: ue(["dropdown-footer", `dropdown-footer-${Ze.value}`]),
                   "data-testid": "dropdown-footer"
                 }, [
-                  e.$slots["dropdown-footer"] ? L(e.$slots, "dropdown-footer", {}, void 0, !0, 0) : L(e.$slots, "dropdown-footer-text", {}, () => [
-                    Y(z(o.dropdownFooterText), 1)
+                  e.$slots["dropdown-footer"] ? N(e.$slots, "dropdown-footer", {}, void 0, !0, 0) : N(e.$slots, "dropdown-footer-text", {}, () => [
+                    X(P(s.dropdownFooterText), 1)
                   ], !0, 1)
-                ], 2)) : P("", !0)
+                ], 2)) : K("", !0)
               ]),
               default: k(() => [
-                N("div", re({
-                  id: ge.value,
+                L("div", ie({
+                  id: pe.value,
                   ref: "multiselectElement",
-                  class: ["multiselect-trigger", { focused: oe.value, hovered: D.value, disabled: K.value, readonly: F.value }],
+                  class: ["multiselect-trigger", { focused: le.value, hovered: R.value, disabled: z.value, readonly: F.value }],
                   "data-testid": "multiselect-trigger",
                   role: "listbox",
-                  tabindex: K.value || F.value || o.collapsedContext ? -1 : 0
-                }, Ze.value, {
-                  onClick: at,
+                  tabindex: z.value || F.value || s.collapsedContext ? -1 : 0
+                }, Qe.value, {
+                  onClick: lt,
                   onKeydown: [
                     H(Ke, ["enter"]),
                     H(Ke, ["space"])
                   ]
                 }), [
-                  o.collapsedContext ? (f(), w("div", Kt, [
-                    $(Be, {
+                  s.collapsedContext ? (f(), w("div", Ft, [
+                    $(Le, {
                       autocapitalize: "off",
                       autocomplete: "off",
                       autocorrect: "off",
-                      class: ne(["multiselect-input", { "is-readonly": F.value }]),
+                      class: ue(["multiselect-input", { "is-readonly": F.value }]),
                       "data-testid": "multiselect-input",
-                      disabled: K.value,
-                      "model-value": p.value,
+                      disabled: z.value,
+                      "model-value": h.value,
                       name: "multiselect-options-search",
-                      placeholder: Ce.value,
+                      placeholder: Se.value,
                       readonly: F.value ? !0 : void 0,
                       spellcheck: "false",
                       type: "text",
-                      onBlur: t[0] || (t[0] = () => oe.value = !1),
+                      onBlur: t[0] || (t[0] = () => le.value = !1),
                       onClick: (u) => {
                         l.value && u.stopPropagation();
                       },
-                      onFocus: nt,
-                      onKeydown: H(xe, ["enter"]),
-                      onKeyup: (u) => ut(u, l),
-                      onMouseenter: t[1] || (t[1] = () => D.value = !0),
-                      onMouseleave: t[2] || (t[2] = () => D.value = !1),
+                      onFocus: it,
+                      onKeydown: H(Ee, ["enter"]),
+                      onKeyup: (u) => ot(u, l),
+                      onMouseenter: t[1] || (t[1] = () => R.value = !0),
+                      onMouseleave: t[2] || (t[2] = () => R.value = !1),
                       "onUpdate:modelValue": Pe
                     }, null, 8, ["class", "disabled", "model-value", "placeholder", "readonly", "onClick", "onKeyup"])
-                  ])) : r.value.length ? (f(), w("div", {
+                  ])) : n.value.length ? (f(), w("div", {
                     key: 2,
                     class: "selection-badges-container",
                     "data-testid": "selection-badges-container",
-                    style: ie(Se.value)
+                    style: oe(Ie.value)
                   }, [
-                    (f(!0), w(Le, null, Ne(ae.value, (u, s) => (f(), q(_, {
-                      key: `${S(be)}-${u.key ? u.key : s}-badge-${J.value}`,
-                      appearance: pe(u),
+                    (f(!0), w(qe, null, Ne(te.value, (u, o) => (f(), q(Y, {
+                      key: `${C(he)}-${u.key ? u.key : o}-badge-${J.value}`,
+                      appearance: fe(u),
                       class: "multiselect-selection-badge",
                       "icon-before": !1,
                       tooltip: u.label,
                       "truncation-tooltip": "",
                       onClick: t[3] || (t[3] = O(() => {
                       }, ["stop"]))
-                    }, de({
+                    }, ne({
                       default: k(() => [
-                        L(e.$slots, "item-badge-icon", { item: u }, void 0, !0),
-                        N("span", Vt, z(u.label), 1)
+                        N(e.$slots, "item-badge-icon", { item: u }, void 0, !0),
+                        L("span", Kt, P(u.label), 1)
                       ]),
                       _: 2
                     }, [
-                      u.selected && !u.disabled && !K.value && !F.value ? {
+                      u.selected && !u.disabled && !z.value && !F.value ? {
                         name: "icon",
                         fn: k(() => [
-                          N("button", {
+                          L("button", {
                             "aria-label": `Unselect ${u.label}`,
                             class: "badge-dismiss-button",
                             "data-testid": "badge-dismiss-button",
                             type: "button",
-                            onClick: (i) => se(u)
+                            onClick: (i) => ae(u)
                           }, [
-                            $(S(ce), { decorative: "" })
-                          ], 8, qt)
+                            $(C(re), { decorative: "" })
+                          ], 8, zt)
                         ]),
                         key: "0"
                       } : void 0
                     ]), 1032, ["appearance", "tooltip"]))), 128)),
-                    U.value.length ? (f(), q(wt, {
+                    D.value.length ? (f(), q(yt, {
                       key: 0,
                       class: "hidden-selection-count-tooltip",
                       "max-width": "300",
-                      text: je.value
+                      text: We.value
                     }, {
                       default: k(() => [
-                        $(_, {
-                          appearance: pe(),
+                        $(Y, {
+                          appearance: fe(),
                           class: "hidden-selection-count",
                           "data-testid": "hidden-selection-count",
                           onClick: t[4] || (t[4] = O(() => {
                           }, ["stop"]))
                         }, {
                           default: k(() => [
-                            Y(" +" + z(U.value.length), 1)
+                            X(" +" + P(D.value.length), 1)
                           ]),
                           _: 1
                         }, 8, ["appearance"])
                       ]),
                       _: 1
-                    }, 8, ["text"])) : P("", !0)
-                  ], 4)) : (f(), w("div", Mt, z(Ce.value), 1)),
-                  N("div", Lt, [
-                    !o.loading && r.value.length && l.value ? (f(), w("button", {
+                    }, 8, ["text"])) : K("", !0)
+                  ], 4)) : (f(), w("div", Pt, P(Se.value), 1)),
+                  L("div", Mt, [
+                    !s.loading && n.value.length && l.value ? (f(), w("button", {
                       key: 0,
                       "aria-label": "Clear",
                       class: "multiselect-clear-icon",
                       "data-testid": "multiselect-clear-icon",
                       type: "button",
-                      onClick: ue
+                      onClick: se
                     }, [
-                      $(S(ce), {
-                        size: `var(--kui-icon-size-40, ${S(ve)})`
+                      $(C(re), {
+                        size: `var(--kui-icon-size-40, ${C(de)})`
                       }, null, 8, ["size"])
-                    ])) : o.loading ? (f(), q(S(Ct), {
+                    ])) : s.loading ? (f(), q(C(It), {
                       key: 1,
                       class: "multiselect-loading-icon",
-                      size: `var(--kui-icon-size-40, ${S(ve)})`,
+                      size: `var(--kui-icon-size-40, ${C(de)})`,
                       title: "Loading"
-                    }, null, 8, ["size"])) : (f(), q(S(St), {
+                    }, null, 8, ["size"])) : (f(), q(C(kt), {
                       key: 2,
                       class: "multiselect-chevron-icon",
                       decorative: "",
-                      size: `var(--kui-icon-size-40, ${S(ve)})`
+                      size: `var(--kui-icon-size-40, ${C(de)})`
                     }, null, 8, ["size"]))
                   ])
-                ], 16, Pt)
+                ], 16, xt)
               ]),
               _: 2
             }, 1040, ["offset", "onClose", "onOpen"])
@@ -571,41 +576,41 @@ const zt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
           _: 3
         })
       ]),
-      o.help ? (f(), w("p", Tt, z(o.help), 1)) : P("", !0),
-      o.collapsedContext ? P("", !0) : (f(), w("div", Ut, [
+      s.help ? (f(), w("p", Nt, P(s.help), 1)) : K("", !0),
+      s.collapsedContext ? K("", !0) : (f(), w("div", Lt, [
         (f(), w("div", {
           key: T.value,
           ref: "multiselectSelectionsStagingElement",
           class: "selection-badges-container staging",
-          style: ie(Se.value),
+          style: oe(Ie.value),
           tabindex: "-1"
         }, [
-          (f(!0), w(Le, null, Ne(v.value, (l, a) => (f(), q(_, {
-            key: `${S(be)}-${l.key ? l.key : a}-badge`,
+          (f(!0), w(qe, null, Ne(v.value, (l, a) => (f(), q(Y, {
+            key: `${C(he)}-${l.key ? l.key : a}-badge`,
             "aria-hidden": "true",
             class: "multiselect-selection-badge",
             "icon-before": !1
-          }, de({
+          }, ne({
             default: k(() => [
-              L(e.$slots, "item-badge-icon", { item: l }, void 0, !0),
-              N("span", Dt, z(l.label), 1)
+              N(e.$slots, "item-badge-icon", { item: l }, void 0, !0),
+              L("span", Tt, P(l.label), 1)
             ]),
             _: 2
           }, [
-            l.selected && !l.disabled && !K.value && !F.value ? {
+            l.selected && !l.disabled && !z.value && !F.value ? {
               name: "icon",
               fn: k(() => [
-                $(S(ce), { "aria-hidden": "true" })
+                $(C(re), { "aria-hidden": "true" })
               ]),
               key: "0"
             } : void 0
           ]), 1024))), 128)),
-          $(_, {
+          $(Y, {
             "aria-hidden": "true",
             class: "hidden-selection-count"
           }, {
             default: k(() => [
-              Y(" +" + z(g.value.length), 1)
+              X(" +" + P(m.value.length), 1)
             ]),
             _: 1
           })
@@ -615,5 +620,5 @@ const zt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"],
   }
 });
 export {
-  dl as default
+  ul as default
 };