@sme.up/ketchup 4.0.0 → 4.2.0-SNAPSHOT

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

@@ -1,7 +1,6 @@
 import { Component, Event, Element, forceUpdate, h, Host, Listen, Method, Prop, State, } from '@stencil/core';
-import { kupDynamicPositionAttribute, } from '../../utils/kup-dynamic-position/kup-dynamic-position-declarations';
 import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
-import { ItemsDisplayMode } from '../kup-list/kup-list-declarations';
+import { ItemsDisplayMode, } from '../kup-list/kup-list-declarations';
 import { consistencyCheck } from '../kup-list/kup-list-helper';
 import { FTextField } from '../../f-components/f-text-field/f-text-field';
 import { FTextFieldMDC } from '../../f-components/f-text-field/f-text-field-mdc';
@@ -9,6 +8,7 @@ import { KupComboboxProps, } from './kup-combobox-declarations';
 import { KupThemeIconValues } from '../../utils/kup-theme/kup-theme-declarations';
 import { getProps, setProps } from '../../utils/utils';
 import { componentWrapperId } from '../../variables/GenericVariables';
+import { KupDynamicPositionPlacement } from '../../utils/kup-dynamic-position/kup-dynamic-position-declarations';
 export class KupCombobox {
   constructor() {
     /*-------------------------------------------------*/
@@ -49,6 +49,10 @@ export class KupCombobox {
      * Sets how to return the selected item value. Suported values: "code", "description", "both".
      */
     this.selectMode = ItemsDisplayMode.CODE;
+    /**
+     * When true shows the drop-down icon, for open list.
+     */
+    this.showDropDownIcon = true;
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
@@ -60,9 +64,9 @@ export class KupCombobox {
     this.listEl = undefined;
     this.textfieldWrapper = undefined;
     this.textfieldEl = undefined;
+    this.clickCb = null;
   }
   onKupBlur() {
-    this.closeList();
     this.kupBlur.emit({
       comp: this,
       id: this.rootElement.id,
@@ -80,7 +84,7 @@ export class KupCombobox {
   onKupClick(e) {
     const { target } = e;
     if (this.isSelect) {
-      if (this.textfieldEl.classList.contains('toggled')) {
+      if (this.textfieldWrapper.classList.contains('toggled')) {
         this.closeList();
       }
       else {
@@ -126,6 +130,9 @@ export class KupCombobox {
   onKupItemClick(e) {
     this.consistencyCheck(e);
     this.closeList();
+    if (this.textfieldEl) {
+      this.textfieldEl.focus();
+    }
     this.kupChange.emit({
       comp: this,
       id: this.rootElement.id,
@@ -236,15 +243,31 @@ export class KupCombobox {
   openList() {
     this.textfieldWrapper.classList.add('toggled');
     this.listEl.menuVisible = true;
-    this.kupManager.dynamicPosition.start(this.listEl);
-    let elStyle = this.listEl.style;
+    const elStyle = this.listEl.style;
     elStyle.height = 'auto';
     elStyle.minWidth = this.textfieldWrapper.clientWidth + 'px';
+    if (this.kupManager.dynamicPosition.isRegistered(this.listEl)) {
+      this.kupManager.dynamicPosition.changeAnchor(this.listEl, this.textfieldWrapper);
+    }
+    else {
+      this.kupManager.dynamicPosition.register(this.listEl, this.textfieldWrapper, 0, KupDynamicPositionPlacement.AUTO, true);
+    }
+    this.kupManager.dynamicPosition.start(this.listEl);
+    if (!this.clickCb) {
+      this.clickCb = {
+        cb: () => {
+          this.closeList();
+        },
+        el: this.listEl,
+      };
+    }
+    this.kupManager.addClickCallback(this.clickCb, true);
   }
   closeList() {
     this.textfieldWrapper.classList.remove('toggled');
     this.listEl.menuVisible = false;
     this.kupManager.dynamicPosition.stop(this.listEl);
+    this.kupManager.removeClickCallback(this.clickCb);
   }
   isListOpened() {
     return this.listEl.menuVisible == true;
@@ -255,7 +278,7 @@ export class KupCombobox {
     this.displayedValue = ret.displayedValue;
   }
   prepList() {
-    return (h("kup-list", Object.assign({}, this.data['kup-list'], { displayMode: this.displayMode, "is-menu": true, "onkup-list-click": (e) => this.onKupItemClick(e), ref: (el) => (this.listEl = el), tabindex: -1 })));
+    return (h("kup-list", Object.assign({}, this.data['kup-list'], { displayMode: this.displayMode, "is-menu": true, "onkup-list-click": (e) => this.onKupItemClick(e), ref: (el) => (this.listEl = el) })));
   }
   /*-------------------------------------------------*/
   /*          L i f e c y c l e   H o o k s          */
@@ -281,12 +304,11 @@ export class KupCombobox {
   componentDidRender() {
     const root = this.rootElement.shadowRoot;
     if (root) {
-      const f = root.querySelector('.f-text-field--wrapper');
+      const f = root.querySelector('.f-text-field');
       if (f) {
         this.textfieldWrapper = f;
         this.textfieldEl = f.querySelector('input');
         FTextFieldMDC(f);
-        this.kupManager.dynamicPosition.register(this.listEl, this.textfieldWrapper);
       }
     }
     this.kupManager.debug.logRender(this, true);
@@ -294,19 +316,19 @@ export class KupCombobox {
   render() {
     const fullHeight = this.rootElement.classList.contains('kup-full-height');
     const fullWidth = this.rootElement.classList.contains('kup-full-width');
-    const customStyle = this.kupManager.theme.setCustomStyle(this.rootElement);
-    return (h(Host, { class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, onBlur: () => this.onKupBlur(), style: this.elStyle },
-      customStyle ? h("style", null, customStyle) : null,
+    return (h(Host, { class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: this.elStyle },
+      h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
       h("div", { id: componentWrapperId, style: this.elStyle },
-        h(FTextField, Object.assign({}, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, icon: KupThemeIconValues.DROPDOWN, readOnly: this.isSelect, trailingIcon: true, value: this.displayedValue, onChange: (e) => this.onKupChange(e), onClick: (e) => this.onKupClick(e), onFocus: (e) => this.onKupFocus(e), onInput: (e) => this.onKupInput(e), onIconClick: (e) => this.onKupIconClick(e) })),
-        this.prepList())));
+        h(FTextField, Object.assign({}, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, icon: this.showDropDownIcon
+            ? KupThemeIconValues.DROPDOWN
+            : null, readOnly: this.isSelect, trailingIcon: true, value: this.displayedValue, onBlur: () => this.onKupBlur(), onChange: (e) => this.onKupChange(e), onClick: (e) => this.onKupClick(e), onFocus: (e) => this.onKupFocus(e), onInput: (e) => this.onKupInput(e), onIconClick: (e) => this.onKupIconClick(e) }), this.prepList()))));
   }
   disconnectedCallback() {
-    this.kupManager.theme.unregister(this);
-    const dynamicPositionElements = this.rootElement.shadowRoot.querySelectorAll('[' + kupDynamicPositionAttribute + ']');
-    if (dynamicPositionElements.length > 0) {
-      this.kupManager.dynamicPosition.unregister(Array.prototype.slice.call(dynamicPositionElements));
+    if (this.listEl) {
+      this.kupManager.dynamicPosition.unregister([this.listEl]);
+      this.listEl.remove();
     }
+    this.kupManager.theme.unregister(this);
   }
   static get is() { return "kup-combobox"; }
   static get encapsulation() { return "shadow"; }
@@ -329,11 +351,11 @@ export class KupCombobox {
       "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."
       },
@@ -460,6 +482,24 @@ export class KupCombobox {
       "attribute": "select-mode",
       "reflect": false,
       "defaultValue": "ItemsDisplayMode.CODE"
+    },
+    "showDropDownIcon": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true shows the drop-down icon, for open list."
+      },
+      "attribute": "show-drop-down-icon",
+      "reflect": false,
+      "defaultValue": "true"
     }
   }; }
   static get states() { return {
@@ -613,8 +653,8 @@ export class KupCombobox {
         "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."
           }],
@@ -696,8 +736,8 @@ export class KupCombobox {
         "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."
           }],
@@ -725,8 +765,8 @@ export class KupCombobox {
         "signature": "(value: string) => Promise<void>",
         "parameters": [{
             "tags": [{
-                "text": "value - Value to be set.",
-                "name": "param"
+                "name": "param",
+                "text": "value - Value to be set."
               }],
             "text": "- Value to be set."
           }],

package/dist/collection/components/kup-dash-list/kup-dash-list.js

@@ -1,6 +1,7 @@
 import { Component, Prop, Event, h } from '@stencil/core';
 import { getCellValueForDisplay } from '../../utils/cell-utils';
-import { getCurrentLocale, getDecimalSeparator } from '../../utils/utils';
+import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
+import { getDecimalSeparator } from '../../utils/utils';
 export class KupDashList {
   constructor() {
     this.layout = '1';
@@ -12,6 +13,13 @@ export class KupDashList {
     this.iconColor = [];
     this.valueColor = [];
     this.textColor = [];
+    /*-------------------------------------------------*/
+    /*       I n t e r n a l   V a r i a b l e s       */
+    /*-------------------------------------------------*/
+    /**
+     * Instance of the KupManager class.
+     */
+    this.kupManager = kupManagerInstance();
   }
   render() {
     let rows = [];
@@ -69,7 +77,8 @@ export class KupDashList {
         if (this.data.columns[6] &&
           r.cells[this.data.columns[6].name].obj.k) {
           newValue =
-            newValue + getDecimalSeparator(getCurrentLocale());
+            newValue +
+              getDecimalSeparator(this.kupManager.dates.getLocale());
         }
         valueInt = (h("div", { slot: "value-int", style: valueColor }, newValue));
       }
@@ -82,7 +91,7 @@ export class KupDashList {
       else {
         valueDec = h("div", { slot: "value-dec" });
       }
-      const row = (h("kup-dash", { layout: this.layout, fontsize: this.fontsize, index: count, active: this.active },
+      const row = (h("kup-dash", { layout: this.layout, fontsize: this.fontsize, index: count, active: this.active, slot: String(count) },
         icon,
         unit,
         descr,
@@ -94,7 +103,7 @@ export class KupDashList {
     });
     return (h("div", null,
       h("link", { href: "https://cdn.materialdesignicons.com/4.5.95/css/materialdesignicons.min.css", rel: "stylesheet", type: "text/css" }),
-      h("kup-layout", { columnsNumber: this.columnsNumber, horizontal: this.horizontal, fillSpace: this.fullWidth }, rows)));
+      h("kup-grid", { columns: this.columnsNumber, singleLine: this.horizontal, class: `${this.fullWidth ? 'kup-full-width' : ''}` }, rows)));
   }
   static get is() { return "kup-dash-list"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/kup-data-table/kup-data-table-declarations.js

@@ -4,6 +4,7 @@
  */
 export var KupDataTableProps;
 (function (KupDataTableProps) {
+  KupDataTableProps["autoFillMissingCells"] = "When true and when a row is missing some columns, the missing cells will be autogenerated.";
   KupDataTableProps["customStyle"] = "Custom style of the component.";
   KupDataTableProps["data"] = "The data of the table.";
   KupDataTableProps["density"] = "The density of the rows, defaults at 'medium' and can be also set to 'large' or 'small'.";
@@ -11,8 +12,8 @@ export var KupDataTableProps;
   KupDataTableProps["dropEnabled"] = "Enables drop.";
   KupDataTableProps["editableData"] = "When set to true, editable cells will be rendered using input components.";
   KupDataTableProps["emptyDataLabel"] = "Defines the label to show when the table is empty.";
-  KupDataTableProps["enableExtraColumns"] = "Enables adding extra columns.";
   KupDataTableProps["enableSortableColumns"] = "Enables the sorting of columns by dragging them into different columns.";
+  KupDataTableProps["enableExtraColumns"] = "Enables adding extra columns.";
   KupDataTableProps["expandGroups"] = "Expands groups when set to true.";
   KupDataTableProps["filters"] = "List of filters set by the user.";
   KupDataTableProps["fixedColumns"] = "Fixes the given number of columns so that they stay visible when horizontally scrolling the data-table. If grouping is active or the value of the prop is <= 0, this prop will have no effect. Can be combined with fixedRows.";
@@ -33,6 +34,7 @@ export var KupDataTableProps;
   KupDataTableProps["pageSelected"] = "Current selected page set on component load";
   KupDataTableProps["paginatorPos"] = "Sets the position of the paginator. Available positions: top, bottom or both.";
   KupDataTableProps["removableColumns"] = "Sets the possibility to remove the selected column.";
+  KupDataTableProps["resizableColumns"] = "Gives the possibility to resize columns by dragging on their right edge.";
   KupDataTableProps["rowActions"] = "Sets the actions of the rows.";
   KupDataTableProps["rowsPerPage"] = "Sets the number of rows per page to display.";
   KupDataTableProps["scrollOnHover"] = "Activates the scroll on hover function.";

package/dist/collection/components/kup-data-table/kup-data-table-helper.js

@@ -1,18 +1,11 @@
 import numeral from 'numeral';
-import { SortMode, TotalMode, KupDataTableRowDragType, } from './kup-data-table-declarations';
+import { SortMode, TotalMode, } from './kup-data-table-declarations';
 import { isEmpty, stringToNumber } from '../../utils/utils';
-import { setDragDropPayload } from '../../utils/drag-and-drop';
 import { getCellValueForDisplay, getColumnByName, compareCell, } from '../../utils/cell-utils';
 import { FiltersRows } from '../../utils/filters/filters-rows';
 import { kupManagerInstance } from '../../utils/kup-manager/kup-manager';
 import { KupDebugCategory } from '../../utils/kup-debug/kup-debug-declarations';
-import { KupObjects } from '../../utils/kup-objects/kup-objects';
-import { KupDates } from '../../utils/kup-dates/kup-dates';
 const dom = document.documentElement;
-const kupDates = dom.ketchup ? dom.ketchup.dates : new KupDates();
-const kupObjects = dom.ketchup
-  ? dom.ketchup.objects
-  : new KupObjects();
 export function sortRows(rows = [], sort = []) {
   if (!rows || rows.length === 0) {
     return [];
@@ -93,9 +86,15 @@ function getSortOnColumn(column = '', sort = []) {
 function compareRows(r1, r2, sortObj) {
   const cell1 = r1.cells[sortObj.column];
   const cell2 = r2.cells[sortObj.column];
-  if (!cell1 || !cell2) {
+  if (!cell1 && !cell2) {
     return 0;
   }
+  if (!cell1) {
+    return 1;
+  }
+  if (!cell2) {
+    return -1;
+  }
   return compareCell(cell1, cell2, sortObj.sortMode);
 }
 //-------- FILTER FUNCTIONS --------
@@ -240,7 +239,7 @@ function updateGroupTotal(groupRow, totals, addedRow, distinctObj) {
     const currentTotalValue = groupRow.group.totals[key] || 0;
     const cell = addedRow.cells[key];
     if (cell) {
-      let _isNumber = kupObjects.isNumber(cell.obj);
+      let _isNumber = dom.ketchup.objects.isNumber(cell.obj);
       const totalMode = totals[key];
       switch (totalMode) {
         case TotalMode.COUNT:
@@ -349,18 +348,19 @@ function updateGroupTotal(groupRow, totals, addedRow, distinctObj) {
               parent = parent.group.parent;
             }
           }
-          else if (kupObjects.isDate(cell.obj)) {
+          else if (dom.ketchup.objects.isDate(cell.obj)) {
             const momentValue = cell.obj
-              ? kupObjects.parseDate(cell.obj)
-              : kupDates.toDayjs(cell.value);
-            if (kupDates.isValid(momentValue)) {
-              const cellValue = kupDates.toDate(momentValue);
+              ? dom.ketchup.objects.parseDate(cell.obj)
+              : dom.ketchup.dates.toDayjs(cell.value);
+            if (dom.ketchup.dates.isValid(momentValue)) {
+              const cellValue = dom.ketchup.dates.toDate(momentValue);
               const currentTotalValue = groupRow.group.totals[key];
               if (currentTotalValue) {
                 let moments = [];
                 moments.push(cellValue);
-                moments.push(kupDates.format(currentTotalValue));
-                groupRow.group.totals[key] = kupDates.format(kupDates.min(moments));
+                moments.push(dom.ketchup.dates.format(currentTotalValue));
+                groupRow.group.totals[key] =
+                  dom.ketchup.dates.format(dom.ketchup.dates.min(moments));
               }
               else {
                 groupRow.group.totals[key] = cellValue;
@@ -372,8 +372,9 @@ function updateGroupTotal(groupRow, totals, addedRow, distinctObj) {
                 if (currentParentMin) {
                   let moments = [];
                   moments.push(cellValue);
-                  moments.push(kupDates.format(currentParentMin));
-                  parent.group.totals[key] = kupDates.format(kupDates.min(moments));
+                  moments.push(dom.ketchup.dates.format(currentParentMin));
+                  parent.group.totals[key] =
+                    dom.ketchup.dates.format(dom.ketchup.dates.min(moments));
                 }
                 else {
                   // first round
@@ -410,18 +411,19 @@ function updateGroupTotal(groupRow, totals, addedRow, distinctObj) {
               parent = parent.group.parent;
             }
           }
-          else if (kupObjects.isDate(cell.obj)) {
+          else if (dom.ketchup.objects.isDate(cell.obj)) {
             const momentValue = cell.obj
-              ? kupObjects.parseDate(cell.obj)
-              : kupDates.toDayjs(cell.value);
-            if (kupDates.isValid(momentValue)) {
-              const cellValue = kupDates.toDate(momentValue);
+              ? dom.ketchup.objects.parseDate(cell.obj)
+              : dom.ketchup.dates.toDayjs(cell.value);
+            if (dom.ketchup.dates.isValid(momentValue)) {
+              const cellValue = dom.ketchup.dates.toDate(momentValue);
               const currentTotalValue = groupRow.group.totals[key];
               if (currentTotalValue) {
                 let moments = [];
                 moments.push(cellValue);
-                moments.push(kupDates.format(currentTotalValue));
-                groupRow.group.totals[key] = kupDates.format(kupDates.max(moments));
+                moments.push(dom.ketchup.dates.format(currentTotalValue));
+                groupRow.group.totals[key] =
+                  dom.ketchup.dates.format(dom.ketchup.dates.max(moments));
               }
               else {
                 groupRow.group.totals[key] = cellValue;
@@ -433,8 +435,9 @@ function updateGroupTotal(groupRow, totals, addedRow, distinctObj) {
                 if (currentParentMin) {
                   let moments = [];
                   moments.push(cellValue);
-                  moments.push(kupDates.format(currentParentMin));
-                  parent.group.totals[key] = kupDates.format(kupDates.max(moments));
+                  moments.push(dom.ketchup.dates.format(currentParentMin));
+                  parent.group.totals[key] =
+                    dom.ketchup.dates.format(dom.ketchup.dates.max(moments));
                 }
                 else {
                   // first round
@@ -566,14 +569,16 @@ export function normalizeRows(columns, rows) {
     const normalizedrows = Object.assign(rows);
     rows.forEach((row) => {
       columns.forEach((column) => {
-        const cell = row.cells[column.name];
-        if (cell && column.obj && !cell.obj) {
-          // cell.obj = Object.assign(column.obj);
-          cell.obj = {
-            t: column.obj.t,
-            p: column.obj.p,
-            k: cell.value,
-          };
+        if (row.cells) {
+          const cell = row.cells[column.name];
+          if (cell && column.obj && !cell.obj) {
+            // cell.obj = Object.assign(column.obj);
+            cell.obj = {
+              t: column.obj.t,
+              p: column.obj.p,
+              k: cell.value,
+            };
+          }
         }
       });
     });
@@ -597,7 +602,7 @@ export function calcTotals(rows = [], totals = {}) {
   }
   else {
     let distinctObj = {};
-    rows.forEach((r) => {
+    rows.forEach((r, index, array) => {
       keys.filter((key) => TotalMode.COUNT !== totals[key] &&
         totals[key].indexOf(TotalMode.MATH) != 0).forEach((key) => {
         // getting cell
@@ -605,7 +610,7 @@ export function calcTotals(rows = [], totals = {}) {
         if (cell) {
           if (totals[key] === TotalMode.DISTINCT) {
             let cellValue;
-            if (kupObjects.isNumber(cell.obj)) {
+            if (dom.ketchup.objects.isNumber(cell.obj)) {
               cellValue = numeral(stringToNumber(cell.value)).value();
             }
             else {
@@ -620,14 +625,9 @@ export function calcTotals(rows = [], totals = {}) {
             else {
               // update the list
               distinctList.push(cellValue);
-              if (distinctList.length === rows.length) {
-                // last round
-                footerRow[key] = new Set(distinctList).size;
-                distinctObj[key] = [];
-              }
             }
           }
-          else if (kupObjects.isNumber(cell.obj)) {
+          else if (dom.ketchup.objects.isNumber(cell.obj)) {
             const cellValue = numeral(stringToNumber(cell.value));
             let currentFooterValue = footerRow[key];
             switch (true) {
@@ -657,20 +657,21 @@ export function calcTotals(rows = [], totals = {}) {
             }
             // TODO DRY the MIN and MAX functions
           }
-          else if (kupObjects.isDate(cell.obj)) {
+          else if (dom.ketchup.objects.isDate(cell.obj)) {
             const momentValue = cell.obj
-              ? kupObjects.parseDate(cell.obj)
-              : kupDates.toDayjs(cell.value);
-            if (kupDates.isValid(momentValue)) {
-              const cellValue = kupDates.toDate(momentValue);
+              ? dom.ketchup.objects.parseDate(cell.obj)
+              : dom.ketchup.dates.toDayjs(cell.value);
+            if (dom.ketchup.dates.isValid(momentValue)) {
+              const cellValue = dom.ketchup.dates.toDate(momentValue);
               const currentFooterValue = footerRow[key];
               switch (true) {
                 case totals[key] === TotalMode.MIN:
                   if (currentFooterValue) {
                     let moments = [];
                     moments.push(cellValue);
-                    moments.push(kupDates.format(currentFooterValue));
-                    footerRow[key] = kupDates.format(kupDates.min(moments));
+                    moments.push(dom.ketchup.dates.format(currentFooterValue));
+                    footerRow[key] =
+                      dom.ketchup.dates.format(dom.ketchup.dates.min(moments));
                   }
                   else {
                     footerRow[key] = cellValue;
@@ -680,8 +681,9 @@ export function calcTotals(rows = [], totals = {}) {
                   if (currentFooterValue) {
                     let moments = [];
                     moments.push(cellValue);
-                    moments.push(kupDates.format(currentFooterValue));
-                    footerRow[key] = kupDates.format(kupDates.max(moments));
+                    moments.push(dom.ketchup.dates.format(currentFooterValue));
+                    footerRow[key] =
+                      dom.ketchup.dates.format(dom.ketchup.dates.max(moments));
                   }
                   else {
                     footerRow[key] = cellValue;
@@ -693,6 +695,12 @@ export function calcTotals(rows = [], totals = {}) {
             }
           }
         }
+        if (index === array.length - 1 &&
+          totals[key] === TotalMode.DISTINCT) {
+          // last round
+          footerRow[key] = new Set(distinctObj[key]).size;
+          distinctObj[key] = [];
+        }
       });
     });
     // fixing MATH, AVERAGE and COUNT
@@ -812,52 +820,3 @@ function cloneRowGroup(group) {
   };
   return cloned;
 }
-/**
- * Given a cell object, determines if the style object has also a border radius
- * @param cell - The cell to check
- * @returns {boolean} - true if borderRadius is present, false otherwise.
- */
-export function styleHasBorderRadius(cell) {
-  return !!(cell &&
-    cell.style &&
-    (cell.style.borderRadius || cell.style['border-radius']));
-}
-/**
- * Given a cell object, determines if the style object has also a writing mode
- * @param cell - The cell to check
- * @returns {boolean} - true if writingMode is present, false otherwise.
- */
-export function styleHasWritingMode(cell) {
-  return !!(cell &&
-    cell.style &&
-    (cell.style.writingMode || cell.style['writing-mode']));
-}
-export const dropHandlersCell = {
-  onDragLeave: (e) => {
-    // console.log('onDragLeave', e);
-    if (e.dataTransfer.types.indexOf(KupDataTableRowDragType) >= 0) {
-      e.target
-        .closest('tr')
-        .classList.remove('selected');
-    }
-  },
-  onDragOver: (e) => {
-    // console.log('onDragOver', e);
-    if (e.dataTransfer.types.indexOf(KupDataTableRowDragType) >= 0) {
-      let overElement = e.target;
-      if (overElement.tagName !== 'TD') {
-        overElement = overElement.closest('td');
-      }
-      overElement = overElement.closest('tr');
-      overElement.classList.add('selected');
-      // TODO do it without using the element but with data like id, etc.
-      setDragDropPayload({
-        overElement,
-      });
-    }
-    return true;
-  },
-  onDrop: (_e) => {
-    return KupDataTableRowDragType;
-  },
-};

package/dist/collection/components/kup-data-table/kup-data-table-state.js

@@ -5,8 +5,8 @@ export class KupDataTableState {
     this.expandGroups = false;
     this.groupLabelDisplay = GroupLabelDisplayMode.BOTH;
     this.density = 'small';
-    this.enableExtraColumns = true;
     this.enableSortableColumns = false;
+    this.enableExtraColumns = true;
     this.forceOneLine = false;
     this.globalFilter = false;
     this.globalFilterValue = '';