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

package/{range-date-time-input-B37TUoM3.js → range-date-time-input-Cu-T_nuC.js}

@@ -1,24 +1,24 @@
 import { LitElement as g, nothing as p, html as u } from "lit";
 import { property as a, customElement as c } 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 D } from "./templates-Dk1jxLwS.js";
-import { G as T, g as E, a as _, r as h, f as P, p as m, b as S, d as R, m as C, c as k, o as $ } from "./part-templates-Db871PS3.js";
-import { c as A } from "./range-commit-8-MmYUyo.js";
-import { r as L, f as I, b as M, a as w, s as B } from "./pill-ranges-DCqDmpkk.js";
-import "./pills-Be1UrLgq.js";
-import { D as F } from "./date-Bj9mI3GU.js";
-var O = Object.defineProperty, x = Object.getOwnPropertyDescriptor, i = (t, s, l, r) => {
-  for (var o = r > 1 ? void 0 : r ? x(s, l) : s, n = t.length - 1, d; n >= 0; n--)
-    (d = t[n]) && (o = (r ? d(s, l, o) : d(o)) || o);
-  return r && o && O(s, l, o), o;
+import { classMap as y } from "lit/directives/class-map.js";
+import { styleMap as v } from "lit-html/directives/style-map.js";
+import { G as b, b as f, c as D } from "./templates-Dmr34nwp.js";
+import { G as A, g as S, a as P, r as h, f as T, p as m, b as L, d as _, m as E, c as R, o as C, P as $ } from "./part-templates-VORbpgs2.js";
+import { c as k } from "./range-commit-8-MmYUyo.js";
+import { r as I, f as M, b as w, a as B, s as F } from "./pill-ranges-DpvWwP-3.js";
+import "./pills-BDMO2NiR.js";
+import { D as O } from "./date-DBuYpvcO.js";
+var x = Object.defineProperty, G = Object.getOwnPropertyDescriptor, i = (e, r, l, s) => {
+  for (var o = s > 1 ? void 0 : s ? G(r, l) : r, n = e.length - 1, d; n >= 0; n--)
+    (d = e[n]) && (o = (s ? d(r, l, o) : d(o)) || o);
+  return s && o && x(r, l, o), o;
 };
-let e = class extends g {
+let t = class extends g {
   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.invalidDateMessage = void 0, this.value = [], this.removePillAriaLabel = void 0, this.startDateTimeAriaLabel = void 0, this.endDateTimeAriaLabel = void 0, this.separator = void 0, this.minDateTime = void 0, this.maxDateTime = void 0, this.minDateTimeMessage = void 0, this.maxDateTimeMessage = void 0, this.disabledRanges = void 0, this.disabledRangeMessage = void 0, this.inputBlockClass = "gui-range-date-time-input", this.groups = ["start", "end"], this._validationTriggered = !1, this._parts = new T(this, {
+    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.hourAriaLabel = void 0, this.minuteAriaLabel = void 0, this.dayPeriodAriaLabel = void 0, this.hourFormat = void 0, this.minuteStep = 1, this.invalidDateMessage = void 0, this.value = [], this.removePillAriaLabel = void 0, this.startDateTimeAriaLabel = void 0, this.endDateTimeAriaLabel = void 0, this.separator = void 0, this.minDateTime = void 0, this.maxDateTime = void 0, this.minDateTimeMessage = void 0, this.maxDateTimeMessage = void 0, this.disabledRanges = void 0, this.disabledRangeMessage = void 0, this.inputBlockClass = "gui-range-date-time-input", this.groups = ["start", "end"], this._validationTriggered = !1, this._parts = new A(this, {
       blockClass: this.inputBlockClass,
       groups: this.groups,
-      getDescriptor: (t) => this.getPartDescriptor(t),
+      getDescriptor: (e) => this.getPartDescriptor(e),
       commitGroup: () => {
         this._validationTriggered ? this.revalidate() : this.syncParts();
       },
@@ -31,9 +31,9 @@ let e = class extends g {
       },
       getHourFormat: () => this.localeData.effectiveHourFormat,
       getDayPeriodLabels: () => this.localeData.dayPeriodLabels,
-      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 })
+      onInputErrorSurfaced: (e) => this.dispatchEvent(new CustomEvent("inputError", { detail: { message: e }, bubbles: !0 })),
+      onSurfacedErrorCleared: (e) => this.dispatchEvent(
+        new CustomEvent("change", { detail: { value: e }, bubbles: !0, composed: !0 })
       )
     }), this.ariaController = new b(this, {
       getTargets: () => this.querySelectorAll(`.${this.inputBlockClass}`),
@@ -44,20 +44,21 @@ let e = class extends g {
           errors: this.errors,
           readonly: this.readOnly,
           disabled: this.disabled,
-          touched: this.touched
+          touched: this.touched,
+          required: this.required
         }
       })
-    }), this.onPillRemoveEvent = (t) => {
+    }), this.onPillRemoveEvent = (e) => {
       if (this.disabled || this.readOnly) return;
-      const s = L(this.value, t.detail.key);
-      s && (this.value = s.next, this.dispatchEvent(
+      const r = I(this.value, e.detail.key);
+      r && (this.value = r.next, this.dispatchEvent(
         new CustomEvent("change", { detail: { value: this.value }, bubbles: !0, composed: !0 })
-      ), s.next.length === 0 && requestAnimationFrame(() => {
+      ), r.next.length === 0 && requestAnimationFrame(() => {
         this.querySelector(".gui-range-date-time-input__field input")?.focus();
       }));
-    }, this.onPillClickEvent = (t) => {
-      const s = I(this.getSortedPills(), t.detail.key);
-      s && this.onPillClick(s);
+    }, this.onPillClickEvent = (e) => {
+      const r = M(this.getSortedPills(), e.detail.key);
+      r && this.onPillClick(r);
     };
   }
   createRenderRoot() {
@@ -67,16 +68,16 @@ let e = class extends g {
     super.connectedCallback(), this.classList.add("gui-field");
   }
   get localeData() {
-    return E(this.localeId, this.hourFormat, this.minuteStep, !0);
+    return S(this.localeId, this.hourFormat, this.minuteStep, !0);
   }
-  getPartDescriptor(t) {
-    return this.localeData.descriptors[t];
+  getPartDescriptor(e) {
+    return this.localeData.descriptors[e];
   }
-  willUpdate(t) {
-    (!this.hasUpdated || t.has("hourFormat") || t.has("localeId")) && this._parts.seedDayPeriods();
+  willUpdate(e) {
+    (!this.hasUpdated || e.has("hourFormat") || e.has("localeId")) && this._parts.seedDayPeriods();
   }
   render() {
-    const t = {
+    const e = {
       uid: this.uid,
       label: this.label,
       errors: this.errors,
@@ -86,25 +87,31 @@ let e = class extends g {
       readonly: this.readOnly,
       value: this.value,
       hint: this.hint
-    }, s = {
+    }, r = {
       blockClass: this.inputBlockClass,
       groups: this.groups,
-      formatParts: _(this.localeId, this.localeData.effectiveHourFormat),
+      formatParts: P(this.localeId, this.localeData.effectiveHourFormat),
       getDescriptor: (o) => this.getPartDescriptor(o),
       getDisplayValue: this._parts.getPartDisplay,
-      required: this.required,
+      getPartAriaLabel: (o, n) => ({
+        day: this.dayAriaLabel,
+        month: this.monthAriaLabel,
+        year: this.yearAriaLabel,
+        hour: this.hourAriaLabel,
+        minute: this.minuteAriaLabel
+      })[n] ?? $[n],
+      dayPeriodAriaLabel: this.dayPeriodAriaLabel,
       disabled: this.disabled,
       partsReadonly: !!this.readOnly
-    }, l = M(
+    }, l = w(
       this.getSortedPills(),
-      (o) => w(o, (n) => this.formatDateTimeForDisplay(n)),
-      this.removePillAriaLabel ?? "Remove date-time"
-    ), r = {
+      (o) => B(o, (n) => this.formatDateTimeForDisplay(n))
+    ), s = {
       "gui-widget-icon": !0,
       [this.icon]: !!this.icon
     };
     return u`
-      ${this.label ? f(this.uid, t, !1, void 0, !1) : p}
+      ${this.label ? f(this.uid, e, !1, void 0, !1) : p}
 
       <div class="gui-widget">
         <div
@@ -112,11 +119,17 @@ let e = class extends g {
           role="group"
           aria-label=${this.label ?? "Date-time range input"}
         >
-          ${this.icon ? u`<span class=${v(r)} data-icon=${this.icon}></span>` : p}
+          ${this.icon ? u`<span
+                class=${y(s)}
+                data-icon=${this.icon}
+                aria-hidden="true"
+              ></span>` : p}
 
           <gui-pills
             class="gui-range-date-time-input__pills"
-            style=${y(l.length ? {} : { "min-width": 0 })}
+            style=${v(l.length ? {} : { "min-width": 0 })}
+            .uid=${this.uid}
+            .toolbarAriaLabel=${"Selected date-time ranges"}
             .items=${l}
             .removable=${!0}
             .clickable=${!0}
@@ -135,7 +148,7 @@ let e = class extends g {
               role="group"
               aria-label=${this.startDateTimeAriaLabel ?? "Start date-time"}
             >
-              ${h("start", s, this._parts)}
+              ${h("start", r, this._parts)}
             </div>
 
             <span class="gui-range-date-time-input__separator">${this.separator ?? "-"}</span>
@@ -145,27 +158,27 @@ let e = class extends g {
               role="group"
               aria-label=${this.endDateTimeAriaLabel ?? "End date-time"}
             >
-              ${h("end", s, this._parts)}
+              ${h("end", r, this._parts)}
             </div>
           </div>
         </div>
 
-        ${this.showErrors && this.errors?.length ? D(this.uid, t) : p}
+        ${this.showErrors && this.errors?.length ? D(this.uid, e) : p}
       </div>
     `;
   }
-  onPillClick(t) {
+  onPillClick(e) {
     this.dispatchEvent(
-      new CustomEvent("pillClick", { detail: { range: t }, bubbles: !0, composed: !0 })
+      new CustomEvent("pillClick", { detail: { range: e }, bubbles: !0, composed: !0 })
     );
   }
-  formatDateTimeForDisplay(t) {
-    return P(t, this.localeId, this.localeData.effectiveHourFormat);
+  formatDateTimeForDisplay(e) {
+    return T(e, this.localeId, this.localeData.effectiveHourFormat);
   }
   getSortedPills() {
-    return B(
+    return F(
       this.value,
-      (t, s) => m(t).getTime() - m(s).getTime()
+      (e, r) => m(e).getTime() - m(r).getTime()
     );
   }
   /**
@@ -181,19 +194,19 @@ let e = class extends g {
    * whether the 10th is allowed until 00:00 or 23:59, and independent date/time
    * axes would wrongly reject Feb 11 08:00 for a `minTime` of 09:00.
    */
-  validateDateTimeParts(t) {
-    const { effectiveHourFormat: s, descriptors: l } = this.localeData, { result: r, writeBacks: o } = S(this._parts.values[t] ?? {}, {
-      hourFormat: s,
+  validateDateTimeParts(e) {
+    const { effectiveHourFormat: r, descriptors: l } = this.localeData, { result: s, writeBacks: o } = L(this._parts.values[e] ?? {}, {
+      hourFormat: r,
       descriptors: l,
       invalidDateMessage: this.invalidDateMessage
     });
-    if (this._parts.applyWriteBacks(t, o), r.kind === "incomplete") return { kind: "incomplete" };
-    if (r.kind === "invalid") return { kind: "invalid", message: r.message };
-    const n = R(r.iso, this.minDateTime, this.maxDateTime, {
+    if (this._parts.applyWriteBacks(e, o), s.kind === "incomplete") return { kind: "incomplete" };
+    if (s.kind === "invalid") return { kind: "invalid", message: s.message };
+    const n = _(s.iso, this.minDateTime, this.maxDateTime, {
       minDateTimeMessage: this.minDateTimeMessage,
       maxDateTimeMessage: this.maxDateTimeMessage
     });
-    return n ? { kind: "invalid", message: n } : { kind: "valid", value: r.iso };
+    return n ? { kind: "invalid", message: n } : { kind: "valid", value: s.iso };
   }
   /**
    * Re-parses both endpoints so per-endpoint problems (impossible date-time,
@@ -211,16 +224,16 @@ let e = class extends g {
    * Shared by the Enter commit and by {@link revalidate}.
    */
   evaluateRange() {
-    const { start: t, end: s } = this.syncParts(), l = A(t, s, this.value, {
+    const { start: e, end: r } = this.syncParts(), l = k(e, r, this.value, {
       // Date-time ranges are two instants: a backward selection reorders (swap)
       // rather than erroring — mirroring the range calendar's date swap.
-      order: (r, o) => {
-        const n = $(r, o);
+      order: (s, o) => {
+        const n = C(s, o);
         return { start: n.start, end: n.end };
       },
-      validate: (r) => k({ start: r.start, end: r.end }, this.disabledRanges) ? this.disabledRangeMessage ?? F : null,
-      toRange: (r) => ({ start: r.start, end: r.end }),
-      merge: C
+      validate: (s) => R({ start: s.start, end: s.end }, this.disabledRanges) ? this.disabledRangeMessage ?? O : null,
+      toRange: (s) => ({ start: s.start, end: s.end }),
+      merge: E
     });
     return l.kind === "invalid" && this._parts.surfaceInputError(l.message), l.kind === "incomplete" && this._parts.clearSurfacedInputError(this.value ?? []), l;
   }
@@ -235,88 +248,106 @@ let e = class extends g {
   }
   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.seedDayPeriods(), this._parts.resetSurfacedInputError(), this.dispatchEvent(
+    const e = this.evaluateRange();
+    e.kind === "commit" && (this.value = e.value, this._validationTriggered = !1, this._parts.clearGroup("start"), this._parts.clearGroup("end"), this._parts.seedDayPeriods(), this._parts.resetSurfacedInputError(), this.dispatchEvent(
       new CustomEvent("change", { detail: { value: this.value }, bubbles: !0, composed: !0 })
     ), this._parts.focusFirst("start"), this.requestUpdate());
   }
 };
 i([
   a({ type: String })
-], e.prototype, "uid", 2);
+], t.prototype, "uid", 2);
 i([
   a({ type: String })
-], e.prototype, "label", 2);
+], t.prototype, "label", 2);
 i([
   a({ type: String, attribute: "locale-id" })
-], e.prototype, "localeId", 2);
+], t.prototype, "localeId", 2);
 i([
   a({ type: Array })
-], e.prototype, "errors", 2);
+], t.prototype, "errors", 2);
 i([
   a({ type: Boolean })
-], e.prototype, "showErrors", 2);
+], t.prototype, "showErrors", 2);
 i([
   a({ type: Boolean })
-], e.prototype, "touched", 2);
+], t.prototype, "touched", 2);
 i([
   a({ type: Boolean })
-], e.prototype, "required", 2);
+], t.prototype, "required", 2);
 i([
   a({ type: Boolean })
-], e.prototype, "disabled", 2);
+], t.prototype, "disabled", 2);
 i([
   a({ type: Boolean, attribute: "readonly" })
-], e.prototype, "readOnly", 2);
+], t.prototype, "readOnly", 2);
+i([
+  a({ type: String })
+], t.prototype, "icon", 2);
+i([
+  a({ type: String })
+], t.prototype, "hint", 2);
+i([
+  a({ type: String })
+], t.prototype, "dayAriaLabel", 2);
+i([
+  a({ type: String })
+], t.prototype, "monthAriaLabel", 2);
+i([
+  a({ type: String })
+], t.prototype, "yearAriaLabel", 2);
+i([
+  a({ type: String })
+], t.prototype, "hourAriaLabel", 2);
 i([
   a({ type: String })
-], e.prototype, "icon", 2);
+], t.prototype, "minuteAriaLabel", 2);
 i([
   a({ type: String })
-], e.prototype, "hint", 2);
+], t.prototype, "dayPeriodAriaLabel", 2);
 i([
   a({ type: String, attribute: "hour-format" })
-], e.prototype, "hourFormat", 2);
+], t.prototype, "hourFormat", 2);
 i([
   a({ type: Number, attribute: "minute-step" })
-], e.prototype, "minuteStep", 2);
+], t.prototype, "minuteStep", 2);
 i([
   a({ type: String, attribute: "invalid-date-message" })
-], e.prototype, "invalidDateMessage", 2);
+], t.prototype, "invalidDateMessage", 2);
 i([
   a({ type: Array })
-], e.prototype, "value", 2);
+], t.prototype, "value", 2);
 i([
   a({ type: String })
-], e.prototype, "removePillAriaLabel", 2);
+], t.prototype, "removePillAriaLabel", 2);
 i([
   a({ type: String })
-], e.prototype, "startDateTimeAriaLabel", 2);
+], t.prototype, "startDateTimeAriaLabel", 2);
 i([
   a({ type: String })
-], e.prototype, "endDateTimeAriaLabel", 2);
+], t.prototype, "endDateTimeAriaLabel", 2);
 i([
   a({ type: String })
-], e.prototype, "separator", 2);
+], t.prototype, "separator", 2);
 i([
   a({ type: String, attribute: "min-date-time" })
-], e.prototype, "minDateTime", 2);
+], t.prototype, "minDateTime", 2);
 i([
   a({ type: String, attribute: "max-date-time" })
-], e.prototype, "maxDateTime", 2);
+], t.prototype, "maxDateTime", 2);
 i([
   a({ type: String, attribute: "min-date-time-message" })
-], e.prototype, "minDateTimeMessage", 2);
+], t.prototype, "minDateTimeMessage", 2);
 i([
   a({ type: String, attribute: "max-date-time-message" })
-], e.prototype, "maxDateTimeMessage", 2);
+], t.prototype, "maxDateTimeMessage", 2);
 i([
   a({ type: Array, attribute: "disabled-ranges" })
-], e.prototype, "disabledRanges", 2);
+], t.prototype, "disabledRanges", 2);
 i([
   a({ type: String, attribute: "disabled-range-message" })
-], e.prototype, "disabledRangeMessage", 2);
-e = i([
+], t.prototype, "disabledRangeMessage", 2);
+t = i([
   c("gui-range-date-time")
-], e);
-typeof customElements < "u" && !customElements.get("gui-range-date-time") && customElements.define("gui-range-date-time", e);
+], t);
+typeof customElements < "u" && !customElements.get("gui-range-date-time") && customElements.define("gui-range-date-time", t);

package/{range-date-time-input.element-DUnbv4ed.js → range-date-time-input.element-Cti44iuW.js}

@@ -1,25 +1,25 @@
-import { InputWidgetAdapter as n, formContext as m, inputContext as o } from "@golemui/lit";
-import "./range-date-time-input-B37TUoM3.js";
+import { InputWidgetAdapter as m, formContext as n, inputContext as o } from "@golemui/lit";
+import "./range-date-time-input-Cu-T_nuC.js";
 import { consume as h, provide as u } from "@lit/context";
 import { LitElement as D, html as c } from "lit";
-import { property as g, customElement as $ } from "lit/decorators.js";
+import { property as b, customElement as $ } from "lit/decorators.js";
 import "rxjs";
-var b = Object.defineProperty, v = Object.getOwnPropertyDescriptor, d = (t, e, s, i) => {
-  for (var a = i > 1 ? void 0 : i ? v(e, s) : e, p = t.length - 1, l; p >= 0; p--)
-    (l = t[p]) && (a = (i ? l(e, s, a) : l(a)) || a);
-  return i && a && b(e, s, a), a;
+var g = Object.defineProperty, L = Object.getOwnPropertyDescriptor, d = (e, t, s, r) => {
+  for (var a = r > 1 ? void 0 : r ? L(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 && g(t, s, a), a;
 };
-let r = class extends D {
+let i = class extends D {
   constructor() {
-    super(...arguments), this.adapter = new n(), this.subscriptions = [];
+    super(...arguments), this.adapter = new m(), this.subscriptions = [];
   }
   createRenderRoot() {
     return this;
   }
-  updated(t) {
-    super.updated(t);
-    const e = this.adapter.templateData.size;
-    e ? this.style.flex = String(e) : this.style.removeProperty("flex");
+  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-date-time", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
@@ -40,6 +40,12 @@ let r = class extends D {
         ?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}
+        .hourAriaLabel=${this.adapter.templateData.hourAriaLabel}
+        .minuteAriaLabel=${this.adapter.templateData.minuteAriaLabel}
+        .dayPeriodAriaLabel=${this.adapter.templateData.dayPeriodAriaLabel}
         .separator=${this.adapter.templateData.separator}
         .removePillAriaLabel=${this.adapter.templateData.removePillAriaLabel}
         .startDateTimeAriaLabel=${this.adapter.templateData.startDateTimeAriaLabel}
@@ -56,26 +62,26 @@ let r = class extends D {
       ></gui-range-date-time>
     `;
   }
-  valueChanged(t) {
-    this.adapter.injectValidationIssues(null), this.adapter.valueChanged(t.detail.value);
+  valueChanged(e) {
+    this.adapter.injectValidationIssues(null), this.adapter.valueChanged(e.detail.value);
   }
-  onInputError(t) {
-    this.adapter.injectValidationIssues([t.detail.message]);
+  onInputError(e) {
+    this.adapter.injectValidationIssues([e.detail.message]);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
+    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((e) => e.unsubscribe());
   }
 };
 d([
-  h({ context: m }),
-  g({ attribute: !1 })
-], r.prototype, "formContext", 2);
+  h({ context: n }),
+  b({ attribute: !1 })
+], i.prototype, "formContext", 2);
 d([
   u({ context: o })
-], r.prototype, "adapter", 2);
-r = d([
+], i.prototype, "adapter", 2);
+i = d([
   $("gui-range-date-time-input")
-], r);
+], i);
 export {
-  r as RangeDateTimeInputElement
+  i as RangeDateTimeInputElement
 };