@editora/ui-core 0.1.10 → 0.1.13

package/dist/date-time-picker.esm.js

@@ -1,17 +1,18 @@
-import { E as Y } from "./ElementBase-909688f3.mjs";
-import { r as W } from "./calendar-2c11b824.mjs";
-import { r as J, i as v, s as G, b as Q, f as X, t as tt, n as E, d as et, p as F, m as N, a as it, k as L, h as j, j as Z, o as y, l as nt, c as st } from "./date-time-utils-bdceb7af.mjs";
-import "./scroll-lock-9de6d328.mjs";
-let rt = 0;
-const at = `
+import { E as W } from "./ElementBase-909688f3.mjs";
+import { c as Y } from "./dismissable-layer-9c7e6b58.mjs";
+import { r as J } from "./calendar-2c11b824.mjs";
+import { r as G, e as Q, i as v, s as X, b as tt, f as et, t as it, n as R, d as st, p as F, o as N, a as nt, m as E, j as Z, k as j, q as y, l as rt, c as at } from "./date-time-utils-a8b17ea7.mjs";
+import "./scroll-lock-31da444f.mjs";
+let ot = 0;
+const lt = `
   <svg viewBox="0 0 20 20" class="icon-svg" aria-hidden="true" focusable="false">
     <path d="M6 2a1 1 0 0 1 1 1v1h6V3a1 1 0 1 1 2 0v1h.5A2.5 2.5 0 0 1 18 6.5v9A2.5 2.5 0 0 1 15.5 18h-11A2.5 2.5 0 0 1 2 15.5v-9A2.5 2.5 0 0 1 4.5 4H5V3a1 1 0 0 1 1-1Zm10 7H4v6.5c0 .276.224.5.5.5h11a.5.5 0 0 0 .5-.5V9ZM4.5 6a.5.5 0 0 0-.5.5V7h12v-.5a.5.5 0 0 0-.5-.5h-11Z" fill="currentColor"/>
   </svg>
-`, ot = `
+`, dt = `
   <svg viewBox="0 0 20 20" class="icon-svg" aria-hidden="true" focusable="false">
     <path d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.12l3.71-3.9a.75.75 0 1 1 1.08 1.04l-4.25 4.47a.75.75 0 0 1-1.08 0L5.2 8.27a.75.75 0 0 1 .02-1.06Z" fill="currentColor"/>
   </svg>
-`, lt = `
+`, ut = `
   <svg viewBox="0 0 20 20" class="icon-svg" aria-hidden="true" focusable="false">
     <path d="M5.22 5.22a.75.75 0 0 1 1.06 0L10 8.94l3.72-3.72a.75.75 0 1 1 1.06 1.06L11.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06L10 11.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06L8.94 10 5.22 6.28a.75.75 0 0 1 0-1.06Z" fill="currentColor"/>
   </svg>
@@ -19,7 +20,7 @@ const at = `
   <svg viewBox="0 0 20 20" class="icon-svg" aria-hidden="true" focusable="false">
     <path d="M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16Zm0 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Zm.75 2.75a.75.75 0 0 0-1.5 0v3.88c0 .2.08.4.22.54l2.5 2.5a.75.75 0 1 0 1.06-1.06l-2.28-2.28V6.25Z" fill="currentColor"/>
   </svg>
-`, dt = `
+`, ct = `
   :host {
     --ui-dtp-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
     --ui-dtp-surface: linear-gradient(
@@ -285,7 +286,7 @@ const at = `
       outline-color: Highlight;
     }
   }
-`, ut = `
+`, pt = `
   .overlay { position: fixed; z-index: var(--ui-dtp-z, 1600); pointer-events: none; }
   .panel {
     pointer-events: auto;
@@ -455,15 +456,17 @@ function c(h) {
   return h.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
 function U(h) {
-  const t = Z(h);
+  const t = j(h);
   return t ? { date: t.date, time: t.time } : { date: null, time: null };
 }
 function x(h) {
-  return j(h.date, h.time);
+  return Z(h.date, h.time);
 }
-class ct extends Y {
+class ht extends W {
   constructor() {
-    super(...arguments), this._value = { date: null, time: null }, this._pending = { date: null, time: null }, this._draft = "", this._inlineError = "", this._open = !1, this._syncing = !1, this._overlay = null, this._releaseScrollLock = null, this._isInitialized = !1, this._hasView = !1, this._restoreFocusEl = null, this._overlayKey = null, this._uid = `ui-dtp-${++rt}`, this._inputId = `${this._uid}-input`, this._labelId = `${this._uid}-label`, this._hintId = `${this._uid}-hint`, this._errorId = `${this._uid}-error`, this._panelId = `${this._uid}-panel`, this._schedulePosition = J(() => this._positionOverlay()), this._onRootClickBound = (t) => this._onRootClick(t), this._onRootInputBound = (t) => this._onRootInput(t), this._onRootChangeBound = (t) => this._onRootChange(t), this._onRootBlurBound = (t) => this._onRootBlur(t), this._onRootKeyDownBound = (t) => this._onRootKeyDown(t), this._onOverlayClickBound = (t) => this._onOverlayClick(t), this._onOverlayChangeBound = (t) => this._onOverlayChange(t), this._onOverlayCalendarBound = (t) => this._onOverlayCalendar(t), this._onDocumentPointerDownBound = (t) => this._onDocumentPointerDown(t), this._onDocumentKeyDownBound = (t) => this._onDocumentKeyDown(t), this._onWindowResizeBound = () => this._schedulePosition.run(), this._onWindowScrollBound = () => this._schedulePosition.run();
+    super(...arguments), this._value = { date: null, time: null }, this._pending = { date: null, time: null }, this._draft = "", this._inlineError = "", this._open = !1, this._syncing = !1, this._overlay = null, this._dismissableLayer = null, this._releaseScrollLock = null, this._isInitialized = !1, this._hasView = !1, this._restoreFocusEl = null, this._overlayKey = null, this._uid = `ui-dtp-${++ot}`, this._inputId = `${this._uid}-input`, this._labelId = `${this._uid}-label`, this._hintId = `${this._uid}-hint`, this._errorId = `${this._uid}-error`, this._panelId = `${this._uid}-panel`, this._schedulePosition = G(() => this._positionOverlay()), this._onRootClickBound = (t) => this._onRootClick(t), this._onRootInputBound = (t) => this._onRootInput(t), this._onRootChangeBound = (t) => this._onRootChange(t), this._onRootBlurBound = (t) => this._onRootBlur(t), this._onRootKeyDownBound = (t) => this._onRootKeyDown(t), this._onOverlayClickBound = (t) => this._onOverlayClick(t), this._onOverlayChangeBound = (t) => this._onOverlayChange(t), this._onOverlayCalendarBound = (t) => this._onOverlayCalendar(t), this._onDocumentPointerDownBound = (t) => this._onDocumentPointerDown(t), this._onDocumentKeyDownBound = (t) => this._onDocumentKeyDown(t), this._onWindowResizeBound = () => this._schedulePosition.run(), this._onWindowScrollBound = (t) => {
+      Q(t, [this._overlay]) || this._schedulePosition.run();
+    };
   }
   static get observedAttributes() {
     return [
@@ -520,7 +523,7 @@ class ct extends Y {
     return (this.getAttribute("mode") || "popover") === "inline";
   }
   _isMobileSheet() {
-    return G(this.getAttribute("mode"));
+    return X(this.getAttribute("mode"));
   }
   _isDisabled() {
     return this.hasAttribute("disabled");
@@ -554,10 +557,10 @@ class ct extends Y {
     return v(this.getAttribute("bare"), !1);
   }
   _locale() {
-    return Q(this.getAttribute("locale"));
+    return tt(this.getAttribute("locale"));
   }
   _translations() {
-    return W(
+    return J(
       this.getAttribute("locale"),
       this.getAttribute("translations")
     );
@@ -569,24 +572,24 @@ class ct extends Y {
   _formatDisplay(t) {
     if (!t.date || !t.time)
       return "";
-    const e = X(t.date, this._locale(), "locale", null);
-    return this._is12h() ? `${e} ${tt(t.time, this._locale())}` : `${e} ${t.time}`;
+    const e = et(t.date, this._locale(), "locale", null);
+    return this._is12h() ? `${e} ${it(t.time, this._locale())}` : `${e} ${t.time}`;
   }
   _is12h() {
     return (this.getAttribute("format") || "24h") === "12h";
   }
   _parseDateInput(t) {
-    const e = E(t);
+    const e = R(t);
     if (e)
       return e;
-    const i = et(t, this._locale());
+    const i = st(t, this._locale());
     if (i)
       return i;
-    const n = new Date(t);
-    if (!Number.isFinite(n.getTime()))
+    const s = new Date(t);
+    if (!Number.isFinite(s.getTime()))
       return null;
-    const a = n.getFullYear(), o = String(n.getMonth() + 1).padStart(2, "0"), s = String(n.getDate()).padStart(2, "0");
-    return `${a}-${o}-${s}`;
+    const a = s.getFullYear(), o = String(s.getMonth() + 1).padStart(2, "0"), n = String(s.getDate()).padStart(2, "0");
+    return `${a}-${o}-${n}`;
   }
   _syncOpenAttribute(t) {
     this._syncing = !0;
@@ -645,16 +648,16 @@ class ct extends Y {
   _clampState(t) {
     if (!t.date)
       return { date: null, time: t.time };
-    const e = this._minDate(), i = this._maxDate(), n = it(t.date, e, i), a = t.time || "00:00";
-    let o = this._minDateTime(), s = this._maxDateTime();
-    if (o && s && L(o, s) > 0) {
+    const e = this._minDate(), i = this._maxDate(), s = nt(t.date, e, i), a = t.time || "00:00";
+    let o = this._minDateTime(), n = this._maxDateTime();
+    if (o && n && E(o, n) > 0) {
       const b = o;
-      o = s, s = b;
+      o = n, n = b;
     }
-    let r = j(n, a) || `${n}T00:00`;
-    o && L(r, o) < 0 && (r = o), s && L(r, s) > 0 && (r = s);
-    const d = Z(r);
-    return d ? { date: d.date, time: d.time } : { date: n, time: a };
+    let r = Z(s, a) || `${s}T00:00`;
+    o && E(r, o) < 0 && (r = o), n && E(r, n) > 0 && (r = n);
+    const d = j(r);
+    return d ? { date: d.date, time: d.time } : { date: s, time: a };
   }
   _commit(t, e) {
     if (this._isInteractionBlocked() || this._isReadonly())
@@ -663,15 +666,15 @@ class ct extends Y {
       this._value = { date: null, time: null }, this._pending = { date: null, time: null }, this._draft = "", this._inlineError = "", this._syncValueAttribute(this._value), this._emitInput(e), this._emitChange(e), this._updateHostState();
       return;
     }
-    const i = y(t.time || "", !0), n = this._clampState({
-      date: E(t.date),
+    const i = y(t.time || "", !0), s = this._clampState({
+      date: R(t.date),
       time: i ? `${p(i.hours)}:${p(i.minutes)}` : null
     });
-    if (!n.date || !n.time) {
+    if (!s.date || !s.time) {
       this._inlineError = this.getAttribute("error") || this._translations().invalidDateTime, this._emitInvalid(JSON.stringify(t), "parse"), this._updateHostState();
       return;
     }
-    this._value = n, this._pending = { ...n }, this._draft = this._formatDisplay(n), this._inlineError = "", this._syncValueAttribute(this._value), this._emitInput(e), this._emitChange(e), this._updateHostState();
+    this._value = s, this._pending = { ...s }, this._draft = this._formatDisplay(s), this._inlineError = "", this._syncValueAttribute(this._value), this._emitInput(e), this._emitChange(e), this._updateHostState();
   }
   _setOpen(t, e) {
     t && this._isInteractionBlocked() || this._open !== t && (this._open = t, this._syncOpenAttribute(t), this._syncOverlay(e), this._updateHostState(), this.dispatchEvent(new CustomEvent(t ? "open" : "close", { bubbles: !0, composed: !0 })));
@@ -697,10 +700,31 @@ class ct extends Y {
     if (this._overlay || typeof document > "u")
       return;
     const t = document.createElement("div");
-    t.style.position = "fixed", t.style.left = "0", t.style.top = "0", t.style.zIndex = "1100", t.style.pointerEvents = "none", t.addEventListener("click", this._onOverlayClickBound), t.addEventListener("change", this._onOverlayChangeBound), t.addEventListener("change", this._onOverlayCalendarBound), t.addEventListener("select", this._onOverlayCalendarBound), document.body.appendChild(t), this._overlay = t, document.addEventListener("pointerdown", this._onDocumentPointerDownBound, !0), document.addEventListener("keydown", this._onDocumentKeyDownBound), window.addEventListener("resize", this._onWindowResizeBound), window.addEventListener("scroll", this._onWindowScrollBound, !0), this._isMobileSheet() && (this._releaseScrollLock = nt());
+    t.style.position = "fixed", t.style.left = "0", t.style.top = "0", t.style.pointerEvents = "none", t.addEventListener("click", this._onOverlayClickBound), t.addEventListener("change", this._onOverlayChangeBound), t.addEventListener("change", this._onOverlayCalendarBound), t.addEventListener("select", this._onOverlayCalendarBound), document.body.appendChild(t), this._overlay = t, this._syncOverlayHostZIndex(), document.addEventListener("pointerdown", this._onDocumentPointerDownBound, !0), document.addEventListener("keydown", this._onDocumentKeyDownBound), window.addEventListener("resize", this._onWindowResizeBound), window.addEventListener("scroll", this._onWindowScrollBound, { passive: !0, capture: !0 }), this._isMobileSheet() && (this._releaseScrollLock = rt());
+  }
+  _syncOverlayHostZIndex() {
+    if (!this._overlay || typeof window > "u")
+      return;
+    const t = window.getComputedStyle(this).getPropertyValue("--ui-dtp-z").trim();
+    this._overlay.style.zIndex = t || "1600";
   }
   _destroyOverlay() {
-    this._overlay && (this._schedulePosition.cancel(), document.removeEventListener("pointerdown", this._onDocumentPointerDownBound, !0), document.removeEventListener("keydown", this._onDocumentKeyDownBound), window.removeEventListener("resize", this._onWindowResizeBound), window.removeEventListener("scroll", this._onWindowScrollBound, !0), this._overlay.removeEventListener("click", this._onOverlayClickBound), this._overlay.removeEventListener("change", this._onOverlayChangeBound), this._overlay.removeEventListener("change", this._onOverlayCalendarBound), this._overlay.removeEventListener("select", this._onOverlayCalendarBound), this._overlay.parentElement && this._overlay.parentElement.removeChild(this._overlay), this._overlay = null, this._overlayKey = null, this._releaseScrollLock && (this._releaseScrollLock(), this._releaseScrollLock = null));
+    var t;
+    (t = this._dismissableLayer) == null || t.destroy(), this._dismissableLayer = null, this._overlay && (this._schedulePosition.cancel(), document.removeEventListener("pointerdown", this._onDocumentPointerDownBound, !0), document.removeEventListener("keydown", this._onDocumentKeyDownBound), window.removeEventListener("resize", this._onWindowResizeBound), window.removeEventListener("scroll", this._onWindowScrollBound, !0), this._overlay.removeEventListener("click", this._onOverlayClickBound), this._overlay.removeEventListener("change", this._onOverlayChangeBound), this._overlay.removeEventListener("change", this._onOverlayCalendarBound), this._overlay.removeEventListener("select", this._onOverlayCalendarBound), this._overlay.parentElement && this._overlay.parentElement.removeChild(this._overlay), this._overlay = null, this._overlayKey = null, this._releaseScrollLock && (this._releaseScrollLock(), this._releaseScrollLock = null));
+  }
+  _syncDismissableLayer() {
+    var i;
+    if ((i = this._dismissableLayer) == null || i.destroy(), this._dismissableLayer = null, !this._open || !this._overlay)
+      return;
+    const t = this._overlay.querySelector(".panel, .sheet"), e = this.root.querySelector(".field");
+    t && (this._dismissableLayer = Y({
+      node: t,
+      trigger: e,
+      closeOnEscape: !0,
+      closeOnPointerOutside: !0,
+      closeOnFocusOutside: !1,
+      onBeforeDismiss: (s) => s === "escape-key" ? (this._setOpen(!1, "escape"), !1) : (s === "outside-pointer" && this._setOpen(!1, "outside"), !1)
+    }));
   }
   _positionOverlay() {
     if (!this._overlay || !this._open || this._isMobileSheet())
@@ -708,21 +732,27 @@ class ct extends Y {
     const t = this.root.querySelector(".field"), e = this._overlay.querySelector(".panel");
     if (!t || !e)
       return;
-    const i = st(t.getBoundingClientRect(), e.getBoundingClientRect());
-    e.style.position = "absolute", e.style.top = `${Math.round(i.top)}px`, e.style.left = `${Math.round(i.left)}px`;
+    const i = e.getAttribute("data-placement"), s = at(
+      t.getBoundingClientRect(),
+      e.getBoundingClientRect(),
+      8,
+      8,
+      i === "top" ? "top" : i === "bottom" ? "bottom" : null
+    );
+    e.style.position = "absolute", e.style.top = `${Math.round(s.top)}px`, e.style.left = `${Math.round(s.left)}px`, e.setAttribute("data-placement", s.placement);
   }
   _timeOptions() {
-    const t = y(this._pending.time || "00:00", !0) || { hours: 0, minutes: 0, seconds: 0 }, e = this._minuteStep(), i = this._is12h() ? Array.from({ length: 12 }, (o, s) => {
-      const r = s + 1, d = t.hours % 12 || 12;
+    const t = y(this._pending.time || "00:00", !0) || { hours: 0, minutes: 0, seconds: 0 }, e = this._minuteStep(), i = this._is12h() ? Array.from({ length: 12 }, (o, n) => {
+      const r = n + 1, d = t.hours % 12 || 12;
       return `<option value="${r}" ${r === d ? "selected" : ""}>${p(r)}</option>`;
-    }).join("") : Array.from({ length: 24 }, (o, s) => `<option value="${s}" ${s === t.hours ? "selected" : ""}>${p(s)}</option>`).join(""), n = Array.from({ length: Math.ceil(60 / e) }, (o, s) => {
-      const r = Math.min(59, s * e);
+    }).join("") : Array.from({ length: 24 }, (o, n) => `<option value="${n}" ${n === t.hours ? "selected" : ""}>${p(n)}</option>`).join(""), s = Array.from({ length: Math.ceil(60 / e) }, (o, n) => {
+      const r = Math.min(59, n * e);
       return `<option value="${r}" ${r === t.minutes ? "selected" : ""}>${p(r)}</option>`;
     }).join(""), a = t.hours >= 12 ? "pm" : "am";
-    return { hours: i, minutes: n, meridiem: a };
+    return { hours: i, minutes: s, meridiem: a };
   }
   _renderSurfaceInner(t, e = !1) {
-    const i = this._translations(), n = this._timeOptions(), a = (this.getAttribute("label") || "").trim(), o = c(a), s = c(a || i.selectDate), r = this._pending.date && this._pending.time ? this._formatDisplay(this._pending) : "", d = `
+    const i = this._translations(), s = this._timeOptions(), a = (this.getAttribute("label") || "").trim(), o = c(a), n = c(a || i.selectDate), r = this._pending.date && this._pending.time ? this._formatDisplay(this._pending) : "", d = `
       <header class="head">
         <div>
           <p class="head-title" ${a ? "" : "hidden"}>${o}</p>
@@ -734,9 +764,9 @@ class ct extends Y {
         <section class="time-panel" part="time">
           <span class="icon" aria-hidden="true">${K}</span>
           <div class="time-grid" data-meridiem="${this._is12h() ? "true" : "false"}">
-            <div><label>${c(i.hour)}</label><select data-segment="hours">${n.hours}</select></div>
-            <div><label>${c(i.minute)}</label><select data-segment="minutes">${n.minutes}</select></div>
-            ${this._is12h() ? `<div><label>${c(i.meridiem)}</label><select data-segment="meridiem"><option value="am" ${n.meridiem === "am" ? "selected" : ""}>${c(i.am)}</option><option value="pm" ${n.meridiem === "pm" ? "selected" : ""}>${c(i.pm)}</option></select></div>` : ""}
+            <div><label>${c(i.hour)}</label><select data-segment="hours">${s.hours}</select></div>
+            <div><label>${c(i.minute)}</label><select data-segment="minutes">${s.minutes}</select></div>
+            ${this._is12h() ? `<div><label>${c(i.meridiem)}</label><select data-segment="meridiem"><option value="am" ${s.meridiem === "am" ? "selected" : ""}>${c(i.am)}</option><option value="pm" ${s.meridiem === "pm" ? "selected" : ""}>${c(i.pm)}</option></select></div>` : ""}
           </div>
         </section>
       </div>
@@ -748,20 +778,20 @@ class ct extends Y {
       </footer>
     `;
     return e ? d : `
-      <style>${ut}</style>
+      <style>${pt}</style>
       ${t ? '<div class="sheet-backdrop" data-action="backdrop"></div>' : ""}
-      <section class="${t ? "sheet" : "panel"}" id="${this._panelId}" role="dialog" aria-modal="${t ? "true" : "false"}" aria-label="${s}" part="${t ? "sheet" : "popover"}">${d}</section>
+      <section class="${t ? "sheet" : "panel"}" id="${this._panelId}" role="dialog" aria-modal="${t ? "true" : "false"}" aria-label="${n}" part="${t ? "sheet" : "popover"}">${d}</section>
     `;
   }
   _syncCalendar(t) {
-    const e = (s, r) => {
+    const e = (n, r) => {
       if (r == null || r === "") {
-        t.hasAttribute(s) && t.removeAttribute(s);
+        t.hasAttribute(n) && t.removeAttribute(n);
         return;
       }
-      t.getAttribute(s) !== r && t.setAttribute(s, r);
-    }, i = (s, r) => {
-      r ? e(s, "") : e(s, null);
+      t.getAttribute(n) !== r && t.setAttribute(n, r);
+    }, i = (n, r) => {
+      r ? e(n, "") : e(n, null);
     };
     e("selection", "single"), e("value", this._pending.date), e("min", this.getAttribute("min")), e("max", this.getAttribute("max")), e("locale", this.getAttribute("locale")), e("translations", this.getAttribute("translations")), e("week-start", this.getAttribute("week-start"));
     const a = this.getAttribute("size") || "sm", o = t.classList.contains("dt-calendar-inline");
@@ -786,20 +816,21 @@ class ct extends Y {
     const i = Array.from(t.options).map((o) => Number(o.value)).filter((o) => Number.isFinite(o));
     if (!i.length)
       return;
-    let n = i[0], a = Math.abs(n - e);
+    let s = i[0], a = Math.abs(s - e);
     for (let o = 1; o < i.length; o += 1) {
-      const s = i[o], r = Math.abs(s - e);
-      r < a && (n = s, a = r);
+      const n = i[o], r = Math.abs(n - e);
+      r < a && (s = n, a = r);
     }
-    t.value = String(n);
+    t.value = String(s);
   }
   _syncOverlayState() {
     if (!this._overlay)
       return;
+    this._syncOverlayHostZIndex();
     const t = this._isMobileSheet();
-    this._ensureOverlayContent(t);
-    const e = this._translations(), i = this._overlay.querySelector(".panel, .sheet"), n = this._overlay.querySelector(".footer");
-    i && (i.dataset.bare = this._isBare() ? "true" : "false"), n && (n.hidden = !this._showFooter());
+    this._ensureOverlayContent(t), this._syncDismissableLayer();
+    const e = this._translations(), i = this._overlay.querySelector(".panel, .sheet"), s = this._overlay.querySelector(".footer");
+    i && (i.dataset.bare = this._isBare() ? "true" : "false"), s && (s.hidden = !this._showFooter());
     const a = this._overlay.querySelector(".head-title");
     if (a) {
       const l = (this.getAttribute("label") || "").trim();
@@ -807,8 +838,8 @@ class ct extends Y {
     }
     const o = this._overlay.querySelector(".head-meta");
     o && (o.textContent = this._pending.date && this._pending.time ? this._formatDisplay(this._pending) : e.selectDate);
-    const s = this._overlay.querySelector(".dt-calendar");
-    s && this._syncCalendar(s);
+    const n = this._overlay.querySelector(".dt-calendar");
+    n && this._syncCalendar(n);
     const r = y(this._pending.time || "00:00", !0) || { hours: 0, minutes: 0, seconds: 0 }, d = this._overlay.querySelector('select[data-segment="hours"]'), b = this._overlay.querySelector('select[data-segment="minutes"]'), m = this._overlay.querySelector('select[data-segment="meridiem"]');
     if (d) {
       const l = this._is12h() ? r.hours % 12 || 12 : r.hours;
@@ -824,28 +855,28 @@ class ct extends Y {
     this._syncOverlayState();
   }
   _applyTimeFromSurface(t) {
-    const e = t.querySelector('select[data-segment="hours"]'), i = t.querySelector('select[data-segment="minutes"]'), n = t.querySelector('select[data-segment="meridiem"]');
+    const e = t.querySelector('select[data-segment="hours"]'), i = t.querySelector('select[data-segment="minutes"]'), s = t.querySelector('select[data-segment="meridiem"]');
     if (!e || !i)
       return;
     const a = Number(e.value), o = Number(i.value);
     if (!Number.isFinite(a) || !Number.isFinite(o))
       return;
-    let s = a;
+    let n = a;
     if (this._is12h()) {
-      const r = (n == null ? void 0 : n.value) === "pm" ? "pm" : "am";
-      r === "pm" && s < 12 && (s += 12), r === "am" && s === 12 && (s = 0);
+      const r = (s == null ? void 0 : s.value) === "pm" ? "pm" : "am";
+      r === "pm" && n < 12 && (n += 12), r === "am" && n === 12 && (n = 0);
     }
     this._pending = this._clampState({
       date: this._pending.date,
-      time: `${p(s)}:${p(o)}`
+      time: `${p(n)}:${p(o)}`
     }), this._emitInput("time");
   }
   _onRootClick(t) {
-    var n;
+    var s;
     const e = t.target;
     if (!e)
       return;
-    const i = (n = e.closest("[data-action]")) == null ? void 0 : n.getAttribute("data-action");
+    const i = (s = e.closest("[data-action]")) == null ? void 0 : s.getAttribute("data-action");
     if (i && !(this._isInteractionBlocked() || this._isReadonly())) {
       if (i === "toggle") {
         this._restoreFocusEl = e, this._setOpen(!this._open, "toggle");
@@ -856,7 +887,7 @@ class ct extends Y {
         return;
       }
       if (this._isInlineMode() && i === "now") {
-        const a = /* @__PURE__ */ new Date(), o = String(a.getMonth() + 1).padStart(2, "0"), s = String(a.getDate()).padStart(2, "0"), r = `${a.getFullYear()}-${o}-${s}`, d = `${p(a.getHours())}:${p(a.getMinutes())}`;
+        const a = /* @__PURE__ */ new Date(), o = String(a.getMonth() + 1).padStart(2, "0"), n = String(a.getDate()).padStart(2, "0"), r = `${a.getFullYear()}-${o}-${n}`, d = `${p(a.getHours())}:${p(a.getMinutes())}`;
         this._pending = this._clampState({ date: r, time: d }), this._emitInput("now"), this._updateHostState();
         return;
       }
@@ -903,12 +934,12 @@ class ct extends Y {
       this._commit({ date: null, time: null }, "blur");
       return;
     }
-    const n = /^(.+)\s+(\d{1,2}:\d{2}(?::\d{2})?(?:\s?[ap]m)?)$/i.exec(i);
-    if (!n) {
+    const s = /^(.+)\s+(\d{1,2}:\d{2}(?::\d{2})?(?:\s?[ap]m)?)$/i.exec(i);
+    if (!s) {
       this._inlineError = this.getAttribute("error") || this._translations().invalidDateTime, this._emitInvalid(i, "parse"), this._updateHostState();
       return;
     }
-    const a = this._parseDateInput(n[1]), o = y(n[2], !0) ? n[2] : null;
+    const a = this._parseDateInput(s[1]), o = y(s[2], !0) ? s[2] : null;
     if (!a || !o) {
       this._inlineError = this.getAttribute("error") || this._translations().invalidDateTime, this._emitInvalid(i, "parse"), this._updateHostState();
       return;
@@ -926,11 +957,11 @@ class ct extends Y {
     }
   }
   _onOverlayClick(t) {
-    var n;
+    var s;
     const e = t.target;
     if (!e)
       return;
-    const i = (n = e.closest("[data-action]")) == null ? void 0 : n.getAttribute("data-action");
+    const i = (s = e.closest("[data-action]")) == null ? void 0 : s.getAttribute("data-action");
     if (i && !this._isInteractionBlocked() && !(this._isReadonly() && i !== "toggle")) {
       if (i === "backdrop") {
         this._setOpen(!1, "outside");
@@ -945,7 +976,7 @@ class ct extends Y {
         return;
       }
       if (i === "now") {
-        const a = /* @__PURE__ */ new Date(), o = String(a.getMonth() + 1).padStart(2, "0"), s = String(a.getDate()).padStart(2, "0"), r = `${a.getFullYear()}-${o}-${s}`, d = `${p(a.getHours())}:${p(a.getMinutes())}`;
+        const a = /* @__PURE__ */ new Date(), o = String(a.getMonth() + 1).padStart(2, "0"), n = String(a.getDate()).padStart(2, "0"), r = `${a.getFullYear()}-${o}-${n}`, d = `${p(a.getHours())}:${p(a.getMinutes())}`;
         this._pending = this._clampState({ date: r, time: d }), this._emitInput("now"), this._renderOverlay();
         return;
       }
@@ -962,7 +993,7 @@ class ct extends Y {
     const e = t.target;
     if (!e || e.tagName.toLowerCase() !== "ui-calendar")
       return;
-    const i = t.type, n = t.detail, a = E(i === "select" ? (n == null ? void 0 : n.value) || null : n == null ? void 0 : n.value);
+    const i = t.type, s = t.detail, a = R(i === "select" ? (s == null ? void 0 : s.value) || null : s == null ? void 0 : s.value);
     if (a) {
       if (this._pending = this._clampState({ date: a, time: this._pending.time || "09:00" }), this._emitInput("calendar"), this._shouldAutoCommit() && this._pending.time) {
         this._commit(this._pending, "calendar"), this._setOpen(!1, "calendar");
@@ -983,23 +1014,23 @@ class ct extends Y {
   _updateHostState() {
     if (!this._hasView)
       return;
-    const t = this.getAttribute("label") || "", e = this.getAttribute("hint") || "", i = this.getAttribute("error") || "", n = this._inlineError || i, a = !!x(this._value), o = this.getAttribute("name") || "", s = this._allowInput() ? this._draft : this._formatDisplay(this._value), r = this._isInlineMode(), d = this._translations(), b = n ? "error" : this._state();
+    const t = this.getAttribute("label") || "", e = this.getAttribute("hint") || "", i = this.getAttribute("error") || "", s = this._inlineError || i, a = !!x(this._value), o = this.getAttribute("name") || "", n = this._allowInput() ? this._draft : this._formatDisplay(this._value), r = this._isInlineMode(), d = this._translations(), b = s ? "error" : this._state();
     this._state() === "loading" ? this.setAttribute("aria-busy", "true") : this.removeAttribute("aria-busy");
-    const m = this.root.querySelector(".label"), S = this.root.querySelector(".label-text"), $ = this.root.querySelector(".required"), l = this.root.querySelector(".input"), I = this.root.querySelector('.btn[data-action="clear"]'), f = this.root.querySelector('.btn[data-action="toggle"]'), g = this.root.querySelector(".hint"), w = this.root.querySelector(".error"), k = this.root.querySelector(".hidden-input");
-    if (m && (m.hidden = !t), m && (m.id = this._labelId, m.setAttribute("for", this._inputId)), S && (S.textContent = t), $ && ($.hidden = !this.hasAttribute("required")), l && (l.value !== s && (l.value = s), l.id = this._inputId, l.placeholder = d.dateTimePlaceholder, l.readOnly = !this._allowInput() || this._isReadonly(), l.disabled = this._isInteractionBlocked(), l.required = this.hasAttribute("required"), l.autocomplete = "off", l.setAttribute("role", "combobox"), l.setAttribute("aria-haspopup", "dialog"), l.setAttribute("aria-expanded", r ? "false" : String(this._open)), l.setAttribute("aria-controls", this._panelId), l.setAttribute("aria-invalid", n ? "true" : "false"), t ? l.setAttribute("aria-labelledby", this._labelId) : l.removeAttribute("aria-labelledby")), I && (I.hidden = !(this._clearable() && a), I.setAttribute("aria-label", d.clear), I.disabled = this._isInteractionBlocked()), f && (f.hidden = r, f.setAttribute("aria-label", d.toggleCalendar), f.setAttribute("aria-expanded", r ? "false" : String(this._open)), f.setAttribute("aria-controls", this._panelId), f.disabled = this._isInteractionBlocked()), g && (g.id = this._hintId, g.hidden = !e, g.textContent = e), w && (w.id = this._errorId, w.hidden = !n, w.textContent = n), l) {
+    const m = this.root.querySelector(".label"), S = this.root.querySelector(".label-text"), D = this.root.querySelector(".required"), l = this.root.querySelector(".input"), I = this.root.querySelector('.btn[data-action="clear"]'), f = this.root.querySelector('.btn[data-action="toggle"]'), g = this.root.querySelector(".hint"), w = this.root.querySelector(".error"), k = this.root.querySelector(".hidden-input");
+    if (m && (m.hidden = !t), m && (m.id = this._labelId, m.setAttribute("for", this._inputId)), S && (S.textContent = t), D && (D.hidden = !this.hasAttribute("required")), l && (l.value !== n && (l.value = n), l.id = this._inputId, l.placeholder = d.dateTimePlaceholder, l.readOnly = !this._allowInput() || this._isReadonly(), l.disabled = this._isInteractionBlocked(), l.required = this.hasAttribute("required"), l.autocomplete = "off", l.setAttribute("role", "combobox"), l.setAttribute("aria-haspopup", "dialog"), l.setAttribute("aria-expanded", r ? "false" : String(this._open)), l.setAttribute("aria-controls", this._panelId), l.setAttribute("aria-invalid", s ? "true" : "false"), t ? l.setAttribute("aria-labelledby", this._labelId) : l.removeAttribute("aria-labelledby")), I && (I.hidden = !(this._clearable() && a), I.setAttribute("aria-label", d.clear), I.disabled = this._isInteractionBlocked()), f && (f.hidden = r, f.setAttribute("aria-label", d.toggleCalendar), f.setAttribute("aria-expanded", r ? "false" : String(this._open)), f.setAttribute("aria-controls", this._panelId), f.disabled = this._isInteractionBlocked()), g && (g.id = this._hintId, g.hidden = !e, g.textContent = e), w && (w.id = this._errorId, w.hidden = !s, w.textContent = s), l) {
       const _ = [];
-      e && g && !g.hidden && _.push(this._hintId), n && _.push(this._errorId), _.length ? l.setAttribute("aria-describedby", _.join(" ")) : l.removeAttribute("aria-describedby");
+      e && g && !g.hidden && _.push(this._hintId), s && _.push(this._errorId), _.length ? l.setAttribute("aria-describedby", _.join(" ")) : l.removeAttribute("aria-describedby");
     }
     k && (k.disabled = !o, k.name = o, k.value = x(this._value) || "");
-    const C = this.root.querySelector(".field");
-    C && (C.dataset.open = this._open && !r ? "true" : "false", C.dataset.invalid = n ? "true" : "false", C.dataset.state = b);
+    const A = this.root.querySelector(".field");
+    A && (A.dataset.open = this._open && !r ? "true" : "false", A.dataset.invalid = s ? "true" : "false", A.dataset.state = b);
     const u = this.root.querySelector(".inline-panel");
     if (u) {
       u.hidden = !r, u.id = this._panelId, u.dataset.bare = this._isBare() ? "true" : "false", u.setAttribute("role", "dialog"), u.setAttribute("aria-modal", "false"), u.setAttribute("aria-label", t || d.selectDate);
       const _ = u.querySelector(".panel-title");
       _ && (_.textContent = t, _.hidden = !t);
-      const D = u.querySelector(".head-title");
-      D && (D.textContent = t, D.hidden = !t);
+      const $ = u.querySelector(".head-title");
+      $ && ($.textContent = t, $.hidden = !t);
       const q = u.querySelector(".head-meta");
       q && (q.textContent = this._pending.date && this._pending.time ? this._formatDisplay(this._pending) : d.selectDate);
       const T = u.querySelector('[data-action="now"]');
@@ -1012,13 +1043,13 @@ class ct extends Y {
       H && (H.hidden = !this._showFooter());
       const V = u.querySelector(".dt-calendar-inline");
       V && this._syncCalendar(V);
-      const B = u.querySelector('select[data-segment="hours"]'), O = u.querySelector('select[data-segment="minutes"]'), z = u.querySelector('select[data-segment="meridiem"]'), A = y(this._pending.time || "00:00", !0) || { hours: 0, minutes: 0, seconds: 0 };
-      if (B) {
-        const R = this._is12h() ? A.hours % 12 || 12 : A.hours;
-        this._setClosestOptionValue(B, R), B.disabled = this._isInteractionBlocked() || this._isReadonly();
+      const O = u.querySelector('select[data-segment="hours"]'), B = u.querySelector('select[data-segment="minutes"]'), z = u.querySelector('select[data-segment="meridiem"]'), C = y(this._pending.time || "00:00", !0) || { hours: 0, minutes: 0, seconds: 0 };
+      if (O) {
+        const L = this._is12h() ? C.hours % 12 || 12 : C.hours;
+        this._setClosestOptionValue(O, L), O.disabled = this._isInteractionBlocked() || this._isReadonly();
       }
-      O && (this._setClosestOptionValue(O, A.minutes), O.disabled = this._isInteractionBlocked() || this._isReadonly()), z && (z.value = A.hours >= 12 ? "pm" : "am", z.disabled = this._isInteractionBlocked() || this._isReadonly()), u.querySelectorAll(".action").forEach((R) => {
-        R.disabled = this._isInteractionBlocked() || this._isReadonly();
+      B && (this._setClosestOptionValue(B, C.minutes), B.disabled = this._isInteractionBlocked() || this._isReadonly()), z && (z.value = C.hours >= 12 ? "pm" : "am", z.disabled = this._isInteractionBlocked() || this._isReadonly()), u.querySelectorAll(".action").forEach((L) => {
+        L.disabled = this._isInteractionBlocked() || this._isReadonly();
       });
     }
     !r && this._open && this._syncOverlayState(), r && this._destroyOverlay();
@@ -1027,18 +1058,18 @@ class ct extends Y {
     if (!this._hasView) {
       const t = this._translations();
       this.setContent(`
-        <style>${dt}</style>
+        <style>${ct}</style>
         <div class="root">
           <label class="label" part="label" id="${this._labelId}">
             <span class="label-text"></span>
             <span class="required">*</span>
           </label>
           <div class="field" part="field input">
-            <span class="icon" part="icon">${at}</span>
+            <span class="icon" part="icon">${lt}</span>
             <input class="input" id="${this._inputId}" part="input" />
             <span class="icon" part="icon">${K}</span>
-            <button type="button" class="btn" part="clear" data-action="clear">${lt}</button>
-            <button type="button" class="btn" part="toggle" data-action="toggle">${ot}</button>
+            <button type="button" class="btn" part="clear" data-action="clear">${ut}</button>
+            <button type="button" class="btn" part="toggle" data-action="toggle">${dt}</button>
           </div>
           <div class="hint" id="${this._hintId}" part="hint"></div>
           <div class="error" id="${this._errorId}" part="error" role="alert"></div>
@@ -1056,7 +1087,7 @@ class ct extends Y {
     return !1;
   }
 }
-typeof customElements < "u" && !customElements.get("ui-date-time-picker") && customElements.define("ui-date-time-picker", ct);
+typeof customElements < "u" && !customElements.get("ui-date-time-picker") && customElements.define("ui-date-time-picker", ht);
 export {
-  ct as UIDateTimePicker
+  ht as UIDateTimePicker
 };

package/dist/date-time-utils-378ecc21.js

@@ -0,0 +1 @@
+"use strict";const l=require("./calendar-a8735e40.js"),U=require("./scroll-lock-d7b0df21.js"),C=new Map,F=24;function w(t,e,n){return Math.max(e,Math.min(n,t))}function u(t){return String(t).padStart(2,"0")}function b(t){if(!/^-?\d+$/.test(t))return null;const e=Number(t);return Number.isFinite(e)?Math.trunc(e):null}function z(t){return t.replace(/[.\-]/g,"/").replace(/\s+/g," ").trim()}function A(t){const e=[];for(let n=0;n<12;n+=1)e.push(new Intl.DateTimeFormat(t,{month:"short",timeZone:"UTC"}).format(new Date(Date.UTC(2024,n,1))));return e}function P(t){const e=[];for(let n=0;n<12;n+=1)e.push(new Intl.DateTimeFormat(t,{month:"long",timeZone:"UTC"}).format(new Date(Date.UTC(2024,n,1))));return e}function Y(t,e=!1){if(t==null)return e;const n=t.trim().toLowerCase();return n?n!=="false"&&n!=="0"&&n!=="off"&&n!=="no":!0}function k(t,e){const n=typeof t.composedPath=="function"?t.composedPath():[];for(const o of e)if(o&&n.includes(o))return!0;const r=t.target;if(!(r instanceof Node))return!1;for(const o of e)if(o instanceof Node&&o.contains(r))return!0;return!1}function B(t){const e=(t||"").trim();return e||(typeof navigator<"u"&&navigator.language?navigator.language:"en-US")}function m(t){if(!t)return null;const e=l.parseISO(t);return e?`${e.y}-${u(e.m)}-${u(e.d)}`:null}function y(t){if(!t)return null;const e=/^(\d{4}-\d{2}-\d{2})[T ](\d{1,2}:\d{2}(?::\d{2})?)$/.exec(t.trim());if(!e)return null;const n=m(e[1]);if(!n)return null;const r=T(e[2],!0);if(!r)return null;const o=e[2].split(":").length===3;return{date:n,time:M(r,o)}}function W(t,e){if(!t||!e)return null;const n=m(t),r=T(e,!0);return!n||!r?null:`${n}T${M(r,e.split(":").length>=3)}`}function q(t){if(!t)return null;const e=m(t);if(e)return e;const n=y(t);return(n==null?void 0:n.date)||null}function x(t){if(!t)return null;const e=y(t);if(e)return e;const n=m(t);return n?{date:n,time:"00:00"}:null}function E(t,e,n){const r=l.parseISO(t);if(!r)return t;const o=`${e}::${JSON.stringify(n||{})}`;let i=C.get(o);return i||(i=new Intl.DateTimeFormat(e,{year:"numeric",month:"short",day:"2-digit",timeZone:"UTC",...n||{}}),C.set(o,i)),i.format(new Date(Date.UTC(r.y,r.m-1,r.d)))}function H(t,e,n,r){if(!t)return"";if(n==="iso")return t;if(n==="custom"&&r){const o=l.parseISO(t);if(!o)return t;const i=A(e),s=P(e);return r.replace(/YYYY/g,String(o.y)).replace(/MMM/g,i[o.m-1]||"").replace(/MMMM/g,s[o.m-1]||"").replace(/MM/g,u(o.m)).replace(/DD/g,u(o.d))}return E(t,e)}function Z(t,e){const n=m(t.trim());if(n)return n;const r=z(t);if(!r)return null;const o=m(r);if(o)return o;const i=r.split("/").map(f=>f.trim()).filter(Boolean);if(i.length!==3)return null;const s=b(i[0]),a=b(i[1]),p=b(i[2]);if(s==null||a==null||p==null)return null;let c=p;c<100&&(c+=c>=70?1900:2e3);const d=e.toLowerCase().startsWith("en-us"),h=d?s:a,D=d?a:s;if(c<1e3||h<1||h>12||D<1||D>31)return null;const g=`${c}-${u(h)}-${u(D)}`;return m(g)}function T(t,e){const n=t.trim().toLowerCase();if(!n)return null;const r=/^(\d{1,2})(?::|\.|h)?(\d{1,2})?(?::|\.|m)?(\d{1,2})?\s*(am|pm)?$/.exec(n);if(!r)return null;let o=Number(r[1]);const i=Number(r[2]??"0"),s=Number(r[3]??"0");if(!Number.isFinite(o)||!Number.isFinite(i)||!Number.isFinite(s)||i<0||i>59||s<0||s>59||!e&&s!==0)return null;const a=r[4];if(a){if(o<1||o>12)return null;a==="pm"&&o<12&&(o+=12),a==="am"&&o===12&&(o=0)}return o<0||o>23?null:{hours:o,minutes:i,seconds:s}}function M(t,e=!1){if(!t)return"";const n=u(w(t.hours,0,23)),r=u(w(t.minutes,0,59));if(!e)return`${n}:${r}`;const o=u(w(t.seconds,0,59));return`${n}:${r}:${o}`}function _(t,e){const n=T(t,!0);if(!n)return t;const r=new Date;return r.setHours(n.hours,n.minutes,n.seconds,0),new Intl.DateTimeFormat(e,{hour:"numeric",minute:"2-digit",second:t.split(":").length>2?"2-digit":void 0,hour12:!0}).format(r)}function S(t,e){const n=T(t,!0),r=T(e,!0);if(!n||!r)return t.localeCompare(e);const o=n.hours*3600+n.minutes*60+n.seconds,i=r.hours*3600+r.minutes*60+r.seconds;return o-i}function X(t,e,n){const r=T(t,!0);if(!r)return t;let o=M(r,t.split(":").length>=3);return e&&S(o,e)<0&&(o=e),n&&S(o,n)>0&&(o=n),o}function G(t,e,n){let r=t;return e&&l.compareISO(r,e)<0&&(r=e),n&&l.compareISO(r,n)>0&&(r=n),r}function J(t,e){const n=y(t),r=y(e);if(!n||!r)return t.localeCompare(e);const o=l.compareISO(n.date,r.date);return o!==0?o:S(n.time,r.time)}function K(t){const e=l.parseISO(t);if(!e)return{start:t,end:t};const n=l.startOfMonth(e.y,e.m),r=l.endOfMonth(e.y,e.m);return{start:`${n.y}-${u(n.m)}-${u(n.d)}`,end:`${r.y}-${u(r.m)}-${u(r.d)}`}}function V(t,e){const n=w(e,1,366);return{start:l.addDaysISO(t,-(n-1)),end:t}}function j(t,e,n=8,r=8,o=null){const i=typeof window<"u"?window.innerWidth:1200,s=typeof window<"u"?window.innerHeight:800,a=typeof window<"u"&&window.scrollY||0,p=typeof window<"u"&&window.scrollX||0,c=s-t.bottom-r-n,d=t.top-r-n,h=c>=e.height,D=d>=e.height,g=o==="top"?"top":"bottom";let f;if(h&&!D)f="bottom";else if(D&&!h)f="top";else if(D&&h)f=g;else{const $=g==="bottom"?c:d,O=g==="bottom"?d:c;$>0&&O<=$+F?f=g:f=c>=d?"bottom":"top"}const I=f==="bottom"?t.bottom+r+a:t.top-e.height-r+a,v=t.left+p,N=p+i-e.width-n,L=w(v,p+n,Math.max(p+n,N));return{top:I,left:L,placement:f}}function Q(t){let e=0;return{run:()=>{e||(e=requestAnimationFrame(()=>{e=0,t()}))},cancel:()=>{e&&(cancelAnimationFrame(e),e=0)}}}function R(t){return(t||"popover")==="inline"||typeof window>"u"||typeof window.matchMedia!="function"?!1:window.matchMedia("(max-width: 639px)").matches}function tt(){return U.acquireBodyScrollLock()}exports.clampDateIso=G;exports.clampTime=X;exports.combineDateTime=W;exports.compareDateTimes=J;exports.compareTimes=S;exports.computeLastDaysRange=V;exports.computeMonthRange=K;exports.computePopoverPosition=j;exports.eventOriginatesWithin=k;exports.formatDateForDisplay=H;exports.formatTime=M;exports.isTruthyAttr=Y;exports.lockBodyScroll=tt;exports.normalizeDateIso=m;exports.normalizeLocale=B;exports.parseConstraintDate=q;exports.parseConstraintDateTime=x;exports.parseTimeInput=T;exports.parseUserDateInput=Z;exports.rafThrottle=Q;exports.shouldUseMobileSheet=R;exports.splitDateTime=y;exports.to12hDisplay=_;