@golemui/gui-react 0.12.2 → 0.13.0

package/abstract-calendar-JfbbRwFb.js

@@ -0,0 +1,528 @@
+import { i as M, A as _, b as u, n as o } from "./directive-1yd1wdny.js";
+import { r as w } from "./state-DI9ZsB5W.js";
+import { G as S, b as A, c as $ } from "./templates-DBGyvZtc.js";
+import { c as D } from "./repeat-BucBfSPF.js";
+import { d as I, e as k, t as v, w as B } from "./date-BS1lA1xg.js";
+import "@golemui/gui-shared";
+var Y = Object.defineProperty, s = (m, t, r, a) => {
+  for (var e = void 0, n = m.length - 1, l; n >= 0; n--)
+    (l = m[n]) && (e = l(t, r, e) || e);
+  return e && Y(t, r, e), e;
+};
+class i extends M {
+  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.dayFormat = "numeric", this.weekdayFormat = "narrow", this.monthFormat = "long", this.minDate = void 0, this.maxDate = void 0, this.disabledRanges = void 0, this.numberOfMonths = 1, this._currentDate = /* @__PURE__ */ new Date(), this._yearSelectorOpen = !1, this.ariaController = new S(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
+        }
+      })
+    });
+  }
+  renderAboveCalendar() {
+    return _;
+  }
+  render() {
+    const t = {
+      uid: this.uid,
+      label: this.label,
+      hint: this.hint,
+      errors: this.errors,
+      touched: this.touched,
+      required: this.required
+    }, r = Array.from({ length: this.numberOfMonths ?? 1 }, (a, e) => e);
+    return u`
+      ${this.label ? A(this.uid, t, !1, "calendar") : _}
+
+      <div class="gui-widget" @focusout=${this.onFocusOut}>
+        <div
+          id=${this.uid}
+          class="gui-calendar-input"
+          role="group"
+          aria-labelledby=${this.label ? `${this.uid}_calendar_label` : _}
+          ?aria-disabled=${this.disabled}
+        >
+          ${this.renderAboveCalendar()}
+          <div class="gui-calendar__container">
+            <button
+              type="button"
+              tabindex="0"
+              class="gui-button gui-calendar__month-button gui-calendar__month-button--prev"
+              ?disabled=${!this.canGoPrev()}
+              @click=${this.prevMonth}
+              aria-label=${this.prevMonthAriaLabel ?? "Previous month"}
+            >
+              ${this.prevMonthIcon ? u`<span
+                    class=${`gui-widget-icon ${this.prevMonthIcon}`}
+                    data-icon=${this.prevMonthIcon}
+                  ></span>` : "<"}
+            </button>
+
+            <div class="gui-calendar__months-grid">
+              ${r.map((a) => this.renderMonthPanel(a))}
+            </div>
+
+            <button
+              type="button"
+              tabindex="0"
+              class="gui-button gui-calendar__month-button gui-calendar__month-button--next"
+              ?disabled=${!this.canGoNext()}
+              @click=${this.nextMonth}
+              aria-label=${this.nextMonthAriaLabel ?? "Next month"}
+            >
+              ${this.nextMonthIcon ? u`<span
+                    class=${`gui-widget-icon ${this.nextMonthIcon}`}
+                    data-icon=${this.nextMonthIcon}
+                  ></span>` : ">"}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      ${this.errors?.length ? $(this.uid, t) : _}
+    `;
+  }
+  /**
+   * Render a month panel
+   */
+  renderMonthPanel(t) {
+    const r = this.getDaysInMonth(t), a = this.chunkDays(r), e = I(this.localeId), n = new Date(this._currentDate);
+    return n.setDate(1), n.setMonth(n.getMonth() + t), u`
+      <div class="gui-calendar__panel">
+        ${this.renderHeader(n)}
+        ${this._yearSelectorOpen && t === 0 ? this.renderYearGrid() : u`
+              <div class="gui-calendar__days-grid" role="grid">
+                <div role="row" class="gui-calendar__rows">
+                  ${D(
+      e,
+      (l, c) => c,
+      (l) => u`<span class="gui-calendar__weekday" role="gridcell">${l}</span>`
+    )}
+                </div>
+
+                ${D(
+      a,
+      (l) => u`
+                    <div role="row" class="gui-calendar__rows">
+                      ${D(
+        l,
+        (c) => c.date.toISOString(),
+        (c) => this.renderDay(c)
+      )}
+                    </div>
+                  `
+    )}
+              </div>
+            `}
+      </div>
+    `;
+  }
+  renderHeader(t) {
+    const r = k(this.localeId, t, this.monthFormat);
+    return u`
+      <header class="gui-calendar__header">
+        <h2>
+          ${r.map(
+      (a) => a.type === "year" ? u`<button
+                  type="button"
+                  tabindex="0"
+                  class="gui-calendar__year-selector"
+                  @click=${this.toggleYearSelector}
+                  aria-expanded=${this._yearSelectorOpen}
+                  aria-label="Select year"
+                >
+                  <span class="gui-calendar__year-value">${a.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>` : u`<span class="gui-calendar__month-name">${a.value}</span>`
+    )}
+        </h2>
+      </header>
+    `;
+  }
+  renderYearGrid() {
+    const t = this._currentDate.getFullYear(), r = this._yearList;
+    return u`
+      <div
+        class="gui-calendar__year-grid"
+        role="grid"
+        aria-label="Year selection"
+        @keydown=${this.handleYearKeydown}
+      >
+        ${this.chunkYears(r).map(
+      (a) => u`
+            <div role="row" class="gui-calendar__year-row">
+              ${a.map(
+        (e) => u`
+                  <button
+                    type="button"
+                    role="gridcell"
+                    class="gui-calendar__year-button ${e === t ? "current" : ""}"
+                    tabindex=${e === t ? 0 : -1}
+                    data-year=${e}
+                    @click=${(n) => {
+          n.stopPropagation(), this.selectYear(e);
+        }}
+                    aria-selected=${e === t}
+                  >
+                    ${e}
+                  </button>
+                `
+      )}
+            </div>
+          `
+    )}
+      </div>
+    `;
+  }
+  chunkYears(t) {
+    const r = [];
+    for (let a = 0; a < t.length; a += 4)
+      r.push(t.slice(a, a + 4));
+    return r;
+  }
+  toggleYearSelector() {
+    this._yearSelectorOpen = !this._yearSelectorOpen, this._yearSelectorOpen && this.updateComplete.then(() => {
+      this.scrollToCurrentYear(), this.focusCurrentYearButton();
+    });
+  }
+  selectYear(t) {
+    this.querySelector(".gui-calendar__year-selector")?.focus();
+    const a = this._currentDate;
+    this._currentDate = new Date(t, a.getMonth(), 1), this._yearSelectorOpen = !1, this.updateComplete.then(() => {
+      this.querySelector(
+        '.gui-calendar__day-button[tabindex="0"]'
+      )?.focus();
+    });
+  }
+  scrollToCurrentYear() {
+    const t = this.querySelector(".gui-calendar__year-grid"), r = this.querySelector(".gui-calendar__year-button.current");
+    if (t && r) {
+      const a = t.getBoundingClientRect(), e = r.getBoundingClientRect(), n = t.scrollTop + (e.top - a.top) - a.height / 2 + e.height / 2;
+      t.scrollTop = Math.max(0, n);
+    }
+  }
+  focusCurrentYearButton() {
+    this.querySelector(
+      ".gui-calendar__year-button.current"
+    )?.focus();
+  }
+  handleYearKeydown(t) {
+    const r = t.target;
+    if (!r.classList.contains("gui-calendar__year-button")) return;
+    const a = Array.from(
+      this.querySelectorAll(".gui-calendar__year-button")
+    ), e = a.indexOf(r), n = window.getComputedStyle(this).direction === "rtl";
+    let l = 0;
+    switch (t.key) {
+      case "ArrowLeft":
+        l = n ? 1 : -1;
+        break;
+      case "ArrowRight":
+        l = n ? -1 : 1;
+        break;
+      case "ArrowUp":
+        l = -4;
+        break;
+      case "ArrowDown":
+        l = 4;
+        break;
+      case "Enter":
+      case " ": {
+        t.preventDefault();
+        const d = parseInt(r.dataset.year ?? "", 10);
+        isNaN(d) || this.selectYear(d);
+        return;
+      }
+      case "Escape": {
+        t.preventDefault(), this.querySelector(".gui-calendar__year-selector")?.focus(), this._yearSelectorOpen = !1;
+        return;
+      }
+      default:
+        return;
+    }
+    t.preventDefault();
+    const c = e + l;
+    c >= 0 && c < a.length && a[c].focus();
+  }
+  get _effectiveMinYear() {
+    return this.minDate ? new Date(this.minDate).getFullYear() : 1900;
+  }
+  get _effectiveMaxYear() {
+    return this.maxDate ? new Date(this.maxDate).getFullYear() : 2099;
+  }
+  get _yearList() {
+    const t = [];
+    for (let r = this._effectiveMinYear; r <= this._effectiveMaxYear; r++)
+      t.push(r);
+    return t;
+  }
+  async handleKeydown(t, r) {
+    if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(t.key) && t.key !== " " && t.key !== "Enter") return;
+    const e = Array.from(
+      this.querySelectorAll(".gui-calendar__day-button:not(.other-month)")
+    ), n = e.indexOf(t.target), l = window.getComputedStyle(this).direction === "rtl";
+    let c = 0;
+    switch (t.key) {
+      case "ArrowLeft":
+        c = l ? 1 : -1;
+        break;
+      case "ArrowRight":
+        c = l ? -1 : 1;
+        break;
+      case "ArrowUp":
+        c = -7;
+        break;
+      case "ArrowDown":
+        c = 7;
+        break;
+      case " ":
+      case "Enter":
+        t.preventDefault(), this.selectDate(r, t);
+        return;
+    }
+    t.preventDefault();
+    const d = this.findNextFocusableIndex(n, c, e);
+    let b = !1;
+    if (d < 0)
+      if (this.canGoPrev())
+        this.prevMonth(), b = !0;
+      else {
+        e.find((p) => !this.isButtonDisabled(p))?.focus();
+        return;
+      }
+    else if (d >= e.length)
+      if (this.canGoNext())
+        this.nextMonth(), b = !0;
+      else {
+        [...e].reverse().find((g) => !this.isButtonDisabled(g))?.focus();
+        return;
+      }
+    if (b) {
+      await this.updateComplete;
+      const h = Array.from(
+        this.querySelectorAll(".gui-calendar__day-button:not(.other-month)")
+      ), p = Array.from(this.querySelectorAll(".gui-calendar__panel"));
+      let g;
+      if (d < 0)
+        g = p[0].querySelectorAll(
+          ".gui-calendar__day-button:not(.other-month)"
+        ).length + d;
+      else {
+        const f = p[p.length - 1].querySelectorAll(
+          ".gui-calendar__day-button:not(.other-month)"
+        ).length;
+        g = h.length - f + (d - e.length);
+      }
+      if (this.isButtonDisabled(h[g])) {
+        const y = this.findNextFocusableIndex(g, c, h);
+        if (y < 0 || y >= h.length) {
+          const f = h.findIndex((x) => !this.isButtonDisabled(x));
+          f > -1 && h[f].focus();
+        } else
+          h[y]?.focus();
+      } else {
+        const y = Math.max(0, Math.min(g, h.length - 1));
+        h[y]?.focus();
+      }
+    } else
+      e[d]?.focus();
+  }
+  /**
+   * Splits an array of calendar days into chunks of weeks, with each week consisting of up to 7 days.
+   *
+   * @param {AbstractCalendarDay[]} days - An array of calendar day objects to be grouped into weeks.
+   * @return {AbstractCalendarDay[][]} A two-dimensional array where each inner array represents a week of up to 7 days.
+   */
+  chunkDays(t) {
+    const r = [];
+    for (let a = 0; a < t.length; a += 7)
+      r.push(t.slice(a, a + 7));
+    return r;
+  }
+  onFocusOut(t) {
+    t.relatedTarget && this.contains(t.relatedTarget) || (this._blurRafId !== void 0 && cancelAnimationFrame(this._blurRafId), this._blurRafId = requestAnimationFrame(() => {
+      this._blurRafId = void 0, this.contains(document.activeElement) || this.dispatchEvent(new CustomEvent("blur", { bubbles: !0, composed: !0 }));
+    }));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._blurRafId !== void 0 && cancelAnimationFrame(this._blurRafId);
+  }
+  isDisabled(t) {
+    const r = v(t);
+    if (this.minDate && r < this.minDate || this.maxDate && r > this.maxDate) return !0;
+    if (this.disabledRanges && this.disabledRanges.length > 0)
+      for (const a of this.disabledRanges) {
+        const e = a.start.split("T")[0], n = a.end ? a.end.split("T")[0] : e;
+        if (r >= e && r <= n)
+          return !0;
+      }
+    return !1;
+  }
+  prevMonth() {
+    const t = this._currentDate;
+    this._currentDate = new Date(t.getFullYear(), t.getMonth() - 1, 1);
+  }
+  nextMonth() {
+    const t = this._currentDate;
+    this._currentDate = new Date(t.getFullYear(), t.getMonth() + 1, 1);
+  }
+  generateDateGrid(t = 0) {
+    const r = this._currentDate.getFullYear(), a = this._currentDate.getMonth() + t, e = new Date(r, a, 1), n = e.getDay(), l = B(this.localeId)[0], c = (n - l + 7) % 7, d = new Date(e);
+    d.setDate(e.getDate() - c);
+    const b = [];
+    for (let h = 0; h < 42; h++) {
+      const p = new Date(d);
+      p.setDate(d.getDate() + h), b.push(p);
+    }
+    return b;
+  }
+  /**
+   * Finds the next focusable button index based on the current index and step value.
+   * This method skips disabled buttons and continues until it either finds
+   * a focusable button or goes out of bounds of the given button list.
+   *
+   * @param {number} currentIndex - The index of the currently focused button.
+   * @param {number} step - The step size to move. Can be positive or negative.
+   * @param {HTMLButtonElement[]} buttons - The list of button elements to navigate through.
+   * @return {number} - The index of the next focusable button if found; otherwise, returns out-of-bounds index.
+   */
+  findNextFocusableIndex(t, r, a) {
+    let e = t + r;
+    for (; e >= 0 && e < a.length; ) {
+      const n = a[e];
+      if (!this.isButtonDisabled(n))
+        return e;
+      e += r;
+    }
+    return e;
+  }
+  /**
+   * Determines if a button element is disabled based on its attributes.
+   *
+   * @param {HTMLButtonElement | undefined} button - The button element to check. If undefined, the button is considered disabled.
+   * @return {boolean} Returns true if the button is disabled or if no button element is provided, otherwise false.
+   */
+  isButtonDisabled(t) {
+    return t ? t.hasAttribute("disabled") : !0;
+  }
+  /**
+   * 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() {
+    if (!this.minDate) return !0;
+    const t = new Date(
+      this._currentDate.getFullYear(),
+      this._currentDate.getMonth(),
+      0
+    );
+    return v(t) >= this.minDate;
+  }
+  /**
+   * 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() {
+    if (!this.maxDate) return !0;
+    const t = (this.numberOfMonths ?? 1) - 1, r = new Date(
+      this._currentDate.getFullYear(),
+      this._currentDate.getMonth() + t + 1,
+      1
+    );
+    return v(r) <= this.maxDate;
+  }
+}
+s([
+  o({ type: String })
+], i.prototype, "uid");
+s([
+  o({ type: String })
+], i.prototype, "label");
+s([
+  o({ type: String })
+], i.prototype, "hint");
+s([
+  o({ type: String, attribute: "locale-id" })
+], i.prototype, "localeId");
+s([
+  o({ type: Array })
+], i.prototype, "errors");
+s([
+  o({ type: Boolean })
+], i.prototype, "touched");
+s([
+  o({ type: Boolean })
+], i.prototype, "required");
+s([
+  o({ type: Boolean })
+], i.prototype, "disabled");
+s([
+  o({ type: Boolean, attribute: "readonly" })
+], i.prototype, "readOnly");
+s([
+  o({ type: String, attribute: "prev-month-icon" })
+], i.prototype, "prevMonthIcon");
+s([
+  o({ type: String, attribute: "next-month-icon" })
+], i.prototype, "nextMonthIcon");
+s([
+  o({ type: String, attribute: "prev-month-aria-label" })
+], i.prototype, "prevMonthAriaLabel");
+s([
+  o({ type: String, attribute: "next-month-aria-label" })
+], i.prototype, "nextMonthAriaLabel");
+s([
+  o({ type: String })
+], i.prototype, "dayFormat");
+s([
+  o({ type: String })
+], i.prototype, "weekdayFormat");
+s([
+  o({ type: String })
+], i.prototype, "monthFormat");
+s([
+  o({ type: String })
+], i.prototype, "minDate");
+s([
+  o({ type: String })
+], i.prototype, "maxDate");
+s([
+  o({ type: Array })
+], i.prototype, "disabledRanges");
+s([
+  o({ type: Number })
+], i.prototype, "numberOfMonths");
+s([
+  w()
+], i.prototype, "_currentDate");
+s([
+  w()
+], i.prototype, "_yearSelectorOpen");
+export {
+  i as A
+};

package/calendar-BgptByan.js

@@ -0,0 +1,95 @@
+import { b as D, n as f, t as m } from "./directive-1yd1wdny.js";
+import { e as g } from "./class-map-DrTVAYz_.js";
+import { i as h, a as p, b as v, g as M, t as w } from "./date-BS1lA1xg.js";
+import { A as C } from "./abstract-calendar-JfbbRwFb.js";
+var _ = Object.defineProperty, y = Object.getOwnPropertyDescriptor, d = (e, t, n, r) => {
+  for (var i = r > 1 ? void 0 : r ? y(t, n) : t, s = e.length - 1, a; s >= 0; s--)
+    (a = e[s]) && (i = (r ? a(t, n, i) : a(i)) || i);
+  return r && i && _(t, n, i), i;
+};
+let l = class extends C {
+  constructor() {
+    super(...arguments), this.value = void 0;
+  }
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-field");
+  }
+  willUpdate(e) {
+    if (e.has("value") && this.value) {
+      const t = new Date(this.value);
+      !isNaN(t.getTime()) && !h(t, this._currentDate, this.numberOfMonths ?? 1) && (this._currentDate = t);
+    }
+  }
+  renderDay(e) {
+    const t = {
+      "gui-calendar__day-button": !0,
+      today: e.isToday,
+      selected: e.isSelected,
+      disabled: e.isDisabled,
+      "other-month": !e.isCurrentMonth
+    };
+    return D`
+      <button
+        type="button"
+        role="gridcell"
+        class=${g(t)}
+        tabindex=${e.isFocusable ? 0 : -1}
+        ?disabled=${!e.isCurrentMonth || e.isDisabled}
+        data-date=${e.date.toISOString()}
+        @click=${() => this.selectDate(e)}
+        @keydown=${(n) => this.handleKeydown(n, e)}
+        aria-selected=${e.isSelected}
+      >
+        ${e.dayLabel}
+      </button>
+    `;
+  }
+  getDaysInMonth(e) {
+    const t = new Date(this._currentDate);
+    t.setDate(1), t.setMonth(t.getMonth() + e);
+    const n = this.generateDateGrid(e), r = t.getMonth();
+    let i = n.map((s) => {
+      const a = s.getMonth() === r, o = this.isDisabled(s), c = !!this.value && p(s, new Date(this.value)), u = v(s), b = (c || u) && a;
+      return {
+        date: s,
+        dayLabel: M(this.localeId, s),
+        isCurrentMonth: a,
+        isToday: u,
+        isDisabled: o,
+        isSelected: c,
+        isFocusable: b
+      };
+    });
+    for (let s = 0; s < 2; s++)
+      i.slice(-7).every((o) => !o.isCurrentMonth) && (i = i.slice(0, -7));
+    if (e === 0 && !i.some((s) => s.isFocusable)) {
+      const s = this.value ? new Date(this.value) : /* @__PURE__ */ new Date();
+      if (!h(s, this._currentDate, this.numberOfMonths ?? 1)) {
+        const a = i.find((o) => o.isCurrentMonth && !o.isDisabled);
+        a && (a.isFocusable = !0);
+      }
+    }
+    return i;
+  }
+  selectDate(e) {
+    if (!e.isCurrentMonth || e.isDisabled || this.disabled || this.readOnly) return;
+    const t = w(e.date);
+    this.value = t, this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: t },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+};
+d([
+  f({ type: String })
+], l.prototype, "value", 2);
+l = d([
+  m("gui-calendar")
+], l);
+typeof customElements < "u" && !customElements.get("gui-calendar") && customElements.define("gui-calendar", l);

package/class-map-DrTVAYz_.js

@@ -0,0 +1,26 @@
+import { e as i, a as o, c as a, E as h } from "./directive-1yd1wdny.js";
+const d = i(class extends o {
+  constructor(s) {
+    if (super(s), s.type !== a.ATTRIBUTE || s.name !== "class" || s.strings?.length > 2) throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
+  }
+  render(s) {
+    return " " + Object.keys(s).filter((e) => s[e]).join(" ") + " ";
+  }
+  update(s, [e]) {
+    if (this.st === void 0) {
+      this.st = /* @__PURE__ */ new Set(), s.strings !== void 0 && (this.nt = new Set(s.strings.join(" ").split(/\s/).filter((t) => t !== "")));
+      for (const t in e) e[t] && !this.nt?.has(t) && this.st.add(t);
+      return this.render(e);
+    }
+    const n = s.element.classList;
+    for (const t of this.st) t in e || (n.remove(t), this.st.delete(t));
+    for (const t in e) {
+      const r = !!e[t];
+      r === this.st.has(t) || this.nt?.has(t) || (r ? (n.add(t), this.st.add(t)) : (n.remove(t), this.st.delete(t)));
+    }
+    return h;
+  }
+});
+export {
+  d as e
+};