@sme.up/ketchup 4.0.0 → 4.1.0

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

@@ -3,9 +3,6 @@ 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 { 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';
@@ -18,6 +15,7 @@ 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';
 export class KupBox {
   constructor() {
     /*-------------------------------------------------*/
@@ -150,6 +148,12 @@ export class KupBox {
     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 +381,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 +403,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 +541,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 +780,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) {
@@ -957,7 +888,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;
@@ -982,7 +913,7 @@ export class KupBox {
       cell = row.cells[boxObject.column];
       column = null;
       if (cell) {
-        _hasTooltip = this.kupManager.objects.hasTooltip(cell.obj);
+        _hasTooltip = !this.kupManager.objects.isEmptyKupObj(cell.obj);
         // removing column from visibleColumns
         let index = -1;
         for (let i = 0; i < visibleColumns.length; i++) {
@@ -1279,6 +1210,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 +1331,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 +1341,7 @@ export class KupBox {
   componentDidRender() {
     this.checkScrollOnHover();
     this.persistState();
+    this.didRenderInteractables();
     this.kupManager.debug.logRender(this, true);
   }
   render() {
@@ -1383,34 +1409,17 @@ 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("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 +1427,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 +1463,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 +1482,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "1",
-            "name": "default"
+            "name": "default",
+            "text": "1"
           }],
         "text": "Number of columns"
       },
@@ -1493,11 +1503,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 +1532,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Actual data of the box."
       },
@@ -1541,8 +1551,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Enable dragging"
       },
@@ -1562,8 +1572,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Enable dropping"
       },
@@ -1583,8 +1593,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Drop can be done in section"
       },
@@ -1604,8 +1614,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 +1635,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 +1656,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"\""
           }],
         "text": "The value of the global filter."
       },
@@ -1672,8 +1682,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 +1706,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 +1724,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Enable multi selection"
       },
@@ -1735,8 +1745,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "1",
-            "name": "default"
+            "name": "default",
+            "text": "1"
           }],
         "text": "Current page number"
       },
@@ -1756,8 +1766,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "10",
-            "name": "default"
+            "name": "default",
+            "text": "10"
           }],
         "text": "Number of boxes per page"
       },
@@ -1777,8 +1787,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Enables pagination"
       },
@@ -1798,8 +1808,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 +1828,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 +1849,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 +1869,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "undefined",
-            "name": "default"
+            "name": "default",
+            "text": "undefined"
           }],
         "text": "Multiple selection"
       },
@@ -1879,8 +1889,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 +1910,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 +1931,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 +1951,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Enable sorting"
       },
@@ -2000,8 +2010,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Disable swipe"
       },
@@ -2021,8 +2031,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 +2051,8 @@ export class KupBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "true",
-            "name": "default"
+            "name": "default",
+            "text": "true"
           }],
         "text": "Enable show tooltip"
       },
@@ -2062,8 +2072,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 +2255,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 +2333,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."
           }],