@featherk/composables 0.4.12 → 0.5.0

package/dist/featherk-composables.es.js

@@ -1,131 +1,132 @@
-import { ref as x, onBeforeUnmount as N, nextTick as k, onMounted as G, onUnmounted as P } from "vue";
-const O = (m) => {
-  const s = x(null);
-  let p = !1, u = null, f = null;
-  const b = [], w = ".k-table-row[data-grid-row-index] [tabindex]", A = () => m?.value?.columns, h = (t) => {
-    const o = t.key || t.code;
-    [" ", "Spacebar", "Space", "Enter"].includes(o) && (t.preventDefault(), t.stopPropagation(), s.value = t.target, t.target.click());
-  }, g = (t) => {
-    if (!s.value) return;
-    if (t.code === "Escape") {
-      t.preventDefault(), t.stopPropagation(), s.value && s.value.focus();
+import { ref as G, onBeforeUnmount as be, nextTick as B, computed as x, watch as te, onMounted as ge, readonly as W, getCurrentScope as we, onScopeDispose as ke, toValue as ne, unref as De, shallowRef as Ae } from "vue";
+import { useFocusTrap as Ee } from "@vueuse/integrations/useFocusTrap";
+const qe = (e) => {
+  const t = G(null);
+  let c = !1, P = null, F = null;
+  const U = [], H = ".k-table-row[data-grid-row-index] [tabindex]", m = () => e?.value?.columns, v = (o) => {
+    const h = o.key || o.code;
+    [" ", "Spacebar", "Space", "Enter"].includes(h) && (o.preventDefault(), o.stopPropagation(), t.value = o.target, o.target.click());
+  }, C = (o) => {
+    if (!t.value) return;
+    if (o.code === "Escape") {
+      o.preventDefault(), o.stopPropagation(), t.value && t.value.focus();
       return;
     }
-    const o = Array.from(
+    const h = Array.from(
       document.querySelectorAll(
         ".k-animation-container .k-popup .k-column-menu .k-columnmenu-item-wrapper .k-columnmenu-item"
       )
-    ), e = document.querySelector(".k-filter-menu-container");
-    if (e) {
-      if (t.code === "Tab") {
-        const r = [
+    ), l = document.querySelector(".k-filter-menu-container");
+    if (l) {
+      if (o.code === "Tab") {
+        const s = [
           ".k-filter-menu-container .k-dropdownlist[tabindex='0']",
           ".k-filter-menu-container input.k-input-inner:not([tabindex='-1']):not([disabled])",
           ".k-filter-menu-container button:not([tabindex='-1']):not([disabled])"
-        ], n = Array.from(
-          e.querySelectorAll(r.join(","))
+        ], d = Array.from(
+          l.querySelectorAll(s.join(","))
         );
-        if (n.length === 0) return;
-        const a = n.findIndex(
-          (l) => l === document.activeElement
+        if (d.length === 0) return;
+        const D = d.findIndex(
+          (L) => L === document.activeElement
         );
-        let i;
-        a === -1 ? i = 0 : t.shiftKey ? i = (a - 1 + n.length) % n.length : i = (a + 1) % n.length, t.preventDefault(), t.stopPropagation(), n[i]?.focus();
+        let b;
+        D === -1 ? b = 0 : o.shiftKey ? b = (D - 1 + d.length) % d.length : b = (D + 1) % d.length, o.preventDefault(), o.stopPropagation(), d[b]?.focus();
         return;
       }
-    } else if (t.code === "ArrowUp" || t.code === "ArrowDown") {
-      t.preventDefault(), t.stopPropagation();
-      const r = o.findIndex(
-        (a) => a === document.activeElement
+    } else if (o.code === "ArrowUp" || o.code === "ArrowDown") {
+      o.preventDefault(), o.stopPropagation();
+      const s = h.findIndex(
+        (D) => D === document.activeElement
       );
-      let n = r;
-      t.code === "ArrowUp" ? n = r > 0 ? r - 1 : o.length - 1 : t.code === "ArrowDown" && (n = r < o.length - 1 ? r + 1 : 0), o[n]?.focus();
+      let d = s;
+      o.code === "ArrowUp" ? d = s > 0 ? s - 1 : h.length - 1 : o.code === "ArrowDown" && (d = s < h.length - 1 ? s + 1 : 0), h[d]?.focus();
       return;
     }
-    t.code === "Tab" && (t.preventDefault(), t.stopPropagation(), t.shiftKey ? (s.value?.previousElementSibling).focus() : (s.value?.nextElementSibling).focus());
-  }, L = () => {
-    u = new MutationObserver((t) => {
-      t.forEach((o) => {
-        o.addedNodes.forEach((e) => {
-          if (e.nodeType === Node.ELEMENT_NODE) {
-            const r = e;
-            if (r.classList.contains("k-animation-container")) {
-              const a = s.value;
-              a && (a.dataset.featherKSortable === "true" || k(() => {
-                r.querySelectorAll(
+    o.code === "Tab" && (o.preventDefault(), o.stopPropagation(), o.shiftKey ? (t.value?.previousElementSibling).focus() : (t.value?.nextElementSibling).focus());
+  }, S = () => {
+    P = new MutationObserver((o) => {
+      o.forEach((h) => {
+        h.addedNodes.forEach((l) => {
+          if (l.nodeType === Node.ELEMENT_NODE) {
+            const s = l;
+            if (s.classList.contains("k-animation-container")) {
+              const D = t.value;
+              D && (D.dataset.featherKSortable === "true" || B(() => {
+                s.querySelectorAll(
                   ".k-columnmenu-item-wrapper"
-                ).forEach((d) => {
-                  d.textContent?.toLowerCase().includes("sort") && d.remove();
+                ).forEach((N) => {
+                  N.textContent?.toLowerCase().includes("sort") && N.remove();
                 });
-              })), r.addEventListener(
+              })), s.addEventListener(
                 "keydown",
-                g
-              ), k(() => {
-                const i = () => {
-                  const l = Array.from(
-                    r.querySelectorAll(
+                C
+              ), B(() => {
+                const b = () => {
+                  const L = Array.from(
+                    s.querySelectorAll(
                       ".k-animation-container .k-popup .k-column-menu .k-columnmenu-item-wrapper .k-columnmenu-item"
                     )
                   );
-                  if (l.length === 1)
-                    l[0].focus(), l[0].click(), i.attempts = 0;
-                  else if (l.length > 1) {
-                    i.attempts = 0;
+                  if (L.length === 1)
+                    L[0].focus(), L[0].click(), b.attempts = 0;
+                  else if (L.length > 1) {
+                    b.attempts = 0;
                     return;
                   } else
-                    i.attempts === void 0 && (i.attempts = 0), i.attempts++ < 3 && setTimeout(i, 200);
+                    b.attempts === void 0 && (b.attempts = 0), b.attempts++ < 3 && setTimeout(b, 200);
                 };
-                i();
+                b();
               });
             }
-            r.querySelectorAll(
+            s.querySelectorAll(
               ".k-animation-container"
-            ).forEach((a) => {
-              a.addEventListener(
+            ).forEach((D) => {
+              D.addEventListener(
                 "keydown",
-                g
+                C
               );
             });
           }
-        }), o.removedNodes.forEach((e) => {
-          if (e.nodeType === Node.ELEMENT_NODE) {
-            const r = e;
-            r.classList.contains("k-animation-container") && r.removeEventListener(
+        }), h.removedNodes.forEach((l) => {
+          if (l.nodeType === Node.ELEMENT_NODE) {
+            const s = l;
+            s.classList.contains("k-animation-container") && s.removeEventListener(
               "keydown",
-              g
-            ), r.querySelectorAll(
+              C
+            ), s.querySelectorAll(
               ".k-animation-container"
-            ).forEach((a) => {
-              a.removeEventListener(
+            ).forEach((D) => {
+              D.removeEventListener(
                 "keydown",
-                g
+                C
               );
             });
           }
         });
       });
-    }), u.observe(document.body, {
+    }), P.observe(document.body, {
       childList: !0,
       subtree: !0
     });
-  }, D = (t) => {
-    if (!t.type || !t)
+  }, T = (o) => {
+    if (!o.type || !o)
       return;
-    const o = t.target;
-    if (o) {
-      if (t.code === "Escape") {
-        const e = document.activeElement?.closest(".k-table-row[data-grid-row-index]");
-        if (e) {
-          t.preventDefault(), t.stopPropagation();
+    const h = o.target;
+    if (h) {
+      if (o.code === "Escape") {
+        const l = document.activeElement?.closest(".k-table-row[data-grid-row-index]");
+        if (l) {
+          o.preventDefault(), o.stopPropagation();
           try {
             Array.from(
-              m?.value.$el.querySelectorAll(
+              e?.value.$el.querySelectorAll(
                 ".k-table-row[data-grid-row-index]"
               )
-            ).forEach((n) => n.setAttribute("tabindex", "-1"));
+            ).forEach((d) => d.setAttribute("tabindex", "-1"));
           } catch {
           }
-          e.setAttribute("tabindex", "0"), e.focus();
+          l.setAttribute("tabindex", "0"), l.focus();
           return;
         }
       }
@@ -136,142 +137,142 @@ const O = (m) => {
         "ArrowUp",
         "Enter",
         "Space"
-      ].includes(t.code)) {
-        if (t.preventDefault(), o.classList.contains("k-grid-header-menu") && o.classList.contains("k-grid-column-menu")) {
-          s.value = o;
+      ].includes(o.code)) {
+        if (o.preventDefault(), h.classList.contains("k-grid-header-menu") && h.classList.contains("k-grid-column-menu")) {
+          t.value = h;
           return;
         }
-        const e = o.closest(
+        const l = h.closest(
           ".k-table-row[data-grid-row-index]"
         );
-        if (e) {
-          if (["ArrowDown", "ArrowUp"].includes(t.code)) {
-            const r = (a, i) => {
-              let l = i === "next" ? a.nextElementSibling : a.previousElementSibling;
-              for (; l; ) {
-                const d = l;
+        if (l) {
+          if (["ArrowDown", "ArrowUp"].includes(o.code)) {
+            const s = (D, b) => {
+              let L = b === "next" ? D.nextElementSibling : D.previousElementSibling;
+              for (; L; ) {
+                const N = L;
                 try {
-                  if (d.hasAttribute && d.classList.contains("k-table-row"))
-                    return d;
+                  if (N.hasAttribute && N.classList.contains("k-table-row"))
+                    return N;
                 } catch {
                 }
-                l = i === "next" ? l.nextElementSibling : l.previousElementSibling;
+                L = b === "next" ? L.nextElementSibling : L.previousElementSibling;
               }
               return null;
-            }, n = t.code === "ArrowDown" ? r(e, "next") : r(e, "previous");
-            n && (e.setAttribute("tabindex", "-1"), n.setAttribute("tabindex", "0"), n.focus());
+            }, d = o.code === "ArrowDown" ? s(l, "next") : s(l, "previous");
+            d && (l.setAttribute("tabindex", "-1"), d.setAttribute("tabindex", "0"), d.focus());
             return;
           }
-          if (["ArrowLeft", "ArrowRight"].includes(t.code)) {
-            t.preventDefault();
-            const r = e.querySelectorAll(
-              w
+          if (["ArrowLeft", "ArrowRight"].includes(o.code)) {
+            o.preventDefault();
+            const s = l.querySelectorAll(
+              H
             );
-            if (r.length === 0) return;
-            let n = Array.from(r).findIndex(
-              (a) => a === document.activeElement
+            if (s.length === 0) return;
+            let d = Array.from(s).findIndex(
+              (D) => D === document.activeElement
             );
-            if (n === -1 && document.activeElement === e) {
-              r[0].focus();
+            if (d === -1 && document.activeElement === l) {
+              s[0].focus();
               return;
             }
-            t.code === "ArrowRight" ? n = n === r.length - 1 ? 0 : n + 1 : t.code === "ArrowLeft" && (n = n === r.length - 1 ? n - 1 : r.length - 1), r[n].focus();
+            o.code === "ArrowRight" ? d = d === s.length - 1 ? 0 : d + 1 : o.code === "ArrowLeft" && (d = d === s.length - 1 ? d - 1 : s.length - 1), s[d].focus();
             return;
           }
         }
       }
     }
-  }, q = () => {
-    k(() => {
-      const t = m.value.$el.closest(".k-grid");
-      t && t.classList.add("fk-grid");
+  }, A = () => {
+    B(() => {
+      const o = e.value.$el.closest(".k-grid");
+      o && o.classList.add("fk-grid");
     });
-  }, T = () => {
-    if (!f)
+  }, E = () => {
+    if (!F)
       try {
-        const t = () => {
+        const o = () => {
           try {
-            const r = Array.from(
-              m.value.$el.querySelectorAll(
+            const s = Array.from(
+              e.value.$el.querySelectorAll(
                 ".k-table-row[data-grid-row-index]"
               )
             );
-            if (!r || r.length === 0 || r.filter(
-              (i) => i.getAttribute("tabindex") === "0"
+            if (!s || s.length === 0 || s.filter(
+              (b) => b.getAttribute("tabindex") === "0"
             ).length === 1) return;
-            const a = r.find(
-              (i) => i === document.activeElement || i.contains(document.activeElement)
+            const D = s.find(
+              (b) => b === document.activeElement || b.contains(document.activeElement)
             );
-            if (r.forEach((i) => i.setAttribute("tabindex", "-1")), a) {
-              a.setAttribute("tabindex", "0");
+            if (s.forEach((b) => b.setAttribute("tabindex", "-1")), D) {
+              D.setAttribute("tabindex", "0");
               return;
             }
-            r[0].setAttribute("tabindex", "0");
-          } catch (r) {
-            console.error("ensureSingleTabindex error:", r);
+            s[0].setAttribute("tabindex", "0");
+          } catch (s) {
+            console.error("ensureSingleTabindex error:", s);
           }
-        }, o = Array.from(
-          m.value.$el.querySelectorAll(
+        }, h = Array.from(
+          e.value.$el.querySelectorAll(
             ".k-table-row[data-grid-row-index]"
           )
         );
-        o.length > 0 && o.forEach((r, n) => {
-          r.setAttribute("tabindex", n === 0 ? "0" : "-1");
+        h.length > 0 && h.forEach((s, d) => {
+          s.setAttribute("tabindex", d === 0 ? "0" : "-1");
         });
-        const e = m.value.$el.querySelector(".k-table-tbody");
-        e && (f = new MutationObserver(() => {
-          t();
-        }), f.observe(e, { childList: !0, subtree: !0 }));
-      } catch (t) {
-        console.error("Error setting up row navigation:", t);
+        const l = e.value.$el.querySelector(".k-table-tbody");
+        l && (F = new MutationObserver(() => {
+          o();
+        }), F.observe(l, { childList: !0, subtree: !0 }));
+      } catch (o) {
+        console.error("Error setting up row navigation:", o);
       }
   }, I = () => {
-    k(() => {
-      const o = document.querySelectorAll(".k-grid-header .k-grid-header-menu.k-grid-column-menu");
-      o && o.forEach((e) => {
-        e.setAttribute("role", "button"), e.addEventListener(
+    B(() => {
+      const h = document.querySelectorAll(".k-grid-header .k-grid-header-menu.k-grid-column-menu");
+      h && h.forEach((l) => {
+        l.setAttribute("role", "button"), l.addEventListener(
           "keydown",
-          h
+          v
         );
-      }), L(), C();
+      }), S(), g();
     });
-  }, E = () => {
-    const o = document.querySelectorAll(".k-grid-header .k-grid-header-menu.k-grid-column-menu");
-    o && o.forEach((e) => {
-      e.removeEventListener(
+  }, O = () => {
+    const h = document.querySelectorAll(".k-grid-header .k-grid-header-menu.k-grid-column-menu");
+    h && h.forEach((l) => {
+      l.removeEventListener(
         "keydown",
-        h
+        v
       );
-    }), u && (u.disconnect(), u = null), f && (f.disconnect(), f = null), b.forEach((e) => e()), b.length = 0;
-  }, C = () => {
+    }), P && (P.disconnect(), P = null), F && (F.disconnect(), F = null), U.forEach((l) => l()), U.length = 0;
+  }, g = () => {
     document.querySelectorAll(
       ".k-grid-header .k-table-thead th"
-    ).forEach((e, r) => {
-      const n = e.querySelector(
+    ).forEach((l, s) => {
+      const d = l.querySelector(
         ".k-grid-header-menu.k-grid-column-menu"
       );
-      if (!n) return;
-      const a = A();
-      if (a && a[r]) {
-        const c = a[r].field ?? "";
-        e.setAttribute("data-feather-k-field", c), e.setAttribute(
+      if (!d) return;
+      const D = m();
+      if (D && D[s]) {
+        const r = D[s].field ?? "";
+        l.setAttribute("data-feather-k-field", r), l.setAttribute(
           "data-feather-k-filterable",
-          a[r].filterable === !1 ? "false" : "true"
-        ), e.setAttribute(
+          D[s].filterable === !1 ? "false" : "true"
+        ), l.setAttribute(
           "data-feather-k-sortable",
-          a[r].sortable === !1 ? "false" : "true"
+          D[s].sortable === !1 ? "false" : "true"
         );
       }
-      const i = e.dataset.featherKFilterable !== "false", l = e.dataset.featherKSortable !== "false";
-      n.setAttribute("tabindex", "-1"), i || l ? e.style.cursor = "pointer" : e.style.cursor = "default", i ? (e.setAttribute("tabindex", "0"), e.setAttribute("role", "button"), e.setAttribute("aria-haspopup", "menu")) : (e.setAttribute("tabindex", "0"), e.setAttribute("role", "columnheader"), e.removeAttribute("aria-haspopup"));
-      const d = (c) => {
-        c.target?.closest(".k-column-resizer") || (s.value = e, n.click());
-      }, v = (c) => {
-        if (i)
-          s.value = e, c.preventDefault(), c.stopPropagation(), d(c);
-        else if (l) {
-          s.value = e;
-          const y = new KeyboardEvent("keydown", {
+      const b = l.dataset.featherKFilterable !== "false", L = l.dataset.featherKSortable !== "false";
+      d.setAttribute("tabindex", "-1"), b || L ? l.style.cursor = "pointer" : l.style.cursor = "default", b ? (l.setAttribute("tabindex", "0"), l.setAttribute("role", "button"), l.setAttribute("aria-haspopup", "menu")) : (l.setAttribute("tabindex", "0"), l.setAttribute("role", "columnheader"), l.removeAttribute("aria-haspopup"));
+      const N = (r) => {
+        r.target?.closest(".k-column-resizer") || (t.value = l, d.click());
+      }, a = (r) => {
+        if (b)
+          t.value = l, r.preventDefault(), r.stopPropagation(), N(r);
+        else if (L) {
+          t.value = l;
+          const u = new KeyboardEvent("keydown", {
             key: "Enter",
             code: "Enter",
             keyCode: 13,
@@ -279,101 +280,1012 @@ const O = (m) => {
             bubbles: !0,
             cancelable: !0
           });
-          e.dispatchEvent(y);
+          l.dispatchEvent(u);
         }
       };
-      e.addEventListener("click", v), b.push(() => {
-        e.removeEventListener("click", v);
+      l.addEventListener("click", a), U.push(() => {
+        l.removeEventListener("click", a);
       });
-      const S = (c) => {
-        if ((c.code === "Enter" || c.code === "Space") && (i || l)) {
-          if (s.value = e, s.value.focus(), i)
-            c.preventDefault(), c.stopPropagation(), d(c);
-          else if (l) {
-            const y = e.querySelector(".k-link");
-            y && y.click();
+      const y = (r) => {
+        if ((r.code === "Enter" || r.code === "Space") && (b || L)) {
+          if (t.value = l, t.value.focus(), b)
+            r.preventDefault(), r.stopPropagation(), N(r);
+          else if (L) {
+            const u = l.querySelector(".k-link");
+            u && u.click();
           }
         }
       };
-      e.addEventListener("keydown", S, !0), b.push(() => {
-        e.removeEventListener("keydown", S, !0);
+      l.addEventListener("keydown", y, !0), U.push(() => {
+        l.removeEventListener("keydown", y, !0);
       });
     });
-    const o = document.querySelector(".k-grid-header .k-table-thead");
-    if (o) {
-      const e = (r) => {
-        const n = r.target.closest("th");
-        n && (r.code === "Enter" || r.code === "Space") && n.dataset.featherKFilterable === "false" && n.dataset.featherKSortable === "false" && (r.preventDefault(), r.stopImmediatePropagation());
+    const h = document.querySelector(".k-grid-header .k-table-thead");
+    if (h) {
+      const l = (s) => {
+        const d = s.target.closest("th");
+        d && (s.code === "Enter" || s.code === "Space") && d.dataset.featherKFilterable === "false" && d.dataset.featherKSortable === "false" && (s.preventDefault(), s.stopImmediatePropagation());
       };
-      o.addEventListener(
+      h.addEventListener(
         "keydown",
-        e,
+        l,
         !0
         // NOTE: capture phase
-      ), b.push(() => {
-        o.removeEventListener(
+      ), U.push(() => {
+        h.removeEventListener(
           "keydown",
-          e,
+          l,
           !0
         );
       });
     }
-  }, K = function(t, o) {
-    const e = t?.event.event.target, r = A();
-    if (!e || !r) return;
-    const n = e.classList.contains("k-link"), a = e.classList.contains("k-columnmenu-item"), i = r.find((l) => l.field === t.event.field)?.sortable && !0;
-    if (!n) {
-      if (a && !i) {
-        (t.event.sort && void 0)?.filter(
-          (d) => d.field !== t.event.field
+  }, k = function(o, h) {
+    const l = o?.event.event.target, s = m();
+    if (!l || !s) return;
+    const d = l.classList.contains("k-link"), D = l.classList.contains("k-columnmenu-item"), b = s.find((L) => L.field === o.event.field)?.sortable && !0;
+    if (!d) {
+      if (D && !b) {
+        (o.event.sort && void 0)?.filter(
+          (N) => N.field !== o.event.field
         );
         return;
       }
-      typeof o == "function" && k(() => {
-        s.value && s.value.focus(), o(t);
+      typeof h == "function" && B(() => {
+        t.value && t.value.focus(), h(o);
       });
     }
-  }, M = () => {
-    if (!p)
+  }, q = () => {
+    if (!c)
       try {
-        q(), T(), I(), p = !0;
-      } catch (t) {
-        console.error("initA11y failed:", t), E();
+        A(), E(), I(), c = !0;
+      } catch (o) {
+        console.error("initA11y failed:", o), O();
       }
   };
-  return N(() => {
-    E();
+  return be(() => {
+    O();
   }), {
-    activeFilterButton: s,
-    handleGridKeyDown: D,
-    handleSortChange: K,
-    initA11y: M
+    activeFilterButton: t,
+    handleGridKeyDown: T,
+    handleSortChange: k,
+    initA11y: q
   };
 };
-function B(m = {}) {
-  const { activeByDefault: s = !1, autoActivateDelay: p = 0 } = m, u = x(s);
-  function f() {
-    u.value = !0;
+function Re(e) {
+  const t = G(""), c = G(void 0), P = G(!!e.debug), F = G(e.dateFormat ?? "mm/dd/yyyy"), U = ["ArrowUp", "ArrowDown"], H = ["ArrowLeft", "ArrowRight"], m = x(() => (t.value ?? "").replace(/\D/g, "")), v = (a) => a <= 2 ? "mm" : a <= 5 ? "dd" : m.value.length <= 10 ? "yyyy" : "mm", C = x(() => {
+    const a = t.value && t.value.substring(0, 2).replace(/\D/g, "0") || "0";
+    return parseInt(a).toString().padStart(2, "0");
+  }), S = x(() => {
+    const a = t.value && t.value.substring(3, 5).replace(/\D/g, "0") || "0";
+    return parseInt(a).toString().padStart(2, "0");
+  }), T = x(() => {
+    const a = t.value && t.value.substring(6, 10).replace(/\D/g, "0") || "0";
+    return parseInt(a).toString().padStart(4, "0");
+  }), A = (a) => {
+    if (m.value.length === 0) {
+      e.onChange({ value: null, event: a });
+      return;
+    }
+    if (m.value.length < 8) {
+      e.onChange({ value: null, event: a });
+      return;
+    }
+    if ((t.value ?? "").length === 10 && m.value.length === 8) {
+      const [y, r, u] = t.value.split("/"), f = parseInt(y), w = parseInt(r), M = parseInt(u);
+      if (k(M, f, w)) {
+        const j = new Date(M, f - 1, w);
+        E(j) ? e.onChange({ value: j, event: a }) : e.onChange({ value: null, event: a });
+      } else
+        e.onChange({ value: null, event: a });
+    }
+  }, E = (a) => {
+    const y = e.minDate?.value ?? void 0, r = e.maxDate?.value ?? void 0;
+    return !(y && a < y || r && a > r);
+  }, I = x(() => {
+    if ((t.value ?? "").length === 10 && m.value.length === 8) {
+      const [a, y, r] = (t.value ?? "").split("/"), u = parseInt(a), f = parseInt(y), w = parseInt(r);
+      if (k(w, u, f))
+        return new Date(w, u - 1, f);
+    }
+    return null;
+  }), O = x(() => (t.value ?? "").length === 10 && m.value.length === 8), g = (a, y) => new Date(a, y, 0).getDate(), k = (a, y, r) => y >= 1 && y <= 12 && a >= 1900 && r >= 1 && r <= g(a, y), q = (a) => {
+    t.value = a.value;
+    const y = a.event?.target;
+    c.value = y?.selectionStart ?? 0, A(a);
+  }, o = (a) => {
+    c.value = a.target.selectionStart ?? 0;
+  }, h = (a, y, r) => {
+    const u = y?.selectionStart ?? c.value ?? 0;
+    c.value = u;
+    let f = parseInt(C.value), w = parseInt(S.value), M = parseInt(T.value);
+    if (!(m.value.length >= 8) || !k(M, f, w)) {
+      const i = /* @__PURE__ */ new Date();
+      f = i.getMonth() + 1, w = i.getDate(), M = i.getFullYear(), t.value = `${String(f).padStart(2, "0")}/${String(w).padStart(
+        2,
+        "0"
+      )}/${String(M)}`;
+      const p = new Date(M, f - 1, w);
+      e.onChange({ value: E(p) ? p : null, event: r }), B(() => {
+        requestAnimationFrame(() => {
+          const $ = document.getElementById(
+            e.id
+          ), R = c.value ?? 0;
+          $ && ($.focus(), $.setSelectionRange(R, R));
+        });
+      });
+      return;
+    }
+    const V = v(u);
+    if (V === "mm")
+      f = a === "ArrowUp" ? f < 12 ? f + 1 : 1 : f > 1 ? f - 1 : 12;
+    else if (V === "dd") {
+      const i = new Date(M, f, 0).getDate();
+      w = a === "ArrowUp" ? w < i ? w + 1 : 1 : w > 1 ? w - 1 : i;
+    } else V === "yyyy" && (M = a === "ArrowUp" ? M + 1 : Math.max(1, M - 1));
+    t.value = `${String(f).padStart(2, "0")}/${String(w).padStart(
+      2,
+      "0"
+    )}/${String(M)}`;
+    const [Y, Z, X] = t.value.split("/"), n = new Date(
+      parseInt(X),
+      parseInt(Y) - 1,
+      parseInt(Z)
+    );
+    n.toString() !== "Invalid Date" && parseInt(X) >= 1e3 ? e.onChange({
+      value: E(n) ? n : null,
+      event: r
+    }) : e.onChange({ value: null, event: r }), B(() => {
+      requestAnimationFrame(() => {
+        const i = document.getElementById(
+          e.id
+        ), p = c.value ?? 0;
+        i && (i.focus(), i.setSelectionRange(p, p));
+      });
+    });
+  }, l = (a) => {
+    if (a.code === "Space" || a.key === " ") {
+      e.onShowCalendar(a);
+      return;
+    }
+    if (U.includes(a.key)) {
+      a.preventDefault();
+      const y = a.target;
+      h(a.key, y, a);
+    }
+  }, s = (a) => {
+    a.preventDefault();
+    const y = a.deltaY < 0 ? "ArrowUp" : "ArrowDown";
+    h(y, a.target, a);
+  }, d = (a) => {
+    const y = a.target;
+    if (H.includes(a.key)) {
+      c.value = y?.selectionStart ?? 0;
+      return;
+    }
+    U.includes(a.key) && (a.preventDefault(), c.value = y?.selectionStart ?? 0);
+  };
+  e.externalValue && te(
+    e.externalValue,
+    (a) => {
+      if (a) {
+        const y = new Date(a);
+        if (y.toString() !== "Invalid Date") {
+          const r = (y.getMonth() + 1).toString().padStart(2, "0"), u = y.getDate().toString().padStart(2, "0"), f = y.getFullYear().toString();
+          t.value = `${r}/${u}/${f}`;
+          return;
+        }
+      }
+    },
+    { immediate: !0 }
+  );
+  const D = x(() => [
+    ["Date", `${C.value} / ${S.value} / ${T.value}`],
+    ["Digits only", m.value],
+    [
+      "min",
+      e.minDate?.value.toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit"
+      }) ?? null
+    ],
+    [
+      "max",
+      e.maxDate?.value.toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit"
+      }) ?? null
+    ]
+  ]), b = x(() => {
+    if (!O.value) return !0;
+    const a = I.value;
+    return a ? E(a) : !1;
+  }), L = x(() => {
+    if (b.value) return "";
+    if (O.value && !I.value)
+      return `Must be in ${F.value} format.`;
+    const a = e.minDate?.value ? e.minDate.value.toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit"
+    }) : null, y = e.maxDate?.value ? e.maxDate.value.toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit"
+    }) : null;
+    return a && y ? `Must be between ${a} and ${y}.` : a ? `Must be on or after ${a}.` : y ? `Must be on or before ${y}.` : "";
+  }), N = () => {
+    B(() => {
+      const a = document.getElementById(
+        e.id
+      );
+      if (!a) {
+        console.warn(`ID (#${e.id}) not found for styling.`);
+        return;
+      }
+      const y = a.closest(".k-datepicker");
+      if (y)
+        y.classList.add("fk-datepicker");
+      else {
+        console.warn(`.k-datepicker parent not found for #${e.id} styling.`);
+        return;
+      }
+    });
+  };
+  return ge(() => {
+    N();
+  }), {
+    raw: t,
+    cursorPos: c,
+    debugEnabled: P,
+    debugLines: D,
+    placeholder: F,
+    isValid: b,
+    validationMessage: L,
+    digitsOnly: m,
+    month: W(C),
+    day: W(S),
+    year: W(T),
+    datePart: v,
+    handleChange: q,
+    handleKeyDown: l,
+    handleWheel: s,
+    handleKeyUp: d,
+    handleClick: o
+  };
+}
+function Ue(e) {
+  const t = G(""), c = G(void 0), P = G(!!e.debug), F = G(!1), U = x(() => (t.value ?? "").replace(/\D/g, "")), H = (n, i) => new Date(n, i, 0).getDate(), m = (n, i, p) => i >= 1 && i <= 12 && n >= 1e3 && p >= 1 && p <= H(n, i), v = (n) => {
+    if (!n) return null;
+    const i = e.min ?? /* @__PURE__ */ new Date(-864e13), p = e.max ?? /* @__PURE__ */ new Date(864e13);
+    return n < i || n > p ? null : n;
+  }, C = (n, i) => e.allowReverse ?? !1 ? !0 : n <= i, S = x(() => (t.value?.length ?? 0) >= 23 && U.value.length >= 16), T = (n) => {
+    if ((n ?? "").length < 23 || U.value.length < 16)
+      return { start: null, end: null };
+    const i = n.substring(0, 10), p = n.substring(13, 23), [$, R, z] = i.split("/").map((ee) => parseInt(ee || "0", 10)), [ie, re, ae] = p.split("/").map((ee) => parseInt(ee || "0", 10)), oe = new Date(z, $ - 1, R), se = new Date(ae, ie - 1, re), de = m(z, $, R) && oe.toString() !== "Invalid Date", fe = m(ae, ie, re) && se.toString() !== "Invalid Date";
+    return { start: de ? oe : null, end: fe ? se : null };
+  }, A = e.externalValid ?? G(void 0), E = x(() => T(t.value)), I = x(() => {
+    const n = v(E.value.start), i = v(E.value.end);
+    return { start: n, end: i };
+  }), O = x(() => {
+    if (!S.value) return;
+    const n = I.value.start, i = I.value.end;
+    if (!n || !i) return;
+    const p = (R) => Date.UTC(R.getFullYear(), R.getMonth(), R.getDate()), $ = Math.abs(p(i) - p(n));
+    return Math.round($ / 864e5);
+  }), g = x(() => {
+    const { start: n, end: i } = E.value;
+    if (!S.value) return;
+    if (!n || !i || !I.value.start || !I.value.end) return !1;
+    const p = I.value.start, $ = I.value.end;
+    return !(!C(p, $) || typeof e.maxSpanDays == "number" && O.value !== void 0 && O.value > e.maxSpanDays);
+  }), k = x(() => {
+    const { start: n, end: i } = E.value;
+    if (!S.value) return "incomplete";
+    if (!n || !i) return "invalid-date";
+    if (!I.value.start || !I.value.end) return "out-of-bounds";
+    const p = I.value.start, $ = I.value.end;
+    return C(p, $) ? typeof e.maxSpanDays == "number" && O.value !== void 0 && O.value > e.maxSpanDays ? "span-exceeds-limit" : "valid" : "reversed-range";
+  }), q = x(() => {
+    switch (k.value) {
+      case "invalid-date":
+        return "Enter valid start and end dates.";
+      case "out-of-bounds":
+        return "Must be within the allowed range.";
+      case "reversed-range":
+        return "Must be in sequential order.";
+      case "span-exceeds-limit":
+        return typeof e.maxSpanDays == "number" ? `Exceeds maximum of ${e.maxSpanDays} days.` : "Exceeds maximum allowed span.";
+      case "valid":
+      default:
+        return "";
+    }
+  });
+  te(
+    g,
+    (n) => {
+      (e.manageValid ?? !0) && (A.value = n);
+    },
+    { immediate: !0 }
+  );
+  const o = ["ArrowUp", "ArrowDown"], h = ["ArrowLeft", "ArrowRight"], l = (n, i) => String(n).padStart(i, "0"), s = (n) => `${l(n.getMonth() + 1, 2)}/${l(n.getDate(), 2)}/${l(
+    n.getFullYear(),
+    4
+  )}`, d = (n) => n <= 2 ? { side: "start", part: "mm" } : n <= 5 ? { side: "start", part: (n <= 3, "dd") } : n <= 11 ? { side: "start", part: "yyyy" } : n <= 15 ? { side: "end", part: "mm" } : n <= 18 ? { side: "end", part: "dd" } : { side: "end", part: "yyyy" }, D = (n, i, p) => {
+    const $ = i?.selectionStart ?? c.value ?? 0;
+    c.value = $;
+    const { start: R, end: z } = T(t.value);
+    if (!R && !z) {
+      const K = /* @__PURE__ */ new Date(), Q = s(K);
+      t.value = `${Q} - ${Q}`, e.onChange({ value: { start: K, end: K }, event: p }), B(() => {
+        requestAnimationFrame(() => {
+          const _ = document.getElementById(
+            e.id
+          ), J = c.value ?? 0;
+          _ && (_.focus(), _.setSelectionRange(J, J));
+        });
+      });
+      return;
+    }
+    const ie = /* @__PURE__ */ new Date(), re = d($);
+    let ae = R ? new Date(R) : new Date(ie), oe = z ? new Date(z) : new Date(ie);
+    const se = (K, Q) => {
+      if (Q === "mm") {
+        const _ = K.getMonth() + 1, J = n === "ArrowUp" ? _ < 12 ? _ + 1 : 1 : _ > 1 ? _ - 1 : 12;
+        K.setMonth(J - 1);
+        const ce = H(K.getFullYear(), J);
+        K.getDate() > ce && K.setDate(ce);
+      } else if (Q === "dd") {
+        const _ = H(K.getFullYear(), K.getMonth() + 1), J = K.getDate(), ce = n === "ArrowUp" ? J < _ ? J + 1 : 1 : J > 1 ? J - 1 : _;
+        K.setDate(ce);
+      } else if (Q === "yyyy") {
+        const _ = K.getFullYear();
+        K.setFullYear(n === "ArrowUp" ? _ + 1 : Math.max(1, _ - 1));
+        const J = H(K.getFullYear(), K.getMonth() + 1);
+        K.getDate() > J && K.setDate(J);
+      }
+    };
+    re.side === "start" ? se(ae, re.part) : se(oe, re.part);
+    const de = s(ae), fe = s(oe);
+    t.value = `${de} - ${fe}`;
+    const ee = v(ae), me = v(oe);
+    ee && me && C(ee, me) ? e.onChange({ value: { start: ee, end: me }, event: p }) : e.onChange({ value: null, event: p }), B(() => {
+      requestAnimationFrame(() => {
+        const K = document.getElementById(
+          e.id
+        ), Q = c.value ?? 0;
+        K && (K.focus(), K.setSelectionRange(Q, Q));
+      });
+    });
+  }, b = (n) => {
+    const { start: i, end: p } = T(t.value);
+    if (!i || !p) {
+      e.onChange({ value: null, event: n });
+      return;
+    }
+    const $ = v(i), R = v(p);
+    if (!$ || !R) {
+      e.onChange({ value: null, event: n });
+      return;
+    }
+    if (!C($, R)) {
+      e.onChange({ value: null, event: n });
+      return;
+    }
+    e.onChange({ value: { start: $, end: R }, event: n });
+  }, L = (n) => {
+    t.value = n.value;
+    const i = n.event?.target;
+    c.value = i?.selectionStart ?? 0, b(n);
+  }, N = (n) => {
+    c.value = n.target.selectionStart ?? 0;
+  }, a = (n) => {
+    if (n.code === "Space" || n.key === " ") {
+      n.preventDefault(), e.onShowCalendar(n);
+      return;
+    }
+    if (o.includes(n.key)) {
+      n.preventDefault();
+      const i = n.target;
+      D(n.key, i, n);
+    }
+  }, y = (n) => {
+    n.preventDefault();
+    const i = n.deltaY < 0 ? "ArrowUp" : "ArrowDown";
+    D(i, n.target, n);
+  }, r = (n) => {
+    if (h.includes(n.key) || o.includes(n.key)) {
+      n.preventDefault();
+      const i = n.target;
+      c.value = i?.selectionStart ?? 0;
+    }
+  };
+  e.externalValue && te(
+    e.externalValue,
+    (n) => {
+      const i = n?.start ?? null, p = n?.end ?? null;
+      if (i && p) {
+        if (t.value = `${s(i)} - ${s(p)}`, e.isOpen?.value && F.value && e.onRequestClose) {
+          const $ = typeof e.closeDelay == "number" ? e.closeDelay : e.closeDelay?.value ?? 0;
+          setTimeout(() => {
+            e.onRequestClose?.(), F.value = !1;
+          }, $);
+        }
+        return;
+      }
+    },
+    { immediate: !0 }
+  );
+  const u = x(
+    () => t.value && t.value.substring(0, 2).replace(/\D/g, "0") || "0"
+  ), f = x(
+    () => t.value && t.value.substring(3, 5).replace(/\D/g, "0") || "0"
+  ), w = x(
+    () => t.value && t.value.substring(6, 10).replace(/\D/g, "0") || "0"
+  ), M = x(
+    () => t.value && t.value.substring(13, 15).replace(/\D/g, "0") || "0"
+  ), j = x(
+    () => t.value && t.value.substring(16, 18).replace(/\D/g, "0") || "0"
+  ), V = x(
+    () => t.value && t.value.substring(19, 23).replace(/\D/g, "0") || "0"
+  ), Y = x(() => {
+    const { start: n, end: i } = T(t.value);
+    return [
+      {
+        label: "Raw",
+        value: t.value
+      },
+      {
+        label: "Start",
+        value: `${String(u.value).padStart(2, "0")} / ${String(
+          f.value
+        ).padStart(2, "0")} / ${String(w.value).padStart(4, "0")}`
+      },
+      {
+        label: "End",
+        value: `${String(M.value).padStart(2, "0")} / ${String(
+          j.value
+        ).padStart(2, "0")} / ${String(V.value).padStart(4, "0")}`
+      },
+      { label: "Digits only", value: U.value },
+      { label: "Mask complete", value: `${S.value}` },
+      {
+        label: "Parsed",
+        value: `${n ? n.toDateString() : "-"} | ${i ? i.toDateString() : "-"}`
+      },
+      {
+        label: "Valid (managed)",
+        value: `${A.value ?? "-"}`
+      },
+      { label: "Span (days)", value: `${O.value ?? "-"}` },
+      {
+        label: "Reason",
+        value: `${k.value ?? "-"}`
+      },
+      {
+        label: "Cursor in",
+        value: `${c.value ?? "-"} (${(() => {
+          const p = c.value ?? 0, $ = d(p);
+          return `${$.side}.${$.part}`;
+        })()})`
+      }
+    ];
+  }), Z = () => {
+    B(() => {
+      const n = document.getElementById(e.id);
+      if (!n) {
+        console.warn(`#${e.id} not found for styling.`);
+        return;
+      }
+      const i = n.closest("div");
+      i ? i.classList.add("fk-daterangepicker") : console.warn(`Parent div of #${e.id} not found for styling.`);
+    });
+  };
+  ge(() => {
+    Z();
+  });
+  const X = () => {
+    B(() => {
+      try {
+        const n = Array.from(
+          document.querySelectorAll(".k-animation-container")
+        );
+        if (!n.length) return;
+        const p = [...n].reverse().find((z) => z.querySelector(".k-calendar"))?.querySelector(
+          ".k-calendar"
+        );
+        if (!p) return;
+        const $ = p.querySelectorAll(
+          ".k-calendar-table"
+        );
+        let R = !1;
+        $.forEach((z) => {
+          z.tabIndex === 0 && (R ? z.tabIndex = -1 : R = !0);
+        });
+      } catch (n) {
+        console.warn(n);
+      }
+    });
+  };
+  return e.isOpen && te(
+    e.isOpen,
+    (n) => {
+      n && setTimeout(() => X(), 0);
+    },
+    { immediate: !1 }
+  ), {
+    raw: t,
+    cursorPos: c,
+    debugEnabled: P,
+    debugLines: Y,
+    digitsOnly: U,
+    valid: A,
+    validComputed: W(g),
+    reason: W(k),
+    validationMessage: W(q),
+    spanDays: W(O),
+    month1: W(u),
+    day1: W(f),
+    year1: W(w),
+    month2: W(M),
+    day2: W(j),
+    year2: W(V),
+    handleChange: L,
+    handleKeyDown: a,
+    handleWheel: y,
+    handleKeyUp: r,
+    handleClick: N,
+    onCalendarChange: () => {
+      F.value = !0;
+    }
+  };
+}
+function Oe(e) {
+  const t = G(""), c = G(void 0), P = G(!!e.debug), F = G(e.timeFormat ?? "hh:mm AM"), U = ["ArrowUp", "ArrowDown"], H = ["ArrowLeft", "ArrowRight"], m = x(() => (t.value ?? "").replace(/\D/g, "")), v = {
+    H: /[0-9]/,
+    h: /[0-9]/,
+    M: /[0-9]/,
+    m: /[0-9]/,
+    A: /[AaPp]/,
+    a: /[Mm]/
+  }, C = (r) => r <= 2 ? "hh" : r <= 5 ? "mm" : "ampm", S = x(() => {
+    const r = t.value && t.value.substring(0, 2).replace(/\D/g, "0") || "0", u = parseInt(r);
+    return Math.min(Math.max(u, 0), 23);
+  }), T = x(() => {
+    const r = t.value && t.value.substring(3, 5).replace(/\D/g, "0") || "0", u = parseInt(r);
+    return Math.min(Math.max(u, 0), 59);
+  }), A = x(() => (t.value?.substring(6, 8) || "AM").toUpperCase().startsWith("P") ? "PM" : "AM"), E = x(
+    () => /^(\d{2}):(\d{2})\s([AP]M)$/i.test(t.value ?? "")
+  ), I = (r, u, f) => {
+    let w = r % 12;
+    return w === 0 && (w = 12), `${String(w).padStart(2, "0")}:${String(u).padStart(
+      2,
+      "0"
+    )} ${f}`;
+  }, O = (r) => {
+    const u = r.match(/^(\d{2}):(\d{2})\s([AP]M)$/i);
+    if (!u) return null;
+    const f = parseInt(u[1]), w = parseInt(u[2]), M = u[3].toUpperCase();
+    if (f < 1 || f > 12 || w < 0 || w > 59) return null;
+    let j = f % 12;
+    M === "PM" && (j += 12);
+    const V = /* @__PURE__ */ new Date();
+    return V.setSeconds(0, 0), V.setHours(j), V.setMinutes(w), V;
+  }, g = (r) => {
+    if (m.value.length === 0) {
+      e.onChange({ value: null, event: r });
+      return;
+    }
+    if (!E.value) {
+      e.onChange({ value: null, event: r });
+      return;
+    }
+    const u = O(t.value);
+    u && q(u) ? e.onChange({ value: u, event: r }) : e.onChange({ value: null, event: r });
+  }, k = (r) => r.getHours() * 60 + r.getMinutes(), q = (r) => {
+    const u = e.minTime?.value ?? void 0, f = e.maxTime?.value ?? void 0, w = k(r);
+    if (u) {
+      const M = k(u);
+      if (w < M) return !1;
+    }
+    if (f) {
+      const M = k(f);
+      if (w > M) return !1;
+    }
+    return !0;
+  }, o = (r) => {
+    t.value = r.value;
+    const u = r.event?.target;
+    c.value = u?.selectionStart ?? 0;
+    try {
+      const f = c.value ?? 0;
+      if (C(f) === "ampm" && (t.value ?? "").length >= 8) {
+        const w = t.value.charAt(6);
+        /[Aa]/.test(w) ? (t.value = `${t.value.slice(0, 6)}AM${t.value.slice(8)}`, B(() => {
+          requestAnimationFrame(() => {
+            const M = document.getElementById(
+              e.id
+            );
+            M && (M.focus(), M.setSelectionRange(8, 8));
+          });
+        })) : /[Pp]/.test(w) && (t.value = `${t.value.slice(0, 6)}PM${t.value.slice(8)}`, B(() => {
+          requestAnimationFrame(() => {
+            const M = document.getElementById(
+              e.id
+            );
+            M && (M.focus(), M.setSelectionRange(8, 8));
+          });
+        }));
+      }
+    } catch {
+    }
+    g(r);
+  }, h = (r) => {
+    c.value = r.target.selectionStart ?? 0;
+  }, l = (r, u, f) => {
+    const w = u?.selectionStart ?? c.value ?? 0;
+    c.value = w;
+    const M = C(w), j = (t.value ?? "").match(/^(\d{2}):(\d{2})\s([AP]M)$/i);
+    if (!j) {
+      if ((t.value ?? "").length === 0 || m.value.length === 0) {
+        const n = /* @__PURE__ */ new Date(), i = n.getHours(), p = i >= 12 ? "PM" : "AM";
+        t.value = I(i, n.getMinutes(), p);
+        const $ = O(t.value);
+        $ && q($) ? e.onChange({ value: $, event: f }) : e.onChange({ value: null, event: f }), B(() => {
+          requestAnimationFrame(() => {
+            const R = document.getElementById(
+              e.id
+            ), z = c.value ?? 0;
+            R && (R.focus(), R.setSelectionRange(z, z));
+          });
+        });
+      }
+      return;
+    }
+    let V = parseInt(j[1]), Y = parseInt(j[2]), Z = j[3].toUpperCase();
+    if (M === "hh")
+      r === "ArrowUp" ? V = V < 12 ? V + 1 : 1 : V = V > 1 ? V - 1 : 12;
+    else if (M === "mm") {
+      const n = e.minuteStepRef?.value ?? e.minuteStep ?? 1;
+      if (n === 1)
+        r === "ArrowUp" ? Y = Y < 59 ? Y + 1 : 0 : Y = Y > 0 ? Y - 1 : 59;
+      else if (r === "ArrowUp") {
+        const i = Y % n;
+        let p = i === 0 ? Y + n : Y + (n - i);
+        p >= 60 && (p = 0), Y = p;
+      } else {
+        const i = Y % n;
+        let p = i === 0 ? Y - n : Y - i;
+        p < 0 && (p = 60 - n), Y = p;
+      }
+    } else M === "ampm" && (Z = Z === "AM" ? "PM" : "AM");
+    t.value = `${String(V).padStart(2, "0")}:${String(Y).padStart(
+      2,
+      "0"
+    )} ${Z}`;
+    const X = O(t.value);
+    X && q(X) ? e.onChange({ value: X, event: f }) : e.onChange({ value: null, event: f }), B(() => {
+      requestAnimationFrame(() => {
+        const n = document.getElementById(
+          e.id
+        ), i = c.value ?? 0;
+        n && (n.focus(), n.setSelectionRange(i, i));
+      });
+    });
+  }, s = (r) => {
+    if (r.code === "Space" || r.key === " ") {
+      e.onShowPicker(r);
+      return;
+    }
+    if (U.includes(r.key)) {
+      r.preventDefault();
+      const u = r.target;
+      l(r.key, u, r);
+    }
+  }, d = (r) => {
+    r.preventDefault();
+    const u = r.deltaY < 0 ? "ArrowUp" : "ArrowDown";
+    l(u, r.target, r);
+  }, D = (r) => {
+    const u = r.target;
+    if (H.includes(r.key)) {
+      c.value = u?.selectionStart ?? 0;
+      return;
+    }
+    U.includes(r.key) && (r.preventDefault(), c.value = u?.selectionStart ?? 0);
+  };
+  e.externalValue && te(
+    e.externalValue,
+    (r) => {
+      if (r) {
+        const u = new Date(r);
+        if (u.toString() !== "Invalid Date") {
+          const f = u.getHours(), w = f >= 12 ? "PM" : "AM";
+          t.value = I(f, u.getMinutes(), w);
+          return;
+        }
+      }
+    },
+    { immediate: !0 }
+  );
+  const b = x(() => [
+    ["Time", t.value || "--:-- --"],
+    ["Hour (12h)", S.value],
+    ["Minute", T.value],
+    ["Period", A.value],
+    ["Digits only", m.value],
+    [
+      "min",
+      e.minTime?.value.toLocaleTimeString("en-US", {
+        hour: "2-digit",
+        minute: "2-digit"
+      }) ?? null
+    ],
+    [
+      "max",
+      e.maxTime?.value.toLocaleTimeString("en-US", {
+        hour: "2-digit",
+        minute: "2-digit"
+      }) ?? null
+    ]
+  ]), L = x(
+    () => O(t.value) ?? null
+  ), N = x(() => {
+    if (!E.value) return !0;
+    const r = L.value;
+    return r ? q(r) : !1;
+  }), a = x(() => {
+    if (N.value) return "";
+    if (E.value && !L.value)
+      return `Must be in ${F.value} format.`;
+    const r = {
+      hour: "2-digit",
+      minute: "2-digit"
+    }, u = e.minTime?.value ? e.minTime.value.toLocaleTimeString("en-US", r) : null, f = e.maxTime?.value ? e.maxTime.value.toLocaleTimeString("en-US", r) : null;
+    return u && f ? `Must be between ${u} and ${f}.` : u ? `Must be ${u} or later.` : f ? `Must be ${f} or earlier.` : "";
+  }), y = () => {
+    B(() => {
+      const r = document.getElementById(e.id);
+      if (!r) {
+        console.warn(`#${e.id} not found for styling.`);
+        return;
+      }
+      const u = r.closest(".k-timepicker");
+      u ? u.classList.add("fk-timepicker") : console.warn(
+        `.k-timepicker parent of #${e.id} not found for styling.`
+      );
+    });
+  };
+  return ge(() => {
+    y();
+  }), {
+    raw: t,
+    rules: v,
+    debugEnabled: P,
+    debugLines: b,
+    placeholder: F,
+    isValid: N,
+    validationMessage: a,
+    isComplete: E,
+    inRangeTime: q,
+    hour: W(S),
+    minute: W(T),
+    period: W(A),
+    handleChange: o,
+    handleKeyDown: s,
+    handleKeyUp: D,
+    handleClick: h,
+    handleWheel: d
+  };
+}
+function xe(e) {
+  return we() ? (ke(e), !0) : !1;
+}
+const he = typeof window < "u" && typeof document < "u";
+typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
+const Me = Object.prototype.toString, Ce = (e) => Me.call(e) === "[object Object]", le = () => {
+}, Ie = /* @__PURE__ */ $e();
+function $e() {
+  var e, t;
+  return he && ((e = window?.navigator) == null ? void 0 : e.userAgent) && (/iP(?:ad|hone|od)/.test(window.navigator.userAgent) || ((t = window?.navigator) == null ? void 0 : t.maxTouchPoints) > 2 && /iPad|Macintosh/.test(window?.navigator.userAgent));
+}
+function pe(e) {
+  return Array.isArray(e) ? e : [e];
+}
+function Le(e, t, c) {
+  return te(
+    e,
+    t,
+    {
+      ...c,
+      immediate: !0
+    }
+  );
+}
+const Se = he ? window : void 0;
+function ue(e) {
+  var t;
+  const c = ne(e);
+  return (t = c?.$el) != null ? t : c;
+}
+function ve(...e) {
+  const t = [], c = () => {
+    t.forEach((m) => m()), t.length = 0;
+  }, P = (m, v, C, S) => (m.addEventListener(v, C, S), () => m.removeEventListener(v, C, S)), F = x(() => {
+    const m = pe(ne(e[0])).filter((v) => v != null);
+    return m.every((v) => typeof v != "string") ? m : void 0;
+  }), U = Le(
+    () => {
+      var m, v;
+      return [
+        (v = (m = F.value) == null ? void 0 : m.map((C) => ue(C))) != null ? v : [Se].filter((C) => C != null),
+        pe(ne(F.value ? e[1] : e[0])),
+        pe(De(F.value ? e[2] : e[1])),
+        // @ts-expect-error - TypeScript gets the correct types, but somehow still complains
+        ne(F.value ? e[3] : e[2])
+      ];
+    },
+    ([m, v, C, S]) => {
+      if (c(), !m?.length || !v?.length || !C?.length)
+        return;
+      const T = Ce(S) ? { ...S } : S;
+      t.push(
+        ...m.flatMap(
+          (A) => v.flatMap(
+            (E) => C.map((I) => P(A, E, I, T))
+          )
+        )
+      );
+    },
+    { flush: "post" }
+  ), H = () => {
+    U(), c();
+  };
+  return xe(c), H;
+}
+let ye = !1;
+function Te(e, t, c = {}) {
+  const { window: P = Se, ignore: F = [], capture: U = !0, detectIframe: H = !1, controls: m = !1 } = c;
+  if (!P)
+    return m ? { stop: le, cancel: le, trigger: le } : le;
+  if (Ie && !ye) {
+    ye = !0;
+    const g = { passive: !0 };
+    Array.from(P.document.body.children).forEach((k) => k.addEventListener("click", le, g)), P.document.documentElement.addEventListener("click", le, g);
   }
-  function b() {
-    u.value = !1;
+  let v = !0;
+  const C = (g) => ne(F).some((k) => {
+    if (typeof k == "string")
+      return Array.from(P.document.querySelectorAll(k)).some((q) => q === g.target || g.composedPath().includes(q));
+    {
+      const q = ue(k);
+      return q && (g.target === q || g.composedPath().includes(q));
+    }
+  });
+  function S(g) {
+    const k = ne(g);
+    return k && k.$.subTree.shapeFlag === 16;
   }
-  function w() {
-    u.value = !u.value;
+  function T(g, k) {
+    const q = ne(g), o = q.$.subTree && q.$.subTree.children;
+    return o == null || !Array.isArray(o) ? !1 : o.some((h) => h.el === k.target || k.composedPath().includes(h.el));
   }
-  return G(() => {
-    p > 0 && !s && setTimeout(() => {
-      f();
-    }, p);
-  }), P(() => {
-  }), {
-    isGridActive: u,
-    activateGrid: f,
-    deactivateGrid: b,
-    toggleGrid: w
+  const A = (g) => {
+    const k = ue(e);
+    if (g.target != null && !(!(k instanceof Element) && S(e) && T(e, g)) && !(!k || k === g.target || g.composedPath().includes(k))) {
+      if ("detail" in g && g.detail === 0 && (v = !C(g)), !v) {
+        v = !0;
+        return;
+      }
+      t(g);
+    }
+  };
+  let E = !1;
+  const I = [
+    ve(P, "click", (g) => {
+      E || (E = !0, setTimeout(() => {
+        E = !1;
+      }, 0), A(g));
+    }, { passive: !0, capture: U }),
+    ve(P, "pointerdown", (g) => {
+      const k = ue(e);
+      v = !C(g) && !!(k && !g.composedPath().includes(k));
+    }, { passive: !0 }),
+    H && ve(P, "blur", (g) => {
+      setTimeout(() => {
+        var k;
+        const q = ue(e);
+        ((k = P.document.activeElement) == null ? void 0 : k.tagName) === "IFRAME" && !q?.contains(P.document.activeElement) && t(g);
+      }, 0);
+    }, { passive: !0 })
+  ].filter(Boolean), O = () => I.forEach((g) => g());
+  return m ? {
+    stop: O,
+    cancel: () => {
+      v = !1;
+    },
+    trigger: (g) => {
+      v = !0, A(g), v = !1;
+    }
+  } : O;
+}
+function Ke(e) {
+  const t = Ae(null), c = [
+    ".k-animation-container .k-popup",
+    ".k-popup",
+    ".k-timepicker-popup",
+    ".k-menu-popup"
+  ], P = Array.isArray(e.popupSelector) ? e.popupSelector : [e.popupSelector ?? c].flat(), F = (S) => S ? typeof e.initialFocus == "string" ? S.querySelector(e.initialFocus) ?? S : typeof e.initialFocus == "function" ? e.initialFocus(S) ?? S : S.querySelector(
+    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+  ) ?? S : null, { activate: U, deactivate: H } = Ee(t, {
+    escapeDeactivates: !1,
+    clickOutsideDeactivates: !1,
+    fallbackFocus: () => t.value,
+    initialFocus: () => F(t.value),
+    ...e.focusTrapOptions ?? {}
+  });
+  let m = null, v = G(null);
+  const C = () => {
+    if (e.resolvePopupEl) return e.resolvePopupEl();
+    const S = (A, E) => {
+      const I = Array.from(A.querySelectorAll(E));
+      if (!I.length) return null;
+      const O = I.filter(
+        (g) => g.offsetParent !== null || g.getClientRects().length > 0
+      );
+      return O[O.length - 1] ?? I[I.length - 1] ?? null;
+    }, T = e.triggerEl?.value?.closest?.(".k-animation-container") ?? document.body;
+    for (const A of P) {
+      const E = S(T, A);
+      if (E) return E;
+    }
+    for (const A of P) {
+      const E = S(document, A);
+      if (E) return E;
+    }
+    return null;
+  };
+  return Te(t, (S) => {
+    v.value = "outside", e.isOpen.value && e.onRequestClose?.("outside", S);
+  }), te(
+    () => e.isOpen.value,
+    (S) => {
+      S ? (v.value = null, B(() => {
+        const T = C();
+        T && (t.value = T, setTimeout(() => U(), 0), m || (m = (A) => {
+          A.key === "Escape" && (v.value = "escape", e.isOpen.value && e.onRequestClose?.("escape", A));
+        }, document.addEventListener("keydown", m, !0)));
+      })) : (H(), m && (document.removeEventListener("keydown", m, !0), m = null), t.value = null, v.value === "outside" && B(() => {
+        const T = () => {
+          const A = e.triggerEl?.value, E = A?.querySelector("input"), I = document.activeElement;
+          I && (I === E || A && A.contains(I)) && (E ?? A)?.blur?.();
+        };
+        requestAnimationFrame(() => setTimeout(T, 0));
+      }), e.returnFocusToTrigger !== !1 && v.value === "escape" && e.triggerEl?.value && (console.log(
+        "Returning focus to trigger element:",
+        e.triggerEl.value
+      ), B(() => {
+        const T = () => {
+          const A = e.triggerEl?.value;
+          if (!A) return;
+          (A.querySelector("input") ?? A)?.focus?.();
+        };
+        requestAnimationFrame(() => setTimeout(T, 0));
+      })));
+    }
+  ), {
+    popupRef: t,
+    activate: U,
+    deactivate: H,
+    lastCloseReason: W(v),
+    setPopupEl: (S) => t.value = S
   };
 }
 export {
-  O as useGridA11y,
-  B as useGridComposableEx
+  qe as useGridA11y,
+  Re as useMaskedDateInput,
+  Ue as useMaskedDateRangeInput,
+  Oe as useMaskedTimeInput,
+  Ke as usePopupTrap
 };