@golemui/gui-lit 0.14.0 → 0.15.0

package/range-calendar-CZGBBOzO.js

@@ -0,0 +1,258 @@
+import { html as v, nothing as b } from "lit";
+import { property as D, state as f, customElement as $ } from "lit/decorators.js";
+import { classMap as w } from "lit/directives/class-map.js";
+import { i as g, a as S, b as m, g as M, m as O, c as p } from "./date-CG1562vW.js";
+import { A } from "./abstract-calendar-YDgwwbqe.js";
+import "./pills-D0yyi-op.js";
+import "@golemui/gui-shared";
+var E = Object.defineProperty, P = Object.getOwnPropertyDescriptor, u = (e, i, s, n) => {
+  for (var a = n > 1 ? void 0 : n ? P(i, s) : i, t = e.length - 1, r; t >= 0; t--)
+    (r = e[t]) && (a = (n ? r(i, s, a) : r(a)) || a);
+  return n && a && E(i, s, a), a;
+};
+let c = class extends A {
+  constructor() {
+    super(...arguments), this.value = [], this.focusDate = void 0, this.hidePills = !1, this.removePillAriaLabel = void 0, this._anchorDate = null, this._nextDate = null, this._isSelecting = !1, this._skipValueNavigation = !1, this.onPillRemoveEvent = (e) => {
+      if (this.disabled || this.readOnly) return;
+      const s = this.getSortedPills().find(
+        (a) => `${a.start}-${a.end ?? a.start}` === e.detail.key
+      );
+      if (!s) return;
+      const n = (this.value ?? []).filter(
+        (a) => !(a.start === s.start && (a.end ?? null) === (s.end ?? null))
+      );
+      this.value = n, this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: { value: this.value },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }, this.onPillClickEvent = (e) => {
+      const s = this.getSortedPills().find(
+        (n) => `${n.start}-${n.end ?? n.start}` === e.detail.key
+      );
+      s && this.navigateToDate(s.start);
+    };
+  }
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-field");
+  }
+  willUpdate(e) {
+    if (e.has("value") && !e.has("focusDate")) {
+      if (this._skipValueNavigation)
+        this._skipValueNavigation = !1;
+      else if (this.value) {
+        const i = Array.isArray(this.value) ? this.value : [{ start: this.value }];
+        if (i.length > 0 && i[0].start) {
+          const s = new Date(i[0].start);
+          !isNaN(s.getTime()) && !g(s, this._currentDate, this.numberOfMonths ?? 1) && (this._currentDate = s);
+        }
+      }
+    }
+    if (e.has("focusDate") && this.focusDate) {
+      const i = new Date(this.focusDate);
+      isNaN(i.getTime()) || (g(i, this._currentDate, this.numberOfMonths ?? 1) || (this._currentDate = i), this.focusDate = void 0);
+    }
+  }
+  renderDay(e) {
+    const i = {
+      "gui-calendar__day-button": !0,
+      today: e.isToday,
+      "other-month": !e.isCurrentMonth,
+      "range-start": e.isRangeStart && !e.isOneDayRange,
+      "range-end": e.isRangeEnd && !e.isOneDayRange,
+      selected: e.isOneDayRange,
+      "in-range": e.isInRange,
+      "is-anchor": e.isAnchor,
+      "is-selecting": e.isSelecting,
+      disabled: e.isDisabled
+    };
+    return v`
+      <button
+        type="button"
+        role="gridcell"
+        class=${w(i)}
+        tabindex=${e.isFocusable ? 0 : -1}
+        ?disabled=${!e.isCurrentMonth || e.isDisabled}
+        data-date=${e.date.toISOString()}
+        @click=${(s) => this.selectDate(e, s)}
+        @mouseover=${() => this.onMouseOver(e)}
+        @focus=${() => this.onMouseOver(e)}
+        @keydown=${(s) => this.handleKeydown(s, e)}
+        aria-selected=${e.isRangeStart || e.isRangeEnd || e.isInRange ? "true" : "false"}
+      >
+        ${e.dayLabel}
+      </button>
+    `;
+  }
+  getDaysInMonth(e) {
+    const i = new Date(this._currentDate);
+    i.setDate(1), i.setMonth(i.getMonth() + e);
+    const s = this.generateDateGrid(e), n = i.getMonth();
+    let a = s.map((t) => {
+      const r = t.getMonth() === n, l = this.isDisabled(t), o = S(t), { isRangeStart: h, isRangeEnd: d, isInRange: _, isSelecting: y } = this.checkDateStatus(t), R = o || h, T = this._anchorDate ? m(t, this._anchorDate) : !1;
+      return {
+        date: t,
+        dayLabel: M(this.localeId, t),
+        isCurrentMonth: r,
+        isToday: o,
+        isRangeStart: h,
+        isRangeEnd: d,
+        isInRange: _,
+        isDisabled: l,
+        isOneDayRange: h && d,
+        isAnchor: T,
+        isFocusable: R,
+        isSelecting: y && r
+      };
+    });
+    for (let t = 0; t < 2; t++)
+      a.slice(-7).every((l) => !l.isCurrentMonth) && (a = a.slice(0, -7));
+    if (e === 0 && !a.some((t) => t.isFocusable)) {
+      const t = this.numberOfMonths ?? 1, r = g(/* @__PURE__ */ new Date(), this._currentDate, t), l = this.value?.some(
+        (o) => g(new Date(o.start), this._currentDate, t)
+      ) ?? !1;
+      if (!r && !l) {
+        const o = a.find((h) => h.isCurrentMonth && !h.isDisabled);
+        o && (o.isFocusable = !0);
+      }
+    }
+    return a;
+  }
+  checkDateStatus(e) {
+    let i = !1, s = !1, n = !1, a = !1;
+    if (this._isSelecting && this._nextDate && this._anchorDate) {
+      const t = this._nextDate.date, r = new Date(this._anchorDate);
+      t.getTime() > r.getTime() ? a = e.getTime() >= r.getTime() && e.getTime() <= t.getTime() : a = e.getTime() >= t.getTime() && e.getTime() <= r.getTime();
+    }
+    if (this.value && Array.isArray(this.value))
+      for (const t of this.value) {
+        const r = new Date(t.start);
+        if (m(e, r) && (i = !0, s = !t.end), t.end) {
+          const l = new Date(t.end);
+          m(e, l) && (s = !0);
+          const o = e.getTime(), h = r.getTime(), d = l.getTime();
+          o > h && o < d && (n = !0);
+        }
+      }
+    return { isRangeStart: i, isRangeEnd: s, isInRange: n, isSelecting: a };
+  }
+  selectDate(e, i = null) {
+    if (!e.isCurrentMonth || this.disabled || this.readOnly) return;
+    const s = e.date;
+    if (!this._anchorDate) {
+      this._isSelecting = !0, this._anchorDate = s;
+      return;
+    }
+    let n = this._anchorDate, a = s;
+    s < n && (n = s, a = this._anchorDate);
+    const t = this.calculateValidRanges(n, a), r = [...this.value || [], ...t];
+    this._skipValueNavigation = !0, this.value = O(r), this._isSelecting = !1, this._nextDate = null, this._anchorDate = null, this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: this.value },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  /**
+   * Calculates and returns an array of valid date ranges between the given start date and end date.
+   * A date range is considered valid if no dates within the range are disabled.
+   *
+   * @param {Date} startDate - The starting date for the range calculation.
+   * @param {Date} endDate - The ending date for the range calculation.
+   * @return {DateRange[]} An array of valid date ranges where each range defines consecutive, non-disabled dates.
+   */
+  calculateValidRanges(e, i) {
+    const s = [], n = new Date(e), a = new Date(i);
+    n.setHours(0, 0, 0, 0), a.setHours(0, 0, 0, 0);
+    let t = null;
+    for (; n <= a; ) {
+      if (!this.isDisabled(n))
+        t || (t = new Date(n));
+      else if (t) {
+        const l = new Date(n);
+        l.setDate(n.getDate() - 1), s.push(p(t, l)), t = null;
+      }
+      n.setDate(n.getDate() + 1);
+    }
+    return t && s.push(p(t, i)), s;
+  }
+  onMouseOver(e) {
+    this._isSelecting && (this._nextDate = e);
+  }
+  // --- Pills ---
+  renderAboveCalendar() {
+    if (this.hidePills) return b;
+    const e = this.getSortedPills();
+    if (e.length === 0) return b;
+    const i = e.map((s) => {
+      const n = this.formatDateForDisplay(s.start), a = s.end ? this.formatDateForDisplay(s.end) : n, t = `${n} - ${a}`;
+      return {
+        key: `${s.start}-${s.end ?? s.start}`,
+        label: t,
+        ariaLabel: `${this.removePillAriaLabel ?? "Remove date"} ${t}`
+      };
+    });
+    return v`
+      <gui-pills
+        class="gui-range-calendar__pills"
+        .items=${i}
+        .removable=${!0}
+        .clickable=${!0}
+        .bubble=${!1}
+        ?disabled=${this.disabled}
+        ?readonly=${this.readOnly}
+        .removeAriaLabel=${this.removePillAriaLabel ?? "Remove date"}
+        @pillremove=${this.onPillRemoveEvent}
+        @pillclick=${this.onPillClickEvent}
+      ></gui-pills>
+    `;
+  }
+  formatDateForDisplay(e) {
+    const i = new Date(e);
+    return isNaN(i.getTime()) ? e : new Intl.DateTimeFormat(this.localeId ?? "en", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit"
+    }).format(i);
+  }
+  getSortedPills() {
+    return !this.value || !Array.isArray(this.value) ? [] : [...this.value].sort(
+      (e, i) => new Date(e.start).getTime() - new Date(i.start).getTime()
+    );
+  }
+  navigateToDate(e) {
+    const i = new Date(e);
+    !isNaN(i.getTime()) && !g(i, this._currentDate, this.numberOfMonths ?? 1) && (this._currentDate = i);
+  }
+};
+u([
+  D({ type: Array })
+], c.prototype, "value", 2);
+u([
+  D({ type: String })
+], c.prototype, "focusDate", 2);
+u([
+  D({ type: Boolean })
+], c.prototype, "hidePills", 2);
+u([
+  D({ type: String })
+], c.prototype, "removePillAriaLabel", 2);
+u([
+  f()
+], c.prototype, "_anchorDate", 2);
+u([
+  f()
+], c.prototype, "_nextDate", 2);
+u([
+  f()
+], c.prototype, "_isSelecting", 2);
+c = u([
+  $("gui-range-calendar")
+], c);
+typeof customElements < "u" && !customElements.get("gui-range-calendar") && customElements.define("gui-range-calendar", c);

package/{range-calendar.element-C-4qqRGK.js → range-calendar.element-DQZXvd-L.js}

@@ -1,6 +1,6 @@
 import { InputWidgetAdapter as d, formContext as o, inputContext as h } from "@golemui/lit";
 import "@golemui/gui-shared";
-import "./range-calendar-qpakwAba.js";
+import "./range-calendar-CZGBBOzO.js";
 import { consume as m, provide as u } from "@lit/context";
 import { LitElement as c, html as b } from "lit";
 import { property as D, customElement as $ } from "lit/decorators.js";

package/range-date-input-CcPYH7P3.js

@@ -0,0 +1,398 @@
+import "@golemui/gui-shared";
+import { LitElement as v, nothing as g, html as c } from "lit";
+import { repeat as D } from "lit-html/directives/repeat.js";
+import { property as h, state as f, customElement as b } from "lit/decorators.js";
+import { classMap as _ } from "lit/directives/class-map.js";
+import { live as $ } from "lit/directives/live.js";
+import { G as I, b as A, c as w } from "./templates-Dk1jxLwS.js";
+import { t as m, m as P } from "./date-CG1562vW.js";
+import "./pills-D0yyi-op.js";
+import { styleMap as E } from "lit-html/directives/style-map.js";
+var S = Object.defineProperty, M = Object.getOwnPropertyDescriptor, d = (t, e, s, a) => {
+  for (var r = a > 1 ? void 0 : a ? M(e, s) : e, i = t.length - 1, l; i >= 0; i--)
+    (l = t[i]) && (r = (a ? l(e, s, r) : l(r)) || r);
+  return a && r && S(e, s, r), r;
+};
+let o = 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.value = [], this.hint = void 0, this.icon = "", this.removePillAriaLabel = void 0, this.startDateAriaLabel = void 0, this.endDateAriaLabel = void 0, this.separator = void 0, this._startDate = { day: "", month: "", year: "" }, this._endDate = { day: "", month: "", year: "" }, this.MIN_DAY = 1, this.MAX_DAY = 31, this.MAX_VALID_DAY = (t, e) => t === 2 ? new Date(e, 1, 29).getDate() === 29 || !e ? 29 : 28 : t === 4 || t === 6 || t === 9 || t === 11 ? 30 : 31, this.MIN_MONTH = 1, this.MAX_MONTH = 12, this.MIN_YEAR = 1e3, this.MAX_YEAR = 9999, this.ariaController = new I(this, {
+      getTargets: () => this.querySelectorAll(".gui-range-date-input"),
+      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 e = this.getSortedPills(), s = e.findIndex(
+        (i) => `${i.start}-${i.end ?? i.start}` === t.detail.key
+      );
+      if (s < 0) return;
+      const a = e[s], r = (this.value ?? []).filter(
+        (i) => !(i.start === a.start && (i.end ?? null) === (a.end ?? null))
+      );
+      this.value = r, this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: { value: this.value },
+          bubbles: !0,
+          composed: !0
+        })
+      ), r.length === 0 && requestAnimationFrame(() => {
+        this.querySelector(
+          ".gui-range-date-input__field input"
+        )?.focus();
+      });
+    }, this.onPillClickEvent = (t) => {
+      const s = this.getSortedPills().find(
+        (a) => `${a.start}-${a.end ?? a.start}` === t.detail.key
+      );
+      s && this.onPillClick(s);
+    };
+  }
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-field");
+  }
+  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 = new Intl.DateTimeFormat(this.localeId ?? "en", {
+      year: "numeric",
+      month: "numeric",
+      day: "numeric"
+    }).formatToParts(/* @__PURE__ */ new Date()), a = this.getSortedPills().map((i) => {
+      const l = this.formatDateForDisplay(i.start), n = i.end ? this.formatDateForDisplay(i.end) : l, u = `${l} - ${n}`;
+      return {
+        key: `${i.start}-${i.end ?? i.start}`,
+        label: u,
+        ariaLabel: `${this.removePillAriaLabel ?? "Remove date"} ${u}`
+      };
+    }), r = {
+      "gui-widget-icon": !0,
+      [this.icon]: !!this.icon
+    };
+    return c`
+      ${this.label ? A(this.uid, t, !1, void 0, !1) : g}
+
+      <div class="gui-widget">
+        <div
+          class="gui-widget-input gui-range-date-input ${this.icon ? "gui-range-date-input--icon" : ""}"
+          role="group"
+          aria-label=${this.label ?? "Date range input"}
+        >
+          ${this.icon ? c`<span class=${_(r)} data-icon=${this.icon}></span>` : g}
+
+          <gui-pills
+            class="gui-range-date-input__pills"
+            style=${E(a.length ? {} : { "min-width": 0 })}
+            .items=${a}
+            .removable=${!0}
+            .clickable=${!0}
+            .bubble=${!0}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readOnly}
+            .removeAriaLabel=${this.removePillAriaLabel ?? "Remove date"}
+            .compactAriaLabel=${`${a.length} date ranges`}
+            @pillremove=${this.onPillRemoveEvent}
+            @pillclick=${this.onPillClickEvent}
+          ></gui-pills>
+
+          <div class="gui-range-date-input__inputs">
+            <div
+              class="gui-range-date-input__field"
+              role="group"
+              aria-label=${this.startDateAriaLabel ?? "Start date"}
+            >
+              ${this.renderDateInputs("start", e)}
+            </div>
+
+            <span class="gui-range-date-input__separator">${this.separator ?? "-"}</span>
+
+            <div
+              class="gui-range-date-input__field"
+              role="group"
+              aria-label=${this.endDateAriaLabel ?? "End date"}
+            >
+              ${this.renderDateInputs("end", e)}
+            </div>
+          </div>
+        </div>
+
+        ${this.showErrors && this.errors?.length ? w(this.uid, t) : g}
+      </div>
+    `;
+  }
+  renderDateInputs(t, e) {
+    const s = t === "start" ? this._startDate : this._endDate;
+    return D(
+      e,
+      (a) => `${t}-${a.type}`,
+      (a, r) => {
+        const i = t === "start" && r === 0 ? 0 : -1;
+        switch (a.type) {
+          case "day":
+            return this.renderInput(t, "day", "dd", 2, i, s.day);
+          case "month":
+            return this.renderInput(t, "month", "mm", 2, i, s.month);
+          case "year":
+            return this.renderInput(t, "year", "yyyy", 4, i, s.year);
+          case "literal":
+            return c`<span class="gui-range-date-input__separator">${a.value}</span>`;
+          default:
+            return "";
+        }
+      }
+    );
+  }
+  renderInput(t, e, s, a, r, i) {
+    return c`
+      <div class="gui-range-date-input__touch-target">
+        <input
+          type="text"
+          inputmode="numeric"
+          class="gui-range-date-input__part ${e === "year" ? "gui-range-date-input__year" : ""}"
+          data-type=${e}
+          data-group=${t}
+          maxlength=${a}
+          placeholder=${s}
+          tabindex=${r}
+          ?required=${this.required}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readOnly}
+          autocomplete="off"
+          .value=${$(i)}
+          @keydown=${this.handleKeyDown}
+          @keyup=${(l) => this.handleKeyUp(l, t, e)}
+          @focus=${this.handleFocus}
+          @blur=${(l) => this.handleBlur(l, t, e)}
+          @change=${(l) => this.handleChange(l, t, e)}
+        />
+        <div class="gui-range-date-input__visual-underline"></div>
+      </div>
+    `;
+  }
+  formatDateForDisplay(t) {
+    const e = new Date(t);
+    return isNaN(e.getTime()) ? t : new Intl.DateTimeFormat(this.localeId ?? "en", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit"
+    }).format(e);
+  }
+  getSortedPills() {
+    return !this.value || !Array.isArray(this.value) ? [] : [...this.value].sort(
+      (t, e) => new Date(t.start).getTime() - new Date(e.start).getTime()
+    );
+  }
+  onPillClick(t) {
+    this.dispatchEvent(
+      new CustomEvent("pillClick", {
+        detail: { range: t },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  handleKeyDown(t) {
+    [
+      "Backspace",
+      "Tab",
+      "ArrowUp",
+      "ArrowDown",
+      "ArrowLeft",
+      "ArrowRight",
+      "Delete",
+      "Enter"
+    ].includes(t.key) || t.ctrlKey || t.metaKey || this.readOnly || /^[0-9]$/.test(t.key) || t.preventDefault();
+  }
+  handleFocus(t) {
+    this.dispatchEvent(new CustomEvent("focus", { detail: t }));
+  }
+  handleKeyUp(t, e, s) {
+    if (this.readOnly) return;
+    const a = window.getComputedStyle(this).direction === "rtl", r = t.target, i = this.getGroupInputs(e), l = i.indexOf(r);
+    if (r.value.length === r.maxLength && /^[0-9]$/.test(t.key))
+      if (l === i.length - 1) {
+        if (e === "start") {
+          const n = this.getGroupInputs("end");
+          n.length > 0 && n[0].focus();
+        }
+      } else
+        i[l + 1].focus();
+    switch (t.key) {
+      case "Enter": {
+        if (this.tryCreatePill(), this.value && this.value.length > 0) {
+          const n = this.value[this.value.length - 1];
+          this.onPillClick(n);
+        }
+        break;
+      }
+      case "ArrowUp": {
+        const n = isNaN(parseInt(r.value, 10) + 1) ? 1 : parseInt(r.value, 10) + 1;
+        this.setDatePartValue(e, s, n), r.select(), this.tryCreatePill();
+        break;
+      }
+      case "ArrowDown": {
+        const n = isNaN(parseInt(r.value, 10) - 1) ? 1 : parseInt(r.value, 10) - 1;
+        this.setDatePartValue(e, s, n), r.select(), this.tryCreatePill();
+        break;
+      }
+      case "ArrowLeft": {
+        const n = a ? l + 1 : l - 1;
+        if (n >= 0 && n < i.length)
+          i[n].focus(), i[n].select();
+        else {
+          const u = a ? "end" : "start";
+          if (e !== u) {
+            const p = this.getGroupInputs(u);
+            if (p.length > 0) {
+              const y = p[p.length - 1];
+              y.focus(), y.select();
+            }
+          }
+        }
+        break;
+      }
+      case "ArrowRight": {
+        const n = a ? l - 1 : l + 1;
+        if (n >= 0 && n < i.length)
+          i[n].focus(), i[n].select();
+        else {
+          const u = a ? "start" : "end";
+          if (e !== u) {
+            const p = this.getGroupInputs(u);
+            p.length > 0 && (p[0].focus(), p[0].select());
+          }
+        }
+        break;
+      }
+    }
+  }
+  handleChange(t, e, s) {
+    if (t.stopImmediatePropagation(), this.readOnly) return;
+    const r = t.target.value.replace(/[^0-9]/g, "");
+    this.updateDatePart(e, s, r), this.tryCreatePill();
+  }
+  handleBlur(t, e, s) {
+    const a = t.target, r = parseInt(a.value, 10);
+    if (!isNaN(r) && r > 0) {
+      const i = s === "year" ? 4 : 2;
+      a.value = r.toString().padStart(i, "0");
+    }
+    this.dispatchEvent(new CustomEvent("blur"));
+  }
+  getGroupInputs(t) {
+    return Array.from(this.querySelectorAll(`input[data-group="${t}"]`));
+  }
+  setDatePartValue(t, e, s) {
+    const a = t === "start" ? this._startDate : this._endDate, r = e === "year" ? 4 : 2;
+    e === "day" && (a.day = s.toString().padStart(r, "0")), e === "month" && (a.month = s.toString().padStart(r, "0")), e === "year" && (a.year = s.toString().padStart(r, "0")), t === "start" ? this._startDate = { ...a } : this._endDate = { ...a };
+  }
+  updateDatePart(t, e, s) {
+    t === "start" ? this._startDate = { ...this._startDate, [e]: s } : this._endDate = { ...this._endDate, [e]: s };
+  }
+  validateDateParts(t) {
+    let e = parseInt(t.year, 10), s = parseInt(t.month, 10), a = parseInt(t.day, 10);
+    if (isNaN(e) || isNaN(s) || isNaN(a) || String(e).length < 4) return null;
+    e = Math.max(this.MIN_YEAR, Math.min(this.MAX_YEAR, e)), s = Math.max(this.MIN_MONTH, Math.min(this.MAX_MONTH, s)), a = Math.max(this.MIN_DAY, Math.min(this.MAX_DAY, a));
+    const r = this.MAX_VALID_DAY(s, e);
+    return a > r ? (this.dispatchEvent(
+      new CustomEvent("inputError", {
+        detail: {
+          message: "Invalid date: day is greater than the maximum valid day for the month and year."
+        },
+        bubbles: !0
+      })
+    ), null) : new Date(e, s - 1, a);
+  }
+  tryCreatePill() {
+    const t = this.validateDateParts(this._startDate), e = this.validateDateParts(this._endDate);
+    if (!t || !e) return;
+    let s = t, a = e;
+    e.getTime() < t.getTime() && (s = e, a = t);
+    const r = m(s), i = m(a), l = r === i ? { start: r } : { start: r, end: i }, n = this.value ? [...this.value] : [];
+    n.push(l), this.value = P(n), this._startDate = { day: "", month: "", year: "" }, this._endDate = { day: "", month: "", year: "" }, this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: this.value },
+        bubbles: !0,
+        composed: !0
+      })
+    ), requestAnimationFrame(() => {
+      const u = this.getGroupInputs("start");
+      u.length > 0 && u[0].focus();
+    }), this.requestUpdate();
+  }
+};
+d([
+  h({ type: String })
+], o.prototype, "uid", 2);
+d([
+  h({ type: String })
+], o.prototype, "label", 2);
+d([
+  h({ type: String, attribute: "locale-id" })
+], o.prototype, "localeId", 2);
+d([
+  h({ type: Array })
+], o.prototype, "errors", 2);
+d([
+  h({ type: Boolean })
+], o.prototype, "showErrors", 2);
+d([
+  h({ type: Boolean })
+], o.prototype, "touched", 2);
+d([
+  h({ type: Boolean })
+], o.prototype, "required", 2);
+d([
+  h({ type: Boolean })
+], o.prototype, "disabled", 2);
+d([
+  h({ type: Boolean, attribute: "readonly" })
+], o.prototype, "readOnly", 2);
+d([
+  h({ type: Array })
+], o.prototype, "value", 2);
+d([
+  h({ type: String })
+], o.prototype, "hint", 2);
+d([
+  h({ type: String })
+], o.prototype, "icon", 2);
+d([
+  h({ type: String })
+], o.prototype, "removePillAriaLabel", 2);
+d([
+  h({ type: String })
+], o.prototype, "startDateAriaLabel", 2);
+d([
+  h({ type: String })
+], o.prototype, "endDateAriaLabel", 2);
+d([
+  h({ type: String })
+], o.prototype, "separator", 2);
+d([
+  f()
+], o.prototype, "_startDate", 2);
+d([
+  f()
+], o.prototype, "_endDate", 2);
+o = d([
+  b("gui-range-date")
+], o);
+typeof customElements < "u" && !customElements.get("gui-range-date") && customElements.define("gui-range-date", o);

package/{range-date-input.element-D3xRMAaY.js → range-date-input.element-v71P-oUp.js}

@@ -1,6 +1,6 @@
 import { InputWidgetAdapter as n, formContext as o, inputContext as u } from "@golemui/lit";
 import "@golemui/gui-shared";
-import "./range-date-input-DFnvo-KK.js";
+import "./range-date-input-CcPYH7P3.js";
 import { consume as h, 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";