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

package/range-date-time-calendar-B3EMgN1E.js

@@ -0,0 +1,734 @@
+import { LitElement as f, nothing as l, html as h } from "lit";
+import { property as n, state as g, customElement as S } from "lit/decorators.js";
+import { classMap as p } from "lit/directives/class-map.js";
+import { G as k } from "./templates-Dmr34nwp.js";
+import { G as w, a as $, r as R, b as I, c as M, d as L, e as E } from "./day-status-CsWStVQV.js";
+import { G as C } from "./focus-leave.controller-2gV0pQd5.js";
+import "./pills-BDMO2NiR.js";
+import "./time-picker-g337F8d0.js";
+import { p as c, t as m, i as O, g as A, D as v } from "./date-DBuYpvcO.js";
+import { r as x, f as P, b as B, s as F } from "./pill-ranges-DpvWwP-3.js";
+import { i as G, s as N, r as y } from "./range-selection-CU3hxLJE.js";
+import { p as Y, e as D, f as _, i as q, o as U, c as H, m as K, d as j, h as V, j as b, k as W, l as T } from "./part-templates-VORbpgs2.js";
+var z = Object.defineProperty, J = Object.getOwnPropertyDescriptor, r = (e, t, a, i) => {
+  for (var o = i > 1 ? void 0 : i ? J(t, a) : t, d = e.length - 1, u; d >= 0; d--)
+    (u = e[d]) && (o = (i ? u(t, a, o) : u(o)) || o);
+  return i && o && z(t, a, o), o;
+};
+let s = class extends f {
+  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.selectYearAriaLabel = void 0, this.yearGridAriaLabel = void 0, 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.hourFormat = void 0, this.minuteStep = void 0, this.allowCustomTime = !1, this.startTimeLabel = void 0, this.endTimeLabel = void 0, this.minDateTime = void 0, this.maxDateTime = void 0, this.minDateTimeMessage = void 0, this.maxDateTimeMessage = void 0, this.disabledRangeMessage = void 0, this.noAvailableTimesMessage = void 0, this.dayCountAriaLabel = void 0, this.disabledDayCountAriaLabel = void 0, this._selection = G(), this._invalidRange = null, this._workingDateStart = void 0, this._workingDateEnd = void 0, this._workingTimeIn = void 0, this._workingTimeOut = void 0, this._openList = null, this._skipValueNavigation = !1, this._nav = new w(this, {
+      getMinDate: () => this.minDate,
+      getMaxDate: () => this.maxDate,
+      getNumberOfMonths: () => this.numberOfMonths,
+      getDisabledRanges: () => this.disabledRanges,
+      onYearSelectorToggled: () => this._keyboard.onYearGridToggled()
+    }), this.ariaController = new k(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,
+          required: this.required
+        }
+      })
+    }), 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 C(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 = P(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;
+  }
+  /** The nav controller's year-grid flag; the time pickers close over it. */
+  get _yearSelectorOpen() {
+    return this._nav.yearSelectorOpen;
+  }
+  set _yearSelectorOpen(e) {
+    this._nav.yearSelectorOpen = e;
+  }
+  /**
+   * Full instant of an endpoint, used to order the pills — endpoints carry a
+   * time, so two ranges on the same day still sort by time.
+   */
+  parseEndpoint(e) {
+    return Y(e);
+  }
+  /**
+   * Midnight-truncated calendar day of an endpoint, used to highlight the day
+   * grid.
+   */
+  endpointDay(e) {
+    return c(e.split("T")[0]);
+  }
+  /** Pill text for one committed range. */
+  formatPillLabel(e) {
+    const t = D(this.localeId, this.hourFormat), a = _(e.start, this.localeId, t), i = e.end ? _(e.end, this.localeId, t) : a;
+    return `${a} - ${i}`;
+  }
+  /** Highlights the parked working date range like a committed one. */
+  get workingRange() {
+    if (!(!this._workingDateStart || !this._workingDateEnd))
+      return {
+        start: c(this._workingDateStart),
+        end: c(this._workingDateEnd)
+      };
+  }
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-field");
+  }
+  willUpdate(e) {
+    if ((!this.hasUpdated || e.has("minDateTime") || e.has("maxDateTime")) && (this.minDate = this.minDateTime ? this.minDateTime.split("T")[0] : void 0, this.maxDate = this.maxDateTime ? this.maxDateTime.split("T")[0] : void 0), e.has("invalidRange"))
+      if (this.invalidRange) {
+        const t = this.endpointDay(this.invalidRange.start), a = this.endpointDay(this.invalidRange.end);
+        this._invalidRange = isNaN(t.getTime()) || isNaN(a.getTime()) ? null : { start: t, end: a };
+      } 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 = c(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,
+      localeId: this.localeId,
+      currentDate: this._nav.currentDate,
+      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) => I({
+        currentDate: this._nav.currentDate,
+        offset: e,
+        localeId: this.localeId,
+        monthFormat: this.monthFormat,
+        yearSelectorOpen: this._nav.yearSelectorOpen,
+        selectYearAriaLabel: this.selectYearAriaLabel,
+        onToggleYearSelector: () => this.toggleYearSelector(),
+        renderBelowHeader: (t) => this.renderBelowHeader(t),
+        renderPanelBody: (t) => this.renderPanelBody(t)
+      })
+    });
+  }
+  renderBelowHeader(e) {
+    if (e !== 0) return l;
+    const t = !this.disabled && !!this._workingDateStart, a = !this.disabled && !!this._workingTimeIn, i = this.startListBounds, o = this.endListBounds, d = {
+      "gui-range-date-time-calendar__time-row": !0,
+      "is-list-open": this._openList !== null
+    };
+    return h`
+      <div class=${p(d)}>
+        <div
+          class=${p({
+      "gui-range-date-time-calendar__time-column": !0,
+      "is-open": this._openList === "start"
+    })}
+        >
+          <gui-time-picker
+            class="gui-time-picker gui-field gui-range-date-time-calendar__start"
+            .uid=${this.uid ? `${this.uid}-start-time` : void 0}
+            .label=${this.startTimeLabel ?? "Start time"}
+            .showErrors=${!1}
+            ?required=${this.required}
+            ?disabled=${!t}
+            ?readonly=${this.readOnly}
+            .allowCustomTime=${this.allowCustomTime}
+            .value=${this._workingTimeIn}
+            .localeId=${this.localeId}
+            .hourFormat=${this.hourFormat}
+            .minuteStep=${this.minuteStep}
+            .minTime=${i.minTime}
+            .maxTime=${i.maxTime}
+            .disabledRanges=${this.resolvedStartTimeRanges}
+            .columns=${4}
+            .disabledRangeMessage=${this.disabledRangeMessage}
+            .noAvailableTimesMessage=${this.noAvailableTimesMessage}
+            @change=${this.onStartTimeChange}
+            @listtoggle=${(u) => this.onListToggle(u, "start")}
+          ></gui-time-picker>
+        </div>
+
+        <div
+          class=${p({
+      "gui-range-date-time-calendar__time-column": !0,
+      "is-open": this._openList === "end"
+    })}
+        >
+          <gui-time-picker
+            class="gui-time-picker gui-field gui-range-date-time-calendar__end"
+            .uid=${this.uid ? `${this.uid}-end-time` : void 0}
+            .label=${this.endTimeLabel ?? "End time"}
+            .showErrors=${!1}
+            ?required=${this.required}
+            ?disabled=${!a}
+            ?readonly=${this.readOnly}
+            .allowCustomTime=${this.allowCustomTime}
+            .value=${this._workingTimeOut}
+            .localeId=${this.localeId}
+            .hourFormat=${this.hourFormat}
+            .minuteStep=${this.minuteStep}
+            .minTime=${o.minTime}
+            .maxTime=${o.maxTime}
+            .disabledRanges=${this.resolvedEndTimeRanges}
+            .columns=${4}
+            .disabledRangeMessage=${this.disabledRangeMessage}
+            .noAvailableTimesMessage=${this.noAvailableTimesMessage}
+            @change=${this.onEndTimeChange}
+            @listtoggle=${(u) => this.onListToggle(u, "end")}
+          ></gui-time-picker>
+        </div>
+      </div>
+    `;
+  }
+  renderPanelBody(e) {
+    return this._openList && !this._yearSelectorOpen && e === 0 ? h`` : 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,
+      currentDate: this._nav.currentDate,
+      yearGridAriaLabel: this.yearGridAriaLabel,
+      getDays: (t) => this.getDaysInMonth(t),
+      renderDay: (t) => this.renderDay(t)
+    });
+  }
+  /** Closes the time pickers before delegating to the nav controller. */
+  toggleYearSelector() {
+    this.startPicker?.closeList(), this.endPicker?.closeList(), this._nav.toggleYearSelector();
+  }
+  /**
+   * A day is unclickable only when a span covers it entirely.
+   */
+  isDisabled(e) {
+    const t = m(e);
+    return O(t, this.minDate, this.maxDate) ? !0 : q(t, this.disabledRanges);
+  }
+  /**
+   * 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) {
+    const t = c(e);
+    return {
+      date: t,
+      isCurrentMonth: !0,
+      isDisabled: this.isDisabled(t),
+      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, a = {
+      "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 h`
+      <button
+        type="button"
+        role="gridcell"
+        class=${p(a)}
+        tabindex=${e.isFocusable ? 0 : -1}
+        ?disabled=${!e.isCurrentMonth}
+        aria-disabled=${e.isCurrentMonth && e.isDisabled ? "true" : l}
+        aria-label=${A(this.localeId, e.date)}
+        aria-current=${e.isToday ? "date" : l}
+        data-date=${m(e.date)}
+        @click=${(i) => this.selectDate(e, i)}
+        @mouseover=${() => this.onMouseOver(e)}
+        @focus=${() => this.onMouseOver(e)}
+        @keydown=${(i) => this._keyboard.handleDayKeydown(i)}
+        aria-selected=${e.isRangeStart || e.isRangeEnd || e.isInRange ? "true" : "false"}
+      >
+        ${this.renderDayContent(e)}
+      </button>
+    `;
+  }
+  getDaysInMonth(e) {
+    const t = (this.value ?? []).map((i) => ({
+      start: this.endpointDay(i.start),
+      end: i.end ? this.endpointDay(i.end) : void 0
+    })), a = N(this._selection);
+    return L({
+      currentDate: this._currentDate,
+      offset: e,
+      localeId: this.localeId,
+      numberOfMonths: this.numberOfMonths ?? 1,
+      isDisabled: (i) => this.isDisabled(i),
+      toDay: (i) => {
+        const o = E(i.date, {
+          ranges: t,
+          workingRange: this.workingRange,
+          anchor: this._selection.anchor,
+          selectingSpan: a,
+          invalidRange: this._invalidRange
+        });
+        return {
+          date: i.date,
+          dayLabel: i.dayLabel,
+          isCurrentMonth: i.isCurrentMonth,
+          isToday: i.isToday,
+          isRangeStart: o.isRangeStart,
+          isRangeEnd: o.isRangeEnd,
+          isInRange: o.isInRange,
+          isInvalidStart: o.isInvalidStart && i.isCurrentMonth,
+          isInvalidEnd: o.isInvalidEnd && i.isCurrentMonth,
+          isInvalidInRange: o.isInvalidInRange && i.isCurrentMonth,
+          isDisabled: i.isDisabled,
+          isOneDayRange: o.isOneDayRange,
+          isAnchor: o.isAnchor,
+          isFocusable: i.isToday || o.isRangeStart,
+          isSelecting: o.isSelecting && i.isCurrentMonth
+        };
+      },
+      focusFallbackDates: [
+        /* @__PURE__ */ new Date(),
+        ...(this.value ?? []).map((i) => this.endpointDay(i.start))
+      ]
+    });
+  }
+  selectDate(e, t = null) {
+    if (!e.isCurrentMonth || e.isDisabled || this.disabled || this.readOnly) return;
+    const { state: a, commit: i } = y(this._selection, {
+      type: "pick",
+      date: e.date
+    });
+    if (this._selection = a, !i) {
+      this.resetWorking(), this._invalidRange = null;
+      return;
+    }
+    if (this.spanCoversBlockedDay(i.start, i.end)) {
+      this._invalidRange = { start: i.start, end: i.end }, this.emitInputError(this.disabledRangeMessage ?? v), this.requestUpdate();
+      return;
+    }
+    this._invalidRange = null, this._workingDateStart = m(i.start), this._workingDateEnd = m(i.end), this._workingTimeIn = void 0, this._workingTimeOut = void 0;
+  }
+  spanCoversBlockedDay(e, t) {
+    const a = new Date(e);
+    a.setHours(0, 0, 0, 0);
+    const i = new Date(t);
+    for (i.setHours(0, 0, 0, 0); a <= i; ) {
+      if (this.isDisabled(a)) return !0;
+      a.setDate(a.getDate() + 1);
+    }
+    return !1;
+  }
+  onMouseOver(e) {
+    e.isDisabled || (this._selection = y(this._selection, {
+      type: "hover",
+      date: e.date
+    }).state);
+  }
+  onStartTimeChange(e) {
+    if (e.stopPropagation(), e.detail.commit !== !0) return;
+    const t = e.detail.value;
+    if (!t || !this._workingDateStart) {
+      this._workingTimeIn = void 0, this._workingTimeOut = void 0;
+      return;
+    }
+    const a = this.timeError(t, this._workingDateStart, this.resolvedStartTimeRanges);
+    if (a) {
+      this._workingTimeIn = void 0, this._workingTimeOut = void 0, this.emitInputError(a);
+      return;
+    }
+    this._workingTimeIn = t, this._workingTimeOut = void 0;
+  }
+  onEndTimeChange(e) {
+    if (e.stopPropagation(), e.detail.commit !== !0) return;
+    const t = e.detail.value;
+    if (!t) {
+      this._workingTimeOut = void 0;
+      return;
+    }
+    if (!this._workingTimeIn || !this._workingDateStart || !this._workingDateEnd) return;
+    const a = this.timeError(t, this._workingDateEnd, this.resolvedEndTimeRanges);
+    if (a) {
+      this._workingTimeOut = t, this.emitInputError(a);
+      return;
+    }
+    const i = U(
+      `${this._workingDateStart}T${this._workingTimeIn}`,
+      `${this._workingDateEnd}T${t}`
+    );
+    if (H(i, this.disabledRanges)) {
+      this._workingTimeOut = t, this.emitInputError(this.disabledRangeMessage ?? v);
+      return;
+    }
+    this._skipValueNavigation = !0, this.value = K([...this.value ?? [], i]), this.resetWorking(), this.dispatchEvent(
+      new CustomEvent("change", { detail: { value: this.value }, bubbles: !0, composed: !0 })
+    );
+  }
+  /**
+   * The error for a committed endpoint `time` on `isoDay`: out of the instant
+   * window, or landing on a disabled slot.
+   */
+  timeError(e, t, a) {
+    const i = j(`${t}T${e}`, this.minDateTime, this.maxDateTime, {
+      minDateTimeMessage: this.minDateTimeMessage,
+      maxDateTimeMessage: this.maxDateTimeMessage
+    });
+    return i || (V(e, a) ? this.disabledRangeMessage ?? v : null);
+  }
+  resetWorking() {
+    this._workingDateStart = void 0, this._workingDateEnd = void 0, this._workingTimeIn = void 0, this._workingTimeOut = void 0, this._openList = null, this.resetPicker(this.startPicker), this.resetPicker(this.endPicker);
+  }
+  resetPicker(e) {
+    e && (e.value = void 0, e.closeList());
+  }
+  emitInputError(e) {
+    this.dispatchEvent(
+      new CustomEvent("inputError", { detail: { message: e }, bubbles: !0, composed: !0 })
+    );
+  }
+  get startPicker() {
+    return this.querySelector("gui-time-picker.gui-range-date-time-calendar__start");
+  }
+  get endPicker() {
+    return this.querySelector("gui-time-picker.gui-range-date-time-calendar__end");
+  }
+  pickerFor(e) {
+    return e === "start" ? this.startPicker : this.endPicker;
+  }
+  onListToggle(e, t) {
+    e.stopPropagation();
+    const { open: a } = e.detail;
+    if (a && this.readOnly) {
+      this.pickerFor(t)?.closeList();
+      return;
+    }
+    a ? (this.pickerFor(t === "start" ? "end" : "start")?.closeList(), this._openList = t, this._yearSelectorOpen = !1) : this._openList === t && (this._openList = null);
+  }
+  get resolvedStartTimeRanges() {
+    return this._workingDateStart ? b(this.disabledRanges, this._workingDateStart) : [];
+  }
+  get resolvedEndTimeRanges() {
+    return this._workingDateEnd ? b(this.disabledRanges, this._workingDateEnd) : [];
+  }
+  /** minTime/maxTime tightened by the instant bounds when this IS their day. */
+  dayClampedBounds(e) {
+    const t = {};
+    return this.minDateTime && e === this.minDateTime.split("T")[0] && (t.minTime = this.minDateTime.split("T")[1]), this.maxDateTime && e === this.maxDateTime.split("T")[0] && (t.maxTime = this.maxDateTime.split("T")[1]), t;
+  }
+  get startListBounds() {
+    return this._workingDateStart ? this.dayClampedBounds(this._workingDateStart) : {};
+  }
+  get endListBounds() {
+    if (!this._workingDateEnd) return {};
+    const e = this.dayClampedBounds(this._workingDateEnd);
+    if (this._workingDateEnd !== this._workingDateStart || !this._workingTimeIn) return e;
+    const t = W(this._workingTimeIn, this.minuteStep);
+    return t ? { minTime: t, maxTime: e.maxTime } : { minTime: "23:59:59", maxTime: "00:00:00" };
+  }
+  renderDayContent(e) {
+    const t = this.renderRangeCountBadge(e), a = this.renderDisabledSlotsBadge(e);
+    return t === l && a === l ? h`${e.dayLabel}` : h`${e.dayLabel}<span class="gui-range-date-time-calendar__badges"
+        >${t}${a}</span
+      >`;
+  }
+  /**
+   * Renders a count bubble plus its hover label as SIBLINGS (the label must not
+   * live inside the count span — the bubble shows only the number).
+   */
+  renderBadge(e, t, a, i) {
+    return h`<span class="gui-range-date-time-calendar__${e}" aria-label=${a}
+        >${t}</span
+      ><span class="gui-range-date-time-calendar__badge-tooltip" aria-hidden="true"
+        >${i.map((o) => h`<span>${o}</span>`)}</span
+      >`;
+  }
+  renderRangeCountBadge(e) {
+    if (!e.isCurrentMonth) return l;
+    const t = this.rangesOnDay(e.date);
+    if (t.length <= 1) return l;
+    const a = t.map((o) => this.formatPillLabel(o)), i = `${(this.dayCountAriaLabel ?? "{count} ranges").replace(
+      "{count}",
+      String(t.length)
+    )}: ${a.join(", ")}`;
+    return this.renderBadge("day-count", t.length, i, a);
+  }
+  renderDisabledSlotsBadge(e) {
+    if (!e.isCurrentMonth || e.isDisabled) return l;
+    const t = b(this.disabledRanges, m(e.date));
+    if (!t.length) return l;
+    const a = D(this.localeId, this.hourFormat), i = t.map(
+      (d) => `${T(d.start, this.localeId, a)} – ${T(
+        d.end,
+        this.localeId,
+        a
+      )}`
+    ), o = `${(this.disabledDayCountAriaLabel ?? "{count} disabled ranges").replace(
+      "{count}",
+      String(t.length)
+    )}: ${i.join(", ")}`;
+    return this.renderBadge("disabled-count", t.length, o, i);
+  }
+  /** Committed ranges covering `date`, a range counts on every day of its span. */
+  rangesOnDay(e) {
+    if (!this.value?.length) return [];
+    const t = m(e);
+    return this.value.filter((a) => {
+      const i = a.start.split("T")[0], o = (a.end ?? a.start).split("T")[0];
+      return t >= i && t <= o;
+    });
+  }
+  // --- Pills ---
+  renderAboveCalendar() {
+    if (this.hidePills) return l;
+    const e = this.getSortedPills();
+    if (e.length === 0) return l;
+    const t = B(e, (a) => this.formatPillLabel(a));
+    return h`
+      <gui-pills
+        class="gui-range-calendar__pills"
+        .uid=${this.uid}
+        .toolbarAriaLabel=${"Selected date-time ranges"}
+        .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 F(
+      this.value,
+      (e, t) => this.parseEndpoint(e).getTime() - this.parseEndpoint(t).getTime()
+    );
+  }
+  navigateToDate(e) {
+    this._nav.navigateToDate(this.endpointDay(e));
+  }
+};
+r([
+  n({ type: String })
+], s.prototype, "uid", 2);
+r([
+  n({ type: String })
+], s.prototype, "label", 2);
+r([
+  n({ type: String })
+], s.prototype, "hint", 2);
+r([
+  n({ type: String, attribute: "locale-id" })
+], s.prototype, "localeId", 2);
+r([
+  n({ type: Array })
+], s.prototype, "errors", 2);
+r([
+  n({ type: Boolean })
+], s.prototype, "touched", 2);
+r([
+  n({ type: Boolean })
+], s.prototype, "required", 2);
+r([
+  n({ type: Boolean })
+], s.prototype, "disabled", 2);
+r([
+  n({ type: Boolean, attribute: "readonly" })
+], s.prototype, "readOnly", 2);
+r([
+  n({ type: String, attribute: "prev-month-icon" })
+], s.prototype, "prevMonthIcon", 2);
+r([
+  n({ type: String, attribute: "next-month-icon" })
+], s.prototype, "nextMonthIcon", 2);
+r([
+  n({ type: String, attribute: "prev-month-aria-label" })
+], s.prototype, "prevMonthAriaLabel", 2);
+r([
+  n({ type: String, attribute: "next-month-aria-label" })
+], s.prototype, "nextMonthAriaLabel", 2);
+r([
+  n({ type: String, attribute: "select-year-aria-label" })
+], s.prototype, "selectYearAriaLabel", 2);
+r([
+  n({ type: String, attribute: "year-grid-aria-label" })
+], s.prototype, "yearGridAriaLabel", 2);
+r([
+  n({ type: String })
+], s.prototype, "dayFormat", 2);
+r([
+  n({ type: String })
+], s.prototype, "weekdayFormat", 2);
+r([
+  n({ type: String })
+], s.prototype, "monthFormat", 2);
+r([
+  n({ type: String })
+], s.prototype, "minDate", 2);
+r([
+  n({ type: String })
+], s.prototype, "maxDate", 2);
+r([
+  n({ type: Array, attribute: "disabled-ranges" })
+], s.prototype, "disabledRanges", 2);
+r([
+  n({ type: Number })
+], s.prototype, "numberOfMonths", 2);
+r([
+  n({ type: Array })
+], s.prototype, "value", 2);
+r([
+  n({ type: String })
+], s.prototype, "focusDate", 2);
+r([
+  n({ type: Boolean })
+], s.prototype, "hidePills", 2);
+r([
+  n({ type: String })
+], s.prototype, "removePillAriaLabel", 2);
+r([
+  n({ type: String, attribute: "disabled-date-range-message" })
+], s.prototype, "disabledDateRangeMessage", 2);
+r([
+  n({ attribute: !1 })
+], s.prototype, "invalidRange", 2);
+r([
+  n({ type: String, attribute: "hour-format" })
+], s.prototype, "hourFormat", 2);
+r([
+  n({ type: Number, attribute: "minute-step" })
+], s.prototype, "minuteStep", 2);
+r([
+  n({ type: Boolean, attribute: "allow-custom-time" })
+], s.prototype, "allowCustomTime", 2);
+r([
+  n({ type: String, attribute: "start-time-label" })
+], s.prototype, "startTimeLabel", 2);
+r([
+  n({ type: String, attribute: "end-time-label" })
+], s.prototype, "endTimeLabel", 2);
+r([
+  n({ type: String, attribute: "min-date-time" })
+], s.prototype, "minDateTime", 2);
+r([
+  n({ type: String, attribute: "max-date-time" })
+], s.prototype, "maxDateTime", 2);
+r([
+  n({ type: String, attribute: "min-date-time-message" })
+], s.prototype, "minDateTimeMessage", 2);
+r([
+  n({ type: String, attribute: "max-date-time-message" })
+], s.prototype, "maxDateTimeMessage", 2);
+r([
+  n({ type: String, attribute: "disabled-range-message" })
+], s.prototype, "disabledRangeMessage", 2);
+r([
+  n({ type: String, attribute: "no-available-times-message" })
+], s.prototype, "noAvailableTimesMessage", 2);
+r([
+  n({ type: String, attribute: "day-count-aria-label" })
+], s.prototype, "dayCountAriaLabel", 2);
+r([
+  n({ type: String, attribute: "disabled-day-count-aria-label" })
+], s.prototype, "disabledDayCountAriaLabel", 2);
+r([
+  g()
+], s.prototype, "_selection", 2);
+r([
+  g()
+], s.prototype, "_invalidRange", 2);
+r([
+  g()
+], s.prototype, "_workingDateStart", 2);
+r([
+  g()
+], s.prototype, "_workingDateEnd", 2);
+r([
+  g()
+], s.prototype, "_workingTimeIn", 2);
+r([
+  g()
+], s.prototype, "_workingTimeOut", 2);
+r([
+  g()
+], s.prototype, "_openList", 2);
+s = r([
+  S("gui-range-date-time-calendar")
+], s);
+typeof customElements < "u" && !customElements.get("gui-range-date-time-calendar") && customElements.define("gui-range-date-time-calendar", s);