@golemui/gui-react 0.12.2 → 0.13.1

package/date-input-Dux0mFJw.js

@@ -0,0 +1,266 @@
+import { i as y, A as u, b as l, n as d, t as g } from "./directive-1yd1wdny.js";
+import { r as p } from "./state-DI9ZsB5W.js";
+import { l as m } from "./live-BfTBpQrp.js";
+import { c as _ } from "./repeat-BucBfSPF.js";
+import { e as f } from "./class-map-DrTVAYz_.js";
+import { G as v, b as A, c as S } from "./templates-DBGyvZtc.js";
+import { t as b } from "./date-BS1lA1xg.js";
+import "@golemui/gui-shared";
+var w = Object.defineProperty, I = Object.getOwnPropertyDescriptor, h = (t, e, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? I(e, a) : e, n = t.length - 1, s; n >= 0; n--)
+    (s = t[n]) && (r = (i ? s(e, a, r) : s(r)) || r);
+  return i && r && w(e, a, r), r;
+};
+let o = class extends y {
+  constructor() {
+    super(...arguments), this.uid = void 0, this.label = void 0, this.localeId = void 0, this.errors = [], this.showErrors = !0, this.touched = !1, this.required = !1, this.disabled = !1, this.readOnly = !1, this.value = void 0, this.icon = "", this.hint = void 0, this._day = "", this._month = "", this._year = "", this.MIN_DAY = 1, this.MAX_DAY = 31, this.MAX_VALID_DAY = (t, e) => t === 2 ? new Date(e, 1, 29).getDate() === 29 || !e ? 29 : 28 : t === 4 || t === 6 || t === 9 || t === 11 ? 30 : 31, this.MIN_MONTH = 1, this.MAX_MONTH = 12, this.MIN_YEAR = 1e3, this.MAX_YEAR = 9999, this.ariaController = new v(this, {
+      getTargets: () => this.querySelectorAll(".gui-date-input"),
+      getState: () => ({
+        uid: this.uid,
+        templateData: {
+          hint: this.hint,
+          errors: this.errors,
+          readonly: this.readOnly,
+          disabled: this.disabled,
+          touched: this.touched
+        }
+      })
+    });
+  }
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-field");
+  }
+  willUpdate(t) {
+    t.has("value") && this.parseValue(this.value ?? "");
+  }
+  render() {
+    const t = {
+      uid: this.uid,
+      label: this.label,
+      errors: this.errors,
+      touched: this.touched,
+      required: this.required,
+      disabled: this.disabled,
+      readonly: this.readOnly,
+      value: this.value,
+      icon: this.icon,
+      hint: this.hint
+    }, e = new Intl.DateTimeFormat(this.localeId ?? "en", {
+      year: "numeric",
+      month: "numeric",
+      day: "numeric"
+    }).formatToParts(/* @__PURE__ */ new Date()), a = {
+      "gui-widget-icon": !0,
+      [this.icon]: !0
+    };
+    return l`
+      ${this.label ? A(this.uid, t) : u}
+
+      <div class="gui-widget">
+        <div class="gui-date-input ${this.icon ? "gui-calendar--icon" : ""}" role="group">
+          ${_(
+      e,
+      (i) => i.type,
+      (i, r) => {
+        const n = r === 0 ? 0 : -1;
+        switch (i.type) {
+          case "day":
+            return this.renderInput("day", "dd", 2, n, this._day);
+          case "month":
+            return this.renderInput("month", "mm", 2, n, this._month);
+          case "year":
+            return this.renderInput("year", "yyyy", 4, n, this._year);
+          case "literal":
+            return l`<span class="gui-date-input__separator">${i.value}</span>`;
+          default:
+            return "";
+        }
+      }
+    )}
+        </div>
+        ${this.icon ? l`<span class=${f(a)} data-icon=${this.icon}></span>` : u}
+      </div>
+
+      ${this.showErrors && this.errors?.length ? S(this.uid, t) : u}
+    `;
+  }
+  renderInput(t, e, a, i, r) {
+    return l`
+      <div class="gui-date-input__touch-target">
+        <input
+          type="text"
+          inputmode="numeric"
+          class="gui-date-input__part ${t === "year" ? "gui-date-input__year" : ""}"
+          data-type=${t}
+          maxlength=${a}
+          placeholder=${e}
+          tabindex=${i}
+          ?required=${this.required}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readOnly}
+          autocomplete="off"
+          .value=${m(r)}
+          @keydown=${this.handleKeyDown}
+          @keyup=${(n) => this.handleKeyUp(n, t)}
+          @focus=${this.handleFocus}
+          @blur=${(n) => this.handleBlur(n, t)}
+          @change=${(n) => this.handleChange(n, t)}
+        />
+        <div class="gui-date-input__visual-underline"></div>
+      </div>
+    `;
+  }
+  parseValue(t) {
+    if (!t) {
+      this._day = "", this._month = "", this._year = "";
+      return;
+    }
+    const e = new Date(t);
+    isNaN(e.getTime()) || (this._day = e.getDate().toString().padStart(2, "0"), this._month = (e.getMonth() + 1).toString().padStart(2, "0"), this._year = e.getFullYear().toString());
+  }
+  handleKeyDown(t) {
+    [
+      "Backspace",
+      "Tab",
+      "ArrowUp",
+      "ArrowDown",
+      "ArrowLeft",
+      "ArrowRight",
+      "Delete",
+      "Enter"
+    ].includes(t.key) || t.ctrlKey || t.metaKey || this.readOnly || /^[0-9]$/.test(t.key) || t.preventDefault();
+  }
+  handleFocus(t) {
+    this.dispatchEvent(new CustomEvent("focus", { detail: t }));
+  }
+  handleKeyUp(t, e) {
+    if (this.readOnly) return;
+    const a = window.getComputedStyle(this).direction === "rtl", i = t.target, r = Array.from(this.querySelectorAll("input")), n = r.indexOf(i);
+    switch (i.value.length === i.maxLength && /^[0-9]$/.test(t.key) && (n === r.length - 1 ? r[0].focus() : r[n + 1].focus()), t.key) {
+      case "ArrowUp": {
+        const s = isNaN(parseInt(i.value, 10) + 1) ? 1 : parseInt(i.value, 10) + 1;
+        e === "year" && (this._year = s.toString().padStart(4, "0")), e === "month" && (this._month = s.toString().padStart(2, "0")), e === "day" && (this._day = s.toString().padStart(2, "0")), i.select(), this.validateAndEmit();
+        break;
+      }
+      case "ArrowDown": {
+        const s = isNaN(parseInt(i.value, 10) - 1) ? 1 : parseInt(i.value, 10) - 1;
+        e === "year" && (this._year = s.toString().padStart(4, "0")), e === "month" && (this._month = s.toString().padStart(2, "0")), e === "day" && (this._day = s.toString().padStart(2, "0")), i.select(), this.validateAndEmit();
+        break;
+      }
+      case "ArrowLeft": {
+        const s = a ? n + 1 : n - 1;
+        s >= 0 && s < r.length && (r[s].focus(), r[s].select());
+        break;
+      }
+      case "ArrowRight": {
+        const s = a ? n - 1 : n + 1;
+        s >= 0 && s < r.length && (r[s].focus(), r[s].select());
+        break;
+      }
+    }
+  }
+  handleChange(t, e) {
+    if (t.stopImmediatePropagation(), this.readOnly) return;
+    const i = t.target.value.replace(/[^0-9]/g, "");
+    switch (e) {
+      case "day":
+        this._day = i;
+        break;
+      case "month":
+        this._month = i;
+        break;
+      case "year":
+        this._year = i;
+        break;
+    }
+    this.validateAndEmit();
+  }
+  handleBlur(t, e) {
+    const a = t.target, i = parseInt(a.value, 10);
+    if (!isNaN(i) && i > 0) {
+      const r = e === "year" ? 4 : 2;
+      a.value = i.toString().padStart(r, "0");
+    } else
+      this.dispatchEvent(new CustomEvent("change", { detail: { value: null } }));
+    this.dispatchEvent(new CustomEvent("blur"));
+  }
+  validateAndEmit() {
+    let t = parseInt(this._year, 10), e = parseInt(this._month, 10), a = parseInt(this._day, 10);
+    t > this.MAX_YEAR && (t = this.MAX_YEAR, this._year = t.toString().padStart(4, "0")), t < this.MIN_YEAR && (t = this.MIN_YEAR, this._year = t.toString().padStart(4, "0")), e > this.MAX_MONTH && (e = this.MAX_MONTH, this._month = e.toString().padStart(2, "0")), e < this.MIN_MONTH && (e = this.MIN_MONTH, this._month = e.toString().padStart(2, "0")), a > this.MAX_DAY && (a = this.MAX_DAY, this._day = a.toString().padStart(2, "0")), a < this.MIN_DAY && (a = this.MIN_DAY, this._day = a.toString().padStart(2, "0"));
+    const i = !isNaN(t) && String(t).length === 4, r = !isNaN(e) && e > 0;
+    if (!isNaN(a) && a > 0 && r && i) {
+      const s = this.MAX_VALID_DAY(e, t);
+      if (a > s)
+        this.dispatchEvent(
+          new CustomEvent("inputError", {
+            detail: {
+              message: "Invalid date: day is greater than the maximum valid day for the month and year."
+            },
+            bubbles: !0
+          })
+        );
+      else {
+        const c = new Date(t, e - 1, a);
+        this.value = b(c), this.dispatchEvent(
+          new CustomEvent("change", {
+            detail: { value: this.value },
+            bubbles: !0
+          })
+        );
+      }
+    }
+    this.requestUpdate();
+  }
+};
+h([
+  d({ type: String })
+], o.prototype, "uid", 2);
+h([
+  d({ type: String })
+], o.prototype, "label", 2);
+h([
+  d({ type: String, attribute: "locale-id" })
+], o.prototype, "localeId", 2);
+h([
+  d({ type: Array })
+], o.prototype, "errors", 2);
+h([
+  d({ type: Boolean })
+], o.prototype, "showErrors", 2);
+h([
+  d({ type: Boolean })
+], o.prototype, "touched", 2);
+h([
+  d({ type: Boolean })
+], o.prototype, "required", 2);
+h([
+  d({ type: Boolean })
+], o.prototype, "disabled", 2);
+h([
+  d({ type: Boolean, attribute: "readonly" })
+], o.prototype, "readOnly", 2);
+h([
+  d({ type: String })
+], o.prototype, "value", 2);
+h([
+  d({ type: String })
+], o.prototype, "icon", 2);
+h([
+  d({ type: String })
+], o.prototype, "hint", 2);
+h([
+  p()
+], o.prototype, "_day", 2);
+h([
+  p()
+], o.prototype, "_month", 2);
+h([
+  p()
+], o.prototype, "_year", 2);
+o = h([
+  g("gui-date")
+], o);
+typeof customElements < "u" && !customElements.get("gui-date") && customElements.define("gui-date", o);