@golemui/gui-react 0.12.2 → 0.13.1

package/range-calendar-SAyiW3EF.js

@@ -0,0 +1,326 @@
+import { b as v, A as m, n as f, t as R } from "./directive-1yd1wdny.js";
+import { r as g } from "./state-DI9ZsB5W.js";
+import { e as p } from "./class-map-DrTVAYz_.js";
+import { c as $ } from "./repeat-BucBfSPF.js";
+import { i as d, b as A, a as b, g as M, m as P, c as _ } from "./date-BS1lA1xg.js";
+import { c as w } from "./tabs-DzSCq_98.js";
+import { A as k } from "./abstract-calendar-JfbbRwFb.js";
+import "@golemui/gui-shared";
+var V = Object.defineProperty, E = Object.getOwnPropertyDescriptor, h = (e, t, i, a) => {
+  for (var n = a > 1 ? void 0 : a ? E(t, i) : t, s = e.length - 1, r; s >= 0; s--)
+    (r = e[s]) && (n = (a ? r(t, i, n) : r(n)) || n);
+  return a && n && V(t, i, n), n;
+};
+let l = class extends k {
+  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._isStartVisible = !0, this._isEndVisible = !0, this._skipValueNavigation = !1;
+  }
+  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 t = Array.isArray(this.value) ? this.value : [{ start: this.value }];
+        if (t.length > 0 && t[0].start) {
+          const i = new Date(t[0].start);
+          !isNaN(i.getTime()) && !d(i, this._currentDate, this.numberOfMonths ?? 1) && (this._currentDate = i);
+        }
+      }
+    }
+    if (e.has("focusDate") && this.focusDate) {
+      const t = new Date(this.focusDate);
+      isNaN(t.getTime()) || (d(t, this._currentDate, this.numberOfMonths ?? 1) || (this._currentDate = t), this.focusDate = void 0);
+    }
+  }
+  renderDay(e) {
+    const t = {
+      "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=${p(t)}
+        tabindex=${e.isFocusable ? 0 : -1}
+        ?disabled=${!e.isCurrentMonth || e.isDisabled}
+        data-date=${e.date.toISOString()}
+        @click=${(i) => this.selectDate(e, i)}
+        @mouseover=${() => this.onMouseOver(e)}
+        @focus=${() => this.onMouseOver(e)}
+        @keydown=${(i) => this.handleKeydown(i, e)}
+        aria-selected=${e.isRangeStart || e.isRangeEnd || e.isInRange ? "true" : "false"}
+      >
+        ${e.dayLabel}
+      </button>
+    `;
+  }
+  getDaysInMonth(e) {
+    const t = new Date(this._currentDate);
+    t.setDate(1), t.setMonth(t.getMonth() + e);
+    const i = this.generateDateGrid(e), a = t.getMonth();
+    let n = i.map((s) => {
+      const r = s.getMonth() === a, o = this.isDisabled(s), c = A(s), { isRangeStart: u, isRangeEnd: D, isInRange: y, isSelecting: O } = this.checkDateStatus(s), S = c || u, T = this._anchorDate ? b(s, this._anchorDate) : !1;
+      return {
+        date: s,
+        dayLabel: M(this.localeId, s),
+        isCurrentMonth: r,
+        isToday: c,
+        isRangeStart: u,
+        isRangeEnd: D,
+        isInRange: y,
+        isDisabled: o,
+        isOneDayRange: u && D,
+        isAnchor: T,
+        isFocusable: S,
+        isSelecting: O && r
+      };
+    });
+    for (let s = 0; s < 2; s++)
+      n.slice(-7).every((o) => !o.isCurrentMonth) && (n = n.slice(0, -7));
+    if (e === 0 && !n.some((s) => s.isFocusable)) {
+      const s = this.numberOfMonths ?? 1, r = d(/* @__PURE__ */ new Date(), this._currentDate, s), o = this.value?.some(
+        (c) => d(new Date(c.start), this._currentDate, s)
+      ) ?? !1;
+      if (!r && !o) {
+        const c = n.find((u) => u.isCurrentMonth && !u.isDisabled);
+        c && (c.isFocusable = !0);
+      }
+    }
+    return n;
+  }
+  checkDateStatus(e) {
+    let t = !1, i = !1, a = !1, n = !1;
+    if (this._isSelecting && this._nextDate && this._anchorDate) {
+      const s = this._nextDate.date, r = new Date(this._anchorDate);
+      s.getTime() > r.getTime() ? n = e.getTime() >= r.getTime() && e.getTime() <= s.getTime() : n = e.getTime() >= s.getTime() && e.getTime() <= r.getTime();
+    }
+    if (this.value && Array.isArray(this.value))
+      for (const s of this.value) {
+        const r = new Date(s.start);
+        if (b(e, r) && (t = !0, i = !s.end), s.end) {
+          const o = new Date(s.end);
+          b(e, o) && (i = !0);
+          const c = e.getTime(), u = r.getTime(), D = o.getTime();
+          c > u && c < D && (a = !0);
+        }
+      }
+    return { isRangeStart: t, isRangeEnd: i, isInRange: a, isSelecting: n };
+  }
+  selectDate(e, t = null) {
+    if (!e.isCurrentMonth || this.disabled || this.readOnly) return;
+    const i = e.date;
+    if (!this._anchorDate) {
+      this._isSelecting = !0, this._anchorDate = i;
+      return;
+    }
+    let a = this._anchorDate, n = i;
+    i < a && (a = i, n = this._anchorDate);
+    const s = this.calculateValidRanges(a, n), r = [...this.value || [], ...s];
+    this._skipValueNavigation = !0, this.value = P(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, t) {
+    const i = [], a = new Date(e), n = new Date(t);
+    a.setHours(0, 0, 0, 0), n.setHours(0, 0, 0, 0);
+    let s = null;
+    for (; a <= n; ) {
+      if (!this.isDisabled(a))
+        s || (s = new Date(a));
+      else if (s) {
+        const o = new Date(a);
+        o.setDate(a.getDate() - 1), i.push(_(s, o)), s = null;
+      }
+      a.setDate(a.getDate() + 1);
+    }
+    return s && i.push(_(s, t)), i;
+  }
+  onMouseOver(e) {
+    this._isSelecting && (this._nextDate = e);
+  }
+  // --- Pills ---
+  updated() {
+    this.hidePills || this.setupObservers();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.disconnectObservers();
+  }
+  renderAboveCalendar() {
+    if (this.hidePills) return m;
+    const e = this.getSortedPills();
+    return e.length === 0 ? m : v`
+      <div
+        class=${p({
+      "gui-range-calendar__pills-wrapper": !0,
+      "gui-range-calendar--start-shadow": !this._isStartVisible,
+      "gui-range-calendar--end-shadow": !this._isEndVisible
+    })}
+      >
+        <div class="gui-range-calendar__pills" role="list">
+          <span class="gui-sentinel gui-sentinel__start"></span>
+          ${$(
+      e,
+      (t) => `${t.start}-${t.end ?? t.start}`,
+      (t, i) => this.renderPill(t, i)
+    )}
+          <span class="gui-sentinel gui-sentinel__end"></span>
+        </div>
+      </div>
+    `;
+  }
+  renderPill(e, t) {
+    const i = this.formatDateForDisplay(e.start), a = e.end ? this.formatDateForDisplay(e.end) : i, n = `${i} - ${a}`;
+    return v`
+      <div
+        class="gui-range-calendar__pill"
+        role="listitem"
+        tabindex="0"
+        aria-label="${this.removePillAriaLabel ?? "Remove date"} ${n}"
+        @click=${() => this.navigateToDate(e.start)}
+        @keydown=${(s) => this.handlePillKeydown(s, t)}
+      >
+        <span class="gui-range-calendar__pill-text">${n}</span>
+        <button
+          type="button"
+          class="gui-range-calendar__pill-remove"
+          tabindex="-1"
+          ?disabled=${this.disabled || this.readOnly}
+          @click=${(s) => {
+      s.stopPropagation(), this.removePill(t);
+    }}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 256 256"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              d="M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
+            ></path>
+          </svg>
+        </button>
+      </div>
+    `;
+  }
+  formatDateForDisplay(e) {
+    const t = new Date(e);
+    return isNaN(t.getTime()) ? e : new Intl.DateTimeFormat(this.localeId ?? "en", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit"
+    }).format(t);
+  }
+  getSortedPills() {
+    return !this.value || !Array.isArray(this.value) ? [] : [...this.value].sort(
+      (e, t) => new Date(e.start).getTime() - new Date(t.start).getTime()
+    );
+  }
+  removePill(e) {
+    if (this.disabled || this.readOnly) return;
+    const t = this.getSortedPills();
+    t.splice(e, 1), this.value = [...t], this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: this.value },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  handlePillKeydown(e, t) {
+    if (e.key === "Delete" || e.key === "Backspace") {
+      e.preventDefault(), this.removePill(t);
+      return;
+    }
+    if (e.key === "Enter") {
+      e.preventDefault();
+      const i = this.getSortedPills();
+      i[t] && this.navigateToDate(i[t].start);
+      return;
+    }
+    if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+      e.preventDefault();
+      const i = this.querySelectorAll(
+        ".gui-range-calendar__pills .gui-range-calendar__pill"
+      ), a = e.key === "ArrowLeft" ? t - 1 : t + 1;
+      a >= 0 && a < i.length && i[a].focus();
+    }
+  }
+  navigateToDate(e) {
+    const t = new Date(e);
+    !isNaN(t.getTime()) && !d(t, this._currentDate, this.numberOfMonths ?? 1) && (this._currentDate = t);
+  }
+  setupObservers() {
+    const e = this.querySelector(".gui-sentinel__start"), t = this.querySelector(".gui-sentinel__end");
+    e && !this.startObserver && (this.startObserver = w(
+      e,
+      (i) => this._isStartVisible = i
+    )), t && !this.endObserver && (this.endObserver = w(
+      t,
+      (i) => this._isEndVisible = i
+    )), !e && this.startObserver && (this.startObserver.disconnect(), this.startObserver = void 0, this._isStartVisible = !0), !t && this.endObserver && (this.endObserver.disconnect(), this.endObserver = void 0, this._isEndVisible = !0);
+  }
+  disconnectObservers() {
+    this.startObserver?.disconnect(), this.endObserver?.disconnect(), this.startObserver = void 0, this.endObserver = void 0;
+  }
+};
+h([
+  f({ type: Array })
+], l.prototype, "value", 2);
+h([
+  f({ type: String })
+], l.prototype, "focusDate", 2);
+h([
+  f({ type: Boolean })
+], l.prototype, "hidePills", 2);
+h([
+  f({ type: String })
+], l.prototype, "removePillAriaLabel", 2);
+h([
+  g()
+], l.prototype, "_anchorDate", 2);
+h([
+  g()
+], l.prototype, "_nextDate", 2);
+h([
+  g()
+], l.prototype, "_isSelecting", 2);
+h([
+  g()
+], l.prototype, "_isStartVisible", 2);
+h([
+  g()
+], l.prototype, "_isEndVisible", 2);
+l = h([
+  R("gui-range-calendar")
+], l);
+typeof customElements < "u" && !customElements.get("gui-range-calendar") && customElements.define("gui-range-calendar", l);