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

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

@@ -1,18 +1,18 @@
 import { InputWidgetAdapter as l, formContext as n, inputContext as o } from "@golemui/lit";
 import { addIcon as m } from "@golemui/gui-components/internals";
-import { safeDefine as h } from "@golemui/lit/internals";
+import { unsubscribeAll as h, safeDefine as u } from "@golemui/lit/internals";
 import "@golemui/gui-components/date-input";
-import { consume as u, provide as c } from "@lit/context";
-import { LitElement as D, html as g } from "lit";
-import { property as $ } from "lit/decorators.js";
+import { consume as c, provide as D } from "@lit/context";
+import { LitElement as g, html as $ } from "lit";
+import { property as b } from "lit/decorators.js";
 import "rxjs";
-import { classMap as b } from "lit/directives/class-map.js";
-var f = Object.defineProperty, d = (r, t, a, v) => {
+import { classMap as f } from "lit/directives/class-map.js";
+var v = Object.defineProperty, d = (r, t, a, x) => {
   for (var e = void 0, i = r.length - 1, p; i >= 0; i--)
     (p = r[i]) && (e = p(t, a, e) || e);
-  return e && f(t, a, e), e;
+  return e && v(t, a, e), e;
 };
-class s extends D {
+class s extends g {
   constructor() {
     super(...arguments), this.adapter = new l(), this.subscriptions = [];
   }
@@ -32,9 +32,9 @@ class s extends D {
   render() {
     super.render();
     const t = m("date", this.adapter.templateData);
-    return g`
+    return $`
       <gui-date
-        class=${b(t.widgetClasses)}
+        class=${f(t.widgetClasses)}
         .uid=${this.widget.uid}
         .label=${this.adapter.templateData.label}
         .hint=${this.adapter.templateData.hint}
@@ -68,17 +68,17 @@ class s extends D {
     this.adapter.injectValidationIssues([t.detail.message]);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
+    super.disconnectedCallback(), this.adapter.destroy(), h(this.subscriptions);
   }
 }
 d([
-  u({ context: n }),
-  $({ attribute: !1 })
+  c({ context: n }),
+  b({ attribute: !1 })
 ], s.prototype, "formContext");
 d([
-  c({ context: o })
+  D({ context: o })
 ], s.prototype, "adapter");
-h("gui-date-input", s);
+u("gui-date-input", s);
 export {
   s as DateElement
 };

package/default-multi-list-item-renderer-Cv-guvEX.js

@@ -0,0 +1,31 @@
+import { html as i } from "lit";
+import { classMap as t } from "lit/directives/class-map.js";
+import "@golemui/core";
+const r = (e) => {
+  const s = {
+    "gui-list__item": !0,
+    "gui-list__item-selected": !!e.selected,
+    "gui-list__item-focused": !!e.focused,
+    "gui-list__item-disabled": !!e.disabled
+  };
+  return i`
+    <div
+      role="option"
+      class=${t(s)}
+      aria-selected=${e.selected ? "true" : "false"}
+      aria-disabled=${e.disabled ? "true" : "false"}
+    >
+      <span class="gui-list__item-check" aria-hidden="true">
+        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 256 256">
+          <path
+            d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
+          ></path>
+        </svg>
+      </span>
+      ${e.template}
+    </div>
+  `;
+};
+export {
+  r as d
+};

package/{dropdown.element-Dg80G2PL.js → dropdown.element-D9wMyqWQ.js}

@@ -1,24 +1,31 @@
-import { InputWidgetAdapter as y, formContext as F, inputContext as x } from "@golemui/lit";
-import { consume as C, provide as D } from "@lit/context";
-import { LitElement as R, nothing as p, html as f } from "lit";
-import { property as L, state as d, query as $ } from "lit/decorators.js";
-import { safeDefine as k } from "@golemui/lit/internals";
-import { Subject as V, debounceTime as j } from "rxjs";
-import { d as P } from "./default-list-item-renderer-CuPJ9jUD.js";
+import { InputWidgetAdapter as F, formContext as x, inputContext as C } from "@golemui/lit";
+import { consume as D, provide as R } from "@lit/context";
+import { LitElement as L, nothing as p, html as _ } from "lit";
+import { classMap as v } from "lit/directives/class-map.js";
+import { property as k, state as d, query as $ } from "lit/decorators.js";
+import { unsubscribeAll as V, safeDefine as P } from "@golemui/lit/internals";
+import { Subject as S, debounceTime as T } from "rxjs";
+import { d as j } from "./default-list-item-renderer-CuPJ9jUD.js";
 import "@golemui/gui-components/label";
 import "@golemui/gui-components/list";
 import "@golemui/gui-components/errors";
-var S = Object.defineProperty, l = (m, e, t, s) => {
-  for (var i = void 0, u = m.length - 1, h; u >= 0; u--)
-    (h = m[u]) && (i = h(e, t, i) || i);
-  return i && S(e, t, i), i;
+var q = Object.defineProperty, l = (g, e, t, s) => {
+  for (var i = void 0, u = g.length - 1, h; u >= 0; u--)
+    (h = g[u]) && (i = h(e, t, i) || i);
+  return i && q(e, t, i), i;
 };
-class a extends R {
+class a extends L {
   constructor() {
-    super(...arguments), this.adapter = new y(), this.debouncer = new V(), this.subscriptions = [], this._range = { start: 0, end: 10 }, this._filteredItems = [], this._listItems = [], this._focusedIndex = -1, this._isFiltering = !1, this._isListVisible = !1, this._selectedItem = void 0, this._ignoreNextFocus = !1, this.onDocumentClick = (e) => {
+    super(...arguments), this.adapter = new F(), this.debouncer = new S(), this.subscriptions = [], this._range = { start: 0, end: 10 }, this._filteredItems = [], this._listItems = [], this._focusedIndex = -1, this._isFiltering = !1, this._isListVisible = !1, this._selectedItem = void 0, this._ignoreNextFocus = !1, this.onDocumentClick = (e) => {
       if (!this._isListVisible) return;
       const t = e.composedPath(), s = this._inputRef && t.includes(this._inputRef), i = this._panelRef && t.includes(this._panelRef);
       !s && !i && (this._isListVisible = !1);
+    }, this._onToggleMouseDown = (e) => {
+      e.preventDefault();
+    }, this._onToggleClick = (e) => {
+      e.stopPropagation(), this._isListVisible ? (this._isListVisible = !1, this._isFiltering = !1, this._ignoreNextFocus = !0, this._inputRef?.focus(), setTimeout(() => {
+        this._ignoreNextFocus = !1;
+      })) : (this._inputRef?.focus(), this._onFocus());
     };
   }
   createRenderRoot() {
@@ -35,13 +42,13 @@ class a extends R {
         const e = this.adapter.templateData;
         e.items && this._listItems?.length === 0 && this._filteredItems?.length === 0 && (this._filteredItems = e.items, this._listItems = e.items), this.requestUpdate();
       }),
-      this.debouncer.pipe(j(this.adapter.templateData.inputDebounce ?? 500)).subscribe((e) => {
+      this.debouncer.pipe(T(this.adapter.templateData.inputDebounce ?? 500)).subscribe((e) => {
         this._filterItems(e);
       })
     );
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((e) => e.unsubscribe());
+    super.disconnectedCallback(), this.adapter.destroy(), V(this.subscriptions);
   }
   _onRangeChange(e) {
     this._range = { start: e.detail.startIndex, end: e.detail.endIndex };
@@ -86,14 +93,14 @@ class a extends R {
     if (this.adapter.filterChanged(e), e && !s) {
       this._isFiltering = !0, this._isListVisible = !0;
       const i = t.searchFields ?? [t.labelField, t.valueField].filter(
-        (r) => !!r
-      ), u = i.length > 0, g = (t.items || []).filter((r) => {
-        if (r === null || typeof r != "object")
-          return r != null && r.toString().toLowerCase().includes(e.toLowerCase());
-        const _ = Object.keys(r), o = (c, b) => c || r[b].toString().toLowerCase().includes(e.toLowerCase());
-        return u ? _.filter((c) => i.includes(c)).reduce(o, !1) : _.reduce(o, !1);
+        (o) => !!o
+      ), u = i.length > 0, m = (t.items || []).filter((o) => {
+        if (o === null || typeof o != "object")
+          return o != null && o.toString().toLowerCase().includes(e.toLowerCase());
+        const f = Object.keys(o), n = (c, b) => c || o[b].toString().toLowerCase().includes(e.toLowerCase());
+        return u ? f.filter((c) => i.includes(c)).reduce(n, !1) : f.reduce(n, !1);
       });
-      this._filteredItems = [...g];
+      this._filteredItems = [...m];
     } else
       this._isFiltering = !1, this._filteredItems = [...t.items];
   }
@@ -109,19 +116,16 @@ class a extends R {
     const t = e.target;
     this._listRef && this._listRef.contains(t) || e.preventDefault();
   }
-  _onFocusOutInput(e) {
+  _onFocusOut(e) {
     const t = e.relatedTarget;
     t && this.contains(t) || (this.adapter.onBlur(), this._isListVisible = !1, this._isFiltering = !1);
   }
-  _onBlur() {
-    this.adapter.onBlur(), this._isListVisible = !1, this._isFiltering = !1;
-  }
   render() {
     const e = this.adapter.templateData, t = e.touched && e.errors && e.errors.length > 0, s = this._listItems.slice(this._range.start, this._range.end), i = this.adapter.getItemRenderer(
       e.itemRenderer,
-      P
-    ), h = this._selectedItem?.template !== null && typeof this._selectedItem?.template == "object" ? e.labelField ?? "label" : null, g = h ? this._selectedItem?.template[h] : this._selectedItem?.template, r = !!this.widget.on?.filter;
-    return f`
+      j
+    ), h = this._selectedItem?.template !== null && typeof this._selectedItem?.template == "object" ? e.labelField ?? "label" : null, m = h ? this._selectedItem?.template[h] : this._selectedItem?.template, o = !!this.widget.on?.filter;
+    return _`
       <gui-label
         .targetElement=${[this._listRef, this._inputRef]}
         .uid=${this.widget.uid}
@@ -133,14 +137,22 @@ class a extends R {
         .native=${!1}
       ></gui-label>
 
-      <div class="gui-widget" @keydown=${this._onWidgetKeyDown}>
+      <div class="gui-widget" @keydown=${this._onWidgetKeyDown} @focusout=${this._onFocusOut}>
+        ${e.icon ? _`<span
+              class=${v({ "gui-widget-icon": !0, [e.icon]: !0 })}
+              data-icon=${e.icon}
+              aria-hidden="true"
+            ></span>` : p}
         <input
           type="text"
           role="combobox"
           id=${this.widget.uid}
           data-cy=${`${this.widget.uid}_textinput`}
-          class="gui-widget-input"
-          .value=${g ?? e.value ?? ""}
+          class=${v({
+      "gui-widget-input": !0,
+      "gui-dropdown--icon": !!e.icon
+    })}
+          .value=${m ?? e.value ?? ""}
           ?required=${e.validator?.required}
           ?disabled=${e.disabled}
           ?readonly=${e.readonly}
@@ -148,7 +160,6 @@ class a extends R {
           autocomplete=${e.autocomplete || p}
           @keydown=${this._onKeyDown}
           @input=${this._onInput}
-          @focusout=${this._onFocusOutInput}
           @focus=${this._onFocus}
           aria-expanded=${this._isListVisible ? "true" : "false"}
           aria-controls=${`${this.widget.uid}-list`}
@@ -156,8 +167,18 @@ class a extends R {
           aria-labelledby=${e.label ? `${this.widget.uid}_label` : p}
           aria-describedby=${e.hint ? `${this.widget.uid}_hint` : p}
         />
-        <span class="gui-dropdown__arrow"
-          ><svg
+        <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"
@@ -166,8 +187,9 @@ class a extends R {
           >
             <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>
+            ></path>
+          </svg>
+        </button>
 
         <div
           class="gui-picker__panel"
@@ -179,7 +201,7 @@ class a extends R {
             .uid=${this.widget.uid}
             .value=${e.value ?? ""}
             .valueField=${e.valueField}
-            .items=${this._isFiltering && !r ? this._filteredItems : e.items}
+            .items=${this._isFiltering && !o ? this._filteredItems : e.items}
             .itemHeight=${e.itemHeight}
             .height=${e.height}
             ?required=${e.validator?.required}
@@ -191,35 +213,34 @@ class a extends R {
             @gui-update-items=${this._onUpdateItems}
             @gui-focus-change=${this._onFocusChange}
             @focus=${this._onFocus}
-            @blur=${this._onBlur}
             @change=${this._onValueChange}
           >
-            ${s.map((n, _) => {
-      const o = this._range.start + _, c = e.value === n.value, b = this._focusedIndex === o, I = !!e.disabled || !!n.disabled, v = e.labelField ?? "label", w = n.template !== null && typeof n.template == "object" && v && !e.itemRenderer ? n.template[v] : n.template;
-      return f`
+            ${s.map((r, f) => {
+      const n = this._range.start + f, c = e.value === r.value, b = this._focusedIndex === n, w = !!e.disabled || !!r.disabled, I = e.labelField ?? "label", y = r.template !== null && typeof r.template == "object" && I && !e.itemRenderer ? r.template[I] : r.template;
+      return _`
                 <div
                   role="option"
                   tabindex="-1"
                   class="gui-list__item-wrapper"
-                  id="${this.widget.uid}-item-${o}"
+                  id="${this.widget.uid}-item-${n}"
                   style="height: ${e.itemHeight || 40}px"
                   aria-selected=${c ? "true" : "false"}
-                  aria-disabled=${I ? "true" : "false"}
-                  @click=${() => this._onClickItem(n, o)}
+                  aria-disabled=${w ? "true" : "false"}
+                  @click=${() => this._onClickItem(r, n)}
                 >
                   ${i({
-        template: w,
-        value: n.value,
-        index: o,
+        template: y,
+        value: r.value,
+        index: n,
         selected: c,
-        disabled: I,
+        disabled: w,
         focused: b
       })}
                 </div>
               `;
     })}
           </gui-list>
-          ${t ? f`<gui-errors
+          ${t ? _`<gui-errors
                 panel
                 .uid=${this.widget.uid}
                 .errors=${e.errors}
@@ -228,7 +249,7 @@ class a extends R {
         </div>
       </div>
 
-      ${t ? f`<gui-errors
+      ${t ? _`<gui-errors
             .uid=${this.widget.uid}
             .errors=${e.errors}
             .touched=${e.touched}
@@ -237,11 +258,11 @@ class a extends R {
   }
 }
 l([
-  C({ context: F }),
-  L({ attribute: !1 })
+  D({ context: x }),
+  k({ attribute: !1 })
 ], a.prototype, "formContext");
 l([
-  D({ context: x })
+  R({ context: C })
 ], a.prototype, "adapter");
 l([
   d()
@@ -273,7 +294,7 @@ l([
 l([
   $(".gui-picker__panel")
 ], a.prototype, "_panelRef");
-k("gui-dropdown-input", a);
+P("gui-dropdown-input", a);
 export {
   a as DropdownElement
 };

package/{flex.element-pwba7621.js → flex.element-DiZWJBwt.js}

@@ -1,15 +1,15 @@
 import { LayoutWidgetAdapter as n, formContext as o, layoutContext as u } from "@golemui/lit";
 import { consume as g, provide as c } from "@lit/context";
-import { LitElement as m, html as d } from "lit";
+import { LitElement as m, html as l } from "lit";
 import { property as f } from "lit/decorators.js";
-import { safeDefine as h } from "@golemui/lit/internals";
+import { unsubscribeAll as h, safeDefine as _ } from "@golemui/lit/internals";
 import "rxjs";
-import { repeat as _ } from "lit-html/directives/repeat.js";
-import { classMap as x } from "lit/directives/class-map.js";
-var w = Object.defineProperty, l = (i, e, t, D) => {
+import { repeat as x } from "lit-html/directives/repeat.js";
+import { classMap as w } from "lit/directives/class-map.js";
+var D = Object.defineProperty, d = (i, e, t, y) => {
   for (var a = void 0, r = i.length - 1, p; r >= 0; r--)
     (p = i[r]) && (a = p(e, t, a) || a);
-  return a && w(e, t, a), a;
+  return a && D(e, t, a), a;
 };
 class s extends m {
   constructor() {
@@ -46,32 +46,32 @@ class s extends m {
       "gui-flex__widget--align-space-around": this.adapter.templateData.align === "space-around",
       "gui-flex__widget--align-space-evenly": this.adapter.templateData.align === "space-evenly"
     };
-    return d`
+    return l`
       <div
-        class=${x(e)}
+        class=${w(e)}
         id=${this.widget?.uid}
         style=${this.adapter.templateData.gap ? `gap: ${this.adapter.templateData.gap}px` : ""}
       >
-        ${_(
+        ${x(
       this.adapter.templateData.children || [],
       (t) => t?.uid,
-      (t) => d`<gui-widget .widget=${t}></gui-widget>`
+      (t) => l`<gui-widget .widget=${t}></gui-widget>`
     )}
       </div>
     `;
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((e) => e.unsubscribe());
+    super.disconnectedCallback(), this.adapter.destroy(), h(this.subscriptions);
   }
 }
-l([
+d([
   g({ context: o }),
   f({ attribute: !1 })
 ], s.prototype, "formContext");
-l([
+d([
   c({ context: u })
 ], s.prototype, "adapter");
-h("gui-flex-layout", s);
+_("gui-flex-layout", s);
 export {
   s as FlexElement
 };

package/{grid.element-C8K7_Qi3.js → grid.element-DJ9ACsqZ.js}

@@ -1,27 +1,27 @@
-import { LayoutWidgetAdapter as o, formContext as l, layoutContext as u } from "@golemui/lit";
+import { LayoutWidgetAdapter as l, formContext as o, layoutContext as u } from "@golemui/lit";
 import { consume as c, provide as m } from "@lit/context";
 import { LitElement as h, html as n } from "lit";
 import { property as _ } from "lit/decorators.js";
-import { safeDefine as f } from "@golemui/lit/internals";
+import { unsubscribeAll as f, safeDefine as w } from "@golemui/lit/internals";
 import "rxjs";
-import { repeat as w } from "lit-html/directives/repeat.js";
-import { classMap as y } from "lit/directives/class-map.js";
-var D = Object.defineProperty, g = (s, t, e, p) => {
-  for (var a = void 0, i = s.length - 1, r; i >= 0; i--)
-    (r = s[i]) && (a = r(t, e, a) || a);
-  return a && D(t, e, a), a;
+import { repeat as y } from "lit-html/directives/repeat.js";
+import { classMap as D } from "lit/directives/class-map.js";
+var b = Object.defineProperty, g = (s, a, t, p) => {
+  for (var e = void 0, i = s.length - 1, r; i >= 0; i--)
+    (r = s[i]) && (e = r(a, t, e) || e);
+  return e && b(a, t, e), e;
 };
 class d extends h {
   constructor() {
-    super(...arguments), this.adapter = new o(), this.subscriptions = [];
+    super(...arguments), this.adapter = new l(), this.subscriptions = [];
   }
   createRenderRoot() {
     return this;
   }
-  updated(t) {
-    super.updated(t);
-    const e = this.adapter.templateData.size;
-    e ? this.style.flex = String(e) : this.style.removeProperty("flex");
+  updated(a) {
+    super.updated(a);
+    const t = this.adapter.templateData.size;
+    t ? this.style.flex = String(t) : this.style.removeProperty("flex");
   }
   connectedCallback() {
     super.connectedCallback(), this.classList.add("gui-grid", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
@@ -29,11 +29,11 @@ class d extends h {
     );
   }
   render() {
-    const t = this.adapter.templateData.direction === "column", e = !t, p = this.adapter.templateData.autoFit ?? !0, a = {
+    const a = this.adapter.templateData.direction === "column", t = !a, p = this.adapter.templateData.autoFit ?? !0, e = {
       "gui-grid__widget": !0,
-      "gui-grid__widget--row": e,
-      "gui-grid__widget--row--auto-fit": e && p,
-      "gui-grid__widget--column": t,
+      "gui-grid__widget--row": t,
+      "gui-grid__widget--row--auto-fit": t && p,
+      "gui-grid__widget--column": a,
       "gui-grid__widget--align-center": this.adapter.templateData.align === "center",
       "gui-grid__widget--align-start": this.adapter.templateData.align === "start",
       "gui-grid__widget--align-end": this.adapter.templateData.align === "end",
@@ -47,8 +47,8 @@ class d extends h {
       "gui-grid__widget--justify-stretch": this.adapter.templateData.justify === "stretch"
     }, i = [];
     return this.adapter.templateData.columnGap !== void 0 && i.push(`column-gap: ${this.adapter.templateData.columnGap}px`), this.adapter.templateData.rowGap !== void 0 && i.push(`row-gap: ${this.adapter.templateData.rowGap}px`), n`
-      <div class=${y(a)} id=${this.widget?.uid} style=${i.join("; ")}>
-        ${w(
+      <div class=${D(e)} id=${this.widget?.uid} style=${i.join("; ")}>
+        ${y(
       this.adapter.templateData.children || [],
       (r) => r?.uid,
       (r) => n`<div class="gui-grid__cell" style="grid-column: span ${r.size || 1}">
@@ -59,17 +59,17 @@ class d extends h {
     `;
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
+    super.disconnectedCallback(), this.adapter.destroy(), f(this.subscriptions);
   }
 }
 g([
-  c({ context: l }),
+  c({ context: o }),
   _({ attribute: !1 })
 ], d.prototype, "formContext");
 g([
   m({ context: u })
 ], d.prototype, "adapter");
-f("gui-grid-layout", d);
+w("gui-grid-layout", d);
 export {
   d as GridElement
 };