@sme.up/ketchup 4.0.0 → 4.2.0-SNAPSHOT

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

@@ -3,19 +3,22 @@ import { TotalLabel, TotalMode, } from './../kup-data-table/kup-data-table-decla
 import { KupTreeProps, treeExpandedPropName, treeMainColumnName, KupTreeExpansionMode, } from './kup-tree-declarations';
 import { MDCRipple } from '@material/ripple';
 import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
-import { calcTotals, normalizeRows, styleHasBorderRadius, styleHasWritingMode, } from '../kup-data-table/kup-data-table-helper';
+import { calcTotals, normalizeRows, } from '../kup-data-table/kup-data-table-helper';
 import { KupTreeState } from './kup-tree-state';
 import { setTooltip, unsetTooltip } from '../../utils/helpers';
-import { getCellType, getCellValueForDisplay, getColumnByName, } from '../../utils/cell-utils';
-import { deepEqual, getProps, numberToFormattedStringNumber, setProps, stringToNumber, } from '../../utils/utils';
+import { getColumnByName } from '../../utils/cell-utils';
+import { deepEqual, getProps, numberToFormattedStringNumber, setProps, } from '../../utils/utils';
 import { KupColumnMenu } from '../../utils/kup-column-menu/kup-column-menu';
 import { FiltersColumnMenu } from '../../utils/filters/filters-column-menu';
 import { KupGlobalFilterMode, } from '../../utils/filters/filters-declarations';
 import { FiltersTreeItems } from '../../utils/filters/filters-tree-items';
-import { kupDynamicPositionAttribute, KupDynamicPositionPlacement, } from '../../utils/kup-dynamic-position/kup-dynamic-position-declarations';
+import { kupDynamicPositionAttribute, } from '../../utils/kup-dynamic-position/kup-dynamic-position-declarations';
 import { KupLanguageGeneric, KupLanguageSearch, KupLanguageTotals, } from '../../utils/kup-language/kup-language-declarations';
 import { componentWrapperId } from '../../variables/GenericVariables';
 import { KupThemeIconValues } from '../../utils/kup-theme/kup-theme-declarations';
+import { KupPointerEventTypes } from '../../utils/kup-interact/kup-interact-declarations';
+import { FCellPadding, } from '../../f-components/f-cell/f-cell-declarations';
+import { FCell } from '../../f-components/f-cell/f-cell';
 export class KupTree {
   constructor() {
     /*-------------------------------------------------*/
@@ -55,7 +58,7 @@ export class KupTree {
     /**
      * The density of the rows, defaults at 'medium' and can also be set to 'dense' or 'wide'.
      */
-    this.density = 'medium';
+    this.density = FCellPadding.MEDIUM;
     /**
      * Function that gets invoked when a new set of nodes must be loaded as children of a node.
      *
@@ -68,6 +71,11 @@ export class KupTree {
      * @see useDynamicExpansion
      */
     this.dynamicExpansionCallback = undefined;
+    /**
+     * When set to true, editable cells will be rendered using input components.
+     * @default false
+     */
+    this.editableData = false;
     /**
      * Enables the extracolumns add buttons.
      */
@@ -175,13 +183,15 @@ export class KupTree {
     this.columnMenuCard = null;
     this.selectedColumn = '';
     this.clickTimeout = [];
-    this.iconPaths = undefined;
     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;
   }
   initWithPersistedState() {
     if (this.store && this.stateId) {
@@ -341,16 +351,6 @@ export class KupTree {
       this.columnMenuCard.layoutNumber = 12;
       this.columnMenuCard.sizeX = 'auto';
       this.columnMenuCard.sizeY = 'auto';
-      this.columnMenuCard.tabIndex = -1;
-      this.columnMenuCard.onblur = () => {
-        if (this.kupManager.utilities.lastPointerDownPath.includes(this.columnMenuCard)) {
-          this.columnMenuCard.focus();
-        }
-        else {
-          this.closeColumnMenu();
-        }
-      };
-      this.columnMenuCard.onclick = (e) => e.stopPropagation();
       this.columnMenuCard.addEventListener('kup-card-click', (e) => {
         this.kupTreeColumnMenu.emit({
           comp: this,
@@ -597,19 +597,6 @@ export class KupTree {
     }
     return details;
   }
-  onJ4btnClicked(treeNodeData, treeNodePath, column, auto) {
-    this.kupTreeNodeButtonClick.emit({
-      comp: this,
-      id: this.rootElement.id,
-      treeNodePath: treeNodePath
-        .split(',')
-        .map((treeNodeIndex) => parseInt(treeNodeIndex)),
-      treeNode: treeNodeData,
-      column: column,
-      columnName: column.name,
-      auto: auto,
-    });
-  }
   // When a TreeNode can be selected
   hdlTreeNodeClick(e, treeNodeData, treeNodePath, auto) {
     unsetTooltip(this.tooltip);
@@ -819,85 +806,6 @@ export class KupTree {
       return h("span", { style: iconStyle, class: CSSClass });
     }
   }
-  /**
-   * Factory function for cells.
-   * @param cell - cell object
-   * @param previousRowCellValue - An optional value of the previous cell on the same column. If set and equal to the value of the current cell, makes the value of the current cell go blank.
-   * @param cellData - Additional data for the current cell.
-   * @param cellData.column - The column object to which the cell belongs.
-   * @param cellData.treeNode - The treeNode object to which the cell belongs.
-   * @param cellData.treeNodePath - The treeNodePath to which the cell belongs.
-   */
-  renderCell(cell, cellData, previousRowCellValue) {
-    const classObj = {
-      'cell-content': true,
-      clickable: !!cellData.column.clickable,
-    };
-    // When the previous row value is different from the current value, we can show the current value.
-    const valueToDisplay = previousRowCellValue !== cell.value ? cell.value : '';
-    // Sets the default value
-    let content = valueToDisplay;
-    let cellType = this.getCellType(cell);
-    let props = Object.assign({}, cell.data);
-    classObj[cellType + '-cell'] = true;
-    if (cell.data) {
-      this.setCellSize(cellType, props, cell);
-      content = this.setKupCell(cellType, classObj, props, cell, cellData);
-    }
-    else {
-      content = this.setCell(cellType, content, classObj, cell, cellData.column);
-    }
-    // Elements of the cell
-    let cellElements = [];
-    let tdStyle = undefined;
-    let style = undefined;
-    if (styleHasBorderRadius(cell) || styleHasWritingMode(cell)) {
-      style = cell.style;
-      if (styleHasBorderRadius(cell) && !style['padding']) {
-        style['padding'] = '5px';
-      }
-      if (style['text-align']) {
-        style['float'] = style['text-align'];
-      }
-    }
-    else {
-      tdStyle = cell.style;
-    }
-    tdStyle = this.getCellStyle(cellData.column.name, tdStyle);
-    let icon = undefined;
-    if ((cellData.column.icon || cell.icon) && content) {
-      let svg = '';
-      if (cell.icon) {
-        svg = cell.icon;
-      }
-      else {
-        svg = cellData.column.icon;
-      }
-      svg = this.getIconPath(svg);
-      let iconStyle = {
-        mask: svg,
-        webkitMask: svg,
-      };
-      icon = h("span", { style: iconStyle, class: "kup-icon obj-icon" });
-    }
-    const _hasTooltip = this.kupManager.objects.hasTooltip(cell.obj);
-    let title = undefined;
-    if (_hasTooltip) {
-      classObj['is-obj'] = true;
-      if (this.kupManager.debug.isDebug()) {
-        title =
-          cell.obj.t + '; ' + cell.obj.p + '; ' + cell.obj.k + ';';
-      }
-    }
-    let cellClass = undefined;
-    if (cell.cssClass) {
-      cellClass = cell.cssClass;
-    }
-    cellElements.push(h("span", { title: title, style: style, class: classObj },
-      icon,
-      content));
-    return (h("td", Object.assign({ class: cellClass, onClick: () => (this.selectedColumn = cellData.column.name), style: tdStyle }, this.getToolTipEventHandlers(cellData.treeNode, cell, _hasTooltip)), cellElements));
-  }
   /**
    * Controls if current cell needs a tooltip and eventually adds it.
    * @todo When the option forceOneLine is active, there is a problem with the current implementation of the tooltip. See documentation in the mauer wiki for better understanding.
@@ -926,214 +834,6 @@ export class KupTree {
     }
     return eventHandlers;
   }
-  getIconPath(icon) {
-    let svg = '';
-    if (this.iconPaths) {
-      for (let index = 0; index < this.iconPaths.length || svg !== ''; index++) {
-        if (this.iconPaths[index].icon === icon) {
-          return this.iconPaths[index].path;
-        }
-      }
-    }
-    svg = `url('${getAssetPath(`./assets/svg/${icon}.svg`)}') no-repeat center`;
-    if (!this.iconPaths) {
-      this.iconPaths = [
-        {
-          icon: icon,
-          path: svg,
-        },
-      ];
-    }
-    else {
-      this.iconPaths.push({ icon: icon, path: svg });
-    }
-    return svg;
-  }
-  // TODO: cell type can depend also from shape (see isRating)
-  // NOTE: keep care to change conditions order... shape wins on object .. -> so if isNumber after shape checks.. ->
-  // TODO: more clear conditions when refactoring...
-  getCellType(cell) {
-    return getCellType(cell);
-  }
-  setCellSize(cellType, props, cell) {
-    switch (cellType) {
-      case 'bar':
-        if (!props.sizeY) {
-          props['sizeY'] = '26px';
-          if (this.density === 'medium') {
-            props['sizeY'] = '36px';
-          }
-          if (this.density === 'wide') {
-            props['sizeY'] = '50px';
-          }
-        }
-        break;
-      case 'button':
-        let height = '';
-        if (props.label) {
-          height = '36px';
-        }
-        else {
-          height = '48px';
-        }
-        if (cell.style) {
-          if (!cell.style.height) {
-            cell.style['minHeight'] = height;
-          }
-        }
-        else {
-          cell.style = { minHeight: height };
-        }
-        break;
-      case 'chart':
-        if (!props.sizeX) {
-          props['sizeX'] = '100%';
-        }
-        if (!props.sizeY) {
-          props['sizeY'] = '100%';
-        }
-        break;
-      case 'checkbox':
-        if (cell.style) {
-          if (!cell.style.height) {
-            cell.style['minHeight'] = '40px';
-          }
-        }
-        else {
-          cell.style = { minHeight: '40px' };
-        }
-        break;
-      case 'chips':
-        if (cell.style) {
-          if (!cell.style.height) {
-            cell.style['minHeight'] = '53px';
-          }
-        }
-        else {
-          cell.style = { minHeight: '53px' };
-        }
-        break;
-      case 'icon':
-        if (!props.sizeX) {
-          props['sizeX'] = '18px';
-        }
-        if (!props.sizeY) {
-          props['sizeY'] = '18px';
-        }
-        if (cell.style) {
-          if (!cell.style.height) {
-            cell.style['minHeight'] = props['sizeY'];
-          }
-        }
-        else {
-          cell.style = {
-            minHeight: props['sizeY'],
-          };
-        }
-        break;
-      case 'image':
-        if (!props.sizeX) {
-          props['sizeX'] = 'auto';
-        }
-        if (!props.sizeY) {
-          props['sizeY'] = '64px';
-        }
-        break;
-      case 'radio':
-        if (cell.style) {
-          if (!cell.style.height) {
-            cell.style['minHeight'] = '40px';
-          }
-        }
-        else {
-          cell.style = { minHeight: '40px' };
-        }
-        break;
-    }
-  }
-  setCell(cellType, content, classObj, cell, column) {
-    switch (cellType) {
-      case 'link':
-        return (h("a", { class: "cell-link", href: content, target: "_blank" }, content));
-      case 'number':
-        if (content && content != '') {
-          const cellValueNumber = stringToNumber(cell.value);
-          const cellValue = getCellValueForDisplay(column, cell);
-          if (cellValueNumber < 0) {
-            classObj['negative-number'] = true;
-          }
-          return h("span", { class: "text" }, cellValue);
-        }
-        return content;
-      case 'date':
-        if (content && content != '') {
-          const cellValue = getCellValueForDisplay(column, cell);
-          return h("span", { class: "text" }, cellValue);
-        }
-        return content;
-      case 'datetime':
-        if (content && content != '') {
-          const cellValue = getCellValueForDisplay(column, cell);
-          return h("span", { class: "text" }, cellValue);
-        }
-        return content;
-      case 'time':
-        if (content && content != '') {
-          const cellValue = getCellValueForDisplay(column, cell);
-          return h("span", { class: "text" }, cellValue);
-        }
-        return content;
-      case 'string':
-      default:
-        return h("span", { class: "text" }, content);
-    }
-  }
-  setKupCell(cellType, classObj, props, cell, cellData) {
-    switch (cellType) {
-      case 'bar':
-        return h("kup-image", Object.assign({}, props));
-      case 'button':
-        classObj['is-centered'] = true;
-        props['disabled'] = cellData.treeNode.readOnly;
-        props['onkup-button-click'] = this.onJ4btnClicked.bind(cellData.treeNode, cellData.treeNodePath, cellData.column, false);
-        return h("kup-button", Object.assign({}, props));
-      case 'chart':
-        classObj['is-centered'] = true;
-        return h("kup-chart", Object.assign({}, props));
-      case 'checkbox':
-        classObj['is-centered'] = true;
-        if (props) {
-          props['disabled'] = cellData.treeNode.readOnly;
-        }
-        else {
-          props = { disabled: cellData.treeNode.readOnly };
-        }
-        return h("kup-checkbox", Object.assign({}, props));
-      case 'chips':
-        return h("kup-chip", Object.assign({}, props));
-      case 'color-picker':
-        return (h("kup-color-picker", Object.assign({ value: cell.value }, props, { disabled: true })));
-      case 'gauge':
-        return (h("kup-gauge", Object.assign({ value: stringToNumber(cell.value), "width-component": "100%" }, props)));
-      case 'knob':
-        return (h("kup-progress-bar", Object.assign({ class: "cell-progress-bar", value: stringToNumber(cell.value) }, props)));
-      case 'icon':
-      case 'image':
-        classObj['is-centered'] = true;
-        if (props.badgeData) {
-          classObj['has-padding'] = true;
-        }
-        return h("kup-image", Object.assign({}, props));
-      case 'progress-bar':
-        return h("kup-progress-bar", Object.assign({}, props));
-      case 'rating':
-        return (h("kup-rating", Object.assign({ value: stringToNumber(cell.value) }, props, { disabled: true })));
-      case 'radio':
-        classObj['is-centered'] = true;
-        props['disabled'] = cellData.treeNode.readOnly;
-        return h("kup-radio", Object.assign({}, props));
-    }
-  }
   getCellStyle(colName, cellStyle) {
     // Controls if there are columns with a specified width
     if (this.sizedColumns) {
@@ -1304,14 +1004,24 @@ export class KupTree {
       // Renders all the cells
       for (let j = 0; j < visibleCols.length; j++) {
         const column = visibleCols[j];
-        treeNodeCells.push(this.renderCell(treeNodeData.cells[column.name], {
-          column,
-          treeNode: treeNodeData,
-          treeNodePath: treeNodePath,
-        }));
+        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` },
+          h(FCell, Object.assign({}, cellProps))));
       }
     }
-    const _hasTooltip = this.kupManager.objects.hasTooltip(treeNodeData.obj);
+    const _hasTooltip = !this.kupManager.objects.isEmptyKupObj(treeNodeData.obj);
     let title = undefined;
     if (_hasTooltip && this.kupManager.debug.isDebug()) {
       title =
@@ -1340,7 +1050,7 @@ export class KupTree {
           'mdc-ripple-surface': this.ripple &&
             !this.showColumns &&
             !treeNodeData.disabled,
-          'is-obj': this.kupManager.objects.hasTooltip(treeNodeData.obj),
+          'is-obj': !this.kupManager.objects.isEmptyKupObj(treeNodeData.obj),
         }, style: treeNodeData.style || null, title: title, onDblClick: () => {
           this.onKupTreeNodeDblClick(treeNodeData, treeNodePath);
         } }, this.getToolTipEventHandlers(treeNodeData, cell, _hasTooltip)), this.asAccordion && !treeNodeDepth
@@ -1364,6 +1074,7 @@ export class KupTree {
   }
   closeTotalMenu() {
     this.openedTotalMenu = null;
+    this.kupManager.removeClickCallback(this.clickCb);
   }
   isOpenedTotalMenuForColumn(column) {
     return this.openedTotalMenu === column;
@@ -1480,7 +1191,7 @@ export class KupTree {
             separator: true,
           });
         }
-        totalMenu = (h("kup-list", { class: `kup-menu total-menu`, data: listData, id: "totals-menu", "is-menu": true, keyboardNavigation: true, "menu-visible": true, onBlur: () => this.closeTotalMenu(), "onkup-list-click": (event) => this.onTotalsChange(event, column), tabindex: 0 }));
+        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 ||
@@ -1499,14 +1210,54 @@ export class KupTree {
         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({
+            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),
+        });
+      }
+    };
+    this.kupManager.interact.on(this.treeWrapperRef, KupPointerEventTypes.TAP, tapCb);
+    this.kupManager.interact.on(this.treeWrapperRef, KupPointerEventTypes.HOLD, holdCb);
+  }
   totalMenuPosition() {
     if (this.rootElement.shadowRoot) {
-      let menu = this.rootElement.shadowRoot.querySelector('#totals-menu');
+      const menu = this.rootElement.shadowRoot.querySelector('#totals-menu');
       if (menu) {
-        this.kupManager.dynamicPosition.register(menu, this.totalMenuCoords, 0, KupDynamicPositionPlacement.TOP_RIGHT);
+        this.kupManager.dynamicPosition.register(menu, this.totalMenuCoords);
+        if (!this.clickCb) {
+          this.clickCb = {
+            cb: () => {
+              this.closeTotalMenu();
+              this.kupManager.dynamicPosition.stop(menu);
+            },
+            el: menu,
+          };
+        }
+        this.kupManager.addClickCallback(this.clickCb, true);
         this.kupManager.dynamicPosition.start(menu);
-        menu.classList.add('visible');
-        setTimeout(() => menu.focus(), 0);
+        menu.menuVisible = true;
       }
     }
   }
@@ -1587,6 +1338,7 @@ export class KupTree {
         this.hdlTreeNodeClick(null, tn, this.selectedNodeString, true);
       }
     }
+    this.didLoadInteractables();
     this.kupDidLoad.emit({ comp: this, id: this.rootElement.id });
     this.kupManager.resize.observe(this.rootElement);
     this.kupManager.debug.logLoad(this, true);
@@ -1626,10 +1378,10 @@ export class KupTree {
     this.sizedColumns = this.getSizedColumns();
     let wrapperClass = 'density-medium';
     switch (this.density) {
-      case 'dense':
+      case FCellPadding.DENSE:
         wrapperClass = 'density-dense';
         break;
-      case 'wide':
+      case FCellPadding.WIDE:
         wrapperClass = 'density-wide';
         break;
     }
@@ -1658,18 +1410,15 @@ export class KupTree {
             this.globalFilterTimeout = window.setTimeout(() => this.onGlobalFilterChange(event), 600);
           } })));
     }
-    const customStyle = this.kupManager.theme.setCustomStyle(this.rootElement);
     return (h(Host, null,
-      customStyle ? h("style", null, customStyle) : null,
+      h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
       h("div", { id: componentWrapperId, class: wrapperClass },
         h("div", { class: "wrapper", ref: (el) => (this.treeWrapperRef =
             el) },
           filterField,
-          h("table", { class: "kup-tree", "data-show-columns": this.showColumns, onContextMenu: (e) => this.kupTreeContextMenu.emit({
-              comp: this,
-              id: this.rootElement.id,
-              details: this.contextMenuHandler(e),
-            }) },
+          h("table", { class: "kup-tree", "data-show-columns": this.showColumns, onContextMenu: (e) => {
+              e.preventDefault();
+            } },
             h("thead", { class: {
                 'header--is-visible': visibleHeader,
               } },
@@ -1718,8 +1467,8 @@ export class KupTree {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When enabled, the first level of depth will give an accordion look to nodes."
       },
@@ -1777,11 +1526,11 @@ export class KupTree {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"\""
           }, {
-            "text": "https ://ketchup.smeup.com/ketchup-showcase/#/customization",
-            "name": "see"
+            "name": "see",
+            "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
           }],
         "text": "Custom style of the component."
       },
@@ -1814,9 +1563,14 @@ export class KupTree {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        "original": "FCellPadding",
+        "resolved": "FCellPadding.DENSE | FCellPadding.MEDIUM | FCellPadding.NONE | FCellPadding.WIDE",
+        "references": {
+          "FCellPadding": {
+            "location": "import",
+            "path": "../../f-components/f-cell/f-cell-declarations"
+          }
+        }
       },
       "required": false,
       "optional": false,
@@ -1826,7 +1580,7 @@ export class KupTree {
       },
       "attribute": "density",
       "reflect": false,
-      "defaultValue": "'medium'"
+      "defaultValue": "FCellPadding.MEDIUM"
     },
     "dynamicExpansionCallback": {
       "type": "unknown",
@@ -1852,13 +1606,34 @@ export class KupTree {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "useDynamicExpansion",
-            "name": "see"
+            "name": "see",
+            "text": "useDynamicExpansion"
           }],
         "text": "Function that gets invoked when a new set of nodes must be loaded as children of a node.\n\nWhen useDynamicExpansion is set, the tree component will have two different behaviors depending on the value of this prop.\n1 - If this prop is set to null, no callback to download data is available:\n   the component will emit an event requiring the parent to load the children of the given node.\n2 - If this prop is set to have a callback, then the component will automatically make requests to load children of\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,
@@ -1912,8 +1687,8 @@ export class KupTree {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "KupTreeExpansionMode.DROPDOWN",
-            "name": "default"
+            "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."
       },
@@ -2013,8 +1788,8 @@ export class KupTree {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false;",
-            "name": "default"
+            "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.\nIt works only on cells of the main column."
       },
@@ -2052,8 +1827,8 @@ export class KupTree {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "true",
-            "name": "default"
+            "name": "default",
+            "text": "true"
           }],
         "text": "When enabled displays Material's ripple effect on nodes (only when no columns are displayed)."
       },
@@ -2166,8 +1941,8 @@ export class KupTree {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "showColumns",
-            "name": "see"
+            "name": "see",
+            "text": "showColumns"
           }],
         "text": "Flag: shows the header of the tree when the tree is displayed as a table."
       },
@@ -2243,8 +2018,8 @@ export class KupTree {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "dynamicExpansionCallback",
-            "name": "see"
+            "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\ntree have been passed inside the data property.\n\nTherefore, when expanding a node, the tree must emit an event (or run a given callback)\nand wait for the child nodes to be downloaded from the server.\n\nFor more information:"
       },
@@ -2378,32 +2153,32 @@ export class KupTree {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": "kup-tree-nodeexpand",
-            "name": "event"
+            "name": "event",
+            "text": "kup-tree-nodeexpand"
           }, {
-            "text": "{object}",
-            "name": "type"
+            "name": "type",
+            "text": "{object}"
           }, {
-            "text": "{TreeNodePath} treeNodePath - The array of indexes to retrieve the current treeNode inside the data prop.",
-            "name": "property"
+            "name": "property",
+            "text": "{TreeNodePath} treeNodePath - The array of indexes to retrieve the current treeNode inside the data prop."
           }, {
-            "text": "{TreeNode} treeNode - Reference to the TreeNode data object which is being expanded (passed through the data prop).",
-            "name": "property"
+            "name": "property",
+            "text": "{TreeNode} treeNode - Reference to the TreeNode data object which is being expanded (passed through the data prop)."
           }, {
-            "text": "{boolean} usesDynamicExpansion - Flag to notify that the component is running in dynamicExpansion mode.",
-            "name": "property"
+            "name": "property",
+            "text": "{boolean} usesDynamicExpansion - Flag to notify that the component is running in dynamicExpansion mode."
           }, {
-            "text": "{boolean} dynamicExpansionRequireChildren - Flag to notify that the current dynamicExpansion event\nrequires the parent component to add TreeNode children to the given TreeNode.",
-            "name": "property"
+            "name": "property",
+            "text": "{boolean} dynamicExpansionRequireChildren - Flag to notify that the current dynamicExpansion event\nrequires the parent component to add TreeNode children to the given TreeNode."
           }, {
-            "text": "useDynamicExpansion *",
-            "name": "see"
+            "name": "see",
+            "text": "useDynamicExpansion *"
           }, {
-            "text": "dynamicExpansionCallback *",
-            "name": "see"
+            "name": "see",
+            "text": "dynamicExpansionCallback *"
           }, {
-            "text": "1.0.0",
-            "name": "since"
+            "name": "since",
+            "text": "1.0.0"
           }],
         "text": "Fired when a node expansion ion has been triggered.\nContains additional data when the tree is using the dynamicExpansion feature."
       },
@@ -2648,8 +2423,8 @@ export class KupTree {
         "signature": "(descriptions?: boolean) => Promise<GenericObject>",
         "parameters": [{
             "tags": [{
-                "text": "descriptions - When provided and true, the result will be the list of props with their description.",
-                "name": "param"
+                "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."
           }],
@@ -2680,8 +2455,8 @@ export class KupTree {
         "signature": "(column: string) => Promise<void>",
         "parameters": [{
             "tags": [{
-                "text": "column - Name of the column.",
-                "name": "param"
+                "name": "param",
+                "text": "column - Name of the column."
               }],
             "text": "- Name of the column."
           }],
@@ -2748,8 +2523,8 @@ export class KupTree {
         "signature": "(props: GenericObject) => Promise<void>",
         "parameters": [{
             "tags": [{
-                "text": "props - Object containing props that will be set to the component.",
-                "name": "param"
+                "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."
           }],