@sme.up/ketchup 5.0.0 → 5.1.1

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

@@ -7,7 +7,7 @@ import { calcTotals, normalizeRows, } from '../kup-data-table/kup-data-table-hel
 import { KupTreeState } from './kup-tree-state';
 import { setTooltip, unsetTooltip } from '../../utils/helpers';
 import { getColumnByName } from '../../utils/cell-utils';
-import { deepEqual, getProps, numberToFormattedStringNumber, setProps, } from '../../utils/utils';
+import { 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';
@@ -182,7 +182,6 @@ export class KupTree {
      * Reference to the column menu card.
      */
     this.columnMenuCard = null;
-    this.selectedColumn = '';
     this.clickTimeout = [];
     this.sizedColumns = undefined;
     this.filtersColumnMenuInstance = new FiltersColumnMenu();
@@ -212,31 +211,31 @@ export class KupTree {
   persistState() {
     if (this.store && this.stateId) {
       let somethingChanged = false;
-      if (!deepEqual(this.state.filters, this.filters)) {
+      if (!this.kupManager.objects.deepEqual(this.state.filters, this.filters)) {
         this.state.filters = Object.assign({}, this.filters);
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.density, this.density)) {
+      if (!this.kupManager.objects.deepEqual(this.state.density, this.density)) {
         this.state.density = this.density;
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.showFilters, this.showFilters)) {
+      if (!this.kupManager.objects.deepEqual(this.state.showFilters, this.showFilters)) {
         this.state.showFilters = this.showFilters;
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.showFooter, this.showFooter)) {
+      if (!this.kupManager.objects.deepEqual(this.state.showFooter, this.showFooter)) {
         this.state.showFooter = this.showFooter;
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.totals, this.totals)) {
+      if (!this.kupManager.objects.deepEqual(this.state.totals, this.totals)) {
         this.state.totals = Object.assign({}, this.totals);
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.globalFilter, this.globalFilter)) {
+      if (!this.kupManager.objects.deepEqual(this.state.globalFilter, this.globalFilter)) {
         this.state.globalFilter = this.globalFilter;
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.globalFilterValue, this.globalFilterValue)) {
+      if (!this.kupManager.objects.deepEqual(this.state.globalFilterValue, this.globalFilterValue)) {
         this.state.globalFilterValue = this.globalFilterValue;
         somethingChanged = true;
       }
@@ -348,9 +347,7 @@ export class KupTree {
    * @param {KupDataColumn} column - Column to hide.
    */
   async hideColumn(column) {
-    this.kupManager.data.datasetOperations.column.hide(this.columns, [
-      column.name,
-    ]);
+    this.kupManager.data.column.hide(this.columns, [column.name]);
     this.kupColumnRemove.emit({
       comp: this,
       id: this.rootElement.id,
@@ -560,8 +557,48 @@ export class KupTree {
     this.closeTotalMenu();
     this.openTotalMenu(column);
   }
-  getEventDetails(el) {
-    const isHeader = !!el.closest('thead'), isBody = !!el.closest('tbody'), isFooter = !!el.closest('tfoot'), td = el.closest('td'), th = el.closest('th'), tr = el.closest('tr'), filterRemove = el.closest('th .filter-remove');
+  getEventDetails(path) {
+    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) {
@@ -600,7 +637,7 @@ export class KupTree {
   }
   contextMenuHandler(e) {
     e.preventDefault();
-    const details = this.getEventDetails(e.target);
+    const details = this.getEventDetails(this.getEventPath(e.target));
     if (details.area === 'header') {
       if (details.th && details.column) {
         this.openColumnMenu(details.column.name);
@@ -623,6 +660,12 @@ export class KupTree {
       KupTreeExpansionMode.DROPDOWN ||
       (this.expansionMode.toLowerCase() === KupTreeExpansionMode.NODE &&
         !treeNodeData.expandable)) {
+      const td = e
+        ? this.getEventPath(e.target).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) {
         if (this.autoSelectionNodeMode)
@@ -636,11 +679,10 @@ export class KupTree {
             .split(',')
             .map((treeNodeIndex) => parseInt(treeNodeIndex)),
           treeNode: treeNodeData,
-          columnName: this.selectedColumn,
+          columnName: td ? td.dataset.column : null,
           auto: auto,
         });
       }
-      this.selectedColumn = '';
     }
     // If KupTreeExpansionMode.NODE then click is a collapse/expand click
     if (this.expansionMode.toLowerCase() === KupTreeExpansionMode.NODE) {
@@ -733,6 +775,18 @@ export class KupTree {
       }
     }
   }
+  getEventPath(currentEl) {
+    const path = [];
+    while (currentEl &&
+      currentEl !== this.rootElement &&
+      currentEl !== document.body) {
+      path.push(currentEl);
+      currentEl = currentEl.parentNode
+        ? currentEl.parentNode
+        : currentEl.host;
+    }
+    return path;
+  }
   hasTotals() {
     return this.totals && Object.keys(this.totals).length > 0;
   }
@@ -804,8 +858,7 @@ export class KupTree {
         this.kupManager.debug.logMessage(this, 'Detected KupDataDataset: setting up tree as grid.', KupDebugCategory.WARNING);
         const data = this.data;
         this.columns = data.columns;
-        this.data =
-          this.kupManager.data.datasetOperations.row.toNode(data);
+        this.data = this.kupManager.data.row.toNode(data);
         this.showColumns = true;
         this.showHeader = true;
       }
@@ -1016,13 +1069,20 @@ export class KupTree {
     }
     // When can be expanded OR selected
     if (!treeNodeData.disabled) {
-      treeNodeOptions['onClick'] = () => {
-        this.clickTimeout.push(setTimeout((e) => this.hdlTreeNodeClick(e, treeNodeData, treeNodePath, false), 300));
+      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, false), 300));
       };
     }
     // When a tree node is displayed as a table
     let treeNodeCells = null;
     let visibleCols = this.getVisibleColumns();
+    const _hasTooltip = !this.kupManager.objects.isEmptyKupObj(treeNodeData.obj);
     if (this.showColumns && visibleCols && visibleCols.length) {
       treeNodeCells = [];
       // Renders all the cells
@@ -1042,7 +1102,7 @@ export class KupTree {
             row: treeNodeData,
             setSizes: true,
           };
-          treeNodeCells.push(h("td", { class: `grid-cell` },
+          treeNodeCells.push(h("td", Object.assign({ class: `grid-cell`, "data-column": column.name, "data-cell": cell }, this.getToolTipEventHandlers(treeNodeData, cell, _hasTooltip)),
             h(FCell, Object.assign({}, cellProps))));
         }
         else {
@@ -1050,7 +1110,6 @@ export class KupTree {
         }
       }
     }
-    const _hasTooltip = !this.kupManager.objects.isEmptyKupObj(treeNodeData.obj);
     let title = undefined;
     if (_hasTooltip && this.kupManager.debug.isDebug()) {
       title =
@@ -1082,7 +1141,7 @@ export class KupTree {
           '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
+        } }, this.getToolTipEventHandlers(treeNodeData, cell, _hasTooltip), { "data-row": treeNodeData }), this.asAccordion && !treeNodeDepth
         ? [
           treeNodeIcon,
           content,
@@ -1097,7 +1156,7 @@ export class KupTree {
         'kup-tree__node--first': treeNodeDepth ? false : true,
         'kup-tree__node--selected': !treeNodeData.disabled &&
           treeNodePath === this.selectedNodeString,
-      }, "data-tree-path": treeNodePath }, treeNodeOptions),
+      }, "data-tree-path": treeNodePath }, treeNodeOptions, { "data-row": treeNodeData }),
       treeNodeCell,
       treeNodeCells));
   }
@@ -1115,7 +1174,7 @@ export class KupTree {
       // must do this
       // otherwise does not fire the watcher
       const totalsCopy = Object.assign({}, this.totals);
-      const value = event.detail.selected.value;
+      const value = event.detail.selected.id;
       if (value === TotalLabel.CANC) {
         if (this.totals && this.totals[column.name]) {
           delete totalsCopy[column.name];
@@ -1178,46 +1237,36 @@ export class KupTree {
       if (this.isOpenedTotalMenuForColumn(column.name)) {
         let listData = [
           {
-            text: translation[TotalLabel.COUNT],
-            value: TotalMode.COUNT,
-            selected: false,
+            id: TotalMode.COUNT,
+            value: translation[TotalLabel.COUNT],
           },
           {
-            text: translation[TotalLabel.DISTINCT],
-            value: TotalMode.DISTINCT,
-            selected: false,
+            id: TotalMode.DISTINCT,
+            value: translation[TotalLabel.DISTINCT],
           },
         ];
         if (this.kupManager.objects.isNumber(column.obj)) {
-          // TODO Move these objects in declarations
           listData.push({
-            text: translation[TotalLabel.SUM],
-            value: TotalMode.SUM,
-            selected: false,
+            id: TotalMode.SUM,
+            value: translation[TotalLabel.SUM],
           }, {
-            text: translation[TotalLabel.AVERAGE],
-            value: TotalMode.AVERAGE,
-            selected: false,
+            id: TotalMode.AVERAGE,
+            value: translation[TotalLabel.AVERAGE],
           }, {
-            text: translation[TotalLabel.MIN],
-            value: TotalMode.MIN,
-            selected: false,
+            id: TotalMode.MIN,
+            value: translation[TotalLabel.MIN],
           }, {
-            text: translation[TotalLabel.MAX],
-            value: TotalMode.MAX,
-            selected: false,
+            id: TotalMode.MAX,
+            value: translation[TotalLabel.MAX],
           });
         }
-        // TODO replace this with find which is a better approach
-        // Note that this is not supported in older IE
-        let selectedItem = listData.find((item) => item.text === menuLabel);
+        let selectedItem = listData.find((item) => item.value === menuLabel);
         if (selectedItem) {
           selectedItem.selected = true;
           listData.push({
-            text: translation[TotalLabel.CANC],
-            value: TotalLabel.CANC,
-            selected: false,
+            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) }));

package/dist/collection/f-components/f-paginator/f-paginator.js

@@ -53,9 +53,9 @@ function getPageItems(props, maxNumberOfPage) {
   for (let i = 1; i <= maxNumberOfPage; i++) {
     const selected = i == props.currentPage;
     pageItems.push({
-      text: i.toString(),
-      value: i.toString(),
+      id: i.toString(),
       selected: selected,
+      value: i.toString(),
     });
   }
   return pageItems;
@@ -69,17 +69,17 @@ function getRowsItems(props) {
   while (i < props.max) {
     const selected = i == props.perPage;
     rowsPerPageItems.push({
-      text: i.toString(),
-      value: i.toString(),
+      id: i.toString(),
       selected: selected,
+      value: i.toString(),
     });
     i = i * 2;
   }
   const selected = props.max == props.perPage;
   rowsPerPageItems.push({
-    text: props.max.toString(),
-    value: props.max.toString(),
+    id: props.max.toString(),
     selected: selected,
+    value: props.max.toString(),
   });
   return rowsPerPageItems;
 }

package/dist/collection/managers/kup-data/kup-data-cell-helper.js

@@ -1,4 +1,4 @@
-import { finder } from './kup-data-helper';
+const dom = document.documentElement;
 /**
  * Finds all the cells matching the filters criteria in the input dataset.
  * @param {KupDataDataset} dataset - Input dataset.
@@ -6,7 +6,7 @@ import { finder } from './kup-data-helper';
  * @returns {KupDataCell[]}  Array of cells fetched after applying the filters.
  */
 export function findCell(dataset, filters) {
-  return finder(dataset, filters).cells;
+  return dom.ketchup.data.finder(dataset, filters).cells;
 }
 /**
  * Returns all the cells values of the specified columns.

package/dist/collection/managers/kup-data/kup-data-column-helper.js

@@ -20,6 +20,9 @@ export function findColumns(dataset, filters) {
       if (column[key] === filter) {
         result.push(column);
       }
+      else if (dom.ketchup.objects.deepEqual(column[key], filter)) {
+        result.push(column);
+      }
     }
   }
   return result;
@@ -55,6 +58,8 @@ export function newColumn(dataset, type, options) {
   switch (type) {
     case KupDataNewColumnTypes.CONCATENATE:
       return newColumnFromConcatenate(dataset, options.columns, options.separator);
+    case KupDataNewColumnTypes.DUPLICATE:
+      return newColumnFromDuplication(dataset, options.columns, options.newColumn);
     case KupDataNewColumnTypes.MATH:
       return newColumnFromMath(dataset, options.operation, options.columns);
     case KupDataNewColumnTypes.MERGE:
@@ -70,7 +75,7 @@ export function newColumn(dataset, type, options) {
  * @param {KupDataDataset} dataset - Input dataset.
  * @param {string[]} columns - Array of column names.
  * @param {string} separator - Characters used to separate values.
- * @returns {string|Column}  Returns the new column created or a string containing the error message (if something went wrong).
+ * @returns {string|KupDataColumn}  Returns the new column created or a string containing the error message (if something went wrong).
  */
 function newColumnFromConcatenate(dataset, columns, separator) {
   if (!columns || columns.length === 0) {
@@ -130,6 +135,25 @@ function newColumnFromConcatenate(dataset, columns, separator) {
   dataset.columns.splice(dataset.columns.indexOf(firstColumn) + 1, 0, newColumn);
   return newColumn;
 }
+/**
+ * Creates a duplicate of the specified column.
+ * @param {KupDataDataset} dataset - Input dataset.
+ * @param {string[]} column2duplicate - Name of the column to duplicate (the first occurrence of the array will be used).
+ * @param {KupDataColumn} newColumn - Column created.
+ * @returns {KupDataColumn} Resulting column.
+ */
+export function newColumnFromDuplication(dataset, column2duplicate, newColumn) {
+  const duplicatedName = column2duplicate[0];
+  for (let index = 0; index < dataset.rows.length; index++) {
+    const row = dataset.rows[index];
+    const cells = row.cells;
+    if (cells && cells[duplicatedName]) {
+      cells[newColumn.name] = Object.assign({}, cells[duplicatedName]);
+    }
+  }
+  dataset.columns.push(newColumn);
+  return newColumn;
+}
 /**
  * This method is used to create a new column from a mathematical formula.
  * @param {KupDataDataset} dataset - Input dataset.
@@ -219,11 +243,11 @@ function newColumnFromMath(dataset, operation, columns) {
           if (!base) {
             base = cell;
           }
-          formulaRow[column] = dom.ketchup.data.numberify(cell.value);
+          formulaRow[column] = dom.ketchup.math.numberify(cell.value);
         }
       }
     }
-    const value = dom.ketchup.data.formulas
+    const value = dom.ketchup.math.formulas
       .custom(formula, formulaRow)
       .toString();
     cells[newName] = Object.assign(Object.assign({}, base), { displayedValue: null, obj: Object.assign(Object.assign({}, newObj), { k: value }), value: value });

package/dist/collection/managers/kup-data/kup-data-declarations.js

@@ -1,9 +1,10 @@
 /**
- * Types of column creation when invoking datasetOperations.column.new.
+ * Types of column creation when invoking column.new.
  */
 export var KupDataNewColumnTypes;
 (function (KupDataNewColumnTypes) {
   KupDataNewColumnTypes["CONCATENATE"] = "concatenate";
+  KupDataNewColumnTypes["DUPLICATE"] = "duplicate";
   KupDataNewColumnTypes["MATH"] = "math";
   KupDataNewColumnTypes["MERGE"] = "merge";
 })(KupDataNewColumnTypes || (KupDataNewColumnTypes = {}));

package/dist/collection/managers/kup-data/kup-data-node-helper.js

@@ -25,7 +25,7 @@ export function removeNode(nodes, node2remove) {
   return removed;
 }
 /**
- * Sets the values specified in the filters to every node of the input array.
+ * Sets the values specified in the properties to every node of the input array.
  * @param {KupDataNode[]} nodes - Input array of nodes.
  * @param {Partial<KupDataNode>} properties - New properties values to set.
  * @param {boolean} recursively - Sets values to every child node.

package/dist/collection/managers/kup-data/kup-data-row-helper.js

@@ -1,4 +1,4 @@
-import { finder } from './kup-data-helper';
+const dom = document.documentElement;
 /**
  * Finds all the rows containing cells matching the filters criteria in the input dataset.
  * @param {KupDataDataset} dataset - Input dataset.
@@ -6,7 +6,7 @@ import { finder } from './kup-data-helper';
  * @returns {KupDataRow[]} Array of rows fetched after applying the filters.
  */
 export function findRow(dataset, filters) {
-  return finder(dataset, filters).rows;
+  return dom.ketchup.data.finder(dataset, filters).rows;
 }
 /**
  * Converts the rows of the input dataset to tree nodes.