@golemui/gui-lit 1.0.3 → 1.1.0

package/date-time-calendar.element-DC4NK0y1.js

@@ -0,0 +1,93 @@
+import { InputWidgetAdapter as l, formContext as m, inputContext as p } from "@golemui/lit";
+import "./date-time-calendar-BzRfkLKU.js";
+import { consume as u, provide as h } from "@lit/context";
+import { LitElement as c, html as $ } from "lit";
+import { property as b, customElement as g } from "lit/decorators.js";
+import "rxjs";
+var v = Object.defineProperty, x = Object.getOwnPropertyDescriptor, d = (e, t, s, r) => {
+  for (var a = r > 1 ? void 0 : r ? x(t, s) : t, n = e.length - 1, o; n >= 0; n--)
+    (o = e[n]) && (a = (r ? o(t, s, a) : o(a)) || a);
+  return r && a && v(t, s, a), a;
+};
+let i = class extends c {
+  constructor() {
+    super(...arguments), this.adapter = new l(), this.subscriptions = [];
+  }
+  createRenderRoot() {
+    return this;
+  }
+  updated(e) {
+    super.updated(e);
+    const t = this.adapter.templateData.size;
+    t ? this.style.flex = String(t) : this.style.removeProperty("flex");
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-date-time-calendar", "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 $`
+      <gui-date-time-calendar
+        .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}
+        .prevMonthIcon=${e.prevMonthIcon}
+        .nextMonthIcon=${e.nextMonthIcon}
+        .prevMonthAriaLabel=${e.prevMonthAriaLabel}
+        .nextMonthAriaLabel=${e.nextMonthAriaLabel}
+        .dayFormat=${e.dayFormat}
+        .weekdayFormat=${e.weekdayFormat}
+        .monthFormat=${e.monthFormat}
+        .minDate=${e.minDate}
+        .maxDate=${e.maxDate}
+        .disabledRanges=${e.disabledRanges}
+        .numberOfMonths=${e.numberOfMonths}
+        .localeId=${e.lang}
+        .hourFormat=${e.hourFormat}
+        .minuteStep=${e.minuteStep}
+        .minTime=${e.minTime}
+        .maxTime=${e.maxTime}
+        .disabledTimeRanges=${e.disabledTimeRanges}
+        ?allow-custom-time=${e.allowCustomTime}
+        .minTimeMessage=${e.minTimeMessage}
+        .maxTimeMessage=${e.maxTimeMessage}
+        .disabledTimeRangeMessage=${e.disabledTimeRangeMessage}
+        .noAvailableTimesMessage=${e.noAvailableTimesMessage}
+        @change=${this.valueChanged}
+        @inputError=${this.onInputError}
+        @blur=${() => this.adapter.onBlur()}
+      ></gui-date-time-calendar>
+    `;
+  }
+  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());
+  }
+};
+d([
+  u({ context: m }),
+  b({ attribute: !1 })
+], i.prototype, "formContext", 2);
+d([
+  h({ context: p })
+], i.prototype, "adapter", 2);
+i = d([
+  g("gui-date-time-calendar-input")
+], i);
+export {
+  i as DateTimeCalendarElement
+};

package/date-time-input-BXxsfuyZ.js

@@ -0,0 +1,214 @@
+import { LitElement as h, nothing as u, html as p } from "lit";
+import { property as i, customElement as m } from "lit/decorators.js";
+import { classMap as c } from "lit/directives/class-map.js";
+import { G as g, b as y, c as v } from "./templates-Dk1jxLwS.js";
+import { G as b, g as D, w as f, z as E, a as S, r as T, b as M } from "./part-templates-Db871PS3.js";
+import { d as x } from "./date-Bj9mI3GU.js";
+var w = Object.defineProperty, C = Object.getOwnPropertyDescriptor, e = (s, r, n, a) => {
+  for (var o = a > 1 ? void 0 : a ? C(r, n) : r, l = s.length - 1, d; l >= 0; l--)
+    (d = s[l]) && (o = (a ? d(r, n, o) : d(o)) || o);
+  return a && o && w(r, n, o), o;
+};
+let t = class extends h {
+  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.hourFormat = void 0, this.minuteStep = 1, this.invalidDateMessage = void 0, this.value = void 0, this.minDate = void 0, this.maxDate = void 0, this.minTime = void 0, this.maxTime = void 0, this.minDateMessage = void 0, this.maxDateMessage = void 0, this.minTimeMessage = void 0, this.maxTimeMessage = void 0, this.inputBlockClass = "gui-date-time-input", this.groups = ["default"], this._parts = new b(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 })),
+      getHourFormat: () => this.localeData.effectiveHourFormat,
+      getDayPeriodLabels: () => this.localeData.dayPeriodLabels
+    }), this.ariaController = new g(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
+        }
+      })
+    });
+  }
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-field");
+  }
+  get localeData() {
+    return D(this.localeId, this.hourFormat, this.minuteStep, !0);
+  }
+  getPartDescriptor(s) {
+    return this.localeData.descriptors[s];
+  }
+  /**
+   * Constrains the date and time axes independently: `minDate`/`maxDate` bound
+   * the day, `minTime`/`maxTime` bound the time-of-day on every allowed day.
+   */
+  boundsError(s, r) {
+    return x(s, this.minDate, this.maxDate, void 0, {
+      minDateMessage: this.minDateMessage,
+      maxDateMessage: this.maxDateMessage
+    }) ?? f(E(r), {
+      minTime: this.minTime,
+      maxTime: this.maxTime,
+      minTimeMessage: this.minTimeMessage,
+      maxTimeMessage: this.maxTimeMessage
+    });
+  }
+  willUpdate(s) {
+    (!this.hasUpdated || s.has("value") || s.has("hourFormat") || s.has("localeId")) && this._parts.setGroupFromISO(
+      "default",
+      this.value ?? "",
+      "dateTime",
+      this.localeData.effectiveHourFormat
+    );
+  }
+  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
+    }, r = {
+      blockClass: this.inputBlockClass,
+      groups: this.groups,
+      formatParts: S(this.localeId, this.localeData.effectiveHourFormat),
+      getDescriptor: (a) => this.getPartDescriptor(a),
+      getDisplayValue: this._parts.getPartDisplay,
+      required: this.required,
+      disabled: this.disabled,
+      partsReadonly: !!this.readOnly
+    }, n = {
+      "gui-widget-icon": !0,
+      [this.icon]: !0
+    };
+    return p`
+      ${this.label ? y(this.uid, s) : u}
+
+      <div class="gui-widget">
+        <div
+          class="gui-widget-input gui-parts gui-parts-ring gui-date-time-input ${this.icon ? "gui-calendar--icon" : ""}"
+          role="group"
+        >
+          ${T("default", r, this._parts)}
+        </div>
+        ${this.icon ? p`<span class=${c(n)} data-icon=${this.icon}></span>` : u}
+      </div>
+
+      ${this.showErrors && this.errors?.length ? v(this.uid, s) : u}
+    `;
+  }
+  validateAndEmit(s) {
+    const { effectiveHourFormat: r, descriptors: n } = this.localeData, { result: a, writeBacks: o } = M(this._parts.values[s] ?? {}, {
+      hourFormat: r,
+      descriptors: n,
+      invalidDateMessage: this.invalidDateMessage
+    });
+    if (this._parts.applyWriteBacks(s, o), a.kind === "incomplete") {
+      this.requestUpdate();
+      return;
+    }
+    if (a.kind === "invalid") {
+      this.dispatchEvent(
+        new CustomEvent("inputError", { detail: { message: a.message }, bubbles: !0 })
+      ), this.requestUpdate();
+      return;
+    }
+    const l = this.boundsError(a.iso, a.instant);
+    if (l) {
+      this.dispatchEvent(
+        new CustomEvent("change", { detail: { value: a.iso }, bubbles: !0 })
+      ), this.dispatchEvent(
+        new CustomEvent("inputError", { detail: { message: l }, 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, attribute: "hour-format" })
+], t.prototype, "hourFormat", 2);
+e([
+  i({ type: Number, attribute: "minute-step" })
+], t.prototype, "minuteStep", 2);
+e([
+  i({ type: String, attribute: "invalid-date-message" })
+], t.prototype, "invalidDateMessage", 2);
+e([
+  i({ type: String })
+], t.prototype, "value", 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-time" })
+], t.prototype, "minTime", 2);
+e([
+  i({ type: String, attribute: "max-time" })
+], t.prototype, "maxTime", 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);
+e([
+  i({ type: String, attribute: "min-time-message" })
+], t.prototype, "minTimeMessage", 2);
+e([
+  i({ type: String, attribute: "max-time-message" })
+], t.prototype, "maxTimeMessage", 2);
+t = e([
+  m("gui-date-time")
+], t);
+typeof customElements < "u" && !customElements.get("gui-date-time") && customElements.define("gui-date-time", t);

package/date-time-picker.element-Dy-8cb-_.js

@@ -0,0 +1,380 @@
+import { InputWidgetAdapter as b, formContext as y, inputContext as $ } from "@golemui/lit";
+import { LitElement as u, html as l, nothing as v } from "lit";
+import { property as a, query as g, customElement as c } from "lit/decorators.js";
+import { classMap as M } from "lit/directives/class-map.js";
+import "./date-time-input-BXxsfuyZ.js";
+import "./date-time-calendar-BzRfkLKU.js";
+import { G as T } from "./popup.controller-eUDxE6jD.js";
+import { t as f, d as x, b as D } from "./date-Bj9mI3GU.js";
+import { p as S, y as w, h as R, z as _ } from "./part-templates-Db871PS3.js";
+import { a as I, b as C, c as A } from "./templates-Dk1jxLwS.js";
+import { consume as E, provide as F } from "@lit/context";
+import "rxjs";
+var O = Object.defineProperty, k = Object.getOwnPropertyDescriptor, i = (e, s, n, r) => {
+  for (var o = r > 1 ? void 0 : r ? k(s, n) : s, d = e.length - 1, m; d >= 0; d--)
+    (m = e[d]) && (o = (r ? m(s, n, o) : m(o)) || o);
+  return r && o && O(s, n, o), o;
+};
+let t = class extends u {
+  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 = 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.minDate = void 0, this.maxDate = void 0, this.disabledRanges = void 0, this.numberOfMonths = void 0, this.hourFormat = void 0, this.minuteStep = void 0, this.minTime = void 0, this.maxTime = void 0, this.disabledTimeRanges = void 0, this.allowCustomTime = !1, this.invalidDateMessage = void 0, this.minDateMessage = void 0, this.maxDateMessage = void 0, this.disabledDateRangeMessage = void 0, this.minTimeMessage = void 0, this.maxTimeMessage = void 0, this.disabledTimeRangeMessage = void 0, this.noAvailableTimesMessage = void 0, this._popup = new T(this, {
+      getInteriorElements: () => [this._dateRef, this._calendarRef],
+      focusRestoreSelector: "gui-date-time input",
+      isDisabled: () => !!this.disabled,
+      clickIntent: (e) => e.closest(".gui-calendar__day-button") || e.closest(".gui-time-list__option") ? "ignore" : e.closest(".gui-date-time-input__part") || e.closest("gui-date-time-calendar") ? "open" : "toggle",
+      keyToggleMode: "toggle"
+    });
+  }
+  createRenderRoot() {
+    return this;
+  }
+  render() {
+    const e = I("datePicker", { icon: this.icon }), s = this._popup.open ? l`<gui-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}
+          .prevMonthIcon=${this.prevMonthIcon}
+          .nextMonthIcon=${this.nextMonthIcon}
+          .prevMonthAriaLabel=${this.prevMonthAriaLabel}
+          .nextMonthAriaLabel=${this.nextMonthAriaLabel}
+          .dayFormat=${this.dayFormat}
+          .weekdayFormat=${this.weekdayFormat}
+          .monthFormat=${this.monthFormat}
+          .minDate=${this.minDate}
+          .maxDate=${this.maxDate}
+          .disabledRanges=${this.disabledRanges}
+          .numberOfMonths=${this.numberOfMonths}
+          .localeId=${this.localeId}
+          .hourFormat=${this.hourFormat}
+          .minuteStep=${this.minuteStep}
+          .minTime=${this.minTime}
+          .maxTime=${this.maxTime}
+          .disabledTimeRanges=${this.disabledTimeRanges}
+          .allowCustomTime=${this.allowCustomTime}
+          .minTimeMessage=${this.minTimeMessage}
+          .maxTimeMessage=${this.maxTimeMessage}
+          .disabledTimeRangeMessage=${this.disabledTimeRangeMessage}
+          .noAvailableTimesMessage=${this.noAvailableTimesMessage}
+          @blur=${this.onCalendarBlur}
+          @change=${this.onCalendarChange}
+        ></gui-date-time-calendar>` : v;
+    return l`
+      ${C(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-date-time
+          id="date-input"
+          class=${M(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}
+          .minTime=${this.minTime}
+          .maxTime=${this.maxTime}
+          .invalidDateMessage=${this.invalidDateMessage}
+          .minTimeMessage=${this.minTimeMessage}
+          .maxTimeMessage=${this.maxTimeMessage}
+          @blur=${this.onDateBlur}
+          @focus=${this._popup.show}
+          @change=${this.onDateChange}
+        ></gui-date-time>
+        <span class="gui-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>
+
+        ${s}
+      </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), e.detail.value && e.detail.commit && this._popup.close();
+  }
+  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) return null;
+    const s = S(e);
+    if (isNaN(s.getTime())) return null;
+    const n = f(s), r = x(n, this.minDate, this.maxDate, this.disabledRanges, {
+      minDateMessage: this.minDateMessage,
+      maxDateMessage: this.maxDateMessage,
+      disabledDateRangeMessage: this.disabledDateRangeMessage
+    });
+    if (r) return r;
+    const o = w(this.disabledTimeRanges, n);
+    return R(_(s), o) ? this.disabledTimeRangeMessage ?? D : null;
+  }
+  // The calendar's blur already bubbles up to the host, so only close here.
+  onCalendarBlur() {
+    this._popup.close();
+  }
+};
+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: 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: "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: "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-time-ranges" })
+], t.prototype, "disabledTimeRanges", 2);
+i([
+  a({ type: Boolean, attribute: "allow-custom-time" })
+], t.prototype, "allowCustomTime", 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);
+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: "disabled-time-range-message" })
+], t.prototype, "disabledTimeRangeMessage", 2);
+i([
+  a({ type: String, attribute: "no-available-times-message" })
+], t.prototype, "noAvailableTimesMessage", 2);
+i([
+  g("#date-input")
+], t.prototype, "_dateRef", 2);
+i([
+  g("#calendar-input")
+], t.prototype, "_calendarRef", 2);
+t = i([
+  c("gui-date-time-picker")
+], t);
+typeof customElements < "u" && !customElements.get("gui-date-time-picker") && customElements.define("gui-date-time-picker", t);
+var L = Object.defineProperty, P = Object.getOwnPropertyDescriptor, h = (e, s, n, r) => {
+  for (var o = r > 1 ? void 0 : r ? P(s, n) : s, d = e.length - 1, m; d >= 0; d--)
+    (m = e[d]) && (o = (r ? m(s, n, o) : m(o)) || o);
+  return r && o && L(s, n, o), o;
+};
+let p = class extends u {
+  constructor() {
+    super(...arguments), this.adapter = new b(), 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-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 l`
+      <gui-date-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}
+        .prevMonthIcon=${e.prevMonthIcon}
+        .nextMonthIcon=${e.nextMonthIcon}
+        .prevMonthAriaLabel=${e.prevMonthAriaLabel}
+        .nextMonthAriaLabel=${e.nextMonthAriaLabel}
+        .dayFormat=${e.dayFormat}
+        .weekdayFormat=${e.weekdayFormat}
+        .monthFormat=${e.monthFormat}
+        .minDate=${e.minDate}
+        .maxDate=${e.maxDate}
+        .disabledRanges=${e.disabledRanges}
+        .numberOfMonths=${e.numberOfMonths}
+        .hourFormat=${e.hourFormat}
+        .minuteStep=${e.minuteStep}
+        .minTime=${e.minTime}
+        .maxTime=${e.maxTime}
+        .disabledTimeRanges=${e.disabledTimeRanges}
+        ?allow-custom-time=${e.allowCustomTime}
+        .invalidDateMessage=${e.invalidDateMessage}
+        .minDateMessage=${e.minDateMessage}
+        .maxDateMessage=${e.maxDateMessage}
+        .disabledDateRangeMessage=${e.disabledDateRangeMessage}
+        .minTimeMessage=${e.minTimeMessage}
+        .maxTimeMessage=${e.maxTimeMessage}
+        .disabledTimeRangeMessage=${e.disabledTimeRangeMessage}
+        .noAvailableTimesMessage=${e.noAvailableTimesMessage}
+        @inputError=${this.onInputError}
+        @blur=${() => this.adapter.onBlur()}
+        @change=${this.valueChanged}
+      ></gui-date-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 })
+], p.prototype, "formContext", 2);
+h([
+  F({ context: $ })
+], p.prototype, "adapter", 2);
+p = h([
+  c("gui-date-time-picker-input")
+], p);
+export {
+  p as DateTimePickerElement
+};