@golemui/gui-lit 1.0.2 → 1.1.0

package/day-status-0-hJHrI7.js

@@ -0,0 +1,530 @@
+import { nothing as S, html as c } from "lit";
+import { g as C, n as O, c as T } from "./focus-leave.controller-2gV0pQd5.js";
+import { t as v, p as M, j as k, i as E, k as R, l as I, w as A, f as L, h as N, n as y } from "./date-Bj9mI3GU.js";
+import { repeat as w } from "lit-html/directives/repeat.js";
+import { b as P, c as q } from "./templates-Dk1jxLwS.js";
+const m = ".gui-calendar__day-button:not(.other-month)", F = ".gui-calendar__panel", G = "gui-calendar__year-button", U = ".gui-calendar__year-button", $ = ".gui-calendar__year-button.current", K = ".gui-calendar__year-grid", Y = ".gui-calendar__year-selector", H = '.gui-calendar__day-button[tabindex="0"]';
+class te {
+  constructor(e, r) {
+    this.handleDayKeydown = async (n) => {
+      if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(n.key) && n.key !== " " && n.key !== "Enter") return;
+      const a = n.target, u = Array.from(this.host.querySelectorAll(m)), p = u.indexOf(a), f = window.getComputedStyle(this.host).direction === "rtl";
+      if (n.key === " " || n.key === "Enter") {
+        n.preventDefault(), this.options.onActivateDay(a.dataset.date ?? "", n);
+        return;
+      }
+      const d = C(n.key, { columns: 7, isRTL: f });
+      if (d.kind !== "delta") return;
+      const h = d.delta;
+      n.preventDefault();
+      const s = O(
+        p,
+        h,
+        u.length,
+        (o) => this.isButtonDisabled(u[o])
+      );
+      let l = !1;
+      if (s < 0)
+        if (this.options.canGoPrev())
+          this.options.goPrev(), l = !0;
+        else {
+          u.find((g) => !this.isButtonDisabled(g))?.focus();
+          return;
+        }
+      else if (s >= u.length)
+        if (this.options.canGoNext())
+          this.options.goNext(), l = !0;
+        else {
+          [...u].reverse().find((b) => !this.isButtonDisabled(b))?.focus();
+          return;
+        }
+      if (l) {
+        await this.host.updateComplete;
+        const o = Array.from(
+          this.host.querySelectorAll(m)
+        ), g = Array.from(this.host.querySelectorAll(F));
+        let b;
+        if (s < 0)
+          b = g[0].querySelectorAll(m).length + s;
+        else {
+          const _ = g[g.length - 1].querySelectorAll(m).length;
+          b = o.length - _ + (s - u.length);
+        }
+        if (this.isButtonDisabled(o[b])) {
+          const D = O(
+            b,
+            h,
+            o.length,
+            (_) => this.isButtonDisabled(o[_])
+          );
+          if (D < 0 || D >= o.length) {
+            const _ = o.findIndex((x) => !this.isButtonDisabled(x));
+            _ > -1 && o[_].focus();
+          } else
+            o[D]?.focus();
+        } else {
+          const D = Math.max(0, Math.min(b, o.length - 1));
+          o[D]?.focus();
+        }
+      } else
+        u[s]?.focus();
+    }, this.handleYearKeydown = (n) => {
+      const i = n.target;
+      if (!i.classList.contains(G)) return;
+      const a = Array.from(this.host.querySelectorAll(U)), u = a.indexOf(i), p = window.getComputedStyle(this.host).direction === "rtl";
+      if (n.key === "Enter" || n.key === " ") {
+        n.preventDefault();
+        const h = parseInt(i.dataset.year ?? "", 10);
+        isNaN(h) || this.selectYear(h);
+        return;
+      }
+      if (n.key === "Escape") {
+        n.preventDefault(), n.stopPropagation(), this.host.querySelector(Y)?.focus(), this.options.onCloseYearGrid();
+        return;
+      }
+      const f = C(n.key, { columns: 4, isRTL: p });
+      if (f.kind !== "delta") return;
+      n.preventDefault();
+      const d = u + f.delta;
+      d >= 0 && d < a.length && a[d].focus();
+    }, this.onPrevMonthClick = () => {
+      this.options.goPrev(), this.keepNavFocusInside("prev", "next");
+    }, this.onNextMonthClick = () => {
+      this.options.goNext(), this.keepNavFocusInside("next", "prev");
+    }, this.host = e, this.options = r, e.addController(this);
+  }
+  hostConnected() {
+  }
+  selectYear(e) {
+    this.host.querySelector(
+      Y
+    )?.focus(), this.options.onSelectYear(e), this.host.updateComplete.then(() => {
+      this.host.querySelector(H)?.focus();
+    });
+  }
+  /**
+   * When the grid just opened, waits for the update, then scrolls the current year
+   * button into the middle of the grid viewport and focuses it. A close is a no-op.
+   */
+  onYearGridToggled() {
+    this.options.isYearGridOpen() && this.host.updateComplete.then(() => {
+      this.scrollToCurrentYear(), this.focusCurrentYearButton();
+    });
+  }
+  scrollToCurrentYear() {
+    const e = this.host.querySelector(K), r = this.host.querySelector($);
+    if (e && r) {
+      const n = e.getBoundingClientRect(), i = r.getBoundingClientRect(), a = e.scrollTop + (i.top - n.top) - n.height / 2 + i.height / 2;
+      e.scrollTop = Math.max(0, a);
+    }
+  }
+  focusCurrentYearButton() {
+    this.host.querySelector($)?.focus();
+  }
+  /**
+   * After a nav click lands on a min/max boundary, the clicked button renders
+   * disabled and would drop focus to the body; refocus the opposite nav
+   * button, falling back to any enabled day button.
+   */
+  async keepNavFocusInside(e, r) {
+    await this.host.updateComplete;
+    const n = this.host.querySelector(
+      `.gui-calendar__month-button--${e}`
+    );
+    if (!n || !n.disabled) return;
+    (this.host.querySelector(
+      `.gui-calendar__month-button--${r}:not([disabled])`
+    ) ?? this.host.querySelector(".gui-calendar__day-button:not([disabled])"))?.focus();
+  }
+  /**
+   * Whether a queried button is disabled; a missing button counts as disabled
+   */
+  isButtonDisabled(e) {
+    return e ? e.hasAttribute("disabled") : !0;
+  }
+}
+class ne {
+  constructor(e, r) {
+    this._currentDate = /* @__PURE__ */ new Date(), this._yearSelectorOpen = !1, this.host = e, this.options = r, e.addController(this);
+  }
+  hostConnected() {
+  }
+  /** The first visible month. */
+  get currentDate() {
+    return this._currentDate;
+  }
+  set currentDate(e) {
+    Object.is(e, this._currentDate) || (this._currentDate = e, this.host.requestUpdate());
+  }
+  /** Whether the year grid is open. */
+  get yearSelectorOpen() {
+    return this._yearSelectorOpen;
+  }
+  set yearSelectorOpen(e) {
+    Object.is(e, this._yearSelectorOpen) || (this._yearSelectorOpen = e, this.host.requestUpdate());
+  }
+  prevMonth() {
+    const e = this._currentDate;
+    this.currentDate = new Date(e.getFullYear(), e.getMonth() - 1, 1);
+  }
+  nextMonth() {
+    const e = this._currentDate;
+    this.currentDate = new Date(e.getFullYear(), e.getMonth() + 1, 1);
+  }
+  /**
+   * Determines whether navigation to the previous month is allowed.
+   *
+   * This method checks if the last day of the previous month exceeds the allowed minimum date.
+   * If there is no minimum date defined, navigation is always allowed.
+   *
+   * @return {boolean} Returns true if navigation to the previous month is permitted; otherwise, returns false.
+   */
+  canGoPrev() {
+    const e = this.options.getMinDate();
+    if (!e) return !0;
+    const r = new Date(
+      this._currentDate.getFullYear(),
+      this._currentDate.getMonth(),
+      0
+    );
+    return v(r) >= e;
+  }
+  /**
+   * Determines whether navigation to the next month is allowed.
+   *
+   * This method checks if the first day of the next month exceeds the allowed maximum date.
+   * If there is no maximum date defined, navigation is always allowed.
+   *
+   * @return {boolean} Returns true if navigation to the next month is permitted; otherwise, returns false.
+   */
+  canGoNext() {
+    const e = this.options.getMaxDate();
+    if (!e) return !0;
+    const r = (this.options.getNumberOfMonths() ?? 1) - 1, n = new Date(
+      this._currentDate.getFullYear(),
+      this._currentDate.getMonth() + r + 1,
+      1
+    );
+    return v(n) <= e;
+  }
+  /** First selectable year: `minDate`'s year, or the 1900 floor. */
+  get effectiveMinYear() {
+    const e = this.options.getMinDate();
+    return e ? M(e).getFullYear() : 1900;
+  }
+  /** Last selectable year: `maxDate`'s year, or the 2099 ceiling. */
+  get effectiveMaxYear() {
+    const e = this.options.getMaxDate();
+    return e ? M(e).getFullYear() : 2099;
+  }
+  /** The year-grid entries, min..max inclusive. */
+  get yearList() {
+    const e = [];
+    for (let r = this.effectiveMinYear; r <= this.effectiveMaxYear; r++)
+      e.push(r);
+    return e;
+  }
+  /** Flips the year grid and fires `onYearSelectorToggled` */
+  toggleYearSelector() {
+    this.yearSelectorOpen = !this._yearSelectorOpen, this.options.onYearSelectorToggled?.();
+  }
+  /** Applies a picked year: jump to the same month of `year` and close the year grid. */
+  selectYear(e) {
+    this.currentDate = new Date(e, this._currentDate.getMonth(), 1), this.yearSelectorOpen = !1;
+  }
+  /** Closes the year grid. */
+  closeYearSelector() {
+    this.yearSelectorOpen = !1;
+  }
+  /**
+   * Navigates so `date` becomes visible — a no-op for invalid dates and for
+   * dates already inside the visible months.
+   */
+  navigateToDate(e) {
+    !isNaN(e.getTime()) && !k(e, this._currentDate, this.options.getNumberOfMonths() ?? 1) && (this.currentDate = e);
+  }
+  /** Whether a day is outside min/max or inside a disabled range. */
+  isDisabled(e) {
+    return E(
+      v(e),
+      this.options.getMinDate(),
+      this.options.getMaxDate(),
+      this.options.getDisabledRanges()
+    );
+  }
+}
+function re(t) {
+  const e = {
+    uid: t.uid,
+    label: t.label,
+    hint: t.hint,
+    errors: t.errors,
+    touched: t.touched,
+    required: t.required
+  }, r = Array.from({ length: t.numberOfMonths ?? 1 }, (n, i) => i);
+  return c`
+    ${t.label ? P(t.uid, e, !1, "calendar") : S}
+
+    <div class="gui-widget" @focusout=${t.onFocusOut}>
+      <div
+        id=${t.uid}
+        class="gui-calendar-input"
+        role="group"
+        aria-labelledby=${t.label ? `${t.uid}_calendar_label` : S}
+        ?aria-disabled=${t.disabled}
+      >
+        ${t.renderAboveCalendar()}
+        <div class="gui-calendar__container">
+          ${B("prev", {
+    icon: t.prevMonthIcon,
+    ariaLabel: t.prevMonthAriaLabel,
+    disabled: !t.canGoPrev,
+    onClick: t.onPrevMonthClick
+  })}
+
+          <div class="gui-calendar__months-grid">
+            ${r.map((n) => t.renderMonthPanel(n))}
+          </div>
+
+          ${B("next", {
+    icon: t.nextMonthIcon,
+    ariaLabel: t.nextMonthAriaLabel,
+    disabled: !t.canGoNext,
+    onClick: t.onNextMonthClick
+  })}
+        </div>
+      </div>
+    </div>
+
+    ${t.errors?.length ? q(t.uid, e) : S}
+  `;
+}
+function B(t, e) {
+  return t === "prev" ? c`
+      <button
+        type="button"
+        tabindex="0"
+        class="gui-button gui-calendar__month-button gui-calendar__month-button--prev"
+        ?disabled=${e.disabled}
+        @click=${e.onClick}
+        aria-label=${e.ariaLabel ?? "Previous month"}
+      >
+        ${e.icon ? c`<span class=${`gui-widget-icon ${e.icon}`} data-icon=${e.icon}></span>` : c`<svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 256 256"
+            >
+              <path
+                d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"
+              ></path>
+            </svg>`}
+      </button>
+    ` : c`
+    <button
+      type="button"
+      tabindex="0"
+      class="gui-button gui-calendar__month-button gui-calendar__month-button--next"
+      ?disabled=${e.disabled}
+      @click=${e.onClick}
+      aria-label=${e.ariaLabel ?? "Next month"}
+    >
+      ${e.icon ? c`<span class=${`gui-widget-icon ${e.icon}`} data-icon=${e.icon}></span>` : c`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256">
+            <path
+              d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"
+            ></path>
+          </svg>`}
+    </button>
+  `;
+}
+function V(t) {
+  const e = new Date(t.currentDate);
+  return e.setDate(1), e.setMonth(e.getMonth() + t.offset), c`
+    <div class="gui-calendar__panel">
+      ${t.renderHeader(e)} ${t.renderBelowHeader(t.offset)}
+      ${t.renderPanelBody(t.offset)}
+    </div>
+  `;
+}
+function se(t) {
+  return V({
+    currentDate: t.currentDate,
+    offset: t.offset,
+    renderHeader: (e) => W(e, {
+      localeId: t.localeId,
+      monthFormat: t.monthFormat,
+      yearSelectorOpen: t.yearSelectorOpen,
+      onToggleYearSelector: t.onToggleYearSelector
+    }),
+    renderBelowHeader: t.renderBelowHeader ?? (() => S),
+    renderPanelBody: t.renderPanelBody
+  });
+}
+function oe(t) {
+  return t.yearSelectorOpen && t.offset === 0 ? Z({
+    years: t.years,
+    currentYear: t.currentYear,
+    onSelectYear: t.onSelectYear,
+    onKeydown: t.onYearKeydown
+  }) : j(
+    T(t.getDays(t.offset), 7),
+    R(t.localeId),
+    (e) => t.renderDay(e)
+  );
+}
+function W(t, e) {
+  const r = I(e.localeId, t, e.monthFormat);
+  return c`
+    <header class="gui-calendar__header">
+      <h2>
+        ${r.map(
+    (n) => n.type === "year" ? c`<button
+                type="button"
+                tabindex="0"
+                class="gui-calendar__year-selector"
+                @click=${e.onToggleYearSelector}
+                aria-expanded=${e.yearSelectorOpen}
+                aria-label="Select year"
+              >
+                <span class="gui-calendar__year-value">${n.value}</span>
+                <span class="gui-calendar__year-arrow" aria-hidden="true">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 256 256"
+                  >
+                    <path
+                      d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"
+                    ></path>
+                  </svg>
+                </span>
+              </button>` : c`<span class="gui-calendar__month-name">${n.value}</span>`
+  )}
+      </h2>
+    </header>
+  `;
+}
+function j(t, e, r) {
+  return c`
+    <div class="gui-calendar__days-grid" role="grid">
+      <div role="row" class="gui-calendar__rows">
+        ${w(
+    e,
+    (n, i) => i,
+    (n) => c`<span class="gui-calendar__weekday" role="gridcell">${n}</span>`
+  )}
+      </div>
+
+      ${w(
+    t,
+    (n) => c`
+          <div role="row" class="gui-calendar__rows">
+            ${w(
+      n,
+      (i) => i.date.toISOString(),
+      (i) => r(i)
+    )}
+          </div>
+        `
+  )}
+    </div>
+  `;
+}
+function Z(t) {
+  const e = t.currentYear;
+  return c`
+    <div
+      class="gui-calendar__year-grid"
+      role="grid"
+      aria-label="Year selection"
+      @keydown=${t.onKeydown}
+    >
+      ${T(t.years, 4).map(
+    (r) => c`
+          <div role="row" class="gui-calendar__year-row">
+            ${r.map(
+      (n) => c`
+                <button
+                  type="button"
+                  role="gridcell"
+                  class="gui-calendar__year-button ${n === e ? "current" : ""}"
+                  tabindex=${n === e ? 0 : -1}
+                  data-year=${n}
+                  @click=${(i) => {
+        i.stopPropagation(), t.onSelectYear(n);
+      }}
+                  aria-selected=${n === e}
+                >
+                  ${n}
+                </button>
+              `
+    )}
+          </div>
+        `
+  )}
+    </div>
+  `;
+}
+function ie(t, e) {
+  const r = t.getTime();
+  let n = !1, i = !1, a = !1, u = !1, p = !1, f = !1, d = !1, h = !1;
+  if (e.selectedISO && (n = y(t, M(e.selectedISO))), e.invalidRange) {
+    const s = e.invalidRange.start, l = e.invalidRange.end;
+    f = y(t, s), d = y(t, l), r > s.getTime() && r < l.getTime() && (h = !0);
+  }
+  if (e.selectingSpan && (p = r >= e.selectingSpan.start.getTime() && r <= e.selectingSpan.end.getTime()), e.ranges)
+    for (const s of e.ranges)
+      y(t, s.start) && (i = !0, a = !s.end), s.end && (y(t, s.end) && (a = !0), r > s.start.getTime() && r < s.end.getTime() && (u = !0));
+  if (e.workingRange) {
+    const { start: s, end: l } = e.workingRange;
+    y(t, s) && (i = !0), y(t, l) && (a = !0), r > s.getTime() && r < l.getTime() && (u = !0);
+  }
+  return {
+    isSelected: n,
+    isRangeStart: i,
+    isRangeEnd: a,
+    isInRange: u,
+    isOneDayRange: i && a,
+    isAnchor: e.anchor ? y(t, e.anchor) : !1,
+    isSelecting: p,
+    isInvalidStart: f,
+    isInvalidEnd: d,
+    isInvalidInRange: h
+  };
+}
+function ae(t) {
+  const { currentDate: e, offset: r = 0, localeId: n, numberOfMonths: i = 1 } = t, a = new Date(e.getFullYear(), e.getMonth() + r, 1), u = a.getMonth(), p = a.getDay(), f = A(n)[0], d = (p - f + 7) % 7, h = new Date(a);
+  h.setDate(a.getDate() - d);
+  let s = [];
+  for (let l = 0; l < 42; l++) {
+    const o = new Date(h);
+    o.setDate(h.getDate() + l), s.push(
+      t.toDay({
+        date: o,
+        dayLabel: N(n, o),
+        isCurrentMonth: o.getMonth() === u,
+        isToday: L(o),
+        isDisabled: t.isDisabled(o)
+      })
+    );
+  }
+  for (let l = 0; l < 2; l++)
+    s.slice(-7).every((g) => !g.isCurrentMonth) && (s = s.slice(0, -7));
+  if (r === 0 && !s.some((l) => l.isFocusable) && !(t.focusFallbackDates ?? []).some(
+    (o) => k(o, e, i)
+  )) {
+    const o = s.find((g) => g.isCurrentMonth && !g.isDisabled);
+    o && (o.isFocusable = !0);
+  }
+  return s;
+}
+export {
+  ne as G,
+  te as a,
+  se as b,
+  oe as c,
+  ae as d,
+  ie as e,
+  re as r
+};