@golemui/gui-lit 0.12.1 → 0.13.0

package/radiogroup.element-DzHLgRh1.js

@@ -0,0 +1,232 @@
+import { InputWidgetAdapter as v, formContext as y, inputContext as $ } from "@golemui/lit";
+import "@golemui/gui-shared";
+import { LitElement as b, html as p, nothing as c } from "lit";
+import { repeat as f } from "lit-html/directives/repeat.js";
+import { property as s, customElement as g } from "lit/decorators.js";
+import { G as C, b as D, c as _ } from "./templates-Dk1jxLwS.js";
+import { u as F, i as O } from "./one-of-DifUsEYY.js";
+import { consume as w, provide as E } from "@lit/context";
+import "rxjs";
+var S = Object.defineProperty, q = Object.getOwnPropertyDescriptor, o = (t, i, d, a) => {
+  for (var e = a > 1 ? void 0 : a ? q(i, d) : i, l = t.length - 1, n; l >= 0; l--)
+    (n = t[l]) && (e = (a ? n(i, d, e) : n(e)) || e);
+  return a && e && S(i, d, e), e;
+};
+let r = class extends b {
+  constructor() {
+    super(...arguments), this.uid = void 0, this.label = void 0, this.localeId = "en", this.errors = [], this.touched = !1, this.required = !1, this.disabled = !1, this.readOnly = !1, this.value = void 0, this.hint = void 0, this.options = [], this.labelField = void 0, this.valueField = void 0, this.direction = "column", this.optionsLoading = !1, this.hasMatchingValue = !1, this.ariaController = new C(this, {
+      getTargets: () => this.querySelectorAll(`input[name="${this.uid}"]`),
+      getState: () => ({
+        uid: this.uid,
+        templateData: {
+          hint: this.hint,
+          errors: this.errors,
+          touched: this.touched,
+          // Radiogroup inputs can't be readonly
+          readonly: !1,
+          disabled: !1
+        }
+      })
+    });
+  }
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-field");
+  }
+  render() {
+    super.render();
+    const t = {
+      uid: this.uid,
+      label: this.label,
+      errors: this.errors,
+      touched: this.touched,
+      required: this.required,
+      disabled: this.disabled,
+      readonly: this.readOnly,
+      value: this.value,
+      hint: this.hint,
+      options: this.options,
+      labelField: this.labelField,
+      valueField: this.valueField,
+      direction: this.direction
+    };
+    this.options = F(this.options, {
+      labelField: this.labelField,
+      valueField: this.valueField
+    });
+    const i = this.value;
+    this.hasMatchingValue = this.options?.length ? this.options.find(({ value: a }) => a === i) !== void 0 : !1;
+    const d = this.optionsLoading ? p`<span>Loading...</span>` : p`
+          ${f(
+      this.options || [],
+      (a) => a?.value,
+      (a, e) => {
+        const l = this.hasMatchingValue && a.value === t.value, n = !this.hasMatchingValue && e === 0, m = l || n;
+        return p`<label for=${`${this.uid}_${e}`}>
+                <input
+                  type="radio"
+                  tabindex=${m ? "0" : "-1"}
+                  id=${`${this.uid}_${e}`}
+                  data-cy=${`${this.uid}_radiogroup_${e}`}
+                  name=${this.uid}
+                  value=${a.value}
+                  ?checked=${l}
+                  ?required=${t.required}
+                  ?disabled=${t.disabled || t.readonly}
+                  @change=${this.valueChanged}
+                  @blur=${this.onBlur}
+                />
+                ${a.label}
+              </label>`;
+      }
+    )}
+        `;
+    return p`
+      ${D(this.uid, t, !1, void 0, !1)}
+
+      <div
+        class="gui-widget${this.direction === "row" ? " gui-widget--horizontal" : ""}"
+        role="radiogroup"
+        id=${this.uid}
+        aria-labelledby=${t.label ? `${this.uid}_label` : c}
+        aria-describedby=${t.hint ? `${this.uid}_hint` : c}
+      >
+        ${d}
+      </div>
+
+      ${_(this.uid, t)}
+    `;
+  }
+  valueChanged(t) {
+    if (t.stopPropagation(), !this.readOnly) {
+      const i = t.target;
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: { value: O(i.value, this.options) },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }
+  }
+  onBlur() {
+    this.dispatchEvent(
+      new CustomEvent("blur", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+};
+o([
+  s({ type: String })
+], r.prototype, "uid", 2);
+o([
+  s({ type: String })
+], r.prototype, "label", 2);
+o([
+  s({ type: String, attribute: "locale-id" })
+], r.prototype, "localeId", 2);
+o([
+  s({ type: Array })
+], r.prototype, "errors", 2);
+o([
+  s({ type: Boolean })
+], r.prototype, "touched", 2);
+o([
+  s({ type: Boolean })
+], r.prototype, "required", 2);
+o([
+  s({ type: Boolean })
+], r.prototype, "disabled", 2);
+o([
+  s({ type: Boolean, attribute: "readonly" })
+], r.prototype, "readOnly", 2);
+o([
+  s({ type: String })
+], r.prototype, "value", 2);
+o([
+  s({ type: String })
+], r.prototype, "hint", 2);
+o([
+  s({ type: String })
+], r.prototype, "options", 2);
+o([
+  s({ type: String })
+], r.prototype, "labelField", 2);
+o([
+  s({ type: String })
+], r.prototype, "valueField", 2);
+o([
+  s({ type: String })
+], r.prototype, "direction", 2);
+r = o([
+  g("gui-radiogroup")
+], r);
+typeof customElements < "u" && !customElements.get("gui-radiogroup") && customElements.define("gui-radiogroup", r);
+var x = Object.defineProperty, P = Object.getOwnPropertyDescriptor, h = (t, i, d, a) => {
+  for (var e = a > 1 ? void 0 : a ? P(i, d) : i, l = t.length - 1, n; l >= 0; l--)
+    (n = t[l]) && (e = (a ? n(i, d, e) : n(e)) || e);
+  return a && e && x(i, d, e), e;
+};
+let u = class extends b {
+  constructor() {
+    super(...arguments), this.adapter = new v(), this.subscriptions = [];
+  }
+  createRenderRoot() {
+    return this;
+  }
+  updated(t) {
+    super.updated(t);
+    const i = this.adapter.templateData.size;
+    i ? this.style.flex = String(i) : this.style.removeProperty("flex");
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-radiogroup", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
+      this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
+    );
+  }
+  render() {
+    return super.render(), p`
+      <gui-radiogroup
+        .uid=${this.widget.uid}
+        .label=${this.adapter.templateData.label}
+        .errors=${this.adapter.templateData.errors}
+        ?touched=${this.adapter.templateData.touched}
+        ?required=${this.adapter.templateData.validator?.required}
+        ?disabled=${this.adapter.templateData.disabled}
+        ?readonly=${this.adapter.templateData.readonly}
+        .value=${this.adapter.templateData.value}
+        .hint=${this.adapter.templateData.hint}
+        .options=${this.adapter.templateData.options}
+        .labelField=${this.adapter.templateData.labelField}
+        .valueField=${this.adapter.templateData.valueField}
+        .direction=${this.adapter.templateData.direction}
+        @change=${this.valueChanged}
+        @blur=${() => this.adapter.onBlur()}
+      ></gui-radiogroup>
+    `;
+  }
+  valueChanged(t) {
+    const i = t.detail.value;
+    this.adapter.valueChanged(i);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
+  }
+};
+h([
+  w({ context: y }),
+  s({ attribute: !1 })
+], u.prototype, "formContext", 2);
+h([
+  E({ context: $ })
+], u.prototype, "adapter", 2);
+u = h([
+  g("gui-radiogroup-input")
+], u);
+export {
+  u as RadiogroupElement
+};

package/range-calendar-qpakwAba.js

@@ -0,0 +1,326 @@
+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);

package/{range-calendar.element-Bli9UfhN.js → range-calendar.element-C-4qqRGK.js}

@@ -1,15 +1,18 @@
-import * as n from "@golemui/lit";
-import { consume as o, provide as h } from "@lit/context";
-import { LitElement as m, html as u } from "lit";
-import { property as c, customElement as b } from "lit/decorators.js";
-var D = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, d = (e, t, s, r) => {
-  for (var a = r > 1 ? void 0 : r ? $(t, s) : t, p = e.length - 1, l; p >= 0; p--)
+import { InputWidgetAdapter as d, formContext as o, inputContext as h } from "@golemui/lit";
+import "@golemui/gui-shared";
+import "./range-calendar-qpakwAba.js";
+import { consume as m, provide as u } from "@lit/context";
+import { LitElement as c, html as b } from "lit";
+import { property as D, customElement as $ } from "lit/decorators.js";
+import "rxjs";
+var g = Object.defineProperty, f = Object.getOwnPropertyDescriptor, n = (e, t, s, r) => {
+  for (var a = r > 1 ? void 0 : r ? f(t, s) : t, p = e.length - 1, l; p >= 0; p--)
     (l = e[p]) && (a = (r ? l(t, s, a) : l(a)) || a);
-  return r && a && D(t, s, a), a;
+  return r && a && g(t, s, a), a;
 };
-let i = class extends m {
+let i = class extends c {
   constructor() {
-    super(...arguments), this.adapter = new n.InputWidgetAdapter(), this.subscriptions = [];
+    super(...arguments), this.adapter = new d(), this.subscriptions = [];
   }
   createRenderRoot() {
     return this;
@@ -25,7 +28,7 @@ let i = class extends m {
     );
   }
   render() {
-    return super.render(), u`
+    return super.render(), b`
       <gui-range-calendar
         .uid=${this.widget.uid}
         .label=${this.adapter.templateData.label}
@@ -63,15 +66,15 @@ let i = class extends m {
     super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((e) => e.unsubscribe());
   }
 };
-d([
-  o({ context: n.formContext }),
-  c({ attribute: !1 })
+n([
+  m({ context: o }),
+  D({ attribute: !1 })
 ], i.prototype, "formContext", 2);
-d([
-  h({ context: n.inputContext })
+n([
+  u({ context: h })
 ], i.prototype, "adapter", 2);
-i = d([
-  b("gui-range-calendar-input")
+i = n([
+  $("gui-range-calendar-input")
 ], i);
 export {
   i as RangeCalendarElement