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

package/{markdown-text.element-DflCQwAo.js → markdown-text.element-Jos6zKYy.js}

@@ -1,34 +1,29 @@
-import { LitElement as p, html as n } from "lit";
-import { property as l } from "lit/decorators.js";
-import { unsubscribeAll as m, safeDefine as c } from "@golemui/lit/internals";
+import { LitElement as n, html as p } from "lit";
+import { property as m } from "lit/decorators.js";
+import { unsubscribeAll as c, safeDefine as l } from "@golemui/lit/internals";
 import { consume as u, provide as h } from "@lit/context";
-import { DisplayWidgetAdapter as f, formContext as x, displayWidgetContext as g } from "@golemui/lit";
+import { DisplayWidgetAdapter as f, formContext as x, displayWidgetContext as b } from "@golemui/lit";
 import "@golemui/gui-components/markdown-text";
 import "rxjs";
-var b = Object.defineProperty, o = (r, i, e, y) => {
-  for (var t = void 0, s = r.length - 1, d; s >= 0; s--)
-    (d = r[s]) && (t = d(i, e, t) || t);
-  return t && b(i, e, t), t;
+var g = Object.defineProperty, o = (e, s, a, C) => {
+  for (var t = void 0, r = e.length - 1, d; r >= 0; r--)
+    (d = e[r]) && (t = d(s, a, t) || t);
+  return t && g(s, a, t), t;
 };
-class a extends p {
+class i extends n {
   constructor() {
     super(...arguments), this.adapter = new f(), this.subscriptions = [];
   }
   createRenderRoot() {
     return this;
   }
-  updated(i) {
-    super.updated(i);
-    const e = this.adapter.templateData.size;
-    e ? this.style.flex = String(e) : this.style.removeProperty("flex");
-  }
   connectedCallback() {
     super.connectedCallback(), this.classList.add("gui-markdown-text", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
       this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
     );
   }
   render() {
-    return n`
+    return p`
       <div class="gui-widget" id=${this.widget.uid}>
         <gui-markdown-text
           .md=${this.adapter.templateData.md}
@@ -38,17 +33,17 @@ class a extends p {
     `;
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), m(this.subscriptions);
+    super.disconnectedCallback(), this.adapter.destroy(), c(this.subscriptions);
   }
 }
 o([
   u({ context: x }),
-  l({ attribute: !1 })
-], a.prototype, "formContext");
+  m({ attribute: !1 })
+], i.prototype, "formContext");
 o([
-  h({ context: g })
-], a.prototype, "adapter");
-c("gui-markdown-text-display", a);
+  h({ context: b })
+], i.prototype, "adapter");
+l("gui-markdown-text-display", i);
 export {
-  a as MarkdownTextElement
+  i as MarkdownTextElement
 };

package/{markdown.element-DUHHoi2Y.js → markdown.element-7tvZ028P.js}

@@ -5,10 +5,11 @@ import { LitElement as u, html as c } from "lit";
 import { property as $ } from "lit/decorators.js";
 import { unsubscribeAll as D, safeDefine as b } from "@golemui/lit/internals";
 import "rxjs";
-var f = Object.defineProperty, d = (i, e, t, g) => {
-  for (var a = void 0, r = i.length - 1, p; r >= 0; r--)
-    (p = i[r]) && (a = p(e, t, a) || a);
-  return a && f(e, t, a), a;
+import { live as g } from "lit/directives/live.js";
+var f = Object.defineProperty, d = (i, e, a, v) => {
+  for (var t = void 0, r = i.length - 1, p; r >= 0; r--)
+    (p = i[r]) && (t = p(e, a, t) || t);
+  return t && f(e, a, t), t;
 };
 class l extends u {
   constructor() {
@@ -17,11 +18,6 @@ class l extends u {
   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())
@@ -33,11 +29,11 @@ class l extends u {
         .uid=${this.widget.uid}
         .label=${this.adapter.templateData.label}
         .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}
-        .value=${this.adapter.templateData.value}
+        .value=${g(this.adapter.templateData.value)}
         .hint=${this.adapter.templateData.hint}
         .placeholder=${this.adapter.templateData.placeholder}
         .autocomplete=${this.adapter.templateData.autocomplete}
@@ -58,14 +54,14 @@ class l extends u {
         .defaultOpenPreview=${this.adapter.templateData.defaultOpenPreview}
         .maxLength=${this.adapter.templateData.validator?.maxLength}
         .dependencies=${this.adapter.templateData.deps}
-        @input=${this.valueChanged}
-        @blur=${() => this.adapter.onBlur()}
+        @gui-input=${this.valueChanged}
+        @gui-blur=${() => this.adapter.onBlur()}
       ></gui-markdown>
     `;
   }
   valueChanged(e) {
-    const t = e.detail.value;
-    this.adapter.valueChanged(t);
+    const a = e.detail.value;
+    this.adapter.valueChanged(a);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.adapter.destroy(), D(this.subscriptions);

package/{multi-dropdown.element-mX06nBBb.js → multi-dropdown.element-B1vV4rF-.js}

@@ -1,23 +1,24 @@
-import { InputWidgetAdapter as I, formContext as v, inputContext as D } from "@golemui/lit";
+import { InputWidgetAdapter as y, formContext as v, inputContext as D } from "@golemui/lit";
 import { updateListItems as F } from "@golemui/gui-components/internals";
-import { consume as x, provide as L } from "@lit/context";
-import { LitElement as R, nothing as w, html as m } from "lit";
-import { property as C, state as h, query as b } from "lit/decorators.js";
+import { consume as L, provide as R } from "@lit/context";
+import { LitElement as x, nothing as I, html as m } from "lit";
+import { property as C, state as c, query as b } from "lit/decorators.js";
 import { unsubscribeAll as k, cspStyleMap as V, safeDefine as P } from "@golemui/lit/internals";
-import { Subject as S, debounceTime as T } from "rxjs";
+import { Subject as T, debounceTime as S } from "rxjs";
 import { d as A } from "./default-multi-list-item-renderer-Cv-guvEX.js";
 import "@golemui/gui-components/label";
 import "@golemui/gui-components/multi-list";
 import "@golemui/gui-components/multi-select-trigger";
 import "@golemui/gui-components/errors";
-var j = Object.defineProperty, n = (f, e, t, r) => {
-  for (var i = void 0, l = f.length - 1, a; l >= 0; l--)
-    (a = f[l]) && (i = a(e, t, i) || i);
-  return i && j(e, t, i), i;
+import { live as j } from "lit/directives/live.js";
+var q = Object.defineProperty, n = (f, e, t, r) => {
+  for (var i = void 0, l = f.length - 1, o; l >= 0; l--)
+    (o = f[l]) && (i = o(e, t, i) || i);
+  return i && q(e, t, i), i;
 };
-class o extends R {
+class a extends x {
   constructor() {
-    super(...arguments), this.adapter = new I(), this.debouncer = new S(), this.subscriptions = [], this._range = { start: 0, end: 10 }, this._filteredItems = [], this._listItems = [], this._focusedIndex = -1, this._isFiltering = !1, this._isListVisible = !1, this._ignoreNextFocus = !1, this.onDocumentClick = (e) => {
+    super(...arguments), this.adapter = new y(), 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._ignoreNextFocus = !1, this.onDocumentClick = (e) => {
       if (!this._isListVisible) return;
       const t = e.composedPath(), r = this._triggerRef && t.includes(this._triggerRef), i = this._panelRef && t.includes(this._panelRef);
       !r && !i && (this._isListVisible = !1);
@@ -32,18 +33,13 @@ class o extends R {
   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-multi-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(T(this.adapter.templateData.inputDebounce ?? 500)).subscribe((e) => {
+      this.debouncer.pipe(S(this.adapter.templateData.inputDebounce ?? 500)).subscribe((e) => {
         this._filterItems(e);
       })
     );
@@ -61,7 +57,7 @@ class o extends R {
       t
     );
     return e.map((l) => {
-      const a = i.find((u) => u.value === l) ?? this._listItems.find((u) => u.value === l), c = a != null && a.template !== null && typeof a.template == "object", s = a == null ? String(l) : String(c ? a.template[r] : a.template);
+      const o = i.find((u) => u.value === l) ?? this._listItems.find((u) => u.value === l), h = o != null && o.template !== null && typeof o.template == "object", s = o == null ? String(l) : String(h ? o.template[r] : o.template);
       return { key: String(l), label: s };
     });
   }
@@ -113,13 +109,13 @@ class o extends R {
       this._isFiltering = !0, this._isListVisible = !0;
       const i = t.searchFields ?? [t.labelField, t.valueField].filter(
         (s) => !!s
-      ), l = i.length > 0, c = (t.items || []).filter((s) => {
+      ), l = i.length > 0, h = (t.items || []).filter((s) => {
         if (s === null || typeof s != "object")
           return s != null && s.toString().toLowerCase().includes(e.toLowerCase());
         const d = Object.keys(s), p = (g, _) => g || s[_].toString().toLowerCase().includes(e.toLowerCase());
         return l ? d.filter((g) => i.includes(g)).reduce(p, !1) : d.reduce(p, !1);
       });
-      this._filteredItems = [...c];
+      this._filteredItems = [...h];
     } else
       this._isFiltering = !1, this._filteredItems = [...t.items];
   }
@@ -142,10 +138,10 @@ class o extends R {
     t && this.contains(t) || (this.adapter.onBlur(), this._isListVisible = !1, this._isFiltering = !1);
   }
   render() {
-    const e = this.adapter.templateData, t = e.touched && e.errors && e.errors.length > 0, r = this._listItems.slice(this._range.start, this._range.end), i = this._currentValues(), l = this._pillItems(i), a = this.adapter.getItemRenderer(
+    const e = this.adapter.templateData, t = e.touched && e.errors && e.errors.length > 0, r = this._listItems.slice(this._range.start, this._range.end), i = this._currentValues(), l = this._pillItems(i), o = this.adapter.getItemRenderer(
       e.itemRenderer,
       A
-    ), c = !!this.widget.on?.filter;
+    ), h = !!this.widget.on?.filter;
     return m`
       <gui-label
         .targetElement=${[this._listRef, this._triggerRef?.input]}
@@ -180,8 +176,8 @@ class o extends R {
           @keydown=${this._onKeyDown}
           @input=${this._onInput}
           @focusin=${this._onFocusIn}
-          @pillremove=${this._onPillRemove}
-          @dropdowntoggle=${this._onPillsDropdownToggle}
+          @gui-pill-remove=${this._onPillRemove}
+          @gui-dropdown-toggle=${this._onPillsDropdownToggle}
         ></gui-multi-select-trigger>
         <button
           type="button"
@@ -194,17 +190,7 @@ class o extends R {
           @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
@@ -215,23 +201,23 @@ class o extends R {
           <gui-multi-list
             id=${`${this.widget.uid}-list`}
             .uid=${this.widget.uid}
-            .values=${i}
+            .values=${j(i)}
             .valueField=${e.valueField}
-            .items=${this._isFiltering && !c ? this._filteredItems : e.items}
+            .items=${this._isFiltering && !h ? 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}
             @gui-range-change=${this._onRangeChange}
             @gui-update-items=${this._onUpdateItems}
             @gui-focus-change=${this._onFocusChange}
-            @change=${this._onValueChange}
+            @gui-item-toggle=${this._onValueChange}
           >
             ${r.map((s, u) => {
-      const d = this._range.start + u, p = i.includes(s.value), g = this._focusedIndex === d, _ = !!e.disabled || !!s.disabled, $ = e.labelField ?? "label", y = s.template !== null && typeof s.template == "object" && $ && !e.itemRenderer ? s.template[$] : s.template;
+      const d = this._range.start + u, p = i.includes(s.value), g = this._focusedIndex === d, _ = !!e.disabled || !!s.disabled, $ = e.labelField ?? "label", w = s.template !== null && typeof s.template == "object" && $ && !e.itemRenderer ? s.template[$] : s.template;
       return m`
                 <div
                   role="option"
@@ -243,8 +229,8 @@ class o extends R {
                   aria-disabled=${_ ? "true" : "false"}
                   @click=${() => this._onClickItem(s, d)}
                 >
-                  ${a({
-        template: y,
+                  ${o({
+        template: w,
         value: s.value,
         index: d,
         selected: p,
@@ -260,7 +246,7 @@ class o extends R {
                 .uid=${this.widget.uid}
                 .errors=${e.errors}
                 .touched=${e.touched}
-              ></gui-errors>` : w}
+              ></gui-errors>` : I}
         </div>
       </div>
 
@@ -268,45 +254,45 @@ class o extends R {
             .uid=${this.widget.uid}
             .errors=${e.errors}
             .touched=${e.touched}
-          ></gui-errors>` : w}
+          ></gui-errors>` : I}
     `;
   }
 }
 n([
-  x({ context: v }),
+  L({ context: v }),
   C({ attribute: !1 })
-], o.prototype, "formContext");
+], a.prototype, "formContext");
 n([
-  L({ context: D })
-], o.prototype, "adapter");
+  R({ context: D })
+], a.prototype, "adapter");
 n([
-  h()
-], o.prototype, "_range");
+  c()
+], a.prototype, "_range");
 n([
-  h()
-], o.prototype, "_filteredItems");
+  c()
+], a.prototype, "_filteredItems");
 n([
-  h()
-], o.prototype, "_listItems");
+  c()
+], a.prototype, "_listItems");
 n([
-  h()
-], o.prototype, "_focusedIndex");
+  c()
+], a.prototype, "_focusedIndex");
 n([
-  h()
-], o.prototype, "_isFiltering");
+  c()
+], a.prototype, "_isFiltering");
 n([
-  h()
-], o.prototype, "_isListVisible");
+  c()
+], a.prototype, "_isListVisible");
 n([
   b("gui-multi-select-trigger")
-], o.prototype, "_triggerRef");
+], a.prototype, "_triggerRef");
 n([
   b("gui-multi-list")
-], o.prototype, "_listRef");
+], a.prototype, "_listRef");
 n([
   b(".gui-picker__panel")
-], o.prototype, "_panelRef");
-P("gui-multi-dropdown-input", o);
+], a.prototype, "_panelRef");
+P("gui-multi-dropdown-input", a);
 export {
-  o as MultiDropdownElement
+  a as MultiDropdownElement
 };

package/{multi-file-upload.element-DzAZAfc1.js → multi-file-upload.element-4h6JQgRF.js}

@@ -1,27 +1,22 @@
-import { InputWidgetAdapter as n, formContext as d, inputContext as p } from "@golemui/lit";
+import { InputWidgetAdapter as l, formContext as d, inputContext as u } from "@golemui/lit";
 import "@golemui/gui-components/multi-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 { consume as p, provide as c } from "@lit/context";
+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, l = (r, e, t, v) => {
+var f = Object.defineProperty, n = (r, e, t, v) => {
   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 s extends m {
   constructor() {
-    super(...arguments), this.adapter = new n(), this.subscriptions = [];
+    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-multi-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 s extends m {
   render() {
     super.render();
     const e = this.adapter.templateData;
-    return h`
+    return g`
       <gui-multi-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 s 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-multi-file-upload>
     `;
   }
@@ -77,12 +72,12 @@ class s extends m {
     super.disconnectedCallback(), this.adapter.destroy(), $(this.subscriptions);
   }
 }
-l([
-  u({ context: d }),
-  g({ attribute: !1 })
+n([
+  p({ context: d }),
+  h({ attribute: !1 })
 ], s.prototype, "formContext");
-l([
-  c({ context: p })
+n([
+  c({ context: u })
 ], s.prototype, "adapter");
 b("gui-multi-file-upload-input", s);
 export {

package/{multi-list.element-Bs-UN2Cy.js → multi-list.element-CNVHVkj0.js}

@@ -1,30 +1,26 @@
 import { InputWidgetAdapter as $, formContext as v, inputContext as I } from "@golemui/lit";
-import { consume as x, provide as y } from "@lit/context";
+import { consume as y, provide as x } from "@lit/context";
 import { LitElement as C, nothing as u, html as h } from "lit";
-import { property as R, state as p, query as w } from "lit/decorators.js";
+import { property as R, state as c, query as w } from "lit/decorators.js";
 import { unsubscribeAll as D, cspStyleMap as L, safeDefine as k } from "@golemui/lit/internals";
 import "rxjs";
 import { d as F } from "./default-multi-list-item-renderer-Cv-guvEX.js";
 import "@golemui/gui-components/label";
 import "@golemui/gui-components/multi-list";
 import "@golemui/gui-components/errors";
-var q = Object.defineProperty, d = (o, e, t, r) => {
-  for (var i = void 0, l = o.length - 1, s; l >= 0; l--)
-    (s = o[l]) && (i = s(e, t, i) || i);
-  return i && q(e, t, i), i;
+import { live as q } from "lit/directives/live.js";
+var A = Object.defineProperty, d = (o, e, s, a) => {
+  for (var t = void 0, l = o.length - 1, i; l >= 0; l--)
+    (i = o[l]) && (t = i(e, s, t) || t);
+  return t && A(e, s, t), t;
 };
-class a extends C {
+class r extends C {
   constructor() {
     super(...arguments), this.adapter = new $(), this.subscriptions = [], this._range = { start: 0, end: 10 }, this._listItems = [], this._focusedIndex = -1;
   }
   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-multi-list-widget", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
       this.adapter.templateDataChanged$.subscribe(() => {
@@ -37,7 +33,7 @@ class a extends C {
     super.disconnectedCallback(), this.adapter.destroy(), D(this.subscriptions);
   }
   render() {
-    const e = this.adapter.templateData, t = e.touched && e.errors && e.errors.length > 0, r = this._listItems.slice(this._range.start, this._range.end), i = this._currentValues(), l = this.adapter.getItemRenderer(
+    const e = this.adapter.templateData, s = e.touched && e.errors && e.errors.length > 0, a = this._listItems.slice(this._range.start, this._range.end), t = this._currentValues(), l = this.adapter.getItemRenderer(
       e.itemRenderer,
       F
     );
@@ -50,19 +46,21 @@ class a extends C {
         .errors=${e.errors}
         .touched=${e.touched}
         .required=${e.validator?.required}
+        .disabled=${e.disabled}
+        .readOnly=${e.readonly}
         .native=${!1}
       ></gui-label>
 
       <div class="gui-widget">
         <gui-multi-list
           .uid=${this.widget.uid}
-          .values=${i}
+          .values=${q(t)}
           .valueField=${e.valueField}
           .items=${e.items}
           .itemHeight=${e.itemHeight}
           .height=${e.height}
           ?required=${e.validator?.required}
-          ?touched=${e.touched}
+          .touched=${e.touched}
           ?disabled=${e.disabled}
           ?readonly=${e.readonly}
           aria-labelledby=${e.label ? `${this.widget.uid}_label` : u}
@@ -70,11 +68,11 @@ class a extends C {
           @gui-range-change=${this._onRangeChange}
           @gui-update-items=${this._onUpdateItems}
           @gui-focus-change=${this._onFocusChange}
-          @blur=${() => this.adapter.onBlur()}
-          @change=${this._valueChanged}
+          @gui-blur=${() => this.adapter.onBlur()}
+          @gui-item-toggle=${this._valueChanged}
         >
-          ${r.map((s, f) => {
-      const n = this._range.start + f, c = i.includes(s.value), _ = this._focusedIndex === n, g = !!e.disabled || !!s.disabled, m = e.labelField ?? "label", b = s.template !== null && typeof s.template == "object" && m && !e.itemRenderer ? s.template[m] : s.template;
+          ${a.map((i, f) => {
+      const n = this._range.start + f, p = t.includes(i.value), _ = this._focusedIndex === n, g = !!e.disabled || !!i.disabled, m = e.labelField ?? "label", b = i.template !== null && typeof i.template == "object" && m && !e.itemRenderer ? i.template[m] : i.template;
       return h`
               <div
                 role="option"
@@ -82,15 +80,15 @@ class a extends C {
                 class="gui-list__item-wrapper"
                 id="${this.widget.uid}-item-${n}"
                 style=${L({ height: `${e.itemHeight || 40}px` })}
-                aria-selected=${c ? "true" : "false"}
+                aria-selected=${p ? "true" : "false"}
                 aria-disabled=${g ? "true" : "false"}
-                @click=${() => this._onClickItem(s, n)}
+                @click=${() => this._onClickItem(i, n)}
               >
                 ${l({
         template: b,
-        value: s.value,
+        value: i.value,
         index: n,
-        selected: c,
+        selected: p,
         disabled: g,
         focused: _
       })}
@@ -100,7 +98,7 @@ class a extends C {
         </gui-multi-list>
       </div>
 
-      ${t ? h`<gui-errors
+      ${s ? h`<gui-errors
             .uid=${this.widget.uid}
             .errors=${e.errors}
             .touched=${e.touched}
@@ -112,14 +110,14 @@ class a extends C {
     return Array.isArray(e) ? e : [];
   }
   _toggleValue(e) {
-    const t = this.adapter.templateData;
-    if (t.disabled || t.readonly) return;
-    const r = this._currentValues();
-    if (r.includes(e)) {
-      this.adapter.valueChanged(r.filter((i) => i !== e));
+    const s = this.adapter.templateData;
+    if (s.disabled || s.readonly) return;
+    const a = this._currentValues();
+    if (a.includes(e)) {
+      this.adapter.valueChanged(a.filter((t) => t !== e));
       return;
     }
-    this.adapter.valueChanged([...r, e]);
+    this.adapter.valueChanged([...a, e]);
   }
   _onRangeChange(e) {
     this._range = { start: e.detail.startIndex, end: e.detail.endIndex };
@@ -130,33 +128,34 @@ class a extends C {
   _onFocusChange(e) {
     this._focusedIndex = e.detail.index;
   }
-  _onClickItem(e, t) {
-    this.adapter.templateData.disabled || e.disabled || (this._toggleValue(e.value), this._focusedIndex = t, this._guiListRef && typeof this._guiListRef.focusItemAtIndex == "function" && this._guiListRef.focusItemAtIndex(t));
+  _onClickItem(e, s) {
+    const { disabled: a, readonly: t } = this.adapter.templateData;
+    a || t || e.disabled || (this._toggleValue(e.value), this._focusedIndex = s, this._guiListRef && typeof this._guiListRef.focusItemAtIndex == "function" && this._guiListRef.focusItemAtIndex(s));
   }
   _valueChanged(e) {
     this.adapter.templateData.readonly || this._toggleValue(e.detail.value);
   }
 }
 d([
-  x({ context: v }),
+  y({ context: v }),
   R({ attribute: !1 })
-], a.prototype, "formContext");
+], r.prototype, "formContext");
 d([
-  y({ context: I })
-], a.prototype, "adapter");
+  x({ context: I })
+], r.prototype, "adapter");
 d([
-  p()
-], a.prototype, "_range");
+  c()
+], r.prototype, "_range");
 d([
-  p()
-], a.prototype, "_listItems");
+  c()
+], r.prototype, "_listItems");
 d([
-  p()
-], a.prototype, "_focusedIndex");
+  c()
+], r.prototype, "_focusedIndex");
 d([
   w("gui-multi-list")
-], a.prototype, "_guiListRef");
-k("gui-multi-list-input", a);
+], r.prototype, "_guiListRef");
+k("gui-multi-list-input", r);
 export {
-  a as MultiListElement
+  r as MultiListElement
 };