@sme.up/ketchup 4.0.0 → 4.2.0

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

@@ -1,23 +1,21 @@
-import { Component, Element, Event, forceUpdate, getAssetPath, h, Host, Method, Prop, State, Watch, } from '@stencil/core';
+import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, Watch, } from '@stencil/core';
 import { SortMode, } from '../kup-data-table/kup-data-table-declarations';
 import { KupBoxProps, } from './kup-box-declarations';
-import { isEditor, isImage, isProgressBar, isRadio, isGauge, isKnob, isChart, getCellValueForDisplay, getColumnByName, } from '../../utils/cell-utils';
+import { getColumnByName } from '../../utils/cell-utils';
 import { filterRows, sortRows, paginateRows, } from '../kup-data-table/kup-data-table-helper';
-import { setDragEffectAllowed, setKetchupDraggable, setKetchupDroppable, } from '../../utils/drag-and-drop';
-const KupBoxDragType = 'text/kup-box-drag';
-import { dragMultipleImg } from '../../assets/images/drag-multiple';
 import { PaginatorMode } from '../kup-paginator/kup-paginator-declarations';
 import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
 import { KupBoxState } from './kup-box-state';
 import { setTooltip, unsetTooltip } from '../../utils/helpers';
-import { deepEqual, getProps, identify, setProps, stringToNumber, } from '../../utils/utils';
+import { deepEqual, getProps, identify, setProps } from '../../utils/utils';
 import { FImage } from '../../f-components/f-image/f-image';
-import { FButton } from '../../f-components/f-button/f-button';
 import { FChip } from '../../f-components/f-chip/f-chip';
 import { KupDebugCategory } from '../../utils/kup-debug/kup-debug-declarations';
 import { KupLanguageGeneric, KupLanguageSearch, } from '../../utils/kup-language/kup-language-declarations';
 import { componentWrapperId } from '../../variables/GenericVariables';
 import { KupThemeIconValues } from '../../utils/kup-theme/kup-theme-declarations';
+import { KupDragEffect, kupDraggableCellAttr, KupDropEventTypes, KupPointerEventTypes, } from '../../utils/kup-interact/kup-interact-declarations';
+import { FCell } from '../../f-components/f-cell/f-cell';
 export class KupBox {
   constructor() {
     /*-------------------------------------------------*/
@@ -67,6 +65,11 @@ export class KupBox {
      * @default false
      */
     this.dropOnSection = false;
+    /**
+     * When set to true, editable cells will be rendered using input components.
+     * @default false
+     */
+    this.editableData = false;
     /**
      * If enabled, a button to load / display the row actions
      * will be displayed on the right of every box
@@ -149,7 +152,12 @@ export class KupBox {
     this.visibleColumns = [];
     this.rows = [];
     this.filteredRows = [];
-    this.iconPaths = undefined;
+    this.sectionRef = null;
+    this.rowsRefs = [];
+    this.hold = false;
+    this.interactableDrag = [];
+    this.interactableDrop = [];
+    this.interactableTouch = [];
   }
   initWithPersistedState() {
     if (this.store && this.stateId) {
@@ -377,14 +385,18 @@ export class KupBox {
     }
   }
   getEventDetails(el) {
-    const boxObject = el.closest('.box-object');
+    let boxObject = null;
     let cell = null;
     let row = null;
     let column = null;
+    if (el) {
+      boxObject =
+        el.closest('.box-object') || el.querySelector('.box-object');
+    }
     if (boxObject) {
       cell = boxObject['data-cell'];
       row = boxObject['data-row'];
-      column = boxObject['data-column'];
+      column = getColumnByName(this.visibleColumns, boxObject.dataset.column);
     }
     return {
       boxObject: boxObject ? boxObject : null,
@@ -395,16 +407,10 @@ export class KupBox {
   }
   contextMenuHandler(e) {
     const details = this.getEventDetails(e.target);
-    this.kupBoxContextMenu.emit({
-      comp: this,
-      id: this.rootElement.id,
-      details: details,
-    });
     if (this.showTooltipOnRightClick && details.boxObject && details.cell) {
-      e.preventDefault();
-      setTooltip(e, details.row.id, details.column, details.cell, this.tooltip);
-      return;
+      setTooltip(e, details.row.id, details.column.name, details.cell, this.tooltip);
     }
+    return details;
   }
   /**
    * Checks if the element is the svg that opens the "row actions menu"
@@ -539,35 +545,6 @@ export class KupBox {
       index,
     });
   }
-  // when the dragged box is over the drop section (fired on the drop target)
-  onSectionDragOver(event) {
-    event.preventDefault();
-    let target = event.target;
-    this.searchParentWithClass(target, 'box-component').classList.add('component-dropover');
-  }
-  // when the dragged box leaves the drop section (fired on the drop target)
-  onSectionDragLeave(event) {
-    let target = event.target;
-    this.searchParentWithClass(target, 'box-component').classList.remove('component-dropover');
-  }
-  addMultiSelectDragImageToEvent(event) {
-    var dragImage = document.createElement('img');
-    dragImage.src = dragMultipleImg;
-    event.dataTransfer.setDragImage(dragImage, 0, 0);
-  }
-  searchParentWithClass(target, cssClass) {
-    // searching parent until class is reached
-    let element = target;
-    let classList = element.classList;
-    while (!classList.contains(cssClass)) {
-      element = element.parentElement;
-      if (element === null) {
-        break;
-      }
-      classList = element.classList;
-    }
-    return element;
-  }
   /**
    * see onDocumentClick in kup-combo
    */
@@ -807,59 +784,17 @@ export class KupBox {
           ? `centered ${badge['className']}`
           : 'centered', imageData: badge.imageData })));
     }
-    let dragHandler = null;
-    if (this.dragEnabled) {
-      dragHandler = h("span", { class: "box-drag-handler mdi mdi-drag" });
-    }
     const boxClass = {
       box: true,
       draggable: this.dragEnabled,
       selected: this.showSelection && isSelected,
       column: !horizontal,
     };
-    const dragHandlers = {
-      onDragStart: (e) => {
-        // Sets the type of drag
-        setDragEffectAllowed(e, 'move');
-        if (this.multiSelection) {
-          this.addMultiSelectDragImageToEvent(e);
-        }
-        this.searchParentWithClass(e.target, 'box').classList.add('item-dragged');
-      },
-      onDragEnd: (e) => {
-        this.searchParentWithClass(e.target, 'box').classList.remove('item-dragged');
-      },
-    };
-    const dropHandlers = {
-      onDragOver: (e) => {
-        this.searchParentWithClass(e.target, 'box').classList.add('item-dropover');
-        return true;
-      },
-      onDragLeave: (e) => {
-        this.searchParentWithClass(e.target, 'box').classList.remove('item-dropover');
-      },
-      onDrop: (e) => {
-        this.searchParentWithClass(e.target, 'box').classList.remove('item-dropover');
-        return KupBoxDragType;
-      },
-    };
     return (h("div", { class: "box-wrapper" },
-      h("div", Object.assign({ class: boxClass, onClick: (e) => this.onBoxClick(e, row) }, (this.dragEnabled
-        ? setKetchupDraggable(dragHandlers, {
-          [KupBoxDragType]: row,
-          'kup-drag-source-element': {
-            id: this.rootElement.id,
-            row,
-            selectedRows: this.selectedRows,
-          },
-        })
-        : {}), (this.dropEnabled
-        ? setKetchupDroppable(dropHandlers, [KupBoxDragType], this.rootElement, { row, id: this.rootElement.id })
-        : {})),
+      h("div", { class: boxClass, onClick: (e) => this.onBoxClick(e, row), ref: (el) => this.rowsRefs.push(el) },
         multiSel,
         boxContent,
-        badges,
-        dragHandler),
+        badges),
       rowObject));
   }
   renderSection(section, parent, row, visibleColumns) {
@@ -889,14 +824,11 @@ export class KupBox {
           boxObject: content[cnt++],
           row,
           visibleColumns,
-        }));
+        }, true));
       }
     }
     else if (visibleColumns.length > 0) {
-      // getting first column
       const column = visibleColumns[0];
-      // removing first column
-      visibleColumns.splice(0, 1);
       sectionContent = this.renderBoxObject({
         boxObject: { column: column.name },
         row,
@@ -913,12 +845,6 @@ export class KupBox {
       titled: !!section.title,
       'last-child': !section.sections || section.sections.length === 0,
     };
-    if (section.cssClass) {
-      var classes = section.cssClass.split(' ');
-      for (let index = 0; index < classes.length; index++) {
-        sectionClass[classes[index]] = true;
-      }
-    }
     const sectionStyle = section.style || {};
     if (section.dim && parent) {
       sectionStyle.flex = `0 0 ${section.dim}`;
@@ -957,7 +883,7 @@ export class KupBox {
           } },
           h("div", { class: "header-content" },
             h("span", null, headerTitle),
-            h("span", { class: "mdi mdi-chevron-down" })))));
+            h(FImage, { resource: `${KupThemeIconValues.DROPDOWN}`, sizeX: "1.25em", sizeY: "1.25em", wrapperClass: sectionExpanded ? 'toggled' : '' })))));
     }
     else {
       const title = section.title ? h("h3", null, section.title) : null;
@@ -967,164 +893,29 @@ export class KupBox {
     }
     return sectionContainer;
   }
-  renderBoxObject({ boxObject, row, visibleColumns, }) {
-    let classObj = {
+  renderBoxObject({ boxObject, row, visibleColumns, }, fromSection) {
+    const classObj = {
       'box-object': true,
     };
-    let boContent = null;
-    let boContentIcon = null;
-    let boStyle = {};
-    //let boInnerHTML = null;
-    let cell = null;
+    const boStyle = {};
     let column = null;
-    let _hasTooltip = false;
-    if (boxObject.column) {
-      cell = row.cells[boxObject.column];
-      column = null;
-      if (cell) {
-        _hasTooltip = this.kupManager.objects.hasTooltip(cell.obj);
-        // removing column from visibleColumns
-        let index = -1;
-        for (let i = 0; i < visibleColumns.length; i++) {
-          const c = visibleColumns[i];
-          if (c.name === boxObject.column) {
-            index = i;
-            break;
-          }
-        }
-        if (index >= 0) {
-          column = visibleColumns[index];
-          visibleColumns.splice(index, 1);
-        }
-        if (cell.style) {
-          boStyle = Object.assign({}, cell.style);
-        }
-        if (cell.cssClass) {
-          classObj[cell.cssClass] = true;
-        }
-        let props = Object.assign({}, cell.data);
-        if (this.kupManager.objects.isButton(cell.obj)) {
-          if (props) {
-            boContent = (h(FButton, Object.assign({ class: "cell-button" }, props)));
-          }
-          else {
-            boContent = undefined;
-          }
-        }
-        else if (isChart(cell, boxObject)) {
-          if (props) {
-            boContent = h("kup-chart", Object.assign({ class: "cell-chart" }, props));
-          }
-          else {
-            boContent = undefined;
-          }
-        }
-        else if (this.kupManager.objects.isCheckbox(cell.obj)) {
-          if (props) {
-            props['disabled'] = row;
-          }
-          else {
-            props = { disabled: row };
-          }
-          boContent = (h("kup-checkbox", Object.assign({ class: "cell-checkbox" }, props)));
-        }
-        else if (isEditor(cell, boxObject)) {
-          boContent = h("kup-editor", { text: cell.value });
-        }
-        else if (this.kupManager.objects.isIcon(cell.obj)) {
-          if (props) {
-            if (!props.sizeX) {
-              props['sizeX'] = '18px';
-            }
-            if (!props.sizeY) {
-              props['sizeY'] = '18px';
-            }
-            boContent = (h(FImage, Object.assign({ wrapperClass: "cell-icon" }, props)));
-          }
-          else {
-            boContent = undefined;
-          }
-        }
-        else if (isImage(cell, boxObject)) {
-          if (props) {
-            if (!props.sizeY) {
-              props['sizeY'] = 'auto';
-            }
-            if (props.fit === undefined) {
-              props.fit = true;
-            }
-            if (props.badgeData) {
-              classObj['has-padding'] = true;
-            }
-            boContent = (h(FImage, Object.assign({ wrapperClass: "cell-image" }, props)));
-          }
-          else {
-            boContent = undefined;
-          }
-        }
-        else if (this.kupManager.objects.isPassword(cell.obj)) {
-          boContent = (h("kup-text-field", { "input-type": "password", "initial-value": cell.value, disabled: true }));
-        }
-        else if (isProgressBar(cell, boxObject)) {
-          if (props) {
-            boContent = (h("kup-progress-bar", Object.assign({ class: "cell-progress-bar" }, props)));
-          }
-          else {
-            boContent = undefined;
-          }
-        }
-        else if (isRadio(cell, boxObject)) {
-          if (props) {
-            props['disabled'] = true;
-            boContent = (h("kup-radio", Object.assign({ class: "cell-radio" }, props)));
-          }
-          else {
-            boContent = undefined;
-          }
-        }
-        else if (isGauge(cell, boxObject)) {
-          if (props) {
-            boContent = (h("kup-gauge", Object.assign({ value: stringToNumber(cell.value), "width-component": "100%" }, props)));
-          }
-          else {
-            boContent = undefined;
-          }
-        }
-        else if (isKnob(cell, boxObject)) {
-          if (props) {
-            boContent = (h("kup-progress-bar", Object.assign({ class: "cell-progress-bar", value: stringToNumber(cell.value) }, props)));
-          }
-          else {
-            boContent = undefined;
-          }
-        }
-        else if (this.kupManager.objects.isLink(cell.obj)) {
-          boContent = (h("a", { class: "cell-link", href: cell.obj.k, target: "_blank" }, cell.value));
-        }
-        else {
-          boContent = getCellValueForDisplay(column, cell);
-          if ((column && column.icon) || cell.icon) {
-            let svg = '';
-            if (cell.icon) {
-              svg = cell.icon;
-            }
-            else {
-              svg = column.icon;
-            }
-            svg = this.getIconPath(svg);
-            const iconStyle = {
-              mask: svg,
-              webkitMask: svg,
-            };
-            boContentIcon = (h("span", { style: iconStyle, class: "kup-icon obj-icon" }));
-          }
-        }
+    let index = -1;
+    for (let i = 0; i < visibleColumns.length; i++) {
+      const c = visibleColumns[i];
+      if (c.name === boxObject.column) {
+        index = i;
+        break;
       }
     }
-    else if (boxObject.value) {
-      // fixed value
-      boContent = boxObject.value;
+    if (index >= 0) {
+      column = visibleColumns[index];
+      visibleColumns.splice(index, 1);
+    }
+    else if (fromSection) {
+      column = this.data.columns.find((x) => x.name === boxObject.column);
     }
+    const cell = row.cells[boxObject.column];
+    let _hasTooltip = false;
     let title = undefined;
     if (_hasTooltip) {
       classObj['is-obj'] = true;
@@ -1151,33 +942,17 @@ export class KupBox {
         };
       }
     }
-    return (h("div", Object.assign({ "data-cell": cell, "data-row": row, "data-column": boxObject.column, class: classObj, style: boStyle, title: title }, tipEvents),
-      h("span", null,
-        boContentIcon,
-        boContent)));
-  }
-  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;
+    const cellProps = {
+      cell: cell,
+      column: column,
+      component: this,
+      editable: this.editableData,
+      renderKup: true,
+      row: row,
+      setSizes: true,
+      shape: boxObject.shape,
+    };
+    return (h("div", Object.assign({ "data-cell": cell, "data-row": row, "data-column": boxObject.column, class: classObj, style: boStyle, title: title }, tipEvents), cell && column ? (h(FCell, Object.assign({}, cellProps))) : (h("span", null, boxObject.value))));
   }
   /**
    * Prepares the kanban sections by sorting the boxlist's data.
@@ -1279,6 +1054,99 @@ export class KupBox {
         ? 0
         : this.tooltipLoadTimeout, detailTimeout: this.tooltipDetailTimeout, ref: (el) => (this.tooltip = el) }));
   }
+  didLoadInteractables() {
+    this.interactableTouch.push(this.boxContainer);
+    const tapCb = (e) => {
+      if (this.hold) {
+        this.hold = false;
+        return;
+      }
+      switch (e.button) {
+        // right click
+        case 2:
+          this.kupBoxContextMenu.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.kupBoxContextMenu.emit({
+          comp: this,
+          id: this.rootElement.id,
+          details: this.contextMenuHandler(e),
+        });
+      }
+    };
+    this.kupManager.interact.on(this.boxContainer, KupPointerEventTypes.TAP, tapCb);
+    this.kupManager.interact.on(this.boxContainer, KupPointerEventTypes.HOLD, holdCb);
+  }
+  didRenderInteractables() {
+    if (this.dragEnabled) {
+      for (let index = 0; index < this.rowsRefs.length; index++) {
+        const row = this.rowsRefs[index];
+        const dataCb = () => {
+          const cellEl = this.rootElement.shadowRoot.querySelector('.box-object:hover');
+          return {
+            cell: cellEl['data-cell'],
+            column: getColumnByName(this.visibleColumns, cellEl.dataset.column),
+            id: this.rootElement.id,
+            multiple: this.multiSelection,
+            row: cellEl['data-row'],
+            selectedRows: this.selectedRows,
+          };
+        };
+        if (row && !this.interactableDrag.includes(row)) {
+          this.interactableDrag.push(row);
+          this.kupManager.interact.draggable(row, {
+            allowFrom: '.box-object',
+            cursorChecker() {
+              return null;
+            },
+          }, {
+            callback: dataCb,
+          }, KupDragEffect.BADGE);
+        }
+      }
+    }
+    if (this.dropEnabled) {
+      const dataCb = () => {
+        const receivingDetails = this.getEventDetails(this.rootElement.shadowRoot.querySelector('.box:hover'));
+        return {
+          cell: receivingDetails.cell,
+          column: receivingDetails.column,
+          id: this.rootElement.id,
+          row: receivingDetails.row,
+        };
+      };
+      if (!this.interactableDrop.includes(this.sectionRef)) {
+        this.interactableDrop.push(this.sectionRef);
+        this.kupManager.interact.dropzone(this.sectionRef, {
+          accept: `[${kupDraggableCellAttr}]`,
+        }, {
+          dispatcher: this.rootElement,
+          type: KupDropEventTypes.BOX,
+        });
+      }
+      for (let index = 0; index < this.rowsRefs.length; index++) {
+        const row = this.rowsRefs[index];
+        if (row && !this.interactableDrop.includes(row)) {
+          this.interactableDrop.push(row);
+          this.kupManager.interact.dropzone(row, {
+            accept: `[${kupDraggableCellAttr}]`,
+          }, {
+            callback: dataCb,
+            dispatcher: this.rootElement,
+            type: KupDropEventTypes.BOX,
+          });
+        }
+      }
+    }
+  }
   /*-------------------------------------------------*/
   /*          L i f e c y c l e   H o o k s          */
   /*-------------------------------------------------*/
@@ -1307,6 +1175,7 @@ export class KupBox {
         return selectedIds.indexOf(r.id) >= 0;
       });
     }
+    this.didLoadInteractables();
     this.kupDidLoad.emit({ comp: this, id: this.rootElement.id });
     this.kupManager.debug.logLoad(this, true);
   }
@@ -1316,6 +1185,7 @@ export class KupBox {
   componentDidRender() {
     this.checkScrollOnHover();
     this.persistState();
+    this.didRenderInteractables();
     this.kupManager.debug.logRender(this, true);
   }
   render() {
@@ -1383,34 +1253,16 @@ export class KupBox {
       }
     }
     const tooltip = this.renderTooltip();
-    const dropHandlers = {
-      onDragOver: (e) => {
-        if (!(e.target instanceof HTMLElement)) {
-          return false;
-        }
-        this.onSectionDragOver(e);
-        return true;
-      },
-      onDragLeave: (e) => {
-        this.onSectionDragLeave(e);
-      },
-      onDrop: (e) => {
-        this.searchParentWithClass(e.target, 'box-component').classList.remove('component-dropover');
-        return KupBoxDragType;
-      },
-    };
-    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 },
-        h("div", Object.assign({ class: 'box-component' }, (this.dropEnabled &&
-          (this.dropOnSection || !this.getRows().length)
-          ? setKetchupDroppable(dropHandlers, [KupBoxDragType], this.rootElement, { row: null, id: this.rootElement.id })
-          : {}), { onContextMenu: (e) => this.contextMenuHandler(e) }),
+        h("div", { class: 'box-component', ref: (el) => (this.sectionRef = el) },
           sortPanel,
           filterPanel,
           paginator,
-          h("div", { class: isKanban ? 'is-kanban' : '', id: 'box-container', style: containerStyle, onMouseLeave: (ev) => {
+          h("div", { class: isKanban ? 'is-kanban' : '', id: 'box-container', style: containerStyle, onContextMenu: (e) => {
+              e.preventDefault();
+            }, onMouseLeave: (ev) => {
               ev.stopPropagation();
               unsetTooltip(this.tooltip);
             }, ref: (el) => (this.boxContainer =
@@ -1418,6 +1270,7 @@ export class KupBox {
           tooltip))));
   }
   disconnectedCallback() {
+    this.kupManager.interact.unregister(this.interactableDrag.concat(this.interactableDrop));
     this.kupManager.language.unregister(this);
     this.kupManager.theme.unregister(this);
     if (this.scrollOnHover) {
@@ -1453,8 +1306,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Data of the card linked to the box when the latter's layout must be a premade template."
       },
@@ -1472,8 +1325,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "1",
-            "name": "default"
+            "name": "default",
+            "text": "1"
           }],
         "text": "Number of columns"
       },
@@ -1493,11 +1346,11 @@ export class KupBox {
       "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."
       },
@@ -1522,8 +1375,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Actual data of the box."
       },
@@ -1541,8 +1394,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Enable dragging"
       },
@@ -1562,8 +1415,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Enable dropping"
       },
@@ -1583,8 +1436,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Drop can be done in section"
       },
@@ -1592,6 +1445,27 @@ export class KupBox {
       "reflect": false,
       "defaultValue": "false"
     },
+    "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"
+    },
     "enableRowActions": {
       "type": "boolean",
       "mutable": false,
@@ -1604,8 +1478,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "If enabled, a button to load / display the row actions\nwill be displayed on the right of every box"
       },
@@ -1625,8 +1499,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When set to true it activates the global filter."
       },
@@ -1646,8 +1520,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"\""
           }],
         "text": "The value of the global filter."
       },
@@ -1672,8 +1546,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Displays the boxlist as a Kanban."
       },
@@ -1696,8 +1570,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "undefined",
-            "name": "default"
+            "name": "default",
+            "text": "undefined"
           }],
         "text": "How the field will be displayed. If not present, a default one will be created."
       }
@@ -1714,8 +1588,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Enable multi selection"
       },
@@ -1735,8 +1609,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "1",
-            "name": "default"
+            "name": "default",
+            "text": "1"
           }],
         "text": "Current page number"
       },
@@ -1756,8 +1630,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "10",
-            "name": "default"
+            "name": "default",
+            "text": "10"
           }],
         "text": "Number of boxes per page"
       },
@@ -1777,8 +1651,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Enables pagination"
       },
@@ -1798,8 +1672,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "undefined",
-            "name": "default"
+            "name": "default",
+            "text": "undefined"
           }],
         "text": "Number of current rows per page"
       },
@@ -1818,8 +1692,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Activates the scroll on hover function."
       },
@@ -1839,8 +1713,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "undefined",
-            "name": "default"
+            "name": "default",
+            "text": "undefined"
           }],
         "text": "Automatically selects the box at the specified index"
       },
@@ -1859,8 +1733,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "undefined",
-            "name": "default"
+            "name": "default",
+            "text": "undefined"
           }],
         "text": "Multiple selection"
       },
@@ -1879,8 +1753,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "true",
-            "name": "default"
+            "name": "default",
+            "text": "true"
           }],
         "text": "If enabled, highlights the selected box/boxes"
       },
@@ -1900,8 +1774,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "true",
-            "name": "default"
+            "name": "default",
+            "text": "true"
           }],
         "text": "If set to true, displays tooltip on right click; if set to false, displays tooltip on mouseOver."
       },
@@ -1921,8 +1795,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "undefined",
-            "name": "default"
+            "name": "default",
+            "text": "undefined"
           }],
         "text": "If sorting is enabled, specifies which column to sort"
       },
@@ -1941,8 +1815,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Enable sorting"
       },
@@ -2000,8 +1874,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Disable swipe"
       },
@@ -2021,8 +1895,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "undefined",
-            "name": "default"
+            "name": "default",
+            "text": "undefined"
           }],
         "text": "Defines the timeout for tooltip detail"
       },
@@ -2041,8 +1915,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "true",
-            "name": "default"
+            "name": "default",
+            "text": "true"
           }],
         "text": "Enable show tooltip"
       },
@@ -2062,8 +1936,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "undefined",
-            "name": "default"
+            "name": "default",
+            "text": "undefined"
           }],
         "text": "Defines the timeout for tooltip load"
       },
@@ -2245,8 +2119,8 @@ export class KupBox {
         "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."
           }],
@@ -2323,8 +2197,8 @@ export class KupBox {
         "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."
           }],