@sme.up/ketchup 4.0.0 → 4.1.0

package/dist/collection/components/kup-color-picker/kup-color-picker.js

@@ -1,7 +1,6 @@
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, } from '@stencil/core';
 import Picker from 'vanilla-picker';
 import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
-import { kupDynamicPositionAttribute, } from '../../utils/kup-dynamic-position/kup-dynamic-position-declarations';
 import { KupColorPickerProps, } from './kup-color-picker-declarations';
 import { KupLanguageGeneric } from '../../utils/kup-language/kup-language-declarations';
 import { getProps, setProps } from '../../utils/utils';
@@ -163,32 +162,29 @@ export class KupColorPicker {
   componentDidLoad() {
     const root = this.rootElement.shadowRoot;
     if (root) {
+      const that = this;
       this.picker = new Picker({
         alpha: false,
         color: this.value,
         parent: this.anchorEl,
       });
-      this.picker['kupColorPicker'] = this;
       this.picker['onClose'] = function (color) {
-        let colorPicker = this['kupColorPicker'];
-        colorPicker.setValue(color.hex.substr(0, 7));
-        colorPicker.kupManager.dynamicPosition.stop(colorPicker.dropdownEl);
-        colorPicker.kupChange.emit({
-          comp: colorPicker,
-          id: colorPicker.rootElement.id,
-          value: colorPicker.value,
+        that.setValue(color.hex.substr(0, 7));
+        that.kupChange.emit({
+          comp: that,
+          id: that.rootElement.id,
+          value: that.value,
         });
       };
       this.picker['onOpen'] = function () {
-        let colorPicker = this['kupColorPicker'];
-        if (!colorPicker.dropdownEl) {
-          colorPicker.dropdownEl =
-            this['kupColorPicker'].rootElement.shadowRoot.querySelector('.picker_wrapper');
-          colorPicker.kupManager.dynamicPosition.register(colorPicker.dropdownEl, colorPicker.anchorEl);
-        }
-        if (!colorPicker.disabled) {
-          colorPicker.kupManager.dynamicPosition.start(colorPicker.dropdownEl);
-        }
+        that.rootElement.style.setProperty('--kup_colorpicker_picker_width', that.textfieldEl.clientWidth + 'px');
+        that.kupManager.utilities.pointerDownCallbacks.add({
+          cb: () => {
+            that.picker.closeHandler(null);
+          },
+          onlyOnce: true,
+          el: that.picker['domElement'],
+        });
       };
     }
     this.kupManager.debug.logLoad(this, true);
@@ -230,10 +226,6 @@ export class KupColorPicker {
   disconnectedCallback() {
     this.kupManager.language.unregister(this);
     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));
-    }
   }
   static get is() { return "kup-color-picker"; }
   static get encapsulation() { return "shadow"; }
@@ -256,11 +248,11 @@ export class KupColorPicker {
       "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."
       },
@@ -284,8 +276,8 @@ export class KupColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Props of the text field."
       },
@@ -303,8 +295,8 @@ export class KupColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Defaults at false. When set to true, the component is disabled."
       },
@@ -324,8 +316,8 @@ export class KupColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"\""
           }],
         "text": "Sets the initial value of the component. Can be css color name, hex code or rgb code (sample: \"red\" or rgb(255, 0, 0) or \"#FF0000\" )."
       },
@@ -345,8 +337,8 @@ export class KupColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When true, the component's text field will be replaced by a swatch."
       },
@@ -385,8 +377,8 @@ export class KupColorPicker {
         "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."
           }],
@@ -452,8 +444,8 @@ export class KupColorPicker {
         "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."
           }],
@@ -481,8 +473,8 @@ export class KupColorPicker {
         "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-combobox/kup-combobox.css

@@ -2397,6 +2397,15 @@
   mask: var(--kup-dropdown-icon);
 }
 
+.f-text-field--wrapper {
+  position: relative;
+}
+
+kup-list {
+  position: absolute;
+  z-index: 1;
+}
+
 /*-------------------------------------------------*/
 /*        C o m p o n e n t   C l a s s e s        */
 /*-------------------------------------------------*/

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

@@ -1,5 +1,4 @@
 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 { consistencyCheck } from '../kup-list/kup-list-helper';
@@ -62,7 +61,6 @@ export class KupCombobox {
     this.textfieldEl = undefined;
   }
   onKupBlur() {
-    this.closeList();
     this.kupBlur.emit({
       comp: this,
       id: this.rootElement.id,
@@ -236,15 +234,20 @@ export class KupCombobox {
   openList() {
     this.textfieldWrapper.classList.add('toggled');
     this.listEl.menuVisible = true;
-    this.kupManager.dynamicPosition.start(this.listEl);
     let elStyle = this.listEl.style;
     elStyle.height = 'auto';
     elStyle.minWidth = this.textfieldWrapper.clientWidth + 'px';
+    this.kupManager.utilities.pointerDownCallbacks.add({
+      cb: () => {
+        this.closeList();
+      },
+      onlyOnce: true,
+      el: this.listEl,
+    });
   }
   closeList() {
     this.textfieldWrapper.classList.remove('toggled');
     this.listEl.menuVisible = false;
-    this.kupManager.dynamicPosition.stop(this.listEl);
   }
   isListOpened() {
     return this.listEl.menuVisible == true;
@@ -255,7 +258,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          */
@@ -286,7 +289,6 @@ export class KupCombobox {
         this.textfieldWrapper = f;
         this.textfieldEl = f.querySelector('input');
         FTextFieldMDC(f);
-        this.kupManager.dynamicPosition.register(this.listEl, this.textfieldWrapper);
       }
     }
     this.kupManager.debug.logRender(this, true);
@@ -295,18 +297,13 @@ export class KupCombobox {
     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 },
+    return (h(Host, { class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: this.elStyle },
       customStyle ? h("style", null, customStyle) : null,
       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: KupThemeIconValues.DROPDOWN, 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));
-    }
   }
   static get is() { return "kup-combobox"; }
   static get encapsulation() { return "shadow"; }
@@ -329,11 +326,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."
       },
@@ -613,8 +610,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 +693,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 +722,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

@@ -82,7 +82,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 +94,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

@@ -33,6 +33,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,7 +1,6 @@
 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';
@@ -93,9 +92,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 --------
@@ -566,14 +571,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 +604,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
@@ -620,11 +627,6 @@ 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)) {
@@ -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
@@ -832,32 +840,3 @@ export function styleHasWritingMode(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;
-  },
-};