@golemui/gui-lit 1.0.2 → 1.1.0

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

@@ -0,0 +1,429 @@
+import { InputWidgetAdapter as v, formContext as y, inputContext as T } from "@golemui/lit";
+import { LitElement as g, html as d, nothing as _ } from "lit";
+import { property as a, query as c, state as b, customElement as $ } from "lit/decorators.js";
+import { classMap as f } from "lit/directives/class-map.js";
+import "./range-time-input-3lhqR1Ku.js";
+import "./time-list-Czo48bZm.js";
+import { G as w } from "./popup.controller-eUDxE6jD.js";
+import { k as I, s as u, t as k } from "./part-templates-Db871PS3.js";
+import { a as L, b as S, c as M } from "./templates-Dk1jxLwS.js";
+import { I as C, a as A, b as x } from "./date-Bj9mI3GU.js";
+import { consume as E, provide as R } from "@lit/context";
+import "rxjs";
+var O = Object.defineProperty, P = Object.getOwnPropertyDescriptor, i = (e, s, o, n) => {
+  for (var r = n > 1 ? void 0 : n ? P(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.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 w(this, {
+      getInteriorElements: () => [this._inputRef, this._panelRef],
+      focusRestoreSelector: "gui-range-time input, gui-range-time button",
+      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();
+    };
+  }
+  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 = I(this._workingIn, this.minuteStep);
+    return e ? { minTime: e, maxTime: this.maxTime } : { minTime: "23:59:59", maxTime: "00:00:00" };
+  }
+  render() {
+    const e = L("rangeTimePicker", { icon: this.icon }), s = this.outListBounds, o = this.startTimeLabel ?? "Start time", n = this.endTimeLabel ?? "End time", r = this._popup.open ? d`<div class="gui-range-time-picker__panel" id="list-panel" role="group">
+          <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>` : _;
+    return d`
+      ${S(this.uid ?? "", {
+      label: this.label,
+      hint: this.hint,
+      required: this.required
+    })}
+
+      <div
+        role="button"
+        tabindex="-1"
+        class="gui-widget"
+        aria-expanded=${this._popup.open}
+        @keyup=${this._popup.onAnchorKeyUp}
+        @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}
+          @blur=${this.onInputBlur}
+          @focus=${this._popup.show}
+          @change=${this.onInputChange}
+          @partsChange=${this.onPartsChange}
+          @pillClick=${this.onPillClick}
+        ></gui-range-time>
+        <span class="gui-range-time-picker__arrow"
+          ><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>
+
+        ${r}
+      </div>
+
+      ${this.showErrors ? M(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 ?? A;
+        }
+      if (k(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: 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([
+  c("#time-input")
+], t.prototype, "_inputRef", 2);
+i([
+  c("#list-panel")
+], t.prototype, "_panelRef", 2);
+i([
+  b()
+], t.prototype, "_workingIn", 2);
+i([
+  b()
+], t.prototype, "_workingOut", 2);
+t = i([
+  $("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 m = class extends g {
+  constructor() {
+    super(...arguments), this.adapter = new v(), 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 d`
+      <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}
+        .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 })
+], m.prototype, "formContext", 2);
+h([
+  R({ context: T })
+], m.prototype, "adapter", 2);
+m = h([
+  $("gui-range-time-picker-input")
+], m);
+export {
+  m as RangeTimePickerElement
+};