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

package/range-time-picker.element-DDNQMA_u.js

@@ -1,470 +0,0 @@
-import { InputWidgetAdapter as $, formContext as y, inputContext as v } from "@golemui/lit";
-import { LitElement as g, html as m, nothing as T } from "lit";
-import { property as a, query as _, state as c, customElement as b } from "lit/decorators.js";
-import { classMap as f } from "lit/directives/class-map.js";
-import "./range-time-input-D7GFdDeA.js";
-import "./time-list-DLcq8BAp.js";
-import { G as L } from "./popup.controller-B33OvX_y.js";
-import { k as w, s as u, t as A } from "./part-templates-VORbpgs2.js";
-import { a as S, b as k, c as I } from "./templates-Df7abEkB.js";
-import { I as C, b as M, e as x } from "./date-DBuYpvcO.js";
-import { consume as E, provide as P } from "@lit/context";
-import "rxjs";
-var O = Object.defineProperty, R = Object.getOwnPropertyDescriptor, i = (e, s, o, n) => {
-  for (var r = n > 1 ? void 0 : n ? R(s, o) : s, l = e.length - 1, p; l >= 0; l--)
-    (p = e[l]) && (r = (n ? p(s, o, r) : p(r)) || r);
-  return n && r && O(s, o, r), r;
-};
-let t = class extends g {
-  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 = [], this.separator = void 0, this.removePillAriaLabel = void 0, this.startTimeAriaLabel = void 0, this.endTimeAriaLabel = void 0, this.startTimeLabel = void 0, this.endTimeLabel = 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.minTimeMessage = void 0, this.maxTimeMessage = void 0, this.rangeOrderMessage = void 0, this.disabledRangeMessage = void 0, this.noAvailableTimesMessage = void 0, this._workingIn = void 0, this._workingOut = void 0, this._popup = new L(this, {
-      focusRestoreSelector: "gui-range-time input, gui-range-time button",
-      focusPopupSelector: '.gui-time-list__option[tabindex="0"]',
-      isDisabled: () => !!this.disabled,
-      clickIntent: (e) => e.closest(".gui-time-list__option") ? "ignore" : e.closest(".gui-range-time-input__part") || e.closest(".gui-range-time-picker__panel") ? "open" : "toggle",
-      keyToggleMode: "openClose",
-      beforeOpen: (e) => {
-        this.querySelector(".gui-pills__dropdown") && e.suppressNextFocusOut(), this.closePillsDropdown();
-      },
-      onOpenChanged: (e) => {
-        e || (this._workingIn = void 0, this._workingOut = void 0);
-      }
-    }), this.onDropdownToggle = (e) => {
-      e.detail?.open && this._popup.open && this._popup.close();
-    }, this.onToggleClick = (e) => {
-      e.stopPropagation(), this._popup.open ? this._popup.close() : this._popup.openAndFocus();
-    };
-  }
-  createRenderRoot() {
-    return this;
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.addEventListener("dropdowntoggle", this.onDropdownToggle);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("dropdowntoggle", this.onDropdownToggle);
-  }
-  /**
-   * Bounds for the "time out" list: undefined until an "in" is chosen. Once
-   * chosen, the floor is one slot after "in" so `out > in` strictly; when that
-   * spills past the end of the day, an empty (min > max) window yields the
-   * "no available times" message.
-   */
-  get outListBounds() {
-    if (!this._workingIn) return { minTime: this.minTime, maxTime: this.maxTime };
-    const e = w(this._workingIn, this.minuteStep);
-    return e ? { minTime: e, maxTime: this.maxTime } : { minTime: "23:59:59", maxTime: "00:00:00" };
-  }
-  render() {
-    const e = S("rangeTimePicker", { icon: this.icon }), s = this.outListBounds, o = this.startTimeLabel ?? "Start time", n = this.endTimeLabel ?? "End time", r = this._popup.open ? m`<div
-          class="gui-range-time-picker__panel"
-          id=${`${this.uid}_popup`}
-          role="dialog"
-          aria-label=${this.label ?? "Time list"}
-        >
-          <div class="gui-range-time-picker__column">
-            <span class="gui-range-time-picker__column-label">${o}</span>
-            <gui-time-list
-              class="gui-range-time-picker__list"
-              .uid=${this.uid}
-              .label=${o}
-              .value=${this._workingIn}
-              .localeId=${this.localeId}
-              .hourFormat=${this.hourFormat}
-              .minuteStep=${this.minuteStep}
-              .minTime=${this.minTime}
-              .maxTime=${this.maxTime}
-              .disabledRanges=${this.disabledRanges}
-              .height=${this.height}
-              .itemHeight=${this.itemHeight}
-              .noAvailableTimesMessage=${this.noAvailableTimesMessage}
-              ?readonly=${this.readOnly}
-              @change=${this.onInListChange}
-            ></gui-time-list>
-          </div>
-
-          <div class="gui-range-time-picker__column">
-            <span class="gui-range-time-picker__column-label">${n}</span>
-            <gui-time-list
-              class="gui-range-time-picker__list"
-              .uid=${this.uid}
-              .label=${n}
-              .value=${this._workingOut}
-              .localeId=${this.localeId}
-              .hourFormat=${this.hourFormat}
-              .minuteStep=${this.minuteStep}
-              .minTime=${s.minTime}
-              .maxTime=${s.maxTime}
-              .disabledRanges=${this.disabledRanges}
-              .height=${this.height}
-              .itemHeight=${this.itemHeight}
-              .noAvailableTimesMessage=${this.noAvailableTimesMessage}
-              ?disabled=${!this._workingIn}
-              ?readonly=${this.readOnly}
-              @change=${this.onOutListChange}
-            ></gui-time-list>
-          </div>
-        </div>` : T;
-    return m`
-      ${k(
-      this.uid ?? "",
-      {
-        label: this.label,
-        hint: this.hint,
-        required: this.required
-      },
-      !1,
-      void 0,
-      !1
-    )}
-
-      <div
-        class="gui-widget"
-        @keydown=${this._popup.onAnchorKeyDown}
-        @click=${this._popup.onAnchorClick}
-      >
-        <gui-range-time
-          id="time-input"
-          class=${f(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}
-          .allowCustomTime=${this.allowCustomTime ?? !1}
-          .value=${this.value}
-          .icon=${this.icon}
-          .localeId=${this.localeId}
-          .separator=${this.separator}
-          .hourFormat=${this.hourFormat}
-          .minuteStep=${this.minuteStep}
-          .minTime=${this.minTime}
-          .maxTime=${this.maxTime}
-          .disabledRanges=${this.disabledRanges}
-          .minTimeMessage=${this.minTimeMessage}
-          .maxTimeMessage=${this.maxTimeMessage}
-          .rangeOrderMessage=${this.rangeOrderMessage}
-          .disabledRangeMessage=${this.disabledRangeMessage}
-          .removePillAriaLabel=${this.removePillAriaLabel}
-          .startTimeAriaLabel=${this.startTimeAriaLabel}
-          .endTimeAriaLabel=${this.endTimeAriaLabel}
-          .hourAriaLabel=${this.hourAriaLabel}
-          .minuteAriaLabel=${this.minuteAriaLabel}
-          .dayPeriodAriaLabel=${this.dayPeriodAriaLabel}
-          @blur=${this.onInputBlur}
-          @focus=${this._popup.show}
-          @change=${this.onInputChange}
-          @partsChange=${this.onPartsChange}
-          @pillClick=${this.onPillClick}
-        ></gui-range-time>
-        <button
-          type="button"
-          class="gui-range-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>
-
-        ${r}
-      </div>
-
-      ${this.showErrors ? I(this.uid ?? "", { errors: this.errors, touched: this.touched }) : ""}
-    `;
-  }
-  onInputChange(e) {
-    e.stopPropagation(), this._workingIn = void 0, this._workingOut = void 0, this.commitValue(e.detail.value);
-  }
-  /**
-   * Mirrors the input's live, in-bounds start/end into the two lists, so typing
-   * a value that exists as a slot highlights it (and a typed start enables and
-   * floors the end list) — the reverse of a list pick filling the fields.
-   */
-  onPartsChange(e) {
-    e.stopPropagation(), this._workingIn = e.detail.start ?? void 0, this._workingOut = e.detail.end ?? void 0;
-  }
-  onInputBlur() {
-    this.dispatchEvent(new CustomEvent("blur"));
-  }
-  onInListChange(e) {
-    e.stopPropagation();
-    const s = e.detail.value;
-    this._workingIn = s ?? void 0, this._workingOut = void 0, s && this._inputRef?.fillGroup("start", s);
-  }
-  onOutListChange(e) {
-    e.stopPropagation();
-    const s = e.detail.value;
-    if (!this._workingIn || !s || !this._inputRef) return;
-    this._inputRef.fillGroup("end", s), this._inputRef.commitFromParts() ? (this._workingIn = void 0, this._workingOut = void 0, this.updateComplete.then(() => {
-      this._inListRef()?.scrollToSelectedValue?.();
-    })) : (this._popup.close(), this.dispatchEvent(new CustomEvent("blur")));
-  }
-  _inListRef() {
-    return this.querySelector(
-      ".gui-range-time-picker__column:first-child gui-time-list"
-    );
-  }
-  commitValue(e) {
-    this.value = e ?? void 0;
-    const s = this.validateBounds(this.value);
-    this.dispatchEvent(
-      new CustomEvent("change", {
-        detail: { value: e ?? null },
-        bubbles: !0,
-        composed: !0
-      })
-    ), s && this.dispatchEvent(
-      new CustomEvent("inputError", {
-        detail: { message: s },
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  validateBounds(e) {
-    if (!e || e.length === 0) return null;
-    for (const s of e) {
-      for (const o of [s.start, s.end])
-        if (o) {
-          if (this.minTime && u(o, this.minTime) < 0)
-            return this.minTimeMessage ?? C;
-          if (this.maxTime && u(o, this.maxTime) > 0)
-            return this.maxTimeMessage ?? M;
-        }
-      if (A(s.start, s.end, this.disabledRanges))
-        return this.disabledRangeMessage ?? x;
-    }
-    return null;
-  }
-  onPillClick() {
-    this._popup.show();
-  }
-  closePillsDropdown() {
-    this.querySelector("gui-pills")?.closeDropdown?.();
-  }
-};
-i([
-  a({ type: String })
-], t.prototype, "uid", 2);
-i([
-  a({ type: String })
-], t.prototype, "label", 2);
-i([
-  a({ type: String })
-], t.prototype, "hint", 2);
-i([
-  a({ type: String })
-], t.prototype, "icon", 2);
-i([
-  a({ type: String, attribute: "toggle-aria-label" })
-], t.prototype, "toggleAriaLabel", 2);
-i([
-  a({ type: String })
-], t.prototype, "hourAriaLabel", 2);
-i([
-  a({ type: String })
-], t.prototype, "minuteAriaLabel", 2);
-i([
-  a({ type: String })
-], t.prototype, "dayPeriodAriaLabel", 2);
-i([
-  a({ type: Array })
-], t.prototype, "errors", 2);
-i([
-  a({ type: Boolean })
-], t.prototype, "showErrors", 2);
-i([
-  a({ type: Boolean })
-], t.prototype, "touched", 2);
-i([
-  a({ type: Boolean })
-], t.prototype, "required", 2);
-i([
-  a({ type: Boolean })
-], t.prototype, "disabled", 2);
-i([
-  a({ type: Boolean, attribute: "readonly" })
-], t.prototype, "readOnly", 2);
-i([
-  a({ type: String, attribute: "locale-id" })
-], t.prototype, "localeId", 2);
-i([
-  a({ type: Array })
-], t.prototype, "value", 2);
-i([
-  a({ type: String })
-], t.prototype, "separator", 2);
-i([
-  a({ type: String, attribute: "remove-pill-aria-label" })
-], t.prototype, "removePillAriaLabel", 2);
-i([
-  a({ type: String, attribute: "start-time-aria-label" })
-], t.prototype, "startTimeAriaLabel", 2);
-i([
-  a({ type: String, attribute: "end-time-aria-label" })
-], t.prototype, "endTimeAriaLabel", 2);
-i([
-  a({ type: String, attribute: "start-time-label" })
-], t.prototype, "startTimeLabel", 2);
-i([
-  a({ type: String, attribute: "end-time-label" })
-], t.prototype, "endTimeLabel", 2);
-i([
-  a({ type: String, attribute: "hour-format" })
-], t.prototype, "hourFormat", 2);
-i([
-  a({ type: Number, attribute: "minute-step" })
-], t.prototype, "minuteStep", 2);
-i([
-  a({ type: String, attribute: "min-time" })
-], t.prototype, "minTime", 2);
-i([
-  a({ type: String, attribute: "max-time" })
-], t.prototype, "maxTime", 2);
-i([
-  a({ type: Array, attribute: "disabled-ranges" })
-], t.prototype, "disabledRanges", 2);
-i([
-  a({ type: Boolean, attribute: "allow-custom-time" })
-], t.prototype, "allowCustomTime", 2);
-i([
-  a({ type: Number })
-], t.prototype, "height", 2);
-i([
-  a({ type: Number, attribute: "item-height" })
-], t.prototype, "itemHeight", 2);
-i([
-  a({ type: String, attribute: "min-time-message" })
-], t.prototype, "minTimeMessage", 2);
-i([
-  a({ type: String, attribute: "max-time-message" })
-], t.prototype, "maxTimeMessage", 2);
-i([
-  a({ type: String, attribute: "range-order-message" })
-], t.prototype, "rangeOrderMessage", 2);
-i([
-  a({ type: String, attribute: "disabled-range-message" })
-], t.prototype, "disabledRangeMessage", 2);
-i([
-  a({ type: String, attribute: "no-available-times-message" })
-], t.prototype, "noAvailableTimesMessage", 2);
-i([
-  _("#time-input")
-], t.prototype, "_inputRef", 2);
-i([
-  c()
-], t.prototype, "_workingIn", 2);
-i([
-  c()
-], t.prototype, "_workingOut", 2);
-t = i([
-  b("gui-range-time-picker")
-], t);
-typeof customElements < "u" && !customElements.get("gui-range-time-picker") && customElements.define("gui-range-time-picker", t);
-var D = Object.defineProperty, B = Object.getOwnPropertyDescriptor, h = (e, s, o, n) => {
-  for (var r = n > 1 ? void 0 : n ? B(s, o) : s, l = e.length - 1, p; l >= 0; l--)
-    (p = e[l]) && (r = (n ? p(s, o, r) : p(r)) || r);
-  return n && r && D(s, o, r), r;
-};
-let d = class extends g {
-  constructor() {
-    super(...arguments), this.adapter = new $(), this.subscriptions = [];
-  }
-  createRenderRoot() {
-    return this;
-  }
-  updated(e) {
-    super.updated(e);
-    const s = this.adapter.templateData.size;
-    s ? this.style.flex = String(s) : this.style.removeProperty("flex");
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-range-time-picker", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
-      this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
-    );
-  }
-  render() {
-    super.render();
-    const e = this.adapter.templateData;
-    return m`
-      <gui-range-time-picker
-        .uid=${this.widget.uid}
-        .label=${e.label}
-        .hint=${e.hint}
-        .errors=${e.errors}
-        ?touched=${e.touched}
-        ?required=${e.validator?.required}
-        ?disabled=${e.disabled}
-        ?readonly=${e.readonly}
-        .value=${e.value}
-        .icon=${e.icon}
-        .localeId=${e.lang}
-        .toggleAriaLabel=${e.toggleAriaLabel}
-        .hourAriaLabel=${e.hourAriaLabel}
-        .minuteAriaLabel=${e.minuteAriaLabel}
-        .dayPeriodAriaLabel=${e.dayPeriodAriaLabel}
-        .separator=${e.separator}
-        .removePillAriaLabel=${e.removePillAriaLabel}
-        .startTimeAriaLabel=${e.startTimeAriaLabel}
-        .endTimeAriaLabel=${e.endTimeAriaLabel}
-        .startTimeLabel=${e.startTimeLabel}
-        .endTimeLabel=${e.endTimeLabel}
-        .hourFormat=${e.hourFormat}
-        .minuteStep=${e.minuteStep}
-        .minTime=${e.minTime}
-        .maxTime=${e.maxTime}
-        .disabledRanges=${e.disabledRanges}
-        ?allow-custom-time=${e.allowCustomTime}
-        .height=${e.height}
-        .itemHeight=${e.itemHeight}
-        .minTimeMessage=${e.minTimeMessage}
-        .maxTimeMessage=${e.maxTimeMessage}
-        .rangeOrderMessage=${e.rangeOrderMessage}
-        .disabledRangeMessage=${e.disabledRangeMessage}
-        .noAvailableTimesMessage=${e.noAvailableTimesMessage}
-        @inputError=${this.onInputError}
-        @blur=${() => this.adapter.onBlur()}
-        @change=${this.valueChanged}
-      ></gui-range-time-picker>
-    `;
-  }
-  valueChanged(e) {
-    this.adapter.injectValidationIssues(null), this.adapter.valueChanged(e.detail.value);
-  }
-  onInputError(e) {
-    this.adapter.injectValidationIssues([e.detail.message]);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((e) => e.unsubscribe());
-  }
-};
-h([
-  E({ context: y }),
-  a({ attribute: !1 })
-], d.prototype, "formContext", 2);
-h([
-  P({ context: v })
-], d.prototype, "adapter", 2);
-d = h([
-  b("gui-range-time-picker-input")
-], d);
-export {
-  d as RangeTimePickerElement
-};

package/renderer.element-CNyMn2Lu.js

@@ -1,49 +0,0 @@
-import { DisplayWidgetAdapter as d, formContext as c, displayWidgetContext as l } from "@golemui/lit";
-import { consume as u, provide as m } from "@lit/context";
-import { LitElement as h, html as f } from "lit";
-import { property as b, customElement as g } from "lit/decorators.js";
-import "rxjs";
-var x = Object.defineProperty, v = Object.getOwnPropertyDescriptor, n = (r, e, a, s) => {
-  for (var t = s > 1 ? void 0 : s ? v(e, a) : e, o = r.length - 1, p; o >= 0; o--)
-    (p = r[o]) && (t = (s ? p(e, a, t) : p(t)) || t);
-  return s && t && x(e, a, t), t;
-};
-let i = class extends h {
-  constructor() {
-    super(...arguments), this.adapter = new d(), this.subscriptions = [];
-  }
-  createRenderRoot() {
-    return this;
-  }
-  updated(r) {
-    super.updated(r);
-    const e = this.adapter.templateData.size;
-    e ? this.style.flex = String(e) : this.style.removeProperty("flex");
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-renderer", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
-      this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
-    );
-  }
-  render() {
-    return f`
-      <div class="gui-widget" id=${this.widget.uid}>${this.adapter.templateData.render}</div>
-    `;
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((r) => r.unsubscribe());
-  }
-};
-n([
-  u({ context: c }),
-  b({ attribute: !1 })
-], i.prototype, "formContext", 2);
-n([
-  m({ context: l })
-], i.prototype, "adapter", 2);
-i = n([
-  g("gui-renderer-component")
-], i);
-export {
-  i as RendererElement
-};