@golemui/gui-lit 1.0.3 → 1.1.1-rc.0

package/range-date-picker.element-DWRHiAoC.js

@@ -0,0 +1,434 @@
+import { InputWidgetAdapter as m, formContext as y, inputContext as v } from "@golemui/lit";
+import { LitElement as c, html as h, nothing as $ } from "lit";
+import { property as i, query as D, state as g, customElement as b } from "lit/decorators.js";
+import { classMap as A } from "lit/directives/class-map.js";
+import "./range-date-input-Br7XqQPK.js";
+import "./range-calendar-DO_woqcF.js";
+import { G as f } from "./popup.controller-B33OvX_y.js";
+import { r as L, D as M, d as _ } from "./date-DBuYpvcO.js";
+import { a as w, b as x, c as C } from "./templates-Dmr34nwp.js";
+import { consume as R, provide as S } from "@lit/context";
+import "rxjs";
+var E = Object.defineProperty, I = Object.getOwnPropertyDescriptor, a = (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 && E(r, n, o), o;
+};
+let t = class extends c {
+  constructor() {
+    super(...arguments), this.uid = void 0, this.label = void 0, this.hint = void 0, this.icon = "", this.toggleAriaLabel = void 0, this.dayAriaLabel = void 0, this.monthAriaLabel = void 0, this.yearAriaLabel = 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.startDateAriaLabel = void 0, this.endDateAriaLabel = void 0, this.prevMonthIcon = "", this.nextMonthIcon = "", this.prevMonthAriaLabel = void 0, this.nextMonthAriaLabel = void 0, this.selectYearAriaLabel = void 0, this.yearGridAriaLabel = void 0, this.dayFormat = void 0, this.weekdayFormat = void 0, this.monthFormat = void 0, this.minDate = void 0, this.maxDate = void 0, this.disabledRanges = void 0, this.numberOfMonths = void 0, this.invalidDateMessage = void 0, this.minDateMessage = void 0, this.maxDateMessage = void 0, this.disabledDateRangeMessage = void 0, this._focusDate = void 0, this._invalidRange = null, this._popup = new f(this, {
+      focusRestoreSelector: "gui-range-date input",
+      focusPopupSelector: '.gui-calendar__day-button[tabindex="0"]',
+      isDisabled: () => !!this.disabled,
+      clickIntent: (e) => e.closest(".gui-range-date-input__part") || e.closest("gui-range-calendar") ? "open" : "toggle",
+      keyToggleMode: "openClose",
+      beforeOpen: (e) => {
+        this.querySelector(".gui-pills__dropdown") && e.suppressNextFocusOut(), this.closePillsDropdown();
+      }
+    }), 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);
+  }
+  render() {
+    const e = w("datePicker", { icon: this.icon }), r = this._popup.open ? h`<gui-range-calendar
+          id=${`${this.uid}_popup`}
+          role="dialog"
+          aria-label=${this.label ?? "Calendar"}
+          .uid=${this.uid}
+          .hint=${this.hint}
+          ?touched=${this.touched}
+          ?required=${this.required}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readOnly}
+          .value=${this.value}
+          .focusDate=${this._focusDate}
+          .prevMonthIcon=${this.prevMonthIcon}
+          .nextMonthIcon=${this.nextMonthIcon}
+          .prevMonthAriaLabel=${this.prevMonthAriaLabel}
+          .nextMonthAriaLabel=${this.nextMonthAriaLabel}
+          .selectYearAriaLabel=${this.selectYearAriaLabel}
+          .yearGridAriaLabel=${this.yearGridAriaLabel}
+          .dayFormat=${this.dayFormat}
+          .weekdayFormat=${this.weekdayFormat}
+          .monthFormat=${this.monthFormat}
+          .minDate=${this.minDate}
+          .maxDate=${this.maxDate}
+          .disabledRanges=${this.disabledRanges}
+          .disabledDateRangeMessage=${this.disabledDateRangeMessage}
+          .numberOfMonths=${this.numberOfMonths}
+          .localeId=${this.localeId}
+          .hidePills=${!0}
+          .invalidRange=${this._invalidRange}
+          @blur=${this.onCalendarBlur}
+          @change=${this.onCalendarChange}
+          @inputError=${this.onCalendarInputError}
+        ></gui-range-calendar>` : $;
+    return h`
+      ${x(
+      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-date
+          id="date-input"
+          class=${A(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}
+          .separator=${this.separator}
+          .removePillAriaLabel=${this.removePillAriaLabel}
+          .startDateAriaLabel=${this.startDateAriaLabel}
+          .endDateAriaLabel=${this.endDateAriaLabel}
+          .dayAriaLabel=${this.dayAriaLabel}
+          .monthAriaLabel=${this.monthAriaLabel}
+          .yearAriaLabel=${this.yearAriaLabel}
+          .invalidDateMessage=${this.invalidDateMessage}
+          @blur=${this.onDateBlur}
+          @focus=${this._popup.show}
+          @change=${this.onDateChange}
+          @pillClick=${this.onPillClick}
+        ></gui-range-date>
+        <button
+          type="button"
+          class="gui-range-date-picker__arrow"
+          aria-label=${this.toggleAriaLabel ?? "Show calendar"}
+          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 ? C(this.uid ?? "", { errors: this.errors, touched: this.touched }) : ""}
+    `;
+  }
+  onDateChange(e) {
+    e.stopPropagation();
+    const r = e.detail.value;
+    for (const n of r ?? []) {
+      const s = this.rangeError(n);
+      if (s) {
+        this.rejectTypedRange(n, s);
+        return;
+      }
+    }
+    this.commitValue(r);
+  }
+  /** The message for the first constraint a range violates, or null when valid. */
+  rangeError(e) {
+    const r = e.start, n = e.end ?? e.start;
+    if (L(r, n, this.disabledRanges))
+      return this.disabledDateRangeMessage ?? M;
+    const s = {
+      minDateMessage: this.minDateMessage,
+      maxDateMessage: this.maxDateMessage
+    };
+    for (const o of [r, n]) {
+      const l = _(o, this.minDate, this.maxDate, void 0, s);
+      if (l) return l;
+    }
+    return null;
+  }
+  rejectTypedRange(e, r) {
+    const n = e.start, s = e.end ?? e.start;
+    this._invalidRange = { start: n, end: s };
+    const o = this._dateRef;
+    o && (o.value = this.value ?? [], o.showRange(n, s)), this.dispatchEvent(
+      new CustomEvent("inputError", {
+        detail: { message: r },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  onDateBlur() {
+    this.dispatchEvent(new CustomEvent("blur"));
+  }
+  onCalendarChange(e) {
+    e.stopPropagation(), this._dateRef?.clearRangeInputs(), this.commitValue(e.detail.value);
+  }
+  onCalendarInputError(e) {
+    const r = e.detail?.range;
+    r && (this._invalidRange = r, this._dateRef?.showRange(r.start, r.end));
+  }
+  commitValue(e) {
+    this.value = e ?? void 0, this._invalidRange = null, this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: e ?? null },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  onCalendarBlur() {
+    this._popup.closeOnFocusLeave();
+  }
+  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: String, attribute: "toggle-aria-label" })
+], t.prototype, "toggleAriaLabel", 2);
+a([
+  i({ type: String })
+], t.prototype, "dayAriaLabel", 2);
+a([
+  i({ type: String })
+], t.prototype, "monthAriaLabel", 2);
+a([
+  i({ type: String })
+], t.prototype, "yearAriaLabel", 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-aria-label" })
+], t.prototype, "startDateAriaLabel", 2);
+a([
+  i({ type: String, attribute: "end-date-aria-label" })
+], t.prototype, "endDateAriaLabel", 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: "select-year-aria-label" })
+], t.prototype, "selectYearAriaLabel", 2);
+a([
+  i({ type: String, attribute: "year-grid-aria-label" })
+], t.prototype, "yearGridAriaLabel", 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: String, attribute: "min-date" })
+], t.prototype, "minDate", 2);
+a([
+  i({ type: String, attribute: "max-date" })
+], t.prototype, "maxDate", 2);
+a([
+  i({ type: Array, attribute: "disabled-ranges" })
+], t.prototype, "disabledRanges", 2);
+a([
+  i({ type: Number, attribute: "number-of-months" })
+], t.prototype, "numberOfMonths", 2);
+a([
+  i({ type: String, attribute: "invalid-date-message" })
+], t.prototype, "invalidDateMessage", 2);
+a([
+  i({ type: String, attribute: "min-date-message" })
+], t.prototype, "minDateMessage", 2);
+a([
+  i({ type: String, attribute: "max-date-message" })
+], t.prototype, "maxDateMessage", 2);
+a([
+  i({ type: String, attribute: "disabled-date-range-message" })
+], t.prototype, "disabledDateRangeMessage", 2);
+a([
+  D("#date-input")
+], t.prototype, "_dateRef", 2);
+a([
+  g()
+], t.prototype, "_focusDate", 2);
+a([
+  g()
+], t.prototype, "_invalidRange", 2);
+t = a([
+  b("gui-range-date-picker")
+], t);
+typeof customElements < "u" && !customElements.get("gui-range-date-picker") && customElements.define("gui-range-date-picker", t);
+var P = Object.defineProperty, k = Object.getOwnPropertyDescriptor, u = (e, r, n, s) => {
+  for (var o = s > 1 ? void 0 : s ? k(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 && P(r, n, o), o;
+};
+let p = class extends c {
+  constructor() {
+    super(...arguments), this.adapter = new m(), 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-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-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}
+        .dayAriaLabel=${e.dayAriaLabel}
+        .monthAriaLabel=${e.monthAriaLabel}
+        .yearAriaLabel=${e.yearAriaLabel}
+        .separator=${e.separator}
+        .removePillAriaLabel=${e.removePillAriaLabel}
+        .startDateAriaLabel=${e.startDateAriaLabel}
+        .endDateAriaLabel=${e.endDateAriaLabel}
+        .prevMonthIcon=${e.prevMonthIcon}
+        .nextMonthIcon=${e.nextMonthIcon}
+        .prevMonthAriaLabel=${e.prevMonthAriaLabel}
+        .nextMonthAriaLabel=${e.nextMonthAriaLabel}
+        .selectYearAriaLabel=${e.selectYearAriaLabel}
+        .yearGridAriaLabel=${e.yearGridAriaLabel}
+        .dayFormat=${e.dayFormat}
+        .weekdayFormat=${e.weekdayFormat}
+        .monthFormat=${e.monthFormat}
+        .minDate=${e.minDate}
+        .maxDate=${e.maxDate}
+        .disabledRanges=${e.disabledRanges}
+        .numberOfMonths=${e.numberOfMonths}
+        .invalidDateMessage=${e.invalidDateMessage}
+        .minDateMessage=${e.minDateMessage}
+        .maxDateMessage=${e.maxDateMessage}
+        .disabledDateRangeMessage=${e.disabledDateRangeMessage}
+        @inputError=${this.onInputError}
+        @blur=${() => this.adapter.onBlur()}
+        @change=${this.valueChanged}
+      ></gui-range-date-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([
+  R({ context: y }),
+  i({ attribute: !1 })
+], p.prototype, "formContext", 2);
+u([
+  S({ context: v })
+], p.prototype, "adapter", 2);
+p = u([
+  b("gui-range-date-picker-input")
+], p);
+export {
+  p as RangeDatePickerElement
+};