@cas-smartdesign/tree 4.0.5 → 4.1.1

package/dist/tree.mjs

@@ -1,11 +1,11 @@
-import { LitElement as I, css as C, unsafeCSS as k, html as r, render as R } from "lit";
+import { LitElement as I, unsafeCSS as C, css as k, html as r, render as R } from "lit";
 import { property as a } from "lit/decorators/property.js";
 import { SDCheckbox as O } from "@cas-smartdesign/checkbox";
 import { RadioButton as B } from "@cas-smartdesign/radio-button-group";
-const $ = 16, S = 35;
+const D = 16, S = 35;
 class E {
-  constructor(e, s, t, i) {
-    this.id = e, this.text = s, this.path = t, this.nodes = i, this.depth = 0, this.selectionState = "unchecked", this.expanded = !1, this.parentSelectionAllowed = !1, this.lastLoadingChild = !1, this.loading = !1, this.disabled = !1, this.parent = [], t ? (this.depth = t.length - 1, this.parent = t.slice(0, -1)) : this.path = [e], this.childCount = i ? i.length : 0;
+  constructor(e, t, s, i) {
+    this.id = e, this.text = t, this.path = s, this.nodes = i, this.depth = 0, this.selectionState = "unchecked", this.expanded = !1, this.parentSelectionAllowed = !1, this.lastLoadingChild = !1, this.loading = !1, this.disabled = !1, this.parent = [], s ? (this.depth = s.length - 1, this.parent = s.slice(0, -1)) : this.path = [e], this.childCount = i ? i.length : 0;
   }
   updateSelectionStateOfChildren() {
     this.nodes.forEach((e) => {
@@ -13,8 +13,7 @@ class E {
         if (e.childrenType === "radio" || A(e))
           return;
         e.selectionState = "checked";
-      } else
-        this.selectionState === "unchecked" && (e.selectionState = "unchecked");
+      } else this.selectionState === "unchecked" && (e.selectionState = "unchecked");
       e.updateSelectionStateOfChildren();
     });
   }
@@ -39,10 +38,10 @@ class E {
         return !0;
   }
 }
-const T = (d) => (d == null ? void 0 : d.type) === "checkbox", A = (d) => (d == null ? void 0 : d.type) === "radio";
-class P extends E {
-  constructor(e, s, t, i) {
-    super(e, s, t, i), this.type = "checkbox";
+const T = (d) => d?.type === "checkbox", A = (d) => d?.type === "radio";
+class q extends E {
+  constructor(e, t, s, i) {
+    super(e, t, s, i), this.type = "checkbox";
   }
   toggle() {
     this.selectionState === "checked" ? this.selectionState = "unchecked" : this.selectionState = "checked", this.updateBranch();
@@ -53,23 +52,23 @@ class P extends E {
   updateSelectionStateByChildren() {
     if (this.nodes.length === 0)
       return;
-    const e = this.nodes.map((t) => t.selectionState === "checked" || t.selectionState === "indeterminate"), s = e.some(Boolean);
+    const e = this.nodes.map((s) => s.selectionState === "checked" || s.selectionState === "indeterminate"), t = e.some(Boolean);
     if (this.parentSelectionAllowed)
-      this.selectionState = s ? "checked" : "unchecked";
+      this.selectionState = t ? "checked" : "unchecked";
     else {
-      const t = e.every(Boolean), i = this.nodes.map((n) => n.selectionState).some((n) => n === "indeterminate");
-      this.childrenType === "radio" ? this.selectionState = s ? "checked" : "unchecked" : i ? this.selectionState = "indeterminate" : t ? this.selectionState = "checked" : s ? this.selectionState = "indeterminate" : this.selectionState = "unchecked";
+      const s = e.every(Boolean), i = this.nodes.map((n) => n.selectionState).some((n) => n === "indeterminate");
+      this.childrenType === "radio" ? this.selectionState = t ? "checked" : "unchecked" : i ? this.selectionState = "indeterminate" : s ? this.selectionState = "checked" : t ? this.selectionState = "indeterminate" : this.selectionState = "unchecked";
     }
   }
   getFlattenedSubtree(e) {
-    return e.reduce((s, t) => s.concat(
-      T(t) && t.childCount > 0 && t.expanded ? [t, ...this.getFlattenedSubtree(t.nodes)] : t
+    return e.reduce((t, s) => t.concat(
+      T(s) && s.childCount > 0 && s.expanded ? [s, ...this.getFlattenedSubtree(s.nodes)] : s
     ), []);
   }
 }
 class v extends E {
-  constructor(e, s, t, i) {
-    super(e, s, t, i), this.type = "radio";
+  constructor(e, t, s, i) {
+    super(e, t, s, i), this.type = "radio";
   }
   toggle() {
     this.selectionState === "checked" ? this.selectionState = "unchecked" : (this.selectionState = "checked", this.clearSiblings()), this.updateBranch();
@@ -87,21 +86,21 @@ class v extends E {
   updateSelectionStateByChildren() {
     if (this.nodes.length === 0)
       return;
-    this.nodes.map((s) => s.selectionState === "checked").some(Boolean) ? this.selectionState = "checked" : this.selectionState = "unchecked";
+    this.nodes.map((t) => t.selectionState === "checked").some(Boolean) ? this.selectionState = "checked" : this.selectionState = "unchecked";
   }
   clearSiblings() {
-    this.getSiblings().forEach((s) => {
-      s.uncheck();
+    this.getSiblings().forEach((t) => {
+      t.uncheck();
     });
   }
 }
-const q = `:host{width:100%;display:block;contain:layout;position:absolute}:host([readonly][focused]){background-color:#1467ba4d}.node{height:35px;display:flex;align-items:center}.node .expander,.node .placeholder{height:28px;width:30px;flex-shrink:0}.node .expander{cursor:pointer;background-position:center;background-size:24px;flex:0 0 auto}.node .expander.more{background-image:url("data:image/svg+xml,%3csvg%20height='32'%20viewBox='0%200%2032%2032'%20width='32'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m15%2021%209.5-9.5%209.5%209.5'%20fill='none'%20stroke='%23999'%20stroke-linecap='square'%20stroke-width='2'%20transform='matrix(0%201%20-1%200%2032.25%20-8.25)'/%3e%3c/svg%3e")}.node .expander.less{background-image:url("data:image/svg+xml,%3csvg%20height='32'%20viewBox='0%200%2032%2032'%20width='32'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m19.75%206.75%209.5%209.5-9.5%209.5'%20fill='none'%20stroke='%23999'%20stroke-linecap='square'%20stroke-width='2'%20transform='matrix(0%201%20-1%200%2032.25%20-8.25)'/%3e%3c/svg%3e")}.node .label{outline:none}.node .input{overflow:hidden}.node ul{list-style-type:none;margin:0;padding:0}`;
-var z = Object.defineProperty, M = Object.getOwnPropertyDescriptor, u = (d, e, s, t) => {
-  for (var i = t > 1 ? void 0 : t ? M(e, s) : e, n = d.length - 1, o; n >= 0; n--)
-    (o = d[n]) && (i = (t ? o(e, s, i) : o(i)) || i);
-  return t && i && z(e, s, i), i;
-}, f;
-const c = (f = class extends I {
+const z = `:host{width:100%;display:block;contain:layout;position:absolute}:host([readonly][focused]){background-color:#1467ba4d}.node{height:35px;display:flex;align-items:center}.node .expander,.node .placeholder{height:28px;width:30px;flex-shrink:0}.node .expander{cursor:pointer;background-position:center;background-size:24px;flex:0 0 auto}.node .expander.more{background-image:url("data:image/svg+xml,%3csvg%20height='32'%20viewBox='0%200%2032%2032'%20width='32'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m15%2021%209.5-9.5%209.5%209.5'%20fill='none'%20stroke='%23999'%20stroke-linecap='square'%20stroke-width='2'%20transform='matrix(0%201%20-1%200%2032.25%20-8.25)'/%3e%3c/svg%3e")}.node .expander.less{background-image:url("data:image/svg+xml,%3csvg%20height='32'%20viewBox='0%200%2032%2032'%20width='32'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m19.75%206.75%209.5%209.5-9.5%209.5'%20fill='none'%20stroke='%23999'%20stroke-linecap='square'%20stroke-width='2'%20transform='matrix(0%201%20-1%200%2032.25%20-8.25)'/%3e%3c/svg%3e")}.node .label{outline:none}.node .input{overflow:hidden}.node ul{list-style-type:none;margin:0;padding:0}`;
+var M = Object.defineProperty, u = (d, e, t, s) => {
+  for (var i = void 0, n = d.length - 1, o; n >= 0; n--)
+    (o = d[n]) && (i = o(e, t, i) || i);
+  return i && M(e, t, i), i;
+}, p;
+const c = (p = class extends I {
   constructor() {
     super(...arguments), this.text = "", this.expanded = !1, this.childCount = 0, this.focused = !1, this.readonly = !1, this.depth = 0, this.path = [], this.type = "checkbox", this.selectionState = "unchecked", this.disabled = !1, this.loading = !1, this.onSelectionChange = () => {
       if (!this.readonly) {
@@ -130,15 +129,15 @@ const c = (f = class extends I {
   }
   static get styles() {
     return [
-      C`
-                ${k(q)}
+      k`
+                ${C(z)}
             `
     ];
   }
   render() {
     const e = this.childCount > 0 || this.children.length > 0;
     return r`
-            <li class="node" style="margin-left: ${this.depth * $}px">
+            <li class="node" style="margin-left: ${this.depth * D}px">
                 ${e ? r` <div class="expander ${this.expanded ? "less" : "more"}" @click="${this.toggle}"></div> ` : r` <div class="placeholder"></div> `}
                 ${this.readonly ? r` <div class="label">${this.text}</div> ` : r`
                           ${this.type === "checkbox" ? r`
@@ -190,10 +189,9 @@ const c = (f = class extends I {
     }
   }
   getState(e) {
-    var n;
-    const s = Array.isArray(e) ? [...e, this.nodeId] : [this.nodeId], t = [...this.children].map((o) => o.getState(s));
+    const t = Array.isArray(e) ? [...e, this.nodeId] : [this.nodeId], s = [...this.children].map((n) => n.getState(t));
     let i;
-    return this.type === "checkbox" ? i = new P(this.nodeId, this.text, s, t) : i = new v(this.nodeId, this.text, s, t), i.selectionState = this.selectionState, i.childrenType = (n = t[0]) == null ? void 0 : n.type, i.expanded = this.expanded, i.disabled = this.disabled, i;
+    return this.type === "checkbox" ? i = new q(this.nodeId, this.text, t, s) : i = new v(this.nodeId, this.text, t, s), i.selectionState = this.selectionState, i.childrenType = s[0]?.type, i.expanded = this.expanded, i.disabled = this.disabled, i;
   }
   dispatchExpansionEvent() {
     this.dispatchEvent(
@@ -204,94 +202,94 @@ const c = (f = class extends I {
       })
     );
   }
-}, f.ID = "sd-tree-node", f.ensureDefined = () => {
-  B.ensureDefined(), O.ensureDefined(), customElements.get(f.ID) || customElements.define(f.ID, f);
-}, f);
+}, p.ID = "sd-tree-node", p.ensureDefined = () => {
+  B.ensureDefined(), O.ensureDefined(), customElements.get(p.ID) || customElements.define(p.ID, p);
+}, p);
 u([
   a({ type: String, reflect: !0, attribute: !0 })
-], c.prototype, "text", 2);
+], c.prototype, "text");
 u([
   a({ type: Boolean, reflect: !0, attribute: !0 })
-], c.prototype, "expanded", 2);
+], c.prototype, "expanded");
 u([
   a({ type: String, reflect: !0, attribute: "node-id" })
-], c.prototype, "nodeId", 2);
+], c.prototype, "nodeId");
 u([
   a({ type: Number, reflect: !0, attribute: "child-count" })
-], c.prototype, "childCount", 2);
+], c.prototype, "childCount");
 u([
   a({ type: Boolean, reflect: !0, attribute: !0 })
-], c.prototype, "focused", 2);
+], c.prototype, "focused");
 u([
   a({ type: Boolean, reflect: !0, attribute: !0 })
-], c.prototype, "readonly", 2);
+], c.prototype, "readonly");
 u([
   a({ type: Number })
-], c.prototype, "depth", 2);
+], c.prototype, "depth");
 u([
   a({ type: Array, attribute: !1 })
-], c.prototype, "path", 2);
+], c.prototype, "path");
 u([
   a({ type: String, reflect: !0, attribute: !0 })
-], c.prototype, "type", 2);
+], c.prototype, "type");
 u([
   a({ type: String, reflect: !0, attribute: "selection-state" })
-], c.prototype, "selectionState", 2);
+], c.prototype, "selectionState");
 u([
   a({ type: Boolean, reflect: !0, attribute: !0 })
-], c.prototype, "disabled", 2);
+], c.prototype, "disabled");
 u([
   a({ type: Boolean, reflect: !0, attribute: !0 })
-], c.prototype, "loading", 2);
-let F = c;
-const U = ":host{position:absolute;width:100%}:host([readonly]) li{padding-left:30px}li{height:35px;padding-left:34px}.text{vertical-align:middle;line-height:35px;font-family:Segoe UI,Lucida Sans,Arial,sans-serif;color:#111;font-size:16px}";
-var V = Object.defineProperty, J = Object.getOwnPropertyDescriptor, L = (d, e, s, t) => {
-  for (var i = t > 1 ? void 0 : t ? J(e, s) : e, n = d.length - 1, o; n >= 0; n--)
-    (o = d[n]) && (i = (t ? o(e, s, i) : o(i)) || i);
-  return t && i && V(e, s, i), i;
-}, g;
-const w = (g = class extends I {
+], c.prototype, "loading");
+let P = c;
+const F = ":host{position:absolute;width:100%}:host([readonly]) li{padding-left:30px}li{height:35px;padding-left:34px}.text{vertical-align:middle;line-height:35px;font-family:Segoe UI,Lucida Sans,Arial,sans-serif;color:#111;font-size:16px}";
+var U = Object.defineProperty, L = (d, e, t, s) => {
+  for (var i = void 0, n = d.length - 1, o; n >= 0; n--)
+    (o = d[n]) && (i = o(e, t, i) || i);
+  return i && U(e, t, i), i;
+}, f;
+const w = (f = class extends I {
   constructor() {
     super(...arguments), this.readonly = !1, this.depth = 0;
   }
   static get styles() {
     return [
-      C`
-                ${k(U)}
+      k`
+                ${C(F)}
             `
     ];
   }
   render() {
     return r`
-            <li class="root" style="margin-left: ${this.depth * $}px;">
+            <li class="root" style="margin-left: ${this.depth * D}px;">
                 <div class="text">
                     <slot>Loading...</slot>
                 </div>
             </li>
         `;
   }
-}, g.ID = "sd-tree-loading-indicator", g.ensureDefined = () => {
-  customElements.get(g.ID) || customElements.define(g.ID, g);
-}, g);
+}, f.ID = "sd-tree-loading-indicator", f.ensureDefined = () => {
+  customElements.get(f.ID) || customElements.define(f.ID, f);
+}, f);
 L([
   a({ type: Boolean, reflect: !0, attribute: !0 })
-], w.prototype, "readonly", 2);
+], w.prototype, "readonly");
 L([
   a({ type: Number })
-], w.prototype, "depth", 2);
-let K = w;
-const y = (d, e = 1, s = 0) => e > 0 ? d.reduce(
-  (t, i) => t.concat(
-    i.childCount > 0 && i.expanded ? [i, ...y(i.nodes, e - 1, s + 1)] : i
+], w.prototype, "depth");
+let V = w;
+const y = (d, e = 1, t = 0) => e > 0 ? d.reduce(
+  (s, i) => s.concat(
+    i.childCount > 0 && i.expanded ? [i, ...y(i.nodes, e - 1, t + 1)] : i
   ),
   []
-) : d.slice(), G = (d, e, s = 0) => {
+) : d.slice(), J = (d, e, t = 0) => {
   if (!e)
     return null;
-  const t = e[s], i = d.find((n) => n.id === t);
-  return e.length - 1 === s ? i : (i == null ? void 0 : i.nodes.length) > 0 ? G(i.nodes, e, s + 1) : null;
-}, H = (d, e, s, t, i, n) => {
-  const o = Math.max(0, n * t), l = Math.min(o, d * t), h = Math.max(0, d * t - i + t);
+  const s = e[t], i = d.find((n) => n.id === s);
+  return e.length - 1 === t ? i : i?.nodes.length > 0 ? J(i.nodes, e, t + 1) : null;
+}, K = (d, e, t, s, i, n) => {
+  const o = Math.max(0, n * s), l = Math.min(o, d * s), h = Math.max(0, d * s - i + s);
   switch (e) {
     case "start":
       return l;
@@ -303,28 +301,28 @@ const y = (d, e = 1, s = 0) => e > 0 ? d.reduce(
     }
     case "auto":
     default:
-      return s >= h && s <= l ? s : s < h ? h : l;
-  }
-}, D = (d) => d && typeof d != "string", se = (d, e) => {
-  const s = d.find((t) => D(t) && JSON.stringify(t.path) === JSON.stringify(e));
-  return D(s) ? s : null;
-}, b = (d, e) => d.findIndex((s) => typeof s == "string" && s === JSON.stringify(e)), p = (d) => typeof d == "string", j = ":host{display:block;position:relative;contain:layout;overflow:auto}:host(:focus){outline:none}ul{list-style-type:none;margin:0;padding:0}.root{width:100%}";
-var Y = Object.defineProperty, Q = Object.getOwnPropertyDescriptor, m = (d, e, s, t) => {
-  for (var i = t > 1 ? void 0 : t ? Q(e, s) : e, n = d.length - 1, o; n >= 0; n--)
-    (o = d[n]) && (i = (t ? o(e, s, i) : o(i)) || i);
-  return t && i && Y(e, s, i), i;
-}, x;
-const N = (x = class extends I {
+      return t >= h && t <= l ? t : t < h ? h : l;
+  }
+}, $ = (d) => d && typeof d != "string", ee = (d, e) => {
+  const t = d.find((s) => $(s) && JSON.stringify(s.path) === JSON.stringify(e));
+  return $(t) ? t : null;
+}, b = (d, e) => d.findIndex((t) => typeof t == "string" && t === JSON.stringify(e)), x = (d) => typeof d == "string", G = ":host{display:block;position:relative;contain:layout;overflow:auto}:host(:focus){outline:none}ul{list-style-type:none;margin:0;padding:0}.root{width:100%}";
+var H = Object.defineProperty, j = Object.getOwnPropertyDescriptor, m = (d, e, t, s) => {
+  for (var i = s > 1 ? void 0 : s ? j(e, t) : e, n = d.length - 1, o; n >= 0; n--)
+    (o = d[n]) && (i = (s ? o(e, t, i) : o(i)) || i);
+  return s && i && H(e, t, i), i;
+}, g;
+const N = (g = class extends I {
   constructor() {
     super(), this.pageSize = 50, this.loadingText = "Loading...", this.parentSelectionAllowed = !1, this.readonly = !1, this._lastKnownHeight = 0, this._lastKnownScrollTop = 0, this._lastRenderedScrollTop = 0, this._visibleItemsNum = 0, this._firstVisibleIndex = 0, this._lastVisibleIndex = 0, this._firstRenderedIndex = 0, this._lastRenderedIndex = 0, this._focusIndex = -1, this._flattenedNodes = [], this._rootItemsLoading = !1, this._rootNodeCount = 0, this._loadedRootNodeCount = 0, this._allNodeCount = 0, this._nodeStates = /* @__PURE__ */ new Map(), this.onScroll = () => {
       this._lastKnownScrollTop = this.scrollTop;
       const e = this._lastRenderedScrollTop - this._lastKnownScrollTop;
       Math.abs(e) >= S && (this._lastRenderedScrollTop = this._lastKnownScrollTop, this.requestUpdate());
     }, this.handleNodeExpansion = (e) => {
-      const { path: s, expanded: t } = e.detail;
-      this.updateAfterExpansion(s, t);
+      const { path: t, expanded: s } = e.detail;
+      this.updateAfterExpansion(t, s);
     }, this.handleKeyDown = (e) => {
-      let s = !0;
+      let t = !0;
       switch (e.key) {
         case "ArrowDown": {
           this.focusIndex = this.normalizeIndex(this.focusIndex + 1);
@@ -335,34 +333,34 @@ const N = (x = class extends I {
           break;
         }
         case "ArrowRight": {
-          const t = this.focusedNode;
-          if (t)
-            if (t.childCount > 0 && !t.expanded) {
-              const i = this.querySelector(`[node-id='${t.id}']`);
+          const s = this.focusedNode;
+          if (s)
+            if (s.childCount > 0 && !s.expanded) {
+              const i = this.querySelector(`[node-id='${s.id}']`);
               i && i.expand();
             } else
               this.focusIndex = this.normalizeIndex(this.focusIndex + 1);
           break;
         }
         case "ArrowLeft": {
-          const t = this.focusedNode;
-          if (t)
-            if (t.childCount > 0 && t.expanded) {
-              const i = this.querySelector(`[node-id='${t.id}']`);
+          const s = this.focusedNode;
+          if (s)
+            if (s.childCount > 0 && s.expanded) {
+              const i = this.querySelector(`[node-id='${s.id}']`);
               i && i.collapse();
             } else
               this.focusIndex = this.normalizeIndex(this.focusIndex - 1);
           break;
         }
         case "Enter": {
-          const t = this.focusedNode;
-          t && (this.toggleSelection(t.path), this.updateComplete.then(() => {
+          const s = this.focusedNode;
+          s && (this.toggleSelection(s.path), this.updateComplete.then(() => {
             this.dispatchEvent(
               new CustomEvent("selection", {
                 detail: {
-                  path: t.path,
-                  checked: t.selectionState === "checked",
-                  indeterminate: t.selectionState === "indeterminate"
+                  path: s.path,
+                  checked: s.selectionState === "checked",
+                  indeterminate: s.selectionState === "indeterminate"
                 },
                 bubbles: !0,
                 composed: !0
@@ -372,17 +370,17 @@ const N = (x = class extends I {
           break;
         }
         default: {
-          s = !1;
+          t = !1;
           break;
         }
       }
-      s && (e.preventDefault(), e.stopPropagation());
+      t && (e.preventDefault(), e.stopPropagation());
     }, this.handleNodeSelection = (e) => {
       if (e.target == this)
         return;
       this._reusePreviousRenderData = !0;
-      const { path: s } = e.detail;
-      this.focusIndex = b(this._flattenedNodes, s), this.focus(), this.toggleSelection(s), this.updateComplete.then(() => {
+      const { path: t } = e.detail;
+      this.focusIndex = b(this._flattenedNodes, t), this.focus(), this.toggleSelection(t), this.updateComplete.then(() => {
         this._reusePreviousRenderData = !1;
       });
     }, this.getFlattenedNodeId = (e) => JSON.stringify(e.path), this.nodeGetter = (e) => e ? this._nodeStates.get(JSON.stringify(e)) : null, this._resizeObserver = new ResizeObserver(() => {
@@ -400,23 +398,23 @@ const N = (x = class extends I {
   }
   set focusIndex(e) {
     if (e >= -1 && e < this._allNodeCount) {
-      const s = this._focusIndex;
-      this._focusIndex = e, (e <= this._firstVisibleIndex || this._lastVisibleIndex <= e) && this.scrollToNode(e), s != e && this.requestUpdate("focusIndex", s);
+      const t = this._focusIndex;
+      this._focusIndex = e, (e <= this._firstVisibleIndex || this._lastVisibleIndex <= e) && this.scrollToNode(e), t != e && this.requestUpdate("focusIndex", t);
     }
   }
   setNodes(e) {
-    this.stopLoadingIndicator(), this.setLastLoadingChildren(e, this.rootNodeCount, e.length), e.forEach((s, t) => {
+    this.stopLoadingIndicator(), this.setLastLoadingChildren(e, this.rootNodeCount, e.length), e.forEach((t, s) => {
       const i = [...e];
-      i.splice(t, 1), this.updateNodeMap(s, i);
+      i.splice(s, 1), this.updateNodeMap(t, i);
     }), this.updateCount(e), this._loadedRootNodeCount = e.length, this._flattenedNodes = y(e, 1 / 0).map(this.getFlattenedNodeId), this.requestUpdate();
   }
-  addNodes(e, s) {
-    this.stopLoadingIndicator(s), e.forEach((i, n) => {
+  addNodes(e, t) {
+    this.stopLoadingIndicator(t), e.forEach((i, n) => {
       const o = [...e];
       o.splice(n, 1), this.updateNodeMap(i, o);
     });
-    const t = this.nodeGetter(s);
-    t ? t.expanded && (this._allNodeCount += e.length + this.getNodeCount(e)) : this._loadedRootNodeCount += e.length, this.updateFlattenedNodes(e, s), this.requestUpdate();
+    const s = this.nodeGetter(t);
+    s ? s.expanded && (this._allNodeCount += e.length + this.getNodeCount(e)) : this._loadedRootNodeCount += e.length, this.updateFlattenedNodes(e, t), this.requestUpdate();
   }
   connectedCallback() {
     super.connectedCallback(), this._resizeObserver.observe(this);
@@ -426,14 +424,14 @@ const N = (x = class extends I {
   }
   static get styles() {
     return [
-      C`
-                ${k(j)}
+      k`
+                ${C(G)}
             `
     ];
   }
   firstUpdated(e) {
     super.firstUpdated(e), this.addEventListener("scroll", this.onScroll), this.addEventListener("keydown", this.handleKeyDown), this.addEventListener("expansion", this.handleNodeExpansion), this.addEventListener("selection", this.handleNodeSelection), this.addEventListener("focus", () => {
-      this.focusIndex == -1 && (this.focusIndex = this.normalizeIndex(0));
+      this.focusIndex == -1 && this.matches(":focus-visible") && (this.focusIndex = this.normalizeIndex(0));
     }), this._nodeStates.size === 0 && (this.children.length > 0 ? this.syncState() : this.requestData());
   }
   updated(e) {
@@ -448,20 +446,20 @@ const N = (x = class extends I {
             </div>
         `;
   }
-  scrollToNode(e, s = "auto") {
-    this.scrollTop = H(
+  scrollToNode(e, t = "auto") {
+    this.scrollTop = K(
       this.normalizeIndex(e),
-      s,
+      t,
       this.scrollTop,
       S,
       this.height,
       this._allNodeCount
     );
   }
-  updateNodeMap(e, s) {
-    e && (e.nodeGetter = this.nodeGetter, e.getSiblings = () => s, this._nodeStates.set(JSON.stringify(e.path), e), e.nodes.forEach((t, i) => {
+  updateNodeMap(e, t) {
+    e && (e.nodeGetter = this.nodeGetter, e.getSiblings = () => t, this._nodeStates.set(JSON.stringify(e.path), e), e.nodes.forEach((s, i) => {
       const n = [...e.nodes];
-      n.splice(i, 1), this.updateNodeMap(t, n);
+      n.splice(i, 1), this.updateNodeMap(s, n);
     }));
   }
   updateParentSelectionAllowed() {
@@ -473,15 +471,15 @@ const N = (x = class extends I {
     const e = this._flattenedNodes.slice(this._firstRenderedIndex, this._lastRenderedIndex + 1);
     R(
       r`
-                ${e.map((s, t) => {
-        const i = t + this._firstRenderedIndex, n = this.getTopPosition(i);
-        if (!p(s))
+                ${e.map((t, s) => {
+        const i = s + this._firstRenderedIndex, n = this.getTopPosition(i);
+        if (!x(t))
           return r`
-                            <sd-tree-loading-indicator .depth="${s.depth}" style="transform: translateY(${n}px)"
+                            <sd-tree-loading-indicator .depth="${t.depth}" style="transform: translateY(${n}px)"
                                 >${this.loadingText}</sd-tree-loading-indicator
                             >
                         `;
-        const o = this._nodeStates.get(s), l = i === this.focusIndex;
+        const o = this._nodeStates.get(t), l = i === this.focusIndex;
         let h = o.disabled;
         return this.parentSelectionAllowed || (h = h || o.hasRadioButtonDescendant()), r`
                         <sd-tree-node
@@ -513,21 +511,21 @@ const N = (x = class extends I {
       if (this._lastRenderedScrollTop = this.scrollTop, this._visibleItemsNum = Math.min(Math.ceil(this.height / S), this._allNodeCount), this._visibleItemsNum > 0) {
         this._firstVisibleIndex = this.normalizeIndex(Math.floor(this._lastRenderedScrollTop / S)), this._lastVisibleIndex = this.normalizeIndex(this._firstVisibleIndex + this._visibleItemsNum), this._firstRenderedIndex = this.normalizeIndex(this._firstVisibleIndex - 2), this._lastRenderedIndex = this.normalizeIndex(this._lastVisibleIndex + 2);
         for (const e of this._flattenedNodes.slice(this._firstRenderedIndex, this._lastRenderedIndex + 1)) {
-          const s = p(e) && this._nodeStates.get(e);
-          if (s) {
-            if (s.lastLoadingChild) {
-              const t = s.parentNode;
-              if (t) {
-                if (this.needsFurtherData(t)) {
-                  this.requestData(t);
+          const t = x(e) && this._nodeStates.get(e);
+          if (t) {
+            if (t.lastLoadingChild) {
+              const s = t.parentNode;
+              if (s) {
+                if (this.needsFurtherData(s)) {
+                  this.requestData(s);
                   break;
                 }
               } else if (this._loadedRootNodeCount < this.rootNodeCount && !this._rootItemsLoading) {
                 this.requestData();
                 break;
               }
-            } else if (this.needsFurtherData(s)) {
-              this.requestData(s);
+            } else if (this.needsFurtherData(t)) {
+              this.requestData(t);
               break;
             }
           }
@@ -539,7 +537,7 @@ const N = (x = class extends I {
     return e.expanded && e.childCount > e.nodes.length && this.nodeIndex(e.id) + e.nodes.length < this._lastRenderedIndex;
   }
   nodeIndex(e) {
-    return this._flattenedNodes.findIndex((s) => s === e);
+    return this._flattenedNodes.findIndex((t) => t === e);
   }
   normalizeIndex(e) {
     return Math.max(0, Math.min(e, this._allNodeCount - 1));
@@ -548,23 +546,23 @@ const N = (x = class extends I {
     return this.offsetHeight;
   }
   requestData(e) {
-    if (!(e != null && e.loading)) {
-      const s = e == null ? void 0 : e.path;
-      this.startLoadingIndicator(s), this.dispatchEvent(
+    if (!e?.loading) {
+      const t = e?.path;
+      this.startLoadingIndicator(t), this.dispatchEvent(
         new CustomEvent("data-request", {
-          detail: { path: s }
+          detail: { path: t }
         })
       );
     }
   }
-  updateAfterExpansion(e, s) {
-    const t = this._nodeStates.get(JSON.stringify(e));
-    if (t) {
-      t.expanded = s;
+  updateAfterExpansion(e, t) {
+    const s = this._nodeStates.get(JSON.stringify(e));
+    if (s) {
+      s.expanded = t;
       const i = b(this._flattenedNodes, e), n = this._flattenedNodes[this.focusIndex];
-      if (s) {
-        const o = this.addSubtree(t, i + 1), l = t.childCount > t.nodes.length, h = i + t.nodes.length < this._lastRenderedIndex;
-        l && h && this.requestData(t), this._allNodeCount += o;
+      if (t) {
+        const o = this.addSubtree(s, i + 1), l = s.childCount > s.nodes.length, h = i + s.nodes.length < this._lastRenderedIndex;
+        l && h && this.requestData(s), this._allNodeCount += o;
       } else {
         const o = this.removeSubtree(i);
         this._allNodeCount -= o;
@@ -576,67 +574,67 @@ const N = (x = class extends I {
     }
     this.requestUpdate();
   }
-  addSubtree(e, s) {
-    const t = this.getFlattenedSubtree(e.nodes);
-    return this._flattenedNodes.splice(s, 0, ...t), t.length;
+  addSubtree(e, t) {
+    const s = this.getFlattenedSubtree(e.nodes);
+    return this._flattenedNodes.splice(t, 0, ...s), s.length;
   }
   getFlattenedSubtree(e) {
-    return e.reduce((s, t) => s.concat(
-      t && t.childCount > 0 && t.expanded ? [JSON.stringify(t.path), ...this.getFlattenedSubtree(t.nodes)] : JSON.stringify(t.path)
+    return e.reduce((t, s) => t.concat(
+      s && s.childCount > 0 && s.expanded ? [JSON.stringify(s.path), ...this.getFlattenedSubtree(s.nodes)] : JSON.stringify(s.path)
     ), []);
   }
   removeSubtree(e) {
-    const s = this.getNextNonDescendantIndex(e);
-    let t = 0;
-    return s !== -1 ? (t = s - e - 1, this._flattenedNodes.splice(e + 1, t)) : (t = this._flattenedNodes.length - e - 1, this._flattenedNodes.splice(e + 1)), t;
+    const t = this.getNextNonDescendantIndex(e);
+    let s = 0;
+    return t !== -1 ? (s = t - e - 1, this._flattenedNodes.splice(e + 1, s)) : (s = this._flattenedNodes.length - e - 1, this._flattenedNodes.splice(e + 1)), s;
   }
   // Returns the index of the node which is the next node
   // in this._flattenedNodes after the descendants of the given node.
   // This is used for removing the descendans of a node from this._flattenedNodes
   // after collapsing it.
   getNextNonDescendantIndex(e) {
-    const s = this._flattenedNodes[e], t = p(s) && this._nodeStates.get(s);
-    if (t)
+    const t = this._flattenedNodes[e], s = x(t) && this._nodeStates.get(t);
+    if (s)
       for (let i = e + 1; i < this._flattenedNodes.length; i++) {
-        const n = this._flattenedNodes[i], o = p(n) && this._nodeStates.get(n);
-        if (o && o.path.length <= t.path.length)
+        const n = this._flattenedNodes[i], o = x(n) && this._nodeStates.get(n);
+        if (o && o.path.length <= s.path.length)
           return i;
       }
     return -1;
   }
   get focusedNode() {
     const e = this._flattenedNodes[this.focusIndex];
-    return p(e) && this._nodeStates.get(e);
+    return x(e) && this._nodeStates.get(e);
   }
   toggleSelection(e) {
     this.nodeGetter(e).toggle(), this.requestUpdate();
   }
-  updateFlattenedNodes(e, s) {
-    if (s) {
-      const t = b(this._flattenedNodes, s), i = this._flattenedNodes[t];
-      if (p(i)) {
+  updateFlattenedNodes(e, t) {
+    if (t) {
+      const s = b(this._flattenedNodes, t), i = this._flattenedNodes[s];
+      if (x(i)) {
         const n = this._nodeStates.get(i);
         if (n) {
-          const o = t + n.nodes.length + 1, l = n.depth, h = y(e, 1 / 0, l + 1).map(
+          const o = s + n.nodes.length + 1, l = n.depth, h = y(e, 1 / 0, l + 1).map(
             this.getFlattenedNodeId
           );
           n.expanded && this._flattenedNodes.splice(o, 0, ...h), n.nodes = [...n.nodes, ...e], n.loading = !1, this.updateLastLoadingChild(n.nodes, h);
         }
       }
     } else {
-      const t = y(e, 1 / 0).map(this.getFlattenedNodeId);
-      this.updateLastLoadingChild(this._flattenedNodes, t), this._flattenedNodes = [...this._flattenedNodes, ...t];
+      const s = y(e, 1 / 0).map(this.getFlattenedNodeId);
+      this.updateLastLoadingChild(this._flattenedNodes, s), this._flattenedNodes = [...this._flattenedNodes, ...s];
     }
   }
-  updateLastLoadingChild(e, s) {
-    const t = e[e.length - 1], i = p(t) && this._nodeStates.get(t), n = s[s.length - 1], o = p(n) && this._nodeStates.get(n);
+  updateLastLoadingChild(e, t) {
+    const s = e[e.length - 1], i = x(s) && this._nodeStates.get(s), n = t[t.length - 1], o = x(n) && this._nodeStates.get(n);
     if (i && (i.lastLoadingChild = !1), o) {
       const l = o.parentNode;
       (l && l.childCount > l.nodes.length || !l && this.rootNodeCount > this._loadedRootNodeCount) && (o.lastLoadingChild = !0);
     }
   }
-  setLastLoadingChildren(e, s, t) {
-    if (t < s) {
+  setLastLoadingChildren(e, t, s) {
+    if (s < t) {
       const i = e[e.length - 1];
       i && (i.lastLoadingChild = !0);
     }
@@ -646,10 +644,10 @@ const N = (x = class extends I {
   }
   startLoadingIndicator(e) {
     if (e) {
-      const s = this._nodeStates.get(JSON.stringify(e));
-      if (s) {
-        const t = b(this._flattenedNodes, e);
-        s.loading = !0, this.addPlaceholders(t, s);
+      const t = this._nodeStates.get(JSON.stringify(e));
+      if (t) {
+        const s = b(this._flattenedNodes, e);
+        t.loading = !0, this.addPlaceholders(s, t);
       }
     } else
       this._rootItemsLoading = !0, this._flattenedNodes = [
@@ -658,51 +656,51 @@ const N = (x = class extends I {
       ];
     this.updateNodes();
   }
-  addPlaceholders(e, s) {
-    const t = e + s.nodes.length + 1, i = s.childCount - s.nodes.length;
+  addPlaceholders(e, t) {
+    const s = e + t.nodes.length + 1, i = t.childCount - t.nodes.length;
     this._flattenedNodes.splice(
-      t,
+      s,
       0,
       ...new Array(i).fill({
-        depth: s.depth + 1
+        depth: t.depth + 1
       })
     );
   }
   stopLoadingIndicator(e) {
     if (e) {
-      const s = this._nodeStates.get(JSON.stringify(e));
-      if (s && (s.loading = !1, s.expanded)) {
-        const t = b(this._flattenedNodes, e);
-        this.removePlaceHolders(t, s);
+      const t = this._nodeStates.get(JSON.stringify(e));
+      if (t && (t.loading = !1, t.expanded)) {
+        const s = b(this._flattenedNodes, e);
+        this.removePlaceHolders(s, t);
       }
     } else {
       this._rootItemsLoading = !1;
-      const s = this._flattenedNodes.findIndex((t) => !p(t));
-      this._flattenedNodes.splice(s);
+      const t = this._flattenedNodes.findIndex((s) => !x(s));
+      this._flattenedNodes.splice(t);
     }
   }
-  removePlaceHolders(e, s) {
-    const t = e + s.nodes.length + 1, i = s.childCount - s.nodes.length;
-    this._flattenedNodes.splice(t, i);
+  removePlaceHolders(e, t) {
+    const s = e + t.nodes.length + 1, i = t.childCount - t.nodes.length;
+    this._flattenedNodes.splice(s, i);
   }
   // this method is used to synchronize this.nodes property
   // to the declaratively created nodes
   syncState() {
-    const s = [...this.children].map((t) => t.getState());
-    this.addNodes(s), this.rootNodeCount = s.length, this.innerHTML = "";
+    const t = [...this.children].map((s) => s.getState());
+    this.addNodes(t), this.rootNodeCount = t.length, this.innerHTML = "";
   }
   updateCount(e) {
     this._allNodeCount = e.length + this.getNodeCount(e);
   }
   getNodeCount(e) {
-    let s = 0;
-    return e.forEach((t) => {
-      t.expanded && (s += t.childCount + this.getNodeCount(t.nodes));
-    }), s;
+    let t = 0;
+    return e.forEach((s) => {
+      s.expanded && (t += s.childCount + this.getNodeCount(s.nodes));
+    }), t;
   }
-}, x.ID = "sd-tree", x.ensureDefined = () => {
-  F.ensureDefined(), K.ensureDefined(), customElements.get(x.ID) || customElements.define(x.ID, x);
-}, x);
+}, g.ID = "sd-tree", g.ensureDefined = () => {
+  P.ensureDefined(), V.ensureDefined(), customElements.get(g.ID) || customElements.define(g.ID, g);
+}, g);
 m([
   a({ type: String })
 ], N.prototype, "loadingText", 2);
@@ -718,21 +716,21 @@ m([
 m([
   a({ type: Number, attribute: "focus-index", reflect: !0 })
 ], N.prototype, "focusIndex", 1);
-let W = N;
-W.ensureDefined();
+let Y = N;
+Y.ensureDefined();
 export {
-  P as CheckboxNode,
+  q as CheckboxNode,
   E as Node,
   v as RadioButtonNode,
-  W as Tree,
-  se as findNode,
-  G as findNodeByPath,
+  Y as Tree,
+  ee as findNode,
+  J as findNodeByPath,
   b as findNodeIndex,
   y as flattenNodes,
-  H as getOffsetForIndexAndAlignment,
+  K as getOffsetForIndexAndAlignment,
   T as isCheckboxNode,
-  p as isFlattenedNode,
-  D as isNode,
+  x as isFlattenedNode,
+  $ as isNode,
   A as isRadioButtonNode
 };
 //# sourceMappingURL=tree.mjs.map