@sme.up/ketchup 3.0.0-SNAPSHOT → 3.0.0

package/dist/collection/assets/data-table.js

@@ -414,6 +414,50 @@ const mockedRows = [
             },
         },
     },
+    {
+        cells: {
+            FLD1: {
+                obj: {
+                    t: 'CN',
+                    p: 'COL',
+                    k: 'CASFRA',
+                },
+                value: 'CASFRA',
+            },
+            FLD2: {
+                obj: {
+                    t: 'NR',
+                    p: '',
+                    k: '10',
+                },
+                value: '10',
+            },
+            FLD3: {
+                obj: {
+                    t: 'NR',
+                    p: '',
+                    k: '100000.60',
+                },
+                value: '100,000.60',
+            },
+            FLD4: {
+                obj: {
+                    t: 'D8',
+                    p: '*YYMD',
+                    k: '20181101',
+                },
+                value: '2018-11-01',
+            },
+            FLD5: {
+                obj: {
+                    t: 'NR',
+                    p: 'P',
+                    k: '0',
+                },
+                value: '0.00',
+            },
+        },
+    },
     {
         cells: {
             FLD1: {

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

@@ -11,8 +11,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["enableSortableColumns"] = "Enables the sorting of columns by dragging them into different columns.";
   KupDataTableProps["enableExtraColumns"] = "Enables adding extra columns.";
+  KupDataTableProps["enableSortableColumns"] = "Enables the sorting of columns by dragging them into different 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.";

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.enableSortableColumns = false;
     this.enableExtraColumns = true;
+    this.enableSortableColumns = false;
     this.forceOneLine = false;
     this.globalFilter = false;
     this.globalFilterValue = '';

package/dist/collection/components/kup-data-table/kup-data-table.css

@@ -3445,6 +3445,10 @@ th.obj:hover span:not(.overlay-action) {
 .f-image--wrapper.cell-info {
   margin: auto 0.5em auto 0.25em;
 }
+:host([force-one-line]) .f-image--wrapper.cell-info {
+  display: inline-block;
+  vertical-align: sub;
+}
 
 [kup-dialog] {
   background-color: var(--kup-background-color);
@@ -3787,6 +3791,9 @@ td.purple-bg {
 td.top-right-indicator {
   position: relative !important;
 }
+td.top-right-indicator.fixed-column, td.top-right-indicator.fixed-row {
+  position: sticky !important;
+}
 td.top-right-indicator:after {
   content: "";
   border-width: 0 0 0.5em 0.5em;

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

@@ -305,6 +305,8 @@ export class KupDataTable {
     this.isRestoringState = false;
     this.totalMenuCoords = null;
     this.clickTimeout = [];
+    this.rowsRefs = [];
+    this.oldWidth = null;
     /**
      * Reference to the row detail card.
      */
@@ -677,7 +679,8 @@ export class KupDataTable {
    * This method is invoked by KupManager whenever the component changes size.
    */
   async resizeCallback() {
-    if (this.lazyLoadCells) {
+    if (this.lazyLoadCells &&
+      this.rootElement.clientWidth !== this.oldWidth) {
       window.clearTimeout(this.resizeTimeout);
       this.resizeTimeout = window.setTimeout(() => this.refresh(), 300);
     }
@@ -1008,9 +1011,8 @@ export class KupDataTable {
     this.intObserver = new IntersectionObserver(callback, options);
   }
   didRenderObservers() {
-    const rows = this.rootElement.shadowRoot.querySelectorAll('tbody > tr');
     if (this.paginatedRowsLength < this.rowsLength && this.lazyLoadRows) {
-      this.intObserver.observe(rows[this.paginatedRowsLength - 1]);
+      this.intObserver.observe(this.rowsRefs[this.paginatedRowsLength - 1]);
     }
   }
   didLoadObservers() {
@@ -1197,8 +1199,6 @@ export class KupDataTable {
       this.customizePanelPosition();
     }
     this.totalMenuPosition();
-    // TODO
-    // this.groupMenuPosition();
     this.checkScrollOnHover();
     this.didRenderObservers();
     this.hideShowColumnDropArea(false);
@@ -1215,6 +1215,7 @@ export class KupDataTable {
       this.persistState();
     }
     // ***
+    this.oldWidth = this.rootElement.clientWidth;
     this.kupManager.debug.logRender(this, true);
   }
   componentDidLoad() {
@@ -2568,12 +2569,18 @@ export class KupDataTable {
   renderFooter() {
     let extraCells = 0;
     // Composes initial cells if necessary
+    let actionRowCell = null;
     let selectRowCell = null;
     if (this.selection === SelectionMode.MULTIPLE_CHECKBOX) {
       extraCells++;
       const fixedCellStyle = this.composeFixedCellStyleAndClass(extraCells, 0, extraCells);
       selectRowCell = (h("td", { class: fixedCellStyle ? fixedCellStyle.fixedCellClasses : null, style: fixedCellStyle ? fixedCellStyle.fixedCellStyle : null }));
     }
+    if (this.rowActions) {
+      extraCells++;
+      const fixedCellStyle = this.composeFixedCellStyleAndClass(extraCells, 0, extraCells);
+      actionRowCell = (h("td", { class: fixedCellStyle ? fixedCellStyle.fixedCellClasses : null, style: fixedCellStyle ? fixedCellStyle.fixedCellStyle : null }));
+    }
     // Action cell
     let actionsCell = null;
     if (this.hasRowActions()) {
@@ -2833,11 +2840,11 @@ export class KupDataTable {
           */
           cells.push(h("td", { class: totalClass }, value));
         }
-        jsxRows.push(h("tr", { "data-row": row, class: "group group-label" }, grouplabelcell));
-        jsxRows.push(h("tr", { "data-row": row, class: "group group-total" }, cells));
+        jsxRows.push(h("tr", { ref: (el) => this.rowsRefs.push(el), "data-row": row, class: "group group-label" }, grouplabelcell));
+        jsxRows.push(h("tr", { ref: (el) => this.rowsRefs.push(el), "data-row": row, class: "group group-total" }, cells));
       }
       else {
-        jsxRows.push(h("tr", { "data-row": row, class: "group" },
+        jsxRows.push(h("tr", { ref: (el) => this.rowsRefs.push(el), "data-row": row, class: "group" },
           h("td", { colSpan: this.calculateColspan() },
             h("span", { class: "group-cell-content" },
               indent,
@@ -3089,7 +3096,7 @@ export class KupDataTable {
       const style = {
         '--row-actions': rowActionsCount,
       };
-      return (h("tr", Object.assign({ "data-row": row, class: rowClass, style: style }, (this.dragEnabled
+      return (h("tr", Object.assign({ ref: (el) => this.rowsRefs.push(el), "data-row": row, class: rowClass, style: style }, (this.dragEnabled
         ? setKetchupDraggable(dragHandlersRow, {
           [KupDataTableRowDragType]: row,
           'kup-drag-source-element': {}, // I put nothing in there because I overwrite the content inside the onDragStart method
@@ -3886,12 +3893,13 @@ export class KupDataTable {
         } })));
   }
   render() {
+    this.rowsRefs = [];
     this.renderedRows = [];
     let elStyle = undefined;
     this.sizedColumns = this.getSizedColumns();
     let rows = null;
     if (this.paginatedRowsLength === 0) {
-      rows = (h("tr", null,
+      rows = (h("tr", { ref: (el) => this.rowsRefs.push(el) },
         h("td", Object.assign({}, (this.dropEnabled
           ? setKetchupDroppable(dropHandlersCell, [KupDataTableRowDragType], this.rootElement, {
             row: null,

package/dist/collection/utils/kup-debug/kup-debug.js

@@ -31,6 +31,9 @@ export class KupDebug {
     _debugWidget.set(this, void 0);
     this.active = active ? true : false;
     this.autoPrint = autoprint ? true : false;
+    this.container = document.createElement('div');
+    this.container.setAttribute('kup-debug', '');
+    document.body.appendChild(this.container);
     this.logLimit = logLimit ? logLimit : 250;
     this.logs = [];
     __classPrivateFieldSet(this, _debugWidget, null);
@@ -50,7 +53,7 @@ export class KupDebug {
     const downloadAnchorNode = document.createElement('a');
     downloadAnchorNode.setAttribute('href', dataStr);
     downloadAnchorNode.setAttribute('download', 'kup_props.json');
-    document.body.appendChild(downloadAnchorNode);
+    this.container.appendChild(downloadAnchorNode);
     downloadAnchorNode.click();
     downloadAnchorNode.remove();
   }
@@ -196,7 +199,7 @@ export class KupDebug {
     debugWidget.sizeX = 'auto';
     debugWidget.sizeY = 'auto';
     debugWidget.addEventListener('kup-card-event', (e) => this.handleEvents(e));
-    document.body.append(debugWidget);
+    this.container.append(debugWidget);
     __classPrivateFieldSet(this, _debugWidget, debugWidget);
   }
   /**
@@ -647,17 +650,24 @@ export class KupDebug {
   }
   /**
    * Function used to time the render times of a component.
-   * @param comp - The component calling this function or a string.
-   * @param didRender - Must be set to false when called inside a componentWillRender() lifecycle hook and true when called inside componentDidRender().
+   * @param {any} comp - The component calling this function or a string.
+   * @param {boolean} didRender - Must be set to false when called inside a componentWillRender() lifecycle hook and true when called inside componentDidRender().
+   * @param {string} breakpoint - When present, this log is supposedly between a willRender and didRender hook. Used to time single features of the render lifecycle.
    */
-  logRender(comp, didRender) {
-    if (!didRender) {
+  logRender(comp, didRender, breakpoint) {
+    if (breakpoint) {
+      const timeDiff = window.performance.now() - comp.debugInfo.renderStart;
+      if (this.isDebug()) {
+        this.logMessage(comp, breakpoint + ' took ' + timeDiff + 'ms.');
+      }
+    }
+    else if (!didRender) {
       comp.debugInfo.renderCount++;
       comp.debugInfo.renderStart = window.performance.now();
     }
     else {
       comp.debugInfo.renderEnd = window.performance.now();
-      let timeDiff = comp.debugInfo.renderEnd - comp.debugInfo.renderStart;
+      const timeDiff = comp.debugInfo.renderEnd - comp.debugInfo.renderStart;
       if (this.isDebug()) {
         this.logMessage(comp, 'Render #' +
           comp.debugInfo.renderCount +

package/dist/collection/utils/kup-dynamic-position/kup-dynamic-position.js

@@ -9,8 +9,10 @@ export class KupDynamicPosition {
   /**
    * Initializes KupDynamicPosition.
    */
-  constructor(container) {
-    this.container = container ? container : 'body';
+  constructor() {
+    this.container = document.createElement('div');
+    this.container.setAttribute('kup-dynamic-position', '');
+    document.body.appendChild(this.container);
     this.managedElements = new Set();
   }
   /**
@@ -36,7 +38,7 @@ export class KupDynamicPosition {
     }
     if (detach) {
       el.style.position = 'absolute';
-      document.querySelector(this.container).appendChild(el);
+      this.container.appendChild(el);
     }
     else {
       el.style.position = 'fixed';

package/dist/collection/utils/kup-manager/kup-manager.js

@@ -17,11 +17,10 @@ export class KupManager {
    * Initializes KupManager.
    */
   constructor(overrides) {
-    let debugActive = null, debugAutoprint = null, debugLogLimit = null, dialogZIndex = null, dynamicPositionContainer = null, languageList = null, languageName = null, objectsList = null, scrollOnHoverDelay = null, scrollOnHoverStep = null, themeList = null, themeName = null;
+    let debugActive = null, debugAutoprint = null, debugLogLimit = null, dialogZIndex = null, languageList = null, languageName = null, objectsList = null, scrollOnHoverDelay = null, scrollOnHoverStep = null, themeList = null, themeName = null;
     if (overrides) {
       const debug = overrides.debug;
       const dialog = overrides.dialog;
-      const dynamicPosition = overrides.dynamicPosition;
       const language = overrides.language;
       const objects = overrides.objects;
       const scrollOnHover = overrides.scrollOnHover;
@@ -34,11 +33,6 @@ export class KupManager {
       if (dialog) {
         dialogZIndex = dialog.zIndex ? dialog.zIndex : null;
       }
-      if (dynamicPosition) {
-        dynamicPositionContainer = dynamicPosition.container
-          ? dynamicPosition.container
-          : null;
-      }
       if (language) {
         languageList = language.list ? language.list : null;
         languageName = language.name ? language.name : null;
@@ -61,7 +55,7 @@ export class KupManager {
     }
     this.debug = new KupDebug(debugActive, debugAutoprint, debugLogLimit);
     this.dialog = new KupDialog(dialogZIndex);
-    this.dynamicPosition = new KupDynamicPosition(dynamicPositionContainer);
+    this.dynamicPosition = new KupDynamicPosition();
     this.language = new KupLanguage(languageList, languageName);
     this.magicBox = null;
     this.overrides = overrides ? overrides : null;

package/dist/collection/utils/kup-scroll-on-hover/kup-scroll-on-hover.js

@@ -44,19 +44,22 @@ export class KupScrollOnHover {
     __classPrivateFieldSet(this, _rightArrows, []);
     __classPrivateFieldSet(this, _scrollEvent, (event) => this.updateChildren(event.target));
     __classPrivateFieldSet(this, _timeout, null);
-    __classPrivateFieldGet(this, _arrowsContainer).id = 'container-scrolling-arrow';
+    __classPrivateFieldGet(this, _arrowsContainer).id = 'kup-scrolling-arrows';
     for (let index = 1; index < 4; index++) {
       const arrow = document.createElement('div');
-      arrow.setAttribute('class', 'left-scrolling-arrow arrow-' + index);
+      arrow.setAttribute('class', 'kup-left-scrolling-arrow kup-arrow-' + index);
       __classPrivateFieldGet(this, _leftArrows).push(arrow);
     }
     for (let index = 1; index < 4; index++) {
       const arrow = document.createElement('div');
-      arrow.setAttribute('class', 'right-scrolling-arrow arrow-' + index);
+      arrow.setAttribute('class', 'kup-right-scrolling-arrow kup-arrow-' + index);
       __classPrivateFieldGet(this, _rightArrows).push(arrow);
     }
     __classPrivateFieldGet(this, _arrowsContainer).append(__classPrivateFieldGet(this, _leftArrows)[2], __classPrivateFieldGet(this, _leftArrows)[1], __classPrivateFieldGet(this, _leftArrows)[0], __classPrivateFieldGet(this, _rightArrows)[0], __classPrivateFieldGet(this, _rightArrows)[1], __classPrivateFieldGet(this, _rightArrows)[2]);
-    document.body.append(__classPrivateFieldGet(this, _arrowsContainer));
+    this.container = document.createElement('div');
+    this.container.setAttribute('kup-scroll-on-hover', '');
+    this.container.appendChild(__classPrivateFieldGet(this, _arrowsContainer));
+    document.body.appendChild(this.container);
   }
   /**
    * Watches the given element in order to trigger the scroll on hover when conditions are met.
@@ -132,10 +135,10 @@ export class KupScrollOnHover {
         if (direction) {
           for (let i = 0; i < 3; i++) {
             if (direction === ScrollOnHoverDirection.LEFT) {
-              __classPrivateFieldGet(this, _leftArrows)[i].classList.add('activated');
+              __classPrivateFieldGet(this, _leftArrows)[i].classList.add('kup-activated');
             }
             else {
-              __classPrivateFieldGet(this, _rightArrows)[i].classList.add('activated');
+              __classPrivateFieldGet(this, _rightArrows)[i].classList.add('kup-activated');
             }
           }
           __classPrivateFieldSet(this, _timeout, setTimeout(() => {
@@ -158,12 +161,12 @@ export class KupScrollOnHover {
     clearTimeout(__classPrivateFieldGet(this, _timeout));
     __classPrivateFieldSet(this, _timeout, null);
     for (let i = 0; i < __classPrivateFieldGet(this, _leftArrows).length; i++) {
-      __classPrivateFieldGet(this, _leftArrows)[i].classList.remove('activated');
-      __classPrivateFieldGet(this, _leftArrows)[i].classList.remove('animated');
+      __classPrivateFieldGet(this, _leftArrows)[i].classList.remove('kup-activated');
+      __classPrivateFieldGet(this, _leftArrows)[i].classList.remove('kup-animated');
     }
     for (let i = 0; i < __classPrivateFieldGet(this, _rightArrows).length; i++) {
-      __classPrivateFieldGet(this, _rightArrows)[i].classList.remove('activated');
-      __classPrivateFieldGet(this, _rightArrows)[i].classList.remove('animated');
+      __classPrivateFieldGet(this, _rightArrows)[i].classList.remove('kup-activated');
+      __classPrivateFieldGet(this, _rightArrows)[i].classList.remove('kup-animated');
     }
   }
   /**
@@ -213,7 +216,7 @@ export class KupScrollOnHover {
       el.scrollLeft += this.step;
     }
     for (let i = 0; i < arrow.length; i++) {
-      arrow[i].classList.add('animated');
+      arrow[i].classList.add('kup-animated');
     }
     __classPrivateFieldSet(this, _rAF, requestAnimationFrame(function () {
       dom.ketchup.scrollOnHover.run(el, maxScrollLeft, percRight, percLeft, direction);

package/dist/esm/{drag-and-drop-cc72ec41.js → drag-and-drop-e88a00a2.js}

@@ -11,8 +11,8 @@ 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["enableSortableColumns"] = "Enables the sorting of columns by dragging them into different columns.";
   KupDataTableProps["enableExtraColumns"] = "Enables adding extra columns.";
+  KupDataTableProps["enableSortableColumns"] = "Enables the sorting of columns by dragging them into different 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.";

package/dist/esm/{f-button-f7a21749.js → f-button-52db5f1b.js}

@@ -1,7 +1,7 @@
 import { h } from './index-144be036.js';
 import { F as FButtonStyling } from './f-button-declarations-fd4965d1.js';
-import { F as FImage } from './f-image-0f1d37f3.js';
-import { c as KupThemeColorValues } from './kup-manager-f3bbd16f.js';
+import { F as FImage } from './f-image-9dbc901f.js';
+import { c as KupThemeColorValues } from './kup-manager-5a812e97.js';
 
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */

package/dist/esm/{f-image-0f1d37f3.js → f-image-9dbc901f.js}

@@ -1,5 +1,5 @@
 import { h, g as getAssetPath } from './index-144be036.js';
-import { c as KupThemeColorValues } from './kup-manager-f3bbd16f.js';
+import { c as KupThemeColorValues } from './kup-manager-5a812e97.js';
 
 /**
  * The type of a CSS step in CSS-drawing mode.

package/dist/esm/kup-accordion.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, d as getElement } from './index-144be036.js';
-import { k as kupManagerInstance, p as KupLanguageSearch, a as KupThemeIconValues } from './kup-manager-f3bbd16f.js';
+import { k as kupManagerInstance, p as KupLanguageSearch, a as KupThemeIconValues } from './kup-manager-5a812e97.js';
 import { g as getProps, s as setProps } from './utils-b02909d3.js';
 import { c as componentWrapperId } from './GenericVariables-6dfdd433.js';
-import { F as FImage } from './f-image-0f1d37f3.js';
+import { F as FImage } from './f-image-9dbc901f.js';
 import { K as KupGlobalFilterMode } from './filters-declarations-ae2fd7bd.js';
 import './kup-objects-c6683955.js';
 import './_commonjsHelpers-11ca3be1.js';