@golemui/gui-lit 1.6.0 → 2.0.0-rc.0

package/{date-time-calendar.element-GAr8VMGa.js → date-time-calendar.element-Dmyd7LQ0.js}

@@ -1,27 +1,22 @@
 import { InputWidgetAdapter as d, formContext as l, inputContext as m } from "@golemui/lit";
 import "@golemui/gui-components/date-time-calendar";
-import { consume as p, provide as u } from "@lit/context";
+import { consume as u, provide as p } from "@lit/context";
 import { LitElement as h, html as c } from "lit";
 import { property as $ } from "lit/decorators.js";
 import { unsubscribeAll as b, safeDefine as g } from "@golemui/lit/internals";
 import "rxjs";
-var f = Object.defineProperty, o = (i, e, a, x) => {
-  for (var t = void 0, r = i.length - 1, n; r >= 0; r--)
-    (n = i[r]) && (t = n(e, a, t) || t);
-  return t && f(e, a, t), t;
+var M = Object.defineProperty, o = (a, e, n, f) => {
+  for (var t = void 0, i = a.length - 1, s; i >= 0; i--)
+    (s = a[i]) && (t = s(e, n, t) || t);
+  return t && M(e, n, t), t;
 };
-class s extends h {
+class r extends h {
   constructor() {
     super(...arguments), this.adapter = new d(), this.subscriptions = [];
   }
   createRenderRoot() {
     return this;
   }
-  updated(e) {
-    super.updated(e);
-    const a = this.adapter.templateData.size;
-    a ? this.style.flex = String(a) : 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())
@@ -36,7 +31,7 @@ class s extends h {
         .label=${e.label}
         .hint=${e.hint}
         .errors=${e.errors}
-        ?touched=${e.touched}
+        .touched=${e.touched}
         ?required=${e.validator?.required}
         ?disabled=${e.disabled}
         ?readonly=${e.readonly}
@@ -61,14 +56,15 @@ class s extends h {
         .maxTime=${e.maxTime}
         .disabledTimeRanges=${e.disabledTimeRanges}
         ?allow-custom-time=${e.allowCustomTime}
+        .timeLabel=${e.timeLabel}
         .minTimeMessage=${e.minTimeMessage}
         .maxTimeMessage=${e.maxTimeMessage}
         .disabledTimeRangeMessage=${e.disabledTimeRangeMessage}
         .noAvailableTimesMessage=${e.noAvailableTimesMessage}
         .incompleteMessage=${e.incompleteMessage}
-        @change=${this.valueChanged}
-        @inputError=${this.onInputError}
-        @blur=${() => this.adapter.onBlur()}
+        @gui-input=${this.valueChanged}
+        @gui-input-error=${this.onInputError}
+        @gui-blur=${() => this.adapter.onBlur()}
       ></gui-date-time-calendar>
     `;
   }
@@ -83,13 +79,13 @@ class s extends h {
   }
 }
 o([
-  p({ context: l }),
+  u({ context: l }),
   $({ attribute: !1 })
-], s.prototype, "formContext");
+], r.prototype, "formContext");
 o([
-  u({ context: m })
-], s.prototype, "adapter");
-g("gui-date-time-calendar-input", s);
+  p({ context: m })
+], r.prototype, "adapter");
+g("gui-date-time-calendar-input", r);
 export {
-  s as DateTimeCalendarElement
+  r as DateTimeCalendarElement
 };

package/{date-time-picker.element-Bt0GYSpS.js → date-time-picker.element-QGn5dEbf.js}

@@ -1,27 +1,22 @@
 import { InputWidgetAdapter as l, formContext as d, inputContext as m } from "@golemui/lit";
 import "@golemui/gui-components/date-time-picker";
-import { consume as p, provide as u } from "@lit/context";
-import { LitElement as h, html as b } from "lit";
-import { property as c } from "lit/decorators.js";
-import { unsubscribeAll as $, safeDefine as g } from "@golemui/lit/internals";
+import { consume as u, provide as p } from "@lit/context";
+import { LitElement as b, html as $ } from "lit";
+import { property as h } from "lit/decorators.js";
+import { unsubscribeAll as c, safeDefine as g } from "@golemui/lit/internals";
 import "rxjs";
-var M = Object.defineProperty, o = (i, e, t, A) => {
-  for (var a = void 0, r = i.length - 1, n; r >= 0; r--)
-    (n = i[r]) && (a = n(e, t, a) || a);
-  return a && M(e, t, a), a;
+var M = Object.defineProperty, o = (t, e, s, A) => {
+  for (var a = void 0, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (a = n(e, s, a) || a);
+  return a && M(e, s, a), a;
 };
-class s extends h {
+class r extends b {
   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-picker", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
       this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
@@ -30,13 +25,13 @@ class s extends h {
   render() {
     super.render();
     const e = this.adapter.templateData;
-    return b`
+    return $`
       <gui-date-time-picker
         .uid=${this.widget.uid}
         .label=${e.label}
         .hint=${e.hint}
         .errors=${e.errors}
-        ?touched=${e.touched}
+        .touched=${e.touched}
         ?required=${e.validator?.required}
         ?disabled=${e.disabled}
         ?readonly=${e.readonly}
@@ -69,6 +64,7 @@ class s extends h {
         .maxTime=${e.maxTime}
         .disabledTimeRanges=${e.disabledTimeRanges}
         ?allow-custom-time=${e.allowCustomTime}
+        .timeLabel=${e.timeLabel}
         .invalidDateMessage=${e.invalidDateMessage}
         .minDateMessage=${e.minDateMessage}
         .maxDateMessage=${e.maxDateMessage}
@@ -78,9 +74,9 @@ class s extends h {
         .disabledTimeRangeMessage=${e.disabledTimeRangeMessage}
         .noAvailableTimesMessage=${e.noAvailableTimesMessage}
         .incompleteMessage=${e.incompleteMessage}
-        @inputError=${this.onInputError}
-        @blur=${() => this.adapter.onBlur()}
-        @change=${this.valueChanged}
+        @gui-input-error=${this.onInputError}
+        @gui-blur=${() => this.adapter.onBlur()}
+        @gui-input=${this.valueChanged}
       ></gui-date-time-picker>
     `;
   }
@@ -91,17 +87,17 @@ class s extends h {
     this.adapter.injectValidationIssues([e.detail.message]);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), $(this.subscriptions);
+    super.disconnectedCallback(), this.adapter.destroy(), c(this.subscriptions);
   }
 }
 o([
-  p({ context: d }),
-  c({ attribute: !1 })
-], s.prototype, "formContext");
+  u({ context: d }),
+  h({ attribute: !1 })
+], r.prototype, "formContext");
 o([
-  u({ context: m })
-], s.prototype, "adapter");
-g("gui-date-time-picker-input", s);
+  p({ context: m })
+], r.prototype, "adapter");
+g("gui-date-time-picker-input", r);
 export {
-  s as DateTimePickerElement
+  r as DateTimePickerElement
 };

package/{date-time.element-WfLnY_Cb.js → date-time.element-B0OuRjlf.js}

@@ -1,29 +1,24 @@
-import { InputWidgetAdapter as l, formContext as m, inputContext as n } from "@golemui/lit";
+import { InputWidgetAdapter as m, formContext as l, inputContext as n } from "@golemui/lit";
 import { addIcon as o } from "@golemui/gui-components/internals";
 import { unsubscribeAll as h, safeDefine as u } from "@golemui/lit/internals";
 import "@golemui/gui-components/date-time-input";
 import { consume as D, provide as c } from "@lit/context";
-import { LitElement as $, html as b } from "lit";
-import { property as g } from "lit/decorators.js";
+import { LitElement as $, html as g } from "lit";
+import { property as b } from "lit/decorators.js";
 import "rxjs";
 import { classMap as f } from "lit/directives/class-map.js";
-var x = Object.defineProperty, d = (i, t, e, v) => {
-  for (var a = void 0, r = i.length - 1, p; r >= 0; r--)
-    (p = i[r]) && (a = p(t, e, a) || a);
-  return a && x(t, e, a), a;
+var x = Object.defineProperty, d = (e, t, s, v) => {
+  for (var a = void 0, i = e.length - 1, p; i >= 0; i--)
+    (p = e[i]) && (a = p(t, s, a) || a);
+  return a && x(t, s, a), a;
 };
-class s extends $ {
+class r extends $ {
   constructor() {
-    super(...arguments), this.adapter = new l(), this.subscriptions = [];
+    super(...arguments), this.adapter = new m(), 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-date-time", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
       this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
@@ -32,14 +27,14 @@ class s extends $ {
   render() {
     super.render();
     const t = o("date-time", this.adapter.templateData);
-    return b`
+    return g`
       <gui-date-time
         class=${f(t.widgetClasses)}
         .uid=${this.widget.uid}
         .label=${this.adapter.templateData.label}
         .hint=${this.adapter.templateData.hint}
         .errors=${this.adapter.templateData.errors}
-        ?touched=${this.adapter.templateData.touched}
+        .touched=${this.adapter.templateData.touched}
         ?required=${this.adapter.templateData.validator?.required}
         ?disabled=${this.adapter.templateData.disabled}
         ?readonly=${this.adapter.templateData.readonly}
@@ -64,9 +59,9 @@ class s extends $ {
         .incompleteMessage=${this.adapter.templateData.incompleteMessage}
         .hourFormat=${this.adapter.templateData.hourFormat}
         .minuteStep=${this.adapter.templateData.minuteStep}
-        @inputError=${this.onInputError}
-        @blur=${() => this.adapter.onBlur()}
-        @change=${this.valueChanged}
+        @gui-input-error=${this.onInputError}
+        @gui-blur=${() => this.adapter.onBlur()}
+        @gui-input=${this.valueChanged}
       ></gui-date-time>
     `;
   }
@@ -81,13 +76,13 @@ class s extends $ {
   }
 }
 d([
-  D({ context: m }),
-  g({ attribute: !1 })
-], s.prototype, "formContext");
+  D({ context: l }),
+  b({ attribute: !1 })
+], r.prototype, "formContext");
 d([
   c({ context: n })
-], s.prototype, "adapter");
-u("gui-date-time-input", s);
+], r.prototype, "adapter");
+u("gui-date-time-input", r);
 export {
-  s as DateTimeElement
+  r as DateTimeElement
 };

package/{date.element-ChpTi2AQ.js → date.element-Ba8wmaNU.js}

@@ -7,23 +7,18 @@ import { LitElement as g, html as $ } from "lit";
 import { property as b } from "lit/decorators.js";
 import "rxjs";
 import { classMap as f } from "lit/directives/class-map.js";
-var v = Object.defineProperty, d = (r, t, a, x) => {
-  for (var e = void 0, i = r.length - 1, p; i >= 0; i--)
-    (p = r[i]) && (e = p(t, a, e) || e);
-  return e && v(t, a, e), e;
+var v = Object.defineProperty, d = (e, t, s, C) => {
+  for (var a = void 0, i = e.length - 1, p; i >= 0; i--)
+    (p = e[i]) && (a = p(t, s, a) || a);
+  return a && v(t, s, a), a;
 };
-class s extends g {
+class r extends g {
   constructor() {
     super(...arguments), this.adapter = new l(), this.subscriptions = [];
   }
   createRenderRoot() {
     return this;
   }
-  updated(t) {
-    super.updated(t);
-    const a = this.adapter.templateData.size;
-    a ? this.style.flex = String(a) : 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())
@@ -39,7 +34,7 @@ class s extends g {
         .label=${this.adapter.templateData.label}
         .hint=${this.adapter.templateData.hint}
         .errors=${this.adapter.templateData.errors}
-        ?touched=${this.adapter.templateData.touched}
+        .touched=${this.adapter.templateData.touched}
         ?required=${this.adapter.templateData.validator?.required}
         ?disabled=${this.adapter.templateData.disabled}
         ?readonly=${this.adapter.templateData.readonly}
@@ -55,9 +50,9 @@ class s extends g {
         .minDateMessage=${this.adapter.templateData.minDateMessage}
         .maxDateMessage=${this.adapter.templateData.maxDateMessage}
         .incompleteMessage=${this.adapter.templateData.incompleteMessage}
-        @inputError=${this.onInputError}
-        @blur=${() => this.adapter.onBlur()}
-        @change=${this.valueChanged}
+        @gui-input-error=${this.onInputError}
+        @gui-blur=${() => this.adapter.onBlur()}
+        @gui-input=${this.valueChanged}
       ></gui-date>
     `;
   }
@@ -74,11 +69,11 @@ class s extends g {
 d([
   c({ context: n }),
   b({ attribute: !1 })
-], s.prototype, "formContext");
+], r.prototype, "formContext");
 d([
   D({ context: o })
-], s.prototype, "adapter");
-u("gui-date-input", s);
+], r.prototype, "adapter");
+u("gui-date-input", r);
 export {
-  s as DateElement
+  r as DateElement
 };

package/{dropdown.element-Ckh9JvEK.js → dropdown.element-Djee1u1L.js}

@@ -3,20 +3,21 @@ import { consume as D, provide as R } from "@lit/context";
 import { LitElement as L, nothing as p, html as _ } from "lit";
 import { classMap as v } from "lit/directives/class-map.js";
 import { property as k, state as d, query as $ } from "lit/decorators.js";
-import { unsubscribeAll as V, cspStyleMap as S, safeDefine as P } from "@golemui/lit/internals";
-import { Subject as T, debounceTime as j } from "rxjs";
+import { unsubscribeAll as V, cspStyleMap as S, safeDefine as T } from "@golemui/lit/internals";
+import { Subject as j, debounceTime as P } from "rxjs";
 import { d as q } from "./default-list-item-renderer-CuPJ9jUD.js";
 import "@golemui/gui-components/label";
 import "@golemui/gui-components/list";
 import "@golemui/gui-components/errors";
-var O = Object.defineProperty, l = (g, e, t, s) => {
+import { live as O } from "lit/directives/live.js";
+var E = Object.defineProperty, l = (g, e, t, s) => {
   for (var i = void 0, u = g.length - 1, h; u >= 0; u--)
     (h = g[u]) && (i = h(e, t, i) || i);
-  return i && O(e, t, i), i;
+  return i && E(e, t, i), i;
 };
 class a extends L {
   constructor() {
-    super(...arguments), this.adapter = new F(), this.debouncer = new T(), this.subscriptions = [], this._range = { start: 0, end: 10 }, this._filteredItems = [], this._listItems = [], this._focusedIndex = -1, this._isFiltering = !1, this._isListVisible = !1, this._selectedItem = void 0, this._ignoreNextFocus = !1, this.onDocumentClick = (e) => {
+    super(...arguments), this.adapter = new F(), this.debouncer = new j(), this.subscriptions = [], this._range = { start: 0, end: 10 }, this._filteredItems = [], this._listItems = [], this._focusedIndex = -1, this._isFiltering = !1, this._isListVisible = !1, this._selectedItem = void 0, this._ignoreNextFocus = !1, this.onDocumentClick = (e) => {
       if (!this._isListVisible) return;
       const t = e.composedPath(), s = this._inputRef && t.includes(this._inputRef), i = this._panelRef && t.includes(this._panelRef);
       !s && !i && (this._isListVisible = !1);
@@ -31,18 +32,13 @@ class a extends L {
   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(), typeof document < "u" && document.addEventListener("click", this.onDocumentClick), this.classList.add("gui-dropdown", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this._filteredItems = this.adapter.templateData.items, this.subscriptions.push(
       this.adapter.templateDataChanged$.subscribe(() => {
         const e = this.adapter.templateData;
         e.items && this._listItems?.length === 0 && this._filteredItems?.length === 0 && (this._filteredItems = e.items, this._listItems = e.items), this.requestUpdate();
       }),
-      this.debouncer.pipe(j(this.adapter.templateData.inputDebounce ?? 500)).subscribe((e) => {
+      this.debouncer.pipe(P(this.adapter.templateData.inputDebounce ?? 500)).subscribe((e) => {
         this._filterItems(e);
       })
     );
@@ -178,17 +174,7 @@ class a extends L {
           @mousedown=${this._onToggleMouseDown}
           @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>
+          <span class="gui-caret" aria-hidden="true"></span>
         </button>
 
         <div
@@ -199,13 +185,13 @@ class a extends L {
           <gui-list
             id=${`${this.widget.uid}-list`}
             .uid=${this.widget.uid}
-            .value=${e.value ?? ""}
+            .value=${O(e.value ?? "")}
             .valueField=${e.valueField}
             .items=${this._isFiltering && !o ? this._filteredItems : e.items}
             .itemHeight=${e.itemHeight}
             .height=${e.height}
             ?required=${e.validator?.required}
-            ?touched=${e.touched}
+            .touched=${e.touched}
             ?disabled=${e.disabled}
             ?readonly=${e.readonly}
             ?hidden=${!this._isListVisible}
@@ -213,10 +199,10 @@ class a extends L {
             @gui-update-items=${this._onUpdateItems}
             @gui-focus-change=${this._onFocusChange}
             @focus=${this._onFocus}
-            @change=${this._onValueChange}
+            @gui-input=${this._onValueChange}
           >
             ${s.map((r, f) => {
-      const n = this._range.start + f, c = e.value === r.value, b = this._focusedIndex === n, w = !!e.disabled || !!r.disabled, I = e.labelField ?? "label", y = r.template !== null && typeof r.template == "object" && I && !e.itemRenderer ? r.template[I] : r.template;
+      const n = this._range.start + f, c = e.value === r.value, b = this._focusedIndex === n, I = !!e.disabled || !!r.disabled, w = e.labelField ?? "label", y = r.template !== null && typeof r.template == "object" && w && !e.itemRenderer ? r.template[w] : r.template;
       return _`
                 <div
                   role="option"
@@ -225,7 +211,7 @@ class a extends L {
                   id="${this.widget.uid}-item-${n}"
                   style=${S({ height: `${e.itemHeight || 40}px` })}
                   aria-selected=${c ? "true" : "false"}
-                  aria-disabled=${w ? "true" : "false"}
+                  aria-disabled=${I ? "true" : "false"}
                   @click=${() => this._onClickItem(r, n)}
                 >
                   ${i({
@@ -233,7 +219,7 @@ class a extends L {
         value: r.value,
         index: n,
         selected: c,
-        disabled: w,
+        disabled: I,
         focused: b
       })}
                 </div>
@@ -294,7 +280,7 @@ l([
 l([
   $(".gui-picker__panel")
 ], a.prototype, "_panelRef");
-P("gui-dropdown-input", a);
+T("gui-dropdown-input", a);
 export {
   a as DropdownElement
 };

package/{file-upload.element-l_l_ubxJ.js → file-upload.element-B3oBEQ_s.js}

@@ -1,27 +1,22 @@
-import { InputWidgetAdapter as l, formContext as d, inputContext as p } from "@golemui/lit";
+import { InputWidgetAdapter as d, formContext as l, inputContext as p } from "@golemui/lit";
 import "@golemui/gui-components/file-upload";
 import { consume as u, provide as c } from "@lit/context";
-import { LitElement as m, html as h } from "lit";
-import { property as g } from "lit/decorators.js";
+import { LitElement as m, html as g } from "lit";
+import { property as h } from "lit/decorators.js";
 import { unsubscribeAll as $, safeDefine as b } from "@golemui/lit/internals";
 import "rxjs";
 var f = Object.defineProperty, n = (r, e, t, v) => {
-  for (var a = void 0, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (a = o(e, t, a) || a);
+  for (var a = void 0, i = r.length - 1, o; i >= 0; i--)
+    (o = r[i]) && (a = o(e, t, a) || a);
   return a && f(e, t, a), a;
 };
-class i extends m {
+class s extends m {
   constructor() {
-    super(...arguments), this.adapter = new l(), this.subscriptions = [];
+    super(...arguments), this.adapter = new d(), 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-file-upload", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
       this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
@@ -30,14 +25,14 @@ class i extends m {
   render() {
     super.render();
     const e = this.adapter.templateData;
-    return h`
+    return g`
       <gui-file-upload
         .uid=${this.widget.uid}
         .path=${this.widget.path}
         .label=${e.label}
         .hint=${e.hint}
         .errors=${e.errors}
-        ?touched=${e.touched}
+        .touched=${e.touched}
         ?required=${e.validator?.required}
         ?disabled=${e.disabled}
         ?readonly=${e.readonly}
@@ -59,9 +54,9 @@ class i extends m {
         .uploadedMessage=${e.uploadedMessage}
         .removedMessage=${e.removedMessage}
         .failedMessage=${e.failedMessage}
-        @change=${this.valueChanged}
-        @blur=${() => this.adapter.onBlur()}
-        @inputError=${this.onInputError}
+        @gui-input=${this.valueChanged}
+        @gui-blur=${() => this.adapter.onBlur()}
+        @gui-input-error=${this.onInputError}
       ></gui-file-upload>
     `;
   }
@@ -78,13 +73,13 @@ class i extends m {
   }
 }
 n([
-  u({ context: d }),
-  g({ attribute: !1 })
-], i.prototype, "formContext");
+  u({ context: l }),
+  h({ attribute: !1 })
+], s.prototype, "formContext");
 n([
   c({ context: p })
-], i.prototype, "adapter");
-b("gui-file-upload-input", i);
+], s.prototype, "adapter");
+b("gui-file-upload-input", s);
 export {
-  i as FileUploadElement
+  s as FileUploadElement
 };

package/grid.element-CwDdlQ4b.js

@@ -0,0 +1,54 @@
+import { LayoutWidgetAdapter as l, formContext as c, layoutContext as u } from "@golemui/lit";
+import { resolveGrid as m, gridClasses as h, gridCellClasses as f } from "@golemui/gui-shared/internals";
+import { consume as g, provide as b } from "@lit/context";
+import { LitElement as C, html as n } from "lit";
+import { property as v } from "lit/decorators.js";
+import { unsubscribeAll as x, safeDefine as y } from "@golemui/lit/internals";
+import "rxjs";
+import { repeat as w } from "lit-html/directives/repeat.js";
+var $ = Object.defineProperty, p = (s, e, r, i) => {
+  for (var t = void 0, a = s.length - 1, d; a >= 0; a--)
+    (d = s[a]) && (t = d(e, r, t) || t);
+  return t && $(e, r, t), t;
+};
+class o extends C {
+  constructor() {
+    super(...arguments), this.adapter = new l(), this.subscriptions = [];
+  }
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
+      this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
+    );
+  }
+  render() {
+    const e = m(this.widget.type, this.adapter.templateData), r = this.adapter.templateData.children || [];
+    return n`
+      <div class=${h(e)} id=${this.widget?.uid}>
+        ${w(
+      r,
+      (i) => i?.uid,
+      (i) => n`<div class=${f(e, i.size)}>
+              <gui-widget .widget=${i}></gui-widget>
+            </div>`
+    )}
+      </div>
+    `;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.adapter.destroy(), x(this.subscriptions);
+  }
+}
+p([
+  g({ context: c }),
+  v({ attribute: !1 })
+], o.prototype, "formContext");
+p([
+  b({ context: u })
+], o.prototype, "adapter");
+y("gui-grid-layout", o);
+export {
+  o as GridElement
+};