@golemui/gui-lit 0.14.0 → 0.15.0

package/range-calendar-qpakwAba.js

@@ -1,326 +0,0 @@
-import { html as v, nothing as m } from "lit";
-import { property as f, state as g, customElement as R } from "lit/decorators.js";
-import { classMap as p } from "lit/directives/class-map.js";
-import { repeat as M } from "lit-html/directives/repeat.js";
-import { i as d, a as $, b, g as A, m as P, c as _ } from "./date-CG1562vW.js";
-import { c as w } from "./tabs-DzSCq_98.js";
-import { A as k } from "./abstract-calendar-YDgwwbqe.js";
-import "@golemui/gui-shared";
-var E = Object.defineProperty, V = Object.getOwnPropertyDescriptor, h = (e, t, i, a) => {
-  for (var n = a > 1 ? void 0 : a ? V(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 && E(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 = $(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: A(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>
-          ${M(
-      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);