@3t-transform/threeteeui 1.9.101 → 1.9.103

package/dist/collection/components/molecules/tttx-tree-view/tttx-tree-view.js

@@ -1,314 +1,314 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { h, getAssetPath } from '@stencil/core';
-import * as DOMPurify from 'dompurify';
-import domSanitiserOptions from '../../../shared/domsanitiser.options';
-export class TttxTreeView {
-  constructor() {
-    this.dragGhost = {
-      el: null,
-    };
-    this.dragDropPlaceholderId = 'drag-drop-placeholder';
-    this.createGhostImage = (label) => {
-      if (label.length > 30)
-        label = `${label.slice(0, 30)}...`;
-      const ghost = document.createElement('div');
-      Object.assign(ghost.style, {
-        position: 'absolute',
-        top: '-9999px',
-        left: '-9999px',
-        padding: '8px 12px',
-        background: 'white',
-        pointerEvents: 'none',
-        boxShadow: '0px 0px 12px #F9F9F9',
-        display: 'flex',
-        flexDirection: 'row',
-        gap: '10px',
-        borderRadius: '4px'
-      });
-      const dragHandle = document.createElement('img');
-      dragHandle.src = this.dragIcon;
-      dragHandle.alt = 'drag';
-      ghost.appendChild(dragHandle);
-      const ghostText = document.createElement('span');
-      Object.assign(ghostText.style, { fontSize: '14px' });
-      ghostText.textContent = label;
-      ghost.appendChild(ghostText);
-      document.body.appendChild(ghost);
-      return ghost;
-    };
-    this.handleDragStart = (event, node, index, parentId) => {
-      if (!event.dataTransfer)
-        return;
-      this.draggedNodeParentId = parentId;
-      this.draggedNodeId = node.id;
-      const payload = JSON.stringify({ parentId, index, node });
-      event.dataTransfer.setData('text/plain', payload);
-      const ghostImg = this.createGhostImage(node.title);
-      this.dragGhost.el = ghostImg;
-      event.dataTransfer.setDragImage(ghostImg, 32, 30);
-    };
-    this.handleDragEnd = () => {
-      // if drag ends on a valid target, handleDragDrop should handle everything
-      // if not dropped on a valid target, use this trigger to remove the placeholder
-      setTimeout(() => {
-        const placeHolderExists = this.findNodeById(this.treeData, this.dragDropPlaceholderId);
-        if (placeHolderExists) {
-          const placeHolderRemovedList = this.updateDragDropPlaceholder(this.treeData);
-          this.treeData = [...placeHolderRemovedList];
-        }
-      }, 300);
-    };
-    this.handleDragDrop = (event, node, parentId) => {
-      var _a;
-      event.preventDefault();
-      const nodeData = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData('text/plain');
-      if (!nodeData)
-        return;
-      const { parentId: sourceParentId, node: sourceNode } = JSON.parse(nodeData);
-      // Prevent dropping on itself or different parents
-      if (node.id === sourceNode.id || sourceParentId !== parentId)
-        return;
-      const updatedTree = [...this.treeData];
-      // Find the parent node
-      const parent = parentId ? this.findNodeById(updatedTree, parentId) : null;
-      // If no parent (root level), work with treeData directly
-      const children = (parent === null || parent === void 0 ? void 0 : parent.child) ? [...parent.child] : [...updatedTree];
-      if (!children || children.length === 0)
-        return;
-      // move the node to wherever the placeholder now is
-      const movedElement = sourceNode;
-      const newChildren = [];
-      for (const child of children) {
-        if (child.id == movedElement.id)
-          continue; // will be inserted in placeholder position
-        if (child.id == this.dragDropPlaceholderId) {
-          // moved element added to new list in placeholder's place
-          newChildren.push(movedElement);
-          continue;
-        }
-        newChildren.push(child); // retain existing elements
-      }
-      // Update the tree
-      if (parent) {
-        parent.child = newChildren;
-      }
-      else {
-        this.treeData = newChildren;
-      }
-      this.draggedNodeParentId = undefined;
-      this.draggedNodeId = undefined;
-      if (this.dragGhost.el) {
-        this.dragGhost.el.remove();
-        this.dragGhost.el = null;
-      }
-      this.handleDragDropSuccessBackground(movedElement.id);
-      this.treeData = [...this.updateDragDropPlaceholder(this.treeData)];
-      this.moveNode.emit(this.treeData);
-    };
-    this.handleDragOver = (event, draggedOverId, parentId, isDragDropPlaceholder) => {
-      event.preventDefault();
-      if (!event.dataTransfer)
-        return;
-      const validDrag = this.draggedNodeParentId === parentId || isDragDropPlaceholder;
-      event.dataTransfer.dropEffect = validDrag ? 'move' : 'none';
-      if (validDrag && !isDragDropPlaceholder) {
-        this.treeData = [...this.updateDragDropPlaceholder(this.treeData, draggedOverId)];
-      }
-    };
-    this.updateDragDropPlaceholder = (treeData, createPlaceholderOnId) => {
-      const newTreeData = [];
-      for (const treeViewItem of treeData) {
-        // delete existing placeholders & create a new one if this is where it should be dropped
-        if (treeViewItem.isDragDropPlaceholder)
-          continue;
-        if (treeViewItem.id == createPlaceholderOnId) {
-          newTreeData.push({
-            id: this.dragDropPlaceholderId,
-            title: 'Drop here',
-            isDragDropPlaceholder: true
-          });
-        }
-        if (treeViewItem.child) {
-          const children = this.updateDragDropPlaceholder(treeViewItem.child, createPlaceholderOnId);
-          treeViewItem.child = children;
-        }
-        newTreeData.push(treeViewItem);
-      }
-      return newTreeData;
-    };
-    this.data = undefined;
-    this.treeData = undefined;
-    this.nodesRecentlyMoved = [];
-  }
-  componentWillRender() {
-    if (!this.data)
-      return;
-    this.treeData = typeof this.data === 'string' ? JSON.parse(this.data) : this.data;
-    if (!this.dragIcon) {
-      this.dragIcon = getAssetPath('assets/img/drag-icon.svg');
-    }
-  }
-  onClickHandler(event, node) {
-    event.stopPropagation();
-    // Handle selection: if node is already selected, deselect it; otherwise select it and deselect all others
-    if (node.selectable) {
-      if (node.selected) {
-        // Toggle off: deselect this node
-        node.selected = false;
-      }
-      else {
-        // Toggle on: deselect all others and select this one
-        this.handleNodeSelection(node);
-        // node.selected is already set to true in handleNodeSelection
-      }
-      this.treeData = [...this.treeData];
-    }
-    this.clickEvent.emit(node);
-  }
-  toggleNode(node, event) {
-    event.stopPropagation();
-    node.isOpen = !node.isOpen;
-    this.treeData = [...this.treeData];
-    this.expandNode.emit({ node: node, treeViewData: this.treeData });
-  }
-  handleCheckboxChange(node, event) {
-    event.stopPropagation();
-    node.checked = !node.checked;
-    this.updateChildrenCheckStatus(node);
-    this.updateParentCheckStatus();
-    this.treeData = [...this.treeData];
-    this.checkboxChange.emit(this.treeData);
-  }
-  updateChildrenCheckStatus(node) {
-    if (node.child) {
-      node.child.forEach(childNode => {
-        if (childNode.hasCheckbox && childNode.checked !== undefined) {
-          // don't set checked on a child that doesn't have a checkbox
-          // makes it impossible to unselect a parent as child can never be unchecked in frontend
-          childNode.checked = node.checked;
-        }
-        this.updateChildrenCheckStatus(childNode);
-      });
-    }
-  }
-  /**
-   * Update the checkbox status of parent nodes when children have been updated.
-   * Called recursively to traverse the tree for parents.
-   * First call with no params to automatically start at the top of the tree.
-   *
-   * Any children checked -> parent is checked.
-   *
-   * All children unchecked -> parent is unchecked.
-   */
-  updateParentCheckStatus(parent = undefined, children = undefined) {
-    if (parent === undefined) {
-      this.treeData.forEach(node => this.updateParentCheckStatus(node, node.child));
-      return;
-    }
-    let childrenCheckedStatuses = [];
-    // set status relative to children if we have some
-    if (children && children.length > 0) {
-      childrenCheckedStatuses = children.map(node => this.updateParentCheckStatus(node, node.child)).flat(1);
-      // parent checked if any children are checked
-      if (childrenCheckedStatuses.some(checked => checked)) {
-        parent.checked = true;
-      }
-      // parent unchecked if all children are unchecked
-      if (childrenCheckedStatuses.every(checked => !checked)) {
-        parent.checked = false;
-      }
-    }
-    // return the gathered checked statuses so nodes above can make check choices
-    return [...childrenCheckedStatuses, parent.checked];
-  }
-  treeConfigs(node) {
-    let checkboxIcon, checkboxColor;
-    if (node.checked) {
-      checkboxIcon = 'check_box';
-      checkboxColor = 'blue';
-    }
-    else {
-      checkboxIcon = 'check_box_outline_blank';
-      checkboxColor = 'grey';
-    }
-    const rowHoverActive = node.hasHover ? 'rowHover' : '';
-    const expanderIcon = node.isOpen ? 'arrow_drop_down' : 'arrow_right';
-    const selectedActive = node.selectable && node.selected ? 'rowSelected' : '';
-    const dragDropPlaceholder = node.isDragDropPlaceholder ? 'drag_drop_placeholder' : '';
-    return { checkboxColor, checkboxIcon, rowHoverActive, expanderIcon, selectedActive, dragDropPlaceholder };
-  }
-  findNodeById(nodes, id) {
-    for (const node of nodes) {
-      if (node.id === id)
-        return node;
-      if (node.child) {
-        const found = this.findNodeById(node.child, id);
-        if (found)
-          return found;
-      }
-    }
-    return undefined;
-  }
-  deselectAllNodes(nodes) {
-    for (const node of nodes) {
-      if (node.selectable) {
-        node.selected = false;
-      }
-      if (node.child) {
-        this.deselectAllNodes(node.child);
-      }
-    }
-  }
-  handleNodeSelection(node) {
-    // Deselect all nodes first
-    this.deselectAllNodes(this.treeData);
-    // Select only the clicked node if it's selectable
-    if (node.selectable) {
-      node.selected = true;
-    }
-    // Update the tree to trigger re-render
-    this.treeData = [...this.treeData];
-  }
-  handleDragDropSuccessBackground(nodeId) {
-    this.nodesRecentlyMoved.push(nodeId);
-    setTimeout((nodeId) => {
-      this.nodesRecentlyMoved = [...this.nodesRecentlyMoved.filter((id) => id !== nodeId)];
-    }, 300, nodeId);
-  }
-  doesNodePrecedeDragDropPlaceholder(node, index, parentId = undefined) {
-    var _a;
-    if (node.child) {
-      // is parent, so first child would have to be placeholder
-      return node.child.length > 0 && node.child[0].isDragDropPlaceholder;
-    }
-    // child, so check if following element is placeholder
-    const parentNode = parentId ? this.findNodeById(this.treeData, parentId) : undefined;
-    if (parentNode) {
-      return index !== parentNode.child.length && ((_a = parentNode.child[index + 1]) === null || _a === void 0 ? void 0 : _a.isDragDropPlaceholder);
-    }
-    return false;
-  }
-  renderNode(node, index, parentId = undefined, level = 0 // <-- depth
-  ) {
-    const options = this.treeConfigs(node);
-    const precedesDragDropPlaceholderClass = this.doesNodePrecedeDragDropPlaceholder(node, index, parentId) ? 'precedes_drag_drop' : '';
-    if (node.child) {
-      // group node
-      const isSelectedGroup = !!node.selected;
-      return (h("li", { class: `${isSelectedGroup ? 'selected-group' : ''}`, style: { '--level': String(level) } }, h("li", Object.assign({ id: node.id, "data-id": node.id }, (node.draggable || node.isDragDropPlaceholder ? { onDragOver: event => this.handleDragOver(event, node.id, parentId, node.isDragDropPlaceholder) } : {}), (node.draggable || node.isDragDropPlaceholder ? { onDrop: event => this.handleDragDrop(event, node, parentId) } : {}), { class: `inline-tree-item element-row tree-node ${options.rowHoverActive} ${options.selectedActive} ${options.dragDropPlaceholder} ${precedesDragDropPlaceholderClass}`, onClick: event => {
-          if (node.hasHover) {
-            this.onClickHandler(event, node);
-          }
-        } }), h("tttx-button_1_9_101", { class: "toggleNode", design: "borderless-circle", notext: true, icon: options.expanderIcon, color: "black", onClick: event => this.toggleNode(node, event) }), this.htmlcode('treeNode', node, options.checkboxIcon, options.checkboxColor, index, parentId)), node.isOpen ? (h("ul", null, node.child.map((childNode, childIndex) => {
-        // next level = level + 1
-        return this.renderNode(childNode, childIndex, node.id, level + 1);
-      }))) : null));
-    }
-    // leaf (activity)
-    const leafStyle = { '--level': String(level) };
-    if (this.nodesRecentlyMoved.find((x) => x == node.id)) {
-      leafStyle['background-color'] = '#D1F7F0'; //'rgba(51, 170, 51, .1)';
-    }
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h, getAssetPath } from '@stencil/core';
+import * as DOMPurify from 'dompurify';
+import domSanitiserOptions from '../../../shared/domsanitiser.options';
+export class TttxTreeView {
+  constructor() {
+    this.dragGhost = {
+      el: null,
+    };
+    this.dragDropPlaceholderId = 'drag-drop-placeholder';
+    this.createGhostImage = (label) => {
+      if (label.length > 30)
+        label = `${label.slice(0, 30)}...`;
+      const ghost = document.createElement('div');
+      Object.assign(ghost.style, {
+        position: 'absolute',
+        top: '-9999px',
+        left: '-9999px',
+        padding: '8px 12px',
+        background: 'white',
+        pointerEvents: 'none',
+        boxShadow: '0px 0px 12px #F9F9F9',
+        display: 'flex',
+        flexDirection: 'row',
+        gap: '10px',
+        borderRadius: '4px'
+      });
+      const dragHandle = document.createElement('img');
+      dragHandle.src = this.dragIcon;
+      dragHandle.alt = 'drag';
+      ghost.appendChild(dragHandle);
+      const ghostText = document.createElement('span');
+      Object.assign(ghostText.style, { fontSize: '14px' });
+      ghostText.textContent = label;
+      ghost.appendChild(ghostText);
+      document.body.appendChild(ghost);
+      return ghost;
+    };
+    this.handleDragStart = (event, node, index, parentId) => {
+      if (!event.dataTransfer)
+        return;
+      this.draggedNodeParentId = parentId;
+      this.draggedNodeId = node.id;
+      const payload = JSON.stringify({ parentId, index, node });
+      event.dataTransfer.setData('text/plain', payload);
+      const ghostImg = this.createGhostImage(node.title);
+      this.dragGhost.el = ghostImg;
+      event.dataTransfer.setDragImage(ghostImg, 32, 30);
+    };
+    this.handleDragEnd = () => {
+      // if drag ends on a valid target, handleDragDrop should handle everything
+      // if not dropped on a valid target, use this trigger to remove the placeholder
+      setTimeout(() => {
+        const placeHolderExists = this.findNodeById(this.treeData, this.dragDropPlaceholderId);
+        if (placeHolderExists) {
+          const placeHolderRemovedList = this.updateDragDropPlaceholder(this.treeData);
+          this.treeData = [...placeHolderRemovedList];
+        }
+      }, 300);
+    };
+    this.handleDragDrop = (event, node, parentId) => {
+      var _a;
+      event.preventDefault();
+      const nodeData = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData('text/plain');
+      if (!nodeData)
+        return;
+      const { parentId: sourceParentId, node: sourceNode } = JSON.parse(nodeData);
+      // Prevent dropping on itself or different parents
+      if (node.id === sourceNode.id || sourceParentId !== parentId)
+        return;
+      const updatedTree = [...this.treeData];
+      // Find the parent node
+      const parent = parentId ? this.findNodeById(updatedTree, parentId) : null;
+      // If no parent (root level), work with treeData directly
+      const children = (parent === null || parent === void 0 ? void 0 : parent.child) ? [...parent.child] : [...updatedTree];
+      if (!children || children.length === 0)
+        return;
+      // move the node to wherever the placeholder now is
+      const movedElement = sourceNode;
+      const newChildren = [];
+      for (const child of children) {
+        if (child.id == movedElement.id)
+          continue; // will be inserted in placeholder position
+        if (child.id == this.dragDropPlaceholderId) {
+          // moved element added to new list in placeholder's place
+          newChildren.push(movedElement);
+          continue;
+        }
+        newChildren.push(child); // retain existing elements
+      }
+      // Update the tree
+      if (parent) {
+        parent.child = newChildren;
+      }
+      else {
+        this.treeData = newChildren;
+      }
+      this.draggedNodeParentId = undefined;
+      this.draggedNodeId = undefined;
+      if (this.dragGhost.el) {
+        this.dragGhost.el.remove();
+        this.dragGhost.el = null;
+      }
+      this.handleDragDropSuccessBackground(movedElement.id);
+      this.treeData = [...this.updateDragDropPlaceholder(this.treeData)];
+      this.moveNode.emit(this.treeData);
+    };
+    this.handleDragOver = (event, draggedOverId, parentId, isDragDropPlaceholder) => {
+      event.preventDefault();
+      if (!event.dataTransfer)
+        return;
+      const validDrag = this.draggedNodeParentId === parentId || isDragDropPlaceholder;
+      event.dataTransfer.dropEffect = validDrag ? 'move' : 'none';
+      if (validDrag && !isDragDropPlaceholder) {
+        this.treeData = [...this.updateDragDropPlaceholder(this.treeData, draggedOverId)];
+      }
+    };
+    this.updateDragDropPlaceholder = (treeData, createPlaceholderOnId) => {
+      const newTreeData = [];
+      for (const treeViewItem of treeData) {
+        // delete existing placeholders & create a new one if this is where it should be dropped
+        if (treeViewItem.isDragDropPlaceholder)
+          continue;
+        if (treeViewItem.id == createPlaceholderOnId) {
+          newTreeData.push({
+            id: this.dragDropPlaceholderId,
+            title: 'Drop here',
+            isDragDropPlaceholder: true
+          });
+        }
+        if (treeViewItem.child) {
+          const children = this.updateDragDropPlaceholder(treeViewItem.child, createPlaceholderOnId);
+          treeViewItem.child = children;
+        }
+        newTreeData.push(treeViewItem);
+      }
+      return newTreeData;
+    };
+    this.data = undefined;
+    this.treeData = undefined;
+    this.nodesRecentlyMoved = [];
+  }
+  componentWillRender() {
+    if (!this.data)
+      return;
+    this.treeData = typeof this.data === 'string' ? JSON.parse(this.data) : this.data;
+    if (!this.dragIcon) {
+      this.dragIcon = getAssetPath('assets/img/drag-icon.svg');
+    }
+  }
+  onClickHandler(event, node) {
+    event.stopPropagation();
+    // Handle selection: if node is already selected, deselect it; otherwise select it and deselect all others
+    if (node.selectable) {
+      if (node.selected) {
+        // Toggle off: deselect this node
+        node.selected = false;
+      }
+      else {
+        // Toggle on: deselect all others and select this one
+        this.handleNodeSelection(node);
+        // node.selected is already set to true in handleNodeSelection
+      }
+      this.treeData = [...this.treeData];
+    }
+    this.clickEvent.emit(node);
+  }
+  toggleNode(node, event) {
+    event.stopPropagation();
+    node.isOpen = !node.isOpen;
+    this.treeData = [...this.treeData];
+    this.expandNode.emit({ node: node, treeViewData: this.treeData });
+  }
+  handleCheckboxChange(node, event) {
+    event.stopPropagation();
+    node.checked = !node.checked;
+    this.updateChildrenCheckStatus(node);
+    this.updateParentCheckStatus();
+    this.treeData = [...this.treeData];
+    this.checkboxChange.emit(this.treeData);
+  }
+  updateChildrenCheckStatus(node) {
+    if (node.child) {
+      node.child.forEach(childNode => {
+        if (childNode.hasCheckbox && childNode.checked !== undefined) {
+          // don't set checked on a child that doesn't have a checkbox
+          // makes it impossible to unselect a parent as child can never be unchecked in frontend
+          childNode.checked = node.checked;
+        }
+        this.updateChildrenCheckStatus(childNode);
+      });
+    }
+  }
+  /**
+   * Update the checkbox status of parent nodes when children have been updated.
+   * Called recursively to traverse the tree for parents.
+   * First call with no params to automatically start at the top of the tree.
+   *
+   * Any children checked -> parent is checked.
+   *
+   * All children unchecked -> parent is unchecked.
+   */
+  updateParentCheckStatus(parent = undefined, children = undefined) {
+    if (parent === undefined) {
+      this.treeData.forEach(node => this.updateParentCheckStatus(node, node.child));
+      return;
+    }
+    let childrenCheckedStatuses = [];
+    // set status relative to children if we have some
+    if (children && children.length > 0) {
+      childrenCheckedStatuses = children.map(node => this.updateParentCheckStatus(node, node.child)).flat(1);
+      // parent checked if any children are checked
+      if (childrenCheckedStatuses.some(checked => checked)) {
+        parent.checked = true;
+      }
+      // parent unchecked if all children are unchecked
+      if (childrenCheckedStatuses.every(checked => !checked)) {
+        parent.checked = false;
+      }
+    }
+    // return the gathered checked statuses so nodes above can make check choices
+    return [...childrenCheckedStatuses, parent.checked];
+  }
+  treeConfigs(node) {
+    let checkboxIcon, checkboxColor;
+    if (node.checked) {
+      checkboxIcon = 'check_box';
+      checkboxColor = 'blue';
+    }
+    else {
+      checkboxIcon = 'check_box_outline_blank';
+      checkboxColor = 'grey';
+    }
+    const rowHoverActive = node.hasHover ? 'rowHover' : '';
+    const expanderIcon = node.isOpen ? 'arrow_drop_down' : 'arrow_right';
+    const selectedActive = node.selectable && node.selected ? 'rowSelected' : '';
+    const dragDropPlaceholder = node.isDragDropPlaceholder ? 'drag_drop_placeholder' : '';
+    return { checkboxColor, checkboxIcon, rowHoverActive, expanderIcon, selectedActive, dragDropPlaceholder };
+  }
+  findNodeById(nodes, id) {
+    for (const node of nodes) {
+      if (node.id === id)
+        return node;
+      if (node.child) {
+        const found = this.findNodeById(node.child, id);
+        if (found)
+          return found;
+      }
+    }
+    return undefined;
+  }
+  deselectAllNodes(nodes) {
+    for (const node of nodes) {
+      if (node.selectable) {
+        node.selected = false;
+      }
+      if (node.child) {
+        this.deselectAllNodes(node.child);
+      }
+    }
+  }
+  handleNodeSelection(node) {
+    // Deselect all nodes first
+    this.deselectAllNodes(this.treeData);
+    // Select only the clicked node if it's selectable
+    if (node.selectable) {
+      node.selected = true;
+    }
+    // Update the tree to trigger re-render
+    this.treeData = [...this.treeData];
+  }
+  handleDragDropSuccessBackground(nodeId) {
+    this.nodesRecentlyMoved.push(nodeId);
+    setTimeout((nodeId) => {
+      this.nodesRecentlyMoved = [...this.nodesRecentlyMoved.filter((id) => id !== nodeId)];
+    }, 300, nodeId);
+  }
+  doesNodePrecedeDragDropPlaceholder(node, index, parentId = undefined) {
+    var _a;
+    if (node.child) {
+      // is parent, so first child would have to be placeholder
+      return node.child.length > 0 && node.child[0].isDragDropPlaceholder;
+    }
+    // child, so check if following element is placeholder
+    const parentNode = parentId ? this.findNodeById(this.treeData, parentId) : undefined;
+    if (parentNode) {
+      return index !== parentNode.child.length && ((_a = parentNode.child[index + 1]) === null || _a === void 0 ? void 0 : _a.isDragDropPlaceholder);
+    }
+    return false;
+  }
+  renderNode(node, index, parentId = undefined, level = 0 // <-- depth
+  ) {
+    const options = this.treeConfigs(node);
+    const precedesDragDropPlaceholderClass = this.doesNodePrecedeDragDropPlaceholder(node, index, parentId) ? 'precedes_drag_drop' : '';
+    if (node.child) {
+      // group node
+      const isSelectedGroup = !!node.selected;
+      return (h("li", { class: `${isSelectedGroup ? 'selected-group' : ''}`, style: { '--level': String(level) } }, h("li", Object.assign({ id: node.id, "data-id": node.id }, (node.draggable || node.isDragDropPlaceholder ? { onDragOver: event => this.handleDragOver(event, node.id, parentId, node.isDragDropPlaceholder) } : {}), (node.draggable || node.isDragDropPlaceholder ? { onDrop: event => this.handleDragDrop(event, node, parentId) } : {}), { class: `inline-tree-item element-row tree-node ${options.rowHoverActive} ${options.selectedActive} ${options.dragDropPlaceholder} ${precedesDragDropPlaceholderClass}`, onClick: event => {
+          if (node.hasHover) {
+            this.onClickHandler(event, node);
+          }
+        } }), h("tttx-button_1_9_103", { class: "toggleNode", design: "borderless-circle", notext: true, icon: options.expanderIcon, color: "black", onClick: event => this.toggleNode(node, event) }), this.htmlcode('treeNode', node, options.checkboxIcon, options.checkboxColor, index, parentId)), node.isOpen ? (h("ul", null, node.child.map((childNode, childIndex) => {
+        // next level = level + 1
+        return this.renderNode(childNode, childIndex, node.id, level + 1);
+      }))) : null));
+    }
+    // leaf (activity)
+    const leafStyle = { '--level': String(level) };
+    if (this.nodesRecentlyMoved.find((x) => x == node.id)) {
+      leafStyle['background-color'] = '#D1F7F0'; //'rgba(51, 170, 51, .1)';
+    }
     return (h("li", Object.assign({ "data-id": node.id }, (node.draggable || node.isDragDropPlaceholder ? { onDragOver: event => this.handleDragOver(event, node.id, parentId, node.isDragDropPlaceholder) } : {}), (node.draggable || node.isDragDropPlaceholder ? { onDrop: event => this.handleDragDrop(event, node, parentId) } : {}), { class: `
                     inline-tree-item element-row
                     ${options.rowHoverActive}
@@ -317,155 +317,155 @@ export class TttxTreeView {
                     ${precedesDragDropPlaceholderClass}
                     drag_drop_success_fade
                     ${this.draggedNodeId == node.id ? ' is-being-dragged' : ''}
-                `, style: leafStyle, onClick: event => {
-        if (node.hasHover) {
-          this.onClickHandler(event, node);
-        }
-      } }), this.htmlcode('treeLeaf', node, options.checkboxIcon, options.checkboxColor, index, parentId)));
-  }
-  htmlcode(type, node, check_box, check_boxColor, index, parentId = undefined) {
-    if (node.isDragDropPlaceholder) {
-      return (h("div", { class: "inline-tree-item element" }, h("div", { class: 'drag-drop-placeholder-row' }, h("div", { class: 'placeholder-text' }, node.title))));
-    }
-    return (h("div", { class: "inline-tree-item element" }, node.draggable && (h("div", { class: "drag-handle-container" }, h("img", { src: this.dragIcon, alt: "drag", class: "drag-handle", draggable: node.draggable, onDragStart: event => {
-        if (node.draggable) {
-          this.handleDragStart(event, node, index, parentId);
-        }
-      }, onDragEnd: () => {
-        if (node.draggable) {
-          this.handleDragEnd();
-        }
-      } }))), node.hasCheckbox && (h("tttx-button_1_9_101", { design: "borderless-circle", notext: true, icon: check_box, iconcolor: check_boxColor, class: "padding-icon checkbox", onClick: event => this.handleCheckboxChange(node, event) })), !node.html && node.hasIcon && (h("tttx-icon_1_9_101", { icon: node.icon, color: node.iconColor, class: "padding-icon" })), !node.html && h("div", { class: type }, node.title), node.html && h("div", { class: type, innerHTML: DOMPurify.sanitize(node.html, domSanitiserOptions) })));
-  }
-  render() {
-    if (!this.data)
-      return;
-    return (h("div", { ref: (element) => this.rootElement = element, class: "tree-view-element" }, h("ul", null, this.treeData.map((node, index) => this.renderNode(node, index)))));
-  }
-  static get is() { return "tttx-tree-view_1_9_101"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tttx-tree-view.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tttx-tree-view.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "data": {
-        "type": "unknown",
-        "mutable": true,
-        "complexType": {
-          "original": "TreeViewItem[]",
-          "resolved": "TreeViewItem[]",
-          "references": {
-            "TreeViewItem": {
-              "location": "import",
-              "path": "./helper/helper"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        }
-      }
-    };
-  }
-  static get states() {
-    return {
-      "treeData": {},
-      "nodesRecentlyMoved": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "clickEvent",
-        "name": "clickEvent",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "TreeViewItem",
-          "resolved": "TreeViewItem",
-          "references": {
-            "TreeViewItem": {
-              "location": "import",
-              "path": "./helper/helper"
-            }
-          }
-        }
-      }, {
-        "method": "expandNode",
-        "name": "expandNode",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "ExpandNodeEvent",
-          "resolved": "ExpandNodeEvent",
-          "references": {
-            "ExpandNodeEvent": {
-              "location": "import",
-              "path": "./helper/helper"
-            }
-          }
-        }
-      }, {
-        "method": "checkboxChange",
-        "name": "checkboxChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "TreeViewItem[]",
-          "resolved": "TreeViewItem[]",
-          "references": {
-            "TreeViewItem": {
-              "location": "import",
-              "path": "./helper/helper"
-            }
-          }
-        }
-      }, {
-        "method": "moveNode",
-        "name": "moveNode",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "TreeViewItem[]",
-          "resolved": "TreeViewItem[]",
-          "references": {
-            "TreeViewItem": {
-              "location": "import",
-              "path": "./helper/helper"
-            }
-          }
-        }
-      }];
-  }
-  static get elementRef() { return "el"; }
-}
+                `, style: leafStyle, onClick: event => {
+        if (node.hasHover) {
+          this.onClickHandler(event, node);
+        }
+      } }), this.htmlcode('treeLeaf', node, options.checkboxIcon, options.checkboxColor, index, parentId)));
+  }
+  htmlcode(type, node, check_box, check_boxColor, index, parentId = undefined) {
+    if (node.isDragDropPlaceholder) {
+      return (h("div", { class: "inline-tree-item element" }, h("div", { class: 'drag-drop-placeholder-row' }, h("div", { class: 'placeholder-text' }, node.title))));
+    }
+    return (h("div", { class: "inline-tree-item element" }, node.draggable && (h("div", { class: "drag-handle-container" }, h("img", { src: this.dragIcon, alt: "drag", class: "drag-handle", draggable: node.draggable, onDragStart: event => {
+        if (node.draggable) {
+          this.handleDragStart(event, node, index, parentId);
+        }
+      }, onDragEnd: () => {
+        if (node.draggable) {
+          this.handleDragEnd();
+        }
+      } }))), node.hasCheckbox && (h("tttx-button_1_9_103", { design: "borderless-circle", notext: true, icon: check_box, iconcolor: check_boxColor, class: "padding-icon checkbox", onClick: event => this.handleCheckboxChange(node, event) })), !node.html && node.hasIcon && (h("tttx-icon_1_9_103", { icon: node.icon, color: node.iconColor, class: "padding-icon" })), !node.html && h("div", { class: type }, node.title), node.html && h("div", { class: type, innerHTML: DOMPurify.sanitize(node.html, domSanitiserOptions) })));
+  }
+  render() {
+    if (!this.data)
+      return;
+    return (h("div", { ref: (element) => this.rootElement = element, class: "tree-view-element" }, h("ul", null, this.treeData.map((node, index) => this.renderNode(node, index)))));
+  }
+  static get is() { return "tttx-tree-view_1_9_103"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-tree-view.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-tree-view.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "data": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "TreeViewItem[]",
+          "resolved": "TreeViewItem[]",
+          "references": {
+            "TreeViewItem": {
+              "location": "import",
+              "path": "./helper/helper"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "treeData": {},
+      "nodesRecentlyMoved": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "clickEvent",
+        "name": "clickEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "TreeViewItem",
+          "resolved": "TreeViewItem",
+          "references": {
+            "TreeViewItem": {
+              "location": "import",
+              "path": "./helper/helper"
+            }
+          }
+        }
+      }, {
+        "method": "expandNode",
+        "name": "expandNode",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "ExpandNodeEvent",
+          "resolved": "ExpandNodeEvent",
+          "references": {
+            "ExpandNodeEvent": {
+              "location": "import",
+              "path": "./helper/helper"
+            }
+          }
+        }
+      }, {
+        "method": "checkboxChange",
+        "name": "checkboxChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "TreeViewItem[]",
+          "resolved": "TreeViewItem[]",
+          "references": {
+            "TreeViewItem": {
+              "location": "import",
+              "path": "./helper/helper"
+            }
+          }
+        }
+      }, {
+        "method": "moveNode",
+        "name": "moveNode",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "TreeViewItem[]",
+          "resolved": "TreeViewItem[]",
+          "references": {
+            "TreeViewItem": {
+              "location": "import",
+              "path": "./helper/helper"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}