@golemui/gui-lit 1.2.0 → 1.2.1

package/range-time-input-D7GFdDeA.js

@@ -1,348 +0,0 @@
-import { LitElement as c, nothing as d, html as p } from "lit";
-import { property as a, 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-Df7abEkB.js";
-import { G as _, g as E, u as P, r as h, l as L, s as m, v as S, w as A, x as C, t as D, P as R } from "./part-templates-VORbpgs2.js";
-import { c as $ } from "./range-commit-8-MmYUyo.js";
-import { r as I, f as w, b as k, a as M, s as F } from "./pill-ranges-DpvWwP-3.js";
-import "./pills-BDMO2NiR.js";
-import { f as B, e as O } from "./date-DBuYpvcO.js";
-var G = Object.defineProperty, x = Object.getOwnPropertyDescriptor, i = (t, s, o, r) => {
-  for (var l = r > 1 ? void 0 : r ? x(s, o) : s, n = t.length - 1, u; n >= 0; n--)
-    (u = t[n]) && (l = (r ? u(s, o, l) : u(l)) || l);
-  return r && l && G(s, 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.hourAriaLabel = void 0, this.minuteAriaLabel = void 0, this.dayPeriodAriaLabel = 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 _(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,
-          required: this.required
-        }
-      })
-    }), this.onPillRemoveEvent = (t) => {
-      if (this.disabled || this.readOnly) return;
-      const s = I(this.value, t.detail.key);
-      s && (this.value = s.next, this.dispatchEvent(
-        new CustomEvent("change", { detail: { value: this.value }, bubbles: !0, composed: !0 })
-      ), s.next.length === 0 && requestAnimationFrame(() => {
-        this.querySelector(".gui-range-time-input__field input")?.focus();
-      }));
-    }, this.onPillClickEvent = (t) => {
-      const s = w(this.getSortedPills(), t.detail.key);
-      s && this.onPillClick(s);
-    };
-  }
-  createRenderRoot() {
-    return this;
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-field");
-  }
-  get timeLocaleData() {
-    return E(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
-    }, s = {
-      blockClass: this.inputBlockClass,
-      groups: this.groups,
-      formatParts: P(this.localeId, this.timeLocaleData.effectiveHourFormat),
-      getDescriptor: (l) => this.getPartDescriptor(l),
-      getDisplayValue: this._parts.getPartDisplay,
-      getPartAriaLabel: (l, n) => ({
-        hour: this.hourAriaLabel,
-        minute: this.minuteAriaLabel
-      })[n] ?? R[n],
-      dayPeriodAriaLabel: this.dayPeriodAriaLabel,
-      disabled: this.disabled,
-      partsReadonly: !!this.readOnly || this.allowCustomTime === !1
-    }, o = k(
-      this.getSortedPills(),
-      (l) => M(l, (n) => this.formatTimeForDisplay(n))
-    ), 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}
-                aria-hidden="true"
-              ></span>` : d}
-
-          <gui-pills
-            class="gui-range-time-input__pills"
-            style=${y(o.length ? {} : { "min-width": 0 })}
-            .uid=${this.uid}
-            .toolbarAriaLabel=${"Selected time ranges"}
-            .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"}
-            >
-              ${h("start", s, 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"}
-            >
-              ${h("end", s, 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 L(t, this.localeId, this.timeLocaleData.effectiveHourFormat);
-  }
-  getSortedPills() {
-    return F(this.value, m);
-  }
-  /**
-   * 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: s, descriptors: o } = this.timeLocaleData, { result: r, writeBacks: l } = S(this._parts.values[t] ?? {}, {
-      hourFormat: s,
-      descriptors: o
-    });
-    if (this._parts.applyWriteBacks(t, l), r.kind !== "valid") return { kind: "incomplete" };
-    const n = A(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, s) {
-    this._parts.setGroupFromISO(t, s, "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"), s = this.validateTimeParts("end"), o = (r) => r.kind === "valid" ? r.value : null;
-    return this.dispatchEvent(
-      new CustomEvent("partsChange", {
-        detail: { start: o(t), end: o(s) },
-        bubbles: !0,
-        composed: !0
-      })
-    ), { start: t, end: s };
-  }
-  /**
-   * 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: s } = this.syncParts(), o = $(t, s, this.value, {
-      validate: (r) => m(r.end, r.start) <= 0 ? this.rangeOrderMessage ?? B : D(r.start, r.end, this.disabledRanges) ? this.disabledRangeMessage ?? O : null,
-      toRange: (r) => ({ start: r.start, end: r.end }),
-      merge: C
-    });
-    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([
-  a({ type: String })
-], e.prototype, "uid", 2);
-i([
-  a({ type: String })
-], e.prototype, "label", 2);
-i([
-  a({ type: String, attribute: "locale-id" })
-], e.prototype, "localeId", 2);
-i([
-  a({ type: Array })
-], e.prototype, "errors", 2);
-i([
-  a({ type: Boolean })
-], e.prototype, "showErrors", 2);
-i([
-  a({ type: Boolean })
-], e.prototype, "touched", 2);
-i([
-  a({ type: Boolean })
-], e.prototype, "required", 2);
-i([
-  a({ type: Boolean })
-], e.prototype, "disabled", 2);
-i([
-  a({ type: Boolean, attribute: "readonly" })
-], e.prototype, "readOnly", 2);
-i([
-  a({ type: String })
-], e.prototype, "icon", 2);
-i([
-  a({ type: String })
-], e.prototype, "hint", 2);
-i([
-  a({ type: String })
-], e.prototype, "hourAriaLabel", 2);
-i([
-  a({ type: String })
-], e.prototype, "minuteAriaLabel", 2);
-i([
-  a({ type: String })
-], e.prototype, "dayPeriodAriaLabel", 2);
-i([
-  a({ type: String, attribute: "hour-format" })
-], e.prototype, "hourFormat", 2);
-i([
-  a({ type: Number, attribute: "minute-step" })
-], e.prototype, "minuteStep", 2);
-i([
-  a({ type: String, attribute: "min-time" })
-], e.prototype, "minTime", 2);
-i([
-  a({ type: String, attribute: "max-time" })
-], e.prototype, "maxTime", 2);
-i([
-  a({ type: String, attribute: "min-time-message" })
-], e.prototype, "minTimeMessage", 2);
-i([
-  a({ type: String, attribute: "max-time-message" })
-], e.prototype, "maxTimeMessage", 2);
-i([
-  a({ type: Array })
-], e.prototype, "value", 2);
-i([
-  a({ type: String, attribute: "range-order-message" })
-], e.prototype, "rangeOrderMessage", 2);
-i([
-  a({ type: String })
-], e.prototype, "removePillAriaLabel", 2);
-i([
-  a({ type: String })
-], e.prototype, "startTimeAriaLabel", 2);
-i([
-  a({ type: String })
-], e.prototype, "endTimeAriaLabel", 2);
-i([
-  a({ type: String })
-], e.prototype, "separator", 2);
-i([
-  a({ type: Boolean, attribute: "allow-custom-time" })
-], e.prototype, "allowCustomTime", 2);
-i([
-  a({ type: Array, attribute: "disabled-ranges" })
-], e.prototype, "disabledRanges", 2);
-i([
-  a({ 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);