@cas-smartdesign/tree 4.0.3

package/dist/tree.mjs

@@ -0,0 +1,737 @@
+import { LitElement as I, css as C, unsafeCSS 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;
+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;
+  }
+  updateSelectionStateOfChildren() {
+    this.nodes.forEach((e) => {
+      if (this.selectionState === "checked") {
+        if (e.childrenType === "radio" || A(e))
+          return;
+        e.selectionState = "checked";
+      } else
+        this.selectionState === "unchecked" && (e.selectionState = "unchecked");
+      e.updateSelectionStateOfChildren();
+    });
+  }
+  updateParent() {
+    const e = this.parentNode;
+    return e && (!this.parentSelectionAllowed || this.selectionState !== "unchecked" || e.disabled) && (e.updateSelectionStateByChildren(), e.updateParent()), e;
+  }
+  get parentNode() {
+    return this.parent.length ? this.nodeGetter(this.parent) : null;
+  }
+  check() {
+    this.selectionState !== "checked" && (this.selectionState = "checked", this.updateBranch());
+  }
+  uncheck() {
+    this.selectionState !== "unchecked" && (this.selectionState = "unchecked", this.updateBranch());
+  }
+  hasRadioButtonDescendant() {
+    if (this.childrenType === "radio")
+      return !0;
+    for (const e of this.nodes)
+      if (e.hasRadioButtonDescendant())
+        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";
+  }
+  toggle() {
+    this.selectionState === "checked" ? this.selectionState = "unchecked" : this.selectionState = "checked", this.updateBranch();
+  }
+  updateBranch() {
+    (!this.parentSelectionAllowed || this.selectionState === "unchecked") && (this.updateSelectionStateOfChildren(), this.updateSelectionStateByChildren()), this.updateParent();
+  }
+  updateSelectionStateByChildren() {
+    if (this.nodes.length === 0)
+      return;
+    const e = this.nodes.map((t) => t.selectionState === "checked" || t.selectionState === "indeterminate"), s = e.some(Boolean);
+    if (this.parentSelectionAllowed)
+      this.selectionState = s ? "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";
+    }
+  }
+  getFlattenedSubtree(e) {
+    return e.reduce((s, t) => s.concat(
+      T(t) && t.childCount > 0 && t.expanded ? [t, ...this.getFlattenedSubtree(t.nodes)] : t
+    ), []);
+  }
+}
+class v extends E {
+  constructor(e, s, t, i) {
+    super(e, s, t, i), this.type = "radio";
+  }
+  toggle() {
+    this.selectionState === "checked" ? this.selectionState = "unchecked" : (this.selectionState = "checked", this.clearSiblings()), this.updateBranch();
+  }
+  check() {
+    this.selectionState !== "checked" && (this.selectionState = "checked", this.clearSiblings(), this.updateBranch());
+  }
+  updateBranch() {
+    this.selectionState === "unchecked" && this.updateSelectionStateOfChildren(), this.updateParent();
+  }
+  updateParent() {
+    const e = super.updateParent();
+    return e instanceof v && e.clearSiblings(), e;
+  }
+  updateSelectionStateByChildren() {
+    if (this.nodes.length === 0)
+      return;
+    this.nodes.map((s) => s.selectionState === "checked").some(Boolean) ? this.selectionState = "checked" : this.selectionState = "unchecked";
+  }
+  clearSiblings() {
+    this.getSiblings().forEach((s) => {
+      s.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 {
+  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) {
+        if (this.type == "checkbox") {
+          const e = this.shadowRoot.querySelector(".input");
+          this.selectionState = e.checked ? "checked" : e.indeterminate ? "indeterminate" : "unchecked";
+        } else {
+          const e = this.shadowRoot.querySelector(".input");
+          this.selectionState = e.checked ? "checked" : "unchecked";
+        }
+        this.updateComplete.then(() => {
+          this.dispatchEvent(
+            new CustomEvent("selection", {
+              detail: {
+                path: this.path,
+                checked: this.selectionState === "checked",
+                indeterminate: this.selectionState === "indeterminate"
+              },
+              bubbles: !0,
+              composed: !0
+            })
+          );
+        });
+      }
+    };
+  }
+  static get styles() {
+    return [
+      C`
+                ${k(q)}
+            `
+    ];
+  }
+  render() {
+    const e = this.childCount > 0 || this.children.length > 0;
+    return r`
+            <li class="node" style="margin-left: ${this.depth * $}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`
+                                    <sd-checkbox
+                                        class="input"
+                                        tabIndex="-1"
+                                        label="${this.text}"
+                                        ?checked="${this.selectionState === "checked"}"
+                                        ?focused="${this.focused}"
+                                        ?disabled="${this.disabled}"
+                                        .indeterminate="${this.selectionState === "indeterminate"}"
+                                        @value-change="${this.onSelectionChange}"
+                                        oneline
+                                    ></sd-checkbox>
+                                ` : r`
+                                    <sd-radio-button
+                                        class="input"
+                                        tabIndex="-1"
+                                        label="${this.text}"
+                                        ?checked="${this.selectionState === "checked"}"
+                                        ?focused="${this.focused}"
+                                        ?disabled="${this.disabled}"
+                                        @click="${this.onSelectionChange}"
+                                    ></sd-radio-button>
+                                `}
+                      `}
+                ${e && this.expanded ? r`
+                          <ul>
+                              <slot></slot>
+                          </ul>
+                      ` : ""}
+            </li>
+        `;
+  }
+  toggle() {
+    this.loading || (this.expanded = !this.expanded, this.dispatchExpansionEvent());
+  }
+  expand() {
+    if (!this.loading) {
+      const e = !this.expanded;
+      this.expanded = !0, e && this.dispatchExpansionEvent();
+    }
+  }
+  collapse() {
+    if (!this.loading) {
+      const e = this.expanded;
+      this.expanded = !1, e && this.dispatchExpansionEvent();
+    }
+  }
+  getState(e) {
+    var n;
+    const s = Array.isArray(e) ? [...e, this.nodeId] : [this.nodeId], t = [...this.children].map((o) => o.getState(s));
+    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;
+  }
+  dispatchExpansionEvent() {
+    this.dispatchEvent(
+      new CustomEvent("expansion", {
+        detail: { path: this.path, expanded: this.expanded },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+}, f.ID = "sd-tree-node", f.ensureDefined = () => {
+  B.ensureDefined(), O.ensureDefined(), customElements.get(f.ID) || customElements.define(f.ID, f);
+}, f);
+u([
+  a({ type: String, reflect: !0, attribute: !0 })
+], c.prototype, "text", 2);
+u([
+  a({ type: Boolean, reflect: !0, attribute: !0 })
+], c.prototype, "expanded", 2);
+u([
+  a({ type: String, reflect: !0, attribute: "node-id" })
+], c.prototype, "nodeId", 2);
+u([
+  a({ type: Number, reflect: !0, attribute: "child-count" })
+], c.prototype, "childCount", 2);
+u([
+  a({ type: Boolean, reflect: !0, attribute: !0 })
+], c.prototype, "focused", 2);
+u([
+  a({ type: Boolean, reflect: !0, attribute: !0 })
+], c.prototype, "readonly", 2);
+u([
+  a({ type: Number })
+], c.prototype, "depth", 2);
+u([
+  a({ type: Array, attribute: !1 })
+], c.prototype, "path", 2);
+u([
+  a({ type: String, reflect: !0, attribute: !0 })
+], c.prototype, "type", 2);
+u([
+  a({ type: String, reflect: !0, attribute: "selection-state" })
+], c.prototype, "selectionState", 2);
+u([
+  a({ type: Boolean, reflect: !0, attribute: !0 })
+], c.prototype, "disabled", 2);
+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 {
+  constructor() {
+    super(...arguments), this.readonly = !1, this.depth = 0;
+  }
+  static get styles() {
+    return [
+      C`
+                ${k(U)}
+            `
+    ];
+  }
+  render() {
+    return r`
+            <li class="root" style="margin-left: ${this.depth * $}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);
+L([
+  a({ type: Boolean, reflect: !0, attribute: !0 })
+], w.prototype, "readonly", 2);
+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
+  ),
+  []
+) : d.slice(), G = (d, e, s = 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);
+  switch (e) {
+    case "start":
+      return l;
+    case "end":
+      return h;
+    case "center": {
+      const _ = Math.round(h + (l - h) / 2);
+      return _ < Math.ceil(i / 2) ? 0 : _ > o + Math.floor(i / 2) ? o : _;
+    }
+    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 {
+  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);
+    }, this.handleKeyDown = (e) => {
+      let s = !0;
+      switch (e.key) {
+        case "ArrowDown": {
+          this.focusIndex = this.normalizeIndex(this.focusIndex + 1);
+          break;
+        }
+        case "ArrowUp": {
+          this.focusIndex = this.normalizeIndex(this.focusIndex - 1);
+          break;
+        }
+        case "ArrowRight": {
+          const t = this.focusedNode;
+          if (t)
+            if (t.childCount > 0 && !t.expanded) {
+              const i = this.querySelector(`[node-id='${t.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}']`);
+              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(() => {
+            this.dispatchEvent(
+              new CustomEvent("selection", {
+                detail: {
+                  path: t.path,
+                  checked: t.selectionState === "checked",
+                  indeterminate: t.selectionState === "indeterminate"
+                },
+                bubbles: !0,
+                composed: !0
+              })
+            );
+          }));
+          break;
+        }
+        default: {
+          s = !1;
+          break;
+        }
+      }
+      s && (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(() => {
+        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(() => {
+      this._lastKnownHeight !== this.offsetHeight && (this._lastKnownHeight = this.offsetHeight, this.requestUpdate());
+    });
+  }
+  get rootNodeCount() {
+    return this._rootNodeCount;
+  }
+  set rootNodeCount(e) {
+    e === 0 ? this._allNodeCount = 0 : e > 0 && (this._allNodeCount += e - this.rootNodeCount), this._rootNodeCount = e, this.requestUpdate();
+  }
+  get focusIndex() {
+    return this._focusIndex;
+  }
+  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);
+    }
+  }
+  setNodes(e) {
+    this.stopLoadingIndicator(), this.setLastLoadingChildren(e, this.rootNodeCount, e.length), e.forEach((s, t) => {
+      const i = [...e];
+      i.splice(t, 1), this.updateNodeMap(s, 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) => {
+      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();
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._resizeObserver.observe(this);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._resizeObserver.disconnect();
+  }
+  static get styles() {
+    return [
+      C`
+                ${k(j)}
+            `
+    ];
+  }
+  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._nodeStates.size === 0 && (this.children.length > 0 ? this.syncState() : this.requestData());
+  }
+  updated(e) {
+    super.updated(e), this.updateNodes(), e.has("parentSelectionAllowed") && this.updateParentSelectionAllowed();
+  }
+  render() {
+    return this.updateRenderData(), r`
+            <div class="root" style="height: ${this._allNodeCount * S}px">
+                <ul>
+                    <slot></slot>
+                </ul>
+            </div>
+        `;
+  }
+  scrollToNode(e, s = "auto") {
+    this.scrollTop = H(
+      this.normalizeIndex(e),
+      s,
+      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) => {
+      const n = [...e.nodes];
+      n.splice(i, 1), this.updateNodeMap(t, n);
+    }));
+  }
+  updateParentSelectionAllowed() {
+    this._nodeStates.forEach((e) => {
+      e.parentSelectionAllowed = this.parentSelectionAllowed;
+    });
+  }
+  updateNodes() {
+    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))
+          return r`
+                            <sd-tree-loading-indicator .depth="${s.depth}" style="transform: translateY(${n}px)"
+                                >${this.loadingText}</sd-tree-loading-indicator
+                            >
+                        `;
+        const o = this._nodeStates.get(s), l = i === this.focusIndex;
+        let h = o.disabled;
+        return this.parentSelectionAllowed || (h = h || o.hasRadioButtonDescendant()), r`
+                        <sd-tree-node
+                            text="${o.text}"
+                            selection-state="${o.selectionState}"
+                            .nodeId="${o.id}"
+                            .depth="${o.depth}"
+                            style="transform: translateY(${n}px);"
+                            .path="${o.path}"
+                            ?focused="${l}"
+                            ?readonly="${this.readonly}"
+                            type="${o.type}"
+                            ?expanded="${o.expanded}"
+                            child-count="${o.childCount}"
+                            ?disabled="${h}"
+                            .loading="${o.loading}"
+                        ></sd-tree-node>
+                    `;
+      })}
+            `,
+      this
+    );
+  }
+  getTopPosition(e) {
+    return e * S;
+  }
+  updateRenderData() {
+    if (!this._reusePreviousRenderData)
+      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);
+                  break;
+                }
+              } else if (this._loadedRootNodeCount < this.rootNodeCount && !this._rootItemsLoading) {
+                this.requestData();
+                break;
+              }
+            } else if (this.needsFurtherData(s)) {
+              this.requestData(s);
+              break;
+            }
+          }
+        }
+      } else
+        this._firstVisibleIndex = 0, this._lastVisibleIndex = 0, this._firstRenderedIndex = 0, this._lastRenderedIndex = 0;
+  }
+  needsFurtherData(e) {
+    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);
+  }
+  normalizeIndex(e) {
+    return Math.max(0, Math.min(e, this._allNodeCount - 1));
+  }
+  get height() {
+    return this.offsetHeight;
+  }
+  requestData(e) {
+    if (!(e != null && e.loading)) {
+      const s = e == null ? void 0 : e.path;
+      this.startLoadingIndicator(s), this.dispatchEvent(
+        new CustomEvent("data-request", {
+          detail: { path: s }
+        })
+      );
+    }
+  }
+  updateAfterExpansion(e, s) {
+    const t = this._nodeStates.get(JSON.stringify(e));
+    if (t) {
+      t.expanded = s;
+      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;
+      } else {
+        const o = this.removeSubtree(i);
+        this._allNodeCount -= o;
+      }
+      if (n) {
+        const o = this._flattenedNodes.findIndex((l) => l == n);
+        o !== this.focusIndex && (this._focusIndex = o);
+      }
+    }
+    this.requestUpdate();
+  }
+  addSubtree(e, s) {
+    const t = this.getFlattenedSubtree(e.nodes);
+    return this._flattenedNodes.splice(s, 0, ...t), t.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)
+    ), []);
+  }
+  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;
+  }
+  // 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)
+      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)
+          return i;
+      }
+    return -1;
+  }
+  get focusedNode() {
+    const e = this._flattenedNodes[this.focusIndex];
+    return p(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)) {
+        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(
+            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];
+    }
+  }
+  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);
+    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) {
+      const i = e[e.length - 1];
+      i && (i.lastLoadingChild = !0);
+    }
+    e.forEach((i) => {
+      this.setLastLoadingChildren(i.nodes, i.childCount, i.nodes.length);
+    });
+  }
+  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);
+      }
+    } else
+      this._rootItemsLoading = !0, this._flattenedNodes = [
+        ...this._flattenedNodes,
+        ...new Array(this.rootNodeCount - this._loadedRootNodeCount).fill({ depth: 0 })
+      ];
+    this.updateNodes();
+  }
+  addPlaceholders(e, s) {
+    const t = e + s.nodes.length + 1, i = s.childCount - s.nodes.length;
+    this._flattenedNodes.splice(
+      t,
+      0,
+      ...new Array(i).fill({
+        depth: s.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);
+      }
+    } else {
+      this._rootItemsLoading = !1;
+      const s = this._flattenedNodes.findIndex((t) => !p(t));
+      this._flattenedNodes.splice(s);
+    }
+  }
+  removePlaceHolders(e, s) {
+    const t = e + s.nodes.length + 1, i = s.childCount - s.nodes.length;
+    this._flattenedNodes.splice(t, 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 = "";
+  }
+  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;
+  }
+}, x.ID = "sd-tree", x.ensureDefined = () => {
+  F.ensureDefined(), K.ensureDefined(), customElements.get(x.ID) || customElements.define(x.ID, x);
+}, x);
+m([
+  a({ type: String })
+], N.prototype, "loadingText", 2);
+m([
+  a({ type: Boolean, reflect: !0, attribute: "parent-selection-allowed" })
+], N.prototype, "parentSelectionAllowed", 2);
+m([
+  a({ type: Boolean, reflect: !0, attribute: !0 })
+], N.prototype, "readonly", 2);
+m([
+  a({ type: Number })
+], N.prototype, "rootNodeCount", 1);
+m([
+  a({ type: Number, attribute: "focus-index", reflect: !0 })
+], N.prototype, "focusIndex", 1);
+let W = N;
+W.ensureDefined();
+export {
+  P as CheckboxNode,
+  E as Node,
+  v as RadioButtonNode,
+  W as Tree,
+  se as findNode,
+  G as findNodeByPath,
+  b as findNodeIndex,
+  y as flattenNodes,
+  H as getOffsetForIndexAndAlignment,
+  T as isCheckboxNode,
+  p as isFlattenedNode,
+  D as isNode,
+  A as isRadioButtonNode
+};
+//# sourceMappingURL=tree.mjs.map