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

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-nOsP8HUx.js}

@@ -1,26 +1,27 @@
-import { InputWidgetAdapter as I, 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 { unsubscribeAll as k, cspStyleMap as V, safeDefine as P } from "@golemui/lit/internals";
-import { Subject as S, debounceTime as T } from "rxjs";
-import { d as A } from "./default-multi-list-item-renderer-Cv-guvEX.js";
+import { InputWidgetAdapter as _, formContext as f, inputContext as b } from "@golemui/lit";
+import { updateListItems as $, selectedPills as w, searchItems as I } from "@golemui/gui-components/internals";
+import { consume as v, provide as y } from "@lit/context";
+import { LitElement as D, nothing as g, html as u } from "lit";
+import { property as L, state as n, query as p } from "lit/decorators.js";
+import { unsubscribeAll as R, cspStyleMap as V, safeDefine as F } from "@golemui/lit/internals";
+import { Subject as k, debounceTime as x } from "rxjs";
+import { d as C } from "./default-multi-list-item-renderer-CG3Fuye0.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 P } from "lit/directives/live.js";
+var T = Object.defineProperty, o = (h, e, t, i) => {
+  for (var s = void 0, a = h.length - 1, d; a >= 0; a--)
+    (d = h[a]) && (s = d(e, t, s) || s);
+  return s && T(e, t, s), s;
 };
-class o extends R {
+class l extends D {
   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 _(), this.debouncer = new k(), this.subscriptions = [], this._visibleItems = [], this._filteredItems = [], this._listItems = [], 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);
+      const t = e.composedPath(), i = this._triggerRef && t.includes(this._triggerRef), s = this._panelRef && t.includes(this._panelRef);
+      !i && !s && (this._isListVisible = !1);
     }, this._onToggleMouseDown = (e) => {
       e.preventDefault();
     }, this._onToggleClick = async (e) => {
@@ -32,69 +33,55 @@ 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(x(this.adapter.templateData.inputDebounce ?? 500)).subscribe((e) => {
         this._filterItems(e);
       })
     );
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), document.removeEventListener("click", this.onDocumentClick), this.adapter.destroy(), k(this.subscriptions);
+    super.disconnectedCallback(), document.removeEventListener("click", this.onDocumentClick), this.adapter.destroy(), R(this.subscriptions);
   }
   _currentValues() {
     const e = this.adapter.templateData.value;
     return Array.isArray(e) ? e : [];
   }
   _pillItems(e) {
-    const t = this.adapter.templateData, r = t.labelField ?? "label", i = F(
+    const t = this.adapter.templateData, i = $(
       t.items ?? [],
       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);
-      return { key: String(l), label: s };
-    });
+    return w(e, i, t.labelField, this._listItems);
   }
   _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 i = this._currentValues();
+    if (i.includes(e)) {
+      this.adapter.valueChanged(i.filter((s) => s !== e));
       return;
     }
-    this.adapter.valueChanged([...r, e]);
+    this.adapter.valueChanged([...i, e]);
   }
   async _openPanel() {
     this._triggerRef?.closePillsDropdown(), this._isListVisible = !0, await this.updateComplete, this._listRef?.scrollToSelectedIndex();
   }
-  _onRangeChange(e) {
-    this._range = { start: e.detail.startIndex, end: e.detail.endIndex };
+  _onVisibleItemsChange(e) {
+    this._visibleItems = e.detail;
   }
   _onUpdateItems(e) {
     this._listItems = e.detail || [];
   }
-  _onFocusChange(e) {
-    this._focusedIndex = e.detail.index;
-  }
-  _onClickItem(e, t) {
-    this.adapter.templateData.readonly || e.disabled || (this._toggleValue(e.value), this._focusedIndex = t, this._listRef && this._listRef.focusItemAtIndex(t));
-  }
   _onValueChange(e) {
     this.adapter.templateData.readonly || this._toggleValue(e.detail.value);
   }
   _onPillRemove(e) {
-    const t = this._currentValues().find((r) => String(r) === e.detail.key);
+    const t = this._currentValues().find((i) => String(i) === e.detail.key);
     t !== void 0 && this._toggleValue(t);
   }
   _onPillsDropdownToggle(e) {
@@ -108,20 +95,12 @@ class o extends R {
     this.debouncer.next(t);
   }
   _filterItems(e) {
-    const t = this.adapter.templateData, r = !!this.widget.on?.filter;
-    if (this.adapter.filterChanged(e), e && !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) => {
-        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];
-    } else
-      this._isFiltering = !1, this._filteredItems = [...t.items];
+    const t = this.adapter.templateData, i = !!this.widget.on?.filter;
+    this.adapter.filterChanged(e), e && !i ? (this._isFiltering = !0, this._isListVisible = !0, this._filteredItems = I(
+      t.items || [],
+      e,
+      t
+    )) : (this._isFiltering = !1, this._filteredItems = [...t.items]);
   }
   _onWidgetKeyDown(e) {
     e.key !== "Escape" || !this._isListVisible || (e.preventDefault(), e.stopPropagation(), this._isListVisible = !1, this._isFiltering = !1, this._ignoreNextFocus = !0, this._triggerRef?.focusInput(), setTimeout(() => {
@@ -130,8 +109,8 @@ class o extends R {
   }
   async _onFocusIn(e) {
     if (this._ignoreNextFocus) return;
-    const t = this._triggerRef?.input, r = this._listRef && e.target === this._listRef;
-    e.target !== t && !r || await this._openPanel();
+    const t = this._triggerRef?.input, i = this._listRef && e.target === this._listRef;
+    e.target !== t && !i || await this._openPanel();
   }
   _onPanelMouseDown(e) {
     const t = e.target;
@@ -142,11 +121,11 @@ 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, i = this._currentValues(), s = this._pillItems(i), a = this.adapter.getItemRenderer(
       e.itemRenderer,
-      A
-    ), c = !!this.widget.on?.filter;
-    return m`
+      C
+    ), d = !!this.widget.on?.filter;
+    return u`
       <gui-label
         .targetElement=${[this._listRef, this._triggerRef?.input]}
         .uid=${this.widget.uid}
@@ -161,7 +140,7 @@ class o extends R {
       <div class="gui-widget" @keydown=${this._onWidgetKeyDown} @focusout=${this._onFocusOut}>
         <gui-multi-select-trigger
           .uid=${this.widget.uid}
-          .pills=${l}
+          .pills=${s}
           .errors=${e.errors}
           .touched=${!!e.touched}
           ?required=${e.validator?.required}
@@ -176,12 +155,12 @@ class o extends R {
           .panelId=${`${this.widget.uid}-list`}
           .removeAriaLabel=${e.removeAriaLabel}
           .removeIcon=${e.removeIcon}
-          .compactAriaLabel=${`${l.length} selected`}
+          .compactAriaLabel=${`${s.length} selected`}
           @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 +173,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,98 +184,93 @@ class o extends R {
           <gui-multi-list
             id=${`${this.widget.uid}-list`}
             .uid=${this.widget.uid}
-            .values=${i}
+            .values=${P(i)}
             .valueField=${e.valueField}
-            .items=${this._isFiltering && !c ? this._filteredItems : e.items}
+            .items=${this._isFiltering && !d ? 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-visible-items-change=${this._onVisibleItemsChange}
             @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;
-      return m`
+            ${this._visibleItems.map((r) => {
+      const c = e.labelField ?? "label", m = r.template !== null && typeof r.template == "object" && c && !e.itemRenderer ? r.template[c] : r.template;
+      return u`
                 <div
                   role="option"
                   tabindex="-1"
                   class="gui-list__item-wrapper"
-                  id="${this.widget.uid}-item-${d}"
+                  id=${r.id}
                   style=${V({ height: `${e.itemHeight || 40}px` })}
-                  aria-selected=${p ? "true" : "false"}
-                  aria-disabled=${_ ? "true" : "false"}
-                  @click=${() => this._onClickItem(s, d)}
+                  aria-selected=${r.selected ? "true" : "false"}
+                  aria-disabled=${r.disabled ? "true" : "false"}
                 >
                   ${a({
-        template: y,
-        value: s.value,
-        index: d,
-        selected: p,
-        disabled: _,
-        focused: g
+        template: m,
+        value: r.value,
+        index: r.index,
+        selected: r.selected,
+        disabled: r.disabled,
+        focused: r.focused
       })}
                 </div>
               `;
     })}
           </gui-multi-list>
-          ${t ? m`<gui-errors
+          ${t ? u`<gui-errors
                 panel
                 .uid=${this.widget.uid}
                 .errors=${e.errors}
                 .touched=${e.touched}
-              ></gui-errors>` : w}
+              ></gui-errors>` : g}
         </div>
       </div>
 
-      ${t ? m`<gui-errors
+      ${t ? u`<gui-errors
             .uid=${this.widget.uid}
             .errors=${e.errors}
             .touched=${e.touched}
-          ></gui-errors>` : w}
+          ></gui-errors>` : g}
     `;
   }
 }
-n([
-  x({ context: v }),
-  C({ attribute: !1 })
-], o.prototype, "formContext");
-n([
-  L({ context: D })
-], o.prototype, "adapter");
-n([
-  h()
-], o.prototype, "_range");
-n([
-  h()
-], o.prototype, "_filteredItems");
-n([
-  h()
-], o.prototype, "_listItems");
-n([
-  h()
-], o.prototype, "_focusedIndex");
-n([
-  h()
-], o.prototype, "_isFiltering");
-n([
-  h()
-], o.prototype, "_isListVisible");
-n([
-  b("gui-multi-select-trigger")
-], o.prototype, "_triggerRef");
-n([
-  b("gui-multi-list")
-], o.prototype, "_listRef");
-n([
-  b(".gui-picker__panel")
-], o.prototype, "_panelRef");
-P("gui-multi-dropdown-input", o);
+o([
+  v({ context: f }),
+  L({ attribute: !1 })
+], l.prototype, "formContext");
+o([
+  y({ context: b })
+], l.prototype, "adapter");
+o([
+  n()
+], l.prototype, "_visibleItems");
+o([
+  n()
+], l.prototype, "_filteredItems");
+o([
+  n()
+], l.prototype, "_listItems");
+o([
+  n()
+], l.prototype, "_isFiltering");
+o([
+  n()
+], l.prototype, "_isListVisible");
+o([
+  p("gui-multi-select-trigger")
+], l.prototype, "_triggerRef");
+o([
+  p("gui-multi-list")
+], l.prototype, "_listRef");
+o([
+  p(".gui-picker__panel")
+], l.prototype, "_panelRef");
+F("gui-multi-dropdown-input", l);
 export {
-  o as MultiDropdownElement
+  l 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 {