@golemui/gui-lit 1.0.2 → 1.1.0

package/range-date-time-picker.element-Cbps6s_G.js

@@ -0,0 +1,412 @@
+import { InputWidgetAdapter as g, formContext as y, inputContext as $ } from "@golemui/lit";
+import { LitElement as m, html as h, nothing as v } from "lit";
+import { property as i, query as b, state as D, customElement as c } from "lit/decorators.js";
+import { classMap as T } from "lit/directives/class-map.js";
+import "./range-date-time-input-B37TUoM3.js";
+import "./range-date-time-calendar-yksWrR7b.js";
+import { G as f } from "./popup.controller-eUDxE6jD.js";
+import { a as M, b as L, c as A } from "./templates-Dk1jxLwS.js";
+import { consume as C, provide as w } from "@lit/context";
+import "rxjs";
+var x = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, a = (e, r, n, s) => {
+  for (var o = s > 1 ? void 0 : s ? _(r, n) : r, l = e.length - 1, d; l >= 0; l--)
+    (d = e[l]) && (o = (s ? d(r, n, o) : d(o)) || o);
+  return s && o && x(r, n, o), o;
+};
+let t = class extends m {
+  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.startDateTimeAriaLabel = void 0, this.endDateTimeAriaLabel = void 0, this.invalidDateMessage = void 0, this.prevMonthIcon = "", this.nextMonthIcon = "", this.prevMonthAriaLabel = void 0, this.nextMonthAriaLabel = void 0, this.dayFormat = void 0, this.weekdayFormat = void 0, this.monthFormat = void 0, this.numberOfMonths = void 0, this.hourFormat = void 0, this.minuteStep = void 0, this.allowCustomTime = !1, this.startTimeLabel = void 0, this.endTimeLabel = void 0, this.minDateTime = void 0, this.maxDateTime = void 0, this.minDateTimeMessage = void 0, this.maxDateTimeMessage = void 0, this.disabledRanges = void 0, this.disabledRangeMessage = void 0, this.noAvailableTimesMessage = void 0, this.dayCountAriaLabel = void 0, this.disabledDayCountAriaLabel = void 0, this._focusDate = void 0, this._popup = new f(this, {
+      getInteriorElements: () => [this._dateRef, this._calendarRef],
+      focusRestoreSelector: "gui-range-date-time input",
+      isDisabled: () => !!this.disabled,
+      clickIntent: (e) => e.closest(".gui-calendar__day-button") || e.closest(".gui-time-list__option") || e.closest("gui-time-picker") ? "ignore" : e.closest(".gui-range-date-time-input__field") || e.closest("gui-range-date-time-calendar") ? "open" : "toggle",
+      keyToggleMode: "openClose",
+      beforeOpen: (e) => {
+        this.querySelector(".gui-pills__dropdown") && e.suppressNextFocusOut(), this.closePillsDropdown();
+      },
+      onOpenChanged: (e) => {
+        e || (this._focusDate = 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);
+  }
+  render() {
+    const e = M("datePicker", { icon: this.icon }), r = this._popup.open ? h`<gui-range-date-time-calendar
+          id="calendar-input"
+          .uid=${this.uid}
+          .hint=${this.hint}
+          ?touched=${this.touched}
+          ?required=${this.required}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readOnly}
+          .value=${this.value}
+          .focusDate=${this._focusDate}
+          .hidePills=${!0}
+          .localeId=${this.localeId}
+          .prevMonthIcon=${this.prevMonthIcon}
+          .nextMonthIcon=${this.nextMonthIcon}
+          .prevMonthAriaLabel=${this.prevMonthAriaLabel}
+          .nextMonthAriaLabel=${this.nextMonthAriaLabel}
+          .dayFormat=${this.dayFormat}
+          .weekdayFormat=${this.weekdayFormat}
+          .monthFormat=${this.monthFormat}
+          .numberOfMonths=${this.numberOfMonths}
+          .hourFormat=${this.hourFormat}
+          .minuteStep=${this.minuteStep}
+          .allowCustomTime=${this.allowCustomTime}
+          .startTimeLabel=${this.startTimeLabel}
+          .endTimeLabel=${this.endTimeLabel}
+          .minDateTime=${this.minDateTime}
+          .maxDateTime=${this.maxDateTime}
+          .minDateTimeMessage=${this.minDateTimeMessage}
+          .maxDateTimeMessage=${this.maxDateTimeMessage}
+          .disabledRanges=${this.disabledRanges}
+          .disabledRangeMessage=${this.disabledRangeMessage}
+          .noAvailableTimesMessage=${this.noAvailableTimesMessage}
+          .dayCountAriaLabel=${this.dayCountAriaLabel}
+          .disabledDayCountAriaLabel=${this.disabledDayCountAriaLabel}
+          @blur=${this.onCalendarBlur}
+          @change=${this.onCalendarChange}
+          @inputError=${this.onCalendarInputError}
+        ></gui-range-date-time-calendar>` : v;
+    return h`
+      ${L(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-date-time
+          id="date-input"
+          class=${T(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}
+          .value=${this.value}
+          .icon=${this.icon}
+          .localeId=${this.localeId}
+          .hourFormat=${this.hourFormat}
+          .minuteStep=${this.minuteStep}
+          .separator=${this.separator}
+          .removePillAriaLabel=${this.removePillAriaLabel}
+          .startDateTimeAriaLabel=${this.startDateTimeAriaLabel}
+          .endDateTimeAriaLabel=${this.endDateTimeAriaLabel}
+          .invalidDateMessage=${this.invalidDateMessage}
+          .minDateTime=${this.minDateTime}
+          .maxDateTime=${this.maxDateTime}
+          .minDateTimeMessage=${this.minDateTimeMessage}
+          .maxDateTimeMessage=${this.maxDateTimeMessage}
+          .disabledRanges=${this.disabledRanges}
+          .disabledRangeMessage=${this.disabledRangeMessage}
+          @blur=${this.onDateBlur}
+          @focus=${this._popup.show}
+          @change=${this.onDateChange}
+          @pillClick=${this.onPillClick}
+        ></gui-range-date-time>
+        <span class="gui-range-date-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 ? A(this.uid ?? "", { errors: this.errors, touched: this.touched }) : ""}
+    `;
+  }
+  onDateChange(e) {
+    e.stopPropagation(), this.commitValue(e.detail.value);
+  }
+  onDateBlur() {
+    this.dispatchEvent(new CustomEvent("blur"));
+  }
+  onCalendarChange(e) {
+    if (!this._popup.open) {
+      e.stopPropagation();
+      return;
+    }
+    e.stopPropagation(), this.commitValue(e.detail.value), this._popup.suppressNextFocusOut(), requestAnimationFrame(() => {
+      if (!this._popup.open) return;
+      this.querySelector(
+        'gui-range-date-time-calendar .gui-calendar__day-button[tabindex="0"]'
+      )?.focus();
+    });
+  }
+  onCalendarInputError(e) {
+    e.stopPropagation(), this.dispatchEvent(
+      new CustomEvent("inputError", {
+        detail: e.detail,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  commitValue(e) {
+    this.value = e ?? void 0, this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: e ?? null },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  onCalendarBlur() {
+    this._popup.close();
+  }
+  onPillClick(e) {
+    this._focusDate = e.detail.range.start, this._popup.show();
+  }
+  closePillsDropdown() {
+    this.querySelector("gui-pills")?.closeDropdown?.();
+  }
+};
+a([
+  i({ type: String })
+], t.prototype, "uid", 2);
+a([
+  i({ type: String })
+], t.prototype, "label", 2);
+a([
+  i({ type: String })
+], t.prototype, "hint", 2);
+a([
+  i({ type: String })
+], t.prototype, "icon", 2);
+a([
+  i({ type: Array })
+], t.prototype, "errors", 2);
+a([
+  i({ type: Boolean })
+], t.prototype, "showErrors", 2);
+a([
+  i({ type: Boolean })
+], t.prototype, "touched", 2);
+a([
+  i({ type: Boolean })
+], t.prototype, "required", 2);
+a([
+  i({ type: Boolean })
+], t.prototype, "disabled", 2);
+a([
+  i({ type: Boolean, attribute: "readonly" })
+], t.prototype, "readOnly", 2);
+a([
+  i({ type: String, attribute: "locale-id" })
+], t.prototype, "localeId", 2);
+a([
+  i({ type: Array })
+], t.prototype, "value", 2);
+a([
+  i({ type: String })
+], t.prototype, "separator", 2);
+a([
+  i({ type: String, attribute: "remove-pill-aria-label" })
+], t.prototype, "removePillAriaLabel", 2);
+a([
+  i({ type: String, attribute: "start-date-time-aria-label" })
+], t.prototype, "startDateTimeAriaLabel", 2);
+a([
+  i({ type: String, attribute: "end-date-time-aria-label" })
+], t.prototype, "endDateTimeAriaLabel", 2);
+a([
+  i({ type: String, attribute: "invalid-date-message" })
+], t.prototype, "invalidDateMessage", 2);
+a([
+  i({ type: String, attribute: "prev-month-icon" })
+], t.prototype, "prevMonthIcon", 2);
+a([
+  i({ type: String, attribute: "next-month-icon" })
+], t.prototype, "nextMonthIcon", 2);
+a([
+  i({ type: String, attribute: "prev-month-aria-label" })
+], t.prototype, "prevMonthAriaLabel", 2);
+a([
+  i({ type: String, attribute: "next-month-aria-label" })
+], t.prototype, "nextMonthAriaLabel", 2);
+a([
+  i({ type: String, attribute: "day-format" })
+], t.prototype, "dayFormat", 2);
+a([
+  i({ type: String, attribute: "weekday-format" })
+], t.prototype, "weekdayFormat", 2);
+a([
+  i({ type: String, attribute: "month-format" })
+], t.prototype, "monthFormat", 2);
+a([
+  i({ type: Number, attribute: "number-of-months" })
+], t.prototype, "numberOfMonths", 2);
+a([
+  i({ type: String, attribute: "hour-format" })
+], t.prototype, "hourFormat", 2);
+a([
+  i({ type: Number, attribute: "minute-step" })
+], t.prototype, "minuteStep", 2);
+a([
+  i({ type: Boolean, attribute: "allow-custom-time" })
+], t.prototype, "allowCustomTime", 2);
+a([
+  i({ type: String, attribute: "start-time-label" })
+], t.prototype, "startTimeLabel", 2);
+a([
+  i({ type: String, attribute: "end-time-label" })
+], t.prototype, "endTimeLabel", 2);
+a([
+  i({ type: String, attribute: "min-date-time" })
+], t.prototype, "minDateTime", 2);
+a([
+  i({ type: String, attribute: "max-date-time" })
+], t.prototype, "maxDateTime", 2);
+a([
+  i({ type: String, attribute: "min-date-time-message" })
+], t.prototype, "minDateTimeMessage", 2);
+a([
+  i({ type: String, attribute: "max-date-time-message" })
+], t.prototype, "maxDateTimeMessage", 2);
+a([
+  i({ type: Array, attribute: "disabled-ranges" })
+], t.prototype, "disabledRanges", 2);
+a([
+  i({ type: String, attribute: "disabled-range-message" })
+], t.prototype, "disabledRangeMessage", 2);
+a([
+  i({ type: String, attribute: "no-available-times-message" })
+], t.prototype, "noAvailableTimesMessage", 2);
+a([
+  i({ type: String, attribute: "day-count-aria-label" })
+], t.prototype, "dayCountAriaLabel", 2);
+a([
+  i({ type: String, attribute: "disabled-day-count-aria-label" })
+], t.prototype, "disabledDayCountAriaLabel", 2);
+a([
+  b("#date-input")
+], t.prototype, "_dateRef", 2);
+a([
+  b("#calendar-input")
+], t.prototype, "_calendarRef", 2);
+a([
+  D()
+], t.prototype, "_focusDate", 2);
+t = a([
+  c("gui-range-date-time-picker")
+], t);
+typeof customElements < "u" && !customElements.get("gui-range-date-time-picker") && customElements.define("gui-range-date-time-picker", t);
+var S = Object.defineProperty, I = Object.getOwnPropertyDescriptor, u = (e, r, n, s) => {
+  for (var o = s > 1 ? void 0 : s ? I(r, n) : r, l = e.length - 1, d; l >= 0; l--)
+    (d = e[l]) && (o = (s ? d(r, n, o) : d(o)) || o);
+  return s && o && S(r, n, o), o;
+};
+let p = class extends m {
+  constructor() {
+    super(...arguments), this.adapter = new g(), this.subscriptions = [];
+  }
+  createRenderRoot() {
+    return this;
+  }
+  updated(e) {
+    super.updated(e);
+    const r = this.adapter.templateData.size;
+    r ? this.style.flex = String(r) : this.style.removeProperty("flex");
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-range-date-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 h`
+      <gui-range-date-time-picker
+        .uid=${this.widget.uid}
+        .label=${e.label}
+        .hint=${e.hint}
+        .icon=${e.icon}
+        .errors=${e.errors}
+        ?touched=${e.touched}
+        ?required=${e.validator?.required}
+        ?disabled=${e.disabled}
+        ?readonly=${e.readonly}
+        .value=${e.value}
+        .separator=${e.separator}
+        .removePillAriaLabel=${e.removePillAriaLabel}
+        .startDateTimeAriaLabel=${e.startDateTimeAriaLabel}
+        .endDateTimeAriaLabel=${e.endDateTimeAriaLabel}
+        .invalidDateMessage=${e.invalidDateMessage}
+        .prevMonthIcon=${e.prevMonthIcon}
+        .nextMonthIcon=${e.nextMonthIcon}
+        .prevMonthAriaLabel=${e.prevMonthAriaLabel}
+        .nextMonthAriaLabel=${e.nextMonthAriaLabel}
+        .dayFormat=${e.dayFormat}
+        .weekdayFormat=${e.weekdayFormat}
+        .monthFormat=${e.monthFormat}
+        .numberOfMonths=${e.numberOfMonths}
+        .localeId=${e.lang}
+        .hourFormat=${e.hourFormat}
+        .minuteStep=${e.minuteStep}
+        ?allow-custom-time=${e.allowCustomTime}
+        .startTimeLabel=${e.startTimeLabel}
+        .endTimeLabel=${e.endTimeLabel}
+        .minDateTime=${e.minDateTime}
+        .maxDateTime=${e.maxDateTime}
+        .disabledRanges=${e.disabledRanges}
+        .minDateTimeMessage=${e.minDateTimeMessage}
+        .maxDateTimeMessage=${e.maxDateTimeMessage}
+        .disabledRangeMessage=${e.disabledRangeMessage}
+        .noAvailableTimesMessage=${e.noAvailableTimesMessage}
+        .dayCountAriaLabel=${e.dayCountAriaLabel}
+        .disabledDayCountAriaLabel=${e.disabledDayCountAriaLabel}
+        @change=${this.valueChanged}
+        @inputError=${this.onInputError}
+        @blur=${() => this.adapter.onBlur()}
+      ></gui-range-date-time-picker>
+    `;
+  }
+  valueChanged(e) {
+    this.adapter.injectValidationIssues(null), this.adapter.valueChanged(e.detail.value);
+  }
+  onInputError(e) {
+    this.adapter.injectValidationIssues([e.detail.message]), this.adapter.onBlur();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((e) => e.unsubscribe());
+  }
+};
+u([
+  C({ context: y }),
+  i({ attribute: !1 })
+], p.prototype, "formContext", 2);
+u([
+  w({ context: $ })
+], p.prototype, "adapter", 2);
+p = u([
+  c("gui-range-date-time-picker-input")
+], p);
+export {
+  p as RangeDateTimePickerElement
+};

package/range-selection-CU3hxLJE.js

@@ -0,0 +1,25 @@
+function o() {
+  return { anchor: null, hover: null, selecting: !1 };
+}
+function i(r, e) {
+  switch (e.type) {
+    case "pick": {
+      if (!r.anchor)
+        return { state: { anchor: e.date, hover: r.hover, selecting: !0 } };
+      let n = r.anchor, c = e.date;
+      return e.date < n && (n = e.date, c = r.anchor), { state: o(), commit: { start: n, end: c } };
+    }
+    case "hover":
+      return r.selecting ? { state: { ...r, hover: e.date } } : { state: r };
+    case "reset":
+      return { state: o() };
+  }
+}
+function h(r) {
+  return !r.selecting || !r.hover || !r.anchor ? null : r.hover.getTime() > r.anchor.getTime() ? { start: r.anchor, end: r.hover } : { start: r.hover, end: r.anchor };
+}
+export {
+  o as i,
+  i as r,
+  h as s
+};