@golemui/gui-lit 1.1.0 → 1.1.1-rc.1

package/{date-Bj9mI3GU.js → date-DBuYpvcO.js}

@@ -709,7 +709,7 @@ const l = {
   "zh-Hant-HK": { firstDay: 7, weekend: [6, 7], minimalDays: 1 },
   "zh-Hant-MO": { firstDay: 7, weekend: [6, 7], minimalDays: 1 },
   zu: { firstDay: 7, weekend: [6, 7], minimalDays: 1 }
-}, M = "Invalid date: day is greater than the maximum valid day for the month and year.", k = "Invalid date: date is before the minimum allowed date.", w = "Invalid date: date is after the maximum allowed date.", o = "Invalid date: date is within a disabled range.", I = "Invalid time: time is before the minimum allowed time.", S = "Invalid time: time is after the maximum allowed time.", E = "Invalid range: end time must be after start time.", h = "Invalid time: time is within a disabled range.", b = "Invalid date-time: date-time is before the minimum allowed date-time.", L = "Invalid date-time: date-time is after the maximum allowed date-time.";
+}, A = "Invalid date: day is greater than the maximum valid day for the month and year.", k = "Invalid date: date is before the minimum allowed date.", w = "Invalid date: date is after the maximum allowed date.", o = "Invalid date: date is within a disabled range.", I = "Invalid time: time is before the minimum allowed time.", S = "Invalid time: time is after the maximum allowed time.", h = "Invalid range: end time must be after start time.", E = "Invalid time: time is within a disabled range.", b = "Invalid date-time: date-time is before the minimum allowed date-time.", L = "Invalid date-time: date-time is after the maximum allowed date-time.";
 function r(e) {
   const a = e.getFullYear(), n = String(e.getMonth() + 1).padStart(2, "0"), i = String(e.getDate()).padStart(2, "0");
   return `${a}-${n}-${i}`;
@@ -729,11 +729,11 @@ function d(e, a, n, i) {
     }
   return !1;
 }
-function G(e, a, n, i, s) {
+function T(e, a, n, i, s) {
   const m = e.split("T")[0];
   return a && m < a.split("T")[0] ? s?.minDateMessage ?? k : n && m > n.split("T")[0] ? s?.maxDateMessage ?? w : d(m, void 0, void 0, i) ? s?.disabledDateRangeMessage ?? o : null;
 }
-function T(e, a, n, i, s) {
+function G(e, a, n, i, s) {
   const m = t(e), D = t(a);
   if (isNaN(m.getTime()) || isNaN(D.getTime())) return !1;
   const y = new Date(m);
@@ -777,7 +777,13 @@ function v(e) {
     return s.setDate(n.getDate() + i), a.format(s);
   });
 }
-function B(e, a, n) {
+function B(e, a) {
+  return new Intl.DateTimeFormat(e, { month: "long", year: "numeric" }).format(a);
+}
+function R(e, a) {
+  return new Intl.DateTimeFormat(e, { dateStyle: "full" }).format(a);
+}
+function F(e, a, n) {
   for (let i = 0; i < n; i++) {
     const s = new Date(a.getFullYear(), a.getMonth() + i, 1);
     if (e.getMonth() === s.getMonth() && e.getFullYear() === s.getFullYear())
@@ -785,18 +791,18 @@ function B(e, a, n) {
   }
   return !1;
 }
-function R(e, a, n = "long") {
+function H(e, a, n = "long") {
   return new Intl.DateTimeFormat(e, { month: n, year: "numeric" }).formatToParts(a).filter((s) => s.type === "month" || s.type === "year");
 }
-function H(e, a) {
+function _(e, a) {
   const n = e || "en-US", m = new Intl.DateTimeFormat(n, { day: "numeric" }).formatToParts(a).find((D) => D.type === "day");
   return m ? m.value : a.getDate().toString();
 }
-function A(e, a) {
+function M(e, a) {
   const n = r(e), i = r(a);
   return n === i ? { start: n } : { start: n, end: i };
 }
-function _(e) {
+function z(e) {
   return e.length ? e.map((i) => ({
     start: t(i.start).getTime(),
     end: t(i.end ?? i.start).getTime()
@@ -811,31 +817,33 @@ function _(e) {
       return [...i, s];
     },
     []
-  ).map((i) => A(new Date(i.start), new Date(i.end))) : [];
+  ).map((i) => M(new Date(i.start), new Date(i.end))) : [];
 }
 export {
   o as D,
   I,
-  S as a,
-  h as b,
-  A as c,
-  G as d,
+  N as a,
+  S as b,
+  M as c,
+  T as d,
   E as e,
-  C as f,
-  N as g,
-  H as h,
+  h as f,
+  R as g,
+  C as h,
   d as i,
-  B as j,
-  v as k,
-  R as l,
-  _ as m,
-  u as n,
-  b as o,
+  _ as j,
+  F as k,
+  B as l,
+  z as m,
+  v as n,
+  H as o,
   t as p,
-  L as q,
-  T as r,
-  p as s,
+  u as q,
+  G as r,
+  b as s,
   r as t,
-  M as u,
-  g as w
+  L as u,
+  p as v,
+  g as w,
+  A as x
 };

package/{date-input-cJDkNnVw.js → date-input-DLiMreSS.js}

@@ -1,25 +1,25 @@
 import { LitElement as u, nothing as p, html as h } from "lit";
-import { property as s, customElement as c } from "lit/decorators.js";
+import { property as i, customElement as c } from "lit/decorators.js";
 import { classMap as g } from "lit/directives/class-map.js";
-import { G as m, b as y, c as v } from "./templates-Dk1jxLwS.js";
-import { n as b, G as D, r as f, q as E } from "./part-templates-Db871PS3.js";
-import { g as C, d as w } from "./date-Bj9mI3GU.js";
-var M = Object.defineProperty, P = Object.getOwnPropertyDescriptor, e = (i, a, o, r) => {
-  for (var l = r > 1 ? void 0 : r ? P(a, o) : a, n = i.length - 1, d; n >= 0; n--)
-    (d = i[n]) && (l = (r ? d(a, o, l) : d(l)) || l);
-  return r && l && M(a, o, l), l;
+import { G as y, b as m, c as b } from "./templates-Dmr34nwp.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.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 = b(), this._parts = new D(this, {
+    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: (i) => this.getPartDescriptor(i),
-      commitGroup: (i) => this.validateAndEmit(i),
+      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 m(this, {
+    }), this.ariaController = new y(this, {
       getTargets: () => this.querySelectorAll(`.${this.inputBlockClass}`),
       getState: () => ({
         uid: this.uid,
@@ -28,7 +28,8 @@ let t = class extends u {
           errors: this.errors,
           readonly: this.readOnly,
           disabled: this.disabled,
-          touched: this.touched
+          touched: this.touched,
+          required: this.required
         }
       })
     });
@@ -39,14 +40,14 @@ let t = class extends u {
   connectedCallback() {
     super.connectedCallback(), this.classList.add("gui-field");
   }
-  getPartDescriptor(i) {
-    return this.partDescriptors[i];
+  getPartDescriptor(s) {
+    return this.partDescriptors[s];
   }
-  willUpdate(i) {
-    i.has("value") && this._parts.setGroupFromISO("default", this.value ?? "", "date");
+  willUpdate(s) {
+    s.has("value") && this._parts.setGroupFromISO("default", this.value ?? "", "date");
   }
   render() {
-    const i = {
+    const s = {
       uid: this.uid,
       label: this.label,
       errors: this.errors,
@@ -63,35 +64,45 @@ let t = class extends u {
       formatParts: C(this.localeId),
       getDescriptor: (r) => this.getPartDescriptor(r),
       getDisplayValue: this._parts.getPartDisplay,
-      required: this.required,
+      getPartAriaLabel: (r, o) => ({
+        day: this.dayAriaLabel,
+        month: this.monthAriaLabel,
+        year: this.yearAriaLabel
+      })[o] ?? A[o],
       disabled: this.disabled,
       partsReadonly: !!this.readOnly
-    }, o = {
+    }, l = {
       "gui-widget-icon": !0,
       [this.icon]: !0
     };
     return h`
-      ${this.label ? y(this.uid, i) : p}
+      ${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(o)} data-icon=${this.icon}></span>` : p}
+        ${this.icon ? h`<span
+              class=${g(l)}
+              data-icon=${this.icon}
+              aria-hidden="true"
+            ></span>` : p}
       </div>
 
-      ${this.showErrors && this.errors?.length ? v(this.uid, i) : p}
+      ${this.showErrors && this.errors?.length ? b(this.uid, s) : p}
     `;
   }
-  validateAndEmit(i) {
-    const { result: a, writeBacks: o } = E(this._parts.values[i] ?? {}, {
+  validateAndEmit(s) {
+    const { result: a, writeBacks: l } = E(this._parts.values[s] ?? {}, {
       descriptors: this.partDescriptors,
       invalidDateMessage: this.invalidDateMessage
     });
-    if (this._parts.applyWriteBacks(i, o), a.kind === "invalid")
+    if (this._parts.applyWriteBacks(s, l), a.kind === "invalid")
       this.dispatchEvent(
         new CustomEvent("inputError", {
           detail: { message: a.message },
@@ -99,7 +110,7 @@ let t = class extends u {
         })
       );
     else if (a.kind === "valid") {
-      const r = w(a.iso, this.minDate, this.maxDate, void 0, {
+      const r = S(a.iso, this.minDate, this.maxDate, void 0, {
         minDateMessage: this.minDateMessage,
         maxDateMessage: this.maxDateMessage
       });
@@ -128,55 +139,64 @@ let t = class extends u {
   }
 };
 e([
-  s({ type: String })
+  i({ type: String })
 ], t.prototype, "uid", 2);
 e([
-  s({ type: String })
+  i({ type: String })
 ], t.prototype, "label", 2);
 e([
-  s({ type: String, attribute: "locale-id" })
+  i({ type: String, attribute: "locale-id" })
 ], t.prototype, "localeId", 2);
 e([
-  s({ type: Array })
+  i({ type: Array })
 ], t.prototype, "errors", 2);
 e([
-  s({ type: Boolean })
+  i({ type: Boolean })
 ], t.prototype, "showErrors", 2);
 e([
-  s({ type: Boolean })
+  i({ type: Boolean })
 ], t.prototype, "touched", 2);
 e([
-  s({ type: Boolean })
+  i({ type: Boolean })
 ], t.prototype, "required", 2);
 e([
-  s({ type: Boolean })
+  i({ type: Boolean })
 ], t.prototype, "disabled", 2);
 e([
-  s({ type: Boolean, attribute: "readonly" })
+  i({ type: Boolean, attribute: "readonly" })
 ], t.prototype, "readOnly", 2);
 e([
-  s({ type: String })
+  i({ type: String })
 ], t.prototype, "icon", 2);
 e([
-  s({ type: String })
+  i({ type: String })
 ], t.prototype, "hint", 2);
 e([
-  s({ type: String })
+  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([
-  s({ type: String, attribute: "invalid-date-message" })
+  i({ type: String, attribute: "invalid-date-message" })
 ], t.prototype, "invalidDateMessage", 2);
 e([
-  s({ type: String, attribute: "min-date" })
+  i({ type: String, attribute: "min-date" })
 ], t.prototype, "minDate", 2);
 e([
-  s({ type: String, attribute: "max-date" })
+  i({ type: String, attribute: "max-date" })
 ], t.prototype, "maxDate", 2);
 e([
-  s({ type: String, attribute: "min-date-message" })
+  i({ type: String, attribute: "min-date-message" })
 ], t.prototype, "minDateMessage", 2);
 e([
-  s({ type: String, attribute: "max-date-message" })
+  i({ type: String, attribute: "max-date-message" })
 ], t.prototype, "maxDateMessage", 2);
 t = e([
   c("gui-date")

package/date-picker.element-DeUQtbLg.js

@@ -0,0 +1,357 @@
+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-DLiMreSS.js";
+import "./calendar-D31xNsxx.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-Dmr34nwp.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
+};