@golemui/gui-lit 1.2.0 → 1.2.1-rc.0

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

@@ -1,734 +0,0 @@
-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-Df7abEkB.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-ljexnwEO.js";
-import { G as C } from "./focus-leave.controller-2gV0pQd5.js";
-import "./pills-BDMO2NiR.js";
-import "./time-picker-DLj1rhOf.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);