@golemui/gui-lit 1.0.3 → 1.1.0

package/range-time-input-3lhqR1Ku.js

@@ -0,0 +1,329 @@
+import { LitElement as c, nothing as d, html as p } from "lit";
+import { property as s, customElement as g } from "lit/decorators.js";
+import { classMap as v } from "lit/directives/class-map.js";
+import { styleMap as y } from "lit-html/directives/style-map.js";
+import { G as b, b as f, c as T } from "./templates-Dk1jxLwS.js";
+import { G as E, g as _, u as P, r as m, l as S, s as h, v as C, w as D, x as L, t as R } from "./part-templates-Db871PS3.js";
+import { c as w } from "./range-commit-8-MmYUyo.js";
+import { r as A, f as I, b as $, a as k, s as M } from "./pill-ranges-DCqDmpkk.js";
+import "./pills-Be1UrLgq.js";
+import { e as F, b as O } from "./date-Bj9mI3GU.js";
+var B = Object.defineProperty, G = Object.getOwnPropertyDescriptor, i = (t, a, o, r) => {
+  for (var l = r > 1 ? void 0 : r ? G(a, o) : a, n = t.length - 1, u; n >= 0; n--)
+    (u = t[n]) && (l = (r ? u(a, o, l) : u(l)) || l);
+  return r && l && B(a, o, l), l;
+};
+let e = class extends c {
+  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.icon = "", this.hint = void 0, this.hourFormat = void 0, this.minuteStep = 1, this.minTime = void 0, this.maxTime = void 0, this.minTimeMessage = void 0, this.maxTimeMessage = void 0, this.value = [], this.rangeOrderMessage = void 0, this.removePillAriaLabel = void 0, this.startTimeAriaLabel = void 0, this.endTimeAriaLabel = void 0, this.separator = void 0, this.allowCustomTime = void 0, this.disabledRanges = void 0, this.disabledRangeMessage = void 0, this.inputBlockClass = "gui-range-time-input", this.groups = ["start", "end"], this._validationTriggered = !1, this._parts = new E(this, {
+      blockClass: this.inputBlockClass,
+      groups: this.groups,
+      getDescriptor: (t) => this.getPartDescriptor(t),
+      commitGroup: () => {
+        this._validationTriggered ? this.revalidate() : this.syncParts();
+      },
+      onInputErrorSurfaced: (t) => this.dispatchEvent(new CustomEvent("inputError", { detail: { message: t }, bubbles: !0 })),
+      onSurfacedErrorCleared: (t) => this.dispatchEvent(
+        new CustomEvent("change", { detail: { value: t }, bubbles: !0, composed: !0 })
+      ),
+      isReadonly: () => !!this.readOnly || this.allowCustomTime === !1,
+      isDisabled: () => !!this.disabled,
+      onEmptyPartBlur: () => {
+      },
+      onEnter: () => {
+        this.tryCreatePill(), this.value && this.value.length > 0 && this.onPillClick(this.value[this.value.length - 1]);
+      },
+      getHourFormat: () => this.timeLocaleData.effectiveHourFormat,
+      getDayPeriodLabels: () => this.timeLocaleData.dayPeriodLabels
+    }), this.ariaController = new b(this, {
+      getTargets: () => this.querySelectorAll(`.${this.inputBlockClass}`),
+      getState: () => ({
+        uid: this.uid,
+        templateData: {
+          hint: this.hint,
+          errors: this.errors,
+          readonly: this.readOnly,
+          disabled: this.disabled,
+          touched: this.touched
+        }
+      })
+    }), this.onPillRemoveEvent = (t) => {
+      if (this.disabled || this.readOnly) return;
+      const a = A(this.value, t.detail.key);
+      a && (this.value = a.next, this.dispatchEvent(
+        new CustomEvent("change", { detail: { value: this.value }, bubbles: !0, composed: !0 })
+      ), a.next.length === 0 && requestAnimationFrame(() => {
+        this.querySelector(".gui-range-time-input__field input")?.focus();
+      }));
+    }, this.onPillClickEvent = (t) => {
+      const a = I(this.getSortedPills(), t.detail.key);
+      a && this.onPillClick(a);
+    };
+  }
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-field");
+  }
+  get timeLocaleData() {
+    return _(this.localeId, this.hourFormat, this.minuteStep);
+  }
+  getPartDescriptor(t) {
+    return this.timeLocaleData.descriptors[t];
+  }
+  willUpdate(t) {
+    (!this.hasUpdated || t.has("hourFormat") || t.has("localeId")) && this._parts.seedDayPeriods();
+  }
+  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,
+      hint: this.hint
+    }, a = {
+      blockClass: this.inputBlockClass,
+      groups: this.groups,
+      formatParts: P(this.localeId, this.timeLocaleData.effectiveHourFormat),
+      getDescriptor: (l) => this.getPartDescriptor(l),
+      getDisplayValue: this._parts.getPartDisplay,
+      required: this.required,
+      disabled: this.disabled,
+      partsReadonly: !!this.readOnly || this.allowCustomTime === !1
+    }, o = $(
+      this.getSortedPills(),
+      (l) => k(l, (n) => this.formatTimeForDisplay(n)),
+      this.removePillAriaLabel ?? "Remove time"
+    ), r = {
+      "gui-widget-icon": !0,
+      [this.icon]: !!this.icon
+    };
+    return p`
+      ${this.label ? f(this.uid, t, !1, void 0, !1) : d}
+
+      <div class="gui-widget">
+        <div
+          class="gui-widget-input gui-parts-ring gui-range-time-input ${this.icon ? "gui-range-time-input--icon" : ""}"
+          role="group"
+          aria-label=${this.label ?? "Time range input"}
+        >
+          ${this.icon ? p`<span class=${v(r)} data-icon=${this.icon}></span>` : d}
+
+          <gui-pills
+            class="gui-range-time-input__pills"
+            style=${y(o.length ? {} : { "min-width": 0 })}
+            .items=${o}
+            .removable=${!0}
+            .clickable=${!0}
+            .bubble=${!0}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readOnly}
+            .removeAriaLabel=${this.removePillAriaLabel ?? "Remove time"}
+            .compactAriaLabel=${`${o.length} time ranges`}
+            @pillremove=${this.onPillRemoveEvent}
+            @pillclick=${this.onPillClickEvent}
+          ></gui-pills>
+
+          <div class="gui-range-time-input__inputs">
+            <div
+              class="gui-parts gui-range-time-input__field"
+              role="group"
+              aria-label=${this.startTimeAriaLabel ?? "Start time"}
+            >
+              ${m("start", a, this._parts)}
+            </div>
+
+            <span class="gui-range-time-input__separator">${this.separator ?? "-"}</span>
+
+            <div
+              class="gui-parts gui-range-time-input__field"
+              role="group"
+              aria-label=${this.endTimeAriaLabel ?? "End time"}
+            >
+              ${m("end", a, this._parts)}
+            </div>
+          </div>
+        </div>
+
+        ${this.showErrors && this.errors?.length ? T(this.uid, t) : d}
+      </div>
+    `;
+  }
+  onPillClick(t) {
+    this.dispatchEvent(
+      new CustomEvent("pillClick", { detail: { range: t }, bubbles: !0, composed: !0 })
+    );
+  }
+  formatTimeForDisplay(t) {
+    return S(t, this.localeId, this.timeLocaleData.effectiveHourFormat);
+  }
+  getSortedPills() {
+    return M(this.value, h);
+  }
+  /**
+   * Parses a group's parts into an ISO time via the shared clamp/bounds
+   * pipeline, surfacing a bounds violation as an inputError. Returns null while
+   * the group is incomplete or out of bounds.
+   */
+  validateTimeParts(t) {
+    const { effectiveHourFormat: a, descriptors: o } = this.timeLocaleData, { result: r, writeBacks: l } = C(this._parts.values[t] ?? {}, {
+      hourFormat: a,
+      descriptors: o
+    });
+    if (this._parts.applyWriteBacks(t, l), r.kind !== "valid") return { kind: "incomplete" };
+    const n = D(r.iso, {
+      minTime: this.minTime,
+      maxTime: this.maxTime,
+      minTimeMessage: this.minTimeMessage,
+      maxTimeMessage: this.maxTimeMessage
+    });
+    return n ? { kind: "invalid", message: n } : { kind: "valid", value: r.iso };
+  }
+  /**
+   * Fills a group's segmented parts from an ISO time. The range time picker
+   * calls this so a list pick lands in the visible input (start/end field)
+   * before it attempts to commit — see {@link commitFromParts}.
+   */
+  fillGroup(t, a) {
+    this._parts.setGroupFromISO(t, a, "time", this.timeLocaleData.effectiveHourFormat), this.requestUpdate();
+  }
+  /**
+   * Attempts to commit the currently-entered parts as a pill, returning whether
+   * one was created. A public entry point onto the same {@link tryCreatePill}
+   * pipeline typed entry uses, so the picker's list-driven commits validate
+   * (order + bounds + disabled ranges) through one path.
+   */
+  commitFromParts() {
+    return this.tryCreatePill();
+  }
+  /**
+   * Re-parses both endpoints (surfacing per-endpoint bounds errors as the user
+   * types) and notifies the host picker via `partsChange` so its time lists
+   * follow the typed values. Runs on every part change.
+   */
+  syncParts() {
+    const t = this.validateTimeParts("start"), a = this.validateTimeParts("end"), o = (r) => r.kind === "valid" ? r.value : null;
+    return this.dispatchEvent(
+      new CustomEvent("partsChange", {
+        detail: { start: o(t), end: o(a) },
+        bubbles: !0,
+        composed: !0
+      })
+    ), { start: t, end: a };
+  }
+  /**
+   * Parses the range and updates the error state, without ever committing.
+   * Shared by the Enter commit and by {@link revalidate}.
+   */
+  evaluateRange() {
+    const { start: t, end: a } = this.syncParts(), o = w(t, a, this.value, {
+      validate: (r) => h(r.end, r.start) <= 0 ? this.rangeOrderMessage ?? F : R(r.start, r.end, this.disabledRanges) ? this.disabledRangeMessage ?? O : null,
+      toRange: (r) => ({ start: r.start, end: r.end }),
+      merge: L
+    });
+    return o.kind === "incomplete" && this._parts.clearSurfacedInputError(this.value ?? []), o.kind === "invalid" && this._parts.surfaceInputError(o.message), o;
+  }
+  /**
+   * Once the user has attempted a commit, every later edit re-runs validation
+   * so a corrected range clears its error immediately, otherwise the message
+   * would linger until the next Enter and the user could not tell the problem
+   * was solved.
+   */
+  revalidate() {
+    this.evaluateRange().kind === "commit" && this._parts.clearSurfacedInputError(this.value ?? []);
+  }
+  tryCreatePill() {
+    this._validationTriggered = !0;
+    const t = this.evaluateRange();
+    return t.kind !== "commit" ? !1 : (this.value = t.value, this._validationTriggered = !1, this._parts.clearGroup("start"), this._parts.clearGroup("end"), this._parts.seedDayPeriods(), this.dispatchEvent(
+      new CustomEvent("change", { detail: { value: this.value }, bubbles: !0, composed: !0 })
+    ), this._parts.focusFirst("start"), this.requestUpdate(), !0);
+  }
+};
+i([
+  s({ type: String })
+], e.prototype, "uid", 2);
+i([
+  s({ type: String })
+], e.prototype, "label", 2);
+i([
+  s({ type: String, attribute: "locale-id" })
+], e.prototype, "localeId", 2);
+i([
+  s({ type: Array })
+], e.prototype, "errors", 2);
+i([
+  s({ type: Boolean })
+], e.prototype, "showErrors", 2);
+i([
+  s({ type: Boolean })
+], e.prototype, "touched", 2);
+i([
+  s({ type: Boolean })
+], e.prototype, "required", 2);
+i([
+  s({ type: Boolean })
+], e.prototype, "disabled", 2);
+i([
+  s({ type: Boolean, attribute: "readonly" })
+], e.prototype, "readOnly", 2);
+i([
+  s({ type: String })
+], e.prototype, "icon", 2);
+i([
+  s({ type: String })
+], e.prototype, "hint", 2);
+i([
+  s({ type: String, attribute: "hour-format" })
+], e.prototype, "hourFormat", 2);
+i([
+  s({ type: Number, attribute: "minute-step" })
+], e.prototype, "minuteStep", 2);
+i([
+  s({ type: String, attribute: "min-time" })
+], e.prototype, "minTime", 2);
+i([
+  s({ type: String, attribute: "max-time" })
+], e.prototype, "maxTime", 2);
+i([
+  s({ type: String, attribute: "min-time-message" })
+], e.prototype, "minTimeMessage", 2);
+i([
+  s({ type: String, attribute: "max-time-message" })
+], e.prototype, "maxTimeMessage", 2);
+i([
+  s({ type: Array })
+], e.prototype, "value", 2);
+i([
+  s({ type: String, attribute: "range-order-message" })
+], e.prototype, "rangeOrderMessage", 2);
+i([
+  s({ type: String })
+], e.prototype, "removePillAriaLabel", 2);
+i([
+  s({ type: String })
+], e.prototype, "startTimeAriaLabel", 2);
+i([
+  s({ type: String })
+], e.prototype, "endTimeAriaLabel", 2);
+i([
+  s({ type: String })
+], e.prototype, "separator", 2);
+i([
+  s({ type: Boolean, attribute: "allow-custom-time" })
+], e.prototype, "allowCustomTime", 2);
+i([
+  s({ type: Array, attribute: "disabled-ranges" })
+], e.prototype, "disabledRanges", 2);
+i([
+  s({ type: String, attribute: "disabled-range-message" })
+], e.prototype, "disabledRangeMessage", 2);
+e = i([
+  g("gui-range-time")
+], e);
+typeof customElements < "u" && !customElements.get("gui-range-time") && customElements.define("gui-range-time", e);

package/range-time-input.element-dU2iBdmJ.js

@@ -0,0 +1,81 @@
+import { InputWidgetAdapter as n, formContext as m, inputContext as o } from "@golemui/lit";
+import "./range-time-input-3lhqR1Ku.js";
+import { consume as h, provide as u } from "@lit/context";
+import { LitElement as c, html as g } from "lit";
+import { property as D, customElement as $ } from "lit/decorators.js";
+import "rxjs";
+var b = Object.defineProperty, f = Object.getOwnPropertyDescriptor, d = (e, t, s, r) => {
+  for (var a = r > 1 ? void 0 : r ? f(t, s) : t, p = e.length - 1, l; p >= 0; p--)
+    (l = e[p]) && (a = (r ? l(t, s, a) : l(a)) || a);
+  return r && a && b(t, s, a), a;
+};
+let i = class extends c {
+  constructor() {
+    super(...arguments), this.adapter = new n(), this.subscriptions = [];
+  }
+  createRenderRoot() {
+    return this;
+  }
+  updated(e) {
+    super.updated(e);
+    const t = this.adapter.templateData.size;
+    t ? this.style.flex = String(t) : this.style.removeProperty("flex");
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-range-time", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
+      this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
+    );
+  }
+  render() {
+    return super.render(), g`
+      <gui-range-time
+        .uid=${this.widget.uid}
+        .label=${this.adapter.templateData.label}
+        .hint=${this.adapter.templateData.hint}
+        .icon=${this.adapter.templateData.icon}
+        .errors=${this.adapter.templateData.errors}
+        ?touched=${this.adapter.templateData.touched}
+        ?required=${this.adapter.templateData.validator?.required}
+        ?disabled=${this.adapter.templateData.disabled}
+        ?readonly=${this.adapter.templateData.readonly}
+        .value=${this.adapter.templateData.value}
+        .localeId=${this.adapter.templateData.lang}
+        .separator=${this.adapter.templateData.separator}
+        .removePillAriaLabel=${this.adapter.templateData.removePillAriaLabel}
+        .startTimeAriaLabel=${this.adapter.templateData.startTimeAriaLabel}
+        .endTimeAriaLabel=${this.adapter.templateData.endTimeAriaLabel}
+        .hourFormat=${this.adapter.templateData.hourFormat}
+        .minuteStep=${this.adapter.templateData.minuteStep}
+        .minTime=${this.adapter.templateData.minTime}
+        .maxTime=${this.adapter.templateData.maxTime}
+        .minTimeMessage=${this.adapter.templateData.minTimeMessage}
+        .maxTimeMessage=${this.adapter.templateData.maxTimeMessage}
+        .rangeOrderMessage=${this.adapter.templateData.rangeOrderMessage}
+        @change=${this.valueChanged}
+        @inputError=${this.onInputError}
+      ></gui-range-time>
+    `;
+  }
+  valueChanged(e) {
+    this.adapter.injectValidationIssues(null), this.adapter.valueChanged(e.detail.value);
+  }
+  onInputError(e) {
+    this.adapter.injectValidationIssues([e.detail.message]);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((e) => e.unsubscribe());
+  }
+};
+d([
+  h({ context: m }),
+  D({ attribute: !1 })
+], i.prototype, "formContext", 2);
+d([
+  u({ context: o })
+], i.prototype, "adapter", 2);
+i = d([
+  $("gui-range-time-input")
+], i);
+export {
+  i as RangeTimeInputElement
+};