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

package/date-input-B3yHsn-g.js

@@ -1,204 +0,0 @@
-import { LitElement as u, nothing as p, html as h } from "lit";
-import { property as i, customElement as c } from "lit/decorators.js";
-import { classMap as g } from "lit/directives/class-map.js";
-import { G as y, b as m, c as b } from "./templates-Df7abEkB.js";
-import { n as v, G as D, r as f, q as E, P as A } from "./part-templates-VORbpgs2.js";
-import { a as C, d as S } from "./date-DBuYpvcO.js";
-var w = Object.defineProperty, P = Object.getOwnPropertyDescriptor, e = (s, a, l, r) => {
-  for (var o = r > 1 ? void 0 : r ? P(a, l) : a, d = s.length - 1, n; d >= 0; d--)
-    (n = s[d]) && (o = (r ? n(a, l, o) : n(o)) || o);
-  return r && o && w(a, l, o), o;
-};
-let t = class extends u {
-  constructor() {
-    super(...arguments), this.uid = void 0, this.label = void 0, this.localeId = void 0, this.errors = [], this.showErrors = !0, this.touched = !1, this.required = !1, this.disabled = !1, this.readOnly = !1, this.icon = "", this.hint = void 0, this.dayAriaLabel = void 0, this.monthAriaLabel = void 0, this.yearAriaLabel = void 0, this.value = void 0, this.invalidDateMessage = void 0, this.minDate = void 0, this.maxDate = void 0, this.minDateMessage = void 0, this.maxDateMessage = void 0, this.inputBlockClass = "gui-date-input", this.groups = ["default"], this.partDescriptors = v(), this._parts = new D(this, {
-      blockClass: this.inputBlockClass,
-      groups: this.groups,
-      getDescriptor: (s) => this.getPartDescriptor(s),
-      commitGroup: (s) => this.validateAndEmit(s),
-      isReadonly: () => !!this.readOnly,
-      isDisabled: () => !!this.disabled,
-      onEmptyPartBlur: () => this.dispatchEvent(new CustomEvent("change", { detail: { value: null }, bubbles: !0 }))
-    }), this.ariaController = new y(this, {
-      getTargets: () => this.querySelectorAll(`.${this.inputBlockClass}`),
-      getState: () => ({
-        uid: this.uid,
-        templateData: {
-          hint: this.hint,
-          errors: this.errors,
-          readonly: this.readOnly,
-          disabled: this.disabled,
-          touched: this.touched,
-          required: this.required
-        }
-      })
-    });
-  }
-  createRenderRoot() {
-    return this;
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-field");
-  }
-  getPartDescriptor(s) {
-    return this.partDescriptors[s];
-  }
-  willUpdate(s) {
-    s.has("value") && this._parts.setGroupFromISO("default", this.value ?? "", "date");
-  }
-  render() {
-    const s = {
-      uid: this.uid,
-      label: this.label,
-      errors: this.errors,
-      touched: this.touched,
-      required: this.required,
-      disabled: this.disabled,
-      readonly: this.readOnly,
-      value: this.value,
-      icon: this.icon,
-      hint: this.hint
-    }, a = {
-      blockClass: this.inputBlockClass,
-      groups: this.groups,
-      formatParts: C(this.localeId),
-      getDescriptor: (r) => this.getPartDescriptor(r),
-      getDisplayValue: this._parts.getPartDisplay,
-      getPartAriaLabel: (r, o) => ({
-        day: this.dayAriaLabel,
-        month: this.monthAriaLabel,
-        year: this.yearAriaLabel
-      })[o] ?? A[o],
-      disabled: this.disabled,
-      partsReadonly: !!this.readOnly
-    }, l = {
-      "gui-widget-icon": !0,
-      [this.icon]: !0
-    };
-    return h`
-      ${this.label ? m(this.uid, s, !1, void 0, !1) : p}
-
-      <div class="gui-widget">
-        <div
-          id=${this.uid}
-          class="gui-widget-input gui-parts gui-parts-ring gui-date-input ${this.icon ? "gui-calendar--icon" : ""}"
-          role="group"
-          aria-labelledby=${`${this.uid}_label`}
-        >
-          ${f("default", a, this._parts)}
-        </div>
-        ${this.icon ? h`<span
-              class=${g(l)}
-              data-icon=${this.icon}
-              aria-hidden="true"
-            ></span>` : p}
-      </div>
-
-      ${this.showErrors && this.errors?.length ? b(this.uid, s) : p}
-    `;
-  }
-  validateAndEmit(s) {
-    const { result: a, writeBacks: l } = E(this._parts.values[s] ?? {}, {
-      descriptors: this.partDescriptors,
-      invalidDateMessage: this.invalidDateMessage
-    });
-    if (this._parts.applyWriteBacks(s, l), a.kind === "invalid")
-      this.dispatchEvent(
-        new CustomEvent("inputError", {
-          detail: { message: a.message },
-          bubbles: !0
-        })
-      );
-    else if (a.kind === "valid") {
-      const r = S(a.iso, this.minDate, this.maxDate, void 0, {
-        minDateMessage: this.minDateMessage,
-        maxDateMessage: this.maxDateMessage
-      });
-      if (r) {
-        this.dispatchEvent(
-          new CustomEvent("change", {
-            detail: { value: a.iso },
-            bubbles: !0
-          })
-        ), this.dispatchEvent(
-          new CustomEvent("inputError", {
-            detail: { message: r },
-            bubbles: !0
-          })
-        ), this.requestUpdate();
-        return;
-      }
-      this.value = a.iso, this.dispatchEvent(
-        new CustomEvent("change", {
-          detail: { value: this.value },
-          bubbles: !0
-        })
-      );
-    }
-    this.requestUpdate();
-  }
-};
-e([
-  i({ type: String })
-], t.prototype, "uid", 2);
-e([
-  i({ type: String })
-], t.prototype, "label", 2);
-e([
-  i({ type: String, attribute: "locale-id" })
-], t.prototype, "localeId", 2);
-e([
-  i({ type: Array })
-], t.prototype, "errors", 2);
-e([
-  i({ type: Boolean })
-], t.prototype, "showErrors", 2);
-e([
-  i({ type: Boolean })
-], t.prototype, "touched", 2);
-e([
-  i({ type: Boolean })
-], t.prototype, "required", 2);
-e([
-  i({ type: Boolean })
-], t.prototype, "disabled", 2);
-e([
-  i({ type: Boolean, attribute: "readonly" })
-], t.prototype, "readOnly", 2);
-e([
-  i({ type: String })
-], t.prototype, "icon", 2);
-e([
-  i({ type: String })
-], t.prototype, "hint", 2);
-e([
-  i({ type: String })
-], t.prototype, "dayAriaLabel", 2);
-e([
-  i({ type: String })
-], t.prototype, "monthAriaLabel", 2);
-e([
-  i({ type: String })
-], t.prototype, "yearAriaLabel", 2);
-e([
-  i({ type: String })
-], t.prototype, "value", 2);
-e([
-  i({ type: String, attribute: "invalid-date-message" })
-], t.prototype, "invalidDateMessage", 2);
-e([
-  i({ type: String, attribute: "min-date" })
-], t.prototype, "minDate", 2);
-e([
-  i({ type: String, attribute: "max-date" })
-], t.prototype, "maxDate", 2);
-e([
-  i({ type: String, attribute: "min-date-message" })
-], t.prototype, "minDateMessage", 2);
-e([
-  i({ type: String, attribute: "max-date-message" })
-], t.prototype, "maxDateMessage", 2);
-t = e([
-  c("gui-date")
-], t);
-typeof customElements < "u" && !customElements.get("gui-date") && customElements.define("gui-date", t);

package/date-picker.element-ByZefznr.js

@@ -1,357 +0,0 @@
-import { InputWidgetAdapter as g, formContext as m, inputContext as y } from "@golemui/lit";
-import { LitElement as c, html as h, nothing as $ } from "lit";
-import { property as a, customElement as b } from "lit/decorators.js";
-import { classMap as v } from "lit/directives/class-map.js";
-import "./date-input-B3yHsn-g.js";
-import "./calendar-DleRbmvP.js";
-import { G as M } from "./popup.controller-B33OvX_y.js";
-import { d as f } from "./date-DBuYpvcO.js";
-import { a as A, b as D, c as L } from "./templates-Df7abEkB.js";
-import { consume as x, provide as w } from "@lit/context";
-import "rxjs";
-var _ = Object.defineProperty, C = Object.getOwnPropertyDescriptor, i = (e, r, n, s) => {
-  for (var o = s > 1 ? void 0 : s ? C(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 && _(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 = 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._popup = new M(this, {
-      focusRestoreSelector: "gui-date input",
-      focusPopupSelector: '.gui-calendar__day-button[tabindex="0"]',
-      isDisabled: () => !!this.disabled,
-      clickIntent: (e) => e.closest(".gui-calendar__day-button") ? "ignore" : e.closest(".gui-date-input__part") || e.closest("gui-calendar") ? "open" : "toggle",
-      keyToggleMode: "toggle"
-    }), this.onToggleClick = (e) => {
-      e.stopPropagation(), this._popup.open ? this._popup.close() : this._popup.openAndFocus();
-    };
-  }
-  createRenderRoot() {
-    return this;
-  }
-  render() {
-    const e = A("datePicker", { icon: this.icon }), r = this._popup.open ? h`<gui-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}
-          .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}
-          .numberOfMonths=${this.numberOfMonths}
-          .localeId=${this.localeId}
-          @blur=${this.onCalendarBlur}
-          @change=${this.onCalendarChange}
-        ></gui-calendar>` : $;
-    return h`
-      ${D(
-      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-date
-          id="date-input"
-          class=${v(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}
-          .dayAriaLabel=${this.dayAriaLabel}
-          .monthAriaLabel=${this.monthAriaLabel}
-          .yearAriaLabel=${this.yearAriaLabel}
-          .invalidDateMessage=${this.invalidDateMessage}
-          @blur=${this.onDateBlur}
-          @focus=${this._popup.show}
-          @change=${this.onDateChange}
-        ></gui-date>
-        <button
-          type="button"
-          class="gui-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 ? L(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) {
-    e.stopPropagation(), this.commitValue(e.detail.value), this._popup.close();
-  }
-  commitValue(e) {
-    this.value = e ?? void 0;
-    const r = this.validateBounds(this.value);
-    this.dispatchEvent(
-      new CustomEvent("change", {
-        detail: { value: e ?? null },
-        bubbles: !0,
-        composed: !0
-      })
-    ), r && this.dispatchEvent(
-      new CustomEvent("inputError", {
-        detail: { message: r },
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  validateBounds(e) {
-    return e ? f(e, this.minDate, this.maxDate, this.disabledRanges, {
-      minDateMessage: this.minDateMessage,
-      maxDateMessage: this.maxDateMessage,
-      disabledDateRangeMessage: this.disabledDateRangeMessage
-    }) : null;
-  }
-  onCalendarBlur() {
-    this._popup.closeOnFocusLeave();
-  }
-};
-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, "dayAriaLabel", 2);
-i([
-  a({ type: String })
-], t.prototype, "monthAriaLabel", 2);
-i([
-  a({ type: String })
-], t.prototype, "yearAriaLabel", 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: String })
-], t.prototype, "value", 2);
-i([
-  a({ type: String, attribute: "prev-month-icon" })
-], t.prototype, "prevMonthIcon", 2);
-i([
-  a({ type: String, attribute: "next-month-icon" })
-], t.prototype, "nextMonthIcon", 2);
-i([
-  a({ type: String, attribute: "prev-month-aria-label" })
-], t.prototype, "prevMonthAriaLabel", 2);
-i([
-  a({ type: String, attribute: "next-month-aria-label" })
-], t.prototype, "nextMonthAriaLabel", 2);
-i([
-  a({ type: String, attribute: "select-year-aria-label" })
-], t.prototype, "selectYearAriaLabel", 2);
-i([
-  a({ type: String, attribute: "year-grid-aria-label" })
-], t.prototype, "yearGridAriaLabel", 2);
-i([
-  a({ type: String, attribute: "day-format" })
-], t.prototype, "dayFormat", 2);
-i([
-  a({ type: String, attribute: "weekday-format" })
-], t.prototype, "weekdayFormat", 2);
-i([
-  a({ type: String, attribute: "month-format" })
-], t.prototype, "monthFormat", 2);
-i([
-  a({ type: String, attribute: "min-date" })
-], t.prototype, "minDate", 2);
-i([
-  a({ type: String, attribute: "max-date" })
-], t.prototype, "maxDate", 2);
-i([
-  a({ type: Array, attribute: "disabled-ranges" })
-], t.prototype, "disabledRanges", 2);
-i([
-  a({ type: Number, attribute: "number-of-months" })
-], t.prototype, "numberOfMonths", 2);
-i([
-  a({ type: String, attribute: "invalid-date-message" })
-], t.prototype, "invalidDateMessage", 2);
-i([
-  a({ type: String, attribute: "min-date-message" })
-], t.prototype, "minDateMessage", 2);
-i([
-  a({ type: String, attribute: "max-date-message" })
-], t.prototype, "maxDateMessage", 2);
-i([
-  a({ type: String, attribute: "disabled-date-range-message" })
-], t.prototype, "disabledDateRangeMessage", 2);
-t = i([
-  b("gui-date-picker")
-], t);
-typeof customElements < "u" && !customElements.get("gui-date-picker") && customElements.define("gui-date-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 c {
-  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-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-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}
-        .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-date-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());
-  }
-};
-u([
-  x({ context: m }),
-  a({ attribute: !1 })
-], p.prototype, "formContext", 2);
-u([
-  w({ context: y })
-], p.prototype, "adapter", 2);
-p = u([
-  b("gui-date-picker-input")
-], p);
-export {
-  p as DatePickerElement
-};