@golemui/gui-lit 1.0.3 → 1.1.1-rc.0

package/{calendar.element-DcnTyvfg.js → range-calendar.element-DHLZhpnj.js}

@@ -1,25 +1,25 @@
-import { InputWidgetAdapter as o, formContext as l, inputContext as h } from "@golemui/lit";
-import "./calendar-BclCC9VJ.js";
+import { InputWidgetAdapter as n, formContext as o, inputContext as h } from "@golemui/lit";
+import "./range-calendar-DO_woqcF.js";
 import { consume as m, provide as u } from "@lit/context";
-import { LitElement as c, html as D } from "lit";
-import { property as b, customElement as $ } from "lit/decorators.js";
+import { LitElement as c, html as b } from "lit";
+import { property as D, customElement as $ } from "lit/decorators.js";
 import "rxjs";
-var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, d = (e, t, i, r) => {
-  for (var a = r > 1 ? void 0 : r ? g(t, i) : t, p = e.length - 1, n; p >= 0; p--)
-    (n = e[p]) && (a = (r ? n(t, i, a) : n(a)) || a);
-  return r && a && f(t, i, a), a;
+var g = Object.defineProperty, f = Object.getOwnPropertyDescriptor, d = (t, e, s, r) => {
+  for (var a = r > 1 ? void 0 : r ? f(e, s) : e, l = t.length - 1, p; l >= 0; l--)
+    (p = t[l]) && (a = (r ? p(e, s, a) : p(a)) || a);
+  return r && a && g(e, s, a), a;
 };
-let s = class extends c {
+let i = class extends c {
   constructor() {
-    super(...arguments), this.adapter = new o(), this.subscriptions = [];
+    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");
+  updated(t) {
+    super.updated(t);
+    const e = this.adapter.templateData.size;
+    e ? this.style.flex = String(e) : this.style.removeProperty("flex");
   }
   connectedCallback() {
     super.connectedCallback(), this.classList.add("gui-calendar", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
@@ -27,8 +27,8 @@ let s = class extends c {
     );
   }
   render() {
-    return super.render(), D`
-      <gui-calendar
+    return super.render(), b`
+      <gui-range-calendar
         .uid=${this.widget.uid}
         .label=${this.adapter.templateData.label}
         .hint=${this.adapter.templateData.hint}
@@ -42,37 +42,45 @@ let s = class extends c {
         .nextMonthIcon=${this.adapter.templateData.nextMonthIcon}
         .prevMonthAriaLabel=${this.adapter.templateData.prevMonthAriaLabel}
         .nextMonthAriaLabel=${this.adapter.templateData.nextMonthAriaLabel}
+        .selectYearAriaLabel=${this.adapter.templateData.selectYearAriaLabel}
+        .yearGridAriaLabel=${this.adapter.templateData.yearGridAriaLabel}
         .dayFormat=${this.adapter.templateData.dayFormat}
         .weekdayFormat=${this.adapter.templateData.weekdayFormat}
         .monthFormat=${this.adapter.templateData.monthFormat}
         .minDate=${this.adapter.templateData.minDate}
         .maxDate=${this.adapter.templateData.maxDate}
         .disabledRanges=${this.adapter.templateData.disabledRanges}
+        .disabledDateRangeMessage=${this.adapter.templateData.disabledDateRangeMessage}
         .numberOfMonths=${this.adapter.templateData.numberOfMonths}
+        .hidePills=${!1}
+        .removePillAriaLabel=${this.adapter.templateData.removePillAriaLabel}
         .localeId=${this.adapter.templateData.lang}
         @change=${this.valueChanged}
+        @inputError=${this.onInputError}
         @blur=${() => this.adapter.onBlur()}
-      ></gui-calendar>
+      ></gui-range-calendar>
     `;
   }
-  valueChanged(e) {
-    const t = e?.target;
-    this.adapter.valueChanged(t.value);
+  valueChanged(t) {
+    this.adapter.injectValidationIssues(null), this.adapter.valueChanged(t.detail.value);
+  }
+  onInputError(t) {
+    this.adapter.injectValidationIssues([t.detail.message]), this.adapter.onBlur();
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((e) => e.unsubscribe());
+    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
   }
 };
 d([
-  m({ context: l }),
-  b({ attribute: !1 })
-], s.prototype, "formContext", 2);
+  m({ context: o }),
+  D({ attribute: !1 })
+], i.prototype, "formContext", 2);
 d([
   u({ context: h })
-], s.prototype, "adapter", 2);
-s = d([
-  $("gui-calendar-input")
-], s);
+], i.prototype, "adapter", 2);
+i = d([
+  $("gui-range-calendar-input")
+], i);
 export {
-  s as CalendarElement
+  i as RangeCalendarElement
 };

package/range-commit-8-MmYUyo.js

@@ -0,0 +1,14 @@
+function u(e, i, r) {
+  return r(i, e) < 0 ? { start: i, end: e } : { start: e, end: i };
+}
+function v(e, i, r, n) {
+  if (e.kind === "invalid") return { kind: "invalid", message: e.message };
+  if (i.kind === "invalid") return { kind: "invalid", message: i.message };
+  if (e.kind !== "valid" || i.kind !== "valid") return { kind: "incomplete" };
+  const d = n.order ? n.order(e.value, i.value) : { start: e.value, end: i.value }, a = n.validate?.(d) ?? null;
+  return a !== null ? { kind: "invalid", message: a } : { kind: "commit", value: n.merge([...r ?? [], n.toRange(d)]) };
+}
+export {
+  v as c,
+  u as o
+};

package/range-date-input-Br7XqQPK.js

@@ -0,0 +1,311 @@
+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-Dmr34nwp.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);

package/{range-date-input.element-BqzAF0O3.js → range-date-input.element-BdD4SlB4.js}

@@ -1,13 +1,13 @@
-import { InputWidgetAdapter as n, formContext as o, inputContext as u } from "@golemui/lit";
-import "./range-date-input-BYXzqnr1.js";
-import { consume as h, provide as m } from "@lit/context";
+import { InputWidgetAdapter as n, formContext as o, inputContext as h } from "@golemui/lit";
+import "./range-date-input-Br7XqQPK.js";
+import { consume as u, provide as m } from "@lit/context";
 import { LitElement as c, html as b } from "lit";
 import { property as D, customElement as g } from "lit/decorators.js";
 import "rxjs";
-var f = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, d = (t, e, s, r) => {
-  for (var a = r > 1 ? void 0 : r ? $(e, s) : e, p = t.length - 1, l; p >= 0; p--)
+var $ = Object.defineProperty, v = Object.getOwnPropertyDescriptor, d = (t, e, s, r) => {
+  for (var a = r > 1 ? void 0 : r ? v(e, s) : e, p = t.length - 1, l; p >= 0; p--)
     (l = t[p]) && (a = (r ? l(e, s, a) : l(a)) || a);
-  return r && a && f(e, s, a), a;
+  return r && a && $(e, s, a), a;
 };
 let i = class extends c {
   constructor() {
@@ -40,6 +40,10 @@ let i = class extends c {
         ?readonly=${this.adapter.templateData.readonly}
         .value=${this.adapter.templateData.value}
         .localeId=${this.adapter.templateData.lang}
+        .dayAriaLabel=${this.adapter.templateData.dayAriaLabel}
+        .monthAriaLabel=${this.adapter.templateData.monthAriaLabel}
+        .yearAriaLabel=${this.adapter.templateData.yearAriaLabel}
+        .invalidDateMessage=${this.adapter.templateData.invalidDateMessage}
         .separator=${this.adapter.templateData.separator}
         .removePillAriaLabel=${this.adapter.templateData.removePillAriaLabel}
         .startDateAriaLabel=${this.adapter.templateData.startDateAriaLabel}
@@ -60,11 +64,11 @@ let i = class extends c {
   }
 };
 d([
-  h({ context: o }),
+  u({ context: o }),
   D({ attribute: !1 })
 ], i.prototype, "formContext", 2);
 d([
-  m({ context: u })
+  m({ context: h })
 ], i.prototype, "adapter", 2);
 i = d([
   g("gui-range-date-input")