energy-components 2.5.1 → 2.7.0

package/dist/components/dropdown.es.js

@@ -1,30 +1,33 @@
-import { defineComponent as ge, useSlots as we, toRefs as he, useModel as ke, ref as L, computed as u, provide as U, onMounted as xe, nextTick as V, onBeforeUnmount as $e, openBlock as c, createElementBlock as b, normalizeClass as T, unref as a, createVNode as S, mergeProps as X, withModifiers as r, createSlots as Y, withCtx as d, createElementVNode as m, createBlock as Z, createCommentVNode as A, renderSlot as v, Fragment as Se, toDisplayString as R, mergeModels as ee } from "vue";
-import De from "./multiselect.es.js";
-import Ce from "./checkbox.es.js";
-import { _ as Oe } from "./radio-group.vue_vue_type_script_setup_true_lang-CwgSZYeD.js";
-import Be from "./radioButton.es.js";
-import { R as te } from "./icon-svg-CW3eQRcp.js";
-import oe from "./textField.es.js";
-import { _ as Le } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/dropdown.css';const Ve = ["id", "aria-expanded", "aria-controls"], Ae = ["aria-expanded", "aria-controls"], Ee = { class: "rds-e-dropdown__option" }, Te = { class: "rds-e-dropdown__option-container" }, Re = ["onClick"], _e = { class: "rds-e-dropdown__option--content" }, Fe = {
+import { defineComponent as Qe, useSlots as Xe, toRefs as Ye, useModel as Ze, ref as v, computed as s, provide as ae, watch as H, nextTick as L, onMounted as et, onBeforeUnmount as tt, openBlock as c, createElementBlock as m, normalizeClass as W, unref as i, createVNode as B, mergeProps as we, withModifiers as u, createSlots as he, withCtx as y, createElementVNode as f, createBlock as ke, createCommentVNode as x, renderSlot as h, Fragment as Le, toDisplayString as G, renderList as lt, mergeModels as xe } from "vue";
+import ot from "./multiselect.es.js";
+import nt from "./checkbox.es.js";
+import { _ as at } from "./radio-group.vue_vue_type_script_setup_true_lang-CwgSZYeD.js";
+import rt from "./radioButton.es.js";
+import { R as Se } from "./icon-svg-CW3eQRcp.js";
+import $e from "./textField.es.js";
+import { _ as st } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/dropdown.css';const it = ["id", "aria-expanded", "aria-controls"], ut = ["aria-expanded", "aria-controls"], dt = { class: "rds-e-dropdown__option" }, ct = { class: "rds-e-dropdown__option-container" }, pt = ["onClick"], ft = { class: "rds-e-dropdown__option--content" }, vt = {
   key: 0,
   class: "rds-e-dropdown__option-detail"
-}, je = { key: 1 }, Ne = {
+}, mt = { key: 1 }, yt = {
   key: 0,
   class: "rds-e-dropdown__option--append"
-}, Me = { class: "rds-e-dropdown__before-list-container" }, Ie = {
+}, bt = { class: "rds-e-dropdown__before-list-container" }, gt = {
   key: 1,
   class: "rds-e-dropdown__before-list"
-}, qe = { class: "rds-e-dropdown__before-list-container" }, Ke = { class: "rds-e-dropdown__after-list" }, Ue = { class: "rds-e-dropdown__after-list-container" }, Pe = "beforeList", He = "afterList", We = "singleLabel", ze = "noOptions", Ge = "noResult", Je = "limit", Qe = "maxElements", Xe = /* @__PURE__ */ ge({
+}, wt = { class: "rds-e-dropdown__before-list-container" }, ht = {
+  key: 0,
+  class: "rds-e-dropdown__after-list"
+}, kt = { class: "rds-e-dropdown__after-list-container" }, Lt = "beforeList", xt = "afterList", St = "singleLabel", $t = "noOptions", Ot = "noResult", _t = "limit", Et = "maxElements", Dt = /* @__PURE__ */ Qe({
   __name: "dropdown",
-  props: /* @__PURE__ */ ee({
+  props: /* @__PURE__ */ xe({
     /**
      * Id del dropdown
      */
     id: {
       type: [String, Number],
       required: !0,
-      validator: (l) => !l || String(l).trim() === "" ? (console.error("[RDSDropdown]: `id` prop is required."), !1) : !0
+      validator: (o) => !o || String(o).trim() === "" ? (console.error("[RDSDropdown]: `id` prop is required."), !1) : !0
     },
     /**
      * Versión compacta del dropdown con altura reducida (42px en lugar de 52px).
@@ -41,7 +44,7 @@ import './style/dropdown.css';const Ve = ["id", "aria-expanded", "aria-controls"
     label: {
       type: String,
       required: !0,
-      validator: (l) => !l || l.trim() === "" ? (console.error("[RDSDropdown]: `label` prop is required."), !1) : !0
+      validator: (o) => !o || o.trim() === "" ? (console.error("[RDSDropdown]: `label` prop is required."), !1) : !0
     },
     /**
      * Valores a mostrar en el dropdown
@@ -86,7 +89,7 @@ import './style/dropdown.css';const Ve = ["id", "aria-expanded", "aria-controls"
     showRadio: {
       type: Boolean,
       default: !1,
-      validator: (l, _) => l && _.multiple ? (console.error("showRadio solo es valido para seleccion unica"), !1) : !0
+      validator: (o, J) => o && J.multiple ? (console.error("showRadio solo es valido para seleccion unica"), !1) : !0
     },
     /**
      * Indica si el campo de entrada contiene un error o no.
@@ -128,7 +131,7 @@ import './style/dropdown.css';const Ve = ["id", "aria-expanded", "aria-controls"
      */
     limitText: {
       type: Function,
-      default: (l) => `Más de ${l} elementos seleccionados.`
+      default: (o) => `Más de ${o} elementos seleccionados.`
     },
     /**
      * Indica si el dropdown debe renderizarse fuera del flujo del documento
@@ -147,8 +150,8 @@ import './style/dropdown.css';const Ve = ["id", "aria-expanded", "aria-controls"
     openDirection: {
       type: String,
       default: "auto",
-      validator(l) {
-        return ["auto", "above", "below"].includes(l);
+      validator(o) {
+        return ["auto", "above", "below"].includes(o);
       }
     },
     /**
@@ -194,6 +197,14 @@ import './style/dropdown.css';const Ve = ["id", "aria-expanded", "aria-controls"
     loading: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * Habilita lazy load por scroll al final de la lista.
+     * Puede ser boolean (modo evento) o callback async (modo automático).
+     */
+    lazyLoad: {
+      type: [Boolean, Function],
+      default: !1
     }
   }, {
     modelValue: {
@@ -201,19 +212,51 @@ import './style/dropdown.css';const Ve = ["id", "aria-expanded", "aria-controls"
     },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ ee(["open", "close", "select", "change"], ["update:modelValue"]),
-  setup(l, { expose: _, emit: le }) {
-    const n = l, D = le, P = we(), p = (e) => !!(P && P[e]), {
-      disabled: w,
-      limit: F,
+  emits: /* @__PURE__ */ xe(["open", "close", "select", "change", "loadMore"], ["update:modelValue"]),
+  setup(o, { expose: J, emit: Oe }) {
+    const n = o, O = Oe, re = Xe(), b = (e) => !!(re && re[e]), {
+      disabled: S,
+      limit: Q,
       multiple: C,
-      options: k,
-      textOnly: j
-    } = he(n), s = ke(l, "modelValue"), f = L([]), i = L(), g = L(), N = L(""), M = L(!1);
-    let O = !1;
-    const ne = () => {
-      M.value = !0;
-    }, h = u(() => i.value?.isOpen ?? !1), B = u(() => n.autocomplete && Object.keys(n.autocomplete).length > 0), se = u(() => ({
+      options: T,
+      textOnly: X
+    } = Ye(n), a = Ze(o, "modelValue"), w = v([]), p = v(), k = v(), Y = v(""), Z = v(!1), se = v(null), I = v(null), F = v([]), _ = v(!0), N = v(!1), q = v(1), _e = [1, 2, 3], ee = v(null);
+    let R = !1, V = !1;
+    const Ee = () => {
+      Z.value = !0;
+    }, g = s(() => p.value?.isOpen ?? !1), te = s(() => n.lazyLoad), E = s(() => !!te.value), D = s(() => typeof te.value == "function"), De = s(() => b("afterList") || E.value), ze = s(() => E.value && g.value && _.value), ie = s(() => D.value ? N.value : n.loading), Ae = s(() => E.value && ie.value), M = s(() => n.autocomplete && Object.keys(n.autocomplete).length > 0), Be = (e) => {
+      const t = /* @__PURE__ */ new WeakSet(), l = (r) => {
+        if (Array.isArray(r))
+          return r.map(l);
+        if (r && typeof r == "object") {
+          const d = r;
+          if (t.has(d))
+            return "[Circular]";
+          t.add(d);
+          const $ = Object.keys(d).sort().reduce((be, ge) => (be[ge] = l(d[ge]), be), {});
+          return t.delete(d), $;
+        }
+        return r;
+      };
+      return JSON.stringify(l(e));
+    }, ue = (e) => {
+      if (typeof e == "string")
+        return `string-${e}`;
+      if (e && typeof e == "object" && "id" in e)
+        return `object-${String(e.id)}`;
+      try {
+        return `object-${Be(e)}`;
+      } catch {
+        return `fallback-${String(e)}`;
+      }
+    }, de = (e, t) => {
+      const l = [...e], r = new Set(l.map(ue));
+      for (const d of t) {
+        const $ = ue(d);
+        r.has($) || (r.add($), l.push(d));
+      }
+      return l;
+    }, z = s(() => !D.value || F.value.length === 0 ? T.value : de(T.value, F.value)), Ce = s(() => ({
       id: n.autocomplete.id || `autocomplete-${n.id}`,
       label: n.autocomplete.label || n.label,
       icon: n.autocomplete.icon || "",
@@ -225,385 +268,484 @@ import './style/dropdown.css';const Ve = ["id", "aria-expanded", "aria-controls"
       helperText: n.autocomplete.helperText ?? "",
       readonly: n.autocomplete.readonly ?? !1
     }));
-    U("registerDropdownFocusElement", (e) => {
-      e && !f.value.includes(e) && f.value.push(e);
-    }), U("unregisterDropdownFocusElement", (e) => {
-      const t = f.value.findIndex((o) => o === e);
-      t > -1 && f.value.splice(t, 1);
-    }), U("isFocusWithinDropdown", (e) => {
-      const t = f.value.some((y) => y === e || y.contains(e)), o = e.classList && (e.classList.contains("rds-e-dropdown__before-list") || e.closest(".rds-e-dropdown__before-list") || e.classList.contains("multiselect") || e.closest(".multiselect"));
-      return t || o;
+    ae("registerDropdownFocusElement", (e) => {
+      e && !w.value.includes(e) && w.value.push(e);
+    }), ae("unregisterDropdownFocusElement", (e) => {
+      const t = w.value.findIndex((l) => l === e);
+      t > -1 && w.value.splice(t, 1);
+    }), ae("isFocusWithinDropdown", (e) => {
+      const t = w.value.some((r) => r === e || r.contains(e)), l = e.classList && (e.classList.contains("rds-e-dropdown__before-list") || e.closest(".rds-e-dropdown__before-list") || e.classList.contains("multiselect") || e.closest(".multiselect"));
+      return t || l;
     });
-    const H = u({
-      get: () => s.value && typeof s.value == "object" && !Array.isArray(s.value) ? s.value.id : typeof s.value == "string" || typeof s.value == "number" ? s.value : null,
+    const ce = s({
+      get: () => a.value && typeof a.value == "object" && !Array.isArray(a.value) ? a.value.id : typeof a.value == "string" || typeof a.value == "number" ? a.value : null,
       set: (e) => {
-        const t = k.value.find((o) => typeof o == "object" ? o.id === e : o === e);
-        s.value = t || null;
+        const t = z.value.find((l) => typeof l == "object" ? l.id === e : l === e);
+        a.value = t || null;
       }
-    }), ae = u(() => (k.value ?? []).every((e) => typeof e == "object" && e?.id && e?.label)), W = u(() => !C.value || n.closeOnSelect), I = u({
-      get: () => s.value ? n.multiple ? Array.isArray(s.value) ? s.value.length > F.value ? n.limitText(F.value) : s.value.map((e) => typeof e == "string" ? e : e.label).join(", ") : "" : typeof s.value == "object" ? s.value.label : typeof s.value == "string" ? s.value : "" : "",
+    }), Ie = s(() => (z.value ?? []).every((e) => typeof e == "object" && e?.id && e?.label)), pe = s(() => !C.value || n.closeOnSelect), le = s({
+      get: () => a.value ? n.multiple ? Array.isArray(a.value) ? a.value.length > Q.value ? n.limitText(Q.value) : a.value.map((e) => typeof e == "string" ? e : e.label).join(", ") : "" : typeof a.value == "object" ? a.value.label : typeof a.value == "string" ? a.value : "" : "",
       set: () => null
-    }), re = u(() => ({
+    }), Re = s(() => ({
       "rds-e-dropdown-input": !0,
-      "rds-e-dropdown--disabled": w.value,
+      "rds-e-dropdown--disabled": S.value,
       "rds-e-dropdown--small": n.small
-    })), ie = u(() => n.openDirection !== "auto" ? n.openDirection : "auto"), q = u(() => {
+    })), Ve = s(() => n.openDirection !== "auto" ? n.openDirection : "auto"), oe = s(() => {
       const e = {};
-      return ae.value && Object.assign(e, {
+      return Ie.value && Object.assign(e, {
         "track-by": "id",
         label: "label"
       }), e;
-    }), de = u(() => B.value && n.autocomplete.autocompleteFilter ? k.value.filter((e) => n.autocomplete.autocompleteFilter(e, N.value)) : k.value), E = (e) => {
-      if (s.value === e) return !0;
-      if (Array.isArray(s.value)) {
-        if (typeof e == "string") return s.value.includes(e);
-        if (q.value.label)
-          return s.value.some((t) => t.id === e.id);
+    }), Me = s(() => M.value && n.autocomplete.autocompleteFilter ? z.value.filter((e) => n.autocomplete.autocompleteFilter(e, Y.value)) : z.value), K = (e) => {
+      if (a.value === e) return !0;
+      if (Array.isArray(a.value)) {
+        if (typeof e == "string") return a.value.includes(e);
+        if (oe.value.label)
+          return a.value.some((t) => t.id === e.id);
       }
       return !1;
-    }, ue = (e) => {
-      D("open", e, n.id);
-    }, ce = (e) => {
-      D("close", e, n.id);
-    }, pe = (e) => {
-      V(() => {
-        D("select", e);
+    }, je = (e) => {
+      O("open", e, n.id);
+    }, Te = (e) => {
+      O("close", e, n.id);
+    }, Fe = (e) => {
+      L(() => {
+        O("select", e);
       });
-    }, fe = () => {
-      V(() => {
+    }, Ne = () => {
+      L(() => {
         if (C.value) {
-          const e = k.value.filter(
-            (t) => E(t)
+          const e = z.value.filter(
+            (t) => K(t)
           ) || [];
-          D("change", e);
+          O("change", e);
         } else {
-          const e = k.value.find(
-            (t) => E(t)
+          const e = z.value.find(
+            (t) => K(t)
           );
-          D("change", [e]);
+          O("change", [e]);
         }
       });
-    }, me = (e) => {
-      w.value || typeof e == "object" && e?.$isDisabled || (i.value.select(e), O = !0);
-    }, K = () => {
-      i.value.activate();
-    }, x = () => {
-      i.value.deactivate();
-    }, ve = () => {
-      i.value.toggle(), O = !0;
-    }, ye = () => {
-      h.value ? x() : K();
-    }, z = () => {
-      O = !0;
-    }, G = (e) => {
-      if (!w.value && e.key !== "Tab") {
-        if (!h.value && (e.key === "Enter" || e.key === " ")) {
-          e.preventDefault(), i.value?.toggle();
+    }, qe = (e) => {
+      S.value || typeof e == "object" && e?.$isDisabled || (p.value.select(e), V = !0);
+    }, ne = () => {
+      p.value.activate();
+    }, A = () => {
+      p.value.deactivate();
+    }, Ke = () => {
+      p.value.toggle(), V = !0;
+    }, Ue = () => {
+      g.value ? A() : ne();
+    }, fe = () => {
+      V = !0;
+    }, ve = (e) => {
+      if (!S.value && e.key !== "Tab") {
+        if (!g.value && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault(), p.value?.toggle();
           return;
         }
-        if (!h.value && e.key === "ArrowDown") {
-          e.preventDefault(), i.value?.toggle(), V(() => {
+        if (!g.value && e.key === "ArrowDown") {
+          e.preventDefault(), p.value?.toggle(), L(() => {
             try {
-              i.value?.pointerForward?.();
+              p.value?.pointerForward?.();
             } catch {
             }
           });
           return;
         }
-        if (h.value && e.key === "Escape") {
-          e.preventDefault(), x();
+        if (g.value && e.key === "Escape") {
+          e.preventDefault(), A();
           return;
         }
-        if (h.value && (e.key === "Enter" || e.key === " ")) {
+        if (g.value && (e.key === "Enter" || e.key === " ")) {
           e.preventDefault();
           try {
-            i.value?.addPointerElement?.({ key: e.key });
+            p.value?.addPointerElement?.({ key: e.key });
           } catch {
           }
-          W.value && x();
+          pe.value && A();
         }
       }
-    }, be = () => {
-      B.value && g.value && (ne(), K(), V(() => {
-        g.value.focus();
+    }, Pe = () => {
+      M.value && k.value && (Ee(), ne(), L(() => {
+        k.value.focus();
       }));
-    }, J = (e) => {
-      if (O) {
-        O = !1;
+    }, me = (e) => {
+      if (V) {
+        V = !1;
         return;
       }
-      const t = e.target, o = t.closest(".multiselect__content-wrapper--teleported"), y = !i.value?.$el?.contains(t) && !o;
-      if (M.value) {
-        const $ = g.value && !g.value.$el.contains(t) && !t.closest(".rds-e-dropdown__before-list");
-        y && $ && (M.value = !1, x());
-      } else y && x();
+      const t = e.target, l = t.closest(".multiselect__content-wrapper--teleported"), r = !p.value?.$el?.contains(t) && !l;
+      if (Z.value) {
+        const d = k.value && !k.value.$el.contains(t) && !t.closest(".rds-e-dropdown__before-list");
+        r && d && (Z.value = !1, A());
+      } else r && A();
+    }, He = () => {
+      const e = `listbox-${n.id}`, t = `listbox-teleported-${n.id}`;
+      return document.getElementById(e) || document.getElementById(t);
+    }, j = (e) => {
+      const t = He();
+      t && (e ? t.setAttribute("aria-busy", "true") : t.removeAttribute("aria-busy"));
+    }, U = () => {
+      I.value && (I.value.disconnect(), I.value = null);
+    }, P = () => {
+      R = !1, ee.value = null;
+    }, We = () => {
+      R || n.loading || (R = !0, ee.value = T.value.length, O("loadMore", { page: q.value }), q.value += 1);
+    }, Ge = async () => {
+      if (D.value && !(N.value || !_.value)) {
+        U(), N.value = !0, j(!0);
+        try {
+          const e = te.value, t = await e(q.value), l = Array.isArray(t) ? t : [];
+          if (l.length === 0) {
+            _.value = !1;
+            return;
+          }
+          F.value = de(F.value, l), q.value += 1;
+        } catch (e) {
+          console.warn("[RDSDropdown]: lazy load callback failed.", e);
+        } finally {
+          N.value = !1, j(!1), E.value && g.value && _.value && L(() => {
+            ye();
+          });
+        }
+      }
+    }, Je = (e) => {
+      if (e[0]?.isIntersecting) {
+        if (D.value) {
+          Ge();
+          return;
+        }
+        We();
+      }
     };
-    return xe(() => {
-      i.value?.$el && f.value.push(i.value.$el), V(() => {
-        if (B.value && g.value?.$el) {
-          f.value.push(g.value.$el);
-          const e = g.value.$el.closest(".rds-e-dropdown__before-list");
-          e && !f.value.includes(e) && f.value.push(e);
+    function ye() {
+      if (U(), !E.value || !g.value || !_.value || typeof IntersectionObserver > "u") return;
+      const e = se.value;
+      if (!e) return;
+      const t = e.closest(".multiselect__content-wrapper");
+      I.value = new IntersectionObserver(Je, {
+        root: t instanceof HTMLElement ? t : null,
+        rootMargin: "0px 0px 96px 0px",
+        threshold: 0.01
+      }), I.value.observe(e);
+    }
+    return H(
+      () => [g.value, E.value, _.value],
+      async ([e, t]) => {
+        if (!e || !t) {
+          U(), P(), j(!1);
+          return;
         }
-      }), document.addEventListener("pointerdown", J);
-    }), $e(() => {
-      f.value = [], document.removeEventListener("pointerdown", J);
-    }), _({
+        await L(), ye();
+      }
+    ), H(
+      () => ie.value,
+      async (e) => {
+        await L(), j(e);
+      }
+    ), H(
+      () => n.loading,
+      (e, t) => {
+        D.value || !R || t && !e && P();
+      }
+    ), H(
+      () => T.value.length,
+      (e) => {
+        if (D.value || !R) return;
+        const t = ee.value;
+        t !== null && e !== t && P();
+      }
+    ), et(() => {
+      p.value?.$el && w.value.push(p.value.$el), L(() => {
+        if (M.value && k.value?.$el) {
+          w.value.push(k.value.$el);
+          const e = k.value.$el.closest(".rds-e-dropdown__before-list");
+          e && !w.value.includes(e) && w.value.push(e);
+        }
+      }), document.addEventListener("pointerdown", me);
+    }), tt(() => {
+      w.value = [], U(), P(), j(!1), document.removeEventListener("pointerdown", me);
+    }), J({
       /**
        * Abre el dropdown
        */
-      activate: K,
+      activate: ne,
       /**
        * Cierra el dropdown
        */
-      deactivate: x
-    }), (e, t) => (c(), b("div", {
-      class: T(["rds-e-dropdown", {
-        "rds-e-dropdown--text-only": a(j),
-        "rds-e-dropdown--inverse": l.inverse
+      deactivate: A
+    }), (e, t) => (c(), m("div", {
+      class: W(["rds-e-dropdown", {
+        "rds-e-dropdown--text-only": i(X),
+        "rds-e-dropdown--inverse": o.inverse
       }])
     }, [
-      S(De, X({
+      B(ot, we({
         ref_key: "multiselect",
-        ref: i,
-        modelValue: s.value,
-        "onUpdate:modelValue": t[12] || (t[12] = (o) => s.value = o),
-        class: re.value,
-        options: de.value,
-        "close-on-select": W.value,
+        ref: p,
+        modelValue: a.value,
+        "onUpdate:modelValue": t[12] || (t[12] = (l) => a.value = l),
+        class: Re.value,
+        options: Me.value,
+        "close-on-select": pe.value,
         "show-labels": !1,
-        disabled: a(w),
-        multiple: a(C),
-        "max-height": l.maxHeight,
+        disabled: i(S),
+        multiple: i(C),
+        "max-height": o.maxHeight,
         searchable: !1,
         "open-on-focus": !1,
-        small: l.small,
-        "open-direction": ie.value,
-        limit: a(F),
-        "limit-text": l.limitText
-      }, { ...q.value, ...e.$attrs }, {
-        "append-to-body": l.appendToBody,
-        "text-only": a(j),
-        onOpen: ue,
-        onClose: ce,
-        onSelect: pe,
-        "onUpdate:modelValue": fe,
-        onBlur: r(() => null, ["prevent"])
-      }), Y({
-        selection: d(({ isOpen: o }) => [
-          a(j) ? (c(), b("div", {
+        small: o.small,
+        "open-direction": Ve.value,
+        limit: i(Q),
+        "limit-text": o.limitText
+      }, { ...oe.value, ...e.$attrs }, {
+        "append-to-body": o.appendToBody,
+        "text-only": i(X),
+        onOpen: je,
+        onClose: Te,
+        onSelect: Fe,
+        "onUpdate:modelValue": Ne,
+        onBlur: u(() => null, ["prevent"])
+      }), he({
+        selection: y(({ isOpen: l }) => [
+          i(X) ? (c(), m("div", {
             key: 0,
-            id: `multiselect-dropdown-${l.id}`,
-            class: T([l.customTriggerClass, "rds-e-dropdown__text-only"]),
+            id: `multiselect-dropdown-${o.id}`,
+            class: W([o.customTriggerClass, "rds-e-dropdown__text-only"]),
             role: "combobox",
             "aria-haspopup": "listbox",
-            "aria-expanded": h.value ? "true" : "false",
-            "aria-controls": `listbox-${l.id}`,
+            "aria-expanded": g.value ? "true" : "false",
+            "aria-controls": `listbox-${o.id}`,
             tabindex: "0",
-            onClick: r(ye, ["prevent", "stop"]),
-            onMousedown: r(z, ["prevent", "stop"]),
-            onKeydown: G
+            onClick: u(Ue, ["prevent", "stop"]),
+            onMousedown: u(fe, ["prevent", "stop"]),
+            onKeydown: ve
           }, [
-            m("span", null, R(I.value || l.label), 1),
-            S(a(te), {
+            f("span", null, G(le.value || o.label), 1),
+            B(i(Se), {
               name: "arrow_down",
               "aria-hidden": "true",
-              class: T(["rds-e-dropdown__input-caret", {
-                "rds-e-dropdown__input-caret--open": o
+              class: W(["rds-e-dropdown__input-caret", {
+                "rds-e-dropdown__input-caret--open": l
               }])
             }, null, 8, ["class"])
-          ], 42, Ve)) : (c(), b("div", {
+          ], 42, it)) : (c(), m("div", {
             key: 1,
             class: "rds-e-dropdown__input-wrapper",
             role: "button",
             "aria-haspopup": "listbox",
-            "aria-expanded": h.value ? "true" : "false",
-            "aria-controls": `listbox-${l.id}`,
-            onClick: r(ve, ["prevent"]),
-            onMousedown: r(z, ["prevent"]),
-            onKeydown: G
+            "aria-expanded": g.value ? "true" : "false",
+            "aria-controls": `listbox-${o.id}`,
+            onClick: u(Ke, ["prevent"]),
+            onMousedown: u(fe, ["prevent"]),
+            onKeydown: ve
           }, [
-            S(a(oe), {
-              id: `multiselect-dropdown-${l.id}`,
-              modelValue: I.value,
-              "onUpdate:modelValue": t[0] || (t[0] = (y) => I.value = y),
+            B(i($e), {
+              id: `multiselect-dropdown-${o.id}`,
+              modelValue: le.value,
+              "onUpdate:modelValue": t[0] || (t[0] = (r) => le.value = r),
               class: "rds-e-dropdown__input",
-              label: l.label,
-              disabled: a(w),
-              error: l.error,
-              helper: l.helper,
-              "helper-text": l.helperText,
-              loading: l.loading,
-              compact: l.compact,
+              label: o.label,
+              "input-tabindex": -1,
+              disabled: i(S),
+              error: o.error,
+              helper: o.helper,
+              "helper-text": o.helperText,
+              loading: o.loading,
+              compact: o.compact,
               readonly: ""
-            }, Y({
-              "right-icon": d(() => [
-                S(a(te), {
+            }, he({
+              "right-icon": y(() => [
+                B(i(Se), {
                   name: "arrow_down",
                   "aria-hidden": "true",
-                  class: T(["rds-e-dropdown__input-caret", {
-                    "rds-e-dropdown__input-caret--open": o
+                  class: W(["rds-e-dropdown__input-caret", {
+                    "rds-e-dropdown__input-caret--open": l
                   }])
                 }, null, 8, ["class"])
               ]),
               _: 2
             }, [
-              p("helper-text") ? {
+              b("helper-text") ? {
                 name: "helper-text",
-                fn: d(() => [
-                  v(e.$slots, "helper-text", {}, void 0, !0)
+                fn: y(() => [
+                  h(e.$slots, "helper-text", {}, void 0, !0)
                 ]),
                 key: "0"
               } : void 0
             ]), 1032, ["id", "modelValue", "label", "disabled", "error", "helper", "helper-text", "loading", "compact"])
-          ], 40, Ae))
+          ], 40, ut))
         ]),
-        option: d(({ option: o, search: y, index: $ }) => [
-          m("div", Ee, [
-            m("div", Te, [
-              m("div", {
+        option: y(({ option: l, search: r, index: d }) => [
+          f("div", dt, [
+            f("div", ct, [
+              f("div", {
                 class: "rds-e-dropdown__option--prepend",
-                onClick: r((Q) => me(o), ["prevent", "stop"])
+                onClick: u(($) => qe(l), ["prevent", "stop"])
               }, [
-                a(C) ? (c(), Z(a(Ce), {
+                i(C) ? (c(), ke(i(nt), {
                   key: 0,
-                  id: `${$}-${o.id}`,
-                  small: l.small,
-                  "model-value": E(o),
-                  disabled: a(w) || o?.$isDisabled || !1
-                }, null, 8, ["id", "small", "model-value", "disabled"])) : !a(C) && l.showRadio ? (c(), Z(a(Oe), {
+                  id: `${d}-${l.id}`,
+                  small: o.small,
+                  "model-value": K(l),
+                  disabled: i(S) || l?.$isDisabled || !1
+                }, null, 8, ["id", "small", "model-value", "disabled"])) : !i(C) && o.showRadio ? (c(), ke(i(at), {
                   key: 1,
-                  modelValue: H.value,
-                  "onUpdate:modelValue": t[1] || (t[1] = (Q) => H.value = Q),
-                  "group-name": `group-${l.id}`
+                  modelValue: ce.value,
+                  "onUpdate:modelValue": t[1] || (t[1] = ($) => ce.value = $),
+                  "group-name": `group-${o.id}`
                 }, {
-                  default: d(() => [
-                    S(a(Be), {
-                      id: `${$}-${typeof o == "object" ? o.id : $}`,
-                      small: l.small,
-                      option: typeof o == "object" ? o.id : o,
-                      checked: E(o),
-                      disabled: a(w) || o?.$isDisabled || !1
+                  default: y(() => [
+                    B(i(rt), {
+                      id: `${d}-${typeof l == "object" ? l.id : d}`,
+                      small: o.small,
+                      option: typeof l == "object" ? l.id : l,
+                      checked: K(l),
+                      disabled: i(S) || l?.$isDisabled || !1
                     }, null, 8, ["id", "small", "option", "checked", "disabled"])
                   ]),
                   _: 2
-                }, 1032, ["modelValue", "group-name"])) : A("", !0)
-              ], 8, Re),
-              m("div", _e, [
-                v(e.$slots, "singleLabel", { option: o }, () => [
-                  q.value?.label ? (c(), b(Se, { key: 0 }, [
-                    m("span", null, R(o.label), 1),
-                    o?.detail ? (c(), b("span", Fe, R(o.detail), 1)) : A("", !0)
-                  ], 64)) : (c(), b("span", je, R(o), 1))
+                }, 1032, ["modelValue", "group-name"])) : x("", !0)
+              ], 8, pt),
+              f("div", ft, [
+                h(e.$slots, "singleLabel", { option: l }, () => [
+                  oe.value?.label ? (c(), m(Le, { key: 0 }, [
+                    f("span", null, G(l.label), 1),
+                    l?.detail ? (c(), m("span", vt, G(l.detail), 1)) : x("", !0)
+                  ], 64)) : (c(), m("span", mt, G(l), 1))
                 ], !0)
               ])
             ]),
-            p("optionAppend") ? (c(), b("div", Ne, [
-              v(e.$slots, "optionAppend", {
-                option: o,
-                search: y,
-                index: $
+            b("optionAppend") ? (c(), m("div", yt, [
+              h(e.$slots, "optionAppend", {
+                option: l,
+                search: r,
+                index: d
               }, void 0, !0)
-            ])) : A("", !0)
+            ])) : x("", !0)
           ])
         ]),
         _: 2
       }, [
-        B.value || p("beforeList") ? {
-          name: Pe,
-          fn: d(() => [
-            B.value ? (c(), b("div", {
+        M.value || b("beforeList") ? {
+          name: Lt,
+          fn: y(() => [
+            M.value ? (c(), m("div", {
               key: 0,
               class: "rds-e-dropdown__before-list",
-              onMousedown: t[5] || (t[5] = r(() => {
+              onMousedown: t[5] || (t[5] = u(() => {
               }, ["stop"])),
-              onClick: r(be, ["stop"]),
-              onBlur: t[6] || (t[6] = r(() => {
+              onClick: u(Pe, ["stop"]),
+              onBlur: t[6] || (t[6] = u(() => {
               }, ["stop"])),
-              onFocus: t[7] || (t[7] = r(() => {
+              onFocus: t[7] || (t[7] = u(() => {
               }, ["stop"])),
-              onKeydown: t[8] || (t[8] = r(() => {
+              onKeydown: t[8] || (t[8] = u(() => {
               }, ["stop"])),
-              onKeyup: t[9] || (t[9] = r(() => {
+              onKeyup: t[9] || (t[9] = u(() => {
               }, ["stop"])),
-              onKeypress: t[10] || (t[10] = r(() => {
+              onKeypress: t[10] || (t[10] = u(() => {
               }, ["stop"])),
-              onChange: t[11] || (t[11] = r(() => {
+              onChange: t[11] || (t[11] = u(() => {
               }, ["stop"]))
             }, [
-              m("div", Me, [
-                S(a(oe), X({
+              f("div", bt, [
+                B(i($e), we({
                   ref_key: "textFieldInput",
-                  ref: g,
-                  modelValue: N.value,
-                  "onUpdate:modelValue": t[2] || (t[2] = (o) => N.value = o)
-                }, se.value, {
+                  ref: k,
+                  modelValue: Y.value,
+                  "onUpdate:modelValue": t[2] || (t[2] = (l) => Y.value = l)
+                }, Ce.value, {
                   "full-width": "",
-                  onMousedown: t[3] || (t[3] = r(() => {
+                  onMousedown: t[3] || (t[3] = u(() => {
                   }, ["stop", "prevent"])),
-                  onFocus: t[4] || (t[4] = r(() => {
+                  onFocus: t[4] || (t[4] = u(() => {
                   }, ["stop"]))
                 }), null, 16, ["modelValue"])
               ])
-            ], 32)) : A("", !0),
-            p("beforeList") ? (c(), b("div", Ie, [
-              m("div", qe, [
-                v(e.$slots, "beforeList", {}, void 0, !0)
+            ], 32)) : x("", !0),
+            b("beforeList") ? (c(), m("div", gt, [
+              f("div", wt, [
+                h(e.$slots, "beforeList", {}, void 0, !0)
               ])
-            ])) : A("", !0)
+            ])) : x("", !0)
           ]),
           key: "0"
         } : void 0,
-        p("afterList") ? {
-          name: He,
-          fn: d(() => [
-            m("div", Ke, [
-              m("div", Ue, [
-                v(e.$slots, "afterList", {}, void 0, !0)
+        De.value ? {
+          name: xt,
+          fn: y(() => [
+            b("afterList") ? (c(), m("div", ht, [
+              f("div", kt, [
+                h(e.$slots, "afterList", {}, void 0, !0)
               ])
-            ])
+            ])) : x("", !0),
+            ze.value ? (c(), m("li", {
+              key: 1,
+              ref_key: "lazyLoadSentinelRef",
+              ref: se,
+              class: "rds-e-dropdown__lazy-sentinel",
+              "aria-hidden": "true",
+              role: "presentation"
+            }, null, 512)) : x("", !0),
+            Ae.value ? (c(), m(Le, { key: 2 }, lt(_e, (l) => f("li", {
+              key: `skeleton-${l}`,
+              class: "rds-e-dropdown__skeleton-element",
+              "aria-hidden": "true",
+              role: "presentation"
+            }, [...t[13] || (t[13] = [
+              f("span", {
+                class: "multiselect__option rds-e-dropdown__skeleton-item",
+                "aria-hidden": "true",
+                role: "presentation"
+              }, [
+                f("span", { class: "rds-e-dropdown__skeleton-line rds-e-dropdown__skeleton-line--primary" }),
+                f("span", { class: "rds-e-dropdown__skeleton-line rds-e-dropdown__skeleton-line--secondary" })
+              ], -1)
+            ])])), 64)) : x("", !0)
           ]),
           key: "1"
         } : void 0,
-        p("noOptions") ? {
-          name: ze,
-          fn: d(() => [
-            v(e.$slots, "noOptions", {}, void 0, !0)
+        b("noOptions") ? {
+          name: $t,
+          fn: y(() => [
+            h(e.$slots, "noOptions", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
-        p("noResult") ? {
-          name: Ge,
-          fn: d(({ search: o }) => [
-            v(e.$slots, "noResult", { search: o }, void 0, !0)
+        b("noResult") ? {
+          name: Ot,
+          fn: y(({ search: l }) => [
+            h(e.$slots, "noResult", { search: l }, void 0, !0)
           ]),
           key: "3"
         } : void 0,
-        p("limit") ? {
-          name: Je,
-          fn: d(() => [
-            v(e.$slots, "limit", {}, void 0, !0)
+        b("limit") ? {
+          name: _t,
+          fn: y(() => [
+            h(e.$slots, "limit", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
-        p("maxElements") ? {
-          name: Qe,
-          fn: d(() => [
-            v(e.$slots, "maxElements", {}, void 0, !0)
+        b("maxElements") ? {
+          name: Et,
+          fn: y(() => [
+            h(e.$slots, "maxElements", {}, void 0, !0)
           ]),
           key: "5"
         } : void 0,
-        p("singleLabel") ? {
-          name: We,
-          fn: d(({ option: o }) => [
-            v(e.$slots, "singleLabel", { option: o }, void 0, !0)
+        b("singleLabel") ? {
+          name: St,
+          fn: y(({ option: l }) => [
+            h(e.$slots, "singleLabel", { option: l }, void 0, !0)
           ]),
           key: "6"
         } : void 0
       ]), 1040, ["modelValue", "class", "options", "close-on-select", "disabled", "multiple", "max-height", "small", "open-direction", "limit", "limit-text", "append-to-body", "text-only"])
     ], 2));
   }
-}), at = /* @__PURE__ */ Le(Xe, [["__scopeId", "data-v-b0db67b1"]]);
+}), jt = /* @__PURE__ */ st(Dt, [["__scopeId", "data-v-59f0ef6b"]]);
 export {
-  at as default
+  jt as default
 };