@sme.up/ketchup 9.2.0 → 9.3.0

package/dist/collection/components/kup-tree/kup-tree.js

@@ -1,9 +1,9 @@
 var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-  if (kind === "a" && !f)
-    throw new TypeError("Private accessor was defined without a getter");
-  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-    throw new TypeError("Cannot read private member from an object whose class did not declare it");
-  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _KupTree_kupManager;
 import { forceUpdate, getAssetPath, h, Host, } from "@stencil/core";
@@ -29,2492 +29,2492 @@ import { FCell } from "../../f-components/f-cell/f-cell";
 import { KupDebugCategory } from "../../managers/kup-debug/kup-debug-declarations";
 import { FTextFieldMDC } from "../../f-components/f-text-field/f-text-field-mdc";
 export class KupTree {
-  constructor() {
+    constructor() {
+        /*-------------------------------------------------*/
+        /*                   S t a t e s                   */
+        /*-------------------------------------------------*/
+        this.state = new KupTreeState();
+        /*-------------------------------------------------*/
+        /*       I n t e r n a l   V a r i a b l e s       */
+        /*-------------------------------------------------*/
+        /**
+         * Instance of the KupManager class.
+         */
+        _KupTree_kupManager.set(this, kupManagerInstance());
+        /**
+         * Reference to the column menu card.
+         */
+        this.columnMenuCard = null;
+        this.clickTimeout = [];
+        this.sizedColumns = undefined;
+        this.filtersColumnMenuInstance = new FiltersColumnMenu();
+        this.filtersTreeItemsInstance = new FiltersTreeItems();
+        this.totalMenuCoords = null;
+        this.contentRefs = [];
+        this.oldWidth = null;
+        this.hold = false;
+        this.interactableTouch = [];
+        this.clickCb = null;
+        this.treeColumnVisible = true;
+        this.openedTotalMenu = null;
+        this.columnMenuAnchor = null;
+        this.stateSwitcher = false;
+        this.selectedNode = [];
+        this.asAccordion = false;
+        this.columns = undefined;
+        this.customStyle = '';
+        this.data = [];
+        this.density = FCellPadding.MEDIUM;
+        this.dynamicExpansionCallback = undefined;
+        this.editableData = false;
+        this.enableExtraColumns = true;
+        this.expanded = false;
+        this.expansionMode = KupTreeExpansionMode.DROPDOWN;
+        this.filters = {};
+        this.globalFilter = false;
+        this.globalFilterValue = '';
+        this.globalFilterMode = KupGlobalFilterMode.SIMPLE;
+        this.preventXScroll = false;
+        this.removableColumns = true;
+        this.ripple = true;
+        this.scrollOnHover = false;
+        this.showColumns = false;
+        this.showFilters = true;
+        this.showFooter = false;
+        this.showHeader = false;
+        this.showIcons = true;
+        this.stateId = '';
+        this.store = undefined;
+        this.useDynamicExpansion = false;
+        this.totals = undefined;
+    }
+    initWithPersistedState() {
+        if (this.store && this.stateId) {
+            const state = this.store.getState(this.stateId);
+            if (state != null) {
+                this.density = state.density;
+                this.showFilters = state.showFilters;
+                this.showFooter = state.showFooter;
+                this.globalFilter = state.globalFilter;
+                this.globalFilterValue = state.globalFilterValue;
+                this.filters = Object.assign({}, state.filters);
+                this.totals = Object.assign({}, state.totals);
+            }
+        }
+    }
+    persistState() {
+        if (this.store && this.stateId) {
+            let somethingChanged = false;
+            if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.filters, this.filters)) {
+                this.state.filters = Object.assign({}, this.filters);
+                somethingChanged = true;
+            }
+            if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.density, this.density)) {
+                this.state.density = this.density;
+                somethingChanged = true;
+            }
+            if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.showFilters, this.showFilters)) {
+                this.state.showFilters = this.showFilters;
+                somethingChanged = true;
+            }
+            if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.showFooter, this.showFooter)) {
+                this.state.showFooter = this.showFooter;
+                somethingChanged = true;
+            }
+            if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.totals, this.totals)) {
+                this.state.totals = Object.assign({}, this.totals);
+                somethingChanged = true;
+            }
+            if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.globalFilter, this.globalFilter)) {
+                this.state.globalFilter = this.globalFilter;
+                somethingChanged = true;
+            }
+            if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.globalFilterValue, this.globalFilterValue)) {
+                this.state.globalFilterValue = this.globalFilterValue;
+                somethingChanged = true;
+            }
+            if (!this.state.load) {
+                this.state.load = true;
+                return;
+            }
+            if (somethingChanged) {
+                this.store.persistState(this.stateId, this.state);
+            }
+        }
+    }
+    /**
+     * This method will get the selected nodes of the component.
+     */
+    async getSelectedNode() {
+        return this.selectedNode;
+    }
+    /**
+     * This method will set the selected rows of the component.
+     * @param {string|number[]} rowsIdentifiers - Array of ids (dataset) or indexes (rendered rows).
+     * @param {boolean} emitEvent - The event will always be emitted unless emitEvent is set to false.
+     */
+    async setSelectedNode(treeNodePath, emitEvent) {
+        this.selectedNode = treeNodePath
+            .split(',')
+            .map((treeNodeIndex) => parseInt(treeNodeIndex));
+        if (emitEvent !== false) {
+            this.kupTreeNodeSelected.emit({
+                comp: this,
+                id: this.rootElement.id,
+                treeNodePath: this.selectedNode,
+                treeNode: this.getTreeNode(this.selectedNode),
+                columnName: null,
+            });
+        }
+    }
     /*-------------------------------------------------*/
-    /*                   S t a t e s                   */
+    /*                  W a t c h e r s                */
     /*-------------------------------------------------*/
-    this.state = new KupTreeState();
+    enrichDataWhenChanged(newData, oldData) {
+        if (!newData) {
+            newData = [];
+        }
+        if (newData !== oldData) {
+            this.refreshStructureState();
+        }
+    }
+    enrichStructureStateWhenChanged(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.refreshStructureState();
+        }
+    }
     /*-------------------------------------------------*/
-    /*       I n t e r n a l   V a r i a b l e s       */
+    /*           P u b l i c   M e t h o d s           */
     /*-------------------------------------------------*/
     /**
-     * Instance of the KupManager class.
+     * True if there aren't visible nodes
      */
-    _KupTree_kupManager.set(this, kupManagerInstance());
+    async isEmpty() {
+        return this.visibleNodes == 0;
+    }
     /**
-     * Reference to the column menu card.
+     * Closes any opened column menu.
      */
-    this.columnMenuCard = null;
-    this.clickTimeout = [];
-    this.sizedColumns = undefined;
-    this.filtersColumnMenuInstance = new FiltersColumnMenu();
-    this.filtersTreeItemsInstance = new FiltersTreeItems();
-    this.totalMenuCoords = null;
-    this.contentRefs = [];
-    this.oldWidth = null;
-    this.hold = false;
-    this.interactableTouch = [];
-    this.clickCb = null;
-    this.treeColumnVisible = true;
-    this.openedTotalMenu = null;
-    this.columnMenuAnchor = null;
-    this.stateSwitcher = false;
-    this.selectedNode = [];
-    this.asAccordion = false;
-    this.columns = undefined;
-    this.customStyle = '';
-    this.data = [];
-    this.density = FCellPadding.MEDIUM;
-    this.dynamicExpansionCallback = undefined;
-    this.editableData = false;
-    this.enableExtraColumns = true;
-    this.expanded = false;
-    this.expansionMode = KupTreeExpansionMode.DROPDOWN;
-    this.filters = {};
-    this.globalFilter = false;
-    this.globalFilterValue = '';
-    this.globalFilterMode = KupGlobalFilterMode.SIMPLE;
-    this.preventXScroll = false;
-    this.removableColumns = true;
-    this.ripple = true;
-    this.scrollOnHover = false;
-    this.showColumns = false;
-    this.showFilters = true;
-    this.showFooter = false;
-    this.showHeader = false;
-    this.showIcons = true;
-    this.stateId = '';
-    this.store = undefined;
-    this.useDynamicExpansion = false;
-    this.totals = undefined;
-  }
-  initWithPersistedState() {
-    if (this.store && this.stateId) {
-      const state = this.store.getState(this.stateId);
-      if (state != null) {
-        this.density = state.density;
-        this.showFilters = state.showFilters;
-        this.showFooter = state.showFooter;
-        this.globalFilter = state.globalFilter;
-        this.globalFilterValue = state.globalFilterValue;
-        this.filters = Object.assign({}, state.filters);
-        this.totals = Object.assign({}, state.totals);
-      }
-    }
-  }
-  persistState() {
-    if (this.store && this.stateId) {
-      let somethingChanged = false;
-      if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.filters, this.filters)) {
-        this.state.filters = Object.assign({}, this.filters);
-        somethingChanged = true;
-      }
-      if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.density, this.density)) {
-        this.state.density = this.density;
-        somethingChanged = true;
-      }
-      if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.showFilters, this.showFilters)) {
-        this.state.showFilters = this.showFilters;
-        somethingChanged = true;
-      }
-      if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.showFooter, this.showFooter)) {
-        this.state.showFooter = this.showFooter;
-        somethingChanged = true;
-      }
-      if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.totals, this.totals)) {
-        this.state.totals = Object.assign({}, this.totals);
-        somethingChanged = true;
-      }
-      if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.globalFilter, this.globalFilter)) {
-        this.state.globalFilter = this.globalFilter;
-        somethingChanged = true;
-      }
-      if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.globalFilterValue, this.globalFilterValue)) {
-        this.state.globalFilterValue = this.globalFilterValue;
-        somethingChanged = true;
-      }
-      if (!this.state.load) {
-        this.state.load = true;
-        return;
-      }
-      if (somethingChanged) {
-        this.store.persistState(this.stateId, this.state);
-      }
-    }
-  }
-  /**
-   * This method will get the selected nodes of the component.
-   */
-  async getSelectedNode() {
-    return this.selectedNode;
-  }
-  /**
-   * This method will set the selected rows of the component.
-   * @param {string|number[]} rowsIdentifiers - Array of ids (dataset) or indexes (rendered rows).
-   * @param {boolean} emitEvent - The event will always be emitted unless emitEvent is set to false.
-   */
-  async setSelectedNode(treeNodePath, emitEvent) {
-    this.selectedNode = treeNodePath
-      .split(',')
-      .map((treeNodeIndex) => parseInt(treeNodeIndex));
-    if (emitEvent !== false) {
-      this.kupTreeNodeSelected.emit({
-        comp: this,
-        id: this.rootElement.id,
-        treeNodePath: this.selectedNode,
-        treeNode: this.getTreeNode(this.selectedNode),
-        columnName: null,
-      });
-    }
-  }
-  /*-------------------------------------------------*/
-  /*                  W a t c h e r s                */
-  /*-------------------------------------------------*/
-  enrichDataWhenChanged(newData, oldData) {
-    if (!newData) {
-      newData = [];
-    }
-    if (newData !== oldData) {
-      this.refreshStructureState();
-    }
-  }
-  enrichStructureStateWhenChanged(newValue, oldValue) {
-    if (newValue !== oldValue) {
-      this.refreshStructureState();
-    }
-  }
-  /*-------------------------------------------------*/
-  /*           P u b l i c   M e t h o d s           */
-  /*-------------------------------------------------*/
-  /**
-   * True if there aren't visible nodes
-   */
-  async isEmpty() {
-    return this.visibleNodes == 0;
-  }
-  /**
-   * Closes any opened column menu.
-   */
-  async closeColumnMenu() {
-    this.columnMenuAnchor = null;
-    if (this.columnMenuCard) {
-      this.columnMenuCard.data = null;
-    }
-    this.columnMenuInstance.close(this.columnMenuCard);
-    this.kupTreeColumnMenu.emit({
-      comp: this,
-      id: this.rootElement.id,
-      card: this.columnMenuCard,
-      event: null,
-      open: false,
-    });
-  }
-  /**
-   * Collapses all nodes.
-   */
-  async collapseAll() {
-    if (!this.useDynamicExpansion) {
-      for (let index = 0; index < this.data.length; index++) {
-        this.data[index].isExpanded = false;
-        this.handleChildren(this.data[index], false);
-      }
-    }
-    else {
-      this.kupTreeDynamicMassExpansion.emit({
-        comp: this,
-        id: this.rootElement.id,
-        expandAll: false,
-      });
-    }
-    this.refresh();
-  }
-  /**
-   * Expands all nodes.
-   */
-  async expandAll() {
-    if (!this.useDynamicExpansion) {
-      for (let index = 0; index < this.data.length; index++) {
-        this.data[index].isExpanded = true;
-        this.handleChildren(this.data[index], true);
-      }
-    }
-    else {
-      this.kupTreeDynamicMassExpansion.emit({
-        comp: this,
-        id: this.rootElement.id,
-        expandAll: true,
-      });
-    }
-    this.refresh();
-  }
-  /**
-   * Used to retrieve component's props values.
-   * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
-   * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
-   */
-  async getProps(descriptions) {
-    return getProps(this, KupTreeProps, descriptions);
-  }
-  /**
-   * Hides the given column.
-   * @param {KupDataColumn} column - Column to hide.
-   */
-  async hideColumn(column) {
-    __classPrivateFieldGet(this, _KupTree_kupManager, "f").data.column.hide(this.columns, [column.name]);
-    this.kupColumnRemove.emit({
-      comp: this,
-      id: this.rootElement.id,
-      column: column,
-    });
-    this.refresh();
-  }
-  /**
-   * Opens the column menu of the given column.
-   * @param {string} column - Name of the column.
-   */
-  async openColumnMenu(column) {
-    this.columnMenuAnchor = column;
-    if (!this.columnMenuCard) {
-      this.columnMenuCard = document.createElement('kup-card');
-      this.columnMenuCard.isMenu = true;
-      this.columnMenuCard.layoutNumber = 12;
-      this.columnMenuCard.sizeX = 'auto';
-      this.columnMenuCard.sizeY = 'auto';
-      this.columnMenuCard.addEventListener('kup-card-click', (e) => {
-        this.kupTreeColumnMenu.emit({
-          comp: this,
-          id: this.rootElement.id,
-          card: this.columnMenuCard,
-          event: e,
-          open: this.columnMenuCard.menuVisible,
-        });
-      });
-      this.columnMenuCard.addEventListener('kup-card-event', (e) => {
-        this.columnMenuInstance.eventHandlers(e, this);
+    async closeColumnMenu() {
+        this.columnMenuAnchor = null;
+        if (this.columnMenuCard) {
+            this.columnMenuCard.data = null;
+        }
+        this.columnMenuInstance.close(this.columnMenuCard);
         this.kupTreeColumnMenu.emit({
-          comp: this,
-          id: this.rootElement.id,
-          card: this.columnMenuCard,
-          event: e,
-          open: this.columnMenuCard.menuVisible,
-        });
-      });
-    }
-    this.columnMenuCard.setAttribute('data-column', column);
-    this.columnMenuCard.data = this.columnMenuInstance.prepData(this, getColumnByName(this.getVisibleColumns(), column));
-    this.columnMenuInstance.open(this, column);
-    this.columnMenuInstance.reposition(this, this.columnMenuCard);
-    this.kupTreeColumnMenu.emit({
-      comp: this,
-      id: this.rootElement.id,
-      card: this.columnMenuCard,
-      event: null,
-      open: true,
-    });
-  }
-  /**
-   * This method is used to trigger a new render of the component.
-   */
-  async refresh() {
-    forceUpdate(this);
-  }
-  /**
-   * This method is invoked by KupManager whenever the component changes size.
-   */
-  async resizeCallback() {
-    if (this.rootElement.clientWidth !== this.oldWidth) {
-      window.clearTimeout(this.resizeTimeout);
-      this.resizeTimeout = window.setTimeout(() => this.refresh(), 300);
-    }
-  }
-  /**
-   * Sets the props to the component.
-   * @param {GenericObject} props - Object containing props that will be set to the component.
-   */
-  async setProps(props) {
-    setProps(this, KupTreeProps, props);
-  }
-  /*-------------------------------------------------*/
-  /*           P r i v a t e   M e t h o d s         */
-  /*-------------------------------------------------*/
-  setTreeColumnVisibility(value) {
-    this.treeColumnVisible = value;
-  }
-  isTreeColumnVisible() {
-    return this.treeColumnVisible;
-  }
-  checkScrollOnHover() {
-    if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").scrollOnHover.isRegistered(this.treeWrapperRef)) {
-      if (this.scrollOnHover) {
-        __classPrivateFieldGet(this, _KupTree_kupManager, "f").scrollOnHover.register(this.treeWrapperRef);
-      }
-    }
-    else {
-      if (!this.scrollOnHover) {
-        __classPrivateFieldGet(this, _KupTree_kupManager, "f").scrollOnHover.unregister(this.treeWrapperRef);
-      }
-    }
-  }
-  onKupTreeNodeDblClick(treeNodeData, treeNodePath) {
-    for (let index = 0; index < this.clickTimeout.length; index++) {
-      clearTimeout(this.clickTimeout[index]);
-      __classPrivateFieldGet(this, _KupTree_kupManager, "f").debug.logMessage(this, 'Cleared hdlTreeNodeClick timeout(' +
-        this.clickTimeout[index] +
-        ').');
-    }
-    this.clickTimeout = [];
-    this.kupTreeNodeDblClick.emit({
-      comp: this,
-      id: this.rootElement.id,
-      treeNodePath: treeNodePath
-        .split(',')
-        .map((treeNodeIndex) => parseInt(treeNodeIndex)),
-      treeNode: treeNodeData,
-    });
-  }
-  nodesToRows() {
-    function children(TreeNode) {
-      for (let index = 0; index < TreeNode.children.length; index++) {
-        const node = TreeNode.children[index];
-        rows.push({
-          cells: TreeNode.children[index].cells,
+            comp: this,
+            id: this.rootElement.id,
+            card: this.columnMenuCard,
+            event: null,
+            open: false,
         });
-        if (node.children) {
-          children(node);
-        }
-      }
-    }
-    let rows = [];
-    for (let index = 0; index < this.data.length; index++) {
-      const node = this.data[index];
-      rows.push({
-        cells: this.data[index].cells,
-      });
-      if (node.children) {
-        children(this.data[index]);
-      }
-    }
-    return rows;
-  }
-  setDynPosElements() {
-    // Column menu
-    if (this.columnMenuCard && this.columnMenuCard.data) {
-      this.columnMenuCard.data = this.columnMenuInstance.prepData(this, getColumnByName(this.getVisibleColumns(), this.columnMenuAnchor), this.columnMenuCard.data);
-    }
-  }
-  expandCollapseNode(treeNode, expandNode = false) {
-    this.filtersTreeItemsInstance.expandCollapseNode(treeNode, expandNode);
-  }
-  expandCollapseAllNodes(treeNode, expandNode = false) {
-    this.filtersTreeItemsInstance.expandCollapseAllNodes(treeNode, expandNode);
-  }
-  getColumns() {
-    return this.columns ? this.columns : [{ title: '', name: '' }];
-  }
-  getSizedColumns() {
-    let columns = this.getColumns();
-    let sizedColumns = [];
-    for (let j = 0; j < columns.length; j++) {
-      if (columns[j].size !== null &&
-        columns[j].size !== undefined &&
-        columns[j].size !== '') {
-        sizedColumns.push(columns[j]);
-      }
-    }
-    if (sizedColumns.length > 0) {
-      return sizedColumns;
-    }
-    else {
-      return undefined;
-    }
-  }
-  getVisibleColumns() {
-    return this.getColumns().filter((column) => column.hasOwnProperty('visible') ? column.visible : true);
-  }
-  getHeadingColumns() {
-    const firstColum = {
-      name: treeMainColumnName,
-      title: '',
-    };
-    const visibleColumns = this.getVisibleColumns();
-    return [firstColum, ...visibleColumns];
-  }
-  /*
-   *For launch the event when selected node
-   */
-  launchNodeEvent(treeNodePath, treeNode) {
-    if (treeNodePath && treeNodePath.length > 0) {
-      if (treeNodePath[0] != -1) {
-        var tn = treeNode.children[treeNodePath[0]];
-        if (!tn) {
-          tn = treeNode;
-        }
-        if (treeNodePath.length > 1) {
-          treeNodePath = treeNodePath.slice(1);
-          this.launchNodeEvent(treeNodePath, tn);
+    }
+    /**
+     * Collapses all nodes.
+     */
+    async collapseAll() {
+        if (!this.useDynamicExpansion) {
+            for (let index = 0; index < this.data.length; index++) {
+                this.data[index].isExpanded = false;
+                this.handleChildren(this.data[index], false);
+            }
         }
         else {
-          this.hdlTreeNodeClick(null, tn, this.selectedNodeToString(this.selectedNode));
-        }
-      }
-    }
-  }
-  openTotalMenu(column) {
-    this.openedTotalMenu = column.name;
-  }
-  onTotalMenuOpen(column) {
-    this.closeTotalMenu();
-    this.openTotalMenu(column);
-  }
-  getEventDetails(path, e) {
-    let isHeader, isBody, isFooter, td, th, tr, filterRemove;
-    if (path) {
-      for (let i = path.length - 1; i >= 0; i--) {
-        let p = path[i];
-        if (!p.tagName) {
-          continue;
-        }
-        switch (p.tagName.toUpperCase()) {
-          case 'THEAD': {
-            isHeader = true;
-            break;
-          }
-          case 'TBODY': {
-            isBody = true;
-            break;
-          }
-          case 'TFOOT': {
-            isFooter = true;
-            break;
-          }
-          case 'TD': {
-            td = p;
-            break;
-          }
-          case 'TH': {
-            th = p;
-            break;
-          }
-          case 'TR': {
-            tr = p;
-            break;
-          }
-          default: {
-            if (p.classList.contains(KupThemeIconValues.FILTER_REMOVE.replace('--', ''))) {
-              filterRemove = p;
-            }
-            break;
-          }
-        }
-      }
-    }
-    let cell = null, column = null, row = null;
-    if (isBody) {
-      if (td) {
-        cell = td['data-cell'];
-      }
-      if (tr) {
-        row = tr['data-row'];
-      }
-    }
-    if (isHeader || isBody || isFooter) {
-      const columnName = td
-        ? td.dataset.column
-        : th
-          ? th.dataset.column
-          : null;
-      if (columnName) {
-        column = getColumnByName(this.getColumns(), columnName);
-      }
-    }
-    return {
-      area: isHeader
-        ? 'header'
-        : isBody
-          ? 'body'
-          : isFooter
-            ? 'footer'
-            : null,
-      cell: cell ? cell : null,
-      column: column ? column : null,
-      filterRemove: filterRemove ? filterRemove : null,
-      originalEvent: e,
-      row: row ? row : null,
-      td: td ? td : null,
-      th: th ? th : null,
-      tr: tr ? tr : null,
-    };
-  }
-  contextMenuHandler(e) {
-    e.preventDefault();
-    const details = this.getEventDetails(__classPrivateFieldGet(this, _KupTree_kupManager, "f").getEventPath(e.target, this.rootElement), e);
-    if (details.area === 'header') {
-      if (details.th && details.column) {
-        this.openColumnMenu(details.column.name);
-        return details;
-      }
-    }
-    else if (details.area === 'footer') {
-      if (details.td && details.column) {
-        this.totalMenuCoords = { x: e.clientX, y: e.clientY };
-        this.onTotalMenuOpen(details.column);
-        return details;
-      }
-    }
-    return details;
-  }
-  // When a TreeNode can be selected
-  hdlTreeNodeClick(e, treeNodeData, treeNodePath) {
-    if (this.expansionMode.toLowerCase() ===
-      KupTreeExpansionMode.DROPDOWN ||
-      (this.expansionMode.toLowerCase() === KupTreeExpansionMode.NODE &&
-        !treeNodeData.expandable)) {
-      const td = e
-        ? __classPrivateFieldGet(this, _KupTree_kupManager, "f")
-          .getEventPath(e.target, this.rootElement)
-          .find((el) => {
-          if (el.tagName === 'TD')
-            return el;
-        })
-        : null;
-      // If this TreeNode is not disabled, then it can be selected and an event is emitted
-      if (treeNodeData && !treeNodeData.disabled) {
-        this.selectedNode = treeNodePath
-          .split(',')
-          .map((treeNodeIndex) => parseInt(treeNodeIndex));
-        this.kupTreeNodeSelected.emit({
-          comp: this,
-          id: this.rootElement.id,
-          treeNodePath: this.selectedNode,
-          treeNode: treeNodeData,
-          columnName: td ? td.dataset.column : null,
-        });
-      }
-    }
-    // If KupTreeExpansionMode.NODE then click is a collapse/expand click
-    if (this.expansionMode.toLowerCase() === KupTreeExpansionMode.NODE) {
-      this.hdlTreeNodeExpanderClick(treeNodeData, treeNodePath, e ? e.ctrlKey : false);
-    }
-  }
-  // When a TreeNode must be expanded or closed.
-  hdlTreeNodeExpanderClick(treeNodeData, treeNodePath, ctrlKey) {
-    // If the node is expandable
-    if (treeNodeData.expandable) {
-      // Always composes the tree node path as an array
-      const arrayTreeNodePath = treeNodePath
-        .split(',')
-        .map((index) => parseInt(index));
-      // There are already children set in this TreeNode -> expand or collapse node and emit appropriate event
-      if (treeNodeData.children && treeNodeData.children.length) {
-        // Updates expanded state and force rerender
-        treeNodeData.isExpanded = !treeNodeData.isExpanded;
-        if (ctrlKey) {
-          this.handleChildren(treeNodeData, treeNodeData.isExpanded);
+            this.kupTreeDynamicMassExpansion.emit({
+                comp: this,
+                id: this.rootElement.id,
+                expandAll: false,
+            });
         }
         this.refresh();
-        if (treeNodeData.isExpanded) {
-          // TreeNode is now expanded -> Fires expanded event
-          this.kupTreeNodeExpand.emit({
-            comp: this,
-            id: this.rootElement.id,
-            treeNodePath: arrayTreeNodePath,
-            treeNode: treeNodeData,
-            usesDynamicExpansion: this.useDynamicExpansion,
-          });
+    }
+    /**
+     * Expands all nodes.
+     */
+    async expandAll() {
+        if (!this.useDynamicExpansion) {
+            for (let index = 0; index < this.data.length; index++) {
+                this.data[index].isExpanded = true;
+                this.handleChildren(this.data[index], true);
+            }
         }
         else {
-          // TreeNode is now collapsed -> Fires collapsed event
-          this.kupTreeNodeCollapse.emit({
-            comp: this,
-            id: this.rootElement.id,
-            treeNodePath: arrayTreeNodePath,
-            treeNode: treeNodeData,
-          });
+            this.kupTreeDynamicMassExpansion.emit({
+                comp: this,
+                id: this.rootElement.id,
+                expandAll: true,
+            });
         }
-      }
-      else if (this.useDynamicExpansion) {
-        if (ctrlKey) {
-          this.kupTreeDynamicMassExpansion.emit({
+        this.refresh();
+    }
+    /**
+     * Used to retrieve component's props values.
+     * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
+     * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
+     */
+    async getProps(descriptions) {
+        return getProps(this, KupTreeProps, descriptions);
+    }
+    /**
+     * Hides the given column.
+     * @param {KupDataColumn} column - Column to hide.
+     */
+    async hideColumn(column) {
+        __classPrivateFieldGet(this, _KupTree_kupManager, "f").data.column.hide(this.columns, [column.name]);
+        this.kupColumnRemove.emit({
             comp: this,
             id: this.rootElement.id,
-            treeNodePath: arrayTreeNodePath,
-            treeNode: treeNodeData,
-          });
-        }
-        // When the component must use the dynamic expansion feature
-        // Currently it does not support the expanded prop
-        // Checks if we have a dynamicExpansionCallback or not
-        if (this.dynamicExpansionCallback) {
-          // We have a callback: invokes it and after the result is returned updates the tree
-          this.dynamicExpansionCallback(treeNodeData, arrayTreeNodePath)
-            .then((childrenTreeNodes) => {
-            // Children returned successfully
-            treeNodeData.children = childrenTreeNodes;
-            treeNodeData.isExpanded = !treeNodeData.isExpanded;
-            this.refresh();
-            // TreeNode is now expanded -> Fires expanded event
-            this.kupTreeNodeExpand.emit({
-              comp: this,
-              id: this.rootElement.id,
-              treeNodePath: arrayTreeNodePath,
-              treeNode: treeNodeData,
-              usesDynamicExpansion: true,
+            column: column,
+        });
+        this.refresh();
+    }
+    /**
+     * Opens the column menu of the given column.
+     * @param {string} column - Name of the column.
+     */
+    async openColumnMenu(column) {
+        this.columnMenuAnchor = column;
+        if (!this.columnMenuCard) {
+            this.columnMenuCard = document.createElement('kup-card');
+            this.columnMenuCard.isMenu = true;
+            this.columnMenuCard.layoutNumber = 12;
+            this.columnMenuCard.sizeX = 'auto';
+            this.columnMenuCard.sizeY = 'auto';
+            this.columnMenuCard.addEventListener('kup-card-click', (e) => {
+                this.kupTreeColumnMenu.emit({
+                    comp: this,
+                    id: this.rootElement.id,
+                    card: this.columnMenuCard,
+                    event: e,
+                    open: this.columnMenuCard.menuVisible,
+                });
+            });
+            this.columnMenuCard.addEventListener('kup-card-event', (e) => {
+                this.columnMenuInstance.eventHandlers(e, this);
+                this.kupTreeColumnMenu.emit({
+                    comp: this,
+                    id: this.rootElement.id,
+                    card: this.columnMenuCard,
+                    event: e,
+                    open: this.columnMenuCard.menuVisible,
+                });
             });
-          })
-            .catch((err) => {
-            console.error('KupTree: An error occurred when trying to fetch dynamicExpansion nodes data', err, treeNodeData);
-          });
         }
-        else {
-          // we do NOT have a callback set.
-          // Fires the expand request for the given TreeNode and set the appropriate flag
-          this.kupTreeNodeExpand.emit({
+        this.columnMenuCard.setAttribute('data-column', column);
+        this.columnMenuCard.data = this.columnMenuInstance.prepData(this, getColumnByName(this.getVisibleColumns(), column));
+        this.columnMenuInstance.open(this, column);
+        this.columnMenuInstance.reposition(this, this.columnMenuCard);
+        this.kupTreeColumnMenu.emit({
             comp: this,
             id: this.rootElement.id,
-            treeNode: treeNodeData,
-            treeNodePath: arrayTreeNodePath,
-            usesDynamicExpansion: true,
-            dynamicExpansionRequireChildren: true,
-          });
-          treeNodeData.isExpanded = !treeNodeData.isExpanded;
-        }
-      }
-    }
-  }
-  hasTotals() {
-    return this.totals && Object.keys(this.totals).length > 0;
-  }
-  handleChildren(treeNode, expand) {
-    for (let index = 0; index < treeNode.children.length; index++) {
-      let node = treeNode.children[index];
-      if (!node.disabled) {
-        node.isExpanded = expand;
-        if (node.children) {
-          this.handleChildren(node, expand);
-        }
-      }
-    }
-  }
-  /**
-   * Given a nodePath, transform that array into
-   * @param nodePath
-   */
-  selectedNodeToString(nodePath) {
-    let strToRet = '';
-    if (nodePath && nodePath.length) {
-      strToRet = nodePath[0].toString();
-      for (let i = 1; i < nodePath.length; i++) {
-        strToRet += `,${nodePath[i]}`;
-      }
-    }
-    return strToRet;
-  }
-  getFilterValueForTooltip(column) {
-    return this.filtersColumnMenuInstance.getFilterValueForTooltip(this.filters, column);
-  }
-  getTreeNode(nodePath) {
-    if (!nodePath || nodePath.length == 0) {
-      return null;
-    }
-    let father = this.data;
-    let node = null;
-    for (let index = 0; index < nodePath.length; index++) {
-      if (node) {
-        father = node.children;
-      }
-      const nodeIndex = nodePath[index];
-      node = father[nodeIndex];
-    }
-    return node;
-  }
-  onRemoveFilter(column) {
-    const newFilters = Object.assign({}, this.filters);
-    this.filtersColumnMenuInstance.removeFilter(newFilters, column.name);
-    this.filters = newFilters;
-  }
-  onGlobalFilterChange({ detail }) {
-    let value = '';
-    if (detail && detail.value) {
-      value = detail.value;
-    }
-    this.globalFilterValue = value;
-  }
-  getColumnValues(column) {
-    return this.filtersTreeItemsInstance.getColumnValues(this, column, this.globalFilterValue, this.filtersColumnMenuInstance);
-  }
-  getRows() {
-    return this.data ? this.data : [];
-  }
-  filterNodes() {
-    let items = this.filtersTreeItemsInstance.filterRows(this.getRows(), this.filters, this.globalFilterValue, this.getColumns(), this.filtersColumnMenuInstance);
-    this.visibleNodes = this.calculateVisibleNodes(items);
-  }
-  calculateVisibleNodes(items) {
-    let count = 0;
-    if (items) {
-      items.forEach((element) => {
-        if (element.visible) {
-          count++;
-        }
-        count += this.calculateVisibleNodes(element.children);
-      });
-    }
-    return count;
-  }
-  refreshStructureState() {
-    if (this.data) {
-      if (this.data.columns) {
-        __classPrivateFieldGet(this, _KupTree_kupManager, "f").debug.logMessage(this, 'Detected KupDataDataset: setting up tree as grid.', KupDebugCategory.WARNING);
-        const data = this.data;
-        this.columns = data.columns;
-        this.data = __classPrivateFieldGet(this, _KupTree_kupManager, "f").data.row.toNode(data);
-        this.showColumns = true;
-        this.showHeader = true;
-      }
-      // When the nodes must be expanded upon loading and the tree is not using a dynamicExpansion (and the current TreeNode is not disabled)
-      // the default value of the treeExpandedPropName is set to true
-      this.data.forEach((rootNode) => {
-        this.expandCollapseAllNodes(rootNode, this.expanded && !this.useDynamicExpansion);
-      });
-      this.selectedNode = [];
-    }
-  }
-  createIconElement(CSSClass, icon, iconColor) {
-    if (icon.indexOf('.') > -1 ||
-      icon.indexOf('/') > -1 ||
-      icon.indexOf('\\') > -1) {
-      CSSClass += ' is-image';
-      return (h("span", { class: CSSClass }, h("img", { src: icon })));
-    }
-    else {
-      let svg = `url('${getAssetPath(`./assets/svg/${icon}.svg`)}') no-repeat center`;
-      CSSClass += ' kup-icon';
-      let iconStyle = Object.assign(Object.assign({}, (iconColor ? { background: iconColor } : {})), { mask: svg, webkitMask: svg });
-      return h("span", { style: iconStyle, class: CSSClass });
-    }
-  }
-  getCellStyle(colName, cellStyle) {
-    // Controls if there are columns with a specified width
-    if (this.sizedColumns) {
-      let colWidth = '';
-      // Search if this column has a specified width
-      for (let j = 0; j < this.sizedColumns.length; j++) {
-        if (colName === this.sizedColumns[j].name) {
-          colWidth = this.sizedColumns[j].size;
-          break;
-        }
-      }
-      // Specific width has been found
-      if (colWidth) {
-        if (!cellStyle) {
-          cellStyle = {};
-        }
-        // Sets the width.
-        cellStyle['max-width'] = colWidth;
-        cellStyle['min-width'] = colWidth;
-        cellStyle['width'] = colWidth;
-        cellStyle['overflow'] = 'hidden';
-      }
-    }
-    return cellStyle;
-  }
-  /**
-   * Renders the header of the tree when it must be displayed as a table.
-   * @returns An array of table header cells.
-   */
-  renderHeader() {
-    return this.getHeadingColumns().map((column) => {
-      if (!this.isTreeColumnVisible() &&
-        column.name === treeMainColumnName)
-        return;
-      //---- Filter ----
-      let filter = null;
-      if (this.filtersColumnMenuInstance.hasFiltersForColumn(this.filters, column)) {
-        const svgLabel = __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageGeneric.REMOVE_FILTERS) + `: '${this.getFilterValueForTooltip(column)}'`;
-        /**
-         * When column has a filter but filters must not be displayed, shows an icon to remove the filter.
-         * Upon click, the filter gets removed.
-         */
-        filter = (h("span", { title: svgLabel, class: `kup-icon ${KupThemeIconValues.FILTER_REMOVE.replace('--', '')}`, onClick: (e) => {
-            e.stopPropagation();
-            this.onRemoveFilter(column);
-          } }));
-      }
-      return (h("th", { "data-column": column.name, style: this.getCellStyle(column.name, null) }, h("span", { class: "column-title" }, column.title), filter));
-    });
-  }
-  /**
-   * Renders a content with a part highlighted.
-   * NOTE: same in kup-accordion and in kup-tree
-   */
-  renderHighlightedContent(content, highlight, styleClass) {
-    let contentSlices = [];
-    if (highlight && content) {
-      let contentPart = content;
-      let end = contentPart
-        .toLowerCase()
-        .indexOf(highlight.toLowerCase());
-      while (end > -1) {
-        contentSlices.push(contentPart.substring(0, end));
-        contentSlices.push(h("span", { class: styleClass + '--highlighted' }, contentPart.substring(end, end + highlight.length)));
-        contentPart = contentPart.substring(end + highlight.length, contentPart.length);
-        end = contentPart
-          .toLowerCase()
-          .indexOf(highlight.toLowerCase());
-      }
-      if (end < contentPart.length) {
-        contentSlices.push(contentPart.substring(end, contentPart.length));
-      }
-    }
-    else {
-      contentSlices.push(content);
-    }
-    return (h("span", { class: styleClass, ref: (el) => this.contentRefs.push(el), title: this.preventXScroll ? content : null }, contentSlices));
-  }
-  /**
-   * Given a KupTreeNode, reads through its data then composes and returns its JSX object.
-   * @param treeNodeData - The KupTreeNode object to parse.
-   * @param treeNodePath - A string containing the comma(,) separated indexes of the KupTreeNodes to use,
-   *    sorted from left to right, to access the current KupTreeNode starting from the data prop children object.
-   * @param treeNodeDepth - An integer to keep track of the depth level of the current KupTreeNode. Used for indentation.
-   * @returns The the JSX created from the current tree node.
-   */
-  renderTreeNode(treeNodeData, treeNodePath, treeNodeDepth = 0) {
-    // Creates the indentation of the current element. Use a css variable to specify padding.
-    let indent = treeNodeDepth ? (h("span", { class: "kup-tree__indent", style: {
-        ['--kup_tree_node_depth']: this.asAccordion
-          ? (treeNodeDepth - 1).toString()
-          : treeNodeDepth.toString(),
-      } })) : null;
-    // If the tree node is expandable, adds the icon to show the expansion.
-    // If expandable, also add the callback on the click action.
-    // If it is not expandable, we simply add a placeholder with no icons.
-    const hasExpandIcon = !!(treeNodeData.expandable &&
-      ((treeNodeData.children && treeNodeData.children.length) ||
-        this.useDynamicExpansion));
-    let expandClass = 'expand-icon kup-tree__icon kup-tree__node__expander';
-    if (hasExpandIcon) {
-      expandClass += ' kup-icon';
-      if (this.asAccordion && treeNodeDepth === 0) {
-        expandClass += ` ${KupThemeIconValues.DROPDOWN.replace('--', '')}`;
-      }
-      else if (treeNodeData.isExpanded) {
-        expandClass += ` ${KupThemeIconValues.EXPANDED.replace('--', '')}`;
-      }
-      else {
-        expandClass += ` ${KupThemeIconValues.COLLAPSED.replace('--', '')}`;
-      }
-    }
-    let treeExpandIcon = (h("span", { title: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageGeneric.EXPAND) +
-        '/' +
-        __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageGeneric.COLLAPSE) +
-        ' (CTRL + Click)', class: expandClass, onClick: this.expansionMode.toLowerCase() ===
-        KupTreeExpansionMode.DROPDOWN && !treeNodeData.disabled
-        ? (event) => {
-          event.stopPropagation();
-          this.hdlTreeNodeExpanderClick(treeNodeData, treeNodePath, event.ctrlKey);
-        }
-        : null }));
-    // When TreeNode icons are visible, creates the icon if one is specified
-    let treeNodeIcon = null;
-    if (this.showIcons) {
-      if (treeNodeData.icon) {
-        if (treeNodeData.icon === '') {
-          treeNodeIcon = h("span", { class: "kup-tree__icon" });
+            card: this.columnMenuCard,
+            event: null,
+            open: true,
+        });
+    }
+    /**
+     * This method is used to trigger a new render of the component.
+     */
+    async refresh() {
+        forceUpdate(this);
+    }
+    /**
+     * This method is invoked by KupManager whenever the component changes size.
+     */
+    async resizeCallback() {
+        if (this.rootElement.clientWidth !== this.oldWidth) {
+            window.clearTimeout(this.resizeTimeout);
+            this.resizeTimeout = window.setTimeout(() => this.refresh(), 300);
         }
-        else {
-          treeNodeIcon = this.createIconElement('kup-tree__icon', treeNodeData.icon, treeNodeData.iconColor);
-        }
-      }
-      else {
-        treeNodeIcon = null;
-      }
-    }
-    // Composes additional options for the tree node element
-    let treeNodeOptions = {};
-    if (treeNodeData.hasOwnProperty('isExpanded') &&
-      treeNodeData.isExpanded &&
-      hasExpandIcon) {
-      // If the node is expanded it has this attribute set to if this node is expanded or not.
-      treeNodeOptions['data-is-expanded'] = treeNodeData.isExpanded;
-    }
-    // When can be expanded OR selected
-    if (!treeNodeData.disabled) {
-      treeNodeOptions['onClick'] = (e) => {
-        // Note: event must be cloned
-        // otherwise inside setTimeout will be exiting the Shadow DOM scope(causing loss of information, including target).
-        const clone = {};
-        for (const key in e) {
-          clone[key] = e[key];
-        }
-        this.clickTimeout.push(setTimeout(() => this.hdlTreeNodeClick(clone, treeNodeData, treeNodePath), 300));
-      };
-    }
-    // When a tree node is displayed as a table
-    let treeNodeCells = null;
-    let visibleCols = this.getVisibleColumns();
-    if (this.showColumns && visibleCols && visibleCols.length) {
-      treeNodeCells = [];
-      // Renders all the cells
-      for (let j = 0; j < visibleCols.length; j++) {
-        const column = visibleCols[j];
-        if (treeNodeData.cells && treeNodeData.cells[column.name]) {
-          const cell = treeNodeData.cells[column.name]
-            ? treeNodeData.cells[column.name]
-            : null;
-          const cellProps = {
-            cell: cell,
-            column: column,
-            component: this,
-            density: this.density,
-            editable: this.editableData,
-            renderKup: true,
-            row: treeNodeData,
-            setSizes: true,
-          };
-          treeNodeCells.push(h("td", { class: `grid-cell`, "data-cell": cell, "data-column": column.name }, h(FCell, Object.assign({}, cellProps))));
+    }
+    /**
+     * Sets the props to the component.
+     * @param {GenericObject} props - Object containing props that will be set to the component.
+     */
+    async setProps(props) {
+        setProps(this, KupTreeProps, props);
+    }
+    /*-------------------------------------------------*/
+    /*           P r i v a t e   M e t h o d s         */
+    /*-------------------------------------------------*/
+    setTreeColumnVisibility(value) {
+        this.treeColumnVisible = value;
+    }
+    isTreeColumnVisible() {
+        return this.treeColumnVisible;
+    }
+    checkScrollOnHover() {
+        if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").scrollOnHover.isRegistered(this.treeWrapperRef)) {
+            if (this.scrollOnHover) {
+                __classPrivateFieldGet(this, _KupTree_kupManager, "f").scrollOnHover.register(this.treeWrapperRef);
+            }
         }
         else {
-          treeNodeCells.push(h("td", { class: `grid-cell` }));
-        }
-      }
-    }
-    let title = undefined;
-    if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.isEmptyKupObj(treeNodeData.obj) &&
-      __classPrivateFieldGet(this, _KupTree_kupManager, "f").debug.isDebug()) {
-      title =
-        treeNodeData.obj.t +
-          '; ' +
-          treeNodeData.obj.p +
-          '; ' +
-          treeNodeData.obj.k +
-          ';';
-    }
-    let treeNodeCell = null;
-    if (this.isTreeColumnVisible()) {
-      let content = '';
-      if (KupGlobalFilterMode.HIGHLIGHT === this.globalFilterMode) {
-        content = this.renderHighlightedContent(treeNodeData.value, this.globalFilterValue, 'cell-content');
-      }
-      else {
-        content = (h("span", { ref: (el) => this.contentRefs.push(el), class: "cell-content", title: this.preventXScroll ? treeNodeData.value : null }, treeNodeData.value));
-      }
-      treeNodeCell = (h("td", { class: {
-          'first-node': treeNodeDepth === 0 ? true : false,
-          'mdc-ripple-surface': this.ripple &&
-            !this.showColumns &&
-            !treeNodeData.disabled,
-          'is-obj': !__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.isEmptyKupObj(treeNodeData.obj),
-        }, style: treeNodeData.style || null, title: title, onDblClick: () => {
-          this.onKupTreeNodeDblClick(treeNodeData, treeNodePath);
-        } }, this.asAccordion && !treeNodeDepth
-        ? [
-          treeNodeIcon,
-          content,
-          hasExpandIcon ? treeExpandIcon : null,
-        ]
-        : [indent, treeExpandIcon, treeNodeIcon, content]));
-    }
-    return (h("tr", Object.assign({ class: {
-        'kup-tree__node': true,
-        'with-dyn': !treeNodeData.disabled,
-        'kup-tree__node--disabled': treeNodeData.disabled,
-        'kup-tree__node--first': treeNodeDepth ? false : true,
-        'kup-tree__node--selected': !treeNodeData.disabled &&
-          treeNodePath ===
-            this.selectedNodeToString(this.selectedNode),
-      }, "data-row": treeNodeData, "data-tree-path": treeNodePath }, treeNodeOptions), treeNodeCell, treeNodeCells));
-  }
-  closeTotalMenu() {
-    this.openedTotalMenu = null;
-    __classPrivateFieldGet(this, _KupTree_kupManager, "f").removeClickCallback(this.clickCb);
-  }
-  isOpenedTotalMenuForColumn(column) {
-    return this.openedTotalMenu === column;
-  }
-  onTotalsChange(event, column) {
-    // close menu
-    this.closeTotalMenu();
-    if (column) {
-      // must do this
-      // otherwise does not fire the watcher
-      const totalsCopy = Object.assign({}, this.totals);
-      const value = event.detail.selected.id;
-      if (value === TotalLabel.CANC) {
-        if (this.totals && this.totals[column.name]) {
-          delete totalsCopy[column.name];
-        }
-      }
-      else {
-        totalsCopy[column.name] = value;
-      }
-      this.totals = totalsCopy;
-    }
-  }
-  renderFooter() {
-    const nodesCell = h("td", null);
-    const footerCells = this.getVisibleColumns().map((column) => {
-      let totalMenu = undefined;
-      let menuLabel = TotalLabel.CALC;
-      const translation = {
-        [TotalLabel.AVERAGE]: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageTotals.AVERAGE),
-        [TotalLabel.CALC]: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageTotals.CALCULATE),
-        [TotalLabel.CANC]: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageTotals.CANCEL),
-        [TotalLabel.COUNT]: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageTotals.COUNT),
-        [TotalLabel.DISTINCT]: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageTotals.DISTINCT),
-        [TotalLabel.MATH]: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageTotals.FORMULA),
-        [TotalLabel.MAX]: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageTotals.MAXIMUM),
-        [TotalLabel.MIN]: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageTotals.MINIMUM),
-        [TotalLabel.SUM]: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageTotals.SUM),
-      };
-      if (this.totals) {
-        const totalValue = this.totals[column.name];
-        if (totalValue) {
-          if (totalValue.startsWith(TotalMode.MATH)) {
-            menuLabel = TotalLabel.MATH;
-          }
-          else {
-            switch (totalValue) {
-              case TotalMode.COUNT:
-                menuLabel = TotalLabel.COUNT;
-                break;
-              case TotalMode.DISTINCT:
-                menuLabel = TotalLabel.DISTINCT;
-                break;
-              case TotalMode.SUM:
-                menuLabel = TotalLabel.SUM;
-                break;
-              case TotalMode.AVERAGE:
-                menuLabel = TotalLabel.AVERAGE;
-                break;
-              case TotalMode.MIN:
-                menuLabel = TotalLabel.MIN;
-                break;
-              case TotalMode.MAX:
-                menuLabel = TotalLabel.MAX;
-                break;
-              default:
-                break;
+            if (!this.scrollOnHover) {
+                __classPrivateFieldGet(this, _KupTree_kupManager, "f").scrollOnHover.unregister(this.treeWrapperRef);
             }
-          }
-        }
-      }
-      if (this.isOpenedTotalMenuForColumn(column.name)) {
-        let listData = [
-          {
-            id: TotalMode.COUNT,
-            value: translation[TotalLabel.COUNT],
-          },
-          {
-            id: TotalMode.DISTINCT,
-            value: translation[TotalLabel.DISTINCT],
-          },
-        ];
-        if (__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.isNumber(column.obj)) {
-          listData.push({
-            id: TotalMode.SUM,
-            value: translation[TotalLabel.SUM],
-          }, {
-            id: TotalMode.AVERAGE,
-            value: translation[TotalLabel.AVERAGE],
-          }, {
-            id: TotalMode.MIN,
-            value: translation[TotalLabel.MIN],
-          }, {
-            id: TotalMode.MAX,
-            value: translation[TotalLabel.MAX],
-          });
-        }
-        let selectedItem = listData.find((item) => item.value === menuLabel);
-        if (selectedItem) {
-          selectedItem.selected = true;
-          listData.push({
-            id: TotalLabel.CANC,
-            separator: true,
-            value: translation[TotalLabel.CANC],
-          });
-        }
-        totalMenu = (h("kup-list", { class: `total-menu`, data: listData, id: "totals-menu", "is-menu": true, keyboardNavigation: true, "menu-visible": true, "onkup-list-click": (event) => this.onTotalsChange(event, column) }));
-      }
-      let value;
-      if (menuLabel === TotalLabel.COUNT ||
-        menuLabel === TotalLabel.DISTINCT) {
-        value = this.footer[column.name];
-      }
-      else {
-        value = __classPrivateFieldGet(this, _KupTree_kupManager, "f").math.numberToFormattedString(this.footer[column.name], column.decimals, column.obj ? column.obj.p : '');
-      }
-      return (h("td", { "data-column": column.name }, totalMenu, h("span", { class: "totals-value", title: translation[menuLabel] }, value)));
-    });
-    return (h("tfoot", null, h("tr", null, nodesCell, footerCells)));
-  }
-  didLoadInteractables() {
-    this.interactableTouch.push(this.treeWrapperRef);
-    const tapCb = (e) => {
-      if (this.hold) {
-        this.hold = false;
-        return;
-      }
-      switch (e.button) {
-        // right click
-        case 2:
-          this.kupTreeContextMenu.emit({
+        }
+    }
+    onKupTreeNodeDblClick(treeNodeData, treeNodePath) {
+        for (let index = 0; index < this.clickTimeout.length; index++) {
+            clearTimeout(this.clickTimeout[index]);
+            __classPrivateFieldGet(this, _KupTree_kupManager, "f").debug.logMessage(this, 'Cleared hdlTreeNodeClick timeout(' +
+                this.clickTimeout[index] +
+                ').');
+        }
+        this.clickTimeout = [];
+        this.kupTreeNodeDblClick.emit({
             comp: this,
             id: this.rootElement.id,
-            details: this.contextMenuHandler(e),
-          });
-          break;
-      }
-    };
-    const holdCb = (e) => {
-      if (e.pointerType === 'pen' || e.pointerType === 'touch') {
-        this.hold = true;
-        this.kupTreeContextMenu.emit({
-          comp: this,
-          id: this.rootElement.id,
-          details: this.contextMenuHandler(e),
+            treeNodePath: treeNodePath
+                .split(',')
+                .map((treeNodeIndex) => parseInt(treeNodeIndex)),
+            treeNode: treeNodeData,
         });
-      }
-    };
-    __classPrivateFieldGet(this, _KupTree_kupManager, "f").interact.on(this.treeWrapperRef, KupPointerEventTypes.TAP, tapCb);
-    __classPrivateFieldGet(this, _KupTree_kupManager, "f").interact.on(this.treeWrapperRef, KupPointerEventTypes.HOLD, holdCb);
-  }
-  totalMenuPosition() {
-    if (this.rootElement.shadowRoot) {
-      const menu = this.rootElement.shadowRoot.querySelector('#totals-menu');
-      if (menu) {
-        __classPrivateFieldGet(this, _KupTree_kupManager, "f").dynamicPosition.register(menu, this.totalMenuCoords);
-        if (!this.clickCb) {
-          this.clickCb = {
-            cb: () => {
-              this.closeTotalMenu();
-              __classPrivateFieldGet(this, _KupTree_kupManager, "f").dynamicPosition.stop(menu);
-            },
-            el: menu,
-          };
-        }
-        __classPrivateFieldGet(this, _KupTree_kupManager, "f").addClickCallback(this.clickCb, true);
-        __classPrivateFieldGet(this, _KupTree_kupManager, "f").dynamicPosition.start(menu);
-        menu.menuVisible = true;
-      }
-    }
-  }
-  /**
-   * Given a KupTreeNode, reads through its data to compose and return the KupTreeNodes of the root of this KupTreeNode
-   * and its children nodes, composing an array of JSX KupTreeNodes.
-   * @param treeNodeData - The KupTreeNode object to parse.
-   * @param treeNodePath - A string containing the comma(,) separated indexes of the KupTreeNodes to use,
-   *    sorted from left to right, to access the current KupTreeNode starting from the data prop children object.
-   * @param treeNodeDepth - An integer to keep track of the depth level of the current KupTreeNode. Used for indentation.
-   * @returns An array of JSX KupTreeNodes created from the given treeNodeData.
-   */
-  renderTree(treeNodeData, treeNodePath, treeNodeDepth = 0) {
-    let treeNodes = [];
-    if (treeNodeData && treeNodeData.visible == true) {
-      // Creates and adds the root of the current tree
-      treeNodes.push(this.renderTreeNode(treeNodeData, treeNodePath, treeNodeDepth));
-      // Checks if the current node can be expanded, has children object, has children and is expanded
-      if (treeNodeData.expandable &&
-        treeNodeData.children &&
-        treeNodeData.children.length &&
-        treeNodeData.isExpanded) {
-        for (let i = 0; i < treeNodeData.children.length; i++) {
-          treeNodes = treeNodes.concat(this.renderTree(treeNodeData.children[i], treeNodePath + ',' + i, treeNodeDepth + 1));
-        }
-      }
-    }
-    return treeNodes;
-  }
-  setEllipsis() {
-    const treeRect = this.rootElement.getBoundingClientRect();
-    for (let index = 0; index < this.contentRefs.length; index++) {
-      const content = this.contentRefs[index];
-      if (content) {
-        const cell = content.parentNode;
-        if (this.asAccordion && cell.classList.contains('first-node')) {
-          cell.style.width = treeRect.width + 'px';
+    }
+    nodesToRows() {
+        function children(TreeNode) {
+            for (let index = 0; index < TreeNode.children.length; index++) {
+                const node = TreeNode.children[index];
+                rows.push({
+                    cells: TreeNode.children[index].cells,
+                });
+                if (node.children) {
+                    children(node);
+                }
+            }
+        }
+        let rows = [];
+        for (let index = 0; index < this.data.length; index++) {
+            const node = this.data[index];
+            rows.push({
+                cells: this.data[index].cells,
+            });
+            if (node.children) {
+                children(this.data[index]);
+            }
+        }
+        return rows;
+    }
+    setDynPosElements() {
+        // Column menu
+        if (this.columnMenuCard && this.columnMenuCard.data) {
+            this.columnMenuCard.data = this.columnMenuInstance.prepData(this, getColumnByName(this.getVisibleColumns(), this.columnMenuAnchor), this.columnMenuCard.data);
+        }
+    }
+    expandCollapseNode(treeNode, expandNode = false) {
+        this.filtersTreeItemsInstance.expandCollapseNode(treeNode, expandNode);
+    }
+    expandCollapseAllNodes(treeNode, expandNode = false) {
+        this.filtersTreeItemsInstance.expandCollapseAllNodes(treeNode, expandNode);
+    }
+    getColumns() {
+        return this.columns ? this.columns : [{ title: '', name: '' }];
+    }
+    getSizedColumns() {
+        let columns = this.getColumns();
+        let sizedColumns = [];
+        for (let j = 0; j < columns.length; j++) {
+            if (columns[j].size !== null &&
+                columns[j].size !== undefined &&
+                columns[j].size !== '') {
+                sizedColumns.push(columns[j]);
+            }
+        }
+        if (sizedColumns.length > 0) {
+            return sizedColumns;
         }
         else {
-          content.classList.remove('cell-content--ellipsis');
-          content.style.setProperty('--kup_tree_content_width', ``);
-          const rect = content.getBoundingClientRect();
-          if (rect.right > treeRect.right) {
-            const failsafeOffset = 5;
-            const delta = rect.right - treeRect.right;
-            content.classList.add('cell-content--ellipsis');
-            content.style.setProperty('--kup_tree_content_width', `${rect.width - delta - failsafeOffset}px`);
-          }
-        }
-      }
-    }
-  }
-  /*-------------------------------------------------*/
-  /*          L i f e c y c l e   H o o k s          */
-  /*-------------------------------------------------*/
-  componentWillLoad() {
-    __classPrivateFieldGet(this, _KupTree_kupManager, "f").debug.logLoad(this, false);
-    __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.register(this);
-    __classPrivateFieldGet(this, _KupTree_kupManager, "f").theme.register(this);
-    this.columnMenuInstance = new KupColumnMenu();
-    this.refreshStructureState();
-  }
-  componentDidLoad() {
-    this.didLoadInteractables();
-    this.kupDidLoad.emit({ comp: this, id: this.rootElement.id });
-    __classPrivateFieldGet(this, _KupTree_kupManager, "f").resize.observe(this.rootElement);
-    __classPrivateFieldGet(this, _KupTree_kupManager, "f").debug.logLoad(this, true);
-  }
-  componentWillRender() {
-    __classPrivateFieldGet(this, _KupTree_kupManager, "f").debug.logRender(this, false);
-    if (this.showFooter && this.columns) {
-      this.footer = calcTotals(normalizeRows(this.getColumns(), this.nodesToRows()), this.totals);
-    }
-    this.filterNodes();
-  }
-  componentDidRender() {
-    const root = this.rootElement.shadowRoot;
-    if (root && this.ripple) {
-      const rippleCells = root.querySelectorAll('.mdc-ripple-surface:not(.mdc-ripple-upgraded)');
-      if (rippleCells) {
-        for (let i = 0; i < rippleCells.length; i++) {
-          MDCRipple.attachTo(rippleCells[i]);
-        }
-      }
-    }
-    if (root) {
-      const fs = root.querySelectorAll('.f-text-field');
-      for (let index = 0; index < fs.length; index++) {
-        FTextFieldMDC(fs[index]);
-      }
-    }
-    if (this.preventXScroll) {
-      this.setEllipsis();
-    }
-    this.totalMenuPosition();
-    this.checkScrollOnHover();
-    this.setDynPosElements();
-    // *** Store
-    this.persistState();
-    // ***
-    this.oldWidth = this.rootElement.clientWidth;
-    __classPrivateFieldGet(this, _KupTree_kupManager, "f").debug.logRender(this, true);
-  }
-  render() {
-    this.contentRefs = [];
-    this.sizedColumns = this.getSizedColumns();
-    let wrapperClass = 'density-medium';
-    switch (this.density) {
-      case FCellPadding.DENSE:
-        wrapperClass = 'density-dense';
-        break;
-      case FCellPadding.WIDE:
-        wrapperClass = 'density-wide';
-        break;
-    }
-    // Composes TreeNodes
-    let treeNodes = [];
-    if (this.data && this.data.length) {
-      this.data.forEach((zeroDepthNode, index) => {
-        treeNodes = treeNodes.concat(this.renderTree(zeroDepthNode, index.toString()));
-      });
-    }
-    else {
-      // There are no TreeNodes, so we print a single cell with a caption
-      treeNodes.push(h("tr", null, h("td", null, __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageGeneric.EMPTY_DATA))));
-    }
-    // Calculates if header must be shown or not
-    const visibleHeader = this.showHeader && this.showColumns;
-    let filterField = null;
-    if (this.globalFilter &&
-      this.data &&
-      this.data.length &&
-      this.data.length > 0) {
-      filterField = (h("div", { id: "global-filter" }, h("kup-text-field", { fullWidth: true, label: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), icon: KupThemeIconValues.SEARCH, initialValue: this.globalFilterValue, "onkup-textfield-input": (event) => {
-          window.clearTimeout(this.globalFilterTimeout);
-          this.globalFilterTimeout = window.setTimeout(() => this.onGlobalFilterChange(event), 600);
-        } })));
-    }
-    return (h(Host, null, h("style", null, __classPrivateFieldGet(this, _KupTree_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId, class: wrapperClass }, filterField, h("div", { class: "wrapper", ref: (el) => (this.treeWrapperRef =
-        el) }, h("table", { class: "kup-tree", "data-show-columns": this.showColumns, onContextMenu: (e) => {
+            return undefined;
+        }
+    }
+    getVisibleColumns() {
+        return this.getColumns().filter((column) => column.hasOwnProperty('visible') ? column.visible : true);
+    }
+    getHeadingColumns() {
+        const firstColum = {
+            name: treeMainColumnName,
+            title: '',
+        };
+        const visibleColumns = this.getVisibleColumns();
+        return [firstColum, ...visibleColumns];
+    }
+    /*
+     *For launch the event when selected node
+     */
+    launchNodeEvent(treeNodePath, treeNode) {
+        if (treeNodePath && treeNodePath.length > 0) {
+            if (treeNodePath[0] != -1) {
+                var tn = treeNode.children[treeNodePath[0]];
+                if (!tn) {
+                    tn = treeNode;
+                }
+                if (treeNodePath.length > 1) {
+                    treeNodePath = treeNodePath.slice(1);
+                    this.launchNodeEvent(treeNodePath, tn);
+                }
+                else {
+                    this.hdlTreeNodeClick(null, tn, this.selectedNodeToString(this.selectedNode));
+                }
+            }
+        }
+    }
+    openTotalMenu(column) {
+        this.openedTotalMenu = column.name;
+    }
+    onTotalMenuOpen(column) {
+        this.closeTotalMenu();
+        this.openTotalMenu(column);
+    }
+    getEventDetails(path, e) {
+        let isHeader, isBody, isFooter, td, th, tr, filterRemove;
+        if (path) {
+            for (let i = path.length - 1; i >= 0; i--) {
+                let p = path[i];
+                if (!p.tagName) {
+                    continue;
+                }
+                switch (p.tagName.toUpperCase()) {
+                    case 'THEAD': {
+                        isHeader = true;
+                        break;
+                    }
+                    case 'TBODY': {
+                        isBody = true;
+                        break;
+                    }
+                    case 'TFOOT': {
+                        isFooter = true;
+                        break;
+                    }
+                    case 'TD': {
+                        td = p;
+                        break;
+                    }
+                    case 'TH': {
+                        th = p;
+                        break;
+                    }
+                    case 'TR': {
+                        tr = p;
+                        break;
+                    }
+                    default: {
+                        if (p.classList.contains(KupThemeIconValues.FILTER_REMOVE.replace('--', ''))) {
+                            filterRemove = p;
+                        }
+                        break;
+                    }
+                }
+            }
+        }
+        let cell = null, column = null, row = null;
+        if (isBody) {
+            if (td) {
+                cell = td['data-cell'];
+            }
+            if (tr) {
+                row = tr['data-row'];
+            }
+        }
+        if (isHeader || isBody || isFooter) {
+            const columnName = td
+                ? td.dataset.column
+                : th
+                    ? th.dataset.column
+                    : null;
+            if (columnName) {
+                column = getColumnByName(this.getColumns(), columnName);
+            }
+        }
+        return {
+            area: isHeader
+                ? 'header'
+                : isBody
+                    ? 'body'
+                    : isFooter
+                        ? 'footer'
+                        : null,
+            cell: cell ? cell : null,
+            column: column ? column : null,
+            filterRemove: filterRemove ? filterRemove : null,
+            originalEvent: e,
+            row: row ? row : null,
+            td: td ? td : null,
+            th: th ? th : null,
+            tr: tr ? tr : null,
+        };
+    }
+    contextMenuHandler(e) {
         e.preventDefault();
-      } }, h("thead", { class: {
-        'header--is-visible': visibleHeader,
-      } }, h("tr", null, visibleHeader ? this.renderHeader() : null)), h("tbody", null, treeNodes), (this.showFooter || this.hasTotals()) &&
-      this.columns
-      ? this.renderFooter()
-      : null)))));
-  }
-  disconnectedCallback() {
-    __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.register(this);
-    __classPrivateFieldGet(this, _KupTree_kupManager, "f").resize.unobserve(this.rootElement);
-    __classPrivateFieldGet(this, _KupTree_kupManager, "f").theme.unregister(this);
-    const dynamicPositionElements = this.rootElement.shadowRoot.querySelectorAll('[' + kupDynamicPositionAttribute + ']');
-    if (dynamicPositionElements.length > 0) {
-      __classPrivateFieldGet(this, _KupTree_kupManager, "f").dynamicPosition.unregister(Array.prototype.slice.call(dynamicPositionElements));
-    }
-    if (this.columnMenuCard) {
-      this.columnMenuCard.remove();
-    }
-    if (this.scrollOnHover) {
-      __classPrivateFieldGet(this, _KupTree_kupManager, "f").scrollOnHover.unregister(this.treeWrapperRef);
-    }
-    this.kupDidUnload.emit({ comp: this, id: this.rootElement.id });
-  }
-  static get is() { return "kup-tree"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["kup-tree.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["kup-tree.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "asAccordion": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "false"
-            }],
-          "text": "When enabled, the first level of depth will give an accordion look to nodes."
-        },
-        "attribute": "as-accordion",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "columns": {
-        "type": "unknown",
-        "mutable": true,
-        "complexType": {
-          "original": "KupDataColumn[]",
-          "resolved": "KupDataColumn[]",
-          "references": {
-            "KupDataColumn": {
-              "location": "import",
-              "path": "../../managers/kup-data/kup-data-declarations",
-              "id": "src/managers/kup-data/kup-data-declarations.ts::KupDataColumn"
+        const details = this.getEventDetails(__classPrivateFieldGet(this, _KupTree_kupManager, "f").getEventPath(e.target, this.rootElement), e);
+        if (details.area === 'header') {
+            if (details.th && details.column) {
+                this.openColumnMenu(details.column.name);
+                return details;
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The columns of the tree when tree visualization is active."
-        }
-      },
-      "customStyle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "\"\""
-            }, {
-              "name": "see",
-              "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
-            }],
-          "text": "Custom style of the component."
-        },
-        "attribute": "custom-style",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "data": {
-        "type": "unknown",
-        "mutable": true,
-        "complexType": {
-          "original": "KupTreeNode[]",
-          "resolved": "KupTreeNode[]",
-          "references": {
-            "KupTreeNode": {
-              "location": "import",
-              "path": "./kup-tree-declarations",
-              "id": "src/components/kup-tree/kup-tree-declarations.ts::KupTreeNode"
+        }
+        else if (details.area === 'footer') {
+            if (details.td && details.column) {
+                this.totalMenuCoords = { x: e.clientX, y: e.clientY };
+                this.onTotalMenuOpen(details.column);
+                return details;
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The json data used to populate the tree view: the basic, always visible tree nodes."
-        },
-        "defaultValue": "[]"
-      },
-      "density": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "FCellPadding",
-          "resolved": "FCellPadding.DENSE | FCellPadding.MEDIUM | FCellPadding.NONE | FCellPadding.WIDE",
-          "references": {
-            "FCellPadding": {
-              "location": "import",
-              "path": "../../f-components/f-cell/f-cell-declarations",
-              "id": "src/f-components/f-cell/f-cell-declarations.ts::FCellPadding"
+        }
+        return details;
+    }
+    // When a TreeNode can be selected
+    hdlTreeNodeClick(e, treeNodeData, treeNodePath) {
+        if (this.expansionMode.toLowerCase() ===
+            KupTreeExpansionMode.DROPDOWN ||
+            (this.expansionMode.toLowerCase() === KupTreeExpansionMode.NODE &&
+                !treeNodeData.expandable)) {
+            const td = e
+                ? __classPrivateFieldGet(this, _KupTree_kupManager, "f")
+                    .getEventPath(e.target, this.rootElement)
+                    .find((el) => {
+                    if (el.tagName === 'TD')
+                        return el;
+                })
+                : null;
+            // If this TreeNode is not disabled, then it can be selected and an event is emitted
+            if (treeNodeData && !treeNodeData.disabled) {
+                this.selectedNode = treeNodePath
+                    .split(',')
+                    .map((treeNodeIndex) => parseInt(treeNodeIndex));
+                this.kupTreeNodeSelected.emit({
+                    comp: this,
+                    id: this.rootElement.id,
+                    treeNodePath: this.selectedNode,
+                    treeNode: treeNodeData,
+                    columnName: td ? td.dataset.column : null,
+                });
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The density of the rows, defaults at 'medium' and can also be set to 'dense' or 'wide'."
-        },
-        "attribute": "density",
-        "reflect": false,
-        "defaultValue": "FCellPadding.MEDIUM"
-      },
-      "dynamicExpansionCallback": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "(\r\n        treeNodeToExpand: KupTreeNode,\r\n        treeNodePath: TreeNodePath\r\n    ) => Promise<KupTreeNode[]> | undefined",
-          "resolved": "(treeNodeToExpand: KupTreeNode, treeNodePath: TreeNodePath) => Promise<KupTreeNode[]>",
-          "references": {
-            "KupTreeNode": {
-              "location": "import",
-              "path": "./kup-tree-declarations",
-              "id": "src/components/kup-tree/kup-tree-declarations.ts::KupTreeNode"
-            },
-            "TreeNodePath": {
-              "location": "import",
-              "path": "./kup-tree-declarations",
-              "id": "src/components/kup-tree/kup-tree-declarations.ts::TreeNodePath"
-            },
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        }
+        // If KupTreeExpansionMode.NODE then click is a collapse/expand click
+        if (this.expansionMode.toLowerCase() === KupTreeExpansionMode.NODE) {
+            this.hdlTreeNodeExpanderClick(treeNodeData, treeNodePath, e ? e.ctrlKey : false);
+        }
+    }
+    // When a TreeNode must be expanded or closed.
+    hdlTreeNodeExpanderClick(treeNodeData, treeNodePath, ctrlKey) {
+        // If the node is expandable
+        if (treeNodeData.expandable) {
+            // Always composes the tree node path as an array
+            const arrayTreeNodePath = treeNodePath
+                .split(',')
+                .map((index) => parseInt(index));
+            // There are already children set in this TreeNode -> expand or collapse node and emit appropriate event
+            if (treeNodeData.children && treeNodeData.children.length) {
+                // Updates expanded state and force rerender
+                treeNodeData.isExpanded = !treeNodeData.isExpanded;
+                if (ctrlKey) {
+                    this.handleChildren(treeNodeData, treeNodeData.isExpanded);
+                }
+                this.refresh();
+                if (treeNodeData.isExpanded) {
+                    // TreeNode is now expanded -> Fires expanded event
+                    this.kupTreeNodeExpand.emit({
+                        comp: this,
+                        id: this.rootElement.id,
+                        treeNodePath: arrayTreeNodePath,
+                        treeNode: treeNodeData,
+                        usesDynamicExpansion: this.useDynamicExpansion,
+                    });
+                }
+                else {
+                    // TreeNode is now collapsed -> Fires collapsed event
+                    this.kupTreeNodeCollapse.emit({
+                        comp: this,
+                        id: this.rootElement.id,
+                        treeNodePath: arrayTreeNodePath,
+                        treeNode: treeNodeData,
+                    });
+                }
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "see",
-              "text": "useDynamicExpansion"
-            }],
-          "text": "Function that gets invoked when a new set of nodes must be loaded as children of a node.\r\n\r\nWhen useDynamicExpansion is set, the tree component will have two different behaviors depending on the value of this prop.\r\n1 - If this prop is set to null, no callback to download data is available:\r\n   the component will emit an event requiring the parent to load the children of the given node.\r\n2 - If this prop is set to have a callback, then the component will automatically make requests to load children of\r\n   a given node. After the load has been completed, a different event will be fired to alert the parent of the change."
-        },
-        "defaultValue": "undefined"
-      },
-      "editableData": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "false"
-            }],
-          "text": "When set to true, editable cells will be rendered using input components."
-        },
-        "attribute": "editable-data",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "enableExtraColumns": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Enables the extracolumns add buttons."
-        },
-        "attribute": "enable-extra-columns",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "expanded": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Flag: the nodes of the whole tree must be already expanded upon loading. Disabled nodes do NOT get expanded."
-        },
-        "attribute": "expanded",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "expansionMode": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "KupTreeExpansionMode",
-          "resolved": "KupTreeExpansionMode.DROPDOWN | KupTreeExpansionMode.NODE",
-          "references": {
-            "KupTreeExpansionMode": {
-              "location": "import",
-              "path": "./kup-tree-declarations",
-              "id": "src/components/kup-tree/kup-tree-declarations.ts::KupTreeExpansionMode"
+            else if (this.useDynamicExpansion) {
+                if (ctrlKey) {
+                    this.kupTreeDynamicMassExpansion.emit({
+                        comp: this,
+                        id: this.rootElement.id,
+                        treeNodePath: arrayTreeNodePath,
+                        treeNode: treeNodeData,
+                    });
+                }
+                // When the component must use the dynamic expansion feature
+                // Currently it does not support the expanded prop
+                // Checks if we have a dynamicExpansionCallback or not
+                if (this.dynamicExpansionCallback) {
+                    // We have a callback: invokes it and after the result is returned updates the tree
+                    this.dynamicExpansionCallback(treeNodeData, arrayTreeNodePath)
+                        .then((childrenTreeNodes) => {
+                        // Children returned successfully
+                        treeNodeData.children = childrenTreeNodes;
+                        treeNodeData.isExpanded = !treeNodeData.isExpanded;
+                        this.refresh();
+                        // TreeNode is now expanded -> Fires expanded event
+                        this.kupTreeNodeExpand.emit({
+                            comp: this,
+                            id: this.rootElement.id,
+                            treeNodePath: arrayTreeNodePath,
+                            treeNode: treeNodeData,
+                            usesDynamicExpansion: true,
+                        });
+                    })
+                        .catch((err) => {
+                        console.error('KupTree: An error occurred when trying to fetch dynamicExpansion nodes data', err, treeNodeData);
+                    });
+                }
+                else {
+                    // we do NOT have a callback set.
+                    // Fires the expand request for the given TreeNode and set the appropriate flag
+                    this.kupTreeNodeExpand.emit({
+                        comp: this,
+                        id: this.rootElement.id,
+                        treeNode: treeNodeData,
+                        treeNodePath: arrayTreeNodePath,
+                        usesDynamicExpansion: true,
+                        dynamicExpansionRequireChildren: true,
+                    });
+                    treeNodeData.isExpanded = !treeNodeData.isExpanded;
+                }
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "KupTreeExpansionMode.DROPDOWN"
-            }],
-          "text": "Behavior of nodes' expansion: it can be chosen between expanding a node by clicking on the dropdown icon, or by clicking on the whole node."
-        },
-        "attribute": "expansion-mode",
-        "reflect": false,
-        "defaultValue": "KupTreeExpansionMode.DROPDOWN"
-      },
-      "filters": {
-        "type": "unknown",
-        "mutable": true,
-        "complexType": {
-          "original": "GenericFilter",
-          "resolved": "GenericFilter",
-          "references": {
-            "GenericFilter": {
-              "location": "import",
-              "path": "../../utils/filters/filters-declarations",
-              "id": "src/utils/filters/filters-declarations.ts::GenericFilter"
+        }
+    }
+    hasTotals() {
+        return this.totals && Object.keys(this.totals).length > 0;
+    }
+    handleChildren(treeNode, expand) {
+        for (let index = 0; index < treeNode.children.length; index++) {
+            let node = treeNode.children[index];
+            if (!node.disabled) {
+                node.isExpanded = expand;
+                if (node.children) {
+                    this.handleChildren(node, expand);
+                }
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "List of filters set by the user."
-        },
-        "defaultValue": "{}"
-      },
-      "globalFilter": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "When set to true it activates the global filter."
-        },
-        "attribute": "global-filter",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "globalFilterValue": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The value of the global filter."
-        },
-        "attribute": "global-filter-value",
-        "reflect": true,
-        "defaultValue": "''"
-      },
-      "globalFilterMode": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "KupGlobalFilterMode",
-          "resolved": "KupGlobalFilterMode.HIGHLIGHT | KupGlobalFilterMode.SIMPLE",
-          "references": {
-            "KupGlobalFilterMode": {
-              "location": "import",
-              "path": "../../utils/filters/filters-declarations",
-              "id": "src/utils/filters/filters-declarations.ts::KupGlobalFilterMode"
+        }
+    }
+    /**
+     * Given a nodePath, transform that array into
+     * @param nodePath
+     */
+    selectedNodeToString(nodePath) {
+        let strToRet = '';
+        if (nodePath && nodePath.length) {
+            strToRet = nodePath[0].toString();
+            for (let i = 1; i < nodePath.length; i++) {
+                strToRet += `,${nodePath[i]}`;
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The mode of the global filter (default SIMPLE)"
-        },
-        "attribute": "global-filter-mode",
-        "reflect": false,
-        "defaultValue": "KupGlobalFilterMode.SIMPLE"
-      },
-      "preventXScroll": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "false;"
-            }],
-          "text": "Experimental feature: when active, the tree will try to prevent horizontal overflowing elements by setting a width on the content of the table cells.\r\nIt works only on cells of the main column."
-        },
-        "attribute": "prevent-x-scroll",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "removableColumns": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Sets the possibility to remove the selected column."
-        },
-        "attribute": "removable-columns",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "ripple": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "true"
-            }],
-          "text": "When enabled displays Material's ripple effect on nodes (only when no columns are displayed)."
-        },
-        "attribute": "ripple",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "scrollOnHover": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Activates the scroll on hover function."
-        },
-        "attribute": "scroll-on-hover",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "showColumns": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Shows the tree data as a table."
-        },
-        "attribute": "show-columns",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "showFilters": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "When set to true enables the column filters."
-        },
-        "attribute": "show-filters",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "showFooter": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "When set to true shows the footer."
-        },
-        "attribute": "show-footer",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "showHeader": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "see",
-              "text": "showColumns"
-            }],
-          "text": "Flag: shows the header of the tree when the tree is displayed as a table."
-        },
-        "attribute": "show-header",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "showIcons": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Shows the icons of the nodes."
-        },
-        "attribute": "show-icons",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "stateId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "state-id",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "store": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "KupStore",
-          "resolved": "KupStore",
-          "references": {
-            "KupStore": {
-              "location": "import",
-              "path": "../kup-state/kup-store",
-              "id": "src/components/kup-state/kup-store.ts::KupStore"
+        }
+        return strToRet;
+    }
+    getFilterValueForTooltip(column) {
+        return this.filtersColumnMenuInstance.getFilterValueForTooltip(this.filters, column);
+    }
+    getTreeNode(nodePath) {
+        if (!nodePath || nodePath.length == 0) {
+            return null;
+        }
+        let father = this.data;
+        let node = null;
+        for (let index = 0; index < nodePath.length; index++) {
+            if (node) {
+                father = node.children;
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        }
-      },
-      "useDynamicExpansion": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "see",
-              "text": "dynamicExpansionCallback"
-            }],
-          "text": "When the component must use the dynamic expansion feature to open its nodes, it means that not all the nodes of the\r\ntree have been passed inside the data property.\r\n\r\nTherefore, when expanding a node, the tree must emit an event (or run a given callback)\r\nand wait for the child nodes to be downloaded from the server.\r\n\r\nFor more information:"
-        },
-        "attribute": "use-dynamic-expansion",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "totals": {
-        "type": "unknown",
-        "mutable": true,
-        "complexType": {
-          "original": "TotalsMap",
-          "resolved": "TotalsMap",
-          "references": {
-            "TotalsMap": {
-              "location": "import",
-              "path": "./../kup-data-table/kup-data-table-declarations",
-              "id": "src/components/kup-data-table/kup-data-table-declarations.ts::TotalsMap"
+            const nodeIndex = nodePath[index];
+            node = father[nodeIndex];
+        }
+        return node;
+    }
+    onRemoveFilter(column) {
+        const newFilters = Object.assign({}, this.filters);
+        this.filtersColumnMenuInstance.removeFilter(newFilters, column.name);
+        this.filters = newFilters;
+    }
+    onGlobalFilterChange({ detail }) {
+        let value = '';
+        if (detail && detail.value) {
+            value = detail.value;
+        }
+        this.globalFilterValue = value;
+    }
+    getColumnValues(column) {
+        return this.filtersTreeItemsInstance.getColumnValues(this, column, this.globalFilterValue, this.filtersColumnMenuInstance);
+    }
+    getRows() {
+        return this.data ? this.data : [];
+    }
+    filterNodes() {
+        let items = this.filtersTreeItemsInstance.filterRows(this.getRows(), this.filters, this.globalFilterValue, this.getColumns(), this.filtersColumnMenuInstance);
+        this.visibleNodes = this.calculateVisibleNodes(items);
+    }
+    calculateVisibleNodes(items) {
+        let count = 0;
+        if (items) {
+            items.forEach((element) => {
+                if (element.visible) {
+                    count++;
+                }
+                count += this.calculateVisibleNodes(element.children);
+            });
+        }
+        return count;
+    }
+    refreshStructureState() {
+        if (this.data) {
+            if (this.data.columns) {
+                __classPrivateFieldGet(this, _KupTree_kupManager, "f").debug.logMessage(this, 'Detected KupDataDataset: setting up tree as grid.', KupDebugCategory.WARNING);
+                const data = this.data;
+                this.columns = data.columns;
+                this.data = __classPrivateFieldGet(this, _KupTree_kupManager, "f").data.row.toNode(data);
+                this.showColumns = true;
+                this.showHeader = true;
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Defines the current totals options."
-        }
-      }
-    };
-  }
-  static get states() {
-    return {
-      "treeColumnVisible": {},
-      "openedTotalMenu": {},
-      "columnMenuAnchor": {},
-      "stateSwitcher": {},
-      "selectedNode": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "kupTreeNodeCollapse",
-        "name": "kup-tree-nodecollapse",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Fired when a KupTreeNode gets collapsed (closed)."
-        },
-        "complexType": {
-          "original": "KupTreeNodeCollapseEventPayload",
-          "resolved": "KupTreeNodeCollapseEventPayload",
-          "references": {
-            "KupTreeNodeCollapseEventPayload": {
-              "location": "import",
-              "path": "./kup-tree-declarations",
-              "id": "src/components/kup-tree/kup-tree-declarations.ts::KupTreeNodeCollapseEventPayload"
+            // When the nodes must be expanded upon loading and the tree is not using a dynamicExpansion (and the current TreeNode is not disabled)
+            // the default value of the treeExpandedPropName is set to true
+            this.data.forEach((rootNode) => {
+                this.expandCollapseAllNodes(rootNode, this.expanded && !this.useDynamicExpansion);
+            });
+            this.selectedNode = [];
+        }
+    }
+    createIconElement(CSSClass, icon, iconColor) {
+        if (icon.indexOf('.') > -1 ||
+            icon.indexOf('/') > -1 ||
+            icon.indexOf('\\') > -1) {
+            CSSClass += ' is-image';
+            return (h("span", { class: CSSClass }, h("img", { src: icon })));
+        }
+        else {
+            let svg = `url('${getAssetPath(`./assets/svg/${icon}.svg`)}') no-repeat center`;
+            CSSClass += ' kup-icon';
+            let iconStyle = Object.assign(Object.assign({}, (iconColor ? { background: iconColor } : {})), { mask: svg, webkitMask: svg });
+            return h("span", { style: iconStyle, class: CSSClass });
+        }
+    }
+    getCellStyle(colName, cellStyle) {
+        // Controls if there are columns with a specified width
+        if (this.sizedColumns) {
+            let colWidth = '';
+            // Search if this column has a specified width
+            for (let j = 0; j < this.sizedColumns.length; j++) {
+                if (colName === this.sizedColumns[j].name) {
+                    colWidth = this.sizedColumns[j].size;
+                    break;
+                }
             }
-          }
-        }
-      }, {
-        "method": "kupTreeNodeExpand",
-        "name": "kup-tree-nodeexpand",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [{
-              "name": "event",
-              "text": "kup-tree-nodeexpand"
-            }, {
-              "name": "type",
-              "text": "{object}"
-            }, {
-              "name": "property",
-              "text": "{TreeNodePath} treeNodePath - The array of indexes to retrieve the current treeNode inside the data prop."
-            }, {
-              "name": "property",
-              "text": "{KupTreeNode} treeNode - Reference to the KupTreeNode data object which is being expanded (passed through the data prop)."
-            }, {
-              "name": "property",
-              "text": "{boolean} usesDynamicExpansion - Flag to notify that the component is running in dynamicExpansion mode."
-            }, {
-              "name": "property",
-              "text": "{boolean} dynamicExpansionRequireChildren - Flag to notify that the current dynamicExpansion event\r\nrequires the parent component to add KupTreeNode children to the given KupTreeNode."
-            }, {
-              "name": "see",
-              "text": "useDynamicExpansion *"
-            }, {
-              "name": "see",
-              "text": "dynamicExpansionCallback *"
-            }, {
-              "name": "since",
-              "text": "1.0.0"
-            }],
-          "text": "Fired when a node expansion ion has been triggered.\r\nContains additional data when the tree is using the dynamicExpansion feature."
-        },
-        "complexType": {
-          "original": "KupTreeNodeExpandEventPayload",
-          "resolved": "KupTreeNodeExpandEventPayload",
-          "references": {
-            "KupTreeNodeExpandEventPayload": {
-              "location": "import",
-              "path": "./kup-tree-declarations",
-              "id": "src/components/kup-tree/kup-tree-declarations.ts::KupTreeNodeExpandEventPayload"
+            // Specific width has been found
+            if (colWidth) {
+                if (!cellStyle) {
+                    cellStyle = {};
+                }
+                // Sets the width.
+                cellStyle['max-width'] = colWidth;
+                cellStyle['min-width'] = colWidth;
+                cellStyle['width'] = colWidth;
+                cellStyle['overflow'] = 'hidden';
             }
-          }
-        }
-      }, {
-        "method": "kupTreeNodeSelected",
-        "name": "kup-tree-nodeselected",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Fired when a node of the tree has been selected"
-        },
-        "complexType": {
-          "original": "KupTreeNodeSelectedEventPayload",
-          "resolved": "KupTreeNodeSelectedEventPayload",
-          "references": {
-            "KupTreeNodeSelectedEventPayload": {
-              "location": "import",
-              "path": "./kup-tree-declarations",
-              "id": "src/components/kup-tree/kup-tree-declarations.ts::KupTreeNodeSelectedEventPayload"
+        }
+        return cellStyle;
+    }
+    /**
+     * Renders the header of the tree when it must be displayed as a table.
+     * @returns An array of table header cells.
+     */
+    renderHeader() {
+        return this.getHeadingColumns().map((column) => {
+            if (!this.isTreeColumnVisible() &&
+                column.name === treeMainColumnName)
+                return;
+            //---- Filter ----
+            let filter = null;
+            if (this.filtersColumnMenuInstance.hasFiltersForColumn(this.filters, column)) {
+                const svgLabel = __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageGeneric.REMOVE_FILTERS) + `: '${this.getFilterValueForTooltip(column)}'`;
+                /**
+                 * When column has a filter but filters must not be displayed, shows an icon to remove the filter.
+                 * Upon click, the filter gets removed.
+                 */
+                filter = (h("span", { title: svgLabel, class: `kup-icon ${KupThemeIconValues.FILTER_REMOVE.replace('--', '')}`, onClick: (e) => {
+                        e.stopPropagation();
+                        this.onRemoveFilter(column);
+                    } }));
+            }
+            return (h("th", { "data-column": column.name, style: this.getCellStyle(column.name, null) }, h("span", { class: "column-title" }, column.title), filter));
+        });
+    }
+    /**
+     * Renders a content with a part highlighted.
+     * NOTE: same in kup-accordion and in kup-tree
+     */
+    renderHighlightedContent(content, highlight, styleClass) {
+        let contentSlices = [];
+        if (highlight && content) {
+            let contentPart = content;
+            let end = contentPart
+                .toLowerCase()
+                .indexOf(highlight.toLowerCase());
+            while (end > -1) {
+                contentSlices.push(contentPart.substring(0, end));
+                contentSlices.push(h("span", { class: styleClass + '--highlighted' }, contentPart.substring(end, end + highlight.length)));
+                contentPart = contentPart.substring(end + highlight.length, contentPart.length);
+                end = contentPart
+                    .toLowerCase()
+                    .indexOf(highlight.toLowerCase());
+            }
+            if (end < contentPart.length) {
+                contentSlices.push(contentPart.substring(end, contentPart.length));
+            }
+        }
+        else {
+            contentSlices.push(content);
+        }
+        return (h("span", { class: styleClass, ref: (el) => this.contentRefs.push(el), title: this.preventXScroll ? content : null }, contentSlices));
+    }
+    /**
+     * Given a KupTreeNode, reads through its data then composes and returns its JSX object.
+     * @param treeNodeData - The KupTreeNode object to parse.
+     * @param treeNodePath - A string containing the comma(,) separated indexes of the KupTreeNodes to use,
+     *    sorted from left to right, to access the current KupTreeNode starting from the data prop children object.
+     * @param treeNodeDepth - An integer to keep track of the depth level of the current KupTreeNode. Used for indentation.
+     * @returns The the JSX created from the current tree node.
+     */
+    renderTreeNode(treeNodeData, treeNodePath, treeNodeDepth = 0) {
+        // Creates the indentation of the current element. Use a css variable to specify padding.
+        let indent = treeNodeDepth ? (h("span", { class: "kup-tree__indent", style: {
+                ['--kup_tree_node_depth']: this.asAccordion
+                    ? (treeNodeDepth - 1).toString()
+                    : treeNodeDepth.toString(),
+            } })) : null;
+        // If the tree node is expandable, adds the icon to show the expansion.
+        // If expandable, also add the callback on the click action.
+        // If it is not expandable, we simply add a placeholder with no icons.
+        const hasExpandIcon = !!(treeNodeData.expandable &&
+            ((treeNodeData.children && treeNodeData.children.length) ||
+                this.useDynamicExpansion));
+        let expandClass = 'expand-icon kup-tree__icon kup-tree__node__expander';
+        if (hasExpandIcon) {
+            expandClass += ' kup-icon';
+            if (this.asAccordion && treeNodeDepth === 0) {
+                expandClass += ` ${KupThemeIconValues.DROPDOWN.replace('--', '')}`;
+            }
+            else if (treeNodeData.isExpanded) {
+                expandClass += ` ${KupThemeIconValues.EXPANDED.replace('--', '')}`;
             }
-          }
-        }
-      }, {
-        "method": "kupTreeNodeButtonClick",
-        "name": "kup-tree-buttonclick",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "KupTreeNodeButtonClickEventPayload",
-          "resolved": "KupTreeNodeButtonClickEventPayload",
-          "references": {
-            "KupTreeNodeButtonClickEventPayload": {
-              "location": "import",
-              "path": "./kup-tree-declarations",
-              "id": "src/components/kup-tree/kup-tree-declarations.ts::KupTreeNodeButtonClickEventPayload"
+            else {
+                expandClass += ` ${KupThemeIconValues.COLLAPSED.replace('--', '')}`;
             }
-          }
-        }
-      }, {
-        "method": "kupTreeContextMenu",
-        "name": "kup-tree-contextmenu",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Generic right click event on tree."
-        },
-        "complexType": {
-          "original": "KupTreeContextMenuEventPayload",
-          "resolved": "KupTreeContextMenuEventPayload",
-          "references": {
-            "KupTreeContextMenuEventPayload": {
-              "location": "import",
-              "path": "./kup-tree-declarations",
-              "id": "src/components/kup-tree/kup-tree-declarations.ts::KupTreeContextMenuEventPayload"
+        }
+        let treeExpandIcon = (h("span", { title: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageGeneric.EXPAND) +
+                '/' +
+                __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageGeneric.COLLAPSE) +
+                ' (CTRL + Click)', class: expandClass, onClick: this.expansionMode.toLowerCase() ===
+                KupTreeExpansionMode.DROPDOWN && !treeNodeData.disabled
+                ? (event) => {
+                    event.stopPropagation();
+                    this.hdlTreeNodeExpanderClick(treeNodeData, treeNodePath, event.ctrlKey);
+                }
+                : null }));
+        // When TreeNode icons are visible, creates the icon if one is specified
+        let treeNodeIcon = null;
+        if (this.showIcons) {
+            if (treeNodeData.icon) {
+                if (treeNodeData.icon === '') {
+                    treeNodeIcon = h("span", { class: "kup-tree__icon" });
+                }
+                else {
+                    treeNodeIcon = this.createIconElement('kup-tree__icon', treeNodeData.icon, treeNodeData.iconColor);
+                }
             }
-          }
-        }
-      }, {
-        "method": "kupTreeColumnMenu",
-        "name": "kup-tree-columnmenu",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "When the column menu is being opened/closed."
-        },
-        "complexType": {
-          "original": "KupTreeColumnMenuEventPayload",
-          "resolved": "KupTreeColumnMenuEventPayload",
-          "references": {
-            "KupTreeColumnMenuEventPayload": {
-              "location": "import",
-              "path": "./kup-tree-declarations",
-              "id": "src/components/kup-tree/kup-tree-declarations.ts::KupTreeColumnMenuEventPayload"
+            else {
+                treeNodeIcon = null;
             }
-          }
-        }
-      }, {
-        "method": "kupDidLoad",
-        "name": "kup-tree-didload",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "KupEventPayload",
-          "resolved": "KupEventPayload",
-          "references": {
-            "KupEventPayload": {
-              "location": "import",
-              "path": "../../types/GenericTypes",
-              "id": "src/types/GenericTypes.ts::KupEventPayload"
+        }
+        // Composes additional options for the tree node element
+        let treeNodeOptions = {};
+        if (treeNodeData.hasOwnProperty('isExpanded') &&
+            treeNodeData.isExpanded &&
+            hasExpandIcon) {
+            // If the node is expanded it has this attribute set to if this node is expanded or not.
+            treeNodeOptions['data-is-expanded'] = treeNodeData.isExpanded;
+        }
+        // When can be expanded OR selected
+        if (!treeNodeData.disabled) {
+            treeNodeOptions['onClick'] = (e) => {
+                // Note: event must be cloned
+                // otherwise inside setTimeout will be exiting the Shadow DOM scope(causing loss of information, including target).
+                const clone = {};
+                for (const key in e) {
+                    clone[key] = e[key];
+                }
+                this.clickTimeout.push(setTimeout(() => this.hdlTreeNodeClick(clone, treeNodeData, treeNodePath), 300));
+            };
+        }
+        // When a tree node is displayed as a table
+        let treeNodeCells = null;
+        let visibleCols = this.getVisibleColumns();
+        if (this.showColumns && visibleCols && visibleCols.length) {
+            treeNodeCells = [];
+            // Renders all the cells
+            for (let j = 0; j < visibleCols.length; j++) {
+                const column = visibleCols[j];
+                if (treeNodeData.cells && treeNodeData.cells[column.name]) {
+                    const cell = treeNodeData.cells[column.name]
+                        ? treeNodeData.cells[column.name]
+                        : null;
+                    const cellProps = {
+                        cell: cell,
+                        column: column,
+                        component: this,
+                        density: this.density,
+                        editable: this.editableData,
+                        renderKup: true,
+                        row: treeNodeData,
+                        setSizes: true,
+                    };
+                    treeNodeCells.push(h("td", { class: `grid-cell`, "data-cell": cell, "data-column": column.name }, h(FCell, Object.assign({}, cellProps))));
+                }
+                else {
+                    treeNodeCells.push(h("td", { class: `grid-cell` }));
+                }
             }
-          }
-        }
-      }, {
-        "method": "kupDidUnload",
-        "name": "kup-tree-didunload",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Triggered when stop propagation event"
-        },
-        "complexType": {
-          "original": "KupEventPayload",
-          "resolved": "KupEventPayload",
-          "references": {
-            "KupEventPayload": {
-              "location": "import",
-              "path": "../../types/GenericTypes",
-              "id": "src/types/GenericTypes.ts::KupEventPayload"
+        }
+        let title = undefined;
+        if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.isEmptyKupObj(treeNodeData.obj) &&
+            __classPrivateFieldGet(this, _KupTree_kupManager, "f").debug.isDebug()) {
+            title =
+                treeNodeData.obj.t +
+                    '; ' +
+                    treeNodeData.obj.p +
+                    '; ' +
+                    treeNodeData.obj.k +
+                    ';';
+        }
+        let treeNodeCell = null;
+        if (this.isTreeColumnVisible()) {
+            let content = '';
+            if (KupGlobalFilterMode.HIGHLIGHT === this.globalFilterMode) {
+                content = this.renderHighlightedContent(treeNodeData.value, this.globalFilterValue, 'cell-content');
             }
-          }
-        }
-      }, {
-        "method": "kupTreeNodeDblClick",
-        "name": "kup-tree-nodedblclick",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "KupTreeNodeCollapseEventPayload",
-          "resolved": "KupTreeNodeCollapseEventPayload",
-          "references": {
-            "KupTreeNodeCollapseEventPayload": {
-              "location": "import",
-              "path": "./kup-tree-declarations",
-              "id": "src/components/kup-tree/kup-tree-declarations.ts::KupTreeNodeCollapseEventPayload"
+            else {
+                content = (h("span", { ref: (el) => this.contentRefs.push(el), class: "cell-content", title: this.preventXScroll ? treeNodeData.value : null }, treeNodeData.value));
             }
-          }
-        }
-      }, {
-        "method": "kupTreeDynamicMassExpansion",
-        "name": "kup-tree-dynamicmassexpansion",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "KupTreeDynamicMassExpansionEventPayload",
-          "resolved": "KupTreeDynamicMassExpansionEventPayload",
-          "references": {
-            "KupTreeDynamicMassExpansionEventPayload": {
-              "location": "import",
-              "path": "./kup-tree-declarations",
-              "id": "src/components/kup-tree/kup-tree-declarations.ts::KupTreeDynamicMassExpansionEventPayload"
+            treeNodeCell = (h("td", { class: {
+                    'first-node': treeNodeDepth === 0 ? true : false,
+                    'mdc-ripple-surface': this.ripple &&
+                        !this.showColumns &&
+                        !treeNodeData.disabled,
+                    'is-obj': !__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.isEmptyKupObj(treeNodeData.obj),
+                }, style: treeNodeData.style || null, title: title, onDblClick: () => {
+                    this.onKupTreeNodeDblClick(treeNodeData, treeNodePath);
+                } }, this.asAccordion && !treeNodeDepth
+                ? [
+                    treeNodeIcon,
+                    content,
+                    hasExpandIcon ? treeExpandIcon : null,
+                ]
+                : [indent, treeExpandIcon, treeNodeIcon, content]));
+        }
+        return (h("tr", Object.assign({ class: {
+                'kup-tree__node': true,
+                'with-dyn': !treeNodeData.disabled,
+                'kup-tree__node--disabled': treeNodeData.disabled,
+                'kup-tree__node--first': treeNodeDepth ? false : true,
+                'kup-tree__node--selected': !treeNodeData.disabled &&
+                    treeNodePath ===
+                        this.selectedNodeToString(this.selectedNode),
+            }, "data-row": treeNodeData, "data-tree-path": treeNodePath }, treeNodeOptions), treeNodeCell, treeNodeCells));
+    }
+    closeTotalMenu() {
+        this.openedTotalMenu = null;
+        __classPrivateFieldGet(this, _KupTree_kupManager, "f").removeClickCallback(this.clickCb);
+    }
+    isOpenedTotalMenuForColumn(column) {
+        return this.openedTotalMenu === column;
+    }
+    onTotalsChange(event, column) {
+        // close menu
+        this.closeTotalMenu();
+        if (column) {
+            // must do this
+            // otherwise does not fire the watcher
+            const totalsCopy = Object.assign({}, this.totals);
+            const value = event.detail.selected.id;
+            if (value === TotalLabel.CANC) {
+                if (this.totals && this.totals[column.name]) {
+                    delete totalsCopy[column.name];
+                }
             }
-          }
-        }
-      }, {
-        "method": "kupColumnRemove",
-        "name": "kup-tree-columnremove",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when columns are removed (set to hidden)."
-        },
-        "complexType": {
-          "original": "KupTreeColumnRemoveEventPayload",
-          "resolved": "KupTreeColumnRemoveEventPayload",
-          "references": {
-            "KupTreeColumnRemoveEventPayload": {
-              "location": "import",
-              "path": "./kup-tree-declarations",
-              "id": "src/components/kup-tree/kup-tree-declarations.ts::KupTreeColumnRemoveEventPayload"
+            else {
+                totalsCopy[column.name] = value;
             }
-          }
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "getSelectedNode": {
-        "complexType": {
-          "signature": "() => Promise<TreeNodePath>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "TreeNodePath": {
-              "location": "import",
-              "path": "./kup-tree-declarations",
-              "id": "src/components/kup-tree/kup-tree-declarations.ts::TreeNodePath"
+            this.totals = totalsCopy;
+        }
+    }
+    renderFooter() {
+        const nodesCell = h("td", null);
+        const footerCells = this.getVisibleColumns().map((column) => {
+            let totalMenu = undefined;
+            let menuLabel = TotalLabel.CALC;
+            const translation = {
+                [TotalLabel.AVERAGE]: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageTotals.AVERAGE),
+                [TotalLabel.CALC]: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageTotals.CALCULATE),
+                [TotalLabel.CANC]: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageTotals.CANCEL),
+                [TotalLabel.COUNT]: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageTotals.COUNT),
+                [TotalLabel.DISTINCT]: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageTotals.DISTINCT),
+                [TotalLabel.MATH]: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageTotals.FORMULA),
+                [TotalLabel.MAX]: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageTotals.MAXIMUM),
+                [TotalLabel.MIN]: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageTotals.MINIMUM),
+                [TotalLabel.SUM]: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageTotals.SUM),
+            };
+            if (this.totals) {
+                const totalValue = this.totals[column.name];
+                if (totalValue) {
+                    if (totalValue.startsWith(TotalMode.MATH)) {
+                        menuLabel = TotalLabel.MATH;
+                    }
+                    else {
+                        switch (totalValue) {
+                            case TotalMode.COUNT:
+                                menuLabel = TotalLabel.COUNT;
+                                break;
+                            case TotalMode.DISTINCT:
+                                menuLabel = TotalLabel.DISTINCT;
+                                break;
+                            case TotalMode.SUM:
+                                menuLabel = TotalLabel.SUM;
+                                break;
+                            case TotalMode.AVERAGE:
+                                menuLabel = TotalLabel.AVERAGE;
+                                break;
+                            case TotalMode.MIN:
+                                menuLabel = TotalLabel.MIN;
+                                break;
+                            case TotalMode.MAX:
+                                menuLabel = TotalLabel.MAX;
+                                break;
+                            default:
+                                break;
+                        }
+                    }
+                }
             }
-          },
-          "return": "Promise<TreeNodePath>"
-        },
-        "docs": {
-          "text": "This method will get the selected nodes of the component.",
-          "tags": []
-        }
-      },
-      "setSelectedNode": {
-        "complexType": {
-          "signature": "(treeNodePath: string, emitEvent?: boolean) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "emitEvent - The event will always be emitted unless emitEvent is set to false."
-                }],
-              "text": "- The event will always be emitted unless emitEvent is set to false."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+            if (this.isOpenedTotalMenuForColumn(column.name)) {
+                let listData = [
+                    {
+                        id: TotalMode.COUNT,
+                        value: translation[TotalLabel.COUNT],
+                    },
+                    {
+                        id: TotalMode.DISTINCT,
+                        value: translation[TotalLabel.DISTINCT],
+                    },
+                ];
+                if (__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.isNumber(column.obj)) {
+                    listData.push({
+                        id: TotalMode.SUM,
+                        value: translation[TotalLabel.SUM],
+                    }, {
+                        id: TotalMode.AVERAGE,
+                        value: translation[TotalLabel.AVERAGE],
+                    }, {
+                        id: TotalMode.MIN,
+                        value: translation[TotalLabel.MIN],
+                    }, {
+                        id: TotalMode.MAX,
+                        value: translation[TotalLabel.MAX],
+                    });
+                }
+                let selectedItem = listData.find((item) => item.value === menuLabel);
+                if (selectedItem) {
+                    selectedItem.selected = true;
+                    listData.push({
+                        id: TotalLabel.CANC,
+                        separator: true,
+                        value: translation[TotalLabel.CANC],
+                    });
+                }
+                totalMenu = (h("kup-list", { class: `total-menu`, data: listData, id: "totals-menu", "is-menu": true, keyboardNavigation: true, "menu-visible": true, "onkup-list-click": (event) => this.onTotalsChange(event, column) }));
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "This method will set the selected rows of the component.",
-          "tags": [{
-              "name": "param",
-              "text": "rowsIdentifiers - Array of ids (dataset) or indexes (rendered rows)."
-            }, {
-              "name": "param",
-              "text": "emitEvent - The event will always be emitted unless emitEvent is set to false."
-            }]
-        }
-      },
-      "isEmpty": {
-        "complexType": {
-          "signature": "() => Promise<boolean>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+            let value;
+            if (menuLabel === TotalLabel.COUNT ||
+                menuLabel === TotalLabel.DISTINCT) {
+                value = this.footer[column.name];
             }
-          },
-          "return": "Promise<boolean>"
-        },
-        "docs": {
-          "text": "True if there aren't visible nodes",
-          "tags": []
-        }
-      },
-      "closeColumnMenu": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+            else {
+                value = __classPrivateFieldGet(this, _KupTree_kupManager, "f").math.numberToFormattedString(this.footer[column.name], column.decimals, column.obj ? column.obj.p : '');
+            }
+            return (h("td", { "data-column": column.name }, totalMenu, h("span", { class: "totals-value", title: translation[menuLabel] }, value)));
+        });
+        return (h("tfoot", null, h("tr", null, nodesCell, footerCells)));
+    }
+    didLoadInteractables() {
+        this.interactableTouch.push(this.treeWrapperRef);
+        const tapCb = (e) => {
+            if (this.hold) {
+                this.hold = false;
+                return;
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Closes any opened column menu.",
-          "tags": []
-        }
-      },
-      "collapseAll": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+            switch (e.button) {
+                // right click
+                case 2:
+                    this.kupTreeContextMenu.emit({
+                        comp: this,
+                        id: this.rootElement.id,
+                        details: this.contextMenuHandler(e),
+                    });
+                    break;
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Collapses all nodes.",
-          "tags": []
-        }
-      },
-      "expandAll": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        };
+        const holdCb = (e) => {
+            if (e.pointerType === 'pen' || e.pointerType === 'touch') {
+                this.hold = true;
+                this.kupTreeContextMenu.emit({
+                    comp: this,
+                    id: this.rootElement.id,
+                    details: this.contextMenuHandler(e),
+                });
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Expands all nodes.",
-          "tags": []
-        }
-      },
-      "getProps": {
-        "complexType": {
-          "signature": "(descriptions?: boolean) => Promise<GenericObject>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "descriptions - When provided and true, the result will be the list of props with their description."
-                }],
-              "text": "- When provided and true, the result will be the list of props with their description."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        };
+        __classPrivateFieldGet(this, _KupTree_kupManager, "f").interact.on(this.treeWrapperRef, KupPointerEventTypes.TAP, tapCb);
+        __classPrivateFieldGet(this, _KupTree_kupManager, "f").interact.on(this.treeWrapperRef, KupPointerEventTypes.HOLD, holdCb);
+    }
+    totalMenuPosition() {
+        if (this.rootElement.shadowRoot) {
+            const menu = this.rootElement.shadowRoot.querySelector('#totals-menu');
+            if (menu) {
+                __classPrivateFieldGet(this, _KupTree_kupManager, "f").dynamicPosition.register(menu, this.totalMenuCoords);
+                if (!this.clickCb) {
+                    this.clickCb = {
+                        cb: () => {
+                            this.closeTotalMenu();
+                            __classPrivateFieldGet(this, _KupTree_kupManager, "f").dynamicPosition.stop(menu);
+                        },
+                        el: menu,
+                    };
+                }
+                __classPrivateFieldGet(this, _KupTree_kupManager, "f").addClickCallback(this.clickCb, true);
+                __classPrivateFieldGet(this, _KupTree_kupManager, "f").dynamicPosition.start(menu);
+                menu.menuVisible = true;
+            }
+        }
+    }
+    /**
+     * Given a KupTreeNode, reads through its data to compose and return the KupTreeNodes of the root of this KupTreeNode
+     * and its children nodes, composing an array of JSX KupTreeNodes.
+     * @param treeNodeData - The KupTreeNode object to parse.
+     * @param treeNodePath - A string containing the comma(,) separated indexes of the KupTreeNodes to use,
+     *    sorted from left to right, to access the current KupTreeNode starting from the data prop children object.
+     * @param treeNodeDepth - An integer to keep track of the depth level of the current KupTreeNode. Used for indentation.
+     * @returns An array of JSX KupTreeNodes created from the given treeNodeData.
+     */
+    renderTree(treeNodeData, treeNodePath, treeNodeDepth = 0) {
+        let treeNodes = [];
+        if (treeNodeData && treeNodeData.visible == true) {
+            // Creates and adds the root of the current tree
+            treeNodes.push(this.renderTreeNode(treeNodeData, treeNodePath, treeNodeDepth));
+            // Checks if the current node can be expanded, has children object, has children and is expanded
+            if (treeNodeData.expandable &&
+                treeNodeData.children &&
+                treeNodeData.children.length &&
+                treeNodeData.isExpanded) {
+                for (let i = 0; i < treeNodeData.children.length; i++) {
+                    treeNodes = treeNodes.concat(this.renderTree(treeNodeData.children[i], treeNodePath + ',' + i, treeNodeDepth + 1));
+                }
+            }
+        }
+        return treeNodes;
+    }
+    setEllipsis() {
+        const treeRect = this.rootElement.getBoundingClientRect();
+        for (let index = 0; index < this.contentRefs.length; index++) {
+            const content = this.contentRefs[index];
+            if (content) {
+                const cell = content.parentNode;
+                if (this.asAccordion && cell.classList.contains('first-node')) {
+                    cell.style.width = treeRect.width + 'px';
+                }
+                else {
+                    content.classList.remove('cell-content--ellipsis');
+                    content.style.setProperty('--kup_tree_content_width', ``);
+                    const rect = content.getBoundingClientRect();
+                    if (rect.right > treeRect.right) {
+                        const failsafeOffset = 5;
+                        const delta = rect.right - treeRect.right;
+                        content.classList.add('cell-content--ellipsis');
+                        content.style.setProperty('--kup_tree_content_width', `${rect.width - delta - failsafeOffset}px`);
+                    }
+                }
+            }
+        }
+    }
+    /*-------------------------------------------------*/
+    /*          L i f e c y c l e   H o o k s          */
+    /*-------------------------------------------------*/
+    componentWillLoad() {
+        __classPrivateFieldGet(this, _KupTree_kupManager, "f").debug.logLoad(this, false);
+        __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.register(this);
+        __classPrivateFieldGet(this, _KupTree_kupManager, "f").theme.register(this);
+        this.columnMenuInstance = new KupColumnMenu();
+        this.refreshStructureState();
+    }
+    componentDidLoad() {
+        this.didLoadInteractables();
+        this.kupDidLoad.emit({ comp: this, id: this.rootElement.id });
+        __classPrivateFieldGet(this, _KupTree_kupManager, "f").resize.observe(this.rootElement);
+        __classPrivateFieldGet(this, _KupTree_kupManager, "f").debug.logLoad(this, true);
+    }
+    componentWillRender() {
+        __classPrivateFieldGet(this, _KupTree_kupManager, "f").debug.logRender(this, false);
+        if (this.showFooter && this.columns) {
+            this.footer = calcTotals(normalizeRows(this.getColumns(), this.nodesToRows()), this.totals);
+        }
+        this.filterNodes();
+    }
+    componentDidRender() {
+        const root = this.rootElement.shadowRoot;
+        if (root && this.ripple) {
+            const rippleCells = root.querySelectorAll('.mdc-ripple-surface:not(.mdc-ripple-upgraded)');
+            if (rippleCells) {
+                for (let i = 0; i < rippleCells.length; i++) {
+                    MDCRipple.attachTo(rippleCells[i]);
+                }
+            }
+        }
+        if (root) {
+            const fs = root.querySelectorAll('.f-text-field');
+            for (let index = 0; index < fs.length; index++) {
+                FTextFieldMDC(fs[index]);
+            }
+        }
+        if (this.preventXScroll) {
+            this.setEllipsis();
+        }
+        this.totalMenuPosition();
+        this.checkScrollOnHover();
+        this.setDynPosElements();
+        // *** Store
+        this.persistState();
+        // ***
+        this.oldWidth = this.rootElement.clientWidth;
+        __classPrivateFieldGet(this, _KupTree_kupManager, "f").debug.logRender(this, true);
+    }
+    render() {
+        this.contentRefs = [];
+        this.sizedColumns = this.getSizedColumns();
+        let wrapperClass = 'density-medium';
+        switch (this.density) {
+            case FCellPadding.DENSE:
+                wrapperClass = 'density-dense';
+                break;
+            case FCellPadding.WIDE:
+                wrapperClass = 'density-wide';
+                break;
+        }
+        // Composes TreeNodes
+        let treeNodes = [];
+        if (this.data && this.data.length) {
+            this.data.forEach((zeroDepthNode, index) => {
+                treeNodes = treeNodes.concat(this.renderTree(zeroDepthNode, index.toString()));
+            });
+        }
+        else {
+            // There are no TreeNodes, so we print a single cell with a caption
+            treeNodes.push(h("tr", null, h("td", null, __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageGeneric.EMPTY_DATA))));
+        }
+        // Calculates if header must be shown or not
+        const visibleHeader = this.showHeader && this.showColumns;
+        let filterField = null;
+        if (this.globalFilter &&
+            this.data &&
+            this.data.length &&
+            this.data.length > 0) {
+            filterField = (h("div", { id: "global-filter" }, h("kup-text-field", { fullWidth: true, label: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), icon: KupThemeIconValues.SEARCH, initialValue: this.globalFilterValue, "onkup-textfield-input": (event) => {
+                    window.clearTimeout(this.globalFilterTimeout);
+                    this.globalFilterTimeout = window.setTimeout(() => this.onGlobalFilterChange(event), 600);
+                } })));
+        }
+        return (h(Host, null, h("style", null, __classPrivateFieldGet(this, _KupTree_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId, class: wrapperClass }, filterField, h("div", { class: "wrapper", ref: (el) => (this.treeWrapperRef =
+                el) }, h("table", { class: "kup-tree", "data-show-columns": this.showColumns, onContextMenu: (e) => {
+                e.preventDefault();
+            } }, h("thead", { class: {
+                'header--is-visible': visibleHeader,
+            } }, h("tr", null, visibleHeader ? this.renderHeader() : null)), h("tbody", null, treeNodes), (this.showFooter || this.hasTotals()) &&
+            this.columns
+            ? this.renderFooter()
+            : null)))));
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.register(this);
+        __classPrivateFieldGet(this, _KupTree_kupManager, "f").resize.unobserve(this.rootElement);
+        __classPrivateFieldGet(this, _KupTree_kupManager, "f").theme.unregister(this);
+        const dynamicPositionElements = this.rootElement.shadowRoot.querySelectorAll('[' + kupDynamicPositionAttribute + ']');
+        if (dynamicPositionElements.length > 0) {
+            __classPrivateFieldGet(this, _KupTree_kupManager, "f").dynamicPosition.unregister(Array.prototype.slice.call(dynamicPositionElements));
+        }
+        if (this.columnMenuCard) {
+            this.columnMenuCard.remove();
+        }
+        if (this.scrollOnHover) {
+            __classPrivateFieldGet(this, _KupTree_kupManager, "f").scrollOnHover.unregister(this.treeWrapperRef);
+        }
+        this.kupDidUnload.emit({ comp: this, id: this.rootElement.id });
+    }
+    static get is() { return "kup-tree"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kup-tree.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kup-tree.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "asAccordion": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "When enabled, the first level of depth will give an accordion look to nodes."
+                },
+                "attribute": "as-accordion",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "columns": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "KupDataColumn[]",
+                    "resolved": "KupDataColumn[]",
+                    "references": {
+                        "KupDataColumn": {
+                            "location": "import",
+                            "path": "../../managers/kup-data/kup-data-declarations",
+                            "id": "src/managers/kup-data/kup-data-declarations.ts::KupDataColumn"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The columns of the tree when tree visualization is active."
+                }
+            },
+            "customStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"\""
+                        }, {
+                            "name": "see",
+                            "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
+                        }],
+                    "text": "Custom style of the component."
+                },
+                "attribute": "custom-style",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "data": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "KupTreeNode[]",
+                    "resolved": "KupTreeNode[]",
+                    "references": {
+                        "KupTreeNode": {
+                            "location": "import",
+                            "path": "./kup-tree-declarations",
+                            "id": "src/components/kup-tree/kup-tree-declarations.ts::KupTreeNode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The json data used to populate the tree view: the basic, always visible tree nodes."
+                },
+                "defaultValue": "[]"
+            },
+            "density": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FCellPadding",
+                    "resolved": "FCellPadding.DENSE | FCellPadding.MEDIUM | FCellPadding.NONE | FCellPadding.WIDE",
+                    "references": {
+                        "FCellPadding": {
+                            "location": "import",
+                            "path": "../../f-components/f-cell/f-cell-declarations",
+                            "id": "src/f-components/f-cell/f-cell-declarations.ts::FCellPadding"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The density of the rows, defaults at 'medium' and can also be set to 'dense' or 'wide'."
+                },
+                "attribute": "density",
+                "reflect": false,
+                "defaultValue": "FCellPadding.MEDIUM"
+            },
+            "dynamicExpansionCallback": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(\r\n        treeNodeToExpand: KupTreeNode,\r\n        treeNodePath: TreeNodePath\r\n    ) => Promise<KupTreeNode[]> | undefined",
+                    "resolved": "(treeNodeToExpand: KupTreeNode, treeNodePath: TreeNodePath) => Promise<KupTreeNode[]>",
+                    "references": {
+                        "KupTreeNode": {
+                            "location": "import",
+                            "path": "./kup-tree-declarations",
+                            "id": "src/components/kup-tree/kup-tree-declarations.ts::KupTreeNode"
+                        },
+                        "TreeNodePath": {
+                            "location": "import",
+                            "path": "./kup-tree-declarations",
+                            "id": "src/components/kup-tree/kup-tree-declarations.ts::TreeNodePath"
+                        },
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "see",
+                            "text": "useDynamicExpansion"
+                        }],
+                    "text": "Function that gets invoked when a new set of nodes must be loaded as children of a node.\r\n\r\nWhen useDynamicExpansion is set, the tree component will have two different behaviors depending on the value of this prop.\r\n1 - If this prop is set to null, no callback to download data is available:\r\n   the component will emit an event requiring the parent to load the children of the given node.\r\n2 - If this prop is set to have a callback, then the component will automatically make requests to load children of\r\n   a given node. After the load has been completed, a different event will be fired to alert the parent of the change."
+                },
+                "defaultValue": "undefined"
+            },
+            "editableData": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "When set to true, editable cells will be rendered using input components."
+                },
+                "attribute": "editable-data",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "enableExtraColumns": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables the extracolumns add buttons."
+                },
+                "attribute": "enable-extra-columns",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "expanded": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Flag: the nodes of the whole tree must be already expanded upon loading. Disabled nodes do NOT get expanded."
+                },
+                "attribute": "expanded",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "expansionMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupTreeExpansionMode",
+                    "resolved": "KupTreeExpansionMode.DROPDOWN | KupTreeExpansionMode.NODE",
+                    "references": {
+                        "KupTreeExpansionMode": {
+                            "location": "import",
+                            "path": "./kup-tree-declarations",
+                            "id": "src/components/kup-tree/kup-tree-declarations.ts::KupTreeExpansionMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "KupTreeExpansionMode.DROPDOWN"
+                        }],
+                    "text": "Behavior of nodes' expansion: it can be chosen between expanding a node by clicking on the dropdown icon, or by clicking on the whole node."
+                },
+                "attribute": "expansion-mode",
+                "reflect": false,
+                "defaultValue": "KupTreeExpansionMode.DROPDOWN"
+            },
+            "filters": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "GenericFilter",
+                    "resolved": "GenericFilter",
+                    "references": {
+                        "GenericFilter": {
+                            "location": "import",
+                            "path": "../../utils/filters/filters-declarations",
+                            "id": "src/utils/filters/filters-declarations.ts::GenericFilter"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "List of filters set by the user."
+                },
+                "defaultValue": "{}"
+            },
+            "globalFilter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When set to true it activates the global filter."
+                },
+                "attribute": "global-filter",
+                "reflect": false,
+                "defaultValue": "false"
             },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes",
-              "id": "src/types/GenericTypes.ts::GenericObject"
+            "globalFilterValue": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the global filter."
+                },
+                "attribute": "global-filter-value",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "globalFilterMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupGlobalFilterMode",
+                    "resolved": "KupGlobalFilterMode.HIGHLIGHT | KupGlobalFilterMode.SIMPLE",
+                    "references": {
+                        "KupGlobalFilterMode": {
+                            "location": "import",
+                            "path": "../../utils/filters/filters-declarations",
+                            "id": "src/utils/filters/filters-declarations.ts::KupGlobalFilterMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The mode of the global filter (default SIMPLE)"
+                },
+                "attribute": "global-filter-mode",
+                "reflect": false,
+                "defaultValue": "KupGlobalFilterMode.SIMPLE"
+            },
+            "preventXScroll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false;"
+                        }],
+                    "text": "Experimental feature: when active, the tree will try to prevent horizontal overflowing elements by setting a width on the content of the table cells.\r\nIt works only on cells of the main column."
+                },
+                "attribute": "prevent-x-scroll",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "removableColumns": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the possibility to remove the selected column."
+                },
+                "attribute": "removable-columns",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "ripple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "When enabled displays Material's ripple effect on nodes (only when no columns are displayed)."
+                },
+                "attribute": "ripple",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "scrollOnHover": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Activates the scroll on hover function."
+                },
+                "attribute": "scroll-on-hover",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showColumns": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows the tree data as a table."
+                },
+                "attribute": "show-columns",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showFilters": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When set to true enables the column filters."
+                },
+                "attribute": "show-filters",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "showFooter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When set to true shows the footer."
+                },
+                "attribute": "show-footer",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showHeader": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "see",
+                            "text": "showColumns"
+                        }],
+                    "text": "Flag: shows the header of the tree when the tree is displayed as a table."
+                },
+                "attribute": "show-header",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showIcons": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows the icons of the nodes."
+                },
+                "attribute": "show-icons",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "stateId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "state-id",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "store": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupStore",
+                    "resolved": "KupStore",
+                    "references": {
+                        "KupStore": {
+                            "location": "import",
+                            "path": "../kup-state/kup-store",
+                            "id": "src/components/kup-state/kup-store.ts::KupStore"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "useDynamicExpansion": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "see",
+                            "text": "dynamicExpansionCallback"
+                        }],
+                    "text": "When the component must use the dynamic expansion feature to open its nodes, it means that not all the nodes of the\r\ntree have been passed inside the data property.\r\n\r\nTherefore, when expanding a node, the tree must emit an event (or run a given callback)\r\nand wait for the child nodes to be downloaded from the server.\r\n\r\nFor more information:"
+                },
+                "attribute": "use-dynamic-expansion",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "totals": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "TotalsMap",
+                    "resolved": "TotalsMap",
+                    "references": {
+                        "TotalsMap": {
+                            "location": "import",
+                            "path": "./../kup-data-table/kup-data-table-declarations",
+                            "id": "src/components/kup-data-table/kup-data-table-declarations.ts::TotalsMap"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the current totals options."
+                }
             }
-          },
-          "return": "Promise<GenericObject>"
-        },
-        "docs": {
-          "text": "Used to retrieve component's props values.",
-          "tags": [{
-              "name": "param",
-              "text": "descriptions - When provided and true, the result will be the list of props with their description."
+        };
+    }
+    static get states() {
+        return {
+            "treeColumnVisible": {},
+            "openedTotalMenu": {},
+            "columnMenuAnchor": {},
+            "stateSwitcher": {},
+            "selectedNode": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "kupTreeNodeCollapse",
+                "name": "kup-tree-nodecollapse",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when a KupTreeNode gets collapsed (closed)."
+                },
+                "complexType": {
+                    "original": "KupTreeNodeCollapseEventPayload",
+                    "resolved": "KupTreeNodeCollapseEventPayload",
+                    "references": {
+                        "KupTreeNodeCollapseEventPayload": {
+                            "location": "import",
+                            "path": "./kup-tree-declarations",
+                            "id": "src/components/kup-tree/kup-tree-declarations.ts::KupTreeNodeCollapseEventPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "kupTreeNodeExpand",
+                "name": "kup-tree-nodeexpand",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "kup-tree-nodeexpand"
+                        }, {
+                            "name": "type",
+                            "text": "{object}"
+                        }, {
+                            "name": "property",
+                            "text": "{TreeNodePath} treeNodePath - The array of indexes to retrieve the current treeNode inside the data prop."
+                        }, {
+                            "name": "property",
+                            "text": "{KupTreeNode} treeNode - Reference to the KupTreeNode data object which is being expanded (passed through the data prop)."
+                        }, {
+                            "name": "property",
+                            "text": "{boolean} usesDynamicExpansion - Flag to notify that the component is running in dynamicExpansion mode."
+                        }, {
+                            "name": "property",
+                            "text": "{boolean} dynamicExpansionRequireChildren - Flag to notify that the current dynamicExpansion event\r\nrequires the parent component to add KupTreeNode children to the given KupTreeNode."
+                        }, {
+                            "name": "see",
+                            "text": "useDynamicExpansion *"
+                        }, {
+                            "name": "see",
+                            "text": "dynamicExpansionCallback *"
+                        }, {
+                            "name": "since",
+                            "text": "1.0.0"
+                        }],
+                    "text": "Fired when a node expansion ion has been triggered.\r\nContains additional data when the tree is using the dynamicExpansion feature."
+                },
+                "complexType": {
+                    "original": "KupTreeNodeExpandEventPayload",
+                    "resolved": "KupTreeNodeExpandEventPayload",
+                    "references": {
+                        "KupTreeNodeExpandEventPayload": {
+                            "location": "import",
+                            "path": "./kup-tree-declarations",
+                            "id": "src/components/kup-tree/kup-tree-declarations.ts::KupTreeNodeExpandEventPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "kupTreeNodeSelected",
+                "name": "kup-tree-nodeselected",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when a node of the tree has been selected"
+                },
+                "complexType": {
+                    "original": "KupTreeNodeSelectedEventPayload",
+                    "resolved": "KupTreeNodeSelectedEventPayload",
+                    "references": {
+                        "KupTreeNodeSelectedEventPayload": {
+                            "location": "import",
+                            "path": "./kup-tree-declarations",
+                            "id": "src/components/kup-tree/kup-tree-declarations.ts::KupTreeNodeSelectedEventPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "kupTreeNodeButtonClick",
+                "name": "kup-tree-buttonclick",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "KupTreeNodeButtonClickEventPayload",
+                    "resolved": "KupTreeNodeButtonClickEventPayload",
+                    "references": {
+                        "KupTreeNodeButtonClickEventPayload": {
+                            "location": "import",
+                            "path": "./kup-tree-declarations",
+                            "id": "src/components/kup-tree/kup-tree-declarations.ts::KupTreeNodeButtonClickEventPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "kupTreeContextMenu",
+                "name": "kup-tree-contextmenu",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Generic right click event on tree."
+                },
+                "complexType": {
+                    "original": "KupTreeContextMenuEventPayload",
+                    "resolved": "KupTreeContextMenuEventPayload",
+                    "references": {
+                        "KupTreeContextMenuEventPayload": {
+                            "location": "import",
+                            "path": "./kup-tree-declarations",
+                            "id": "src/components/kup-tree/kup-tree-declarations.ts::KupTreeContextMenuEventPayload"
+                        }
+                    }
+                }
             }, {
-              "name": "returns",
-              "text": "List of props as object, each key will be a prop."
-            }]
-        }
-      },
-      "hideColumn": {
-        "complexType": {
-          "signature": "(column: KupDataColumn) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "column - Column to hide."
-                }],
-              "text": "- Column to hide."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+                "method": "kupTreeColumnMenu",
+                "name": "kup-tree-columnmenu",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "When the column menu is being opened/closed."
+                },
+                "complexType": {
+                    "original": "KupTreeColumnMenuEventPayload",
+                    "resolved": "KupTreeColumnMenuEventPayload",
+                    "references": {
+                        "KupTreeColumnMenuEventPayload": {
+                            "location": "import",
+                            "path": "./kup-tree-declarations",
+                            "id": "src/components/kup-tree/kup-tree-declarations.ts::KupTreeColumnMenuEventPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "kupDidLoad",
+                "name": "kup-tree-didload",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "KupEventPayload",
+                    "resolved": "KupEventPayload",
+                    "references": {
+                        "KupEventPayload": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::KupEventPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "kupDidUnload",
+                "name": "kup-tree-didunload",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Triggered when stop propagation event"
+                },
+                "complexType": {
+                    "original": "KupEventPayload",
+                    "resolved": "KupEventPayload",
+                    "references": {
+                        "KupEventPayload": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::KupEventPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "kupTreeNodeDblClick",
+                "name": "kup-tree-nodedblclick",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "KupTreeNodeCollapseEventPayload",
+                    "resolved": "KupTreeNodeCollapseEventPayload",
+                    "references": {
+                        "KupTreeNodeCollapseEventPayload": {
+                            "location": "import",
+                            "path": "./kup-tree-declarations",
+                            "id": "src/components/kup-tree/kup-tree-declarations.ts::KupTreeNodeCollapseEventPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "kupTreeDynamicMassExpansion",
+                "name": "kup-tree-dynamicmassexpansion",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "KupTreeDynamicMassExpansionEventPayload",
+                    "resolved": "KupTreeDynamicMassExpansionEventPayload",
+                    "references": {
+                        "KupTreeDynamicMassExpansionEventPayload": {
+                            "location": "import",
+                            "path": "./kup-tree-declarations",
+                            "id": "src/components/kup-tree/kup-tree-declarations.ts::KupTreeDynamicMassExpansionEventPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "kupColumnRemove",
+                "name": "kup-tree-columnremove",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event fired when columns are removed (set to hidden)."
+                },
+                "complexType": {
+                    "original": "KupTreeColumnRemoveEventPayload",
+                    "resolved": "KupTreeColumnRemoveEventPayload",
+                    "references": {
+                        "KupTreeColumnRemoveEventPayload": {
+                            "location": "import",
+                            "path": "./kup-tree-declarations",
+                            "id": "src/components/kup-tree/kup-tree-declarations.ts::KupTreeColumnRemoveEventPayload"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getSelectedNode": {
+                "complexType": {
+                    "signature": "() => Promise<TreeNodePath>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "TreeNodePath": {
+                            "location": "import",
+                            "path": "./kup-tree-declarations",
+                            "id": "src/components/kup-tree/kup-tree-declarations.ts::TreeNodePath"
+                        }
+                    },
+                    "return": "Promise<TreeNodePath>"
+                },
+                "docs": {
+                    "text": "This method will get the selected nodes of the component.",
+                    "tags": []
+                }
             },
-            "KupDataColumn": {
-              "location": "import",
-              "path": "../../managers/kup-data/kup-data-declarations",
-              "id": "src/managers/kup-data/kup-data-declarations.ts::KupDataColumn"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Hides the given column.",
-          "tags": [{
-              "name": "param",
-              "text": "column - Column to hide."
-            }]
-        }
-      },
-      "openColumnMenu": {
-        "complexType": {
-          "signature": "(column: string) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "column - Name of the column."
-                }],
-              "text": "- Name of the column."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+            "setSelectedNode": {
+                "complexType": {
+                    "signature": "(treeNodePath: string, emitEvent?: boolean) => Promise<void>",
+                    "parameters": [{
+                            "tags": [],
+                            "text": ""
+                        }, {
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "emitEvent - The event will always be emitted unless emitEvent is set to false."
+                                }],
+                            "text": "- The event will always be emitted unless emitEvent is set to false."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "This method will set the selected rows of the component.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "rowsIdentifiers - Array of ids (dataset) or indexes (rendered rows)."
+                        }, {
+                            "name": "param",
+                            "text": "emitEvent - The event will always be emitted unless emitEvent is set to false."
+                        }]
+                }
             },
-            "CustomEvent": {
-              "location": "global",
-              "id": "global::CustomEvent"
+            "isEmpty": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "True if there aren't visible nodes",
+                    "tags": []
+                }
             },
-            "KupEventPayload": {
-              "location": "import",
-              "path": "../../types/GenericTypes",
-              "id": "src/types/GenericTypes.ts::KupEventPayload"
+            "closeColumnMenu": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes any opened column menu.",
+                    "tags": []
+                }
             },
-            "KupCardEventPayload": {
-              "location": "import",
-              "path": "../kup-card/kup-card-declarations",
-              "id": "src/components/kup-card/kup-card-declarations.ts::KupCardEventPayload"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Opens the column menu of the given column.",
-          "tags": [{
-              "name": "param",
-              "text": "column - Name of the column."
-            }]
-        }
-      },
-      "refresh": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "This method is used to trigger a new render of the component.",
-          "tags": []
-        }
-      },
-      "resizeCallback": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "This method is invoked by KupManager whenever the component changes size.",
-          "tags": []
-        }
-      },
-      "setProps": {
-        "complexType": {
-          "signature": "(props: GenericObject) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "props - Object containing props that will be set to the component."
-                }],
-              "text": "- Object containing props that will be set to the component."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+            "collapseAll": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Collapses all nodes.",
+                    "tags": []
+                }
             },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes",
-              "id": "src/types/GenericTypes.ts::GenericObject"
+            "expandAll": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Expands all nodes.",
+                    "tags": []
+                }
+            },
+            "getProps": {
+                "complexType": {
+                    "signature": "(descriptions?: boolean) => Promise<GenericObject>",
+                    "parameters": [{
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "descriptions - When provided and true, the result will be the list of props with their description."
+                                }],
+                            "text": "- When provided and true, the result will be the list of props with their description."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "GenericObject": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::GenericObject"
+                        }
+                    },
+                    "return": "Promise<GenericObject>"
+                },
+                "docs": {
+                    "text": "Used to retrieve component's props values.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "descriptions - When provided and true, the result will be the list of props with their description."
+                        }, {
+                            "name": "returns",
+                            "text": "List of props as object, each key will be a prop."
+                        }]
+                }
+            },
+            "hideColumn": {
+                "complexType": {
+                    "signature": "(column: KupDataColumn) => Promise<void>",
+                    "parameters": [{
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "column - Column to hide."
+                                }],
+                            "text": "- Column to hide."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KupDataColumn": {
+                            "location": "import",
+                            "path": "../../managers/kup-data/kup-data-declarations",
+                            "id": "src/managers/kup-data/kup-data-declarations.ts::KupDataColumn"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Hides the given column.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "column - Column to hide."
+                        }]
+                }
+            },
+            "openColumnMenu": {
+                "complexType": {
+                    "signature": "(column: string) => Promise<void>",
+                    "parameters": [{
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "column - Name of the column."
+                                }],
+                            "text": "- Name of the column."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "CustomEvent": {
+                            "location": "global",
+                            "id": "global::CustomEvent"
+                        },
+                        "KupEventPayload": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::KupEventPayload"
+                        },
+                        "KupCardEventPayload": {
+                            "location": "import",
+                            "path": "../kup-card/kup-card-declarations",
+                            "id": "src/components/kup-card/kup-card-declarations.ts::KupCardEventPayload"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the column menu of the given column.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "column - Name of the column."
+                        }]
+                }
+            },
+            "refresh": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "This method is used to trigger a new render of the component.",
+                    "tags": []
+                }
+            },
+            "resizeCallback": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "This method is invoked by KupManager whenever the component changes size.",
+                    "tags": []
+                }
+            },
+            "setProps": {
+                "complexType": {
+                    "signature": "(props: GenericObject) => Promise<void>",
+                    "parameters": [{
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "props - Object containing props that will be set to the component."
+                                }],
+                            "text": "- Object containing props that will be set to the component."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "GenericObject": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::GenericObject"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets the props to the component.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "props - Object containing props that will be set to the component."
+                        }]
+                }
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets the props to the component.",
-          "tags": [{
-              "name": "param",
-              "text": "props - Object containing props that will be set to the component."
-            }]
-        }
-      }
-    };
-  }
-  static get elementRef() { return "rootElement"; }
-  static get watchers() {
-    return [{
-        "propName": "data",
-        "methodName": "enrichDataWhenChanged"
-      }, {
-        "propName": "expanded",
-        "methodName": "enrichStructureStateWhenChanged"
-      }];
-  }
+        };
+    }
+    static get elementRef() { return "rootElement"; }
+    static get watchers() {
+        return [{
+                "propName": "data",
+                "methodName": "enrichDataWhenChanged"
+            }, {
+                "propName": "expanded",
+                "methodName": "enrichStructureStateWhenChanged"
+            }];
+    }
 }
 _KupTree_kupManager = new WeakMap();