@golemui/gui-lit 1.3.0 → 1.4.0-rc.0

package/lib/components/accordion.element.d.ts

@@ -1,4 +1,4 @@
-import { FormWidget, LayoutWidget, WithWidget } from '@golemui/core';
+import { LayoutWidget, WithWidget } from '@golemui/core';
 import { LayoutWidgetAdapter, LitFormContext } from '@golemui/lit';
 import { AccordionProps } from '@golemui/gui-shared/internals';
 import { LitElement } from 'lit';
@@ -11,11 +11,12 @@ export declare class AccordionElement extends LitElement implements WithWidget {
     formContext: LitFormContext<any>;
     adapter: LayoutWidgetAdapter<AccordionProps>;
     subscriptions: Subscription[];
+    private rowIndexSuffix;
     createRenderRoot(): this;
     updated(changedProperties: any): void;
     connectedCallback(): void;
     onClickButton(uid: string): void;
-    getChild(uid: string): FormWidget<string>;
+    getChild(uid: string): import('@golemui/core').NonFunctionWidget<string> | undefined;
     render(): import('lit-html').TemplateResult<1>;
     disconnectedCallback(): void;
 }

package/lib/components/default-multi-list-item-renderer.d.ts

@@ -0,0 +1,2 @@
+import { ItemRenderContext } from '@golemui/core';
+export declare const defaultMultiListItemRenderer: (ctx: ItemRenderContext<any>) => import('lit-html').TemplateResult<1>;

package/lib/components/dropdown.element.d.ts

@@ -35,8 +35,9 @@ export declare class DropdownElement extends LitElement implements WithWidget {
     private _filterItems;
     private _onWidgetKeyDown;
     private _onFocus;
+    private _onToggleMouseDown;
+    private _onToggleClick;
     private _onPanelMouseDown;
-    private _onFocusOutInput;
-    private _onBlur;
+    private _onFocusOut;
     render(): import('lit-html').TemplateResult<1>;
 }

package/lib/components/multi-dropdown.element.d.ts

@@ -0,0 +1,48 @@
+import { InputWidget, WithWidget } from '@golemui/core';
+import { InputWidgetAdapter, LitFormContext } from '@golemui/lit';
+import { MultiDropdownProps, OptionValue } from '@golemui/gui-shared/internals';
+import { LitElement } from 'lit';
+import { Subject, Subscription } from 'rxjs';
+export declare class MultiDropdownElement extends LitElement implements WithWidget {
+    widget: InputWidget<OptionValue[]>;
+    formContext: LitFormContext<any>;
+    adapter: InputWidgetAdapter<OptionValue[], MultiDropdownProps<any>>;
+    debouncer: Subject<string>;
+    subscriptions: Subscription[];
+    private _range;
+    private _filteredItems;
+    private _listItems;
+    private _focusedIndex;
+    private _isFiltering;
+    private _isListVisible;
+    private _triggerRef;
+    private _listRef;
+    private _panelRef;
+    private _ignoreNextFocus;
+    onDocumentClick: (event: MouseEvent) => void;
+    createRenderRoot(): this;
+    updated(changedProperties: any): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _currentValues;
+    private _pillItems;
+    private _toggleValue;
+    private _openPanel;
+    private _onRangeChange;
+    private _onUpdateItems;
+    private _onFocusChange;
+    private _onClickItem;
+    private _onValueChange;
+    private _onPillRemove;
+    private _onPillsDropdownToggle;
+    private _onKeyDown;
+    private _onInput;
+    private _filterItems;
+    private _onWidgetKeyDown;
+    private _onFocusIn;
+    private _onToggleMouseDown;
+    private _onToggleClick;
+    private _onPanelMouseDown;
+    private _onFocusOut;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/lib/components/multi-list.element.d.ts

@@ -0,0 +1,27 @@
+import { InputWidget, WithWidget } from '@golemui/core';
+import { InputWidgetAdapter, LitFormContext } from '@golemui/lit';
+import { MultiListProps, OptionValue } from '@golemui/gui-shared/internals';
+import { LitElement } from 'lit';
+import { Subscription } from 'rxjs';
+export declare class MultiListElement extends LitElement implements WithWidget {
+    widget: InputWidget<OptionValue[]>;
+    formContext: LitFormContext<any>;
+    adapter: InputWidgetAdapter<OptionValue[], MultiListProps<any>>;
+    subscriptions: Subscription[];
+    private _range;
+    private _listItems;
+    private _focusedIndex;
+    private _guiListRef;
+    createRenderRoot(): this;
+    updated(changedProperties: any): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+    private _currentValues;
+    private _toggleValue;
+    private _onRangeChange;
+    private _onUpdateItems;
+    private _onFocusChange;
+    private _onClickItem;
+    private _valueChanged;
+}

package/lib/components/tabs.element.d.ts

@@ -14,8 +14,11 @@ export declare class TabsElement extends LitElement implements WithWidget {
     formContext: LitFormContext<any>;
     adapter: LayoutWidgetAdapter<TabsProps>;
     subscriptions: Subscription[];
+    private rowIndexSuffix;
     private startObserver?;
     private endObserver?;
+    private get activeChildUid();
+    private childUid;
     createRenderRoot(): this;
     updated(changedProperties: any): void;
     connectedCallback(): void;

package/{list.element-ZtEMKE2x.js → list.element-DD5IL4QB.js}

@@ -2,16 +2,16 @@ import { InputWidgetAdapter as _, formContext as $, inputContext as v } from "@g
 import { consume as I, provide as x } from "@lit/context";
 import { LitElement as y, nothing as o, html as u } from "lit";
 import { property as C, state as h, query as R } from "lit/decorators.js";
-import { safeDefine as w } from "@golemui/lit/internals";
+import { unsubscribeAll as w, safeDefine as D } from "@golemui/lit/internals";
 import "rxjs";
-import { d as D } from "./default-list-item-renderer-CuPJ9jUD.js";
+import { d as L } from "./default-list-item-renderer-CuPJ9jUD.js";
 import "@golemui/gui-components/label";
 import "@golemui/gui-components/list";
 import "@golemui/gui-components/errors";
-var L = Object.defineProperty, r = (n, e, i, p) => {
+var k = Object.defineProperty, r = (n, e, i, p) => {
   for (var s = void 0, t = n.length - 1, d; t >= 0; t--)
     (d = n[t]) && (s = d(e, i, s) || s);
-  return s && L(e, i, s), s;
+  return s && k(e, i, s), s;
 };
 class a extends y {
   constructor() {
@@ -34,12 +34,12 @@ class a extends y {
     );
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((e) => e.unsubscribe());
+    super.disconnectedCallback(), this.adapter.destroy(), w(this.subscriptions);
   }
   render() {
     const e = this.adapter.templateData, i = e.touched && e.errors && e.errors.length > 0, p = this._listItems.slice(this._range.start, this._range.end), s = this.adapter.getItemRenderer(
       e.itemRenderer,
-      D
+      L
     );
     return u`
       <gui-label
@@ -142,7 +142,7 @@ r([
 r([
   R("gui-list")
 ], a.prototype, "_guiListRef");
-w("gui-list-input", a);
+D("gui-list-input", a);
 export {
   a as ListElement
 };

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

@@ -1,26 +1,26 @@
 import { LitElement as p, html as n } from "lit";
 import { property as l } from "lit/decorators.js";
-import { safeDefine as m } from "@golemui/lit/internals";
-import { consume as c, provide as u } from "@lit/context";
-import { DisplayWidgetAdapter as h, formContext as f, displayWidgetContext as x } from "@golemui/lit";
+import { unsubscribeAll as m, safeDefine as c } 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 "@golemui/gui-components/markdown-text";
 import "rxjs";
-var g = Object.defineProperty, o = (i, t, r, b) => {
-  for (var e = void 0, s = i.length - 1, d; s >= 0; s--)
-    (d = i[s]) && (e = d(t, r, e) || e);
-  return e && g(t, r, e), e;
+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;
 };
 class a extends p {
   constructor() {
-    super(...arguments), this.adapter = new h(), this.subscriptions = [];
+    super(...arguments), this.adapter = new f(), this.subscriptions = [];
   }
   createRenderRoot() {
     return this;
   }
-  updated(t) {
-    super.updated(t);
-    const r = this.adapter.templateData.size;
-    r ? this.style.flex = String(r) : this.style.removeProperty("flex");
+  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(
@@ -38,17 +38,17 @@ class a extends p {
     `;
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
+    super.disconnectedCallback(), this.adapter.destroy(), m(this.subscriptions);
   }
 }
 o([
-  c({ context: f }),
+  u({ context: x }),
   l({ attribute: !1 })
 ], a.prototype, "formContext");
 o([
-  u({ context: x })
+  h({ context: g })
 ], a.prototype, "adapter");
-m("gui-markdown-text-display", a);
+c("gui-markdown-text-display", a);
 export {
   a as MarkdownTextElement
 };

package/{markdown.element-DWz3U9rG.js → markdown.element-DUHHoi2Y.js}

@@ -3,12 +3,12 @@ import "@golemui/gui-components/markdown";
 import { consume as h, provide as m } from "@lit/context";
 import { LitElement as u, html as c } from "lit";
 import { property as $ } from "lit/decorators.js";
-import { safeDefine as D } from "@golemui/lit/internals";
+import { unsubscribeAll as D, safeDefine as b } from "@golemui/lit/internals";
 import "rxjs";
-var b = Object.defineProperty, d = (i, t, e, f) => {
+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(t, e, a) || a);
-  return a && b(t, e, a), a;
+    (p = i[r]) && (a = p(e, t, a) || a);
+  return a && f(e, t, a), a;
 };
 class l extends u {
   constructor() {
@@ -17,10 +17,10 @@ class l extends u {
   createRenderRoot() {
     return this;
   }
-  updated(t) {
-    super.updated(t);
-    const e = this.adapter.templateData.size;
-    e ? this.style.flex = String(e) : this.style.removeProperty("flex");
+  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(
@@ -63,12 +63,12 @@ class l extends u {
       ></gui-markdown>
     `;
   }
-  valueChanged(t) {
-    const e = t.detail.value;
-    this.adapter.valueChanged(e);
+  valueChanged(e) {
+    const t = e.detail.value;
+    this.adapter.valueChanged(t);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
+    super.disconnectedCallback(), this.adapter.destroy(), D(this.subscriptions);
   }
 }
 d([
@@ -78,7 +78,7 @@ d([
 d([
   m({ context: n })
 ], l.prototype, "adapter");
-D("gui-markdown-input", l);
+b("gui-markdown-input", l);
 export {
   l as MarkdownElement
 };

package/multi-dropdown.element-iEOlPvux.js

@@ -0,0 +1,312 @@
+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 { unsubscribeAll as k, safeDefine as V } from "@golemui/lit/internals";
+import { Subject as P, debounceTime as T } from "rxjs";
+import { d as S } 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 A = 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 && A(e, t, i), i;
+};
+class o extends R {
+  constructor() {
+    super(...arguments), this.adapter = new y(), this.debouncer = new P(), 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);
+    }, this._onToggleMouseDown = (e) => {
+      e.preventDefault();
+    }, this._onToggleClick = async (e) => {
+      e.stopPropagation(), this._isListVisible ? (this._isListVisible = !1, this._isFiltering = !1, this._ignoreNextFocus = !0, this._triggerRef?.focusInput(), setTimeout(() => {
+        this._ignoreNextFocus = !1;
+      })) : (this._triggerRef?.focusInput(), await this._openPanel());
+    };
+  }
+  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.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._filterItems(e);
+      })
+    );
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this.onDocumentClick), this.adapter.destroy(), k(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(
+      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 };
+    });
+  }
+  _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));
+      return;
+    }
+    this.adapter.valueChanged([...r, 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 };
+  }
+  _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);
+    t !== void 0 && this._toggleValue(t);
+  }
+  _onPillsDropdownToggle(e) {
+    e.detail?.open && this._isListVisible && (this._isListVisible = !1);
+  }
+  async _onKeyDown(e) {
+    e.key === "ArrowDown" && (e.preventDefault(), await this._openPanel(), this._listRef?.focus());
+  }
+  _onInput(e) {
+    const t = e.target.value;
+    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];
+  }
+  _onWidgetKeyDown(e) {
+    e.key !== "Escape" || !this._isListVisible || (e.preventDefault(), e.stopPropagation(), this._isListVisible = !1, this._isFiltering = !1, this._ignoreNextFocus = !0, this._triggerRef?.focusInput(), setTimeout(() => {
+      this._ignoreNextFocus = !1;
+    }));
+  }
+  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();
+  }
+  _onPanelMouseDown(e) {
+    const t = e.target;
+    this._listRef && this._listRef.contains(t) || e.preventDefault();
+  }
+  _onFocusOut(e) {
+    const t = e.relatedTarget;
+    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(
+      e.itemRenderer,
+      S
+    ), c = !!this.widget.on?.filter;
+    return m`
+      <gui-label
+        .targetElement=${[this._listRef, this._triggerRef?.input]}
+        .uid=${this.widget.uid}
+        .label=${e.label}
+        .hint=${e.hint}
+        .errors=${e.errors}
+        .touched=${e.touched}
+        .required=${e.validator?.required}
+        .native=${!1}
+      ></gui-label>
+
+      <div class="gui-widget" @keydown=${this._onWidgetKeyDown} @focusout=${this._onFocusOut}>
+        <gui-multi-select-trigger
+          .uid=${this.widget.uid}
+          .pills=${l}
+          .errors=${e.errors}
+          .touched=${!!e.touched}
+          ?required=${e.validator?.required}
+          ?disabled=${e.disabled}
+          ?readonly=${e.readonly}
+          .placeholder=${e.placeholder ?? ""}
+          .icon=${e.icon}
+          .autocomplete=${e.autocomplete}
+          .hasLabel=${!!e.label}
+          .hasHint=${!!e.hint}
+          .panelOpen=${this._isListVisible}
+          .panelId=${`${this.widget.uid}-list`}
+          .removeAriaLabel=${e.removeAriaLabel}
+          .removeIcon=${e.removeIcon}
+          .compactAriaLabel=${`${l.length} selected`}
+          @keydown=${this._onKeyDown}
+          @input=${this._onInput}
+          @focusin=${this._onFocusIn}
+          @pillremove=${this._onPillRemove}
+          @dropdowntoggle=${this._onPillsDropdownToggle}
+        ></gui-multi-select-trigger>
+        <button
+          type="button"
+          class="gui-dropdown__arrow"
+          aria-label=${e.toggleAriaLabel ?? "Show options"}
+          aria-haspopup="listbox"
+          aria-expanded=${this._isListVisible ? "true" : "false"}
+          aria-controls=${`${this.widget.uid}-list`}
+          ?disabled=${e.disabled}
+          @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>
+        </button>
+
+        <div
+          class="gui-picker__panel"
+          ?hidden=${!this._isListVisible}
+          @mousedown=${this._onPanelMouseDown}
+        >
+          <gui-multi-list
+            id=${`${this.widget.uid}-list`}
+            .uid=${this.widget.uid}
+            .values=${i}
+            .valueField=${e.valueField}
+            .items=${this._isFiltering && !c ? this._filteredItems : e.items}
+            .itemHeight=${e.itemHeight}
+            .height=${e.height}
+            ?required=${e.validator?.required}
+            ?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}
+          >
+            ${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", I = s.template !== null && typeof s.template == "object" && $ && !e.itemRenderer ? s.template[$] : s.template;
+      return m`
+                <div
+                  role="option"
+                  tabindex="-1"
+                  class="gui-list__item-wrapper"
+                  id="${this.widget.uid}-item-${d}"
+                  style="height: ${e.itemHeight || 40}px"
+                  aria-selected=${p ? "true" : "false"}
+                  aria-disabled=${_ ? "true" : "false"}
+                  @click=${() => this._onClickItem(s, d)}
+                >
+                  ${a({
+        template: I,
+        value: s.value,
+        index: d,
+        selected: p,
+        disabled: _,
+        focused: g
+      })}
+                </div>
+              `;
+    })}
+          </gui-multi-list>
+          ${t ? m`<gui-errors
+                panel
+                .uid=${this.widget.uid}
+                .errors=${e.errors}
+                .touched=${e.touched}
+              ></gui-errors>` : w}
+        </div>
+      </div>
+
+      ${t ? m`<gui-errors
+            .uid=${this.widget.uid}
+            .errors=${e.errors}
+            .touched=${e.touched}
+          ></gui-errors>` : w}
+    `;
+  }
+}
+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");
+V("gui-multi-dropdown-input", o);
+export {
+  o as MultiDropdownElement
+};