@jblehm/super-list 1.0.26 → 1.0.27

package/dist/super-list.js

@@ -1,4 +1,4 @@
-import { defineComponent as Z, ref as f, computed as O, createElementBlock as M, openBlock as I, normalizeClass as R, withKeys as m, createElementVNode as S, useTemplateRef as Ee, watch as F, Fragment as ce, createCommentVNode as $, renderList as Ae, withModifiers as oe, createBlock as fe, toDisplayString as me, useCssVars as Fe, onMounted as Le, onUnmounted as Ne, renderSlot as xe, createVNode as Q, nextTick as Se, resolveDynamicComponent as Be, withCtx as be } from "vue";
+import { defineComponent as Y, ref as f, computed as O, createElementBlock as M, openBlock as D, normalizeClass as R, withKeys as b, createElementVNode as N, useTemplateRef as Ee, watch as F, Fragment as ce, createCommentVNode as $, renderList as Ae, withModifiers as oe, createBlock as fe, toDisplayString as me, useCssVars as Fe, onMounted as Le, onUnmounted as Se, renderSlot as xe, createVNode as Z, nextTick as Ne, resolveDynamicComponent as Be, withCtx as be } from "vue";
 import './index.css';class He {
   eventsTypes = ["resize", "load", "scroll", "wheel", "touchmove"];
   config = {
@@ -79,7 +79,7 @@ class qe {
     return this.abort("New Request From Controller."), this.setFunc(i), this.setThen(a), this.execute();
   }
 }
-const je = ["tabindex", "placeholder", "size"], $e = /* @__PURE__ */ Z({
+const je = ["tabindex", "placeholder", "size"], $e = /* @__PURE__ */ Y({
   __name: "ListTextInput",
   props: {
     enableTextFilter: {
@@ -110,42 +110,42 @@ const je = ["tabindex", "placeholder", "size"], $e = /* @__PURE__ */ Z({
   },
   setup(e, { expose: i, emit: a }) {
     const v = a, o = e, d = f(null);
-    function w() {
-      o.parentMethods.openList();
+    function w(h) {
+      "sourceCapabilities" in h && h.sourceCapabilities == null ? o.parentMethods.closeList() : o.parentMethods.openList();
     }
-    function t(y) {
-      o.parentMethods.unfocus(y);
+    function t(h) {
+      o.parentMethods.unfocus(h);
     }
-    function s(y) {
-      y?.target?.value != null && v("update:query", y.target.value);
+    function s(h) {
+      h?.target?.value != null && v("update:query", h.target.value);
     }
     const c = O(() => {
-      const y = d?.value ? d.value.length : 0, b = o.placeholder?.length || 0;
-      return y > 0 ? y : b > 0 ? b : 5;
-    }), l = O(() => o.enableButtonClick === !0 && o.enableTextFilter === !0 ? "" : "click-through"), g = O(() => o.showDropDown && !o.enableTextFilter || !o.showDropDown ? "dark-placeholder-text" : "light-placeholder-text");
+      const h = d?.value ? d.value.length : 0, g = o.placeholder?.length || 0;
+      return h > 0 ? h : g > 0 ? g : 5;
+    }), l = O(() => o.enableButtonClick === !0 && o.enableTextFilter === !0 ? "" : "click-through"), y = O(() => o.showDropDown && !o.enableTextFilter || !o.showDropDown ? "dark-placeholder-text" : "light-placeholder-text");
     function k() {
       if (d?.value) {
-        const y = d.value;
-        y.blur(), y.value = "";
+        const h = d.value;
+        h.blur(), h.value = "";
       }
     }
-    function D() {
+    function I() {
       d?.value && d.value.focus();
     }
-    return i({ blurInput: k, focusInput: D, textInputRef: d }), (y, b) => (I(), M("input", {
+    return i({ blurInput: k, focusInput: I, textInputRef: d }), (h, g) => (D(), M("input", {
       ref_key: "textInputRef",
       ref: d,
       tabindex: e.enableTextFilter ? 0 : -1,
       onKeydown: [
-        b[0] || (b[0] = m((h) => e.parentMethods.press(h), ["enter"])),
-        b[1] || (b[1] = m((h) => e.parentMethods.press(), ["space"])),
-        b[2] || (b[2] = m((h) => e.parentMethods.press(h), ["esc"])),
-        b[3] || (b[3] = m((h) => e.parentMethods.press(h), ["up"])),
-        b[4] || (b[4] = m((h) => e.parentMethods.press(h), ["down"]))
+        g[0] || (g[0] = b((m) => e.parentMethods.press(m), ["enter"])),
+        g[1] || (g[1] = b((m) => e.parentMethods.press(), ["space"])),
+        g[2] || (g[2] = b((m) => e.parentMethods.press(m), ["esc"])),
+        g[3] || (g[3] = b((m) => e.parentMethods.press(m), ["up"])),
+        g[4] || (g[4] = b((m) => e.parentMethods.press(m), ["down"]))
       ],
-      onFocusin: b[5] || (b[5] = (h) => w()),
-      onFocusout: b[6] || (b[6] = (h) => t(h)),
-      onInput: b[7] || (b[7] = (h) => s(h)),
+      onFocusin: g[5] || (g[5] = (m) => w(m)),
+      onFocusout: g[6] || (g[6] = (m) => t(m)),
+      onInput: g[7] || (g[7] = (m) => s(m)),
       type: "text",
       "aria-autocomplete": "none",
       autocomplete: "off",
@@ -153,7 +153,7 @@ const je = ["tabindex", "placeholder", "size"], $e = /* @__PURE__ */ Z({
       size: c.value,
       class: R([[
         l.value,
-        g.value,
+        y.value,
         { "text-filter-disabled": !e.enableTextFilter }
       ], "list-filter-text-input"])
     }, null, 42, je));
@@ -163,7 +163,7 @@ const je = ["tabindex", "placeholder", "size"], $e = /* @__PURE__ */ Z({
   for (const [v, o] of i)
     a[v] = o;
   return a;
-}, he = /* @__PURE__ */ K($e, [["__scopeId", "data-v-5cd54d87"]]), Ke = {}, Ve = {
+}, he = /* @__PURE__ */ K($e, [["__scopeId", "data-v-acc7ac24"]]), Ke = {}, Ve = {
   xmlns: "http://www.w3.org/2000/svg",
   fill: "currentColor",
   "aria-hidden": "true",
@@ -171,14 +171,14 @@ const je = ["tabindex", "placeholder", "size"], $e = /* @__PURE__ */ Z({
   viewBox: "0 -16 16 17"
 };
 function ze(e, i) {
-  return I(), M("svg", Ve, i[0] || (i[0] = [
-    S("path", {
+  return D(), M("svg", Ve, i[0] || (i[0] = [
+    N("path", {
       "shape-rendering": "geometricPrecision",
       d: "M 6 -2.25 L 13.75 -14 A 0.5 0.5 90 0 1 15 -13 L 6.5 -0.5 A 2 1 90 0 1 5.5 -0.5 L 1 -6 A 0.5 0.5 90 0 1 2.25 -7 Z"
     }, null, -1)
   ]));
 }
-const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = { class: "list-item-span" }, We = { class: "list-item-span" }, Qe = /* @__PURE__ */ Z({
+const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = { class: "list-item-span" }, We = { class: "list-item-span" }, Qe = /* @__PURE__ */ Y({
   __name: "ListItem",
   props: {
     mouseHoveringOnList: {
@@ -239,19 +239,19 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
       const s = w.offsetTop - t.scrollTop < 0, c = w.offsetTop + w.offsetHeight - t.scrollTop > t.clientHeight;
       s && (t.scrollTop = w.offsetTop), c && (t.scrollTop = w.offsetTop + w.clientHeight - t.clientHeight);
     }
-    return (w, t) => (I(), M(ce, null, [
-      (I(!0), M(ce, null, Ae(e.filteredListItems, (s, c) => (I(), M("li", {
+    return (w, t) => (D(), M(ce, null, [
+      (D(!0), M(ce, null, Ae(e.filteredListItems, (s, c) => (D(), M("li", {
         key: c,
         ref_for: !0,
         ref: "items",
         onKeyup: [
-          t[0] || (t[0] = m((l) => e.parentMethods.press(l), ["enter"])),
-          t[1] || (t[1] = m((l) => e.parentMethods.press(l), ["space"])),
-          t[2] || (t[2] = m((l) => e.parentMethods.press(l), ["esc"]))
+          t[0] || (t[0] = b((l) => e.parentMethods.press(l), ["enter"])),
+          t[1] || (t[1] = b((l) => e.parentMethods.press(l), ["space"])),
+          t[2] || (t[2] = b((l) => e.parentMethods.press(l), ["esc"]))
         ],
         onKeydown: [
-          t[3] || (t[3] = m((l) => e.parentMethods.press(l), ["up"])),
-          t[4] || (t[4] = m((l) => e.parentMethods.press(l), ["down"]))
+          t[3] || (t[3] = b((l) => e.parentMethods.press(l), ["up"])),
+          t[4] || (t[4] = b((l) => e.parentMethods.press(l), ["down"]))
         ],
         onFocusout: t[5] || (t[5] = (l) => e.parentMethods.unfocus(l)),
         tabindex: "-1",
@@ -264,52 +264,52 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
           "list-option"
         ])
       }, [
-        S("span", Je, me(e.parentMethods.getLabel(s)), 1),
-        e.selectedIndex === c ? (I(), fe(Xe, {
+        N("span", Je, me(e.parentMethods.getLabel(s)), 1),
+        e.selectedIndex === c ? (D(), fe(Xe, {
           key: 0,
           class: "list-item-icon",
           "aria-hidden": "true"
         })) : $("", !0)
       ], 42, Ue))), 128)),
-      e.filteredListItems.length === 0 ? (I(), M("li", {
+      e.filteredListItems.length === 0 ? (D(), M("li", {
         key: 0,
         onKeyup: [
-          t[6] || (t[6] = m((s) => e.parentMethods.press(s), ["enter"])),
-          t[7] || (t[7] = m((s) => e.parentMethods.press(s), ["space"])),
-          t[8] || (t[8] = m((s) => e.parentMethods.press(s), ["esc"]))
+          t[6] || (t[6] = b((s) => e.parentMethods.press(s), ["enter"])),
+          t[7] || (t[7] = b((s) => e.parentMethods.press(s), ["space"])),
+          t[8] || (t[8] = b((s) => e.parentMethods.press(s), ["esc"]))
         ],
         onKeydown: [
-          t[9] || (t[9] = m((s) => e.parentMethods.press(s), ["up"])),
-          t[10] || (t[10] = m((s) => e.parentMethods.press(s), ["down"]))
+          t[9] || (t[9] = b((s) => e.parentMethods.press(s), ["up"])),
+          t[10] || (t[10] = b((s) => e.parentMethods.press(s), ["down"]))
         ],
         onFocusout: t[11] || (t[11] = (s) => e.parentMethods.unfocus(s)),
         onMousedown: t[12] || (t[12] = oe((s) => e.parentMethods.closeList(s), ["left"])),
         tabindex: "-1",
         class: "list-option-message"
       }, t[20] || (t[20] = [
-        S("span", { class: "list-item-span" }, "No Items To Display.", -1)
+        N("span", { class: "list-item-span" }, "No Items To Display.", -1)
       ]), 32)) : $("", !0),
-      e.totalOptionsCount && e.totalOptionsCount > (e.filteredListItems?.length || 0) ? (I(), M("li", {
+      e.totalOptionsCount && e.totalOptionsCount > (e.filteredListItems?.length || 0) ? (D(), M("li", {
         key: 1,
         onKeyup: [
-          t[13] || (t[13] = m((s) => e.parentMethods.press(s), ["enter"])),
-          t[14] || (t[14] = m((s) => e.parentMethods.press(s), ["space"])),
-          t[15] || (t[15] = m((s) => e.parentMethods.press(s), ["esc"]))
+          t[13] || (t[13] = b((s) => e.parentMethods.press(s), ["enter"])),
+          t[14] || (t[14] = b((s) => e.parentMethods.press(s), ["space"])),
+          t[15] || (t[15] = b((s) => e.parentMethods.press(s), ["esc"]))
         ],
         onKeydown: [
-          t[16] || (t[16] = m((s) => e.parentMethods.press(s), ["up"])),
-          t[17] || (t[17] = m((s) => e.parentMethods.press(s), ["down"]))
+          t[16] || (t[16] = b((s) => e.parentMethods.press(s), ["up"])),
+          t[17] || (t[17] = b((s) => e.parentMethods.press(s), ["down"]))
         ],
         onFocusout: t[18] || (t[18] = (s) => e.parentMethods.unfocus(s)),
         onMousedown: t[19] || (t[19] = oe((s) => e.parentMethods.closeList(s), ["left"])),
         tabindex: "-1",
         class: "list-option-message"
       }, [
-        S("span", We, " +" + me(e.totalOptionsCount - e.filteredListItems?.length || 0) + " More Items...", 1)
+        N("span", We, " +" + me(e.totalOptionsCount - e.filteredListItems?.length || 0) + " More Items...", 1)
       ], 32)) : $("", !0)
     ], 64));
   }
-}), Ze = /* @__PURE__ */ K(Qe, [["__scopeId", "data-v-e4eeb2f7"]]), Ye = /* @__PURE__ */ Z({
+}), Ze = /* @__PURE__ */ K(Qe, [["__scopeId", "data-v-e4eeb2f7"]]), Ye = /* @__PURE__ */ Y({
   __name: "ItemList",
   props: {
     mouseHoveringOnList: {
@@ -364,19 +364,19 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
   emits: ["reverseDropDownList"],
   setup(e, { expose: i, emit: a }) {
     Fe((r) => ({
-      "583c4ee4": k.value,
-      "19dae816": N.value,
-      "19daebd7": se.value,
-      "20dfddb8": q.value,
-      "9ebd075e": Y.value
+      e88f8fc8: k.value,
+      "2e6c2d4e": S.value,
+      "2e6c310f": se.value,
+      "15572a20": q.value,
+      "167010ee": G.value
     }));
-    const v = a, o = e, d = f(null), w = f(null), t = f(null), s = f(0), c = f(0), l = f(0), g = f(0), k = f("0px"), D = f(!1), y = f([]), b = f(0), h = O(() => !D.value || window?.innerHeight == null ? !1 : X() && le()), V = O(() => o.maxListHeightPX >= b.value);
+    const v = a, o = e, d = f(null), w = f(null), t = f(null), s = f(0), c = f(0), l = f(0), y = f(0), k = f("0px"), I = f(!1), h = f([]), g = f(0), m = O(() => !I.value || window?.innerHeight == null ? !1 : X() && le()), V = O(() => o.maxListHeightPX >= g.value);
     F(
-      () => h.value,
+      () => m.value,
       (r) => v("reverseDropDownList", r),
       { immediate: !0 }
     );
-    const N = O(() => s.value + "px"), se = O(() => g.value + "px");
+    const S = O(() => s.value + "px"), se = O(() => y.value + "px");
     i({ listContainerRef: t });
     const P = (r) => {
       r?.key && r.key === " " && r.preventDefault();
@@ -388,7 +388,7 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
       return w?.value ? (w?.value).clientHeight : 0;
     }
     function E() {
-      if (!o.showDropDown || B() === 0) return o.maxListHeightPX;
+      if (!I.value || B() === 0) return o.maxListHeightPX;
       const r = B() === 0 ? o.maxListHeightPX : +B();
       return o.maxListHeightPX && o.maxListHeightPX > r ? r : o.maxListHeightPX;
     }
@@ -398,55 +398,55 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
     function le() {
       return l.value < E();
     }
-    const Y = O(() => (o.maxListHeightPX || 0) + "px"), q = O(() => (o.listAnimationDurationMs || 0) + "ms"), G = O(() => o.blockListChange ? y.value : o.filteredListItems);
+    const G = O(() => (o.maxListHeightPX || 0) + "px"), q = O(() => (o.listAnimationDurationMs || 0) + "ms"), _ = O(() => o.blockListChange ? h.value : o.filteredListItems);
     F(
-      () => G,
+      () => _,
       (r) => {
-        r && (y.value = r.value);
+        r && (h.value = r.value);
       },
       { immediate: !1, deep: !0 }
     );
     let C = setTimeout(() => {
     }, 0), A = null;
     function j() {
-      b.value = B(), clearTimeout(C), A && A.observe(), D.value = !0, z(void 0);
+      g.value = B(), clearTimeout(C), A && A.observe(), I.value = !0, z(void 0);
     }
     function re() {
       clearTimeout(C), C = setTimeout(() => {
-        o.showDropDown || (D.value = !1, A && A.unobserve());
+        o.showDropDown || (I.value = !1, A && A.unobserve());
       }, o.listAnimationDurationMs + 50);
     }
     F(
       () => o.showDropDown,
       (r, L) => {
-        r !== L && (r ? j() : re());
+        r !== L && (U(), r ? j() : re());
       },
       { immediate: !0 }
     );
     function z(r) {
-      te(), Se(() => te()), _(r);
+      U(), Ne(() => U()), ee(r);
     }
-    function _(r) {
-      if (typeof t?.value?.contains != "function" || r?.target?.nodeType == null || ee(r)) return;
+    function ee(r) {
+      if (!o.enableScrollClose || !o.showDropDown || typeof t?.value?.contains != "function" || r?.target?.nodeType == null || te(r)) return;
       const x = ["scroll", "wheel", "touchmove"].includes(r?.type);
       o.showDropDown && x && o.parentMethods.closeList();
     }
-    function ee(r) {
-      const L = !!d.value?.contains(r?.target), x = !!t.value?.contains(r.target), W = [r?.srcElement?.id, r?.target?.id].includes("super-list-select-list");
-      return L || x || W;
-    }
-    function te() {
-      U(), J();
+    function te(r) {
+      const L = !!d.value?.contains(r?.target), x = !!t.value?.contains(r.target), Q = [r?.srcElement?.id, r?.target?.id].includes("super-list-select-list");
+      return L || x || Q;
     }
     function U() {
+      J(), W();
+    }
+    function J() {
       if (d?.value == null) return;
       const r = d.value.getBoundingClientRect();
       c.value = r.top, l.value = window.innerHeight - r.bottom, k.value = r.width + "px";
     }
-    function J() {
+    function W() {
       if (d?.value == null || t?.value == null) return;
-      const r = ne().getBoundingClientRect(), L = t.value.getBoundingClientRect(), x = g.value, W = s.value;
-      h.value ? g.value = x - (r.top - L.bottom) : g.value = x - (L.top - r.bottom), s.value = W - (L.left - r.left);
+      const r = ne().getBoundingClientRect(), L = t.value.getBoundingClientRect(), x = y.value, Q = s.value;
+      m.value ? y.value = x - (r.top - L.bottom) : y.value = x - (L.top - r.bottom), s.value = Q - (L.left - r.left);
     }
     function ue() {
       return (d?.value).getElementsByTagName("button")[0];
@@ -456,17 +456,17 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
     }
     return Le(() => {
       A = new He(z, ue()), setTimeout(() => z(void 0), 250);
-    }), Ne(() => {
+    }), Se(() => {
       A?.unobserve();
-    }), (r, L) => (I(), M(ce, null, [
-      S("div", {
+    }), (r, L) => (D(), M(ce, null, [
+      N("div", {
         ref_key: "dropDownButtonContainer",
         ref: d,
         class: "super-list-button-container"
       }, [
         xe(r.$slots, "default", {}, void 0, !0)
       ], 512),
-      S("div", {
+      N("div", {
         id: "super-list-select-list",
         ref_key: "listContainerRef",
         ref: t,
@@ -474,27 +474,27 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
         tabindex: "-1",
         class: R([
           "select-list",
-          h.value ? "list-reverse" : "list-normal",
+          m.value ? "list-reverse" : "list-normal",
           { "select-list-open": e.showDropDown },
-          { "no-scroll": V.value && D.value },
-          { "select-list-fixed": D.value },
+          { "no-scroll": V.value && I.value },
+          { "select-list-fixed": I.value },
           { "select-list-scrollable": !V.value }
         ]),
-        onKeydown: L[1] || (L[1] = m((x) => P(x), ["space"])),
+        onKeydown: L[1] || (L[1] = b((x) => P(x), ["space"])),
         onMouseup: L[2] || (L[2] = oe((x) => ie(x), ["left"]))
       }, [
-        S("ul", {
+        N("ul", {
           tabindex: "-1",
           ref_key: "dropDownListUL",
           ref: w,
           class: "list-content"
         }, [
-          Q(Ze, {
-            filteredListItems: y.value,
+          Z(Ze, {
+            filteredListItems: h.value,
             mouseHoveringOnList: e.mouseHoveringOnList,
             focusedIndex: e.focusedIndex,
             selectedIndex: e.selectedIndex,
-            listElementOpenAndVisible: D.value,
+            listElementOpenAndVisible: I.value,
             "parent-methods": e.parentMethods,
             "show-drop-down": e.showDropDown,
             "total-options-count": e.totalOptionsCount
@@ -503,7 +503,7 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
       ], 34)
     ], 64));
   }
-}), ge = /* @__PURE__ */ K(Ye, [["__scopeId", "data-v-36d8d106"]]), Ge = {}, _e = {
+}), ge = /* @__PURE__ */ K(Ye, [["__scopeId", "data-v-8cb5b4bd"]]), Ge = {}, _e = {
   xmlns: "http://www.w3.org/2000/svg",
   fill: "currentColor",
   "aria-hidden": "true",
@@ -511,8 +511,8 @@ const Xe = /* @__PURE__ */ K(Ke, [["render", ze]]), Ue = ["onMousedown"], Je = {
   viewBox: "0 0 12 6"
 };
 function et(e, i) {
-  return I(), M("svg", _e, i[0] || (i[0] = [
-    S("path", {
+  return D(), M("svg", _e, i[0] || (i[0] = [
+    N("path", {
       "shape-rendering": "geometricPrecision",
       d: "M 6 4 L 10 0.25 A 0.5 0.5 90 0 1 11 1.25 L 6.5 5.75 A 15 3 90 0 1 5.5 5.75 L 1 1.25 A 0.5 0.5 90 0 1 2 0.25 Z"
     }, null, -1)
@@ -521,7 +521,7 @@ function et(e, i) {
 const ye = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
   key: 2,
   class: "list-button-icon custom-icon"
-}, ot = /* @__PURE__ */ Z({
+}, ot = /* @__PURE__ */ Y({
   __name: "ListButton",
   props: {
     // eslint-disable-line
@@ -563,48 +563,48 @@ const ye = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
     function s() {
       v?.value && v.value.focus();
     }
-    return i({ blurInput: t, focusInput: s, buttonRef: v }), (c, l) => (I(), M("button", {
+    return i({ blurInput: t, focusInput: s, buttonRef: v }), (c, l) => (D(), M("button", {
       ref_key: "buttonRef",
       ref: v,
       tabindex: e.enableTextFilter ? -1 : 0,
       onKeydown: [
-        l[0] || (l[0] = m((g) => d(g), ["enter"])),
-        l[1] || (l[1] = m((g) => w(g), ["space"])),
-        l[2] || (l[2] = m((g) => e.parentMethods.press(g), ["esc"])),
-        l[3] || (l[3] = m((g) => e.parentMethods.press(g), ["up"])),
-        l[4] || (l[4] = m((g) => e.parentMethods.press(g), ["down"]))
+        l[0] || (l[0] = b((y) => d(y), ["enter"])),
+        l[1] || (l[1] = b((y) => w(y), ["space"])),
+        l[2] || (l[2] = b((y) => e.parentMethods.press(y), ["esc"])),
+        l[3] || (l[3] = b((y) => e.parentMethods.press(y), ["up"])),
+        l[4] || (l[4] = b((y) => e.parentMethods.press(y), ["down"]))
       ],
-      onFocusout: l[5] || (l[5] = (g) => e.parentMethods.unfocus(g)),
-      onClick: l[6] || (l[6] = (g) => o()),
+      onFocusout: l[5] || (l[5] = (y) => e.parentMethods.unfocus(y)),
+      onClick: l[6] || (l[6] = (y) => o()),
       type: "button",
       class: R([[{ "click-through": a.enableTextFilter || a.showDropDown }], "list-button"])
     }, [
       xe(c.$slots, "default", {}, void 0, !0),
-      S("span", {
+      N("span", {
         class: R(["list-button-icon-div", { "bigger-gap": a.showDropDown }])
       }, [
-        e.customIcon ? $("", !0) : (I(), M("span", {
+        e.customIcon ? $("", !0) : (D(), M("span", {
           key: 0,
           class: R(["list-button-icon", [{ "rotate-180": !a.showDropDown }]])
         }, [
-          Q(ye, { "aria-hidden": "true" })
+          Z(ye, { "aria-hidden": "true" })
         ], 2)),
-        e.customIcon ? $("", !0) : (I(), M("span", {
+        e.customIcon ? $("", !0) : (D(), M("span", {
           key: 1,
           class: R(["list-button-icon", [{ "rotate-180": a.showDropDown }]])
         }, [
-          e.customIcon == null ? (I(), fe(ye, {
+          e.customIcon == null ? (D(), fe(ye, {
             key: 0,
             "aria-hidden": "true"
           })) : $("", !0)
         ], 2)),
-        e.customIcon ? (I(), M("span", nt, [
-          (I(), fe(Be(e.customIcon), { "aria-hidden": "true" }))
+        e.customIcon ? (D(), M("span", nt, [
+          (D(), fe(Be(e.customIcon), { "aria-hidden": "true" }))
         ])) : $("", !0)
       ], 2)
     ], 42, tt));
   }
-}), we = /* @__PURE__ */ K(ot, [["__scopeId", "data-v-01ef8e37"]]), st = /* @__PURE__ */ Z({
+}), we = /* @__PURE__ */ K(ot, [["__scopeId", "data-v-01ef8e37"]]), st = /* @__PURE__ */ Y({
   __name: "super-list",
   props: {
     selected: {
@@ -657,18 +657,18 @@ const ye = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
   },
   emits: { "update:selected": null },
   setup(e, { expose: i, emit: a }) {
-    const v = a, o = e, d = f([]), w = new qe(), t = f(0), s = O(() => o.forceTextFilterVisibilityTo != null ? o.forceTextFilterVisibilityTo : t.value > o.maxListOptions), c = f(!1), l = f(!1), g = f(!1), k = f(!0), D = f(!1), y = f(!1), b = f(ge), h = f(he), V = f(we), N = f("");
+    const v = a, o = e, d = f([]), w = new qe(), t = f(0), s = O(() => o.forceTextFilterVisibilityTo != null ? o.forceTextFilterVisibilityTo : t.value > o.maxListOptions), c = f(!1), l = f(!1), y = f(!1), k = f(!0), I = f(!1), h = f(!1), g = f(ge), m = f(he), V = f(we), S = f("");
     F(
-      () => N.value,
+      () => S.value,
       (n, u) => {
         n !== u && typeof o.options == "function" && x(n);
       }
     );
     const se = () => {
-      s.value && h?.value?.blurInput();
+      s.value && m?.value?.blurInput();
     }, P = () => {
-      clearTimeout(J), se(), N.value = "", c.value = !1, k.value = !0;
-    }, ie = O(() => y?.value === !0 ? "Error loading data" : D?.value === !0 ? "Loading..." : E(o.selected)), B = (n) => {
+      clearTimeout(W), se(), S.value = "", c.value = !1, k.value = !0;
+    }, ie = O(() => h?.value === !0 ? "Error loading data" : I?.value === !0 ? "Loading..." : E(o.selected)), B = (n) => {
       n && v("update:selected", n), P();
     }, E = (n) => Re(
       n,
@@ -677,18 +677,18 @@ const ye = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
       o.enumKeyToLabelObjectArray
     );
     function X() {
-      throw D.value = !0, y.value = !0, new Error("Invalid options argument provided to ListInputComponent");
+      throw I.value = !0, h.value = !0, new Error("Invalid options argument provided to ListInputComponent");
     }
     function le() {
-      throw D.value = !0, y.value = !0, new Error("Invalid response provided to ListInputComponent, no total count key found");
+      throw I.value = !0, h.value = !0, new Error("Invalid response provided to ListInputComponent, no total count key found");
     }
-    function Y() {
-      throw D.value = !0, y.value = !0, new Error("Invalid objectLabelKeyName for provided Dropdown list value.");
+    function G() {
+      throw I.value = !0, h.value = !0, new Error("Invalid objectLabelKeyName for provided Dropdown list value.");
     }
     Le(() => {
       typeof o.options != "function" && !Array.isArray(o.options) ? X() : r();
     });
-    const q = f(!1), G = f(0), C = f(0), A = f(0);
+    const q = f(!1), _ = f(0), C = f(0), A = f(0);
     F(
       () => C.value,
       (n, u) => {
@@ -704,7 +704,7 @@ const ye = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
     );
     const j = O(() => {
       if (typeof o.options == "function" && !Array.isArray(o.options)) return d.value;
-      const n = N.value, u = d.value;
+      const n = S.value, u = d.value;
       return n === "" ? u : u.filter((p) => E(p).toLowerCase().includes(n.toLowerCase()));
     });
     F(
@@ -717,10 +717,10 @@ const ye = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
     const re = () => {
       q.value = !0;
     }, z = () => {
-      const n = _();
-      G.value = n, C.value = n > -1 ? n : 0;
+      const n = ee();
+      _.value = n, C.value = n > -1 ? n : 0;
     };
-    function _() {
+    function ee() {
       if (o.selected == null) return -1;
       const n = d.value.map((p) => E(p)), u = n.filter((p) => p === E(o.selected));
       if (u.length > 1) {
@@ -733,46 +733,46 @@ const ye = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
       }
       return n.indexOf(E(o.selected));
     }
-    const ee = () => {
-      D.value || (c.value || (l.value = !1, z(), te(), c.value = !0), q.value = !1, k.value = !1);
-    }, te = () => {
-      const n = window?.innerWidth != null && window.innerWidth < 640, u = screen?.width != null && screen.width < 640, p = h.value.textInputRef;
-      (n || u) && s.value && (ue(), p?.scrollIntoView({ block: "start" }));
-    }, U = f(!0);
-    let J = setTimeout(() => {
+    const te = () => {
+      I.value || (c.value || (l.value = !1, z(), U(), c.value = !0), q.value = !1, k.value = !1);
+    }, U = () => {
+      const n = window?.innerWidth != null && window.innerWidth < 640, u = screen?.width != null && screen.width < 640, p = m.value.textInputRef;
+      (n || u) && s.value && (ue(), p?.scrollIntoView({ block: "start", inline: "center" }));
+    }, J = f(!0);
+    let W = setTimeout(() => {
     }, 0);
     function ue() {
-      h.value.textInputRef && (clearTimeout(J), U.value = !1, J = setTimeout(() => {
-        U.value = !0;
+      m.value.textInputRef && (clearTimeout(W), J.value = !1, W = setTimeout(() => {
+        J.value = !0;
       }, 300));
     }
     const ne = () => {
-      s?.value == !0 ? h.value.focusInput() : V?.value?.focusInput && V?.value?.focusInput();
+      s?.value == !0 ? m.value.focusInput() : V?.value?.focusInput && V?.value?.focusInput();
     };
     async function r() {
-      typeof o.options == "function" ? await x(N.value ? N.value : void 0, !0) : (ve(o.options), t.value = d.value.length), L();
+      typeof o.options == "function" ? await x(S.value ? S.value : void 0, !0) : (ve(o.options), t.value = d.value.length), L();
     }
     i({ initializeOptions: r, getLabel: E });
     function L() {
-      _() == -1 && d.value && !!d.value[0] && B(d.value[0]);
+      ee() == -1 && d.value && !!d.value[0] && B(d.value[0]);
     }
     async function x(n, u = !0) {
-      D.value = u;
+      I.value = u;
       const p = async () => o.options(o.maxListOptions, n || ""), T = (H) => {
-        (!H || !("data" in H)) && X(), ve(H.data), W(H?.data?.length ?? 0).then(() => {
-          D.value = !1;
+        (!H || !("data" in H)) && X(), ve(H.data), Q(H?.data?.length ?? 0).then(() => {
+          I.value = !1;
         });
       };
       await w.resetAndExecute(p, T);
     }
-    async function W(n) {
+    async function Q(n) {
       const u = async () => o.options(1, ""), p = (T) => {
         (!T || !("totalNum" in T)) && le(), t.value = T.totalNum ?? n;
       };
       await w.resetAndExecute(u, p);
     }
-    const pe = () => h?.value?.textInputRef?.getElementsByTagName("li")[C.value] ?? null, Ie = (n) => {
-      c.value == !1 ? ee() : n && De(n);
+    const pe = () => m?.value?.textInputRef?.getElementsByTagName("li")[C.value] ?? null, Ie = (n) => {
+      c.value == !1 ? te() : n && De(n);
     }, De = (n) => {
       const u = n.key || n.code;
       (u === "Tab" || u === "Escape") && P(), u === "ArrowDown" && Oe(n), u === "ArrowUp" && Me(n), (u === "Enter" || u === " ") && Te(), n.preventDefault(), n.stopPropagation();
@@ -784,8 +784,8 @@ const ye = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
       k.value = !0, C.value > 0 && (n.preventDefault(), q.value = !1, C.value--, pe()?.focus());
     }, Ce = (n) => {
       if (c?.value === !1) return;
-      N.value.length > 0 && (l.value = !0);
-      const u = b?.value?.listContainerRef, p = h?.value?.textInputRef, T = n?.relatedTarget && p?.isEqualNode(n?.relatedTarget), H = n?.relatedTarget && u && u.contains(n?.relatedTarget), de = n?.relatedTarget && u && u.isEqualNode(n?.relatedTarget);
+      S.value.length > 0 && (l.value = !0);
+      const u = g?.value?.listContainerRef, p = m?.value?.textInputRef, T = n?.relatedTarget && p?.isEqualNode(n?.relatedTarget), H = n?.relatedTarget && u && u.contains(n?.relatedTarget), de = n?.relatedTarget && u && u.isEqualNode(n?.relatedTarget);
       if (!(H || T)) {
         if (de) {
           ne();
@@ -798,13 +798,13 @@ const ye = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
       Array.isArray(n) || X(), n.length > 0 && typeof n[0] == "object" && ke(n), d.value = n;
     }
     function ke(n) {
-      (!o.objectLabelKeyName || o.objectLabelKeyName.length === 0) && Y();
+      (!o.objectLabelKeyName || o.objectLabelKeyName.length === 0) && G();
       const u = o.objectLabelKeyName;
       for (let p = 0; p < n.length; p++)
-        (typeof n[p] != "object" || !(u in n[p])) && Y();
+        (typeof n[p] != "object" || !(u in n[p])) && G();
     }
     const ae = {
-      openList: ee,
+      openList: te,
       unfocus: Ce,
       press: Ie,
       mouseOverList: re,
@@ -813,48 +813,48 @@ const ye = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
       focusInput: ne,
       closeList: P
     };
-    return (n, u) => (I(), M("div", {
+    return (n, u) => (D(), M("div", {
       style: { position: "relative" },
       class: R(n.$attrs.class)
     }, [
-      Q(ge, {
+      Z(ge, {
         ref_key: "itemListRef",
-        ref: b,
+        ref: g,
         "show-drop-down": c.value,
         filteredListItems: j.value,
         mouseHoveringOnList: q.value,
         focusedIndex: A.value,
-        selectedIndex: G.value,
+        selectedIndex: _.value,
         "max-list-height-p-x": e.maxListHeightPX,
         "list-animation-duration-ms": e.listAnimationDurationMs,
         "parent-methods": ae,
         blockListChange: l.value,
         "onUpdate:blockListChange": u[1] || (u[1] = (p) => l.value = p),
         "total-options-count": t.value,
-        onReverseDropDownList: u[2] || (u[2] = (p) => g.value = p),
-        enableScrollClose: U.value,
+        onReverseDropDownList: u[2] || (u[2] = (p) => y.value = p),
+        enableScrollClose: J.value,
         "enable-text-filter": s.value
       }, {
         default: be(() => [
-          Q(we, {
+          Z(we, {
             ref_key: "dropDownButtonInput",
             ref: V,
             "parent-methods": ae,
             "show-drop-down": c.value,
             "enable-text-filter": s.value,
             "custom-icon": e.customIcon,
-            "reverse-drop-down-list": g.value
+            "reverse-drop-down-list": y.value
           }, {
             default: be(() => [
-              Q(he, {
+              Z(he, {
                 ref_key: "dropDownTextInput",
-                ref: h,
+                ref: m,
                 "enable-text-filter": s.value,
                 "show-drop-down": c.value,
                 placeholder: ie.value,
                 "enable-button-click": k.value,
                 "parent-methods": ae,
-                "onUpdate:query": u[0] || (u[0] = (p) => N.value = p)
+                "onUpdate:query": u[0] || (u[0] = (p) => S.value = p)
               }, null, 8, ["enable-text-filter", "show-drop-down", "placeholder", "enable-button-click"])
             ]),
             _: 1
@@ -864,7 +864,7 @@ const ye = /* @__PURE__ */ K(Ge, [["render", et]]), tt = ["tabindex"], nt = {
       }, 8, ["show-drop-down", "filteredListItems", "mouseHoveringOnList", "focusedIndex", "selectedIndex", "max-list-height-p-x", "list-animation-duration-ms", "blockListChange", "total-options-count", "enableScrollClose", "enable-text-filter"])
     ], 2));
   }
-}), lt = /* @__PURE__ */ K(st, [["__scopeId", "data-v-e1f079fa"]]);
+}), lt = /* @__PURE__ */ K(st, [["__scopeId", "data-v-a644fb2e"]]);
 export {
   lt as default
 };