@golemui/gui-lit 1.2.0 → 1.2.1-rc.0

package/range-date-input-BChaoBC1.js

@@ -1,311 +0,0 @@
-import { LitElement as v, nothing as p, html as u } from "lit";
-import { property as r, customElement as m } from "lit/decorators.js";
-import { classMap as y } from "lit/directives/class-map.js";
-import { G as b, b as f, c as _ } from "./templates-Df7abEkB.js";
-import { n as D, G as P, r as h, q as S, P as E } from "./part-templates-VORbpgs2.js";
-import { a as A, p as c, m as L, t as g } from "./date-DBuYpvcO.js";
-import { r as C, f as $, b as k, a as I, c as R, s as w } from "./pill-ranges-DpvWwP-3.js";
-import { c as O, o as B } from "./range-commit-8-MmYUyo.js";
-import "./pills-BDMO2NiR.js";
-import { styleMap as G } from "lit-html/directives/style-map.js";
-var q = Object.defineProperty, T = Object.getOwnPropertyDescriptor, a = (t, e, l, n) => {
-  for (var s = n > 1 ? void 0 : n ? T(e, l) : e, o = t.length - 1, d; o >= 0; o--)
-    (d = t[o]) && (s = (n ? d(e, l, s) : d(s)) || s);
-  return n && s && q(e, l, s), s;
-};
-let i = class extends v {
-  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.dayAriaLabel = void 0, this.monthAriaLabel = void 0, this.yearAriaLabel = void 0, this.value = [], this.invalidDateMessage = void 0, this.removePillAriaLabel = void 0, this.startDateAriaLabel = void 0, this.endDateAriaLabel = void 0, this.separator = void 0, this.inputBlockClass = "gui-range-date-input", this.groups = ["start", "end"], this.partDescriptors = D(), this._validationTriggered = !1, this._parts = new P(this, {
-      blockClass: this.inputBlockClass,
-      groups: this.groups,
-      getDescriptor: (t) => this.getPartDescriptor(t),
-      commitGroup: () => {
-        this._validationTriggered ? this.revalidate() : this.syncParts();
-      },
-      isReadonly: () => !!this.readOnly,
-      isDisabled: () => !!this.disabled,
-      onEmptyPartBlur: () => {
-      },
-      onEnter: () => {
-        if (this.tryCreatePill(), this.value && this.value.length > 0) {
-          const t = this.value[this.value.length - 1];
-          this.onPillClick(t);
-        }
-      },
-      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 })
-      )
-    }), 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 e = C(this.value, t.detail.key);
-      e && (this.value = e.next, this.dispatchEvent(
-        new CustomEvent("change", {
-          detail: { value: this.value },
-          bubbles: !0,
-          composed: !0
-        })
-      ), e.next.length === 0 && requestAnimationFrame(() => {
-        this.querySelector(
-          ".gui-range-date-input__field input"
-        )?.focus();
-      }));
-    }, this.onPillClickEvent = (t) => {
-      const e = $(this.getSortedPills(), t.detail.key);
-      e && this.onPillClick(e);
-    };
-  }
-  createRenderRoot() {
-    return this;
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-field");
-  }
-  getPartDescriptor(t) {
-    return this.partDescriptors[t];
-  }
-  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
-    }, e = {
-      blockClass: this.inputBlockClass,
-      groups: this.groups,
-      formatParts: A(this.localeId),
-      getDescriptor: (s) => this.getPartDescriptor(s),
-      getDisplayValue: this._parts.getPartDisplay,
-      getPartAriaLabel: (s, o) => ({
-        day: this.dayAriaLabel,
-        month: this.monthAriaLabel,
-        year: this.yearAriaLabel
-      })[o] ?? E[o],
-      disabled: this.disabled,
-      partsReadonly: !!this.readOnly
-    }, l = k(
-      this.getSortedPills(),
-      (s) => I(s, (o) => R(o, this.localeId))
-    ), n = {
-      "gui-widget-icon": !0,
-      [this.icon]: !!this.icon
-    };
-    return u`
-      ${this.label ? f(this.uid, t, !1, void 0, !1) : p}
-
-      <div class="gui-widget">
-        <div
-          class="gui-widget-input gui-parts-ring gui-range-date-input ${this.icon ? "gui-range-date-input--icon" : ""}"
-          role="group"
-          aria-label=${this.label ?? "Date range input"}
-        >
-          ${this.icon ? u`<span
-                class=${y(n)}
-                data-icon=${this.icon}
-                aria-hidden="true"
-              ></span>` : p}
-
-          <gui-pills
-            class="gui-range-date-input__pills"
-            style=${G(l.length ? {} : { "min-width": 0 })}
-            .uid=${this.uid}
-            .toolbarAriaLabel=${"Selected date ranges"}
-            .items=${l}
-            .removable=${!0}
-            .clickable=${!0}
-            .bubble=${!0}
-            ?disabled=${this.disabled}
-            ?readonly=${this.readOnly}
-            .removeAriaLabel=${this.removePillAriaLabel ?? "Remove date"}
-            .compactAriaLabel=${`${l.length} date ranges`}
-            @pillremove=${this.onPillRemoveEvent}
-            @pillclick=${this.onPillClickEvent}
-          ></gui-pills>
-
-          <div class="gui-range-date-input__inputs">
-            <div
-              class="gui-parts gui-range-date-input__field"
-              role="group"
-              aria-label=${this.startDateAriaLabel ?? "Start date"}
-            >
-              ${h("start", e, this._parts)}
-            </div>
-
-            <span class="gui-range-date-input__separator">${this.separator ?? "-"}</span>
-
-            <div
-              class="gui-parts gui-range-date-input__field"
-              role="group"
-              aria-label=${this.endDateAriaLabel ?? "End date"}
-            >
-              ${h("end", e, this._parts)}
-            </div>
-          </div>
-        </div>
-
-        ${this.showErrors && this.errors?.length ? _(this.uid, t) : p}
-      </div>
-    `;
-  }
-  getSortedPills() {
-    return w(
-      this.value,
-      (t, e) => c(t).getTime() - c(e).getTime()
-    );
-  }
-  onPillClick(t) {
-    this.dispatchEvent(
-      new CustomEvent("pillClick", {
-        detail: { range: t },
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  validateDateParts(t) {
-    const { result: e, writeBacks: l } = S(this._parts.values[t] ?? {}, {
-      descriptors: this.partDescriptors,
-      invalidDateMessage: this.invalidDateMessage
-    });
-    return this._parts.applyWriteBacks(t, l), e.kind === "invalid" ? { kind: "invalid", message: e.message } : e.kind === "valid" && e.instant ? { kind: "valid", value: e.instant } : { kind: "incomplete" };
-  }
-  /**
-   * Re-parses both endpoints so per-endpoint problems (impossible date, out of
-   * bounds) surface while the user types. Runs on every part change.
-   */
-  syncParts() {
-    return {
-      start: this.validateDateParts("start"),
-      end: this.validateDateParts("end")
-    };
-  }
-  /**
-   * 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: e } = this.syncParts(), l = O(t, e, this.value, {
-      // Swap if end < start
-      order: (n, s) => B(n, s, (o, d) => o.getTime() - d.getTime()),
-      toRange: ({ start: n, end: s }) => {
-        const o = g(n), d = g(s);
-        return o === d ? { start: o } : { start: o, end: d };
-      },
-      merge: L
-    });
-    return l.kind === "invalid" && this._parts.surfaceInputError(l.message), l.kind === "incomplete" && this._parts.clearSurfacedInputError(this.value ?? []), l;
-  }
-  /**
-   * 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();
-    t.kind === "commit" && (this.value = t.value, this._validationTriggered = !1, this._parts.clearGroup("start"), this._parts.clearGroup("end"), this._parts.resetSurfacedInputError(), this.dispatchEvent(
-      new CustomEvent("change", {
-        detail: { value: this.value },
-        bubbles: !0,
-        composed: !0
-      })
-    ), this._parts.focusFirst("start"), this.requestUpdate());
-  }
-  /**
-   * Echo a range into the input parts without committing it (no pill, no change
-   * event). Used by the picker to show a range the calendar rejected.
-   */
-  showRange(t, e) {
-    this._parts.setGroupFromISO("start", t, "date"), this._parts.setGroupFromISO("end", e, "date");
-  }
-  /** Clear both groups' parts (e.g. once a valid range is committed). */
-  clearRangeInputs() {
-    this._parts.clearGroup("start"), this._parts.clearGroup("end");
-  }
-};
-a([
-  r({ type: String })
-], i.prototype, "uid", 2);
-a([
-  r({ type: String })
-], i.prototype, "label", 2);
-a([
-  r({ type: String, attribute: "locale-id" })
-], i.prototype, "localeId", 2);
-a([
-  r({ type: Array })
-], i.prototype, "errors", 2);
-a([
-  r({ type: Boolean })
-], i.prototype, "showErrors", 2);
-a([
-  r({ type: Boolean })
-], i.prototype, "touched", 2);
-a([
-  r({ type: Boolean })
-], i.prototype, "required", 2);
-a([
-  r({ type: Boolean })
-], i.prototype, "disabled", 2);
-a([
-  r({ type: Boolean, attribute: "readonly" })
-], i.prototype, "readOnly", 2);
-a([
-  r({ type: String })
-], i.prototype, "icon", 2);
-a([
-  r({ type: String })
-], i.prototype, "hint", 2);
-a([
-  r({ type: String })
-], i.prototype, "dayAriaLabel", 2);
-a([
-  r({ type: String })
-], i.prototype, "monthAriaLabel", 2);
-a([
-  r({ type: String })
-], i.prototype, "yearAriaLabel", 2);
-a([
-  r({ type: Array })
-], i.prototype, "value", 2);
-a([
-  r({ type: String, attribute: "invalid-date-message" })
-], i.prototype, "invalidDateMessage", 2);
-a([
-  r({ type: String })
-], i.prototype, "removePillAriaLabel", 2);
-a([
-  r({ type: String })
-], i.prototype, "startDateAriaLabel", 2);
-a([
-  r({ type: String })
-], i.prototype, "endDateAriaLabel", 2);
-a([
-  r({ type: String })
-], i.prototype, "separator", 2);
-i = a([
-  m("gui-range-date")
-], i);
-typeof customElements < "u" && !customElements.get("gui-range-date") && customElements.define("gui-range-date", i);