@golemui/gui-lit 1.0.2 → 1.1.0

package/pill-ranges-DCqDmpkk.js

@@ -0,0 +1,48 @@
+import { p as o } from "./date-Bj9mI3GU.js";
+function i(t) {
+  return `${t.start}-${t.end ?? t.start}`;
+}
+function f(t, n) {
+  return !t || !Array.isArray(t) ? [] : [...t].sort((r, e) => n(r.start, e.start));
+}
+function u(t, n) {
+  return t.find((r) => i(r) === n);
+}
+function c(t, n) {
+  const r = t ?? [], e = u(r, n);
+  if (!e) return null;
+  const a = r.filter(
+    (s) => !(s.start === e.start && (s.end ?? null) === (e.end ?? null))
+  );
+  return { removed: e, next: a };
+}
+function d(t, n) {
+  const r = o(t);
+  return isNaN(r.getTime()) ? t : new Intl.DateTimeFormat(n ?? "en", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit"
+  }).format(r);
+}
+function m(t, n) {
+  const r = n(t.start), e = t.end ? n(t.end) : r;
+  return `${r} - ${e}`;
+}
+function y(t, n, r) {
+  return t.map((e) => {
+    const a = n(e);
+    return {
+      key: i(e),
+      label: a,
+      ariaLabel: `${r} ${a}`
+    };
+  });
+}
+export {
+  m as a,
+  y as b,
+  d as c,
+  u as f,
+  c as r,
+  f as s
+};

package/{pills-B66qz_KX.js → pills-Be1UrLgq.js}

@@ -130,6 +130,9 @@ let r = class extends m {
         tabindex="-1"
         aria-hidden="true"
         ?disabled=${this.disabled || this.readOnly}
+        @mousedown=${(t) => {
+      t.stopPropagation(), t.preventDefault();
+    }}
         @click=${(t) => {
       t.stopPropagation(), this.emitRemove(e.key, this.items.indexOf(e));
     }}
@@ -198,7 +201,7 @@ let r = class extends m {
       return;
     }
     if (e.key === "Escape" && s) {
-      e.preventDefault(), this.closeDropdown();
+      e.preventDefault(), e.stopPropagation(), this.closeDropdown();
       return;
     }
     this.emitKeydown(t.key, e);

package/popup.controller-eUDxE6jD.js

@@ -0,0 +1,71 @@
+import "lit";
+import { G as r } from "./focus-leave.controller-2gV0pQd5.js";
+class p {
+  constructor(s, n) {
+    this._open = !1, this._restoringFocus = !1, this._suppressNextFocusOut = !1, this.show = () => {
+      this.options.isDisabled() || this._restoringFocus || (this.options.beforeOpen?.(this), this.setOpen(!0));
+    }, this.close = () => {
+      this.setOpen(!1);
+    }, this.toggle = () => {
+      this.options.isDisabled() || (this.options.keyToggleMode === "toggle" ? this.setOpen(!this._open) : this._open ? this.close() : this.show());
+    }, this.onAnchorClick = (t) => {
+      if (this.options.isDisabled()) return;
+      const e = t.target, o = this.options.clickIntent(e);
+      if (o !== "ignore") {
+        if (o === "open") {
+          this.show();
+          return;
+        }
+        this.toggle();
+      }
+    }, this.onAnchorKeyUp = (t) => {
+      this.options.isDisabled() || t.target === t.currentTarget && (t.key === "Enter" || t.key === " ") && this.toggle();
+    }, this.onAnchorKeyDown = (t) => this.options.isDisabled() ? !1 : t.key === "Escape" && this._open ? (t.preventDefault(), t.stopPropagation(), this.restoreFocusToInput(), this.close(), !0) : !1, this.onDocumentClick = (t) => {
+      if (!this._open) return;
+      const e = t.composedPath();
+      this.options.getInteriorElements().some((i) => !!i && e.includes(i)) || this.close();
+    }, this.onHostFocusOut = (t) => {
+      if (this._suppressNextFocusOut) {
+        this._suppressNextFocusOut = !1;
+        return;
+      }
+      this._open && this.focusLeave.handleFocusOut(t);
+    }, this.host = s, this.options = n, this.focusLeave = new r(s, {
+      onLeave: () => this.close()
+    }), s.addController(this);
+  }
+  get open() {
+    return this._open;
+  }
+  /**
+   * Swallows exactly the next focusout pass — even one that arrives while
+   * the popup is closed — then re-arms normal behavior. Used around
+   * operations that transiently move focus (pills dropdown coordination).
+   */
+  suppressNextFocusOut() {
+    this._suppressNextFocusOut = !0;
+  }
+  setOpen(s) {
+    this._open !== s && (this._open = s, this.host.requestUpdate(), this.options.onOpenChanged?.(s));
+  }
+  /**
+   * Focuses the `focusRestoreSelector` element, arming the restoring-focus
+   * flag (reset via setTimeout(0)) so the resulting focus event does not
+   * re-open the popup through show().
+   */
+  restoreFocusToInput() {
+    const s = this.host.querySelector(this.options.focusRestoreSelector);
+    s && (this._restoringFocus = !0, s.focus(), setTimeout(() => {
+      this._restoringFocus = !1;
+    }));
+  }
+  hostConnected() {
+    document.addEventListener("click", this.onDocumentClick), this.host.addEventListener("focusout", this.onHostFocusOut);
+  }
+  hostDisconnected() {
+    document.removeEventListener("click", this.onDocumentClick), this.host.removeEventListener("focusout", this.onHostFocusOut);
+  }
+}
+export {
+  p as G
+};

package/range-calendar-CKPYeSGt.js

@@ -0,0 +1,452 @@
+import { LitElement as y, html as c, nothing as p } from "lit";
+import { property as s, state as v, customElement as b } from "lit/decorators.js";
+import { classMap as m } from "lit/directives/class-map.js";
+import { G as D } from "./templates-Dk1jxLwS.js";
+import { G as f, a as _, r as R, b as S, c as M, d as I, e as C } from "./day-status-0-hJHrI7.js";
+import { G as O } from "./focus-leave.controller-2gV0pQd5.js";
+import { p as h, t as l, r as E, D as A, m as P, c as L } from "./date-Bj9mI3GU.js";
+import { r as x, f as k, a as w, b as G, s as N, c as T } from "./pill-ranges-DCqDmpkk.js";
+import { i as $, s as F, r as g } from "./range-selection-CU3hxLJE.js";
+import "./pills-Be1UrLgq.js";
+var Y = Object.defineProperty, B = Object.getOwnPropertyDescriptor, n = (e, t, o, a) => {
+  for (var r = a > 1 ? void 0 : a ? B(t, o) : t, d = e.length - 1, u; d >= 0; d--)
+    (u = e[d]) && (r = (a ? u(t, o, r) : u(r)) || r);
+  return a && r && Y(t, o, r), r;
+};
+let i = class extends y {
+  constructor() {
+    super(...arguments), this.uid = void 0, this.label = void 0, this.hint = void 0, this.localeId = void 0, this.errors = [], this.touched = void 0, this.required = !1, this.disabled = !1, this.readOnly = !1, this.prevMonthIcon = "", this.nextMonthIcon = "", this.prevMonthAriaLabel = "", this.nextMonthAriaLabel = "", this.dayFormat = "numeric", this.weekdayFormat = "narrow", this.monthFormat = "long", this.minDate = void 0, this.maxDate = void 0, this.disabledRanges = void 0, this.numberOfMonths = 1, this.value = [], this.focusDate = void 0, this.hidePills = !1, this.removePillAriaLabel = void 0, this.disabledDateRangeMessage = void 0, this.invalidRange = null, this._selection = $(), this._invalidRange = null, this._skipValueNavigation = !1, this._nav = new f(this, {
+      getMinDate: () => this.minDate,
+      getMaxDate: () => this.maxDate,
+      getNumberOfMonths: () => this.numberOfMonths,
+      getDisabledRanges: () => this.disabledRanges,
+      onYearSelectorToggled: () => this._keyboard.onYearGridToggled()
+    }), this.ariaController = new D(this, {
+      getTargets: () => this.querySelectorAll(".gui-calendar-input"),
+      getState: () => ({
+        uid: this.uid,
+        templateData: {
+          hint: this.hint,
+          errors: this.errors,
+          readonly: this.readOnly,
+          disabled: this.disabled,
+          touched: this.touched
+        }
+      })
+    }), this._keyboard = new _(this, {
+      canGoPrev: () => this._nav.canGoPrev(),
+      canGoNext: () => this._nav.canGoNext(),
+      goPrev: () => this._nav.prevMonth(),
+      goNext: () => this._nav.nextMonth(),
+      onActivateDay: (e, t) => this.selectDate(this.activationDay(e), t),
+      onSelectYear: (e) => this._nav.selectYear(e),
+      onCloseYearGrid: () => this._nav.closeYearSelector(),
+      isYearGridOpen: () => this._nav.yearSelectorOpen
+    }), this._focusLeave = new O(this, {
+      onLeave: () => this.dispatchEvent(new CustomEvent("blur", { bubbles: !0, composed: !0 }))
+    }), this.onPillRemoveEvent = (e) => {
+      if (this.disabled || this.readOnly) return;
+      const t = x(this.value, e.detail.key);
+      t && (this.value = t.next, this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: { value: this.value },
+          bubbles: !0,
+          composed: !0
+        })
+      ));
+    }, this.onPillClickEvent = (e) => {
+      const t = k(this.getSortedPills(), e.detail.key);
+      t && this.navigateToDate(t.start);
+    };
+  }
+  /** The nav controller's month cursor, kept under its historical name. */
+  get _currentDate() {
+    return this._nav.currentDate;
+  }
+  set _currentDate(e) {
+    this._nav.currentDate = e;
+  }
+  /**
+   * Full instant of an endpoint, used to order the pills. Date-only here; a
+   * subclass whose endpoints carry a time overrides it so two ranges on the
+   * same day still sort by time.
+   */
+  parseEndpoint(e) {
+    return h(e);
+  }
+  /**
+   * Midnight-truncated calendar day of an endpoint, used to highlight the day
+   * grid.
+   */
+  endpointDay(e) {
+    return h(e);
+  }
+  /** Pill text for one committed range. */
+  formatPillLabel(e) {
+    return w(e, (t) => T(t, this.localeId));
+  }
+  /** Day-button inner content. */
+  renderDayContent(e) {
+    return c`${e.dayLabel}`;
+  }
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-field");
+  }
+  willUpdate(e) {
+    if (e.has("invalidRange"))
+      if (this.invalidRange) {
+        const t = this.endpointDay(this.invalidRange.start), o = this.endpointDay(this.invalidRange.end);
+        this._invalidRange = isNaN(t.getTime()) || isNaN(o.getTime()) ? null : { start: t, end: o };
+      } else
+        this._invalidRange = null;
+    if (e.has("value") && !e.has("focusDate")) {
+      if (this._skipValueNavigation)
+        this._skipValueNavigation = !1;
+      else if (this.value) {
+        const t = Array.isArray(this.value) ? this.value : [{ start: this.value }];
+        t.length > 0 && t[0].start && this._nav.navigateToDate(this.endpointDay(t[0].start));
+      }
+    }
+    if (e.has("focusDate") && this.focusDate) {
+      const t = h(this.focusDate);
+      isNaN(t.getTime()) || (this._nav.navigateToDate(t), this.focusDate = void 0);
+    }
+  }
+  render() {
+    return R({
+      uid: this.uid,
+      label: this.label,
+      hint: this.hint,
+      errors: this.errors,
+      touched: this.touched,
+      required: this.required,
+      disabled: this.disabled,
+      numberOfMonths: this.numberOfMonths,
+      prevMonthIcon: this.prevMonthIcon,
+      nextMonthIcon: this.nextMonthIcon,
+      prevMonthAriaLabel: this.prevMonthAriaLabel,
+      nextMonthAriaLabel: this.nextMonthAriaLabel,
+      canGoPrev: this._nav.canGoPrev(),
+      canGoNext: this._nav.canGoNext(),
+      onPrevMonthClick: this._keyboard.onPrevMonthClick,
+      onNextMonthClick: this._keyboard.onNextMonthClick,
+      onFocusOut: this._focusLeave.onFocusOut,
+      renderAboveCalendar: () => this.renderAboveCalendar(),
+      renderMonthPanel: (e) => S({
+        currentDate: this._nav.currentDate,
+        offset: e,
+        localeId: this.localeId,
+        monthFormat: this.monthFormat,
+        yearSelectorOpen: this._nav.yearSelectorOpen,
+        onToggleYearSelector: () => this.toggleYearSelector(),
+        renderBelowHeader: (t) => this.renderBelowHeader(t),
+        renderPanelBody: (t) => this.renderPanelBody(t)
+      })
+    });
+  }
+  /** Hook rendered between the header and the panel body. Default: nothing. */
+  renderBelowHeader(e) {
+    return p;
+  }
+  /**
+   * The panel content below the header: the year grid replaces the days grid
+   * of the first panel while the year selector is open. Subclasses can swap
+   * in other bodies (e.g. the date-time calendar's time grid).
+   */
+  renderPanelBody(e) {
+    return M({
+      offset: e,
+      yearSelectorOpen: this._nav.yearSelectorOpen,
+      years: this._nav.yearList,
+      currentYear: this._nav.currentDate.getFullYear(),
+      onSelectYear: (t) => this._keyboard.selectYear(t),
+      onYearKeydown: this._keyboard.handleYearKeydown,
+      localeId: this.localeId,
+      getDays: (t) => this.getDaysInMonth(t),
+      renderDay: (t) => this.renderDay(t)
+    });
+  }
+  /**
+   * Kept as a thin override point — the range date-time subclass closes its
+   * time pickers before delegating to the nav controller.
+   */
+  toggleYearSelector() {
+    this._nav.toggleYearSelector();
+  }
+  isDisabled(e) {
+    return this._nav.isDisabled(e);
+  }
+  /**
+   * Rebuilds the day context for an Enter/Space activation from the button's
+   * `data-date`. Legitimate because a day button can only be focused when it
+   * is enabled and in-month; the `disabled`/`readOnly` guards stay in
+   * `selectDate`.
+   */
+  activationDay(e) {
+    return {
+      date: h(e),
+      isCurrentMonth: !0,
+      isDisabled: !1,
+      isFocusable: !0,
+      dayLabel: "",
+      isToday: !1,
+      isRangeStart: !1,
+      isRangeEnd: !1,
+      isInRange: !1,
+      isOneDayRange: !1,
+      isAnchor: !1,
+      isSelecting: !1,
+      isInvalidStart: !1,
+      isInvalidEnd: !1,
+      isInvalidInRange: !1
+    };
+  }
+  renderDay(e) {
+    const t = e.isInvalidStart && e.isInvalidEnd, o = {
+      "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,
+      "invalid-range-start": e.isInvalidStart && !t,
+      "invalid-range-end": e.isInvalidEnd && !t,
+      "invalid-range-single": t,
+      "invalid-in-range": e.isInvalidInRange,
+      "is-anchor": e.isAnchor,
+      "is-selecting": e.isSelecting,
+      disabled: e.isDisabled
+    };
+    return c`
+      <button
+        type="button"
+        role="gridcell"
+        class=${m(o)}
+        tabindex=${e.isFocusable ? 0 : -1}
+        ?disabled=${!e.isCurrentMonth || e.isDisabled}
+        data-date=${l(e.date)}
+        @click=${(a) => this.selectDate(e, a)}
+        @mouseover=${() => this.onMouseOver(e)}
+        @focus=${() => this.onMouseOver(e)}
+        @keydown=${(a) => this._keyboard.handleDayKeydown(a)}
+        aria-selected=${e.isRangeStart || e.isRangeEnd || e.isInRange ? "true" : "false"}
+      >
+        ${this.renderDayContent(e)}
+      </button>
+    `;
+  }
+  getDaysInMonth(e) {
+    const t = (this.value ?? []).map((a) => ({
+      start: this.endpointDay(a.start),
+      end: a.end ? this.endpointDay(a.end) : void 0
+    })), o = F(this._selection);
+    return I({
+      currentDate: this._currentDate,
+      offset: e,
+      localeId: this.localeId,
+      numberOfMonths: this.numberOfMonths ?? 1,
+      isDisabled: (a) => this.isDisabled(a),
+      toDay: (a) => {
+        const r = C(a.date, {
+          ranges: t,
+          anchor: this._selection.anchor,
+          selectingSpan: o,
+          invalidRange: this._invalidRange
+        });
+        return {
+          date: a.date,
+          dayLabel: a.dayLabel,
+          isCurrentMonth: a.isCurrentMonth,
+          isToday: a.isToday,
+          isRangeStart: r.isRangeStart,
+          isRangeEnd: r.isRangeEnd,
+          isInRange: r.isInRange,
+          isInvalidStart: r.isInvalidStart && a.isCurrentMonth,
+          isInvalidEnd: r.isInvalidEnd && a.isCurrentMonth,
+          isInvalidInRange: r.isInvalidInRange && a.isCurrentMonth,
+          isDisabled: a.isDisabled,
+          isOneDayRange: r.isOneDayRange,
+          isAnchor: r.isAnchor,
+          isFocusable: a.isToday || r.isRangeStart,
+          isSelecting: r.isSelecting && a.isCurrentMonth
+        };
+      },
+      focusFallbackDates: [
+        /* @__PURE__ */ new Date(),
+        ...(this.value ?? []).map((a) => this.endpointDay(a.start))
+      ]
+    });
+  }
+  selectDate(e, t = null) {
+    if (!e.isCurrentMonth || this.disabled || this.readOnly) return;
+    const { state: o, commit: a } = g(this._selection, {
+      type: "pick",
+      date: e.date
+    });
+    if (this._selection = o, !a) {
+      this._invalidRange = null;
+      return;
+    }
+    if (E(
+      l(a.start),
+      l(a.end),
+      this.disabledRanges,
+      this.minDate,
+      this.maxDate
+    )) {
+      this._invalidRange = { start: a.start, end: a.end }, this.dispatchEvent(
+        new CustomEvent("inputError", {
+          detail: {
+            message: this.disabledDateRangeMessage ?? A,
+            range: { start: l(a.start), end: l(a.end) }
+          },
+          bubbles: !0,
+          composed: !0
+        })
+      ), this.requestUpdate();
+      return;
+    }
+    this._invalidRange = null, this._skipValueNavigation = !0, this.value = P([
+      ...this.value || [],
+      L(a.start, a.end)
+    ]), this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: this.value },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  onMouseOver(e) {
+    this._selection = g(this._selection, {
+      type: "hover",
+      date: e.date
+    }).state;
+  }
+  // --- Pills ---
+  renderAboveCalendar() {
+    if (this.hidePills) return p;
+    const e = this.getSortedPills();
+    if (e.length === 0) return p;
+    const t = G(
+      e,
+      (o) => this.formatPillLabel(o),
+      this.removePillAriaLabel ?? "Remove date"
+    );
+    return c`
+      <gui-pills
+        class="gui-range-calendar__pills"
+        .items=${t}
+        .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>
+    `;
+  }
+  getSortedPills() {
+    return N(
+      this.value,
+      (e, t) => this.parseEndpoint(e).getTime() - this.parseEndpoint(t).getTime()
+    );
+  }
+  navigateToDate(e) {
+    this._nav.navigateToDate(this.endpointDay(e));
+  }
+};
+n([
+  s({ type: String })
+], i.prototype, "uid", 2);
+n([
+  s({ type: String })
+], i.prototype, "label", 2);
+n([
+  s({ type: String })
+], i.prototype, "hint", 2);
+n([
+  s({ type: String, attribute: "locale-id" })
+], i.prototype, "localeId", 2);
+n([
+  s({ type: Array })
+], i.prototype, "errors", 2);
+n([
+  s({ type: Boolean })
+], i.prototype, "touched", 2);
+n([
+  s({ type: Boolean })
+], i.prototype, "required", 2);
+n([
+  s({ type: Boolean })
+], i.prototype, "disabled", 2);
+n([
+  s({ type: Boolean, attribute: "readonly" })
+], i.prototype, "readOnly", 2);
+n([
+  s({ type: String, attribute: "prev-month-icon" })
+], i.prototype, "prevMonthIcon", 2);
+n([
+  s({ type: String, attribute: "next-month-icon" })
+], i.prototype, "nextMonthIcon", 2);
+n([
+  s({ type: String, attribute: "prev-month-aria-label" })
+], i.prototype, "prevMonthAriaLabel", 2);
+n([
+  s({ type: String, attribute: "next-month-aria-label" })
+], i.prototype, "nextMonthAriaLabel", 2);
+n([
+  s({ type: String })
+], i.prototype, "dayFormat", 2);
+n([
+  s({ type: String })
+], i.prototype, "weekdayFormat", 2);
+n([
+  s({ type: String })
+], i.prototype, "monthFormat", 2);
+n([
+  s({ type: String })
+], i.prototype, "minDate", 2);
+n([
+  s({ type: String })
+], i.prototype, "maxDate", 2);
+n([
+  s({ type: Array })
+], i.prototype, "disabledRanges", 2);
+n([
+  s({ type: Number })
+], i.prototype, "numberOfMonths", 2);
+n([
+  s({ type: Array })
+], i.prototype, "value", 2);
+n([
+  s({ type: String })
+], i.prototype, "focusDate", 2);
+n([
+  s({ type: Boolean })
+], i.prototype, "hidePills", 2);
+n([
+  s({ type: String })
+], i.prototype, "removePillAriaLabel", 2);
+n([
+  s({ type: String, attribute: "disabled-date-range-message" })
+], i.prototype, "disabledDateRangeMessage", 2);
+n([
+  s({ attribute: !1 })
+], i.prototype, "invalidRange", 2);
+n([
+  v()
+], i.prototype, "_selection", 2);
+n([
+  v()
+], i.prototype, "_invalidRange", 2);
+i = n([
+  b("gui-range-calendar")
+], i);
+typeof customElements < "u" && !customElements.get("gui-range-calendar") && customElements.define("gui-range-calendar", i);

package/{range-calendar.element-QTE6vGNP.js → range-calendar.element-D6KYq18B.js}

@@ -1,13 +1,13 @@
 import { InputWidgetAdapter as d, formContext as o, inputContext as h } from "@golemui/lit";
-import "./range-calendar-9skwbwlB.js";
+import "./range-calendar-CKPYeSGt.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";
+import { LitElement as c, html as D } from "lit";
+import { property as b, customElement as $ } from "lit/decorators.js";
 import "rxjs";
-var g = Object.defineProperty, f = Object.getOwnPropertyDescriptor, n = (e, t, s, r) => {
-  for (var a = r > 1 ? void 0 : r ? f(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;
+var g = Object.defineProperty, f = Object.getOwnPropertyDescriptor, l = (t, e, s, r) => {
+  for (var a = r > 1 ? void 0 : r ? f(e, s) : e, p = t.length - 1, n; p >= 0; p--)
+    (n = t[p]) && (a = (r ? n(e, s, a) : n(a)) || a);
+  return r && a && g(e, s, a), a;
 };
 let i = class extends c {
   constructor() {
@@ -16,10 +16,10 @@ let i = class extends c {
   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,7 +27,7 @@ let i = class extends c {
     );
   }
   render() {
-    return super.render(), b`
+    return super.render(), D`
       <gui-range-calendar
         .uid=${this.widget.uid}
         .label=${this.adapter.templateData.label}
@@ -48,31 +48,35 @@ let i = class extends c {
         .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-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());
   }
 };
-n([
+l([
   m({ context: o }),
-  D({ attribute: !1 })
+  b({ attribute: !1 })
 ], i.prototype, "formContext", 2);
-n([
+l([
   u({ context: h })
 ], i.prototype, "adapter", 2);
-i = n([
+i = l([
   $("gui-range-calendar-input")
 ], i);
 export {

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
+};