@golemui/gui-lit 1.2.1 → 1.3.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## 1.3.0-rc.0 (2026-08-14)
+
+### 🩹 Fixes
+
+- **gui-components:** show errors inside pickers ([#282](https://github.com/golemui/golemui/pull/282))
+
+### ❤️ Thank You
+
+- Raúl Jiménez @Elecash
+
+## 1.2.1 (2026-08-11)
+
+### 🩹 Fixes
+
+- **gui-components:** consistent arrow key navigation in widgets with pills ([#280](https://github.com/golemui/golemui/pull/280))
+- avoid double registration warnings via shared safeDefine ([#278](https://github.com/golemui/golemui/pull/278))
+- date time intermediate states and commit on blur ([#265](https://github.com/golemui/golemui/pull/265))
+
+### ❤️ Thank You
+
+- Raúl Jiménez @Elecash
+
 ## 1.2.1-rc.0 (2026-08-11)
 
 ### 🩹 Fixes

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

@@ -1,23 +1,23 @@
 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 L, nothing as _, html as b } from "lit";
-import { property as R, state as d, query as v } from "lit/decorators.js";
+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 S } from "./default-list-item-renderer-CuPJ9jUD.js";
+import { d as P } from "./default-list-item-renderer-CuPJ9jUD.js";
 import "@golemui/gui-components/label";
 import "@golemui/gui-components/list";
 import "@golemui/gui-components/errors";
-var q = Object.defineProperty, l = (f, e, t, s) => {
-  for (var i = void 0, h = f.length - 1, u; h >= 0; h--)
-    (u = f[h]) && (i = u(e, t, i) || i);
-  return i && q(e, t, i), i;
+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;
 };
-class a extends L {
+class a extends R {
   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) => {
       if (!this._isListVisible) return;
-      const t = e.composedPath(), s = this._inputRef && t.includes(this._inputRef), i = this._listRef && t.includes(this._listRef);
+      const t = e.composedPath(), s = this._inputRef && t.includes(this._inputRef), i = this._panelRef && t.includes(this._panelRef);
       !s && !i && (this._isListVisible = !1);
     };
   }
@@ -87,13 +87,13 @@ class a extends L {
       this._isFiltering = !0, this._isListVisible = !0;
       const i = t.searchFields ?? [t.labelField, t.valueField].filter(
         (r) => !!r
-      ), h = i.length > 0, m = (t.items || []).filter((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 p = Object.keys(r), o = (c, g) => c || r[g].toString().toLowerCase().includes(e.toLowerCase());
-        return h ? p.filter((c) => i.includes(c)).reduce(o, !1) : p.reduce(o, !1);
+        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);
       });
-      this._filteredItems = [...m];
+      this._filteredItems = [...g];
     } else
       this._isFiltering = !1, this._filteredItems = [...t.items];
   }
@@ -105,6 +105,10 @@ class a extends L {
   async _onFocus() {
     this._ignoreNextFocus || (this._isListVisible = !0, await this.updateComplete, this._listRef.scrollToSelectedIndex());
   }
+  _onPanelMouseDown(e) {
+    const t = e.target;
+    this._listRef && this._listRef.contains(t) || e.preventDefault();
+  }
   _onFocusOutInput(e) {
     const t = e.relatedTarget;
     t && this.contains(t) || (this.adapter.onBlur(), this._isListVisible = !1, this._isFiltering = !1);
@@ -115,9 +119,9 @@ class a extends L {
   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,
-      S
-    ), u = this._selectedItem?.template !== null && typeof this._selectedItem?.template == "object" ? e.labelField ?? "label" : null, m = u ? this._selectedItem?.template[u] : this._selectedItem?.template, r = !!this.widget.on?.filter;
-    return b`
+      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`
       <gui-label
         .targetElement=${[this._listRef, this._inputRef]}
         .uid=${this.widget.uid}
@@ -136,12 +140,12 @@ class a extends L {
           id=${this.widget.uid}
           data-cy=${`${this.widget.uid}_textinput`}
           class="gui-widget-input"
-          .value=${m ?? e.value ?? ""}
+          .value=${g ?? e.value ?? ""}
           ?required=${e.validator?.required}
           ?disabled=${e.disabled}
           ?readonly=${e.readonly}
           placeholder=${e.placeholder ?? ""}
-          autocomplete=${e.autocomplete || _}
+          autocomplete=${e.autocomplete || p}
           @keydown=${this._onKeyDown}
           @input=${this._onInput}
           @focusout=${this._onFocusOutInput}
@@ -149,8 +153,8 @@ class a extends L {
           aria-expanded=${this._isListVisible ? "true" : "false"}
           aria-controls=${`${this.widget.uid}-list`}
           aria-autocomplete="list"
-          aria-labelledby=${e.label ? `${this.widget.uid}_label` : _}
-          aria-describedby=${e.hint ? `${this.widget.uid}_hint` : _}
+          aria-labelledby=${e.label ? `${this.widget.uid}_label` : p}
+          aria-describedby=${e.hint ? `${this.widget.uid}_hint` : p}
         />
         <span class="gui-dropdown__arrow"
           ><svg
@@ -165,64 +169,76 @@ class a extends L {
             ></path></svg
         ></span>
 
-        <gui-list
-          id=${`${this.widget.uid}-list`}
-          .uid=${this.widget.uid}
-          .value=${e.value ?? ""}
-          .valueField=${e.valueField}
-          .items=${this._isFiltering && !r ? this._filteredItems : e.items}
-          .itemHeight=${e.itemHeight}
-          .height=${e.height}
-          ?required=${e.validator?.required}
-          ?touched=${e.touched}
-          ?disabled=${e.disabled}
-          ?readonly=${e.readonly}
+        <div
+          class="gui-picker__panel"
           ?hidden=${!this._isListVisible}
-          @gui-range-change=${this._onRangeChange}
-          @gui-update-items=${this._onUpdateItems}
-          @gui-focus-change=${this._onFocusChange}
-          @focus=${this._onFocus}
-          @blur=${this._onBlur}
-          @change=${this._onValueChange}
+          @mousedown=${this._onPanelMouseDown}
         >
-          ${s.map((n, p) => {
-      const o = this._range.start + p, c = e.value === n.value, g = this._focusedIndex === o, $ = !!e.disabled || !!n.disabled, I = e.labelField ?? "label", w = n.template !== null && typeof n.template == "object" && I && !e.itemRenderer ? n.template[I] : n.template;
-      return b`
-              <div
-                role="option"
-                tabindex="-1"
-                class="gui-list__item-wrapper"
-                id="${this.widget.uid}-item-${o}"
-                style="height: ${e.itemHeight || 40}px"
-                aria-selected=${c ? "true" : "false"}
-                aria-disabled=${$ ? "true" : "false"}
-                @click=${() => this._onClickItem(n, o)}
-              >
-                ${i({
+          <gui-list
+            id=${`${this.widget.uid}-list`}
+            .uid=${this.widget.uid}
+            .value=${e.value ?? ""}
+            .valueField=${e.valueField}
+            .items=${this._isFiltering && !r ? 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}
+            @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`
+                <div
+                  role="option"
+                  tabindex="-1"
+                  class="gui-list__item-wrapper"
+                  id="${this.widget.uid}-item-${o}"
+                  style="height: ${e.itemHeight || 40}px"
+                  aria-selected=${c ? "true" : "false"}
+                  aria-disabled=${I ? "true" : "false"}
+                  @click=${() => this._onClickItem(n, o)}
+                >
+                  ${i({
         template: w,
         value: n.value,
         index: o,
         selected: c,
-        disabled: $,
-        focused: g
+        disabled: I,
+        focused: b
       })}
-              </div>
-            `;
+                </div>
+              `;
     })}
-        </gui-list>
+          </gui-list>
+          ${t ? f`<gui-errors
+                panel
+                .uid=${this.widget.uid}
+                .errors=${e.errors}
+                .touched=${e.touched}
+              ></gui-errors>` : p}
+        </div>
       </div>
 
-      ${t ? b`<gui-errors
+      ${t ? f`<gui-errors
             .uid=${this.widget.uid}
             .errors=${e.errors}
             .touched=${e.touched}
-          ></gui-errors>` : _}
+          ></gui-errors>` : p}
     `;
   }
 }
 l([
   C({ context: F }),
-  R({ attribute: !1 })
+  L({ attribute: !1 })
 ], a.prototype, "formContext");
 l([
   D({ context: x })
@@ -249,11 +265,14 @@ l([
   d()
 ], a.prototype, "_selectedItem");
 l([
-  v("input")
+  $("input")
 ], a.prototype, "_inputRef");
 l([
-  v("gui-list")
+  $("gui-list")
 ], a.prototype, "_listRef");
+l([
+  $(".gui-picker__panel")
+], a.prototype, "_panelRef");
 k("gui-dropdown-input", a);
 export {
   a as DropdownElement

package/index.js

@@ -2257,7 +2257,7 @@ const Mo = {
   dateInput: async () => (await import("./date.element-BEHGxRFF.js")).DateElement,
   datePicker: async () => (await import("./date-picker.element-Bg3rF95F.js")).DatePickerElement,
   dateTimePicker: async () => (await import("./date-time-picker.element-HHpwjWTQ.js")).DateTimePickerElement,
-  dropdown: async () => (await import("./dropdown.element-DUqG_p1x.js")).DropdownElement,
+  dropdown: async () => (await import("./dropdown.element-Dg80G2PL.js")).DropdownElement,
   list: async () => (await import("./list.element-ZtEMKE2x.js")).ListElement,
   markdown: async () => (await import("./markdown.element-DWz3U9rG.js")).MarkdownElement,
   password: async () => (await import("./password.element-C5vQHq5P.js")).PasswordElement,