@golemui/gui-lit 1.1.0 → 1.1.1-rc.0

package/{list-CrLIL4by.js → list-D730tmGN.js}

@@ -1,18 +1,18 @@
-import { html as c, LitElement as p, nothing as h } from "lit";
-import { classMap as m } from "lit/directives/class-map.js";
+import { html as u, LitElement as c } from "lit";
+import { classMap as p } from "lit/directives/class-map.js";
 import "@golemui/core";
-import { property as a, state as u, query as f, customElement as v } from "lit/decorators.js";
-const T = (e) => {
+import { property as a, state as h, query as m, customElement as f } from "lit/decorators.js";
+const F = (e) => {
   const t = {
     "gui-list__item": !0,
     "gui-list__item-selected": !!e.selected,
     "gui-list__item-focused": !!e.focused,
     "gui-list__item-disabled": !!e.disabled
   };
-  return c`
+  return u`
     <div
       role="option"
-      class=${m(t)}
+      class=${p(t)}
       aria-selected=${e.selected ? "true" : "false"}
       aria-disabled=${e.disabled ? "true" : "false"}
     >
@@ -20,21 +20,21 @@ const T = (e) => {
     </div>
   `;
 }, b = (e) => e !== null && typeof e == "object" && Object.prototype.hasOwnProperty.call(e, "template") && Object.prototype.hasOwnProperty.call(e, "value");
-function g(e) {
+function v(e) {
   const t = typeof e;
   return t === "string" || t === "number";
 }
-const y = (e, { valueField: t }) => {
+const g = (e, { valueField: t }) => {
   if (e === null || typeof e != "object")
     return !1;
-  const i = e, o = t ?? "value";
-  return !!Object.prototype.hasOwnProperty.call(i, o);
+  const s = e, o = t ?? "value";
+  return !!Object.prototype.hasOwnProperty.call(s, o);
 };
-function I(e, { valueField: t }) {
+function y(e, { valueField: t }) {
   if (e === null || typeof e != "object")
     throw new Error("Provided value is not an object");
-  const i = e, o = t ?? "value", s = Object.prototype.hasOwnProperty.call(i, o) ? o : void 0;
-  if (!s)
+  const s = e, o = t ?? "value", i = Object.prototype.hasOwnProperty.call(s, o) ? o : void 0;
+  if (!i)
     throw new Error("No valueField exists on the object");
   return (r) => {
     if (r === null || typeof r != "object")
@@ -42,63 +42,118 @@ function I(e, { valueField: t }) {
     const d = r;
     return {
       template: r,
-      value: s ? d[s] : "",
+      value: i ? d[i] : "",
       ...typeof d.disabled == "boolean" ? { disabled: d.disabled } : {}
     };
   };
 }
-const w = (e, t) => {
+const I = (e, t) => {
   if (Array.isArray(e) && e.length > 0 && !b(e[0])) {
-    if (g(e[0]))
-      return e.map((i) => ({
-        template: i,
-        value: i
+    if (v(e[0]))
+      return e.map((s) => ({
+        template: s,
+        value: s
       }));
-    if (y(e[0], t)) {
-      const i = I(e[0], t);
-      return e.map(i);
+    if (g(e[0], t)) {
+      const s = y(e[0], t);
+      return e.map(s);
     } else
       throw new Error("Invalid list item shape");
   }
   return e;
 };
-var _ = Object.defineProperty, x = Object.getOwnPropertyDescriptor, l = (e, t, i, o) => {
-  for (var s = o > 1 ? void 0 : o ? x(t, i) : t, r = e.length - 1, d; r >= 0; r--)
-    (d = e[r]) && (s = (o ? d(t, i, s) : d(s)) || s);
-  return o && s && _(t, i, s), s;
+var w = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, l = (e, t, s, o) => {
+  for (var i = o > 1 ? void 0 : o ? _(t, s) : t, r = e.length - 1, d; r >= 0; r--)
+    (d = e[r]) && (i = (o ? d(t, s, i) : d(i)) || i);
+  return o && i && w(t, s, i), i;
 };
-let n = class extends p {
+let n = class extends c {
   constructor() {
-    super(...arguments), this.uid = void 0, this.touched = !1, this.required = !1, this.disabled = !1, this.readOnly = !1, this.value = void 0, this.valueField = void 0, this.label = void 0, this.hint = void 0, this.items = [], this.itemHeight = void 0, this.height = void 0, this._items = [], this._scrollTop = 0, this._viewportHeight = 0, this._focusedIndex = -1, this.buffer = 5;
+    super(...arguments), this.uid = void 0, this.touched = !1, this.required = !1, this.disabled = !1, this.readOnly = !1, this.value = void 0, this.valueField = void 0, this.label = void 0, this.hint = void 0, this.items = [], this.itemHeight = void 0, this.height = void 0, this._items = [], this._scrollTop = 0, this._viewportHeight = 0, this._focusedIndex = -1, this.buffer = 5, this.onKeyDown = (e) => {
+      if (this.disabled || this.readOnly) return;
+      const t = this.itemHeight ?? 40, s = Math.ceil(this._viewportHeight / t), o = this.items.length - 1;
+      let i = !1;
+      switch (e.key) {
+        case "ArrowDown":
+          this.setFocusedIndex(this.findEnabledIndex(Math.min(this._focusedIndex + 1, o), 1)), i = !0;
+          break;
+        case "ArrowUp":
+          this.setFocusedIndex(this.findEnabledIndex(Math.max(this._focusedIndex - 1, 0), -1)), i = !0;
+          break;
+        case "PageDown":
+          this.setFocusedIndex(
+            this.findEnabledIndex(Math.min(this._focusedIndex + s, o), 1)
+          ), i = !0;
+          break;
+        case "PageUp":
+          this.setFocusedIndex(
+            this.findEnabledIndex(Math.max(this._focusedIndex - s, 0), -1)
+          ), i = !0;
+          break;
+        case "Home":
+          this.setFocusedIndex(this.findEnabledIndex(0, 1)), i = !0;
+          break;
+        case "End":
+          this.setFocusedIndex(this.findEnabledIndex(o, -1)), i = !0;
+          break;
+        case "Enter":
+        case " ": {
+          const r = this._items[this._focusedIndex];
+          this._focusedIndex >= 0 && r != null && !r.disabled && this.selectItem(r), i = !0;
+          break;
+        }
+      }
+      i && e.preventDefault();
+    }, this.onFocus = () => {
+      if (!this.value || !this.items.length) return;
+      const e = this._items.findIndex((t) => t.value === this.value);
+      this._focusedIndex = e, this.scrollToIndex(e), this.dispatchEvent(
+        new CustomEvent("gui-focus-change", {
+          detail: { index: e },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }, this.onFocusOut = (e) => {
+      e.relatedTarget && this.contains(e.relatedTarget) || (this._focusedIndex = -1, this.dispatchEvent(
+        new CustomEvent("gui-focus-change", {
+          detail: { index: -1 },
+          bubbles: !0,
+          composed: !0
+        })
+      ), this.dispatchEvent(new CustomEvent("blur", { bubbles: !0, composed: !0 })));
+    };
   }
   willUpdate(e) {
-    super.willUpdate(e), e.has("items") && this.updateItems(), (e.has("items") || e.has("_scrollTop") || e.has("height")) && this.emitRangeChange();
+    super.willUpdate(e), e.has("items") && this.updateItems(), (e.has("items") || e.has("_scrollTop") || e.has("height")) && this.emitRangeChange(), this.syncHostAria();
+  }
+  syncHostAria() {
+    this.setAttribute("role", "listbox"), this.tabIndex = this.disabled ? -1 : 0;
+    const e = (t, s) => {
+      s === null ? this.removeAttribute(t) : this.setAttribute(t, s);
+    };
+    e("aria-required", this.required ? "true" : null), e("aria-disabled", this.disabled || this.readOnly ? "true" : null), e(
+      "aria-activedescendant",
+      this._focusedIndex >= 0 ? `${this.uid}-item-${this._focusedIndex}` : null
+    ), e("aria-label", this.label ?? null), e("aria-description", this.hint ?? null);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("keydown", this.onKeyDown), this.addEventListener("focus", this.onFocus), this.addEventListener("focusout", this.onFocusOut);
   }
   firstUpdated() {
     this.measureViewport(), new ResizeObserver(() => this.measureViewport()).observe(this.viewportElement);
   }
   render() {
-    const e = this.height ?? 300, t = this.itemHeight ?? 40, i = (this.items?.length ?? 0) * t, { offsetY: o } = this.calculateRange(), s = this._focusedIndex >= 0 ? `${this.uid}-item-${this._focusedIndex}` : void 0;
-    return c`
+    const e = this.height ?? 300, t = this.itemHeight ?? 40, s = (this.items?.length ?? 0) * t, { offsetY: o } = this.calculateRange();
+    return u`
       <div
-        role="listbox"
-        id=${this.uid}
-        tabindex=${this.disabled ? -1 : 0}
         class="gui-list__scroll-viewport"
         style="max-height: ${e}px; min-height: 40px; overflow-y: auto; position: relative; display: block;"
         @scroll="${this.onScroll}"
-        @keydown="${this.onKeyDown}"
-        @focus="${this.onFocus}"
-        @focusout="${this.onFocusOut}"
-        aria-required=${this.required ? "true" : h}
-        aria-disabled=${this.disabled || this.readOnly ? "true" : h}
-        aria-activedescendant="${s ?? h}"
-        aria-label=${this.label ?? h}
-        aria-description=${this.hint ?? h}
       >
         <div
           class="gui-list__spacer"
-          style="height: ${i}px; width: 1px; opacity: 0; pointer-events: none;"
+          style="height: ${s}px; width: 1px; opacity: 0; pointer-events: none;"
         ></div>
 
         <div
@@ -110,9 +165,6 @@ let n = class extends p {
       </div>
     `;
   }
-  focus(e) {
-    this.viewportElement ? this.viewportElement.focus(e) : super.focus(e);
-  }
   focusItemAtIndex(e) {
     this._focusedIndex = e;
   }
@@ -120,65 +172,9 @@ let n = class extends p {
     const e = this._items.findIndex((t) => t.value === this.value);
     this.scrollToIndex(e);
   }
-  onKeyDown(e) {
-    if (this.disabled || this.readOnly) return;
-    const t = this.itemHeight ?? 40, i = Math.ceil(this._viewportHeight / t), o = this.items.length - 1;
-    let s = !1;
-    switch (e.key) {
-      case "ArrowDown":
-        this.setFocusedIndex(this.findEnabledIndex(Math.min(this._focusedIndex + 1, o), 1)), s = !0;
-        break;
-      case "ArrowUp":
-        this.setFocusedIndex(this.findEnabledIndex(Math.max(this._focusedIndex - 1, 0), -1)), s = !0;
-        break;
-      case "PageDown":
-        this.setFocusedIndex(
-          this.findEnabledIndex(Math.min(this._focusedIndex + i, o), 1)
-        ), s = !0;
-        break;
-      case "PageUp":
-        this.setFocusedIndex(
-          this.findEnabledIndex(Math.max(this._focusedIndex - i, 0), -1)
-        ), s = !0;
-        break;
-      case "Home":
-        this.setFocusedIndex(this.findEnabledIndex(0, 1)), s = !0;
-        break;
-      case "End":
-        this.setFocusedIndex(this.findEnabledIndex(o, -1)), s = !0;
-        break;
-      case "Enter":
-      case " ": {
-        const r = this._items[this._focusedIndex];
-        this._focusedIndex >= 0 && r != null && !r.disabled && this.selectItem(r), s = !0;
-        break;
-      }
-    }
-    s && e.preventDefault();
-  }
-  onFocus() {
-    if (!this.value || !this.items.length) return;
-    const e = this._items.findIndex((t) => t.value === this.value);
-    this._focusedIndex = e, this.scrollToIndex(e), this.dispatchEvent(
-      new CustomEvent("gui-focus-change", {
-        detail: { index: e },
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  onFocusOut(e) {
-    e.relatedTarget && this.contains(e.relatedTarget) || (this._focusedIndex = -1, this.dispatchEvent(
-      new CustomEvent("gui-focus-change", {
-        detail: { index: -1 },
-        bubbles: !0,
-        composed: !0
-      })
-    ), this.dispatchEvent(new CustomEvent("blur", { bubbles: !0, composed: !0 })));
-  }
   scrollToIndex(e) {
-    const t = this.itemHeight ?? 40, i = this.height ?? 300, o = e * t, s = o + t, r = this.viewportElement.scrollTop, d = r + i;
-    o < r ? this.viewportElement.scrollTop = o : s > d && (this.viewportElement.scrollTop = s - i);
+    const t = this.itemHeight ?? 40, s = this.height ?? 300, o = e * t, i = o + t, r = this.viewportElement.scrollTop, d = r + s;
+    o < r ? this.viewportElement.scrollTop = o : i > d && (this.viewportElement.scrollTop = i - s);
   }
   selectItem(e) {
     this.dispatchEvent(
@@ -194,8 +190,8 @@ let n = class extends p {
    * every item that way is disabled — keyboard navigation skips disabled rows.
    */
   findEnabledIndex(e, t) {
-    for (let i = e; i >= 0 && i < this._items.length; i += t)
-      if (!this._items[i]?.disabled) return i;
+    for (let s = e; s >= 0 && s < this._items.length; s += t)
+      if (!this._items[s]?.disabled) return s;
     return -1;
   }
   setFocusedIndex(e) {
@@ -208,7 +204,7 @@ let n = class extends p {
     ));
   }
   updateItems() {
-    this._items = w(this.items, { valueField: this.valueField }), this.dispatchEvent(
+    this._items = I(this.items, { valueField: this.valueField }), this.dispatchEvent(
       new CustomEvent("gui-update-items", {
         detail: this._items,
         bubbles: !0,
@@ -234,8 +230,11 @@ let n = class extends p {
     this._scrollTop = t.scrollTop;
   }
   calculateRange() {
-    const e = this.itemHeight ?? 40, t = this.items?.length ?? 0, i = Math.ceil(this._viewportHeight / e), o = Math.floor(this._scrollTop / e), s = Math.max(0, o - this.buffer), r = Math.min(t, o + i + this.buffer), d = s * e;
-    return { startIndex: s, endIndex: r, offsetY: d };
+    const e = this.itemHeight ?? 40, t = this.items?.length ?? 0, s = Math.ceil(this._viewportHeight / e), o = Math.floor(this._scrollTop / e), i = Math.max(0, o - this.buffer), r = Math.min(t, o + s + this.buffer), d = i * e;
+    return { startIndex: i, endIndex: r, offsetY: d };
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("keydown", this.onKeyDown), this.removeEventListener("focus", this.onFocus), this.removeEventListener("focusout", this.onFocusOut);
   }
 };
 l([
@@ -275,24 +274,24 @@ l([
   a({ type: Number })
 ], n.prototype, "height", 2);
 l([
-  u()
+  h()
 ], n.prototype, "_items", 2);
 l([
-  u()
+  h()
 ], n.prototype, "_scrollTop", 2);
 l([
-  u()
+  h()
 ], n.prototype, "_viewportHeight", 2);
 l([
-  u()
+  h()
 ], n.prototype, "_focusedIndex", 2);
 l([
-  f(".gui-list__scroll-viewport")
+  m(".gui-list__scroll-viewport")
 ], n.prototype, "viewportElement", 2);
 n = l([
-  v("gui-list")
+  f("gui-list")
 ], n);
 typeof customElements < "u" && !customElements.get("gui-list") && customElements.define("gui-list", n);
 export {
-  T as d
+  F as d
 };

package/{list.element-DV82YxnJ.js → list.element-eo3DIOrp.js}

@@ -3,8 +3,8 @@ import { consume as v, provide as I } from "@lit/context";
 import { LitElement as x, nothing as o, html as u } from "lit";
 import { property as y, state as h, query as C, customElement as R } from "lit/decorators.js";
 import "rxjs";
-import { d as w } from "./list-CrLIL4by.js";
-import "./errors-QjKhr6mA.js";
+import { d as w } from "./list-D730tmGN.js";
+import "./errors-Byb2dIhK.js";
 var D = Object.defineProperty, L = Object.getOwnPropertyDescriptor, r = (e, i, l, d) => {
   for (var t = d > 1 ? void 0 : d ? L(i, l) : i, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (t = (d ? s(i, l, t) : s(t)) || t);