@golemui/gui-lit 1.0.3 → 1.1.0

package/{dropdown.element-CyJbVAA5.js → dropdown.element-WsD61Qel.js}

@@ -1,18 +1,18 @@
-import { InputWidgetAdapter as v, formContext as w, inputContext as y } from "@golemui/lit";
-import { consume as F, provide as C } from "@lit/context";
-import { LitElement as x, nothing as m, html as g } from "lit";
-import { property as D, state as c, query as I, customElement as L } from "lit/decorators.js";
-import { Subject as R, debounceTime as V } from "rxjs";
-import { d as k } from "./list-D1oKnH89.js";
+import { InputWidgetAdapter as w, formContext as y, inputContext as F } from "@golemui/lit";
+import { consume as x, provide as C } from "@lit/context";
+import { LitElement as D, nothing as f, html as g } from "lit";
+import { property as L, state as c, query as $, customElement as R } from "lit/decorators.js";
+import { Subject as V, debounceTime as k } from "rxjs";
+import { d as j } from "./list-CrLIL4by.js";
 import "./errors-QjKhr6mA.js";
-var j = Object.defineProperty, O = Object.getOwnPropertyDescriptor, l = (e, t, i, s) => {
-  for (var r = s > 1 ? void 0 : s ? O(t, i) : t, o = e.length - 1, h; o >= 0; o--)
-    (h = e[o]) && (r = (s ? h(t, i, r) : h(r)) || r);
-  return s && r && j(t, i, r), r;
+var O = Object.defineProperty, S = Object.getOwnPropertyDescriptor, l = (e, t, i, s) => {
+  for (var r = s > 1 ? void 0 : s ? S(t, i) : t, d = e.length - 1, h; d >= 0; d--)
+    (h = e[d]) && (r = (s ? h(t, i, r) : h(r)) || r);
+  return s && r && O(t, i, r), r;
 };
-let a = class extends x {
+let a = class extends D {
   constructor() {
-    super(...arguments), this.adapter = new v(), this.debouncer = new R(), 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.onDocumentClick = (e) => {
+    super(...arguments), this.adapter = new w(), 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(), i = this._inputRef && t.includes(this._inputRef), s = this._listRef && t.includes(this._listRef);
       !i && !s && (this._isListVisible = !1);
@@ -32,7 +32,7 @@ let a = class 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(V(this.adapter.templateData.inputDebounce ?? 500)).subscribe((e) => {
+      this.debouncer.pipe(k(this.adapter.templateData.inputDebounce ?? 500)).subscribe((e) => {
         this._filterItems(e);
       })
     );
@@ -56,7 +56,7 @@ let a = class extends x {
     this._focusedIndex = e.detail.index;
   }
   _onClickItem(e, t) {
-    if (this.adapter.templateData.readonly) return;
+    if (this.adapter.templateData.readonly || e.disabled) return;
     const i = this.adapter.templateData;
     this.adapter.valueChanged(e.value), this.adapter.filterChanged(""), this._focusedIndex = t, this._selectedItem = e, this._isFiltering = !1, this._isListVisible = !1, this._listRef && (this._listRef.focusItemAtIndex(t), this._inputRef.value = i.valueField ? e.template[i.valueField] : e.template);
   }
@@ -87,15 +87,20 @@ let a = class extends x {
       ), r = s.length > 0, h = (t.items || []).filter((n) => {
         if (n === null || typeof n != "object")
           return n != null && n.toString().toLowerCase().includes(e.toLowerCase());
-        const _ = Object.keys(n), u = (p, f) => p || n[f].toString().toLowerCase().includes(e.toLowerCase());
+        const _ = Object.keys(n), u = (p, m) => p || n[m].toString().toLowerCase().includes(e.toLowerCase());
         return r ? _.filter((p) => s.includes(p)).reduce(u, !1) : _.reduce(u, !1);
       });
       this._filteredItems = [...h];
     } 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._inputRef?.focus(), setTimeout(() => {
+      this._ignoreNextFocus = !1;
+    }));
+  }
   async _onFocus() {
-    this._isListVisible = !0, await this.updateComplete, this._listRef.scrollToSelectedIndex();
+    this._ignoreNextFocus || (this._isListVisible = !0, await this.updateComplete, this._listRef.scrollToSelectedIndex());
   }
   _onFocusOutInput(e) {
     const t = e.relatedTarget;
@@ -107,8 +112,8 @@ let a = class extends x {
   render() {
     const e = this.adapter.templateData, t = e.touched && e.errors && e.errors.length > 0, i = this._listItems.slice(this._range.start, this._range.end), s = this.adapter.getItemRenderer(
       e.itemRenderer,
-      k
-    ), o = this._selectedItem?.template !== null && typeof this._selectedItem?.template == "object" ? e.labelField ?? "label" : null, h = o ? this._selectedItem?.template[o] : this._selectedItem?.template, n = !!this.widget.on?.filter;
+      j
+    ), d = this._selectedItem?.template !== null && typeof this._selectedItem?.template == "object" ? e.labelField ?? "label" : null, h = d ? this._selectedItem?.template[d] : this._selectedItem?.template, n = !!this.widget.on?.filter;
     return g`
       <gui-label
         .targetElement=${[this._listRef, this._inputRef]}
@@ -121,7 +126,11 @@ let a = class extends x {
         .native=${!1}
       ></gui-label>
 
-      <div class="gui-widget" aria-expanded=${this._isListVisible}>
+      <div
+        class="gui-widget"
+        aria-expanded=${this._isListVisible}
+        @keydown=${this._onWidgetKeyDown}
+      >
         <input
           type="text"
           id=${this.widget.uid}
@@ -132,13 +141,13 @@ let a = class extends x {
           ?disabled=${e.disabled}
           ?readonly=${e.readonly}
           placeholder=${e.placeholder ?? ""}
-          autocomplete=${e.autocomplete || m}
+          autocomplete=${e.autocomplete || f}
           @keydown=${this._onKeyDown}
           @input=${this._onInput}
           @focusout=${this._onFocusOutInput}
           @focus=${this._onFocus}
-          aria-labelledby=${e.label ? `${this.widget.uid}_label` : m}
-          aria-describedby=${e.hint ? `${this.widget.uid}_hint` : m}
+          aria-labelledby=${e.label ? `${this.widget.uid}_label` : f}
+          aria-describedby=${e.hint ? `${this.widget.uid}_hint` : f}
         />
         <span class="gui-dropdown__arrow"
           ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256">
@@ -167,8 +176,8 @@ let a = class extends x {
           @blur=${this._onBlur}
           @change=${this._onValueChange}
         >
-          ${i.map((d, _) => {
-      const u = this._range.start + _, p = e.value === d.value, f = this._focusedIndex === u, b = e.labelField ?? "label", $ = d.template !== null && typeof d.template == "object" && b && !e.itemRenderer ? d.template[b] : d.template;
+          ${i.map((o, _) => {
+      const u = this._range.start + _, p = e.value === o.value, m = this._focusedIndex === u, b = !!e.disabled || !!o.disabled, I = e.labelField ?? "label", v = o.template !== null && typeof o.template == "object" && I && !e.itemRenderer ? o.template[I] : o.template;
       return g`
               <div
                 role="option"
@@ -177,15 +186,16 @@ let a = class extends x {
                 id="${this.widget.uid}-item-${u}"
                 style="height: ${e.itemHeight || 40}px"
                 aria-selected=${p ? "true" : "false"}
-                @click=${() => this._onClickItem(d, u)}
+                aria-disabled=${b ? "true" : "false"}
+                @click=${() => this._onClickItem(o, u)}
               >
                 ${s({
-        template: $,
-        value: d.value,
+        template: v,
+        value: o.value,
         index: u,
         selected: p,
-        disabled: !!e.disabled,
-        focused: f
+        disabled: b,
+        focused: m
       })}
               </div>
             `;
@@ -197,16 +207,16 @@ let a = class extends x {
             .uid=${this.widget.uid}
             .errors=${e.errors}
             .touched=${e.touched}
-          ></gui-errors>` : m}
+          ></gui-errors>` : f}
     `;
   }
 };
 l([
-  F({ context: w }),
-  D({ attribute: !1 })
+  x({ context: y }),
+  L({ attribute: !1 })
 ], a.prototype, "formContext", 2);
 l([
-  C({ context: y })
+  C({ context: F })
 ], a.prototype, "adapter", 2);
 l([
   c()
@@ -230,13 +240,13 @@ l([
   c()
 ], a.prototype, "_selectedItem", 2);
 l([
-  I("input")
+  $("input")
 ], a.prototype, "_inputRef", 2);
 l([
-  I("gui-list")
+  $("gui-list")
 ], a.prototype, "_listRef", 2);
 a = l([
-  L("gui-dropdown-input")
+  R("gui-dropdown-input")
 ], a);
 export {
   a as DropdownElement

package/focus-leave.controller-2gV0pQd5.js

@@ -0,0 +1,73 @@
+import "lit";
+function c(i, e, n, t, r = {}) {
+  const { includeStart: d = !1, outOfBounds: s = "index" } = r;
+  let a = d ? i : i + e;
+  for (; a >= 0 && a < n; ) {
+    if (!t(a))
+      return a;
+    a += e;
+  }
+  return s === "index" ? a : -1;
+}
+function u(i, e) {
+  const { columns: n, isRTL: t, pageSize: r } = e;
+  switch (i) {
+    case "ArrowUp":
+      return { kind: "delta", delta: -n };
+    case "ArrowDown":
+      return { kind: "delta", delta: n };
+    case "ArrowLeft":
+      return n === 1 ? { kind: "none" } : { kind: "delta", delta: t ? 1 : -1 };
+    case "ArrowRight":
+      return n === 1 ? { kind: "none" } : { kind: "delta", delta: t ? -1 : 1 };
+    case "PageUp":
+      return r === void 0 ? { kind: "none" } : { kind: "delta", delta: -r };
+    case "PageDown":
+      return r === void 0 ? { kind: "none" } : { kind: "delta", delta: r };
+    case "Home":
+      return { kind: "edge", edge: "first" };
+    case "End":
+      return { kind: "edge", edge: "last" };
+    default:
+      return { kind: "none" };
+  }
+}
+function l(i, e, n) {
+  return Math.max(1, Math.floor((i ?? 300) / (e || 40))) * (n || 1);
+}
+function h(i, e) {
+  const n = [];
+  for (let t = 0; t < i.length; t += e)
+    n.push(i.slice(t, t + e));
+  return n;
+}
+class f {
+  constructor(e, n) {
+    this.onFocusOut = (t) => {
+      this.handleFocusOut(t);
+    }, e.addController(this), this.host = e, this.options = n;
+  }
+  /** Runs the leave detection for a focusout event. */
+  handleFocusOut(e) {
+    this.isInside(e.relatedTarget) || (this._rafId !== void 0 && cancelAnimationFrame(this._rafId), this._rafId = requestAnimationFrame(() => {
+      this._rafId = void 0, this.isInside(document.activeElement) || this.options.onLeave();
+    }));
+  }
+  /** Cancels a pending deferred leave check, if any. */
+  cancelPendingLeave() {
+    this._rafId !== void 0 && (cancelAnimationFrame(this._rafId), this._rafId = void 0);
+  }
+  isInside(e) {
+    return !!e && this.host.contains(e);
+  }
+  hostDisconnected() {
+    this.cancelPendingLeave();
+  }
+}
+export {
+  f as G,
+  h as c,
+  u as g,
+  l,
+  c as n
+};