@golemui/gui-lit 0.0.2 → 0.12.0

package/markdown.element-ZD_n4ObO.js

@@ -0,0 +1,73 @@
+import * as o from "@golemui/lit";
+import { consume as n, provide as u } from "@lit/context";
+import { LitElement as h, html as m } from "lit";
+import { property as c, customElement as D } from "lit/decorators.js";
+var $ = Object.defineProperty, f = Object.getOwnPropertyDescriptor, l = (e, t, s, r) => {
+  for (var a = r > 1 ? void 0 : r ? f(t, s) : t, p = e.length - 1, d; p >= 0; p--)
+    (d = e[p]) && (a = (r ? d(t, s, a) : d(a)) || a);
+  return r && a && $(t, s, a), a;
+};
+let i = class extends h {
+  constructor() {
+    super(...arguments), this.adapter = new o.InputWidgetAdapter(), 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-markdown", "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(), m`
+      <gui-markdown
+        .uid=${this.widget.uid}
+        .label=${this.adapter.templateData.label}
+        .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}
+        .hint=${this.adapter.templateData.hint}
+        .placeholder=${this.adapter.templateData.placeholder}
+        .autocomplete=${this.adapter.templateData.autocomplete}
+        .counterMode=${this.adapter.templateData.counterMode}
+        .minimumHeight=${this.adapter.templateData.minimumHeight}
+        .autoGrow=${this.adapter.templateData.autoGrow}
+        .tools=${this.adapter.templateData.tools}
+        .defaultOpenPreview=${this.adapter.templateData.defaultOpenPreview}
+        .maxLength=${this.adapter.templateData.validator?.maxLength}
+        .dependencies=${this.adapter.templateData.deps}
+        @input=${this.valueChanged}
+        @blur=${() => this.adapter.onBlur()}
+      ></gui-markdown>
+    `;
+  }
+  valueChanged(e) {
+    const t = e.detail.value;
+    this.adapter.valueChanged(t);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((e) => e.unsubscribe());
+  }
+};
+l([
+  n({ context: o.formContext }),
+  c({ attribute: !1 })
+], i.prototype, "formContext", 2);
+l([
+  u({ context: o.inputContext })
+], i.prototype, "adapter", 2);
+i = l([
+  D("gui-markdown-input")
+], i);
+export {
+  i as MarkdownElement
+};

package/{number.element-Bl5YReaL.js → number.element-B0E7W2TK.js}

@@ -1,29 +1,29 @@
-import * as l from "@golemui/lit";
+import * as d from "@golemui/lit";
 import { consume as u, provide as n } from "@lit/context";
 import { LitElement as m, html as h } from "lit";
 import { property as c, customElement as b } from "lit/decorators.js";
-var f = Object.defineProperty, D = Object.getOwnPropertyDescriptor, o = (e, t, i, r) => {
-  for (var a = r > 1 ? void 0 : r ? D(t, i) : t, p = e.length - 1, d; p >= 0; p--)
-    (d = e[p]) && (a = (r ? d(t, i, a) : d(a)) || a);
-  return r && a && f(t, i, a), a;
+var f = Object.defineProperty, D = Object.getOwnPropertyDescriptor, o = (e, t, s, r) => {
+  for (var a = r > 1 ? void 0 : r ? D(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 && f(t, s, a), a;
 };
-let s = class extends m {
+let i = class extends m {
   constructor() {
-    super(...arguments), this.adapter = new l.InputWidgetAdapter(), this.subscriptions = [];
+    super(...arguments), this.adapter = new d.InputWidgetAdapter(), this.subscriptions = [];
   }
   createRenderRoot() {
     return this;
   }
-  connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-number"), 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-number", "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`
       <gui-number
@@ -41,6 +41,7 @@ let s = class extends m {
         .maximum=${this.adapter.templateData.maximum}
         .autoGrow=${this.adapter.templateData.autoGrow}
         .placeholder=${this.adapter.templateData.placeholder}
+        .autocomplete=${this.adapter.templateData.autocomplete}
         @input=${this.valueChanged}
         @blur=${() => this.adapter.onBlur()}
       ></gui-number>
@@ -55,15 +56,15 @@ let s = class extends m {
   }
 };
 o([
-  u({ context: l.formContext }),
+  u({ context: d.formContext }),
   c({ attribute: !1 })
-], s.prototype, "formContext", 2);
+], i.prototype, "formContext", 2);
 o([
-  n({ context: l.inputContext })
-], s.prototype, "adapter", 2);
-s = o([
+  n({ context: d.inputContext })
+], i.prototype, "adapter", 2);
+i = o([
   b("gui-number-input")
-], s);
+], i);
 export {
-  s as NumberElement
+  i as NumberElement
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@golemui/gui-lit",
-  "version": "0.0.2",
+  "version": "0.12.0",
   "type": "module",
   "main": "./index.umd.cjs",
   "module": "./index.js",
@@ -21,14 +21,19 @@
     "*.md"
   ],
   "peerDependencies": {
-    "@golemui/lit": "*",
-    "@golemui/core": "*",
-    "@golemui/gui-components": "*",
-    "@golemui/gui-shared": "*",
-    "@golemui/gui-validators": "*",
+    "@golemui/lit": "0.12.0",
+    "@golemui/core": "0.12.0",
+    "@golemui/gui-components": "0.12.0",
+    "@golemui/gui-shared": "0.12.0",
+    "@golemui/gui-validators": "0.12.0",
     "@lit/context": "^1.1.6",
     "lit-html": "^3.3.1",
     "lit": "^3.3.1",
     "rxjs": "^7.8.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/golemui/golemui.git",
+    "directory": "libs/gui/lit"
   }
 }

package/{password.element-CKmcH8Gn.js → password.element-C4_eLdUO.js}

@@ -1,10 +1,10 @@
 import * as o from "@golemui/lit";
-import { consume as n, provide as h } from "@lit/context";
+import { consume as h, provide as n } from "@lit/context";
 import { LitElement as u, html as c } from "lit";
 import { property as m, customElement as b } from "lit/decorators.js";
 var w = Object.defineProperty, D = Object.getOwnPropertyDescriptor, l = (e, t, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? D(t, i) : t, d = e.length - 1, p; d >= 0; d--)
-    (p = e[d]) && (a = (s ? p(t, i, a) : p(a)) || a);
+  for (var a = s > 1 ? void 0 : s ? D(t, i) : t, p = e.length - 1, d; p >= 0; p--)
+    (d = e[p]) && (a = (s ? d(t, i, a) : d(a)) || a);
   return s && a && w(t, i, a), a;
 };
 let r = class extends u {
@@ -14,16 +14,16 @@ let r = class extends u {
   createRenderRoot() {
     return this;
   }
-  connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-password"), 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-password", "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`
       <gui-password
@@ -38,6 +38,7 @@ let r = class extends u {
         .value=${this.adapter.templateData.value}
         .icon=${this.adapter.templateData.icon}
         .placeholder=${this.adapter.templateData.placeholder}
+        .autocomplete=${this.adapter.templateData.autocomplete}
         .showPasswordIcon=${this.adapter.templateData.showPasswordIcon}
         .hidePasswordIcon=${this.adapter.templateData.hidePasswordIcon}
         .showPasswordLabel=${this.adapter.templateData.showPasswordLabel}
@@ -56,11 +57,11 @@ let r = class extends u {
   }
 };
 l([
-  n({ context: o.formContext }),
+  h({ context: o.formContext }),
   m({ attribute: !1 })
 ], r.prototype, "formContext", 2);
 l([
-  h({ context: o.inputContext })
+  n({ context: o.inputContext })
 ], r.prototype, "adapter", 2);
 r = l([
   b("gui-password-input")

package/{radiogroup.element-Cn1lyyVE.js → radiogroup.element-BD8qBNoO.js}

@@ -2,8 +2,8 @@ import * as o from "@golemui/lit";
 import { consume as n, provide as u } from "@lit/context";
 import { LitElement as h, html as c } from "lit";
 import { property as m, customElement as b } from "lit/decorators.js";
-var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, l = (e, t, s, r) => {
-  for (var a = r > 1 ? void 0 : r ? v(t, s) : t, p = e.length - 1, d; p >= 0; p--)
+var g = Object.defineProperty, f = Object.getOwnPropertyDescriptor, l = (e, t, s, r) => {
+  for (var a = r > 1 ? void 0 : r ? f(t, s) : t, p = e.length - 1, d; p >= 0; p--)
     (d = e[p]) && (a = (r ? d(t, s, a) : d(a)) || a);
   return r && a && g(t, s, a), a;
 };
@@ -14,16 +14,16 @@ let i = class extends h {
   createRenderRoot() {
     return this;
   }
-  connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-radiogroup"), 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-radiogroup", "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`
       <gui-radiogroup
@@ -39,6 +39,7 @@ let i = class extends h {
         .options=${this.adapter.templateData.options}
         .labelField=${this.adapter.templateData.labelField}
         .valueField=${this.adapter.templateData.valueField}
+        .direction=${this.adapter.templateData.direction}
         @change=${this.valueChanged}
         @blur=${() => this.adapter.onBlur()}
       ></gui-radiogroup>

package/{range-calendar.element-C2YUElqM.js → range-calendar.element-Bli9UfhN.js}

@@ -1,26 +1,31 @@
-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, n, r) => {
-  for (var t = r > 1 ? void 0 : r ? $(e, n) : e, i = a.length - 1, p; i >= 0; i--)
-    (p = a[i]) && (t = (r ? p(e, n, t) : p(t)) || t);
-  return r && t && b(e, n, t), t;
+import * as n from "@golemui/lit";
+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 b } from "lit/decorators.js";
+var D = 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--)
+    (l = e[p]) && (a = (r ? l(t, s, a) : l(a)) || a);
+  return r && a && D(t, s, a), a;
 };
-let s = class extends m {
+let i = class extends m {
   constructor() {
-    super(...arguments), this.adapter = new d.InputWidgetAdapter(), this.subscriptions = [];
+    super(...arguments), this.adapter = new n.InputWidgetAdapter(), 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-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-range-calendar
         .uid=${this.widget.uid}
         .label=${this.adapter.templateData.label}
@@ -42,29 +47,32 @@ let s = class extends m {
         .maxDate=${this.adapter.templateData.maxDate}
         .disabledRanges=${this.adapter.templateData.disabledRanges}
         .numberOfMonths=${this.adapter.templateData.numberOfMonths}
+        .hidePills=${!1}
+        .removePillAriaLabel=${this.adapter.templateData.removePillAriaLabel}
         .localeId=${this.adapter.templateData.lang}
         @change=${this.valueChanged}
+        @blur=${() => this.adapter.onBlur()}
       ></gui-range-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 })
-], s.prototype, "formContext", 2);
-o([
-  h({ context: d.inputContext })
-], s.prototype, "adapter", 2);
-s = o([
-  D("gui-range-calendar-input")
-], s);
+d([
+  o({ context: n.formContext }),
+  c({ attribute: !1 })
+], i.prototype, "formContext", 2);
+d([
+  h({ context: n.inputContext })
+], i.prototype, "adapter", 2);
+i = d([
+  b("gui-range-calendar-input")
+], i);
 export {
-  s as RangeCalendarElement
+  i as RangeCalendarElement
 };

package/range-date-input.element-BwPvGk5F.js

@@ -0,0 +1,72 @@
+import * as d from "@golemui/lit";
+import { consume as o, provide as u } from "@lit/context";
+import { LitElement as h, html as c } from "lit";
+import { property as m, customElement as b } from "lit/decorators.js";
+var D = Object.defineProperty, g = Object.getOwnPropertyDescriptor, n = (t, e, s, r) => {
+  for (var a = r > 1 ? void 0 : r ? g(e, s) : e, p = t.length - 1, l; p >= 0; p--)
+    (l = t[p]) && (a = (r ? l(e, s, a) : l(a)) || a);
+  return r && a && D(e, s, a), a;
+};
+let i = class extends h {
+  constructor() {
+    super(...arguments), this.adapter = new d.InputWidgetAdapter(), 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-range-date", "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`
+      <gui-range-date
+        .uid=${this.widget.uid}
+        .label=${this.adapter.templateData.label}
+        .hint=${this.adapter.templateData.hint}
+        .icon=${this.adapter.templateData.icon}
+        .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}
+        .localeId=${this.adapter.templateData.lang}
+        .separator=${this.adapter.templateData.separator}
+        .removePillAriaLabel=${this.adapter.templateData.removePillAriaLabel}
+        .startDateAriaLabel=${this.adapter.templateData.startDateAriaLabel}
+        .endDateAriaLabel=${this.adapter.templateData.endDateAriaLabel}
+        @change=${this.valueChanged}
+        @inputError=${this.onInputError}
+      ></gui-range-date>
+    `;
+  }
+  valueChanged(t) {
+    this.adapter.injectValidationIssues(null), this.adapter.valueChanged(t.detail.value);
+  }
+  onInputError(t) {
+    this.adapter.injectValidationIssues([t.detail.message]);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
+  }
+};
+n([
+  o({ context: d.formContext }),
+  m({ attribute: !1 })
+], i.prototype, "formContext", 2);
+n([
+  u({ context: d.inputContext })
+], i.prototype, "adapter", 2);
+i = n([
+  b("gui-range-date-input")
+], i);
+export {
+  i as RangeDateInputElement
+};

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

@@ -0,0 +1,170 @@
+import * as p from "@golemui/lit";
+import { addIcon as c, addLabel as m, addErrors as g } from "@golemui/gui-components";
+import { consume as D, provide as C } from "@lit/context";
+import { LitElement as $, html as o, nothing as f } from "lit";
+import { property as v, query as h, state as u, customElement as b } from "lit/decorators.js";
+import { classMap as k } from "lit/directives/class-map.js";
+var y = Object.defineProperty, I = Object.getOwnPropertyDescriptor, n = (e, t, a, r) => {
+  for (var i = r > 1 ? void 0 : r ? I(t, a) : t, l = e.length - 1, d; l >= 0; l--)
+    (d = e[l]) && (i = (r ? d(t, a, i) : d(i)) || i);
+  return r && i && y(t, a, i), i;
+};
+let s = class extends $ {
+  constructor() {
+    super(...arguments), this.adapter = new p.InputWidgetAdapter(), this.isCalendarOpen = !1, this.focusDate = void 0, 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), r = this.calendarInput && t.includes(this.calendarInput);
+      !a && !r && 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-range-date-picker", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
+      this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
+    );
+  }
+  render() {
+    super.render();
+    const e = c("datePicker", this.adapter.templateData), t = this.isCalendarOpen ? o`<gui-range-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}
+          .focusDate=${this.focusDate}
+          .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}
+          .hidePills=${!0}
+          @blur=${this.onBlurCalendar}
+          @change=${this.valueChanged}
+        ></gui-range-calendar>` : f;
+    return o`
+      ${m(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-range-date
+          id="date-input"
+          class=${k(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}
+          .separator=${this.adapter.templateData.separator}
+          .removePillAriaLabel=${this.adapter.templateData.removePillAriaLabel}
+          .startDateAriaLabel=${this.adapter.templateData.startDateAriaLabel}
+          .endDateAriaLabel=${this.adapter.templateData.endDateAriaLabel}
+          @inputError=${this.onInputError}
+          @blur=${() => this.adapter.onBlur()}
+          @focus=${this.openCalendar}
+          @change=${this.valueChanged}
+          @pillClick=${this.onPillClick}
+        ></gui-range-date>
+        <span class="gui-range-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>
+
+      ${g(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]);
+  }
+  onPillClick(e) {
+    this.focusDate = e.detail.range.start, this.openCalendar();
+  }
+  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-range-date-input__part"), r = t.closest("gui-range-calendar"), i = t.closest(".gui-range-date-input__pill"), l = t.closest(".gui-range-date-input__pill--count");
+    a || r || i ? this.openCalendar() : l ? this.closeCalendar() : (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([
+  D({ 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([
+  u()
+], s.prototype, "isCalendarOpen", 2);
+n([
+  u()
+], s.prototype, "focusDate", 2);
+s = n([
+  b("gui-range-date-picker-input")
+], s);
+export {
+  s as RangeDatePickerElement
+};

package/renderer.element-B99qD2mz.js

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