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

package/day-status-CsWStVQV.js

@@ -0,0 +1,554 @@
+import { nothing as m, html as c } from "lit";
+import { g as C, n as Y, c as k } from "./focus-leave.controller-2gV0pQd5.js";
+import { t as v, p as M, k as A, i as R, l as x, n as I, o as L, w as N, h as P, j as q, q as y } from "./date-DBuYpvcO.js";
+import { repeat as w } from "lit-html/directives/repeat.js";
+import { b as F, c as G } from "./templates-Dmr34nwp.js";
+const S = ".gui-calendar__day-button:not(.other-month)", U = ".gui-calendar__panel", K = "gui-calendar__year-button", H = ".gui-calendar__year-button", O = ".gui-calendar__year-button.current", j = ".gui-calendar__year-grid", B = ".gui-calendar__year-selector", V = '.gui-calendar__day-button[tabindex="0"]';
+class re {
+  constructor(e, r) {
+    this.handleDayKeydown = async (n) => {
+      if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(n.key) && n.key !== " " && n.key !== "Enter") return;
+      const o = n.target, u = Array.from(this.host.querySelectorAll(S)), p = u.indexOf(o), f = window.getComputedStyle(this.host).direction === "rtl";
+      if (n.key === " " || n.key === "Enter") {
+        n.preventDefault(), this.options.onActivateDay(o.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 i = Y(
+        p,
+        h,
+        u.length,
+        (a) => this.isButtonDisabled(u[a])
+      );
+      let l = !1;
+      if (i < 0)
+        if (this.options.canGoPrev())
+          this.options.goPrev(), l = !0;
+        else {
+          u.find((g) => !this.isButtonDisabled(g))?.focus();
+          return;
+        }
+      else if (i >= 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 a = Array.from(
+          this.host.querySelectorAll(S)
+        ), g = Array.from(this.host.querySelectorAll(U));
+        let b;
+        if (i < 0)
+          b = g[0].querySelectorAll(S).length + i;
+        else {
+          const _ = g[g.length - 1].querySelectorAll(S).length;
+          b = a.length - _ + (i - u.length);
+        }
+        if (this.isButtonDisabled(a[b])) {
+          const D = Y(
+            b,
+            h,
+            a.length,
+            (_) => this.isButtonDisabled(a[_])
+          );
+          if (D < 0 || D >= a.length) {
+            const _ = a.findIndex((E) => !this.isButtonDisabled(E));
+            _ > -1 && a[_].focus();
+          } else
+            a[D]?.focus();
+        } else {
+          const D = Math.max(0, Math.min(b, a.length - 1));
+          a[D]?.focus();
+        }
+      } else
+        u[i]?.focus();
+    }, this.handleYearKeydown = (n) => {
+      const s = n.target;
+      if (!s.classList.contains(K)) return;
+      const o = Array.from(this.host.querySelectorAll(H)), u = o.indexOf(s), p = window.getComputedStyle(this.host).direction === "rtl";
+      if (n.key === "Enter" || n.key === " ") {
+        n.preventDefault();
+        const h = parseInt(s.dataset.year ?? "", 10);
+        isNaN(h) || this.selectYear(h);
+        return;
+      }
+      if (n.key === "Escape") {
+        n.preventDefault(), n.stopPropagation(), this.host.querySelector(B)?.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 < o.length && o[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(
+      B
+    )?.focus(), this.options.onSelectYear(e), this.host.updateComplete.then(() => {
+      this.host.querySelector(V)?.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(j), r = this.host.querySelector(O);
+    if (e && r) {
+      const n = e.getBoundingClientRect(), s = r.getBoundingClientRect(), o = e.scrollTop + (s.top - n.top) - n.height / 2 + s.height / 2;
+      e.scrollTop = Math.max(0, o);
+    }
+  }
+  focusCurrentYearButton() {
+    this.host.querySelector(O)?.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]):not([aria-disabled="true"])'
+    ))?.focus();
+  }
+  /**
+   * Whether a queried button is disabled; a missing button counts as disabled.
+   * Blocked in-month days carry `aria-disabled` instead of the native
+   * attribute (they stay in the accessibility tree) — skip both alike.
+   */
+  isButtonDisabled(e) {
+    return e ? e.hasAttribute("disabled") || e.getAttribute("aria-disabled") === "true" : !0;
+  }
+}
+class se {
+  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()) && !A(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 R(
+      v(e),
+      this.options.getMinDate(),
+      this.options.getMaxDate(),
+      this.options.getDisabledRanges()
+    );
+  }
+}
+function $(t, e) {
+  const r = new Date(t);
+  return r.setDate(1), r.setMonth(r.getMonth() + e), r;
+}
+function oe(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 }, (s, o) => o), n = r.map((s) => x(t.localeId, $(t.currentDate, s))).join(", ");
+  return c`
+    ${t.label ? F(t.uid, e, !1, "calendar") : m}
+
+    <div class="gui-widget" @focusout=${t.onFocusOut}>
+      <div
+        id=${`${t.uid}_calendar`}
+        class="gui-calendar-input"
+        role="group"
+        aria-labelledby=${t.label ? `${t.uid}_calendar_label` : m}
+        aria-disabled=${t.disabled ? "true" : m}
+      >
+        <div class="gui-visually-hidden" aria-live="polite">${n}</div>
+        ${t.renderAboveCalendar()}
+        <div class="gui-calendar__container">
+          ${T("prev", {
+    icon: t.prevMonthIcon,
+    ariaLabel: t.prevMonthAriaLabel,
+    disabled: !t.canGoPrev,
+    onClick: t.onPrevMonthClick
+  })}
+
+          <div class="gui-calendar__months-grid">
+            ${r.map((s) => t.renderMonthPanel(s))}
+          </div>
+
+          ${T("next", {
+    icon: t.nextMonthIcon,
+    ariaLabel: t.nextMonthAriaLabel,
+    disabled: !t.canGoNext,
+    onClick: t.onNextMonthClick
+  })}
+        </div>
+      </div>
+    </div>
+
+    ${t.errors?.length ? G(t.uid, e) : m}
+  `;
+}
+function T(t, e) {
+  return t === "prev" ? c`
+      <button
+        type="button"
+        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}
+              aria-hidden="true"
+            ></span>` : c`<svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 256 256"
+              aria-hidden="true"
+            >
+              <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"
+      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}
+            aria-hidden="true"
+          ></span>` : c`<svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 256 256"
+            aria-hidden="true"
+          >
+            <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 W(t) {
+  const e = $(t.currentDate, t.offset);
+  return c`
+    <div class="gui-calendar__panel">
+      ${t.renderHeader(e)} ${t.renderBelowHeader(t.offset)}
+      ${t.renderPanelBody(t.offset)}
+    </div>
+  `;
+}
+function ie(t) {
+  return W({
+    currentDate: t.currentDate,
+    offset: t.offset,
+    renderHeader: (e) => Z(e, {
+      localeId: t.localeId,
+      monthFormat: t.monthFormat,
+      yearSelectorOpen: t.yearSelectorOpen,
+      selectYearAriaLabel: t.selectYearAriaLabel,
+      onToggleYearSelector: t.onToggleYearSelector
+    }),
+    renderBelowHeader: t.renderBelowHeader ?? (() => m),
+    renderPanelBody: t.renderPanelBody
+  });
+}
+function ae(t) {
+  return t.yearSelectorOpen && t.offset === 0 ? J({
+    years: t.years,
+    currentYear: t.currentYear,
+    onSelectYear: t.onSelectYear,
+    onKeydown: t.onYearKeydown,
+    ariaLabel: t.yearGridAriaLabel
+  }) : z(
+    k(t.getDays(t.offset), 7),
+    I(t.localeId),
+    (e) => t.renderDay(e),
+    x(t.localeId, $(t.currentDate, t.offset))
+  );
+}
+function Z(t, e) {
+  const r = L(e.localeId, t, e.monthFormat);
+  return c`
+    <header class="gui-calendar__header">
+      <h2>
+        ${r.map(
+    (n) => n.type === "year" ? c`<button
+                type="button"
+                class="gui-calendar__year-selector"
+                @click=${e.onToggleYearSelector}
+                aria-expanded=${e.yearSelectorOpen}
+                aria-label=${`${e.selectYearAriaLabel ?? "Select year"}, ${n.value}`}
+              >
+                <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 z(t, e, r, n) {
+  return c`
+    <div class="gui-calendar__days-grid" role="grid" aria-label=${n ?? m}>
+      <div role="row" class="gui-calendar__rows">
+        ${w(
+    e,
+    (s, o) => o,
+    (s) => c`<span class="gui-calendar__weekday" role="columnheader">${s}</span>`
+  )}
+      </div>
+
+      ${w(
+    t,
+    (s) => c`
+          <div role="row" class="gui-calendar__rows">
+            ${w(
+      s,
+      (o) => o.date.toISOString(),
+      (o) => r(o)
+    )}
+          </div>
+        `
+  )}
+    </div>
+  `;
+}
+function J(t) {
+  const e = t.currentYear;
+  return c`
+    <div
+      class="gui-calendar__year-grid"
+      role="grid"
+      aria-label=${t.ariaLabel ?? "Year selection"}
+      @keydown=${t.onKeydown}
+    >
+      ${k(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=${(s) => {
+        s.stopPropagation(), t.onSelectYear(n);
+      }}
+                  aria-selected=${n === e}
+                >
+                  ${n}
+                </button>
+              `
+    )}
+          </div>
+        `
+  )}
+    </div>
+  `;
+}
+function le(t, e) {
+  const r = t.getTime();
+  let n = !1, s = !1, o = !1, u = !1, p = !1, f = !1, d = !1, h = !1;
+  if (e.selectedISO && (n = y(t, M(e.selectedISO))), e.invalidRange) {
+    const i = e.invalidRange.start, l = e.invalidRange.end;
+    f = y(t, i), d = y(t, l), r > i.getTime() && r < l.getTime() && (h = !0);
+  }
+  if (e.selectingSpan && (p = r >= e.selectingSpan.start.getTime() && r <= e.selectingSpan.end.getTime()), e.ranges)
+    for (const i of e.ranges)
+      y(t, i.start) && (s = !0, o = !i.end), i.end && (y(t, i.end) && (o = !0), r > i.start.getTime() && r < i.end.getTime() && (u = !0));
+  if (e.workingRange) {
+    const { start: i, end: l } = e.workingRange;
+    y(t, i) && (s = !0), y(t, l) && (o = !0), r > i.getTime() && r < l.getTime() && (u = !0);
+  }
+  return {
+    isSelected: n,
+    isRangeStart: s,
+    isRangeEnd: o,
+    isInRange: u,
+    isOneDayRange: s && o,
+    isAnchor: e.anchor ? y(t, e.anchor) : !1,
+    isSelecting: p,
+    isInvalidStart: f,
+    isInvalidEnd: d,
+    isInvalidInRange: h
+  };
+}
+function ce(t) {
+  const { currentDate: e, offset: r = 0, localeId: n, numberOfMonths: s = 1 } = t, o = new Date(e.getFullYear(), e.getMonth() + r, 1), u = o.getMonth(), p = o.getDay(), f = N(n)[0], d = (p - f + 7) % 7, h = new Date(o);
+  h.setDate(o.getDate() - d);
+  let i = [];
+  for (let l = 0; l < 42; l++) {
+    const a = new Date(h);
+    a.setDate(h.getDate() + l), i.push(
+      t.toDay({
+        date: a,
+        dayLabel: q(n, a),
+        isCurrentMonth: a.getMonth() === u,
+        isToday: P(a),
+        isDisabled: t.isDisabled(a)
+      })
+    );
+  }
+  for (let l = 0; l < 2; l++)
+    i.slice(-7).every((g) => !g.isCurrentMonth) && (i = i.slice(0, -7));
+  if (r === 0 && !i.some((l) => l.isFocusable) && !(t.focusFallbackDates ?? []).some(
+    (a) => A(a, e, s)
+  )) {
+    const a = i.find((g) => g.isCurrentMonth && !g.isDisabled);
+    a && (a.isFocusable = !0);
+  }
+  return i;
+}
+export {
+  se as G,
+  re as a,
+  ie as b,
+  ae as c,
+  ce as d,
+  le as e,
+  oe as r
+};