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

package/time-picker-DLj1rhOf.js

@@ -1,299 +0,0 @@
-import { LitElement as h, html as u } from "lit";
-import { property as s, query as m, customElement as d } from "lit/decorators.js";
-import { classMap as g } from "lit/directives/class-map.js";
-import "./time-input-Kk4EX6at.js";
-import "./time-list-DLcq8BAp.js";
-import { G as c } from "./popup.controller-B33OvX_y.js";
-import { w as b, h as y, A as v } from "./part-templates-VORbpgs2.js";
-import { a as T, b as f, c as $ } from "./templates-Df7abEkB.js";
-import { e as w } from "./date-DBuYpvcO.js";
-var _ = Object.defineProperty, A = Object.getOwnPropertyDescriptor, i = (e, o, r, a) => {
-  for (var l = a > 1 ? void 0 : a ? A(o, r) : o, p = e.length - 1, n; p >= 0; p--)
-    (n = e[p]) && (l = (a ? n(o, r, l) : n(l)) || l);
-  return a && l && _(o, r, l), l;
-};
-let t = class extends h {
-  constructor() {
-    super(...arguments), this.uid = void 0, this.label = void 0, this.hint = void 0, this.icon = "", this.toggleAriaLabel = void 0, this.hourAriaLabel = void 0, this.minuteAriaLabel = void 0, this.dayPeriodAriaLabel = void 0, this.errors = [], this.showErrors = !0, this.touched = !1, this.required = !1, this.disabled = !1, this.readOnly = !1, this.localeId = void 0, this.value = void 0, this.hourFormat = void 0, this.minuteStep = void 0, this.minTime = void 0, this.maxTime = void 0, this.disabledRanges = void 0, this.allowCustomTime = !1, this.height = void 0, this.itemHeight = void 0, this.columns = void 0, this.minTimeMessage = void 0, this.maxTimeMessage = void 0, this.disabledRangeMessage = void 0, this.noAvailableTimesMessage = void 0, this._popup = new c(this, {
-      focusRestoreSelector: "gui-time input, gui-time button",
-      focusPopupSelector: '.gui-time-list__option[tabindex="0"]',
-      isDisabled: () => !!this.disabled,
-      clickIntent: (e) => e.closest(".gui-time-list__option") ? "ignore" : e.closest("gui-time") || e.closest("gui-time-list") ? "open" : "toggle",
-      keyToggleMode: "openClose",
-      onOpenChanged: (e) => {
-        this.dispatchListToggle(e), e && this.updateComplete.then(() => this._listRef?.scrollToSelectedValue());
-      }
-    }), this.onToggleClick = (e) => {
-      e.stopPropagation(), this._popup.open ? this._popup.close() : this._popup.openAndFocus();
-    }, this.onKeyDown = (e) => {
-      if (this._popup.onAnchorKeyDown(e)) return;
-      if (e.key === "Enter" && e.target.closest("gui-time")) {
-        this._popup.open && this._popup.close(), this.commitValue(this.value, !0);
-        return;
-      }
-      this.allowCustomTime || this.readOnly || this.disabled || e.key !== "ArrowDown" && e.key !== "ArrowUp" || !e.target.closest("gui-time") || (e.preventDefault(), this.selectAdjacentOption(e.key === "ArrowDown" ? 1 : -1));
-    };
-  }
-  createRenderRoot() {
-    return this;
-  }
-  updated(e) {
-    e.has("value") && this._listRef && this._listRef.value !== this.value && (this._listRef.value = this.value);
-  }
-  render() {
-    const e = T("timePicker", { icon: this.icon });
-    return u`
-      ${f(
-      this.uid ?? "",
-      {
-        label: this.label,
-        hint: this.hint,
-        required: this.required
-      },
-      !1,
-      void 0,
-      !1
-    )}
-
-      <div class="gui-widget" @keydown=${this.onKeyDown} @click=${this._popup.onAnchorClick}>
-        <gui-time
-          id="time-input"
-          class=${g(e.widgetClasses)}
-          .uid=${this.uid}
-          .hint=${this.hint}
-          .showErrors=${!1}
-          .errors=${this.errors}
-          ?touched=${this.touched}
-          ?required=${this.required}
-          ?disabled=${this.disabled}
-          ?readonly=${this.readOnly || !this.allowCustomTime}
-          .value=${this.value}
-          .icon=${this.icon}
-          .localeId=${this.localeId}
-          .hourFormat=${this.hourFormat}
-          .minuteStep=${this.minuteStep}
-          .minTime=${this.minTime}
-          .maxTime=${this.maxTime}
-          .hourAriaLabel=${this.hourAriaLabel}
-          .minuteAriaLabel=${this.minuteAriaLabel}
-          .dayPeriodAriaLabel=${this.dayPeriodAriaLabel}
-          .minTimeMessage=${this.minTimeMessage}
-          .maxTimeMessage=${this.maxTimeMessage}
-          @blur=${this.onTimeBlur}
-          @focus=${this._popup.show}
-          @change=${this.onTimeChange}
-        ></gui-time>
-        <button
-          type="button"
-          class="gui-time-picker__arrow"
-          aria-label=${this.toggleAriaLabel ?? "Show time list"}
-          aria-haspopup="dialog"
-          aria-expanded=${this._popup.open ? "true" : "false"}
-          aria-controls=${`${this.uid}_popup`}
-          ?disabled=${this.disabled}
-          @click=${this.onToggleClick}
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            viewBox="0 0 256 256"
-            aria-hidden="true"
-          >
-            <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>
-        </button>
-
-        <gui-time-list
-          id=${`${this.uid}_popup`}
-          role="dialog"
-          aria-label=${this.label ?? "Time list"}
-          .uid=${this.uid}
-          .value=${this.value}
-          .label=${this.label}
-          .localeId=${this.localeId}
-          .hourFormat=${this.hourFormat}
-          .minuteStep=${this.minuteStep}
-          .minTime=${this.minTime}
-          .maxTime=${this.maxTime}
-          .disabledRanges=${this.disabledRanges}
-          .height=${this.height}
-          .itemHeight=${this.itemHeight}
-          .columns=${this.columns}
-          .noAvailableTimesMessage=${this.noAvailableTimesMessage}
-          ?readonly=${this.readOnly}
-          ?hidden=${!this._popup.open}
-          @change=${this.onListChange}
-        ></gui-time-list>
-      </div>
-
-      ${this.showErrors ? $(this.uid ?? "", { errors: this.errors, touched: this.touched }) : ""}
-    `;
-  }
-  onTimeChange(e) {
-    e.stopPropagation(), this.commitValue(e.detail.value);
-  }
-  onTimeBlur() {
-    this.dispatchEvent(new CustomEvent("blur"));
-  }
-  onListChange(e) {
-    e.stopPropagation(), this.commitValue(e.detail.value, !0), this._popup.restoreFocusToInput(), this._popup.close();
-  }
-  /**
-   * @param commit Marks the change as a deliberate final selection (list pick
-   *   or Enter) as opposed to continuous field editing (typing/arrows). A host
-   *   popover (the date-time calendar) closes only on a committed change, so
-   *   editing the time in place doesn't dismiss it mid-entry.
-   */
-  commitValue(e, o = !1) {
-    this.value = e ?? void 0;
-    const r = this.validateBounds(this.value);
-    this.dispatchEvent(
-      new CustomEvent("change", {
-        detail: { value: e ?? null, commit: o },
-        bubbles: !0,
-        composed: !0
-      })
-    ), r && this.dispatchEvent(
-      new CustomEvent("inputError", {
-        detail: { message: r },
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  validateBounds(e) {
-    if (!e) return null;
-    const o = b(e, {
-      minTime: this.minTime,
-      maxTime: this.maxTime,
-      minTimeMessage: this.minTimeMessage,
-      maxTimeMessage: this.maxTimeMessage
-    });
-    return o || (y(e, this.disabledRanges) ? this.disabledRangeMessage ?? w : null);
-  }
-  selectAdjacentOption(e) {
-    const o = v({
-      minTime: this.minTime,
-      maxTime: this.maxTime,
-      minuteStep: this.minuteStep,
-      disabledRanges: this.disabledRanges
-    });
-    if (!o.length) return;
-    const r = o.findIndex((l) => l.value === this.value);
-    let a = r === -1 ? e === 1 ? 0 : o.length - 1 : r + e;
-    for (; a >= 0 && a < o.length && o[a].disabled; )
-      a += e;
-    a < 0 || a >= o.length || (this.commitValue(o[a].value), this._popup.show(), this.updateComplete.then(() => this._listRef?.scrollToSelectedValue()));
-  }
-  /** Public close hook kept for the date-time calendars, which close the
-   * embedded time-picker's list imperatively. */
-  closeList() {
-    this._popup.close();
-  }
-  dispatchListToggle(e) {
-    this.dispatchEvent(
-      new CustomEvent("listtoggle", {
-        detail: { open: e },
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-};
-i([
-  s({ type: String })
-], t.prototype, "uid", 2);
-i([
-  s({ type: String })
-], t.prototype, "label", 2);
-i([
-  s({ type: String })
-], t.prototype, "hint", 2);
-i([
-  s({ type: String })
-], t.prototype, "icon", 2);
-i([
-  s({ type: String, attribute: "toggle-aria-label" })
-], t.prototype, "toggleAriaLabel", 2);
-i([
-  s({ type: String })
-], t.prototype, "hourAriaLabel", 2);
-i([
-  s({ type: String })
-], t.prototype, "minuteAriaLabel", 2);
-i([
-  s({ type: String })
-], t.prototype, "dayPeriodAriaLabel", 2);
-i([
-  s({ type: Array })
-], t.prototype, "errors", 2);
-i([
-  s({ type: Boolean })
-], t.prototype, "showErrors", 2);
-i([
-  s({ type: Boolean })
-], t.prototype, "touched", 2);
-i([
-  s({ type: Boolean })
-], t.prototype, "required", 2);
-i([
-  s({ type: Boolean })
-], t.prototype, "disabled", 2);
-i([
-  s({ type: Boolean, attribute: "readonly" })
-], t.prototype, "readOnly", 2);
-i([
-  s({ type: String, attribute: "locale-id" })
-], t.prototype, "localeId", 2);
-i([
-  s({ type: String })
-], t.prototype, "value", 2);
-i([
-  s({ type: String, attribute: "hour-format" })
-], t.prototype, "hourFormat", 2);
-i([
-  s({ type: Number, attribute: "minute-step" })
-], t.prototype, "minuteStep", 2);
-i([
-  s({ type: String, attribute: "min-time" })
-], t.prototype, "minTime", 2);
-i([
-  s({ type: String, attribute: "max-time" })
-], t.prototype, "maxTime", 2);
-i([
-  s({ type: Array, attribute: "disabled-ranges" })
-], t.prototype, "disabledRanges", 2);
-i([
-  s({ type: Boolean, attribute: "allow-custom-time" })
-], t.prototype, "allowCustomTime", 2);
-i([
-  s({ type: Number })
-], t.prototype, "height", 2);
-i([
-  s({ type: Number, attribute: "item-height" })
-], t.prototype, "itemHeight", 2);
-i([
-  s({ type: Number })
-], t.prototype, "columns", 2);
-i([
-  s({ type: String, attribute: "min-time-message" })
-], t.prototype, "minTimeMessage", 2);
-i([
-  s({ type: String, attribute: "max-time-message" })
-], t.prototype, "maxTimeMessage", 2);
-i([
-  s({ type: String, attribute: "disabled-range-message" })
-], t.prototype, "disabledRangeMessage", 2);
-i([
-  s({ type: String, attribute: "no-available-times-message" })
-], t.prototype, "noAvailableTimesMessage", 2);
-i([
-  m("gui-time-list")
-], t.prototype, "_listRef", 2);
-t = i([
-  d("gui-time-picker")
-], t);
-typeof customElements < "u" && !customElements.get("gui-time-picker") && customElements.define("gui-time-picker", t);

package/toggle.element-Dokdat_o.js

@@ -1,203 +0,0 @@
-import { InputWidgetAdapter as b, formContext as m, inputContext as y } from "@golemui/lit";
-import { G as v, r as f, c as $ } from "./templates-Df7abEkB.js";
-import { LitElement as h, nothing as C, html as g } from "lit";
-import { property as a, customElement as c } from "lit/decorators.js";
-import { consume as _, provide as D } from "@lit/context";
-import "rxjs";
-var P = Object.defineProperty, w = Object.getOwnPropertyDescriptor, s = (t, e, l, o) => {
-  for (var i = o > 1 ? void 0 : o ? w(e, l) : e, d = t.length - 1, n; d >= 0; d--)
-    (n = t[d]) && (i = (o ? n(e, l, i) : n(i)) || i);
-  return o && i && P(e, l, i), i;
-};
-let r = class extends h {
-  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.togglePosition = "left", this.ariaController = new v(this, {
-      getTargets: () => this.querySelectorAll(`input[id="${this.uid}"]`),
-      getState: () => ({
-        uid: this.uid,
-        templateData: {
-          hint: this.hint,
-          errors: this.errors,
-          touched: this.touched,
-          // Checkboxes can't have aria-readonly
-          readonly: !1,
-          disabled: !1,
-          required: this.required
-        }
-      })
-    });
-  }
-  createRenderRoot() {
-    return this;
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-field");
-  }
-  render() {
-    super.render();
-    const t = {
-      uid: this.uid,
-      label: this.label,
-      hint: this.hint,
-      errors: this.errors,
-      touched: this.touched,
-      required: this.required,
-      disabled: this.disabled,
-      readonly: this.readOnly,
-      value: this.value,
-      togglePosition: this.togglePosition
-    };
-    return t.togglePosition === "right" ? this.classList.add("gui-toggle--right") : this.classList.contains("gui-toggle--right") && this.classList.remove("gui-toggle--right"), g`
-      <label
-        class="gui-label"
-        for=${this.uid}
-        data-cy=${`${this.uid}_label`}
-        id=${`${this.uid}_label`}
-      >
-        <div class="gui-widget gui-widget--horizontal gui-toggle--switch">
-          <input
-            type="checkbox"
-            role="switch"
-            id=${this.uid}
-            data-cy=${`${this.uid}_toggle`}
-            ?checked=${t.value}
-            ?required=${t.required}
-            ?disabled=${t.disabled || t.readonly}
-            @change=${this.valueChanged}
-            @blur=${this.onBlur}
-          />
-
-          <span class="gui-toggle--slider" role="presentation"></span>
-        </div>
-
-        <span class="gui-label__container">
-          <span class="gui-label__text"
-            >${t.label}${f(t.required)}</span
-          >
-        </span>
-      </label>
-
-      <div class="gui-widget-hint" id=${`${t.uid}_hint`}>
-        ${t.hint ?? C} ${$(this.uid, t)}
-      </div>
-    `;
-  }
-  valueChanged(t) {
-    if (t?.stopPropagation(), !this.readOnly) {
-      const e = t?.target;
-      this.dispatchEvent(
-        new CustomEvent("change", {
-          detail: { value: e.checked },
-          bubbles: !0,
-          composed: !0
-        })
-      );
-    }
-  }
-  onBlur() {
-    this.dispatchEvent(
-      new CustomEvent("blur", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-};
-s([
-  a({ type: String })
-], r.prototype, "uid", 2);
-s([
-  a({ type: String })
-], r.prototype, "label", 2);
-s([
-  a({ type: String, attribute: "locale-id" })
-], r.prototype, "localeId", 2);
-s([
-  a({ type: Array })
-], r.prototype, "errors", 2);
-s([
-  a({ type: Boolean })
-], r.prototype, "touched", 2);
-s([
-  a({ type: Boolean })
-], r.prototype, "required", 2);
-s([
-  a({ type: Boolean })
-], r.prototype, "disabled", 2);
-s([
-  a({ type: Boolean, attribute: "readonly" })
-], r.prototype, "readOnly", 2);
-s([
-  a({ type: String })
-], r.prototype, "value", 2);
-s([
-  a({ type: String })
-], r.prototype, "hint", 2);
-s([
-  a({ type: String })
-], r.prototype, "togglePosition", 2);
-r = s([
-  c("gui-toggle")
-], r);
-typeof customElements < "u" && !customElements.get("gui-toggle") && customElements.define("gui-toggle", r);
-var q = Object.defineProperty, x = Object.getOwnPropertyDescriptor, p = (t, e, l, o) => {
-  for (var i = o > 1 ? void 0 : o ? x(e, l) : e, d = t.length - 1, n; d >= 0; d--)
-    (n = t[d]) && (i = (o ? n(e, l, i) : n(i)) || i);
-  return o && i && q(e, l, i), i;
-};
-let u = class extends h {
-  constructor() {
-    super(...arguments), this.adapter = new b(), this.subscriptions = [];
-  }
-  createRenderRoot() {
-    return this;
-  }
-  updated(t) {
-    super.updated(t);
-    const e = this.adapter.templateData.size;
-    e ? this.style.flex = String(e) : this.style.removeProperty("flex");
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-toggle", "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(), g`
-      <gui-toggle
-        .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}
-        .togglePosition=${this.adapter.templateData.togglePosition}
-        @change=${this.valueChanged}
-        @blur=${() => this.adapter.onBlur()}
-      ></gui-toggle>
-    `;
-  }
-  valueChanged(t) {
-    const e = t.detail.value;
-    this.adapter.valueChanged(e);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
-  }
-};
-p([
-  _({ context: m }),
-  a({ attribute: !1 })
-], u.prototype, "formContext", 2);
-p([
-  D({ context: y })
-], u.prototype, "adapter", 2);
-u = p([
-  c("gui-toggle-input")
-], u);
-export {
-  u as ToggleElement
-};