@editora/ui-core 0.1.9 → 0.1.10

package/dist/time-field.esm.js

@@ -0,0 +1,387 @@
+import { E as M } from "./ElementBase-909688f3.mjs";
+import { o as A, q as x, u as T } from "./date-time-utils-bdceb7af.mjs";
+import "./calendar-2c11b824.mjs";
+import "./scroll-lock-9de6d328.mjs";
+let V = 0;
+const B = `
+  :host {
+    --ui-time-field-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
+    --ui-time-field-border: 1px solid var(--ui-time-field-border-color);
+    --ui-time-field-radius: var(--ui-radius, 12px);
+    --ui-time-field-bg: var(--ui-color-surface, #ffffff);
+    --ui-time-field-text: var(--ui-color-text, #0f172a);
+    --ui-time-field-muted: var(--ui-color-muted, #64748b);
+    --ui-time-field-focus: var(--ui-color-focus-ring, #2563eb);
+    --ui-time-field-danger: var(--ui-color-danger, #dc2626);
+    display: block;
+    inline-size: 100%;
+    min-inline-size: 0;
+    color: var(--ui-time-field-text);
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    color-scheme: light dark;
+  }
+
+  .root {
+    display: grid;
+    gap: 8px;
+  }
+
+  .meta {
+    display: grid;
+    gap: 4px;
+  }
+
+  .label {
+    margin: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--ui-time-field-muted);
+    font: 600 13px/1.35 "IBM Plex Sans", "Inter", sans-serif;
+  }
+
+  .required {
+    color: var(--ui-time-field-danger);
+    font-size: 12px;
+    line-height: 1;
+  }
+
+  .description,
+  .error {
+    margin: 0;
+    font-size: 12px;
+    line-height: 1.4;
+    letter-spacing: 0.01em;
+  }
+
+  .description {
+    color: var(--ui-time-field-muted);
+  }
+
+  .error {
+    color: var(--ui-time-field-danger);
+  }
+
+  .shell {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 4px;
+    min-block-size: 44px;
+    padding: 0 10px;
+    border: var(--ui-time-field-border);
+    border-radius: var(--ui-time-field-radius);
+    background: var(--ui-time-field-bg);
+    transition: border-color 160ms ease, box-shadow 160ms ease;
+    box-sizing: border-box;
+  }
+
+  .shell[data-focused="true"] {
+    border-color: color-mix(in srgb, var(--ui-time-field-focus) 58%, var(--ui-time-field-border-color));
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-time-field-focus) 22%, transparent);
+  }
+
+  .shell[data-invalid="true"] {
+    border-color: color-mix(in srgb, var(--ui-time-field-danger) 62%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-time-field-danger) 18%, transparent);
+  }
+
+  .segment {
+    border: none;
+    background: transparent;
+    color: inherit;
+    min-inline-size: 0;
+    padding: 6px 4px;
+    border-radius: 8px;
+    font: 600 15px/1.2 "Inter", "IBM Plex Sans", sans-serif;
+    cursor: pointer;
+    transition: background-color 120ms ease, color 120ms ease;
+    text-transform: uppercase;
+  }
+
+  .segment[data-empty="true"] {
+    color: color-mix(in srgb, var(--ui-time-field-text) 38%, transparent);
+  }
+
+  .segment[data-active="true"] {
+    background: color-mix(in srgb, var(--ui-time-field-focus) 16%, transparent);
+  }
+
+  .segment:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--ui-time-field-focus) 56%, transparent);
+    outline-offset: 1px;
+  }
+
+  .literal {
+    color: color-mix(in srgb, var(--ui-time-field-text) 42%, transparent);
+    font: 600 14px/1 "Inter", "IBM Plex Sans", sans-serif;
+  }
+
+  .label[hidden],
+  .description[hidden],
+  .error[hidden],
+  .meta[hidden] {
+    display: none;
+  }
+
+  :host([disabled]) .shell {
+    opacity: 0.68;
+  }
+
+  :host([disabled]) .segment,
+  :host([readonly]) .segment {
+    cursor: default;
+  }
+`;
+function f(l, e) {
+  return A(l || "", !0) || null;
+}
+function _(l) {
+  return { hour: l.hours % 12 || 12, meridiem: l.hours >= 12 ? "PM" : "AM" };
+}
+function S(l, e) {
+  return e === "AM" ? l === 12 ? 0 : l : l === 12 ? 12 : l + 12;
+}
+function I(l) {
+  return l === "meridiem" ? "AM" : l === "hour" ? "HH" : l === "minute" ? "MM" : "SS";
+}
+class E extends M {
+  constructor() {
+    super(), this._value = null, this._activeSegment = "hour", this._segmentButtons = /* @__PURE__ */ new Map(), this._segmentsEl = null, this._shellEl = null, this._errorEl = null, this._formUnregister = null, this._bufferBySegment = { hour: "", minute: "", second: "" }, this._bufferTimer = null, this._internals = null, this._uid = `ui-time-field-${++V}`, this._defaultValue = null;
+    try {
+      this._internals = typeof this.attachInternals == "function" ? this.attachInternals() : null;
+    } catch {
+      this._internals = null;
+    }
+    this._onSegmentKeyDown = this._onSegmentKeyDown.bind(this), this._onSegmentClick = this._onSegmentClick.bind(this), this._onFocusIn = this._onFocusIn.bind(this), this._onFocusOut = this._onFocusOut.bind(this);
+  }
+  static get observedAttributes() {
+    return ["value", "min", "max", "format", "seconds", "label", "description", "data-error", "required", "disabled", "readonly", "name", "locale"];
+  }
+  get value() {
+    return this._value || "";
+  }
+  set value(e) {
+    this._setValue(e || null, "api");
+  }
+  clearValue() {
+    this._setValue(null, "clear");
+  }
+  formResetCallback() {
+    this._setValue(this._defaultValue, "form");
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._defaultValue == null && (this._defaultValue = this.getAttribute("value")), this._registerWithForm();
+  }
+  disconnectedCallback() {
+    this._formUnregister && (this._formUnregister(), this._formUnregister = null), this._bufferTimer != null && (window.clearTimeout(this._bufferTimer), this._bufferTimer = null), super.disconnectedCallback();
+  }
+  attributeChangedCallback(e, i, t) {
+    i !== t && (e === "value" && (this._value = this._normalizeTimeValue(t)), e === "name" && this.isConnected && this._registerWithForm(), this._shellEl && this._syncUi());
+  }
+  shouldRenderOnAttributeChange() {
+    return !1;
+  }
+  render() {
+    var e, i;
+    this.setContent(`
+      <style>${B}</style>
+      <div class="root">
+        <div class="meta" hidden>
+          <div class="label" hidden><span class="label-text"></span><span class="required" hidden>*</span></div>
+          <div class="description" hidden></div>
+        </div>
+        <div class="shell" part="shell" data-focused="false" data-invalid="false">
+          <div class="segments" part="segments"></div>
+        </div>
+        <div class="error" part="error" hidden></div>
+      </div>
+    `), this._segmentsEl = this.root.querySelector(".segments"), this._shellEl = this.root.querySelector(".shell"), this._errorEl = this.root.querySelector(".error"), (e = this._shellEl) == null || e.addEventListener("focusin", this._onFocusIn), (i = this._shellEl) == null || i.addEventListener("focusout", this._onFocusOut), this._value = this._normalizeTimeValue(this.getAttribute("value")), this._syncFormValue(), this._syncUi();
+  }
+  _showSeconds() {
+    return this.hasAttribute("seconds");
+  }
+  _is12h() {
+    return (this.getAttribute("format") || "").toLowerCase() === "12h";
+  }
+  _normalizeTimeValue(e) {
+    const i = A(e || "", !0);
+    if (!i)
+      return null;
+    const t = x(i, this._showSeconds()), r = this.getAttribute("min"), s = this.getAttribute("max");
+    return T(t, r, s);
+  }
+  _partsOrFallback() {
+    return f(this._value, this._showSeconds()) || f(this.getAttribute("min"), this._showSeconds()) || { hours: 9, minutes: 0, seconds: 0 };
+  }
+  _order() {
+    const e = ["hour", "minute"];
+    return this._showSeconds() && e.push("second"), this._is12h() && e.push("meridiem"), e;
+  }
+  _focusSegment(e) {
+    var i;
+    this._activeSegment = e, this._syncUi(), (i = this._segmentButtons.get(e)) == null || i.focus();
+  }
+  _moveSegmentFocus(e) {
+    const i = this._order(), t = i.indexOf(this._activeSegment), r = i[(t + e + i.length) % i.length];
+    this._focusSegment(r);
+  }
+  _setBuffer(e, i) {
+    this._bufferBySegment[e] = i, this._bufferTimer != null && window.clearTimeout(this._bufferTimer), this._bufferTimer = window.setTimeout(() => {
+      this._bufferBySegment.hour = "", this._bufferBySegment.minute = "", this._bufferBySegment.second = "", this._bufferTimer = null;
+    }, 900);
+  }
+  _applyParts(e, i) {
+    const t = this._normalizeTimeValue(x(e, this._showSeconds()));
+    this._setValue(t, i);
+  }
+  _setValue(e, i) {
+    const t = this._normalizeTimeValue(e);
+    if (t === this._value) {
+      this._syncFormValue(), this._syncUi();
+      return;
+    }
+    const r = this._value;
+    this._value = t, t ? this.setAttribute("value", t) : this.removeAttribute("value"), this._syncFormValue(), this._syncUi(), this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: t, previousValue: r, source: i },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _syncFormValue() {
+    var e;
+    try {
+      (e = this._internals) == null || e.setFormValue(this.value || "");
+    } catch {
+    }
+  }
+  _increment(e, i) {
+    const t = this._partsOrFallback();
+    if (e === "meridiem") {
+      t.hours = (t.hours + 12) % 24, this._applyParts(t, "keyboard");
+      return;
+    }
+    const u = (t.hours * 3600 + t.minutes * 60 + t.seconds + i * (e === "hour" ? 3600 : e === "minute" ? 60 : 1) + 86400) % 86400, a = {
+      hours: Math.floor(u / 3600),
+      minutes: Math.floor(u % 3600 / 60),
+      seconds: u % 60
+    };
+    this._applyParts(a, "keyboard");
+  }
+  _applyNumericInput(e, i) {
+    const t = `${this._bufferBySegment[e]}${i}`.slice(-2);
+    if (this._setBuffer(e, t), t.length < 2)
+      return;
+    const r = this._partsOrFallback(), s = Number(t);
+    if (Number.isFinite(s)) {
+      if (e === "hour")
+        if (this._is12h()) {
+          const { meridiem: u } = _(r), a = Math.min(Math.max(s, 1), 12);
+          r.hours = S(a, u);
+        } else
+          r.hours = Math.min(Math.max(s, 0), 23);
+      else
+        e === "minute" ? r.minutes = Math.min(Math.max(s, 0), 59) : r.seconds = Math.min(Math.max(s, 0), 59);
+      this._applyParts(r, "keyboard"), this._moveSegmentFocus(1);
+    }
+  }
+  _onSegmentClick(e) {
+    const i = e.currentTarget.getAttribute("data-segment");
+    i && this._focusSegment(i);
+  }
+  _onSegmentKeyDown(e) {
+    if (this.hasAttribute("disabled") || this.hasAttribute("readonly"))
+      return;
+    const i = e.currentTarget.getAttribute("data-segment");
+    if (i) {
+      if (e.key === "ArrowLeft") {
+        e.preventDefault(), this._moveSegmentFocus(-1);
+        return;
+      }
+      if (e.key === "ArrowRight") {
+        e.preventDefault(), this._moveSegmentFocus(1);
+        return;
+      }
+      if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+        e.preventDefault(), this._increment(i, e.key === "ArrowUp" ? 1 : -1);
+        return;
+      }
+      if (e.key === "Backspace" || e.key === "Delete") {
+        e.preventDefault(), this.clearValue();
+        return;
+      }
+      if (i === "meridiem" && /^[ap]$/i.test(e.key)) {
+        e.preventDefault();
+        const t = this._partsOrFallback(), r = e.key.toLowerCase() === "a" ? "AM" : "PM", s = _(t).hour;
+        t.hours = S(s, r), this._applyParts(t, "keyboard");
+        return;
+      }
+      /^\d$/.test(e.key) && i !== "meridiem" && (e.preventDefault(), this._applyNumericInput(i, e.key));
+    }
+  }
+  _registerWithForm() {
+    var e;
+    this._formUnregister && (this._formUnregister(), this._formUnregister = null);
+    try {
+      const t = this.getRootNode().host, s = ((e = t == null ? void 0 : t.closest) == null ? void 0 : e.call(t, "ui-form")) || null || this.closest("ui-form"), u = this.getAttribute("name");
+      s && typeof s.registerField == "function" && u && (this._formUnregister = s.registerField(u, {
+        name: u,
+        getValue: () => this.value,
+        setValue: (a) => this._setValue(a ? String(a) : null, "form"),
+        validate: async () => this.hasAttribute("required") && !this.value ? { valid: !1, message: "Time is required" } : { valid: !0 },
+        setError: (a) => {
+          a ? this.setAttribute("data-error", a) : this.removeAttribute("data-error"), this._syncUi();
+        }
+      }));
+    } catch {
+    }
+  }
+  _onFocusIn() {
+    var e;
+    (e = this._shellEl) == null || e.setAttribute("data-focused", "true");
+  }
+  _onFocusOut(e) {
+    var i, t;
+    (i = this._shellEl) != null && i.contains(e.relatedTarget) || (t = this._shellEl) == null || t.setAttribute("data-focused", "false");
+  }
+  _syncUi() {
+    if (!this._segmentsEl || !this._shellEl || !this._errorEl)
+      return;
+    const e = this.root.activeElement, i = !!e && this._segmentsEl.contains(e), t = (this.getAttribute("label") || "").trim(), r = (this.getAttribute("description") || "").trim(), s = (this.getAttribute("data-error") || "").trim(), u = this.root.querySelector(".meta"), a = this.root.querySelector(".label"), k = this.root.querySelector(".label-text"), w = this.root.querySelector(".required"), c = this.root.querySelector(".description"), b = `${this._uid}-label`, p = `${this._uid}-description`, g = `${this._uid}-error`;
+    u.hidden = !t && !r, a.hidden = !t, a.id = t ? b : "", k.textContent = t, w.hidden = !this.hasAttribute("required"), c.hidden = !r, c.id = r ? p : "", c.textContent = r, this._errorEl.hidden = !s, this._errorEl.id = s ? g : "", this._errorEl.textContent = s, this._shellEl.setAttribute("data-invalid", s ? "true" : "false"), this._shellEl.setAttribute("role", "group"), t ? this._shellEl.setAttribute("aria-labelledby", b) : this._shellEl.removeAttribute("aria-labelledby");
+    const y = [r ? p : null, s ? g : null].filter(Boolean).join(" ");
+    y ? this._shellEl.setAttribute("aria-describedby", y) : this._shellEl.removeAttribute("aria-describedby"), this._shellEl.setAttribute("aria-invalid", s ? "true" : "false"), this._shellEl.setAttribute("aria-required", this.hasAttribute("required") ? "true" : "false"), this._shellEl.setAttribute("aria-disabled", this.hasAttribute("disabled") ? "true" : "false"), this._shellEl.setAttribute("aria-readonly", this.hasAttribute("readonly") ? "true" : "false");
+    const d = f(this._value, this._showSeconds()), F = this._order(), m = [];
+    this._segmentButtons.clear();
+    const v = d ? _(d) : null;
+    if (F.forEach((o, C) => {
+      if (C > 0) {
+        const h = document.createElement("span");
+        h.className = "literal", h.textContent = o === "meridiem" ? " " : ":", m.push(h);
+      }
+      const n = document.createElement("button");
+      if (n.type = "button", n.className = "segment", n.setAttribute("data-segment", o), n.setAttribute("data-active", this._activeSegment === o ? "true" : "false"), n.setAttribute("data-empty", d ? "false" : "true"), n.setAttribute("aria-label", o === "hour" ? "Hour" : o === "minute" ? "Minute" : o === "second" ? "Second" : "AM or PM"), n.tabIndex = this._activeSegment === o ? 0 : -1, n.disabled = this.hasAttribute("disabled"), n.addEventListener("click", this._onSegmentClick), n.addEventListener("keydown", this._onSegmentKeyDown), !d)
+        n.textContent = I(o);
+      else if (o === "hour") {
+        const h = this._is12h() ? v.hour : d.hours;
+        n.textContent = String(h).padStart(2, "0");
+      } else
+        o === "minute" ? n.textContent = String(d.minutes).padStart(2, "0") : o === "second" ? n.textContent = String(d.seconds).padStart(2, "0") : n.textContent = v.meridiem;
+      this._segmentButtons.set(o, n), m.push(n);
+    }), this._segmentsEl.replaceChildren(...m), i) {
+      const o = this._segmentButtons.get(this._activeSegment);
+      try {
+        o == null || o.focus({ preventScroll: !0 });
+      } catch {
+        o == null || o.focus();
+      }
+    }
+  }
+}
+E.formAssociated = !0;
+typeof customElements < "u" && !customElements.get("ui-time-field") && customElements.define("ui-time-field", E);
+export {
+  E as UITimeField
+};