@golemui/gui-lit 0.0.2 → 0.12.0

package/README.md

@@ -1,7 +1,20 @@
-# gui-lit
+# @golemui/gui-lit
 
-This library was generated with [Nx](https://nx.dev).
+[Golem UI](https://golemui.com): the declarative form engine.
 
-## Building
+## Install
 
-Run `nx build gui-lit` to build the library.
+```bash
+npm install @golemui/gui-lit
+```
+
+## Documentation
+
+- Website: https://golemui.com
+- Repository: https://github.com/golemui/golemui
+- Source: https://github.com/golemui/golemui/tree/main/libs/gui/lit
+- Issues: https://github.com/golemui/golemui/issues
+
+## License
+
+MIT

package/{accordion.element-D1RfC2ew.js → accordion.element-81uTv6Ms.js}

@@ -1,23 +1,28 @@
 import * as d from "@golemui/lit";
 import { consume as u, provide as h } from "@lit/context";
-import { LitElement as m, html as r, nothing as l } from "lit";
-import { property as g, customElement as f } from "lit/decorators.js";
-import { repeat as v } from "lit-html/directives/repeat.js";
+import { LitElement as g, html as r, nothing as l } from "lit";
+import { property as m, customElement as v } from "lit/decorators.js";
+import { repeat as f } from "lit-html/directives/repeat.js";
 import { classMap as b } from "lit/directives/class-map.js";
-var _ = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, p = (t, e, i, a) => {
-  for (var s = a > 1 ? void 0 : a ? $(e, i) : e, c = t.length - 1, n; c >= 0; c--)
-    (n = t[c]) && (s = (a ? n(e, i, s) : n(s)) || s);
-  return a && s && _(e, i, s), s;
+var w = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, p = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? _(e, i) : e, n = t.length - 1, c; n >= 0; n--)
+    (c = t[n]) && (s = (a ? c(e, i, s) : c(s)) || s);
+  return a && s && w(e, i, s), s;
 };
-let o = class extends m {
+let o = class extends g {
   constructor() {
     super(...arguments), this.activeSections = {}, this.adapter = new d.LayoutWidgetAdapter(), this.subscriptions = [];
   }
   createRenderRoot() {
     return this;
   }
+  updated(t) {
+    super.updated(t);
+    const e = this.adapter.templateData.size;
+    e ? this.style.flex = String(e) : this.style.removeProperty("flex");
+  }
   connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-accordion");
+    super.connectedCallback(), this.classList.add("gui-accordion", "gui-field");
     const t = this.widget.props;
     this.adapter.context = this.formContext, this.adapter.init(this.widget), this.activeSections = t.defaultOpen ?? {}, this.subscriptions.push(
       this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
@@ -31,15 +36,10 @@ let o = class extends m {
   getChild(t) {
     return this.widget.children.find((e) => e.uid === t);
   }
-  updated(t) {
-    super.updated(t);
-    const e = this.adapter.templateData.size;
-    e ? this.style.flex = String(e) : this.style.removeProperty("flex");
-  }
   render() {
     return this.adapter.templateData ? r`
       <div class="gui-widget" id=${this.widget.uid}>
-        ${this.adapter.templateData.sections ? v(
+        ${this.adapter.templateData.sections ? f(
       this.adapter.templateData.sections,
       (t) => t.uid,
       (t) => {
@@ -55,6 +55,7 @@ let o = class extends m {
         return r`<div class="gui-accordion__section">
                   <button
                     type="button"
+                    tabindex="0"
                     class=${b({
           active: this.activeSections[t.uid]
         })}
@@ -63,7 +64,17 @@ let o = class extends m {
                     aria-expanded=${this.activeSections[t.uid] ? "true" : "false"}
                     @click=${() => this.onClickButton(t.uid)}
                   >
-                    ${t.label}<span class="gui-accordion__icon"></span>
+                    ${t.label}<span class="gui-accordion__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>
                   </button>
 
                   ${e}
@@ -79,13 +90,13 @@ let o = class extends m {
 };
 p([
   u({ context: d.formContext }),
-  g({ attribute: !1 })
+  m({ attribute: !1 })
 ], o.prototype, "formContext", 2);
 p([
   h({ context: d.layoutContext })
 ], o.prototype, "adapter", 2);
 o = p([
-  f("gui-accordion-layout")
+  v("gui-accordion-layout")
 ], o);
 export {
   o as AccordionElement

package/{alert.element-B4rpyqGV.js → alert.element-DWrS5ggK.js}

@@ -2,28 +2,28 @@ import { LitElement as n, html as c } from "lit";
 import { property as u, customElement as h } from "lit/decorators.js";
 import { consume as m, provide as f } from "@lit/context";
 import * as l from "@golemui/lit";
-var b = Object.defineProperty, g = Object.getOwnPropertyDescriptor, d = (r, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? g(t, a) : t, o = r.length - 1, p; o >= 0; o--)
-    (p = r[o]) && (e = (s ? p(t, a, e) : p(e)) || e);
-  return s && e && b(t, a, e), e;
+var b = Object.defineProperty, g = Object.getOwnPropertyDescriptor, d = (i, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? g(t, a) : t, o = i.length - 1, p; o >= 0; o--)
+    (p = i[o]) && (e = (r ? p(t, a, e) : p(e)) || e);
+  return r && e && b(t, a, e), e;
 };
-let i = class extends n {
+let s = class extends n {
   constructor() {
     super(...arguments), this.adapter = new l.DisplayWidgetAdapter(), this.subscriptions = [];
   }
   createRenderRoot() {
     return this;
   }
+  updated(i) {
+    super.updated(i);
+    const t = this.adapter.templateData.size;
+    t ? this.style.flex = String(t) : this.style.removeProperty("flex");
+  }
   connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-alert"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
+    super.connectedCallback(), this.classList.add("gui-alert", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
       this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
     );
   }
-  updated(r) {
-    super.updated(r);
-    const t = this.adapter.templateData.size;
-    t ? this.style.flex = String(t) : this.style.removeProperty("flex");
-  }
   render() {
     return c`
       <div class="gui-widget" id=${this.widget.uid}>
@@ -37,19 +37,19 @@ let i = class extends n {
     `;
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((r) => r.unsubscribe());
+    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((i) => i.unsubscribe());
   }
 };
 d([
   m({ context: l.formContext }),
   u({ attribute: !1 })
-], i.prototype, "formContext", 2);
+], s.prototype, "formContext", 2);
 d([
   f({ context: l.displayWidgetContext })
-], i.prototype, "adapter", 2);
-i = d([
+], s.prototype, "adapter", 2);
+s = d([
   h("gui-alert-display")
-], i);
+], s);
 export {
-  i as AlertElement
+  s as AlertElement
 };

package/button.element-hjhVBamJ.js

@@ -0,0 +1,56 @@
+import * as p from "@golemui/lit";
+import { consume as d, provide as l } from "@lit/context";
+import { LitElement as u, html as h } from "lit";
+import { property as m, customElement as b } from "lit/decorators.js";
+var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, c = (a, t, s, i) => {
+  for (var e = i > 1 ? void 0 : i ? g(t, s) : t, o = a.length - 1, n; o >= 0; o--)
+    (n = a[o]) && (e = (i ? n(t, s, e) : n(e)) || e);
+  return i && e && f(t, s, e), e;
+};
+let r = class extends u {
+  constructor() {
+    super(...arguments), this.adapter = new p.ActionWidgetAdapter(), this.subscriptions = [];
+  }
+  createRenderRoot() {
+    return this;
+  }
+  updated(a) {
+    super.updated(a);
+    const t = this.adapter.templateData.size;
+    t ? this.style.flex = String(t) : this.style.removeProperty("flex");
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-button", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
+      this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
+    );
+  }
+  render() {
+    return h`
+      <gui-button
+        .uid=${this.widget.uid}
+        .label=${this.adapter.templateData.label}
+        ?disabled=${this.adapter.templateData.disabled === !0}
+        .variant=${this.adapter.templateData.variant}
+        .icon=${this.adapter.templateData.icon}
+        .iconPosition=${this.adapter.templateData.iconPosition}
+        @click=${() => this.adapter.click()}
+      ></gui-button>
+    `;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((a) => a.unsubscribe());
+  }
+};
+c([
+  d({ context: p.formContext }),
+  m({ attribute: !1 })
+], r.prototype, "formContext", 2);
+c([
+  l({ context: p.actionContext })
+], r.prototype, "adapter", 2);
+r = c([
+  b("gui-button-interactive")
+], r);
+export {
+  r as ButtonElement
+};

package/{calendar.element-D7mAbpAa.js → calendar.element-C1rLK7aY.js}

@@ -1,11 +1,11 @@
 import * as d from "@golemui/lit";
-import { consume as l, provide as h } from "@lit/context";
-import { LitElement as m, html as c } from "lit";
-import { property as u, customElement as D } from "lit/decorators.js";
-var b = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, o = (a, e, i, r) => {
-  for (var t = r > 1 ? void 0 : r ? $(e, i) : e, p = a.length - 1, n; p >= 0; p--)
-    (n = a[p]) && (t = (r ? n(e, i, t) : n(t)) || t);
-  return r && t && b(e, i, t), t;
+import { consume as o, provide as h } from "@lit/context";
+import { LitElement as m, html as u } from "lit";
+import { property as c, customElement as D } from "lit/decorators.js";
+var b = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, l = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? $(t, i) : t, p = e.length - 1, n; p >= 0; p--)
+    (n = e[p]) && (a = (r ? n(t, i, a) : n(a)) || a);
+  return r && a && b(t, i, a), a;
 };
 let s = class extends m {
   constructor() {
@@ -14,13 +14,18 @@ let s = class extends m {
   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-calendar"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
+    super.connectedCallback(), this.classList.add("gui-calendar", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
       this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
     );
   }
   render() {
-    return super.render(), c`
+    return super.render(), u`
       <gui-calendar
         .uid=${this.widget.uid}
         .label=${this.adapter.templateData.label}
@@ -44,25 +49,26 @@ let s = class extends m {
         .numberOfMonths=${this.adapter.templateData.numberOfMonths}
         .localeId=${this.adapter.templateData.lang}
         @change=${this.valueChanged}
+        @blur=${() => this.adapter.onBlur()}
       ></gui-calendar>
     `;
   }
-  valueChanged(a) {
-    const e = a?.target;
-    this.adapter.valueChanged(e.value);
+  valueChanged(e) {
+    const t = e?.target;
+    this.adapter.valueChanged(t.value);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((a) => a.unsubscribe());
+    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((e) => e.unsubscribe());
   }
 };
-o([
-  l({ context: d.formContext }),
-  u({ attribute: !1 })
+l([
+  o({ context: d.formContext }),
+  c({ attribute: !1 })
 ], s.prototype, "formContext", 2);
-o([
+l([
   h({ context: d.inputContext })
 ], s.prototype, "adapter", 2);
-s = o([
+s = l([
   D("gui-calendar-input")
 ], s);
 export {

package/{checkbox.element--Kc7sWBx.js → checkbox.element-bu9_MvED.js}

@@ -2,10 +2,10 @@ import * as d from "@golemui/lit";
 import { consume as n, provide as h } from "@lit/context";
 import { LitElement as c, html as u } from "lit";
 import { property as m, customElement as b } from "lit/decorators.js";
-var x = Object.defineProperty, f = Object.getOwnPropertyDescriptor, l = (e, t, i, r) => {
-  for (var a = r > 1 ? void 0 : r ? f(t, i) : t, o = e.length - 1, p; o >= 0; o--)
+var f = Object.defineProperty, x = Object.getOwnPropertyDescriptor, l = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? x(t, i) : t, o = e.length - 1, p; o >= 0; o--)
     (p = e[o]) && (a = (r ? p(t, i, a) : p(a)) || a);
-  return r && a && x(t, i, a), a;
+  return r && a && f(t, i, a), a;
 };
 let s = class extends c {
   constructor() {
@@ -14,16 +14,16 @@ let s = class extends c {
   createRenderRoot() {
     return this;
   }
-  connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-checkbox"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
-      this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
-    );
-  }
   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-checkbox", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
+      this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
+    );
+  }
   render() {
     return super.render(), u`
       <gui-checkbox

package/{currency.element-D9dyGRBH.js → currency.element-Bxv2WxAx.js}

@@ -1,31 +1,31 @@
-import * as n from "@golemui/lit";
+import * as d from "@golemui/lit";
 import { consume as o, provide as u } from "@lit/context";
-import { LitElement as c, html as h } from "lit";
-import { property as m, customElement as D } from "lit/decorators.js";
-var b = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, d = (e, t, s, r) => {
-  for (var a = r > 1 ? void 0 : r ? $(t, s) : t, p = e.length - 1, l; p >= 0; p--)
+import { LitElement as c, html as m } from "lit";
+import { property as h, customElement as D } from "lit/decorators.js";
+var $ = Object.defineProperty, b = Object.getOwnPropertyDescriptor, n = (e, t, s, r) => {
+  for (var a = r > 1 ? void 0 : r ? b(t, s) : t, p = e.length - 1, l; p >= 0; p--)
     (l = e[p]) && (a = (r ? l(t, s, a) : l(a)) || a);
-  return r && a && b(t, s, a), a;
+  return r && a && $(t, s, a), a;
 };
 let i = class extends c {
   constructor() {
-    super(...arguments), this.adapter = new n.InputWidgetAdapter(), this.subscriptions = [];
+    super(...arguments), this.adapter = new d.InputWidgetAdapter(), this.subscriptions = [];
   }
   createRenderRoot() {
     return this;
   }
-  connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-currency"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
-      this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
-    );
-  }
   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-currency", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
+      this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
+    );
+  }
   render() {
-    return super.render(), h`
+    return super.render(), m`
       <gui-currency
         .uid=${this.widget.uid}
         .label=${this.adapter.templateData.label}
@@ -42,6 +42,7 @@ let i = class extends c {
         .minimumFractionDigits=${this.adapter.templateData.minimumFractionDigits}
         .icon=${this.adapter.templateData.icon}
         .placeholder=${this.adapter.templateData.placeholder}
+        .autocomplete=${this.adapter.templateData.autocomplete}
         .localeId=${this.adapter.templateData.lang}
         @input=${this.valueChanged}
         @blur=${() => this.adapter.onBlur()}
@@ -56,14 +57,14 @@ let i = class extends c {
     super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((e) => e.unsubscribe());
   }
 };
-d([
-  o({ context: n.formContext }),
-  m({ attribute: !1 })
+n([
+  o({ context: d.formContext }),
+  h({ attribute: !1 })
 ], i.prototype, "formContext", 2);
-d([
-  u({ context: n.inputContext })
+n([
+  u({ context: d.inputContext })
 ], i.prototype, "adapter", 2);
-i = d([
+i = n([
   D("gui-currency-input")
 ], i);
 export {

package/date-picker.element-GNC8f3Qi.js

@@ -0,0 +1,157 @@
+import * as p from "@golemui/lit";
+import { addIcon as u, addLabel as c, addErrors as m } from "@golemui/gui-components";
+import { consume as g, provide as C } from "@lit/context";
+import { LitElement as D, html as o, nothing as $ } from "lit";
+import { property as v, query as h, state as f, customElement as b } from "lit/decorators.js";
+import { classMap as y } from "lit/directives/class-map.js";
+var I = Object.defineProperty, O = Object.getOwnPropertyDescriptor, n = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? O(t, a) : t, d = e.length - 1, l; d >= 0; d--)
+    (l = e[d]) && (r = (i ? l(t, a, r) : l(r)) || r);
+  return i && r && I(t, a, r), r;
+};
+let s = class extends D {
+  constructor() {
+    super(...arguments), this.adapter = new p.InputWidgetAdapter(), this.isCalendarOpen = !1, this.subscriptions = [], this.onFocusOut = (e) => {
+      if (!this.isCalendarOpen) return;
+      const t = e.relatedTarget;
+      t && this.contains(t) || this.closeCalendar();
+    }, this.onDocumentClick = (e) => {
+      if (!this.isCalendarOpen) return;
+      const t = e.composedPath(), a = this.dateInput && t.includes(this.dateInput), i = this.calendarInput && t.includes(this.calendarInput);
+      !a && !i && this.closeCalendar();
+    };
+  }
+  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(), document.addEventListener("click", this.onDocumentClick), this.addEventListener("focusout", this.onFocusOut), 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 = u("datePicker", this.adapter.templateData), t = this.isCalendarOpen ? o`<gui-calendar
+          id="calendar-input"
+          .uid=${this.widget.uid}
+          .hint=${this.adapter.templateData.hint}
+          ?touched=${this.adapter.templateData.touched}
+          ?required=${this.adapter.templateData.validator?.required}
+          ?disabled=${this.adapter.templateData.disabled}
+          ?readonly=${this.adapter.templateData.readonly}
+          .value=${this.adapter.templateData.value}
+          .prevMonthIcon=${this.adapter.templateData.prevMonthIcon}
+          .nextMonthIcon=${this.adapter.templateData.nextMonthIcon}
+          .prevMonthAriaLabel=${this.adapter.templateData.prevMonthAriaLabel}
+          .nextMonthAriaLabel=${this.adapter.templateData.nextMonthAriaLabel}
+          .dayFormat=${this.adapter.templateData.dayFormat}
+          .weekdayFormat=${this.adapter.templateData.weekdayFormat}
+          .monthFormat=${this.adapter.templateData.monthFormat}
+          .minDate=${this.adapter.templateData.minDate}
+          .maxDate=${this.adapter.templateData.maxDate}
+          .disabledRanges=${this.adapter.templateData.disabledRanges}
+          .numberOfMonths=${this.adapter.templateData.numberOfMonths}
+          .localeId=${this.adapter.templateData.lang}
+          @blur=${this.onBlurCalendar}
+          @change=${this.valueChanged}
+        ></gui-calendar>` : $;
+    return o`
+      ${c(this.widget.uid, {
+      ...this.adapter.templateData,
+      required: this.adapter.templateData.validator?.required
+    })}
+
+      <div
+        role="button"
+        tabindex="-1"
+        class="gui-widget"
+        aria-expanded=${this.isCalendarOpen}
+        @keyup=${(a) => this.onKeyUp(a)}
+        @click=${(a) => this.toggleCalendar(a)}
+      >
+        <gui-date
+          id="date-input"
+          class=${y(e.widgetClasses)}
+          .uid=${this.widget.uid}
+          .hint=${this.adapter.templateData.hint}
+          .showErrors=${!1}
+          .errors=${this.adapter.templateData.errors}
+          ?touched=${this.adapter.templateData.touched}
+          ?required=${this.adapter.templateData.validator?.required}
+          ?disabled=${this.adapter.templateData.disabled}
+          ?readonly=${this.adapter.templateData.readonly}
+          .value=${this.adapter.templateData.value}
+          .icon=${this.adapter.templateData.icon}
+          .localeId=${this.adapter.templateData.lang}
+          @inputError=${this.onInputError}
+          @blur=${() => this.adapter.onBlur()}
+          @focus=${this.openCalendar}
+          @change=${this.valueChanged}
+        ></gui-date>
+        <span class="gui-date-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>
+
+        ${t}
+      </div>
+
+      ${m(this.widget.uid, this.adapter.templateData)}
+    `;
+  }
+  valueChanged(e) {
+    this.adapter.injectValidationIssues(null), this.adapter.valueChanged(e.detail.value);
+  }
+  onBlurCalendar() {
+    this.adapter.onBlur(), this.closeCalendar();
+  }
+  onInputError(e) {
+    this.adapter.injectValidationIssues([e.detail.message]);
+  }
+  onKeyUp(e) {
+    const t = e;
+    t.target === t.currentTarget && (t?.key === "Enter" || t?.key === " ") && (this.isCalendarOpen = !this.isCalendarOpen, this.requestUpdate());
+  }
+  toggleCalendar(e) {
+    const t = e.target, a = t.closest(".gui-date-input__part"), i = t.closest("gui-calendar");
+    a || i ? this.openCalendar() : (this.isCalendarOpen = !this.isCalendarOpen, this.requestUpdate());
+  }
+  openCalendar() {
+    this.isCalendarOpen || (this.isCalendarOpen = !0, this.requestUpdate());
+  }
+  closeCalendar() {
+    this.isCalendarOpen = !1, this.requestUpdate();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this.onDocumentClick), this.removeEventListener("focusout", this.onFocusOut), this.adapter.destroy(), this.subscriptions.forEach((e) => e.unsubscribe());
+  }
+};
+n([
+  g({ context: p.formContext }),
+  v({ attribute: !1 })
+], s.prototype, "formContext", 2);
+n([
+  C({ context: p.inputContext })
+], s.prototype, "adapter", 2);
+n([
+  h("#date-input")
+], s.prototype, "dateInput", 2);
+n([
+  h("#calendar-input")
+], s.prototype, "calendarInput", 2);
+n([
+  f()
+], s.prototype, "isCalendarOpen", 2);
+s = n([
+  b("gui-date-picker-input")
+], s);
+export {
+  s as DatePickerElement
+};

package/{date.element-na_Uywms.js → date.element-Dzw-UJzC.js}

@@ -2,11 +2,11 @@ import * as o from "@golemui/lit";
 import { addIcon as n } from "@golemui/gui-components";
 import { consume as u, provide as h } from "@lit/context";
 import { LitElement as c, html as m } from "lit";
-import { property as b, customElement as f } from "lit/decorators.js";
+import { property as f, customElement as b } from "lit/decorators.js";
 import { classMap as g } from "lit/directives/class-map.js";
 var D = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, l = (t, e, i, r) => {
-  for (var a = r > 1 ? void 0 : r ? $(e, i) : e, p = t.length - 1, d; p >= 0; p--)
-    (d = t[p]) && (a = (r ? d(e, i, a) : d(a)) || a);
+  for (var a = r > 1 ? void 0 : r ? $(e, i) : e, d = t.length - 1, p; d >= 0; d--)
+    (p = t[d]) && (a = (r ? p(e, i, a) : p(a)) || a);
   return r && a && D(e, i, a), a;
 };
 let s = class extends c {
@@ -16,16 +16,16 @@ let s = class extends c {
   createRenderRoot() {
     return this;
   }
-  connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-date"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
-      this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
-    );
-  }
   updated(t) {
     super.updated(t);
     const e = this.adapter.templateData.size;
     e ? this.style.flex = String(e) : this.style.removeProperty("flex");
   }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-date", "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 t = n("date", this.adapter.templateData);
@@ -61,13 +61,13 @@ let s = class extends c {
 };
 l([
   u({ context: o.formContext }),
-  b({ attribute: !1 })
+  f({ attribute: !1 })
 ], s.prototype, "formContext", 2);
 l([
   h({ context: o.inputContext })
 ], s.prototype, "adapter", 2);
 s = l([
-  f("gui-date-input")
+  b("gui-date-input")
 ], s);
 export {
   s as DateElement