tsgrid-ui 2.7.1 → 2.9.0

package/dist/chunks/chunk-BIB3X2TW.js

@@ -0,0 +1,1638 @@
+import {
+  TsMenu,
+  TsTooltip
+} from "./chunk-OFASTA2A.js";
+import {
+  TsUtils
+} from "./chunk-3NYH6545.js";
+import {
+  TsBase,
+  TsUi,
+  query
+} from "./chunk-DXZJHS4M.js";
+
+// src/tssidebar.ts
+var query2 = query;
+var TsSidebar = class extends TsBase {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  nodes;
+  // any: sidebar node tree has dynamic shape
+  // any: targeted-any per typing_policy; TsSidebar node tree shape is user-defined at runtime
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  selected;
+  // any: targeted-any per typing_policy; TsSidebar node tree shape is user-defined at runtime
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  img;
+  // any: targeted-any per typing_policy; TsSidebar node tree shape is user-defined at runtime
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  icon;
+  style;
+  hasFocus;
+  flat;
+  flatButton;
+  keyboard;
+  editable;
+  reorder;
+  tabIndex;
+  routeData;
+  multi;
+  skipRefresh;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  last;
+  // any: accumulates move, renaming, observeResize
+  node_template;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  constructor(options) {
+    super(options.name);
+    this.name = "";
+    this.box = null;
+    this["sidebar"] = null;
+    this["parent"] = null;
+    this.nodes = [];
+    this["menu"] = [];
+    this.routeData = {};
+    this.selected = null;
+    this.icon = null;
+    this.style = "";
+    this["topHTML"] = "";
+    this["bottomHTML"] = "";
+    this.multi = false;
+    this.editable = false;
+    this.reorder = false;
+    this.flatButton = false;
+    this.keyboard = true;
+    this.flat = false;
+    this.hasFocus = false;
+    this["levelPadding"] = 12;
+    this["toggleAlign"] = "right";
+    this.skipRefresh = false;
+    this.tabIndex = null;
+    this["handle"] = { width: 0, style: "", text: "", tooltip: "" };
+    this["badge"] = null;
+    this["onClick"] = null;
+    this["onSelect"] = null;
+    this["onUnselect"] = null;
+    this["onDblClick"] = null;
+    this["onMouseEnter"] = null;
+    this["onMouseLeave"] = null;
+    this["onContextMenu"] = null;
+    this["onMenuClick"] = null;
+    this["onExpand"] = null;
+    this["onCollapse"] = null;
+    this["onKeydown"] = null;
+    this["onRender"] = null;
+    this["onRefresh"] = null;
+    this["onResize"] = null;
+    this["onDestroy"] = null;
+    this["onFocus"] = null;
+    this["onBlur"] = null;
+    this["onFlat"] = null;
+    this["onEdit"] = null;
+    this["onRename"] = null;
+    this["onReorder"] = null;
+    this["onDragStart"] = null;
+    this["onDragOver"] = null;
+    this.node_template = {
+      id: null,
+      text: "",
+      order: null,
+      count: null,
+      icon: null,
+      nodes: [],
+      style: "",
+      // additional style for subitems
+      route: null,
+      selected: false,
+      expanded: false,
+      hidden: false,
+      disabled: false,
+      group: false,
+      // if true, it will build as a group
+      groupShowHide: true,
+      collapsible: false,
+      plus: false,
+      // if true, plus will be shown even if there is no sub nodes
+      childOffset: 0,
+      // events
+      onClick: null,
+      onDblClick: null,
+      onContextMenu: null,
+      onExpand: null,
+      onCollapse: null,
+      // internal
+      parent: null,
+      // node object
+      sidebar: null
+    };
+    this.last = {
+      badge: {},
+      renaming: false,
+      move: null
+      // object, move details
+    };
+    const nodes = options.nodes;
+    delete options.nodes;
+    Object.assign(this, options);
+    if (Array.isArray(nodes)) this.add(nodes);
+    options.nodes = nodes;
+    if (typeof this.box == "string") this.box = query2(this.box).get(0);
+    if (this.box) this.render(this.box);
+  }
+  // any: callback parameter — caller signature varies; TsSidebar node tree shape is user-defined at runtime
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  add(parent, nodes) {
+    if (nodes === void 0) {
+      nodes = parent;
+      parent = this;
+    }
+    if (typeof parent == "string") parent = this.get(parent);
+    if (parent == null || parent == "") parent = this;
+    return this.insert(parent, null, nodes);
+  }
+  // any: callback parameter — caller signature varies; TsSidebar node tree shape is user-defined at runtime
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  insert(parent, before, nodes) {
+    let txt, ind, tmp, node, nd;
+    if (nodes === void 0 && typeof parent == "string") {
+      nodes = before;
+      before = parent;
+      if (before != null) {
+        ind = this.get(before);
+        if (ind == null) {
+          if (!Array.isArray(nodes)) nodes = [nodes];
+          if (nodes[0].caption != null && nodes[0].text == null) {
+            console.log("NOTICE: sidebar node.caption property is deprecated, please use node.text. Node -> ", nodes[0]);
+            nodes[0].text = nodes[0].caption;
+          }
+          txt = nodes[0].text;
+          console.log('ERROR: Cannot insert node "' + txt + '" because cannot find node "' + before + '" to insert before.');
+          return null;
+        }
+        parent = this.get(before).parent;
+      } else {
+        parent = this;
+      }
+    }
+    if (typeof parent == "string") parent = this.get(parent);
+    if (parent == null || parent == "") parent = this;
+    if (!Array.isArray(nodes)) nodes = [nodes];
+    for (let o = 0; o < nodes.length; o++) {
+      node = nodes[o];
+      if (node.caption != null && node.text == null) {
+        console.log("NOTICE: sidebar node.caption property is deprecated, please use node.text");
+        node.text = node.caption;
+      }
+      if (typeof node.id == null) {
+        txt = node.text;
+        console.log('ERROR: Cannot insert node "' + txt + '" because it has no id.');
+        continue;
+      }
+      if (this.get(this, node.id) != null) {
+        console.log("ERROR: Cannot insert node with id=" + node.id + " (text: " + node.text + ") because another node with the same id already exists.");
+        continue;
+      }
+      tmp = Object.assign({}, this.node_template, node);
+      tmp.sidebar = this;
+      tmp.parent = parent;
+      nd = tmp.nodes || [];
+      tmp.nodes = [];
+      if (before == null) {
+        parent.nodes.push(tmp);
+      } else {
+        ind = this.get(parent, before, true);
+        if (ind == null) {
+          console.log('ERROR: Cannot insert node "' + node.text + '" because cannot find node "' + before + '" to insert before.');
+          return null;
+        }
+        parent.nodes.splice(ind, 0, tmp);
+      }
+      if (nd.length > 0) {
+        this.insert(tmp, null, nd);
+      }
+    }
+    if (!this.skipRefresh) this.refresh(parent.id);
+    return tmp;
+  }
+  // any: array of heterogeneous runtime values; TsSidebar node tree shape is user-defined at runtime
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  remove(...args) {
+    let effected = 0;
+    let lastNode = null;
+    args.forEach((arg) => {
+      const node = this.get(arg);
+      if (node == null) return;
+      if (this.selected != null) {
+        if (Array.isArray(this.selected)) {
+          this.selected.splice(this.selected.indexOf(node.id), 1);
+        } else if (this.selected === node.id) {
+          this.selected = null;
+        }
+      }
+      const ind = this.get(node.parent, arg, true);
+      if (ind == null) return;
+      if (node.parent.nodes[ind].selected) node["sidebar"].unselect(node.id);
+      node.parent.nodes.splice(ind, 1);
+      node.parent.collapsible = node.parent.nodes.length > 0;
+      lastNode = node;
+      effected++;
+    });
+    if (!this.skipRefresh) {
+      if (effected > 0 && arguments.length == 1 && lastNode != null) this.refresh(lastNode.parent.id);
+      else this.refresh();
+    }
+    return effected;
+  }
+  // any: callback parameter — caller signature varies; TsSidebar node tree shape is user-defined at runtime
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  set(parent, id, node) {
+    if (node === void 0) {
+      node = id;
+      id = parent;
+      parent = this;
+    }
+    if (typeof parent == "string") parent = this.get(parent);
+    if (parent.nodes == null) return null;
+    for (let i = 0; i < parent.nodes.length; i++) {
+      if (parent.nodes[i].id === id) {
+        const res = this.update(id, node);
+        if (Object.keys(res).length != 0) {
+          const nodes = node.nodes;
+          TsUtils.extend(parent.nodes[i], node, nodes != null ? { nodes: [] } : {});
+          if (nodes != null) {
+            this.add(parent.nodes[i], nodes);
+          }
+          if (!this.skipRefresh) this.refresh(id);
+        }
+        return true;
+      } else {
+        const rv = this.set(parent.nodes[i], id, node);
+        if (rv) return true;
+      }
+    }
+    return false;
+  }
+  // any: callback parameter — caller signature varies; TsSidebar node tree shape is user-defined at runtime
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  get(parent, id, returnIndex) {
+    if (arguments.length === 0) {
+      const all = [];
+      const tmp = this.find({});
+      for (let t = 0; t < tmp.length; t++) {
+        if (tmp[t].id != null) all.push(tmp[t].id);
+      }
+      return all;
+    } else {
+      if (arguments.length == 1 || arguments.length == 2 && id === true) {
+        returnIndex = id;
+        id = parent;
+        parent = this;
+      }
+      if (typeof parent == "string") parent = this.get(parent);
+      if (parent.nodes == null) return null;
+      for (let i = 0; i < parent.nodes.length; i++) {
+        if (parent.nodes[i].id == id) {
+          if (returnIndex === true) return i;
+          else return parent.nodes[i];
+        } else {
+          const rv = this.get(parent.nodes[i], id, returnIndex);
+          if (rv || rv === 0) return rv;
+        }
+      }
+      return null;
+    }
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  setCount(id, count, options = {}) {
+    const node = this.get(id);
+    if (node.group) {
+      console.log(`Node "${id}" is a group and groups cannot have counts or badges.`);
+      return;
+    }
+    this.last.badge[id] = {
+      className: options.className ?? "",
+      style: options.style ?? ""
+    };
+    const btn = query2(this.box).find(`#node_${TsUtils.escapeId(id)} .tsg-node-badge`);
+    if (btn.length > 0) {
+      const $cnt = btn.removeClass(null).addClass(`tsg-node-badge ${options.className ?? "tsg-node-count"}`).text(count);
+      $cnt.get(0).style.cssText = options.style || "";
+      const item = this.get(id);
+      item.count = count;
+    } else if (!options.noRepeat) {
+      this.set(id, { count });
+      options.noRepeat = true;
+      queueMicrotask(() => this.setCount(id, count, options));
+    }
+  }
+  // any: callback parameter — caller signature varies; TsSidebar node tree shape is user-defined at runtime
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  find(parent, params, results) {
+    if (arguments.length == 1) {
+      params = parent;
+      parent = this;
+    }
+    if (!results) results = [];
+    if (typeof parent == "string") parent = this.get(parent);
+    if (parent.nodes == null) return results;
+    for (let i = 0; i < parent.nodes.length; i++) {
+      let match = true;
+      for (const prop in params) {
+        if (parent.nodes[i][prop] != params[prop]) match = false;
+      }
+      if (match) results.push(parent.nodes[i]);
+      if (parent.nodes[i].nodes.length > 0) results = this.find(parent.nodes[i], params, results);
+    }
+    return results;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  sort(options, nodes) {
+    if (!options || typeof options != "object") options = {};
+    if (options.foldersFirst == null) options.foldersFirst = true;
+    if (options.caseSensitive == null) options.caseSensitive = false;
+    if (options.reverse == null) options.reverse = false;
+    if (nodes == null) {
+      nodes = this.nodes;
+    }
+    nodes.sort((a, b) => {
+      const isAfolder = a.nodes && a.nodes.length > 0;
+      const isBfolder = b.nodes && b.nodes.length > 0;
+      if (options.foldersFirst === false || !isAfolder && !isBfolder || isAfolder && isBfolder) {
+        let aText = a.text;
+        let bText = b.text;
+        if (a.order != null) aText = a.order;
+        if (b.order != null) bText = b.order;
+        if (!options.caseSensitive) {
+          aText = aText.toLowerCase();
+          bText = bText.toLowerCase();
+        }
+        const cmp = TsUtils.naturalCompare(aText, bText);
+        return (cmp === 1 || cmp === -1) & (options.reverse ? 1 : 0) ? -cmp : cmp;
+      }
+      if (isAfolder && !isBfolder) {
+        return !options.reverse ? -1 : 1;
+      }
+      if (!isAfolder && isBfolder) {
+        return !options.reverse ? 1 : -1;
+      }
+    });
+    nodes.forEach((node) => {
+      if (node.nodes && node.nodes.length > 0) {
+        this.sort(options, node.nodes);
+      }
+    });
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  each(fn, nodes) {
+    if (nodes == null) nodes = this.nodes;
+    nodes.forEach((node) => {
+      fn.call(this, node);
+      if (node.nodes && node.nodes.length > 0) {
+        this.each(fn, node.nodes);
+      }
+    });
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  search(str, compare = null) {
+    let count = 0;
+    const str2 = str.toLowerCase();
+    this.each((node) => {
+      let match = false;
+      if (typeof compare == "function") {
+        match = compare(str, node);
+      } else {
+        match = !(node.text.toLowerCase().indexOf(str2) === -1);
+      }
+      if (match) {
+        count++;
+        showParents(node);
+        node.hidden = false;
+      } else {
+        node.hidden = true;
+      }
+    });
+    this.refresh();
+    return count;
+    function showParents(node) {
+      if (node.parent) {
+        node.parent.hidden = false;
+        showParents(node.parent);
+      }
+    }
+  }
+  // any: array of heterogeneous runtime values; TsSidebar node tree shape is user-defined at runtime
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  show(...args) {
+    const effected = [];
+    args.forEach((it) => {
+      const node = this.get(it);
+      if (node == null || node.hidden === false) return;
+      node.hidden = false;
+      effected.push(node.id);
+    });
+    if (effected.length > 0) {
+      if (args.length == 1) this.refresh(args[0]);
+      else this.refresh();
+    }
+    return effected;
+  }
+  // any: array of heterogeneous runtime values; TsSidebar node tree shape is user-defined at runtime
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  hide(...args) {
+    const effected = [];
+    args.forEach((it) => {
+      const node = this.get(it);
+      if (node == null || node.hidden === true) return;
+      node.hidden = true;
+      effected.push(node.id);
+    });
+    if (effected.length > 0) {
+      if (args.length == 1) this.refresh(args[0]);
+      else this.refresh();
+    }
+    return effected;
+  }
+  // any: array of heterogeneous runtime values; TsSidebar node tree shape is user-defined at runtime
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  enable(...args) {
+    const effected = [];
+    args.forEach((it) => {
+      const node = this.get(it);
+      if (node == null || node.disabled === false) return;
+      node.disabled = false;
+      effected.push(node.id);
+    });
+    if (effected.length > 0) {
+      if (args.length == 1) this.refresh(args[0]);
+      else this.refresh();
+    }
+    return effected;
+  }
+  // any: array of heterogeneous runtime values; TsSidebar node tree shape is user-defined at runtime
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  disable(...args) {
+    const effected = [];
+    args.forEach((it) => {
+      const node = this.get(it);
+      if (node == null || node.disabled === true) return;
+      node.disabled = true;
+      if (node.selected) this.unselect(node.id);
+      effected.push(node.id);
+    });
+    if (effected.length > 0) {
+      if (args.length == 1) this.refresh(args[0]);
+      else this.refresh();
+    }
+    return effected;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  select(id) {
+    if (Array.isArray(id)) {
+      [...id].forEach((id2) => this.select(id2));
+      return;
+    }
+    const new_node = this.get(id);
+    if (!new_node) return false;
+    const edata = this.trigger("select", { target: id, id, node: new_node });
+    if (edata.isCancelled === true) {
+      return true;
+    }
+    if (!this.multi && this.selected == id && new_node.selected) {
+      return false;
+    } else {
+      this.find({ selected: true }).forEach((nd) => nd.selected = false);
+    }
+    const $el = query2(this.box).find("#node_" + TsUtils.escapeId(id));
+    $el.addClass("tsg-selected").find(".tsg-icon").addClass("tsg-icon-selected");
+    if ($el.length > 0) {
+      if (!this.inView(id)) this.scrollIntoView(id);
+    }
+    new_node.selected = true;
+    if (this.multi) {
+      if (!Array.isArray(this.selected)) {
+        this.selected = this.selected ? [this.selected] : [];
+      }
+      this.selected.push(id);
+    } else {
+      this.selected = this.multi ? [id] : id;
+    }
+    edata.finish();
+    return true;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  unselect(id) {
+    if (arguments.length === 0) {
+      id = this.selected;
+    }
+    if (Array.isArray(id)) {
+      [...id].forEach((id2) => this.unselect(id2));
+      return;
+    }
+    const current = this.get(id);
+    if (!current) return false;
+    const edata = this.trigger("unselect", { target: id, id, node: current });
+    if (edata.isCancelled === true) {
+      return true;
+    }
+    current.selected = false;
+    query2(this.box).find("#node_" + TsUtils.escapeId(id)).removeClass("tsg-selected").find(".tsg-icon").removeClass("tsg-icon-selected");
+    if (typeof this.selected == "string" && this.selected == id) {
+      this.selected = null;
+    }
+    if (this.multi && Array.isArray(this.selected)) {
+      const ind = this.selected.indexOf(id);
+      if (ind != -1) this.selected.splice(ind, 1);
+    }
+    edata.finish();
+    return true;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  toggle(id) {
+    const nd = this.get(id);
+    if (nd == null) return false;
+    if (nd.plus) {
+      this.set(id, { plus: false });
+      this.expand(id);
+      this.refresh(id);
+      return;
+    }
+    if (nd.nodes.length === 0) return false;
+    if (!nd.collapsible) return false;
+    if (this.get(id).expanded) return this.collapse(id);
+    else return this.expand(id);
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  collapse(id) {
+    const nd = this.get(id);
+    if (nd == null) return false;
+    const edata = this.trigger("collapse", { target: id, object: nd, node: nd });
+    if (edata.isCancelled === true) return;
+    query2(this.box).find("#node_" + TsUtils.escapeId(id) + "_sub").hide();
+    query2(this.box).find("#node_" + TsUtils.escapeId(id) + " .tsg-expanded").removeClass("tsg-expanded").addClass("tsg-collapsed");
+    nd.expanded = false;
+    edata.finish();
+    this.refresh(id);
+    return true;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  expand(id) {
+    const nd = this.get(id);
+    const edata = this.trigger("expand", { target: id, object: nd, node: nd });
+    if (edata.isCancelled === true) return;
+    query2(this.box).find("#node_" + TsUtils.escapeId(id) + "_sub").show();
+    query2(this.box).find("#node_" + TsUtils.escapeId(id) + " .tsg-collapsed").removeClass("tsg-collapsed").addClass("tsg-expanded");
+    nd.expanded = true;
+    edata.finish();
+    this.refresh(id);
+    return true;
+  }
+  // any: callback parameter — caller signature varies; TsSidebar node tree shape is user-defined at runtime
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  collapseAll(parent) {
+    if (parent == null) parent = this;
+    if (typeof parent == "string") parent = this.get(parent);
+    if (parent.nodes == null) return false;
+    for (let i = 0; i < parent.nodes.length; i++) {
+      if (parent.nodes[i].expanded === true) parent.nodes[i].expanded = false;
+      if (parent.nodes[i].nodes && parent.nodes[i].nodes.length > 0) this.collapseAll(parent.nodes[i]);
+    }
+    this.refresh(parent.id);
+    return true;
+  }
+  // any: callback parameter — caller signature varies; TsSidebar node tree shape is user-defined at runtime
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  expandAll(parent) {
+    if (parent == null) parent = this;
+    if (typeof parent == "string") parent = this.get(parent);
+    if (parent.nodes == null) return false;
+    for (let i = 0; i < parent.nodes.length; i++) {
+      if (parent.nodes[i].expanded === false) parent.nodes[i].expanded = true;
+      if (parent.nodes[i].nodes && parent.nodes[i].nodes.length > 0) this.expandAll(parent.nodes[i]);
+    }
+    this.refresh(parent.id);
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  expandParents(id) {
+    const node = this.get(id);
+    if (node == null) return false;
+    if (node.parent) {
+      if (!node.parent.expanded) {
+        node.parent.expanded = true;
+        this.refresh(node.parent.id);
+      }
+      this.expandParents(node.parent.id);
+    }
+    return true;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  click(id, event) {
+    const nd = this.get(id);
+    if (nd == null) return;
+    if (nd.disabled || nd.group) {
+      const edata = this.trigger("click", { target: id, originalEvent: event, node: nd, object: nd });
+      edata.finish();
+      return;
+    }
+    const newNode = query2(this.box).find("#node_" + TsUtils.escapeId(id));
+    newNode.addClass("tsg-selected").find(".tsg-icon").addClass("tsg-icon-selected");
+    setTimeout(() => {
+      const edata = this.trigger("click", { target: id, originalEvent: event, node: nd, object: nd });
+      if (edata.isCancelled === true) {
+        newNode.removeClass("tsg-selected").find(".tsg-icon").removeClass("tsg-icon-selected");
+        return;
+      }
+      if (this.multi) {
+        const mev = event;
+        const isShift = mev?.shiftKey ?? false;
+        const isCtrl = (mev?.ctrlKey || mev?.metaKey) ?? false;
+        if (typeof this.selected == "string") {
+          this.selected = [this.selected];
+        }
+        if (isCtrl && !isShift) {
+          if (this.selected?.includes(id)) {
+            this.unselect(id);
+            return;
+          } else {
+            this.select(id);
+          }
+        } else if (!isCtrl && isShift) {
+          const chain = this.getChain();
+          const ind1 = Math.min(this.selected.map((sel) => chain.indexOf(sel)));
+          const ind2 = chain.indexOf(id);
+          for (let i = Math.min(ind1, ind2); i < chain.length && i <= Math.max(ind1, ind2); i++) {
+            const node = this.get(chain[i]);
+            if (!this.selected.includes(chain[i]) && node.hidden != true) {
+              this.select(chain[i]);
+            }
+          }
+        } else {
+          const ids = this.selected?.filter((sid) => sid != id && this.selected.includes(sid));
+          this.unselect(ids);
+          if (!this.selected?.includes(id)) {
+            this.select(id);
+          }
+        }
+      } else if (this.selected !== id) {
+        if (this.selected != null) this.unselect(this.selected);
+        this.select(id);
+        if (typeof nd.route == "string") {
+          let route = nd.route !== "" ? String("/" + nd.route).replace(/\/{2,}/g, "/") : "";
+          const info = TsUtils.parseRoute(route);
+          if (info.keys.length > 0) {
+            for (let k = 0; k < info.keys.length; k++) {
+              const routeKey = info.keys[k];
+              if (routeKey == null) continue;
+              if (this.routeData[routeKey.name] == null) continue;
+              route = route.replace(new RegExp(":" + routeKey.name, "g"), this.routeData[routeKey.name]);
+            }
+          }
+          setTimeout(() => {
+            window.location.hash = route;
+          }, 1);
+        }
+        if (this.flat) {
+          let _getItems2 = function(nodes) {
+            const items2 = nodes.map((it) => {
+              const items3 = it.nodes.length > 0 ? _getItems2(it.nodes) : null;
+              return { id: it.id, text: it.text, icon: it.icon, items: items3 };
+            });
+            return items2;
+          };
+          var _getItems = _getItems2;
+          const items = _getItems2(nd.nodes);
+          if (items.length > 0) {
+            this.flatMenu(newNode, items);
+          }
+        }
+      }
+      edata.finish();
+    }, 1);
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  flatMenu(el, items) {
+    const self = this;
+    const $el = query2(el).find(".tsg-node-data");
+    TsMenu.show({
+      // any: query().get(0) returns Node|Node[]; anchor is always HTMLElement in flat menu context
+      anchor: $el.get(0),
+      name: this.name + "_flat-menu",
+      items,
+      // class: 'tsg-dark',
+      position: "right|left",
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      onSelect(event) {
+        self.unselect();
+        self.click(event.detail.item.id, event.detail.originalEvent);
+      },
+      onHide(_event) {
+        self.unselect();
+      }
+    });
+    TsTooltip.hide(this.name + "_tooltip");
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  focus(event) {
+    const edata = this.trigger("focus", { target: this.name, originalEvent: event });
+    if (edata.isCancelled === true) return false;
+    this.hasFocus = true;
+    query2(this.box).find(".tsg-sidebar-body").addClass("tsg-focus");
+    setTimeout(() => {
+      const input = query2(this.box).find("#sidebar_" + this.name + "_focus").get(0);
+      if (document.activeElement != input) input.focus();
+    }, 10);
+    edata.finish();
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  blur(event) {
+    const edata = this.trigger("blur", { target: this.name, originalEvent: event });
+    if (edata.isCancelled === true) return false;
+    this.hasFocus = false;
+    query2(this.box).find(".tsg-sidebar-body").removeClass("tsg-focus");
+    edata.finish();
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  next(node, noSubs) {
+    if (node == null) return null;
+    const parent = node.parent;
+    const ind = this.get(node.id, true);
+    let nextNode = null;
+    if (node.expanded && node.nodes.length > 0 && noSubs !== true) {
+      const nd = node.nodes[0] ?? null;
+      if (nd == null) {
+        nextNode = null;
+      } else if (nd.hidden || nd.disabled || nd.group) {
+        nextNode = this.next(nd);
+      } else {
+        nextNode = nd;
+      }
+    } else {
+      if (parent && ind + 1 < parent.nodes.length) {
+        nextNode = parent.nodes[ind + 1] ?? null;
+      } else {
+        nextNode = this.next(parent, true);
+      }
+    }
+    if (nextNode != null && (nextNode.hidden || nextNode.disabled || nextNode.group)) nextNode = this.next(nextNode);
+    return nextNode;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  prev(node) {
+    if (node == null) return null;
+    const parent = node.parent;
+    const ind = this.get(node.id, true);
+    const lastChild = (node2) => {
+      if (node2.expanded && node2.nodes.length > 0) {
+        const nd = node2.nodes[node2.nodes.length - 1] ?? null;
+        if (nd == null) return node2;
+        if (nd.hidden || nd.disabled || nd.group) return this.prev(nd);
+        else return lastChild(nd);
+      }
+      return node2;
+    };
+    const prevNodeSource = ind > 0 ? parent.nodes[ind - 1] : null;
+    let prevNode = ind > 0 && prevNodeSource != null ? lastChild(prevNodeSource) : parent;
+    if (prevNode != null && (prevNode.hidden || prevNode.disabled || prevNode.group)) prevNode = this.prev(prevNode);
+    return prevNode;
+  }
+  // returns ids of expanded elements as a flat array
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  getChain(nodes, options = {}) {
+    options.returnDisabled ??= false;
+    options.returnGroups ??= false;
+    const ids = [];
+    if (nodes == null) nodes = this.nodes;
+    nodes.forEach((node) => {
+      if (!node.disabled && !node.group || node.disabled && options.returnDisabled || node.group && options.returnGroups) {
+        ids.push(node.id);
+      }
+      if (Array.isArray(node.nodes) && node.expanded) {
+        ids.push(...this.getChain(node.nodes, options));
+      }
+    });
+    return ids;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  keydown(event) {
+    const self = this;
+    const first = Array.isArray(this.selected) ? this.selected[0] : this.selected;
+    let nd = this.get(first);
+    if (this.keyboard !== true) return;
+    if (!nd) nd = this.nodes[0] ?? null;
+    if (event.keyCode == 27) {
+      const mv = this.last.move;
+      if (mv?.reorder && mv?.moved) {
+        mv.restore();
+        return;
+      }
+    }
+    const edata = this.trigger("keydown", { target: this.name, originalEvent: event });
+    if (edata.isCancelled === true) return;
+    if (event.keyCode == 13 || event.keyCode == 32) {
+      if (event.keyCode == 13 && this.editable && !event.ctrlKey && !event.metaKey) {
+        this.edit(first);
+      } else {
+        if (nd.nodes.length > 0) {
+          this.toggle(first);
+        }
+      }
+    }
+    if (event.keyCode == 37) {
+      if (nd.nodes.length > 0 && nd.expanded) {
+        this.collapse(first);
+      } else {
+        selectNode(nd.parent);
+        if (!nd.parent.group) this.collapse(nd.parent.id);
+      }
+    }
+    if (event.keyCode == 39) {
+      if ((nd.nodes.length > 0 || nd.plus) && !nd.expanded) this.expand(first);
+    }
+    if (event.keyCode == 38) {
+      if (this.get(first) == null) {
+        selectNode(this.nodes[0] || null);
+      } else {
+        selectNode(neighbor(nd, this.prev));
+      }
+    }
+    if (event.keyCode == 40) {
+      if (this.get(first) == null) {
+        selectNode(this.nodes[0] || null);
+      } else {
+        selectNode(neighbor(nd, this.next));
+      }
+    }
+    if ([13, 32, 37, 38, 39, 40].includes(event.keyCode)) {
+      if (event.preventDefault) event.preventDefault();
+      if (event.stopPropagation) event.stopPropagation();
+    }
+    edata.finish();
+    function selectNode(node, event2) {
+      if (node != null && !node.hidden && !node.disabled && !node.group) {
+        self.click(node.id, event2);
+        if (!self.inView(node.id)) self.scrollIntoView(node.id);
+      }
+    }
+    function neighbor(node, neighborFunc) {
+      node = neighborFunc.call(self, node);
+      while (node != null && (node.hidden || node.disabled)) {
+        if (node.group) break;
+        else node = neighborFunc(node);
+      }
+      return node;
+    }
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  inView(id) {
+    const item = query2(this.box).find("#node_" + TsUtils.escapeId(id)).get(0);
+    if (!item) {
+      return false;
+    }
+    const div = query2(this.box).find(".tsg-sidebar-body").get(0);
+    if (!div) return false;
+    if (item.offsetTop < div.scrollTop || item.offsetTop + item.clientHeight > div.clientHeight + div.scrollTop) {
+      return false;
+    }
+    return true;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  scrollIntoView(id, instant) {
+    return new Promise((resolve) => {
+      if (id == null) id = Array.isArray(this.selected) ? this.selected[0] : this.selected;
+      const nd = this.get(id);
+      if (nd == null) return;
+      const item = query2(this.box).find("#node_" + TsUtils.escapeId(id)).get(0);
+      if (item) item.scrollIntoView({ block: "center", inline: "center", behavior: instant ? "auto" : "smooth" });
+      setTimeout(() => {
+        this.resize();
+        resolve();
+      }, instant ? 0 : 500);
+    });
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  dblClick(id, event) {
+    const nd = this.get(id);
+    const edata = this.trigger("dblClick", { target: id, originalEvent: event, object: nd });
+    if (edata.isCancelled === true) return;
+    if (this.editable) {
+      this.edit(id);
+    } else if (!this.flat) {
+      this.toggle(id);
+    }
+    edata.finish();
+  }
+  /**
+   * This is needed for not reorder
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  mouseDown(id, event) {
+    const self = this;
+    if (this.reorder) {
+      this.last.move = {
+        x: event.screenX,
+        y: event.screenY,
+        divX: 0,
+        divY: 0,
+        reorder: true,
+        moved: false
+      };
+      const mv = this.last.move;
+      const body = query2(this.box).find(".tsg-sidebar-body");
+      if (!mv.ghost) {
+        const node = query2(this.box).find(`#node_${TsUtils.escapeId(id)}`);
+        mv.offsetY = event.offsetY;
+        mv.target = id;
+        const nodeEl = node.get(0);
+        mv.pos = { top: nodeEl.offsetTop - 1, left: nodeEl.offsetLeft };
+        const clone = query2(node.find(".tsg-node-data").get(0).cloneNode(true));
+        mv.node = node;
+        mv.nodeSub = node.next();
+        body.append('<div id="sidebar_' + this.name + '_ghost" class="tsg-node tsg-ghost"></div>');
+        query2(this.box).find("#sidebar_" + this.name + "_ghost").append(clone);
+        mv.ghost = query2(this.box).find("#sidebar_" + this.name + "_ghost");
+        mv.ghost.css({ display: "none" });
+        mv.restore = () => {
+          mv.resetReorder();
+          this.refresh();
+        };
+        mv.resetReorder = () => {
+          this.last.move = null;
+          query2(this.box).find(`#sidebar_${this.name}_ghost`).remove();
+          query2(document).off(`.tsg-${this.name}-reorder`);
+        };
+      }
+      query2(document).on(`mousemove.tsg-${this.name}-reorder`, _mouseMove).on(`mouseup.tsg-${this.name}-reorder`, _mouseStop);
+    }
+    function _mouseMove(event2) {
+      if (!event2.target.tagName) {
+        return;
+      }
+      const mv = self.last.move;
+      mv.divX = event2.screenX - mv.x;
+      mv.divY = event2.screenY - mv.y;
+      if (Math.abs(mv.divX) <= 1 && Math.abs(mv.divY) <= 1) return;
+      if (self.reorder == true && mv.reorder && !mv.moved) {
+        const edata = self.trigger("dragStart", { target: mv.target, moved: true, node: self.get(mv.target), mv, originalEvent: event2 });
+        if (edata.isCancelled === true) {
+          mv.restore();
+          return;
+        }
+        const rect = mv.node.get(0).getBoundingClientRect();
+        mv.moved = true;
+        mv.node.html("").removeAttr("id", "data-id").addClass("tsg-reorder-empty").css({ height: rect.height + "px" });
+        if (mv.node.next().css("display") !== "none") {
+          const rect2 = mv.node.next().get(0).getBoundingClientRect();
+          mv.node.next().html('<div class="tsg-reorder-empty-sub"></div>').css({ height: rect2.height + "px" });
+        }
+        mv.ghost.css({ display: "block" });
+        edata.finish();
+      }
+      mv.ghost.css({
+        top: mv.pos.top + mv.divY + "px",
+        left: 0
+      });
+      const over = query2(event2.target).closest(".tsg-node, .tsg-node-group");
+      const id2 = over.attr("data-id");
+      if (query2(event2.target).hasClass("tsg-sidebar-body") && event2.layerY > 5 && !mv.append) {
+        const edata = self.trigger("dragOver", { target: mv.target, append: true, mv, originalEvent: event2 });
+        if (edata.isCancelled === true) {
+          return;
+        }
+        mv.ghost.before(mv.node);
+        mv.ghost.before(mv.nodeSub);
+        mv.append = true;
+        mv.moveBefore = null;
+        edata.finish();
+      } else if (id2 != null && id2 != mv.moveBefore) {
+        mv.append = false;
+        mv.moveBefore = id2;
+        const edata = self.trigger("dragOver", { target: mv.target, moveBefore: id2, mv, originalEvent: event2 });
+        if (edata.isCancelled === true) {
+          return;
+        }
+        const el = query2(self.box).find(`#node_${TsUtils.escapeId(id2)}`);
+        el.before(mv.node);
+        el.before(mv.nodeSub);
+        edata.finish();
+      }
+    }
+    function _mouseStop(event2) {
+      const mv = self.last.move;
+      mv.resetReorder();
+      if (mv.moved) {
+        if (mv.moveBefore != null && mv.target != mv.moveBefore || mv.append) {
+          const edata = self.trigger("reorder", { target: mv.target, moveBefore: mv.moveBefore, append: mv.append, originalEvent: event2 });
+          if (edata.isCancelled === true) {
+            self.refresh();
+            return;
+          }
+          const target = self.get(mv.target);
+          const targetInd = target.parent.nodes.indexOf(target);
+          const cut = target.parent.nodes.splice(targetInd, 1);
+          if (mv.append) {
+            self.nodes.push(...cut);
+            cut.forEach((nd) => nd.parent = self);
+          } else {
+            const before = self.get(mv.moveBefore);
+            const beforeInd = before.parent.nodes.indexOf(before);
+            cut.forEach((nd) => nd.parent = before.parent);
+            before.parent.nodes.splice(beforeInd, 0, ...cut);
+          }
+          self.refresh();
+          edata.finish();
+        } else {
+          self.refresh();
+        }
+      }
+    }
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  edit(id) {
+    const self = this;
+    const node = query2(this.box).find("#node_" + TsUtils.escapeId(id));
+    const text = node.find(".tsg-node-text");
+    const edata = this.trigger("edit", { target: id, el: node, textEl: text });
+    if (edata.isCancelled === true) {
+      return;
+    }
+    this.last.renaming = true;
+    node.addClass("tsg-editing");
+    text.addClass("tsg-focus").css("pointer-events", "all").attr("contenteditable", TsUtils.isFirefox ? "true" : "plaintext-only").on("blur.node-editing", (_event) => {
+      setTimeout(_rename, 0);
+    }).on("keydown.node-editing", (event) => {
+      const kbdEvent = event;
+      if (kbdEvent.keyCode == 13) _rename(kbdEvent);
+      if (kbdEvent.keyCode == 27) _rename(kbdEvent, true);
+    });
+    text.get(0).focus();
+    const original = text.text();
+    TsUtils.setCursorPosition(text[0], 0, text.text().length);
+    edata.finish();
+    return text.get(0);
+    function _rename(event, cancel) {
+      const renameTo = text.text();
+      node.removeClass("tsg-editing");
+      text.removeClass("tsg-focus").css("pointer-events", "none").removeAttr("contenteditable").off(".node-editing");
+      if (!cancel && self.last.renaming && original !== renameTo) {
+        const edata2 = self.trigger("rename", { target: id, text_previous: original, text_new: renameTo, originalEvent: event });
+        if (edata2.isCancelled === true) {
+          text.text(original);
+          self.last.renaming = false;
+          self.focus();
+          return;
+        }
+        self.set(id, { text: renameTo });
+        edata2.finish();
+      }
+      if (cancel) {
+        self.set(id, { text: original });
+      }
+      self.last.renaming = false;
+      self.focus();
+    }
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  contextMenu(id, event) {
+    const nd = this.get(id);
+    if (Array.isArray(this.selected)) {
+      if (!this.selected.includes(id)) this.click(id);
+    } else {
+      if (id != this.selected) this.click(id);
+    }
+    const edata = this.trigger("contextMenu", { target: id, originalEvent: event, object: nd, allowOnDisabled: false });
+    if (edata.isCancelled === true) return;
+    if (nd.disabled && !edata.detail["allowOnDisabled"]) return;
+    if (this["menu"].length > 0) {
+      TsMenu.hide(this.name + "_menu");
+      const menuAttach = TsMenu.show({
+        name: this.name + "_menu",
+        anchor: document.body,
+        contextMenu: true,
+        items: this["menu"],
+        originalEvent: event
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      });
+      menuAttach?.select?.((evt) => {
+        this.menuClick(id, evt.detail);
+      });
+    }
+    if (event.preventDefault) event.preventDefault();
+    edata.finish();
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  menuClick(itemId, detail = {}) {
+    const edata = this.trigger("menuClick", { target: itemId, ...detail });
+    if (edata.isCancelled === true) return;
+    edata.finish();
+  }
+  goFlat() {
+    const edata = this.trigger("flat", { goFlat: !this.flat });
+    if (edata.isCancelled === true) return;
+    this.flat = !this.flat;
+    this.refresh();
+    if (this.flat) {
+      this.nodes.forEach((node) => {
+        if (!node.group) {
+          this.collapse(node.id);
+          this.collapseAll(node.id);
+        }
+      });
+      this.unselect();
+    } else {
+      this.nodes.forEach((node) => {
+        if (!node.group) {
+          this.expand(node.id);
+          this.expandAll(node.id);
+        }
+      });
+    }
+    edata.finish();
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  render(box) {
+    const time = Date.now();
+    const obj = this;
+    if (typeof box == "string") box = query2(box).get(0);
+    const edata = this.trigger("render", { target: this.name, box: box ?? this.box });
+    if (edata.isCancelled === true) return;
+    if (box != null) {
+      this.unmount();
+      this.box = box;
+    }
+    if (!this.box) return;
+    query2(this.box).attr("name", this.name).addClass("tsg-reset tsg-sidebar").html(`<div>
+                <div class="tsg-sidebar-top"></div>
+                <input id="sidebar_${this.name}_focus" ${this.tabIndex ? 'tabindex="' + this.tabIndex + '"' : ""}
+                    style="position: absolute; top: 0; right: 1px; width: 1px; z-index: -1; opacity: 0"
+                    ${TsUtils.isMobile ? "readonly" : ""}/>
+                <div class="tsg-sidebar-body"></div>
+                <div class="tsg-sidebar-bottom"></div>
+            </div>`);
+    const boxEl3 = query2(this.box).get(0);
+    const rect = boxEl3.getBoundingClientRect();
+    query2(this.box).find(":scope > div").css({
+      width: rect.width + "px",
+      height: rect.height + "px"
+    });
+    boxEl3.style.cssText += this.style;
+    let kbd_timer;
+    query2(this.box).find("#sidebar_" + this.name + "_focus").on("focus", function(event) {
+      clearTimeout(kbd_timer);
+      if (!obj.hasFocus) obj.focus(event);
+    }).on("blur", function(event) {
+      kbd_timer = setTimeout(() => {
+        if (obj.hasFocus) {
+          obj.blur(event);
+        }
+      }, 100);
+    }).on("keydown", function(event) {
+      const w2obj = TsUi[obj.name];
+      w2obj?.keydown?.call(w2obj, event);
+    });
+    query2(this.box).off("mousedown").on("mousedown", function(event) {
+      setTimeout(() => {
+        if (["INPUT", "TEXTAREA", "SELECT"].indexOf(event.target?.tagName?.toUpperCase()) == -1) {
+          const $input = query2(obj.box).find("#sidebar_" + obj.name + "_focus");
+          const inputEl = $input.get(0);
+          if (document.activeElement != inputEl && $input.length > 0) {
+            inputEl?.focus();
+          }
+        }
+      }, 1);
+    });
+    const flatHTML = `<div class="tsg-flat tsg-flat-${this.flat ? "right" : "left"}" ${this.flatButton == false ? 'style="display: none"' : ""}></div>`;
+    if (this["topHTML"] !== "" || flatHTML !== "") {
+      query2(this.box).find(".tsg-sidebar-top").html(this["topHTML"] + flatHTML);
+      query2(this.box).find(".tsg-sidebar-body").css("top", query2(this.box).find(".tsg-sidebar-top").get(0)?.clientHeight + "px");
+      query2(this.box).find(".tsg-flat").off("click").on("click", (_event) => {
+        this.goFlat();
+      });
+    }
+    if (this["bottomHTML"] !== "") {
+      query2(this.box).find(".tsg-sidebar-bottom").html(this["bottomHTML"]);
+      query2(this.box).find(".tsg-sidebar-body").css("bottom", query2(this.box).find(".tsg-sidebar-bottom").get(0)?.clientHeight + "px");
+    }
+    this.last.observeResize = new ResizeObserver(() => {
+      this.resize();
+    });
+    this.last.observeResize.observe(this.box);
+    edata.finish();
+    this.refresh();
+    return Date.now() - time;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  update(id, options = {}) {
+    const nd = this.get(id);
+    let level;
+    if (nd) {
+      const $el = query2(this.box).find("#node_" + TsUtils.escapeId(nd.id));
+      if (nd.group) {
+        if (options.text) {
+          nd.text = options.text;
+          $el.find(".tsg-group-text").replace(typeof nd.text == "function" ? nd.text.call(this, nd) : '<span class="tsg-group-text">' + nd.text + "</span>");
+          delete options.text;
+        }
+        if (options.class) {
+          nd.class = options.class;
+          level = $el.data("level");
+          $el.get(0).className = "tsg-node-group tsg-level-" + level + (nd.class ? " " + nd.class : "");
+          delete options.class;
+        }
+        if (options.style) {
+          nd.style = options.style;
+          const nextEl = $el.get(0).nextElementSibling;
+          if (nextEl) nextEl.setAttribute("style", nd.style + ";" + (!nd.hidden && nd.expanded ? "" : "display: none;"));
+          delete options.style;
+        }
+      } else {
+        if (options.icon) {
+          const $icon = $el.find(".tsg-node-image > span");
+          if ($icon.length > 0) {
+            nd.icon = options.icon;
+            $icon[0].className = typeof nd.icon == "function" ? nd.icon.call(this, nd) : nd.icon;
+            delete options.icon;
+          }
+        }
+        if (options.count != null) {
+          nd.count = options.count;
+          let txt = nd.count ?? this["badge"]?.text;
+          const style = this["badge"]?.style;
+          const last = this.last.badge[nd.id];
+          if (typeof txt == "function") txt = txt.call(this, nd, level);
+          $el.find(".tsg-node-badge").html(txt).attr("style", `${style}; ${last?.style ?? ""}`);
+          if ($el.find(".tsg-node-badge").length > 0) delete options.count;
+        }
+        if (options.class && $el.length > 0) {
+          nd.class = options.class;
+          level = $el.data("level");
+          $el[0].className = "tsg-node tsg-level-" + level + (nd.selected ? " tsg-selected" : "") + (nd.disabled ? " tsg-disabled" : "") + (nd.class ? " " + nd.class : "");
+          delete options.class;
+        }
+        if (options.text != null) {
+          nd.text = options.text;
+          $el.find(".tsg-node-text").html(typeof nd.text == "function" ? nd.text.call(this, nd) : nd.text);
+          delete options.text;
+        }
+        if (options.style && $el.length > 0) {
+          const $txt = $el.find(".tsg-node-text");
+          nd.style = options.style;
+          $txt[0].setAttribute("style", nd.style);
+          delete options.style;
+        }
+      }
+    }
+    return options;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  refresh(id, options = {}) {
+    if (this.box == null) return;
+    const body = query2(this.box).find(":scope > div > .tsg-sidebar-body").get(0);
+    const { scrollTop, scrollLeft } = body ?? {};
+    const time = Date.now();
+    const edata = this.trigger("refresh", {
+      target: id != null ? id : this.name,
+      nodeId: id != null ? id : null,
+      fullRefresh: id != null ? false : true
+    });
+    if (edata.isCancelled === true) return;
+    if (this.flatButton == true) {
+      query2(this.box).find(".tsg-sidebar-top .tsg-flat").show().removeClass("tsg-flat-left tsg-flat-right").addClass(` tsg-flat-${this.flat ? "right" : "left"}`);
+    } else {
+      query2(this.box).find(".tsg-sidebar-top .tsg-flat").hide();
+    }
+    const boxEl2 = query2(this.box).get(0);
+    query2(this.box).find(":scope > div").removeClass("tsg-sidebar-flat").addClass(this.flat ? "tsg-sidebar-flat" : "").css({
+      width: (boxEl2?.clientWidth ?? 0) + "px",
+      height: (boxEl2?.clientHeight ?? 0) + "px"
+    });
+    if (this.nodes.length > 0 && this.nodes[0].parent == null) {
+      const tmp = this.nodes;
+      this.nodes = [];
+      this.add(this, tmp);
+    }
+    const obj = this;
+    let node;
+    let nodeSubId;
+    if (id == null) {
+      node = this;
+      nodeSubId = ".tsg-sidebar-body";
+    } else {
+      node = this.get(id);
+      if (node == null) return;
+      nodeSubId = "#node_" + TsUtils.escapeId(node.id) + "_sub";
+    }
+    const nodeId = "#node_" + TsUtils.escapeId(node.id);
+    let nodeHTML;
+    if (node !== this) {
+      nodeHTML = getNodeHTML(node);
+      query2(this.box).find(nodeId).before('<div id="sidebar_' + this.name + '_tmp"></div>');
+      query2(this.box).find(nodeId).remove();
+      query2(this.box).find(nodeSubId).remove();
+      query2(this.box).find("#sidebar_" + this.name + "_tmp").before(nodeHTML);
+      query2(this.box).find("#sidebar_" + this.name + "_tmp").remove();
+    }
+    const div = query2(this.box).find(":scope > div").get(0);
+    const scroll = {
+      top: div?.scrollTop,
+      left: div?.scrollLeft
+    };
+    const cnt = node == this ? query2(this.box).find(":scope > div > .tsg-sidebar-body") : query2(body).find(nodeSubId);
+    cnt.html("");
+    for (let i = 0; i < node.nodes.length; i++) {
+      const subNode = node.nodes[i];
+      nodeHTML = getNodeHTML(subNode);
+      cnt.append(nodeHTML);
+      if (subNode.nodes.length !== 0) {
+        this.refresh(subNode.id, { recursive: true });
+      } else {
+        const edata2 = this.trigger("refresh", { target: subNode.id });
+        if (edata2.isCancelled === true) return;
+        edata2.finish();
+      }
+    }
+    if (div) {
+      div.scrollTop = scroll.top ?? 0;
+      div.scrollLeft = scroll.left ?? 0;
+    }
+    if (!options.recursive) {
+      const els = query2(this.box).find(`${nodeId}, ${nodeId} .tsg-eaction, ${nodeSubId} .tsg-eaction`);
+      TsUtils.bindEvents(els, this);
+      query2(body).prop({ scrollLeft, scrollTop });
+    }
+    edata.finish();
+    return Date.now() - time;
+    function getNodeHTML(nd) {
+      let html = "";
+      let icon = nd.icon;
+      if (icon == null) icon = obj.icon;
+      let tmp = nd.parent;
+      let level = 0;
+      while (tmp && tmp.parent != null) {
+        tmp = tmp.parent;
+        level++;
+      }
+      if (nd.caption != null && nd.text == null) nd.text = nd.caption;
+      if (nd.caption != null) {
+        console.log("NOTICE: sidebar node.caption property is deprecated, please use node.text. Node -> ", nd);
+        nd.text = nd.caption;
+      }
+      if (Array.isArray(nd.nodes) && nd.nodes.length > 0) nd.collapsible = true;
+      if (nd.group) {
+        let text = TsUtils.lang(typeof nd.text == "function" ? nd.text.call(obj, nd, level) : nd.text);
+        if (String(text).substr(0, 5) != "<span") {
+          text = `<span class="tsg-group-text">${text}</span>`;
+        }
+        html = `
+                    <div id="node_${nd.id}" data-id="${nd.id}" data-level="${level}" style="${nd.hidden ? "display: none" : ""}"
+                        class="tsg-node-group tsg-level-${level} ${nd.class ? nd.class : ""} tsg-eaction"
+                        data-click="toggle|${nd.id}"
+                        data-contextmenu="contextMenu|${nd.id}|event"
+                        data-mouseenter="showPlus|this|inherit"
+                        data-mouseleave="showPlus|this|transparent">
+                        ${nd.groupShowHide && nd.collapsible ? `<span>${!nd.hidden && nd.expanded ? TsUtils.lang("Hide") : TsUtils.lang("Show")}</span>` : "<span></span>"} ${text}
+                    </div>
+                    <div class="tsg-node-sub" id="node_${nd.id}_sub" style="${nd.style}; ${!nd.hidden && nd.expanded ? "" : "display: none;"}">
+                </div>`;
+        if (obj.flat) {
+          html = `
+                        <div class="tsg-node-group" id="node_${nd.id}" data-id="${nd.id}"><span>&#160;</span></div>
+                        <div id="node_${nd.id}_sub" style="${nd.style}; ${!nd.hidden && nd.expanded ? "" : "display: none;"}"></div>`;
+        }
+      } else {
+        if (nd.selected && !nd.disabled) {
+          if (obj.multi) {
+            obj.selected ??= [];
+            if (!obj.selected.includes(nd.id)) {
+              obj.selected.push(nd.id);
+            }
+          } else {
+            obj.selected = nd.id;
+          }
+        }
+        let image = "";
+        if (icon) {
+          if (icon instanceof Object) {
+            const text2 = typeof icon.text == "function" ? icon.text.call(obj, nd, level) ?? "" : icon.text;
+            image = `
+                            <div class="tsg-node-image tsg-eaction" style="${obj.icon.style ?? ""}; pointer-events: all"
+                                data-mouseEnter="mouseAction|Enter|this|${nd.id}|event|icon"
+                                data-mouseLeave="mouseAction|Leave|this|${nd.id}|event|icon"
+                                data-click="mouseAction|click|this|${nd.id}|event|icon">
+                                    ${text2}
+                            </div>
+                        `;
+          } else {
+            image = `
+                            <div class="tsg-node-image">
+                                <span class="${typeof icon == "function" ? icon.call(obj, nd, level) : icon}"></span>
+                            </div>`;
+          }
+        }
+        let expand = "";
+        let counts = "";
+        if (obj["badge"] != null || nd.count != null) {
+          let txt = nd.count ?? obj["badge"]?.text;
+          const style = obj["badge"]?.style;
+          const last = obj.last.badge[nd.id];
+          if (typeof txt == "function") txt = txt.call(obj, nd, level);
+          if (txt || txt === 0) {
+            counts = `
+                            <div class="tsg-node-badge tsg-eaction ${nd.count != null ? "tsg-node-count" : ""} ${last?.className ?? ""}"
+                                style="${style ?? ""};${last?.style ?? ""}"
+                                data-mouseEnter="mouseAction|Enter|this|${nd.id}|event|badge"
+                                data-mouseLeave="mouseAction|Leave|this|${nd.id}|event|badge"
+                                data-click="mouseAction|click|this|${nd.id}|event|badge"
+                            >
+                                ${txt}
+                            </div>`;
+          }
+        }
+        const classes = ["tsg-node", `tsg-level-${level}`, "tsg-eaction"];
+        if (nd.selected) classes.push("tsg-selected");
+        if (nd.disabled) classes.push("tsg-disabled");
+        if (nd.class) classes.push(nd.class);
+        if (nd.collapsible === true) {
+          const toggleClasses = ["tsg-sb-toggle", "tsg-eaction", nd.expanded ? "tsg-expanded" : "tsg-collapsed"];
+          if (obj["toggleAlign"] == "left") toggleClasses.push("tsg-left-toggle");
+          expand = `<div class="${toggleClasses.join(" ")}" data-click="toggle|${nd.id}"><span></span></div>`;
+          classes.push("tsg-has-children");
+        }
+        const text = TsUtils.lang(typeof nd.text == "function" ? nd.text.call(obj, nd, level) : nd.text);
+        let nodeOffset = nd.parent?.childOffset ?? 0;
+        if (level === 0 && nd.collapsible === true && obj["toggleAlign"] == "left") {
+          nodeOffset += 12;
+        }
+        html = `
+                    <div id="node_${nd.id}" class="${classes.join(" ")}" data-id="${nd.id}" data-level="${level}"
+                        style="${nd.hidden ? "display: none;" : ""}"
+                        data-click="click|${nd.id}|event"
+                        data-dblclick="dblClick|${nd.id}|event"
+                        data-mouseDown="mouseDown|${nd.id}|event"
+                        data-contextmenu="contextMenu|${nd.id}|event"
+                        data-mouseEnter="mouseAction|Enter|this|${nd.id}|event"
+                        data-mouseLeave="mouseAction|Leave|this|${nd.id}|event"
+                    >
+                        ${obj["handle"].text ? `<div class="tsg-node-handle tsg-eaction" style="width: ${obj["handle"].width}px; ${obj["handle"].style}"
+                                    data-mouseEnter="mouseAction|Enter|this|${nd.id}|event|handle"
+                                    data-mouseLeave="mouseAction|Leave|this|${nd.id}|event|handle"
+                                    data-click="mouseAction|click|this|${nd.id}|event|handle"
+                                >
+                                   ${typeof obj["handle"].text == "function" ? obj["handle"].text.call(obj, nd, level) ?? "" : obj["handle"].text}
+                              </div>` : ""}
+                      <div class="tsg-node-data" style="margin-left: ${level * obj["levelPadding"] + nodeOffset + obj["handle"].width}px">
+                            ${expand} ${image} ${counts}
+                            <div class="tsg-node-text ${!image ? "no-icon" : ""}" style="${nd.style || ""}">${text}</div>
+                       </div>
+                    </div>
+                    <div class="tsg-node-sub" id="node_${nd.id}_sub" style="${nd.style}; ${!nd.hidden && nd.expanded ? "" : "display: none;"}"></div>`;
+        if (obj.flat) {
+          html = `
+                        <div id="node_${nd.id}" class="${classes.join(" ")} tsg-node-flat" data-id="${nd.id}" style="${nd.hidden ? "display: none;" : ""}"
+                            data-click="click|${nd.id}|event"
+                            data-dblclick="dblClick|${nd.id}|event"
+                            data-contextmenu="contextMenu|${nd.id}|event"
+                            data-mouseEnter="mouseAction|Enter|this|${nd.id}|event|tooltip"
+                            data-mouseLeave="mouseAction|Leave|this|${nd.id}|event|tooltip"
+                        >
+                            <div class="tsg-node-data">${image}</div>
+                        </div>
+                        <div class="tsg-node-sub" id="node_${nd.id}_sub" style="${nd.style}; ${!nd.hidden && nd.expanded ? "" : "display: none;"}"></div>`;
+        }
+      }
+      return html;
+    }
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  mouseAction(action, anchor, nodeId, event, type) {
+    let edata;
+    const node = this.get(nodeId);
+    if (type == null) {
+      edata = this.trigger("mouse" + action, { target: node.id, node, originalEvent: event });
+    }
+    if (type == "tooltip") {
+      const text = TsUtils.lang(typeof node.text == "function" ? node.text.call(this, node) : node.text);
+      let tooltip = text + (node.count != null ? ' - <span class="tsg-node-badge tsg-node-count">' + node.count + "</span>" : "");
+      if (action == "Leave" || this.selected == node.id) tooltip = "";
+      this.tooltip(anchor, tooltip);
+    }
+    if (type == "handle") {
+      if (action == "click") {
+        const onClick = this["handle"].onClick;
+        if (typeof onClick == "function") {
+          onClick.call(this, node, event);
+        }
+      } else {
+        let tooltip = this["handle"].tooltip;
+        if (typeof tooltip == "function") {
+          tooltip = tooltip.call(this, node, event);
+        }
+        if (action == "Leave") tooltip = "";
+        this.otherTooltip(anchor, tooltip);
+      }
+    }
+    if (type == "icon") {
+      if (action == "click") {
+        const onClick = this.icon.onClick;
+        if (typeof onClick == "function") {
+          onClick.call(this, node, event);
+        }
+      } else {
+        let tooltip = this.icon.tooltip;
+        if (typeof tooltip == "function") {
+          tooltip = tooltip.call(this, node, event);
+        }
+        if (action == "Leave") tooltip = "";
+        this.otherTooltip(anchor, tooltip);
+      }
+    }
+    if (type == "badge") {
+      if (action == "click") {
+        const onClick = this["badge"]?.onClick;
+        if (typeof onClick == "function") {
+          onClick.call(this, node, event);
+        }
+      } else {
+        let tooltip = this["badge"]?.tooltip;
+        if (typeof tooltip == "function") {
+          tooltip = tooltip.call(this, node, event);
+        }
+        if (action == "Leave") tooltip = "";
+        this.otherTooltip(anchor, tooltip);
+      }
+    }
+    edata?.finish();
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  tooltip(el, text) {
+    const $el = query2(el).find(".tsg-node-data");
+    if (text !== "") {
+      TsTooltip.show({
+        // any: query().get(0) returns Node|Node[]; sidebar node-data element is always HTMLElement
+        anchor: $el.get(0),
+        name: this.name + "_tooltip",
+        html: text,
+        position: "right|left"
+      });
+    } else {
+      TsTooltip.hide(this.name + "_tooltip");
+    }
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  otherTooltip(el, text) {
+    if (text !== "") {
+      TsTooltip.show({
+        anchor: el,
+        name: this.name + "_tooltip",
+        html: text,
+        position: "top|bottom"
+      });
+    } else {
+      TsTooltip.hide(this.name + "_tooltip");
+    }
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  showPlus(el, color) {
+    query2(el).find("span:nth-child(1)").css("color", color);
+  }
+  resize() {
+    const time = Date.now();
+    const edata = this.trigger("resize", { target: this.name });
+    if (edata.isCancelled === true) return;
+    if (this.box != null) {
+      const boxEl = query2(this.box).get(0);
+      const rect = boxEl.getBoundingClientRect();
+      query2(this.box).css("overflow", "hidden");
+      query2(this.box).find(":scope > div").css({
+        width: rect.width + "px",
+        height: rect.height + "px"
+      });
+    }
+    edata.finish();
+    return Date.now() - time;
+  }
+  destroy() {
+    const edata = this.trigger("destroy", { target: this.name });
+    if (edata.isCancelled === true) return;
+    if (query2(this.box).find(".tsg-sidebar-body").length > 0) {
+      this.unmount();
+    }
+    delete TsUi[this.name];
+    edata.finish();
+  }
+  unmount() {
+    super.unmount();
+    this.last.observeResize?.disconnect();
+  }
+  // any: callback parameter — caller signature varies; TsSidebar node tree shape is user-defined at runtime
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  lock(msg, showSpinner) {
+    TsUtils.lock(this.box, msg, showSpinner);
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  unlock(speed) {
+    TsUtils.unlock(this.box, speed);
+  }
+};
+
+export {
+  TsSidebar
+};
+//# sourceMappingURL=chunk-BIB3X2TW.js.map