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

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

@@ -9,10 +9,9 @@ export declare class DropdownElement extends LitElement implements WithWidget {
     adapter: InputWidgetAdapter<string, DropdownProps<never>>;
     debouncer: Subject<string>;
     subscriptions: Subscription[];
-    private _range;
+    private _visibleItems;
     private _filteredItems;
     private _listItems;
-    private _focusedIndex;
     private _isFiltering;
     private _isListVisible;
     private _selectedItem;
@@ -24,10 +23,8 @@ export declare class DropdownElement extends LitElement implements WithWidget {
     createRenderRoot(): this;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    private _onRangeChange;
+    private _onVisibleItemsChange;
     private _onUpdateItems;
-    private _onFocusChange;
-    private _onClickItem;
     private _onValueChange;
     private _onKeyDown;
     private _onInput;

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

@@ -8,17 +8,12 @@ export declare class ListElement extends LitElement implements WithWidget {
     formContext: LitFormContext<any>;
     adapter: InputWidgetAdapter<string, ListProps<any>>;
     subscriptions: Subscription[];
-    private _range;
-    private _listItems;
-    private _focusedIndex;
+    private _visibleItems;
     private _guiListRef;
     createRenderRoot(): this;
     connectedCallback(): void;
     disconnectedCallback(): void;
     render(): import('lit-html').TemplateResult<1>;
-    private _onRangeChange;
-    private _onUpdateItems;
-    private _onFocusChange;
-    private _onClickItem;
+    private _onVisibleItemsChange;
     private _valueChanged;
 }

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

@@ -9,10 +9,9 @@ export declare class MultiDropdownElement extends LitElement implements WithWidg
     adapter: InputWidgetAdapter<OptionValue[], MultiDropdownProps<any>>;
     debouncer: Subject<string>;
     subscriptions: Subscription[];
-    private _range;
+    private _visibleItems;
     private _filteredItems;
     private _listItems;
-    private _focusedIndex;
     private _isFiltering;
     private _isListVisible;
     private _triggerRef;
@@ -27,10 +26,8 @@ export declare class MultiDropdownElement extends LitElement implements WithWidg
     private _pillItems;
     private _toggleValue;
     private _openPanel;
-    private _onRangeChange;
+    private _onVisibleItemsChange;
     private _onUpdateItems;
-    private _onFocusChange;
-    private _onClickItem;
     private _onValueChange;
     private _onPillRemove;
     private _onPillsDropdownToggle;

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

@@ -8,9 +8,7 @@ export declare class MultiListElement extends LitElement implements WithWidget {
     formContext: LitFormContext<any>;
     adapter: InputWidgetAdapter<OptionValue[], MultiListProps<any>>;
     subscriptions: Subscription[];
-    private _range;
-    private _listItems;
-    private _focusedIndex;
+    private _visibleItems;
     private _guiListRef;
     createRenderRoot(): this;
     connectedCallback(): void;
@@ -18,9 +16,6 @@ export declare class MultiListElement extends LitElement implements WithWidget {
     render(): import('lit-html').TemplateResult<1>;
     private _currentValues;
     private _toggleValue;
-    private _onRangeChange;
-    private _onUpdateItems;
-    private _onFocusChange;
-    private _onClickItem;
+    private _onVisibleItemsChange;
     private _valueChanged;
 }

package/list.element-CIrv32zU.js

@@ -0,0 +1,125 @@
+import { InputWidgetAdapter as h, formContext as c, inputContext as b } from "@golemui/lit";
+import { consume as m, provide as g } from "@lit/context";
+import { LitElement as $, nothing as o, html as n } from "lit";
+import { property as f, state as v, query as _ } from "lit/decorators.js";
+import { unsubscribeAll as y, cspStyleMap as C, safeDefine as x } from "@golemui/lit/internals";
+import "rxjs";
+import { d as w } from "./default-list-item-renderer-sJeXkSKR.js";
+import "@golemui/gui-components/label";
+import "@golemui/gui-components/list";
+import "@golemui/gui-components/errors";
+import { live as I } from "lit/directives/live.js";
+var R = Object.defineProperty, a = (d, e, s, u) => {
+  for (var t = void 0, i = d.length - 1, l; i >= 0; i--)
+    (l = d[i]) && (t = l(e, s, t) || t);
+  return t && R(e, s, t), t;
+};
+class r extends $ {
+  constructor() {
+    super(...arguments), this.adapter = new h(), this.subscriptions = [], this._visibleItems = [];
+  }
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-list", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
+      this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
+    );
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.adapter.destroy(), y(this.subscriptions);
+  }
+  render() {
+    const e = this.adapter.templateData, s = e.touched && e.errors && e.errors.length > 0, u = this.adapter.getItemRenderer(
+      e.itemRenderer,
+      w
+    );
+    return n`
+      <gui-label
+        .targetElement=${this._guiListRef}
+        .uid=${this.widget.uid}
+        .label=${e.label}
+        .hint=${e.hint}
+        .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-list
+          .uid=${this.widget.uid}
+          .value=${I(e.value ?? "")}
+          .valueField=${e.valueField}
+          .items=${e.items}
+          .itemHeight=${e.itemHeight}
+          .height=${e.height}
+          ?required=${e.validator?.required}
+          .touched=${e.touched}
+          ?disabled=${e.disabled}
+          ?readonly=${e.readonly}
+          aria-labelledby=${e.label ? `${this.widget.uid}_label` : o}
+          aria-describedby=${e.hint ? `${this.widget.uid}_hint` : o}
+          @gui-visible-items-change=${this._onVisibleItemsChange}
+          @gui-blur=${() => this.adapter.onBlur()}
+          @gui-input=${this._valueChanged}
+        >
+          ${this._visibleItems.map((t) => {
+      const i = e.labelField ?? "label", p = t.template !== null && typeof t.template == "object" && i && !e.itemRenderer ? t.template[i] : t.template;
+      return n`
+              <div
+                role="option"
+                tabindex="-1"
+                class="gui-list__item-wrapper"
+                id=${t.id}
+                style=${C({ height: `${e.itemHeight || 40}px` })}
+                aria-selected=${t.selected ? "true" : "false"}
+                aria-disabled=${t.disabled ? "true" : "false"}
+              >
+                ${u({
+        template: p,
+        value: t.value,
+        index: t.index,
+        selected: t.selected,
+        disabled: t.disabled,
+        focused: t.focused
+      })}
+              </div>
+            `;
+    })}
+        </gui-list>
+      </div>
+
+      ${s ? n`<gui-errors
+            .uid=${this.widget.uid}
+            .errors=${e.errors}
+            .touched=${e.touched}
+          ></gui-errors>` : o}
+    `;
+  }
+  _onVisibleItemsChange(e) {
+    this._visibleItems = e.detail;
+  }
+  _valueChanged(e) {
+    this.adapter.templateData.readonly || this.adapter.valueChanged(e.detail.value);
+  }
+}
+a([
+  m({ context: c }),
+  f({ attribute: !1 })
+], r.prototype, "formContext");
+a([
+  g({ context: b })
+], r.prototype, "adapter");
+a([
+  v()
+], r.prototype, "_visibleItems");
+a([
+  _("gui-list")
+], r.prototype, "_guiListRef");
+x("gui-list-input", r);
+export {
+  r as ListElement
+};

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

@@ -1,27 +1,27 @@
-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 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 T, debounceTime as S } 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";
-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;
+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 a extends x {
+class l extends D {
   constructor() {
-    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) => {
+    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) => {
@@ -39,58 +39,49 @@ class a extends x {
         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(S(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 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 };
-    });
+    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) {
@@ -104,20 +95,12 @@ class a extends x {
     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, 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 = [...h];
-    } 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(() => {
@@ -126,8 +109,8 @@ class a extends x {
   }
   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;
@@ -138,11 +121,11 @@ class a extends x {
     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), o = 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
-    ), h = !!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}
@@ -157,7 +140,7 @@ class a extends x {
       <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}
@@ -172,7 +155,7 @@ class a extends x {
           .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}
@@ -201,9 +184,9 @@ class a extends x {
           <gui-multi-list
             id=${`${this.widget.uid}-list`}
             .uid=${this.widget.uid}
-            .values=${j(i)}
+            .values=${P(i)}
             .valueField=${e.valueField}
-            .items=${this._isFiltering && !h ? this._filteredItems : e.items}
+            .items=${this._isFiltering && !d ? this._filteredItems : e.items}
             .itemHeight=${e.itemHeight}
             .height=${e.height}
             ?required=${e.validator?.required}
@@ -211,88 +194,83 @@ class a extends x {
             ?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}
             @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", w = 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"}
                 >
-                  ${o({
-        template: w,
-        value: s.value,
-        index: d,
-        selected: p,
-        disabled: _,
-        focused: g
+                  ${a({
+        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>` : I}
+              ></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>` : I}
+          ></gui-errors>` : g}
     `;
   }
 }
-n([
-  L({ context: v }),
-  C({ attribute: !1 })
-], a.prototype, "formContext");
-n([
-  R({ context: D })
-], a.prototype, "adapter");
-n([
-  c()
-], a.prototype, "_range");
-n([
-  c()
-], a.prototype, "_filteredItems");
-n([
-  c()
-], a.prototype, "_listItems");
-n([
-  c()
-], a.prototype, "_focusedIndex");
-n([
-  c()
-], a.prototype, "_isFiltering");
-n([
-  c()
-], a.prototype, "_isListVisible");
-n([
-  b("gui-multi-select-trigger")
-], a.prototype, "_triggerRef");
-n([
-  b("gui-multi-list")
-], a.prototype, "_listRef");
-n([
-  b(".gui-picker__panel")
-], a.prototype, "_panelRef");
-P("gui-multi-dropdown-input", a);
+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 {
-  a as MultiDropdownElement
+  l as MultiDropdownElement
 };