@golemui/gui-lit 1.2.0 → 1.2.1-rc.0

package/time-input-Kk4EX6at.js

@@ -1,201 +0,0 @@
-import { LitElement as p, nothing as n, html as d } from "lit";
-import { property as i, customElement as m } from "lit/decorators.js";
-import { classMap as c } from "lit/directives/class-map.js";
-import { G as g, b as y, c as b } from "./templates-Df7abEkB.js";
-import { G as v, g as f, u as L, r as E, v as D, w as T, P as A } from "./part-templates-VORbpgs2.js";
-var S = Object.defineProperty, P = Object.getOwnPropertyDescriptor, e = (s, o, l, r) => {
-  for (var a = r > 1 ? void 0 : r ? P(o, l) : o, u = s.length - 1, h; u >= 0; u--)
-    (h = s[u]) && (a = (r ? h(o, l, a) : h(a)) || a);
-  return r && a && S(o, l, a), a;
-};
-let t = class extends p {
-  constructor() {
-    super(...arguments), this.uid = void 0, this.label = void 0, this.localeId = void 0, this.errors = [], this.showErrors = !0, this.touched = !1, this.required = !1, this.disabled = !1, this.readOnly = !1, this.icon = "", this.hint = void 0, this.hourAriaLabel = void 0, this.minuteAriaLabel = void 0, this.dayPeriodAriaLabel = void 0, this.value = void 0, this.hourFormat = void 0, this.minuteStep = 1, this.minTime = void 0, this.maxTime = void 0, this.minTimeMessage = void 0, this.maxTimeMessage = void 0, this.inputBlockClass = "gui-time-input", this.groups = ["default"], this._parts = new v(this, {
-      blockClass: this.inputBlockClass,
-      groups: this.groups,
-      getDescriptor: (s) => this.getPartDescriptor(s),
-      commitGroup: (s) => this.validateAndEmit(s),
-      isReadonly: () => !!this.readOnly,
-      isDisabled: () => !!this.disabled,
-      onEmptyPartBlur: () => this.dispatchEvent(new CustomEvent("change", { detail: { value: null }, bubbles: !0 })),
-      getHourFormat: () => this.timeLocaleData.effectiveHourFormat,
-      getDayPeriodLabels: () => this.timeLocaleData.dayPeriodLabels
-    }), this.ariaController = new g(this, {
-      getTargets: () => this.querySelectorAll(`.${this.inputBlockClass}`),
-      getState: () => ({
-        uid: this.uid,
-        templateData: {
-          hint: this.hint,
-          errors: this.errors,
-          readonly: this.readOnly,
-          disabled: this.disabled,
-          touched: this.touched,
-          required: this.required
-        }
-      })
-    });
-  }
-  createRenderRoot() {
-    return this;
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-field");
-  }
-  get timeLocaleData() {
-    return f(this.localeId, this.hourFormat, this.minuteStep);
-  }
-  getPartDescriptor(s) {
-    return this.timeLocaleData.descriptors[s];
-  }
-  willUpdate(s) {
-    (!this.hasUpdated || s.has("value") || s.has("hourFormat") || s.has("localeId")) && this._parts.setGroupFromISO(
-      "default",
-      this.value ?? "",
-      "time",
-      this.timeLocaleData.effectiveHourFormat
-    );
-  }
-  render() {
-    const s = {
-      uid: this.uid,
-      label: this.label,
-      errors: this.errors,
-      touched: this.touched,
-      required: this.required,
-      disabled: this.disabled,
-      readonly: this.readOnly,
-      value: this.value,
-      icon: this.icon,
-      hint: this.hint
-    }, o = {
-      blockClass: this.inputBlockClass,
-      groups: this.groups,
-      formatParts: L(this.localeId, this.timeLocaleData.effectiveHourFormat),
-      getDescriptor: (r) => this.getPartDescriptor(r),
-      getDisplayValue: this._parts.getPartDisplay,
-      getPartAriaLabel: (r, a) => ({
-        hour: this.hourAriaLabel,
-        minute: this.minuteAriaLabel
-      })[a] ?? A[a],
-      dayPeriodAriaLabel: this.dayPeriodAriaLabel,
-      disabled: this.disabled,
-      partsReadonly: !!this.readOnly
-    }, l = {
-      "gui-widget-icon": !0,
-      [this.icon]: !0
-    };
-    return d`
-      ${this.label ? y(this.uid, s, !1, void 0, !1) : n}
-
-      <div class="gui-widget">
-        <div
-          id=${this.uid}
-          class="gui-widget-input gui-parts gui-parts-ring gui-time-input ${this.icon ? "gui-calendar--icon" : ""}"
-          role="group"
-          aria-labelledby=${`${this.uid}_label`}
-        >
-          ${E("default", o, this._parts)}
-        </div>
-        ${this.icon ? d`<span
-              class=${c(l)}
-              data-icon=${this.icon}
-              aria-hidden="true"
-            ></span>` : n}
-      </div>
-
-      ${this.showErrors && this.errors?.length ? b(this.uid, s) : n}
-    `;
-  }
-  validateAndEmit(s) {
-    const { effectiveHourFormat: o, descriptors: l } = this.timeLocaleData, { result: r, writeBacks: a } = D(this._parts.values[s] ?? {}, {
-      hourFormat: o,
-      descriptors: l
-    });
-    if (this._parts.applyWriteBacks(s, a), r.kind !== "valid") {
-      this.requestUpdate();
-      return;
-    }
-    const u = T(r.iso, {
-      minTime: this.minTime,
-      maxTime: this.maxTime,
-      minTimeMessage: this.minTimeMessage,
-      maxTimeMessage: this.maxTimeMessage
-    });
-    if (u) {
-      this.dispatchEvent(
-        new CustomEvent("change", { detail: { value: r.iso }, bubbles: !0 })
-      ), this.dispatchEvent(
-        new CustomEvent("inputError", { detail: { message: u }, bubbles: !0 })
-      ), this.requestUpdate();
-      return;
-    }
-    this.value = r.iso, this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value }, bubbles: !0 })), this.requestUpdate();
-  }
-};
-e([
-  i({ type: String })
-], t.prototype, "uid", 2);
-e([
-  i({ type: String })
-], t.prototype, "label", 2);
-e([
-  i({ type: String, attribute: "locale-id" })
-], t.prototype, "localeId", 2);
-e([
-  i({ type: Array })
-], t.prototype, "errors", 2);
-e([
-  i({ type: Boolean })
-], t.prototype, "showErrors", 2);
-e([
-  i({ type: Boolean })
-], t.prototype, "touched", 2);
-e([
-  i({ type: Boolean })
-], t.prototype, "required", 2);
-e([
-  i({ type: Boolean })
-], t.prototype, "disabled", 2);
-e([
-  i({ type: Boolean, attribute: "readonly" })
-], t.prototype, "readOnly", 2);
-e([
-  i({ type: String })
-], t.prototype, "icon", 2);
-e([
-  i({ type: String })
-], t.prototype, "hint", 2);
-e([
-  i({ type: String })
-], t.prototype, "hourAriaLabel", 2);
-e([
-  i({ type: String })
-], t.prototype, "minuteAriaLabel", 2);
-e([
-  i({ type: String })
-], t.prototype, "dayPeriodAriaLabel", 2);
-e([
-  i({ type: String })
-], t.prototype, "value", 2);
-e([
-  i({ type: String, attribute: "hour-format" })
-], t.prototype, "hourFormat", 2);
-e([
-  i({ type: Number, attribute: "minute-step" })
-], t.prototype, "minuteStep", 2);
-e([
-  i({ type: String, attribute: "min-time" })
-], t.prototype, "minTime", 2);
-e([
-  i({ type: String, attribute: "max-time" })
-], t.prototype, "maxTime", 2);
-e([
-  i({ type: String, attribute: "min-time-message" })
-], t.prototype, "minTimeMessage", 2);
-e([
-  i({ type: String, attribute: "max-time-message" })
-], t.prototype, "maxTimeMessage", 2);
-t = e([
-  m("gui-time")
-], t);
-typeof customElements < "u" && !customElements.get("gui-time") && customElements.define("gui-time", t);

package/time-list-DLcq8BAp.js

@@ -1,217 +0,0 @@
-import { LitElement as v, html as p, nothing as b } from "lit";
-import { property as l, customElement as _ } from "lit/decorators.js";
-import { classMap as S } from "lit/directives/class-map.js";
-import { g as O, l as x, n as f, c as T } from "./focus-leave.controller-2gV0pQd5.js";
-import { e as $, A as w, l as I, s as E, N as R } from "./part-templates-VORbpgs2.js";
-var A = Object.defineProperty, C = Object.getOwnPropertyDescriptor, r = (t, e, i, o) => {
-  for (var n = o > 1 ? void 0 : o ? C(e, i) : e, a = t.length - 1, u; a >= 0; a--)
-    (u = t[a]) && (n = (o ? u(e, i, n) : u(n)) || n);
-  return o && n && A(e, i, n), n;
-};
-let s = class extends v {
-  constructor() {
-    super(...arguments), this.uid = void 0, this.value = void 0, this.label = void 0, this.minTime = void 0, this.maxTime = void 0, this.minuteStep = void 0, this.disabledRanges = void 0, this.localeId = void 0, this.hourFormat = void 0, this.disabled = !1, this.readOnly = !1, this.height = void 0, this.itemHeight = void 0, this.columns = void 0, this.noAvailableTimesMessage = void 0;
-  }
-  createRenderRoot() {
-    return this;
-  }
-  get effectiveColumns() {
-    return this.columns || 1;
-  }
-  get timeOptions() {
-    const t = $(this.localeId, this.hourFormat), e = [
-      this.localeId,
-      t,
-      this.minTime,
-      this.maxTime,
-      this.minuteStep,
-      JSON.stringify(this.disabledRanges ?? null)
-    ].join("|");
-    return this._optionsCache?.key !== e && (this._optionsCache = {
-      key: e,
-      options: w({
-        minTime: this.minTime,
-        maxTime: this.maxTime,
-        minuteStep: this.minuteStep,
-        disabledRanges: this.disabledRanges
-      }).map((i) => ({
-        ...i,
-        template: I(i.value, this.localeId, t)
-      }))
-    }), this._optionsCache.options;
-  }
-  isSelected(t) {
-    return this.value != null && E(t.value, this.value) === 0;
-  }
-  get rovingIndex() {
-    const t = this.timeOptions, e = t.findIndex((i) => this.isSelected(i) && !i.disabled);
-    return e !== -1 ? e : t.findIndex((i) => !i.disabled);
-  }
-  scrollToSelectedValue() {
-    const t = this.querySelector(".gui-time-list__viewport"), e = this.querySelector(".gui-time-list__option--selected") ?? this.querySelector(".gui-time-list__option");
-    if (t && e) {
-      const i = t.getBoundingClientRect(), o = e.getBoundingClientRect(), n = t.scrollTop + (o.top - i.top) - i.height / 2 + o.height / 2;
-      t.scrollTop = Math.max(0, n);
-    }
-  }
-  focusSelectedOption() {
-    this.querySelector('.gui-time-list__option[tabindex="0"]')?.focus();
-  }
-  selectOption(t, e) {
-    e.stopPropagation(), !(this.disabled || this.readOnly || t.disabled) && (this.value = t.value, this.dispatchEvent(
-      new CustomEvent("change", {
-        detail: { value: t.value },
-        bubbles: !0,
-        composed: !0
-      })
-    ));
-  }
-  onKeyDown(t) {
-    const e = t.target;
-    if (!e.classList.contains("gui-time-list__option")) return;
-    const i = Array.from(this.querySelectorAll(".gui-time-list__option")), o = i.indexOf(e), n = this.effectiveColumns, a = window.getComputedStyle(this).direction === "rtl", u = (m) => this.timeOptions[m].disabled;
-    if (t.key === "Enter" || t.key === " ") {
-      t.preventDefault();
-      const m = this.timeOptions[o];
-      m && this.selectOption(m, t);
-      return;
-    }
-    const d = O(t.key, {
-      columns: n,
-      isRTL: a,
-      pageSize: x(this.height, this.itemHeight, n)
-    });
-    if (d.kind === "none") return;
-    if (t.preventDefault(), d.kind === "edge") {
-      const m = d.edge === "first" ? 0 : i.length - 1, y = f(
-        m,
-        d.edge === "first" ? 1 : -1,
-        this.timeOptions.length,
-        u,
-        { includeStart: !0, outOfBounds: "none" }
-      );
-      y !== -1 && i[y].focus();
-      return;
-    }
-    const c = d.delta, g = Math.min(Math.max(o + c, 0), i.length - 1);
-    if (g === o) return;
-    const h = f(
-      g,
-      c > 0 ? 1 : -1,
-      this.timeOptions.length,
-      u,
-      { includeStart: !0, outOfBounds: "none" }
-    );
-    h !== -1 && h !== o && i[h].focus();
-  }
-  renderOption(t, e, i) {
-    const o = this.isSelected(t);
-    return p`
-      <button
-        type="button"
-        role=${i}
-        class=${S({
-      "gui-time-list__option": !0,
-      "gui-time-list__option--selected": o
-    })}
-        tabindex=${e === this.rovingIndex ? 0 : -1}
-        ?disabled=${t.disabled || this.disabled}
-        data-value=${t.value}
-        aria-selected=${o}
-        aria-disabled=${t.disabled || this.disabled ? "true" : "false"}
-        @click=${(a) => this.selectOption(t, a)}
-      >
-        ${t.template}
-      </button>
-    `;
-  }
-  render() {
-    const t = this.timeOptions;
-    if (t.length === 0)
-      return p`<div class="gui-time-list__empty">
-        ${this.noAvailableTimesMessage ?? R}
-      </div>`;
-    const e = this.effectiveColumns, i = `--gui-time-list-height: ${this.height ?? 300}px; --gui-time-list-item-height: ${this.itemHeight || 40}px; --gui-time-list-columns: ${e};`;
-    if (e === 1)
-      return p`
-        <div
-          class="gui-time-list__viewport"
-          role="listbox"
-          style=${i}
-          aria-label=${this.label ?? b}
-          @keydown=${this.onKeyDown}
-        >
-          ${t.map((n, a) => this.renderOption(n, a, "option"))}
-        </div>
-      `;
-    const o = T(t, e);
-    return p`
-      <div
-        class="gui-time-list__viewport gui-time-list__viewport--grid"
-        role="grid"
-        style=${i}
-        aria-label=${this.label ?? b}
-        @keydown=${this.onKeyDown}
-      >
-        ${o.map(
-      (n, a) => p`
-            <div role="row" class="gui-time-list__row">
-              ${n.map(
-        (u, d) => this.renderOption(u, a * e + d, "gridcell")
-      )}
-            </div>
-          `
-    )}
-      </div>
-    `;
-  }
-};
-r([
-  l({ type: String })
-], s.prototype, "uid", 2);
-r([
-  l({ type: String })
-], s.prototype, "value", 2);
-r([
-  l({ type: String })
-], s.prototype, "label", 2);
-r([
-  l({ type: String, attribute: "min-time" })
-], s.prototype, "minTime", 2);
-r([
-  l({ type: String, attribute: "max-time" })
-], s.prototype, "maxTime", 2);
-r([
-  l({ type: Number, attribute: "minute-step" })
-], s.prototype, "minuteStep", 2);
-r([
-  l({ type: Array, attribute: "disabled-ranges" })
-], s.prototype, "disabledRanges", 2);
-r([
-  l({ type: String, attribute: "locale-id" })
-], s.prototype, "localeId", 2);
-r([
-  l({ type: String, attribute: "hour-format" })
-], s.prototype, "hourFormat", 2);
-r([
-  l({ type: Boolean })
-], s.prototype, "disabled", 2);
-r([
-  l({ type: Boolean, attribute: "readonly" })
-], s.prototype, "readOnly", 2);
-r([
-  l({ type: Number })
-], s.prototype, "height", 2);
-r([
-  l({ type: Number, attribute: "item-height" })
-], s.prototype, "itemHeight", 2);
-r([
-  l({ type: Number })
-], s.prototype, "columns", 2);
-r([
-  l({ type: String, attribute: "no-available-times-message" })
-], s.prototype, "noAvailableTimesMessage", 2);
-s = r([
-  _("gui-time-list")
-], s);
-typeof customElements < "u" && !customElements.get("gui-time-list") && customElements.define("gui-time-list", s);