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

package/abstract-calendar-D0-077XJ.js

@@ -1,545 +0,0 @@
-import { LitElement as S, nothing as _, html as d } from "lit";
-import { property as o, state as x } from "lit/decorators.js";
-import { G as A, b as $, c as I } from "./templates-Dk1jxLwS.js";
-import { repeat as D } from "lit-html/directives/repeat.js";
-import { d as k, e as B, p as w, t as v, w as Y } from "./date-CDUlLuYy.js";
-var O = 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 && O(t, r, e), e;
-};
-class i extends S {
-  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 A(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 d`
-      ${this.label ? $(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 ? d`<span
-                    class=${`gui-widget-icon ${this.prevMonthIcon}`}
-                    data-icon=${this.prevMonthIcon}
-                  ></span>` : d`<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>
-
-            <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 ? d`<span
-                    class=${`gui-widget-icon ${this.nextMonthIcon}`}
-                    data-icon=${this.nextMonthIcon}
-                  ></span>` : d`<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>
-          </div>
-        </div>
-      </div>
-
-      ${this.errors?.length ? I(this.uid, t) : _}
-    `;
-  }
-  /**
-   * Render a month panel
-   */
-  renderMonthPanel(t) {
-    const r = this.getDaysInMonth(t), a = this.chunkDays(r), e = k(this.localeId), n = new Date(this._currentDate);
-    return n.setDate(1), n.setMonth(n.getMonth() + t), d`
-      <div class="gui-calendar__panel">
-        ${this.renderHeader(n)}
-        ${this._yearSelectorOpen && t === 0 ? this.renderYearGrid() : d`
-              <div class="gui-calendar__days-grid" role="grid">
-                <div role="row" class="gui-calendar__rows">
-                  ${D(
-      e,
-      (l, c) => c,
-      (l) => d`<span class="gui-calendar__weekday" role="gridcell">${l}</span>`
-    )}
-                </div>
-
-                ${D(
-      a,
-      (l) => d`
-                    <div role="row" class="gui-calendar__rows">
-                      ${D(
-        l,
-        (c) => c.date.toISOString(),
-        (c) => this.renderDay(c)
-      )}
-                    </div>
-                  `
-    )}
-              </div>
-            `}
-      </div>
-    `;
-  }
-  renderHeader(t) {
-    const r = B(this.localeId, t, this.monthFormat);
-    return d`
-      <header class="gui-calendar__header">
-        <h2>
-          ${r.map(
-      (a) => a.type === "year" ? d`<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>` : d`<span class="gui-calendar__month-name">${a.value}</span>`
-    )}
-        </h2>
-      </header>
-    `;
-  }
-  renderYearGrid() {
-    const t = this._currentDate.getFullYear(), r = this._yearList;
-    return d`
-      <div
-        class="gui-calendar__year-grid"
-        role="grid"
-        aria-label="Year selection"
-        @keydown=${this.handleYearKeydown}
-      >
-        ${this.chunkYears(r).map(
-      (a) => d`
-            <div role="row" class="gui-calendar__year-row">
-              ${a.map(
-        (e) => d`
-                  <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 u = parseInt(r.dataset.year ?? "", 10);
-        isNaN(u) || this.selectYear(u);
-        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 ? w(this.minDate).getFullYear() : 1900;
-  }
-  get _effectiveMaxYear() {
-    return this.maxDate ? w(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 u = this.findNextFocusableIndex(n, c, e);
-    let b = !1;
-    if (u < 0)
-      if (this.canGoPrev())
-        this.prevMonth(), b = !0;
-      else {
-        e.find((p) => !this.isButtonDisabled(p))?.focus();
-        return;
-      }
-    else if (u >= 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 (u < 0)
-        g = p[0].querySelectorAll(
-          ".gui-calendar__day-button:not(.other-month)"
-        ).length + u;
-      else {
-        const f = p[p.length - 1].querySelectorAll(
-          ".gui-calendar__day-button:not(.other-month)"
-        ).length;
-        g = h.length - f + (u - e.length);
-      }
-      if (this.isButtonDisabled(h[g])) {
-        const y = this.findNextFocusableIndex(g, c, h);
-        if (y < 0 || y >= h.length) {
-          const f = h.findIndex((M) => !this.isButtonDisabled(M));
-          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[u]?.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 = Y(this.localeId)[0], c = (n - l + 7) % 7, u = new Date(e);
-    u.setDate(e.getDate() - c);
-    const b = [];
-    for (let h = 0; h < 42; h++) {
-      const p = new Date(u);
-      p.setDate(u.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([
-  x()
-], i.prototype, "_currentDate");
-s([
-  x()
-], i.prototype, "_yearSelectorOpen");
-export {
-  i as A
-};

package/calendar-BclCC9VJ.js

@@ -1,96 +0,0 @@
-import { html as p } from "lit";
-import { property as f, customElement as g } from "lit/decorators.js";
-import { classMap as v } from "lit/directives/class-map.js";
-import { p as c, i as d, t as b, b as M, a as C, g as _ } from "./date-CDUlLuYy.js";
-import { A as y } from "./abstract-calendar-D0-077XJ.js";
-var w = Object.defineProperty, O = Object.getOwnPropertyDescriptor, D = (e, t, n, r) => {
-  for (var i = r > 1 ? void 0 : r ? O(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 && w(t, n, i), i;
-};
-let l = class extends y {
-  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 = c(this.value);
-      !isNaN(t.getTime()) && !d(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 p`
-      <button
-        type="button"
-        role="gridcell"
-        class=${v(t)}
-        tabindex=${e.isFocusable ? 0 : -1}
-        ?disabled=${!e.isCurrentMonth || e.isDisabled}
-        data-date=${b(e.date)}
-        @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), u = !!this.value && M(s, c(this.value)), h = C(s), m = (u || h) && a;
-      return {
-        date: s,
-        dayLabel: _(this.localeId, s),
-        isCurrentMonth: a,
-        isToday: h,
-        isDisabled: o,
-        isSelected: u,
-        isFocusable: m
-      };
-    });
-    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 ? c(this.value) : /* @__PURE__ */ new Date();
-      if (!d(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 = b(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([
-  g("gui-calendar")
-], l);
-typeof customElements < "u" && !customElements.get("gui-calendar") && customElements.define("gui-calendar", l);