@sme.up/ketchup 6.2.0 → 6.3.0

package/dist/esm/{kup-manager-22a475e6.js → kup-manager-86f440c7.js}

@@ -1,4 +1,4 @@
-import { a as getAssetPath, s as setAssetPath } from './index-ad6ab214.js';
+import { a as getAssetPath, s as setAssetPath } from './index-e41330a5.js';
 
 /**
  * Props of the kup-card component.
@@ -336,7 +336,7 @@ var __classPrivateFieldGet$3 = (undefined && undefined.__classPrivateFieldGet) |
   return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _KupDebug_debugWidget;
-const dom$f = document.documentElement;
+const dom$i = document.documentElement;
 /**
  * Debugging suite, used to log messages and statuses from the Ketchup components.
  * @module KupDebug
@@ -383,32 +383,32 @@ class KupDebug {
    */
   showWidget() {
     const debugWidget = document.createElement('kup-card');
-    const languages = dom$f.ketchup.language.getLanguages();
+    const languages = dom$i.ketchup.language.getLanguages();
     const languagesListData = [];
     for (let index = 0; index < languages.length; index++) {
       languagesListData.push({
         id: languages[index],
-        selected: languages[index] === dom$f.ketchup.language.name
+        selected: languages[index] === dom$i.ketchup.language.name
           ? true
           : false,
         value: languages[index],
       });
     }
-    const themes = dom$f.ketchup.theme.getThemes();
+    const themes = dom$i.ketchup.theme.getThemes();
     const themesListData = [];
     for (let index = 0; index < themes.length; index++) {
       themesListData.push({
         id: themes[index],
-        selected: themes[index] === dom$f.ketchup.theme.name ? true : false,
+        selected: themes[index] === dom$i.ketchup.theme.name ? true : false,
         value: themes[index],
       });
     }
-    const locales = dom$f.ketchup.dates.getLocales();
+    const locales = dom$i.ketchup.dates.getLocales();
     const localesListData = [];
     for (let index = 0; index < locales.length; index++) {
       localesListData.push({
         id: locales[index],
-        selected: locales[index] === dom$f.ketchup.dates.locale ? true : false,
+        selected: locales[index] === dom$i.ketchup.dates.locale ? true : false,
         value: locales[index],
       });
     }
@@ -418,13 +418,13 @@ class KupDebug {
           icon: 'power_settings_new',
           id: 'kup-debug-off',
           customStyle: ':host {--kup-font-size: 0.875em; border-left: 1px solid var(--kup-border-color); border-right: 1px solid var(--kup-border-color);}',
-          title: dom$f.ketchup.language.translate(KupLanguageDebug.OFF),
+          title: dom$i.ketchup.language.translate(KupLanguageDebug.OFF),
         },
         {
           customStyle: ':host {--kup-font-size: 0.875em;}',
           icon: 'print',
           id: 'kup-debug-print',
-          title: dom$f.ketchup.language.translate(KupLanguageDebug.PRINT),
+          title: dom$i.ketchup.language.translate(KupLanguageDebug.PRINT),
         },
         {
           checked: this.autoPrint,
@@ -432,20 +432,20 @@ class KupDebug {
           icon: 'speaker_notes',
           iconOff: 'speaker_notes_off',
           id: 'kup-debug-autoprint',
-          title: dom$f.ketchup.language.translate(KupLanguageDebug.AUTOPRINT),
+          title: dom$i.ketchup.language.translate(KupLanguageDebug.AUTOPRINT),
           toggable: true,
         },
         {
           customStyle: ':host {--kup-font-size: 0.875em;}',
           icon: 'broom',
           id: 'kup-debug-clear',
-          title: dom$f.ketchup.language.translate(KupLanguageDebug.CLEAR),
+          title: dom$i.ketchup.language.translate(KupLanguageDebug.CLEAR),
         },
         {
           customStyle: ':host {--kup-font-size: 0.875em;}',
           icon: 'delete',
           id: 'kup-debug-delete',
-          title: dom$f.ketchup.language.translate(KupLanguageDebug.DUMP),
+          title: dom$i.ketchup.language.translate(KupLanguageDebug.DUMP),
         },
         {
           className: 'kup-full-height',
@@ -454,22 +454,22 @@ class KupDebug {
           id: 'kup-debug-dl-props',
           label: 'Props',
           styling: 'flat',
-          title: dom$f.ketchup.language.translate(KupLanguageDebug.DL_PROPS),
+          title: dom$i.ketchup.language.translate(KupLanguageDebug.DL_PROPS),
         },
         {
           className: 'kup-full-height',
           customStyle: ':host {border-right: 1px solid var(--kup-border-color);}',
           icon: 'download',
           id: 'kup-debug-dl-all',
-          label: dom$f.ketchup.language.translate(KupLanguageDebug.DL_ALL),
+          label: dom$i.ketchup.language.translate(KupLanguageDebug.DL_ALL),
           styling: 'flat',
-          title: dom$f.ketchup.language.translate(KupLanguageDebug.DL_ALL),
+          title: dom$i.ketchup.language.translate(KupLanguageDebug.DL_ALL),
         },
         {
           customStyle: ':host {--kup-font-size: 0.875em;}',
           icon: 'auto-fix',
           id: 'kup-debug-magic-box',
-          title: dom$f.ketchup.language.translate(KupLanguageDebug.MAGIC_BOX),
+          title: dom$i.ketchup.language.translate(KupLanguageDebug.MAGIC_BOX),
         },
       ],
       combobox: [
@@ -484,11 +484,11 @@ class KupDebug {
               className: 'kup-full-height',
               emitSubmitEventOnEnter: false,
               inputType: 'text',
-              label: dom$f.ketchup.language.translate(KupLanguageDebug.THEME_CHANGER),
+              label: dom$i.ketchup.language.translate(KupLanguageDebug.THEME_CHANGER),
             },
           },
           id: 'kup-debug-theme-changer',
-          initialValue: dom$f.ketchup.theme.name,
+          initialValue: dom$i.ketchup.theme.name,
           isSelect: true,
         },
         {
@@ -502,11 +502,11 @@ class KupDebug {
               className: 'kup-full-height',
               emitSubmitEventOnEnter: false,
               inputType: 'text',
-              label: dom$f.ketchup.language.translate(KupLanguageDebug.LANGUAGE_CHANGER),
+              label: dom$i.ketchup.language.translate(KupLanguageDebug.LANGUAGE_CHANGER),
             },
           },
           id: 'kup-debug-language-changer',
-          initialValue: dom$f.ketchup.language.name,
+          initialValue: dom$i.ketchup.language.name,
           isSelect: true,
         },
         {
@@ -520,11 +520,11 @@ class KupDebug {
               className: 'kup-full-height',
               emitSubmitEventOnEnter: false,
               inputType: 'text',
-              label: dom$f.ketchup.language.translate(KupLanguageDebug.LOCALE_CHANGER),
+              label: dom$i.ketchup.language.translate(KupLanguageDebug.LOCALE_CHANGER),
             },
           },
           id: 'kup-debug-locale-changer',
-          initialValue: dom$f.ketchup.dates.locale,
+          initialValue: dom$i.ketchup.dates.locale,
           isSelect: true,
         },
       ],
@@ -532,7 +532,7 @@ class KupDebug {
         {
           className: 'kup-full-height',
           id: 'kup-debug-log-limit',
-          label: dom$f.ketchup.language.translate(KupLanguageDebug.LOG_LIMIT),
+          label: dom$i.ketchup.language.translate(KupLanguageDebug.LOG_LIMIT),
           initialValue: this.logLimit,
           emitSubmitEventOnEnter: false,
           inputType: 'number',
@@ -583,7 +583,7 @@ class KupDebug {
             kupDebug.dump();
             break;
           case 'kup-debug-magic-box':
-            dom$f.ketchup.toggleMagicBox();
+            dom$i.ketchup.toggleMagicBox();
             break;
           case 'kup-debug-off':
             kupDebug.toggle();
@@ -598,14 +598,14 @@ class KupDebug {
       case 'kup-combobox-itemclick':
         switch (compID) {
           case 'kup-debug-language-changer':
-            dom$f.ketchup.language.set(compEvent.detail.value);
+            dom$i.ketchup.language.set(compEvent.detail.value);
             break;
           case 'kup-debug-locale-changer':
-            dom$f.ketchup.dates.setLocale(compEvent.detail.value);
-            dom$f.ketchup.math.setLocale(compEvent.detail.value);
+            dom$i.ketchup.dates.setLocale(compEvent.detail.value);
+            dom$i.ketchup.math.setLocale(compEvent.detail.value);
             break;
           case 'kup-debug-theme-changer':
-            dom$f.ketchup.theme.set(compEvent.detail.value);
+            dom$i.ketchup.theme.set(compEvent.detail.value);
             break;
         }
       case 'kup-textfield-input':
@@ -667,7 +667,7 @@ class KupDebug {
       // If the log is tied to a KupComponent, on click its props will be downloaded.
       // Also, a different style will be applied to distinguish it between the others.
       if (typeof this.logs[index].element == 'object') {
-        slot.title = dom$f.ketchup.language.translate(KupLanguageDebug.DL_PROPS_COMP);
+        slot.title = dom$i.ketchup.language.translate(KupLanguageDebug.DL_PROPS_COMP);
         slot.style.fontWeight = 'bold';
         slot.style.cursor = 'pointer';
         slot.onclick = () => {
@@ -725,7 +725,7 @@ class KupDebug {
         printLog[type] = [];
       }
       printLog[type].push({
-        date: dom$f.ketchup.dates.format(this.logs[index].date, 'LLL:ms'),
+        date: dom$i.ketchup.dates.format(this.logs[index].date, 'LLL:ms'),
         element: isComponent
           ? this.logs[index].element
           : this.logs[index].id,
@@ -905,7 +905,7 @@ class KupDebug {
         message: message,
       };
       if (this.logs.length > this.logLimit) {
-        console.warn(dom$f.ketchup.dates.format(date, 'LLL:ms') +
+        console.warn(dom$i.ketchup.dates.format(date, 'LLL:ms') +
           ' kup-debug => ' +
           'Too many logs (> ' +
           this.logLimit +
@@ -921,14 +921,14 @@ class KupDebug {
     }
     switch (category) {
       case KupDebugCategory.ERROR:
-        console.error(dom$f.ketchup.dates.format(date, 'LLL:ms') + id + message, obj);
+        console.error(dom$i.ketchup.dates.format(date, 'LLL:ms') + id + message, obj);
         window.dispatchEvent(new CustomEvent('kup-debug-error', {
           bubbles: true,
           detail: { comp, date, message },
         }));
         break;
       case KupDebugCategory.WARNING:
-        console.warn(dom$f.ketchup.dates.format(date, 'LLL:ms') + id + message, obj);
+        console.warn(dom$i.ketchup.dates.format(date, 'LLL:ms') + id + message, obj);
         break;
     }
   }
@@ -1015,7 +1015,7 @@ var KupDynamicPositionPlacement;
   KupDynamicPositionPlacement["TOP_RIGHT"] = "tr";
 })(KupDynamicPositionPlacement || (KupDynamicPositionPlacement = {}));
 
-const dom$e = document.documentElement;
+const dom$h = document.documentElement;
 /**
  * This class is used to dynamically reposition HTML elements.
  * @module KupDynamicPosition
@@ -1083,7 +1083,7 @@ class KupDynamicPosition {
       const target = mutations[0].target;
       if (target.classList.contains(kupDynamicPositionActiveClass)) {
         requestAnimationFrame(function () {
-          dom$e.ketchup.dynamicPosition.run(el);
+          dom$h.ketchup.dynamicPosition.run(el);
         });
       }
     });
@@ -1140,7 +1140,7 @@ class KupDynamicPosition {
    */
   run(el) {
     if (!el.isConnected) {
-      dom$e.ketchup.dynamicPosition.managedElements.delete(el);
+      dom$h.ketchup.dynamicPosition.managedElements.delete(el);
       cancelAnimationFrame(el.kupDynamicPosition.rAF);
       return;
     }
@@ -1248,7 +1248,7 @@ class KupDynamicPosition {
     // Recursive
     if (!el.kupDynamicPosition.detach) {
       el.kupDynamicPosition.rAF = requestAnimationFrame(function () {
-        dom$e.ketchup.dynamicPosition.run(el);
+        dom$h.ketchup.dynamicPosition.run(el);
       });
     }
     else {
@@ -1336,7 +1336,7 @@ var KupDropEventTypes;
   KupDropEventTypes["MAGICBOX"] = "text/kup-magic-box-drag";
 })(KupDropEventTypes || (KupDropEventTypes = {}));
 
-const dom$d = document.documentElement;
+const dom$g = document.documentElement;
 /**
  * This class handles elements as dialogs, making them resizable and movable.
  * @module KupInteract
@@ -1385,16 +1385,13 @@ class KupInteract {
             draggable.kupDragDrop.ghostImage
             ? draggable.kupDragDrop.ghostImage
             : e.target;
-          const oldTransform = ghostImage.style.transform;
           let x = parseFloat(ghostImage.getAttribute('data-x')) || 0;
           let y = parseFloat(ghostImage.getAttribute('data-y')) || 0;
           x = x + e.dx;
           y = y + e.dy;
           ghostImage.style.transform = `translate(${x}px, ${y}px)`;
-          if (dom$d.ketchup.interact.isInViewport(el, oldTransform, e.delta)) {
-            ghostImage.setAttribute('data-x', x.toString());
-            ghostImage.setAttribute('data-y', y.toString());
-          }
+          ghostImage.setAttribute('data-x', x.toString());
+          ghostImage.setAttribute('data-y', y.toString());
         }
       },
       start(e) {
@@ -1437,11 +1434,12 @@ class KupInteract {
             ghostImage.style.transition = 'none';
             ghostImage.style.zIndex =
               'calc(var(--kup-navbar-zindex) + 1)';
-            dom$d.ketchup.interact.container.appendChild(ghostImage);
+            dom$g.ketchup.interact.container.appendChild(ghostImage);
             draggable.kupDragDrop.ghostImage = ghostImage;
             break;
           case KupDragEffect.CLONE:
             ghostImage = draggable.cloneNode(true);
+            ghostImage.id = '';
             ghostImage.style.cursor = 'grabbing';
             ghostImage.style.height = draggable.clientHeight + 'px';
             ghostImage.style.left =
@@ -1597,7 +1595,7 @@ class KupInteract {
           x += e.deltaRect.left;
           y += e.deltaRect.top;
           el.style.transform = 'translate(' + x + 'px,' + y + 'px)';
-          if (dom$d.ketchup.interact.isInViewport(el, oldTransform, e.delta)) {
+          if (dom$g.ketchup.interact.isInViewport(el, oldTransform, e.delta)) {
             el.setAttribute('data-x', x.toString());
             el.setAttribute('data-y', y.toString());
           }
@@ -1649,7 +1647,7 @@ class KupInteract {
     const callbacks = {
       start(e) {
         const el = e.currentTarget;
-        el.style.zIndex = (dom$d.ketchup.interact.zIndex++).toString();
+        el.style.zIndex = (dom$g.ketchup.interact.zIndex++).toString();
       },
     };
     this.draggable(el, {
@@ -1658,7 +1656,7 @@ class KupInteract {
         interact.modifiers.restrictRect({
           restriction: restrictContainer
             ? restrictContainer
-            : dom$d.ketchup.interact.restrictContainer,
+            : dom$g.ketchup.interact.restrictContainer,
           endOnly: true,
         }),
       ],
@@ -2552,7 +2550,7 @@ const languages = {
 	spanish: spanish
 };
 
-const dom$c = document.documentElement;
+const dom$f = document.documentElement;
 /**
  * Handles the translation to different languages.
  * @module KupLanguage
@@ -2606,7 +2604,7 @@ class KupLanguage {
       return invalidKey(key);
     }
     function invalidKey(key) {
-      dom$c.ketchup.debug.logMessage('kup-language', 'Invalid translation for key (' + key + ')!', KupDebugCategory.WARNING);
+      dom$f.ketchup.debug.logMessage('kup-language', 'Invalid translation for key (' + key + ')!', KupDebugCategory.WARNING);
       return key;
     }
   }
@@ -2619,7 +2617,7 @@ class KupLanguage {
       language = language.toLowerCase();
     }
     else {
-      dom$c.ketchup.debug.logMessage('kup-language', "Couldn't set language, invalid string received (" +
+      dom$f.ketchup.debug.logMessage('kup-language', "Couldn't set language, invalid string received (" +
         language +
         ')!', KupDebugCategory.WARNING);
       return;
@@ -2629,12 +2627,12 @@ class KupLanguage {
     const dVariant = decodedLanguage.variant;
     if (this.list[dLanguage]) {
       if (dVariant && !this.list[dLanguage].variants[dVariant]) {
-        dom$c.ketchup.debug.logMessage('kup-language', 'Variant not found (' + dVariant + ')!', KupDebugCategory.WARNING);
+        dom$f.ketchup.debug.logMessage('kup-language', 'Variant not found (' + dVariant + ')!', KupDebugCategory.WARNING);
         return;
       }
     }
     else {
-      dom$c.ketchup.debug.logMessage('kup-language', 'Language not found (' + dLanguage + ')!', KupDebugCategory.WARNING);
+      dom$f.ketchup.debug.logMessage('kup-language', 'Language not found (' + dLanguage + ')!', KupDebugCategory.WARNING);
       return;
     }
     this.name = language;
@@ -2721,7 +2719,7 @@ const obj = {
 	types: types
 };
 
-const dom$b = document.documentElement;
+const dom$e = document.documentElement;
 /**
  * Handles objects definition and validation.
  * @module KupObjects
@@ -3046,9 +3044,9 @@ class KupObjects {
    */
   parseDate(obj) {
     if (obj.t === 'D8' && obj.p === '*DMYY') {
-      return dom$b.ketchup.dates.toDayjs(obj.k, 'DDMMYYYY');
+      return dom$e.ketchup.dates.toDayjs(obj.k, 'DDMMYYYY');
     }
-    return dom$b.ketchup.dates.toDayjs(obj.k);
+    return dom$e.ketchup.dates.toDayjs(obj.k);
   }
   /**
    * Check whether two JS objects are deeply equal. When the arguments aren't objects, they are tested directly for equity.
@@ -3103,8 +3101,10 @@ class KupObjects {
  */
 var ScrollOnHoverDirection;
 (function (ScrollOnHoverDirection) {
+  ScrollOnHoverDirection["BOTTOM"] = "bottom";
   ScrollOnHoverDirection["LEFT"] = "left";
   ScrollOnHoverDirection["RIGHT"] = "right";
+  ScrollOnHoverDirection["TOP"] = "top";
 })(ScrollOnHoverDirection || (ScrollOnHoverDirection = {}));
 
 var __classPrivateFieldSet$2 = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
@@ -3118,8 +3118,8 @@ var __classPrivateFieldGet$2 = (undefined && undefined.__classPrivateFieldGet) |
   if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
   return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _KupScrollOnHover_arrowsContainer, _KupScrollOnHover_leftArrows, _KupScrollOnHover_rightArrows, _KupScrollOnHover_scrollEvent, _KupScrollOnHover_mousemoveEvent, _KupScrollOnHover_mouseleaveEvent, _KupScrollOnHover_rAF, _KupScrollOnHover_timeout;
-const dom$a = document.documentElement;
+var _KupScrollOnHover_instances, _KupScrollOnHover_arrowsContainer, _KupScrollOnHover_leftArrows, _KupScrollOnHover_rightArrows, _KupScrollOnHover_scrollEvent, _KupScrollOnHover_mousemoveEvent, _KupScrollOnHover_mouseleaveEvent, _KupScrollOnHover_rAF, _KupScrollOnHover_timeout, _KupScrollOnHover_initArrows;
+const dom$d = document.documentElement;
 /**
  * Lets the user scroll an element's overflow by hovering with the mouse on its left/right edge.
  * @module KupScrollOnHover
@@ -3131,6 +3131,7 @@ class KupScrollOnHover {
    * @param {number} step - The amount in pixels for each scroll recursion.
    */
   constructor(delay, step) {
+    _KupScrollOnHover_instances.add(this);
     _KupScrollOnHover_arrowsContainer.set(this, void 0);
     _KupScrollOnHover_leftArrows.set(this, void 0);
     _KupScrollOnHover_rightArrows.set(this, void 0);
@@ -3142,42 +3143,32 @@ class KupScrollOnHover {
     this.delay = delay ? delay : 500;
     this.managedElements = new Set();
     this.step = step ? step : 50;
-    __classPrivateFieldSet$2(this, _KupScrollOnHover_arrowsContainer, document.createElement('div'), "f");
-    __classPrivateFieldSet$2(this, _KupScrollOnHover_leftArrows, [], "f");
     __classPrivateFieldSet$2(this, _KupScrollOnHover_mouseleaveEvent, (event) => this.stop(event.target), "f");
     __classPrivateFieldSet$2(this, _KupScrollOnHover_mousemoveEvent, (event) => this.start(event), "f");
     __classPrivateFieldSet$2(this, _KupScrollOnHover_rAF, null, "f");
-    __classPrivateFieldSet$2(this, _KupScrollOnHover_rightArrows, [], "f");
     __classPrivateFieldSet$2(this, _KupScrollOnHover_scrollEvent, (event) => this.updateChildren(event.target), "f");
     __classPrivateFieldSet$2(this, _KupScrollOnHover_timeout, null, "f");
-    __classPrivateFieldGet$2(this, _KupScrollOnHover_arrowsContainer, "f").id = 'kup-scrolling-arrows';
-    for (let index = 1; index < 4; index++) {
-      const arrow = document.createElement('div');
-      arrow.setAttribute('class', 'kup-left-scrolling-arrow kup-arrow-' + index);
-      __classPrivateFieldGet$2(this, _KupScrollOnHover_leftArrows, "f").push(arrow);
-    }
-    for (let index = 1; index < 4; index++) {
-      const arrow = document.createElement('div');
-      arrow.setAttribute('class', 'kup-right-scrolling-arrow kup-arrow-' + index);
-      __classPrivateFieldGet$2(this, _KupScrollOnHover_rightArrows, "f").push(arrow);
-    }
-    __classPrivateFieldGet$2(this, _KupScrollOnHover_arrowsContainer, "f").append(__classPrivateFieldGet$2(this, _KupScrollOnHover_leftArrows, "f")[2], __classPrivateFieldGet$2(this, _KupScrollOnHover_leftArrows, "f")[1], __classPrivateFieldGet$2(this, _KupScrollOnHover_leftArrows, "f")[0], __classPrivateFieldGet$2(this, _KupScrollOnHover_rightArrows, "f")[0], __classPrivateFieldGet$2(this, _KupScrollOnHover_rightArrows, "f")[1], __classPrivateFieldGet$2(this, _KupScrollOnHover_rightArrows, "f")[2]);
-    this.container = document.createElement('div');
-    this.container.setAttribute('kup-scroll-on-hover', '');
-    this.container.appendChild(__classPrivateFieldGet$2(this, _KupScrollOnHover_arrowsContainer, "f"));
-    document.body.appendChild(this.container);
   }
   /**
    * Watches the given element in order to trigger the scroll on hover when conditions are met.
    * Children nodes with the "hover-scrolling-child" will be watched and scrolled when el scrolls.
    * @param {KupScrollOnHoverElement} el - Element to watch.
+   * @param {boolean} vertical - Enables vertical scroll.
+   * @param {KupScrollOnHoverPercentages} percentages - Sets how big is the area in which the scroll is enabled.
    */
-  register(el) {
+  register(el, vertical, percentages) {
+    if (!__classPrivateFieldGet$2(this, _KupScrollOnHover_arrowsContainer, "f")) {
+      __classPrivateFieldGet$2(this, _KupScrollOnHover_instances, "m", _KupScrollOnHover_initArrows).call(this);
+    }
     el.style.overflowX = 'auto';
     el.scrollOnHover = {
       active: false,
       children: el.querySelectorAll('.hover-scrolling-child'),
+      percentages: percentages
+        ? percentages
+        : { back: 0.1, forward: 0.9 },
       rect: null,
+      vertical: vertical || null,
       x: 0,
       y: 0,
     };
@@ -3222,14 +3213,19 @@ class KupScrollOnHover {
     if (el.scrollOnHover.active || __classPrivateFieldGet$2(this, _KupScrollOnHover_timeout, "f")) {
       return;
     }
+    let trueHeight = el.clientHeight;
+    if (trueHeight === 0) {
+      trueHeight = el.offsetHeight;
+    }
     let trueWidth = el.clientWidth;
     if (trueWidth === 0) {
       trueWidth = el.offsetWidth;
     }
     if (el.scrollWidth > trueWidth + 10) {
       if (trueWidth !== 0 && !el.scrollOnHover.active) {
-        const percRight = trueWidth - trueWidth * 0.1;
-        const percLeft = trueWidth - trueWidth * 0.9;
+        const percRight = trueWidth - trueWidth * el.scrollOnHover.percentages.back;
+        const percLeft = trueWidth -
+          trueWidth * el.scrollOnHover.percentages.forward;
         const elOffset = el.scrollOnHover.x - el.scrollOnHover.rect.left;
         const maxScrollLeft = el.scrollWidth - trueWidth;
         const direction = elOffset < percLeft && el.scrollLeft !== 0
@@ -3250,7 +3246,29 @@ class KupScrollOnHover {
           __classPrivateFieldSet$2(this, _KupScrollOnHover_timeout, setTimeout(() => {
             el.scrollOnHover.active = true;
             __classPrivateFieldSet$2(this, _KupScrollOnHover_rAF, requestAnimationFrame(function () {
-              dom$a.ketchup.scrollOnHover.run(el, maxScrollLeft, percRight, percLeft, direction);
+              dom$d.ketchup.scrollOnHover.run(el, maxScrollLeft, percRight, percLeft, direction);
+            }), "f");
+          }, this.delay), "f");
+        }
+      }
+    }
+    if (el.scrollOnHover.vertical && el.scrollHeight > trueHeight + 10) {
+      if (trueHeight !== 0 && !el.scrollOnHover.active) {
+        const percBottom = trueHeight - trueHeight * el.scrollOnHover.percentages.back;
+        const percTop = trueHeight -
+          trueHeight * el.scrollOnHover.percentages.forward;
+        const elOffset = el.scrollOnHover.y - el.scrollOnHover.rect.top;
+        const maxScrollTop = el.scrollHeight - trueHeight;
+        const direction = elOffset < percTop && el.scrollTop !== 0
+          ? ScrollOnHoverDirection.TOP
+          : elOffset > percBottom && el.scrollTop !== maxScrollTop
+            ? ScrollOnHoverDirection.BOTTOM
+            : null;
+        if (direction) {
+          __classPrivateFieldSet$2(this, _KupScrollOnHover_timeout, setTimeout(() => {
+            el.scrollOnHover.active = true;
+            __classPrivateFieldSet$2(this, _KupScrollOnHover_rAF, requestAnimationFrame(function () {
+              dom$d.ketchup.scrollOnHover.run(el, maxScrollTop, percBottom, percTop, direction);
             }), "f");
           }, this.delay), "f");
         }
@@ -3279,25 +3297,51 @@ class KupScrollOnHover {
    * The actual recursive scroll function.
    * @param {KupScrollOnHoverElement} el - The scrolled element.
    * @param {number} maxScrollLeft - Left coordinates to which the recursiveness must be stopped.
-   * @param {number} percRight - Range of the right scrollable area.
-   * @param {number} percLeft - Range of the left scrollable area.
+   * @param {number} percForward - Range of the right (or bottom) area.
+   * @param {number} percBack - Range of the left (or top) scrollable area.
    * @param {ScrollOnHoverDirection} direction - Direction of the scroll.
    */
-  run(el, maxScrollLeft, percRight, percLeft, direction) {
+  run(el, maxScrollLeft, percForward, percBack, direction) {
     if (!el.scrollOnHover.active) {
       this.stop(el);
       return;
     }
-    const offset = el.scrollOnHover.x - el.scrollOnHover.rect.left;
-    if (offset > percLeft && offset < percRight) {
+    let offset = 0;
+    switch (direction) {
+      case ScrollOnHoverDirection.BOTTOM:
+      case ScrollOnHoverDirection.TOP: {
+        offset = el.scrollOnHover.y - el.scrollOnHover.rect.top;
+        if (offset > percBack && offset < percForward) {
+          this.stop(el);
+          return;
+        }
+        break;
+      }
+      case ScrollOnHoverDirection.LEFT:
+      case ScrollOnHoverDirection.RIGHT: {
+        offset = el.scrollOnHover.x - el.scrollOnHover.rect.left;
+        if (offset > percBack && offset < percForward) {
+          this.stop(el);
+          return;
+        }
+        break;
+      }
+    }
+    if (direction === ScrollOnHoverDirection.RIGHT &&
+      percForward > offset) {
+      this.stop(el);
+      return;
+    }
+    if (direction === ScrollOnHoverDirection.LEFT && percBack < offset) {
       this.stop(el);
       return;
     }
-    if (direction === ScrollOnHoverDirection.RIGHT && percRight > offset) {
+    if (direction === ScrollOnHoverDirection.TOP && percBack < offset) {
       this.stop(el);
       return;
     }
-    if (direction === ScrollOnHoverDirection.LEFT && percLeft < offset) {
+    if (direction === ScrollOnHoverDirection.BOTTOM &&
+      percForward > offset) {
       this.stop(el);
       return;
     }
@@ -3305,27 +3349,49 @@ class KupScrollOnHover {
       this.updateChildren(el);
     }
     let arrow;
-    if (direction === ScrollOnHoverDirection.LEFT) {
-      arrow = __classPrivateFieldGet$2(this, _KupScrollOnHover_leftArrows, "f");
-      if (el.scrollLeft === 0) {
-        this.stop(el);
-        return;
+    switch (direction) {
+      case ScrollOnHoverDirection.BOTTOM: {
+        arrow = [];
+        if (el.scrollTop === maxScrollLeft) {
+          this.stop(el);
+          return;
+        }
+        el.scrollTop += this.step;
+        break;
       }
-      el.scrollLeft -= this.step;
-    }
-    else {
-      arrow = __classPrivateFieldGet$2(this, _KupScrollOnHover_rightArrows, "f");
-      if (el.scrollLeft === maxScrollLeft) {
-        this.stop(el);
-        return;
+      case ScrollOnHoverDirection.LEFT: {
+        arrow = __classPrivateFieldGet$2(this, _KupScrollOnHover_leftArrows, "f");
+        if (el.scrollLeft === 0) {
+          this.stop(el);
+          return;
+        }
+        el.scrollLeft -= this.step;
+        break;
+      }
+      case ScrollOnHoverDirection.RIGHT: {
+        arrow = __classPrivateFieldGet$2(this, _KupScrollOnHover_rightArrows, "f");
+        if (el.scrollLeft === maxScrollLeft) {
+          this.stop(el);
+          return;
+        }
+        el.scrollLeft += this.step;
+        break;
+      }
+      case ScrollOnHoverDirection.TOP: {
+        arrow = [];
+        if (el.scrollTop === 0) {
+          this.stop(el);
+          return;
+        }
+        el.scrollTop -= this.step;
+        break;
       }
-      el.scrollLeft += this.step;
     }
     for (let i = 0; i < arrow.length; i++) {
       arrow[i].classList.add('kup-animated');
     }
     __classPrivateFieldSet$2(this, _KupScrollOnHover_rAF, requestAnimationFrame(function () {
-      dom$a.ketchup.scrollOnHover.run(el, maxScrollLeft, percRight, percLeft, direction);
+      dom$d.ketchup.scrollOnHover.run(el, maxScrollLeft, percForward, percBack, direction);
     }), "f");
   }
   /**
@@ -3338,7 +3404,27 @@ class KupScrollOnHover {
     }
   }
 }
-_KupScrollOnHover_arrowsContainer = new WeakMap(), _KupScrollOnHover_leftArrows = new WeakMap(), _KupScrollOnHover_rightArrows = new WeakMap(), _KupScrollOnHover_scrollEvent = new WeakMap(), _KupScrollOnHover_mousemoveEvent = new WeakMap(), _KupScrollOnHover_mouseleaveEvent = new WeakMap(), _KupScrollOnHover_rAF = new WeakMap(), _KupScrollOnHover_timeout = new WeakMap();
+_KupScrollOnHover_arrowsContainer = new WeakMap(), _KupScrollOnHover_leftArrows = new WeakMap(), _KupScrollOnHover_rightArrows = new WeakMap(), _KupScrollOnHover_scrollEvent = new WeakMap(), _KupScrollOnHover_mousemoveEvent = new WeakMap(), _KupScrollOnHover_mouseleaveEvent = new WeakMap(), _KupScrollOnHover_rAF = new WeakMap(), _KupScrollOnHover_timeout = new WeakMap(), _KupScrollOnHover_instances = new WeakSet(), _KupScrollOnHover_initArrows = function _KupScrollOnHover_initArrows() {
+  __classPrivateFieldSet$2(this, _KupScrollOnHover_arrowsContainer, document.createElement('div'), "f");
+  __classPrivateFieldSet$2(this, _KupScrollOnHover_leftArrows, [], "f");
+  __classPrivateFieldSet$2(this, _KupScrollOnHover_rightArrows, [], "f");
+  __classPrivateFieldGet$2(this, _KupScrollOnHover_arrowsContainer, "f").id = 'kup-scrolling-arrows';
+  for (let index = 1; index < 4; index++) {
+    const arrow = document.createElement('div');
+    arrow.setAttribute('class', 'kup-left-scrolling-arrow kup-arrow-' + index);
+    __classPrivateFieldGet$2(this, _KupScrollOnHover_leftArrows, "f").push(arrow);
+  }
+  for (let index = 1; index < 4; index++) {
+    const arrow = document.createElement('div');
+    arrow.setAttribute('class', 'kup-right-scrolling-arrow kup-arrow-' + index);
+    __classPrivateFieldGet$2(this, _KupScrollOnHover_rightArrows, "f").push(arrow);
+  }
+  __classPrivateFieldGet$2(this, _KupScrollOnHover_arrowsContainer, "f").append(__classPrivateFieldGet$2(this, _KupScrollOnHover_leftArrows, "f")[2], __classPrivateFieldGet$2(this, _KupScrollOnHover_leftArrows, "f")[1], __classPrivateFieldGet$2(this, _KupScrollOnHover_leftArrows, "f")[0], __classPrivateFieldGet$2(this, _KupScrollOnHover_rightArrows, "f")[0], __classPrivateFieldGet$2(this, _KupScrollOnHover_rightArrows, "f")[1], __classPrivateFieldGet$2(this, _KupScrollOnHover_rightArrows, "f")[2]);
+  this.container = document.createElement('div');
+  this.container.setAttribute('kup-scroll-on-hover', '');
+  this.container.appendChild(__classPrivateFieldGet$2(this, _KupScrollOnHover_arrowsContainer, "f"));
+  document.body.appendChild(this.container);
+};
 
 const bubbles = {
 	cssVariables: {
@@ -3837,6 +3923,7 @@ const print = {
 		"KUP-BUTTON": ":host(:not(.printable)) {\ndisplay: none;\n}\n\n",
 		"KUP-CARD": "",
 		"KUP-DATA-TABLE": "#kup-component sticky-header {\ndisplay: none;\n}\n\n#kup-component kup-paginator {\ndisplay: none;\n}\n\n:host(.cross-selection) #kup-component table tr.selected td.selected, \n#kup-component table td.selected, #kup-component tr.selected td {\nbackground-color: inherit;\nbackground-image: none;\n}\n\n#kup-component table,\n#kup-component .below-wrapper {\noverflow: hidden !important;\n}\n\n:host(.cross-selection) #kup-component tr.selected td:first-of-type,\n:host(.cross-selection) #kup-component th.selected { \nbox-shadow: none !important;\n}\n\n:host(.cross-selection) #kup-component table td.selected,\n:host(.cross-selection) #kup-component table tr.selected td {\nbackground-color: inherit;\n}\n\n:host(.cross-selection) #kup-component table tr.selected td.fixed-column.selected,\n:host(.cross-selection) #kup-component table td.selected.fixed-column, \n:host(.cross-selection) #kup-component table td.selected.fixed-row,\n:host(.cross-selection) #kup-component table tr.selected td.fixed-column, \n:host(.cross-selection) #kup-component table tr.selected td.fixed-row {\nbackground-color: inherit;\nbackground-image: none;\n}\n\n",
+		"KUP-FAMILY-TREE": "#kup-component .family-tree__item__expand {\ndisplay: none;\n}\n\n",
 		"KUP-PROGRESS-BAR": "#kup-component .progress-bar {\nbackground: #e7e7e7;\n}\n\n#kup-component .progress-bar-percentage span {\ntext-shadow: 0px 0px 0px hsl(0deg 0% 100%);\n}\n\n",
 		"KUP-TREE": "#kup-component .wrapper {\noverflow: hidden;\n}\n\n#kup-component tr.mdc-ripple-surface::before, \n#kup-component tr.mdc-ripple-surface::after,\n#kup-component td.mdc-ripple-surface::before, \n#kup-component td.mdc-ripple-surface::after,\n#kup-component .kup-tree__node--selected:not(.kup-tree__node--disabled) td {\nbackground-color: var(--kup-background-color);\n}"
 	},
@@ -4465,7 +4552,7 @@ var KupThemeIconValues;
   KupThemeIconValues["SEARCH"] = "--kup-search-icon";
 })(KupThemeIconValues || (KupThemeIconValues = {}));
 
-const dom$9 = document.documentElement;
+const dom$c = document.documentElement;
 /**
  * Theme manager, handles everything about theming, customStyles and color utilities.
  * @module KupTheme
@@ -4479,7 +4566,7 @@ class KupTheme {
     this.list = list ? list : themes;
     this.managedComponents = new Set();
     this.name = name ? name : 'ketchup';
-    this.styleTag = dom$9
+    this.styleTag = dom$c
       .querySelector('head')
       .appendChild(document.createElement('style'));
   }
@@ -4566,9 +4653,9 @@ class KupTheme {
     if (list) {
       this.list = list;
     }
-    dom$9.ketchup.debug.logMessage('theme manager', 'Setting theme to: ' + this.name + '.');
+    dom$c.ketchup.debug.logMessage('theme manager', 'Setting theme to: ' + this.name + '.');
     if (!this.list[this.name]) {
-      dom$9.ketchup.debug.logMessage('theme manager', 'Invalid theme name, falling back to default ("ketchup").');
+      dom$c.ketchup.debug.logMessage('theme manager', 'Invalid theme name, falling back to default ("ketchup").');
       this.name = 'ketchup';
     }
     this.cssVars = {};
@@ -4611,11 +4698,11 @@ class KupTheme {
           this.icons() +
           '}';
       this.customStyle();
-      dom$9.ketchup.debug.logMessage('kup-theme', 'Theme ' + dom$9.getAttribute('kup-theme') + ' refreshed.');
+      dom$c.ketchup.debug.logMessage('kup-theme', 'Theme ' + dom$c.getAttribute('kup-theme') + ' refreshed.');
       document.dispatchEvent(new CustomEvent('kup-theme-refresh'));
     }
     catch (error) {
-      dom$9.ketchup.debug.logMessage('kup-theme', 'Theme not refreshed.', KupDebugCategory.WARNING);
+      dom$c.ketchup.debug.logMessage('kup-theme', 'Theme not refreshed.', KupDebugCategory.WARNING);
     }
   }
   /**
@@ -4734,7 +4821,7 @@ class KupTheme {
       this.set(themes[index]);
     }
     else {
-      dom$9.ketchup.debug.logMessage('kup-theme', "Couldn't set a random theme: no themes available!", KupDebugCategory.WARNING);
+      dom$c.ketchup.debug.logMessage('kup-theme', "Couldn't set a random theme: no themes available!", KupDebugCategory.WARNING);
     }
   }
   /**
@@ -4746,7 +4833,7 @@ class KupTheme {
     //Testing whether the color is transparent, if it is a fall back value will be returned matching the background-color
     if (color === 'transparent') {
       color = this.cssVars['--kup-background-color'];
-      dom$9.ketchup.debug.logMessage('theme manager', 'Received TRANSPARENT color, converted to ' +
+      dom$c.ketchup.debug.logMessage('theme manager', 'Received TRANSPARENT color, converted to ' +
         color +
         ' (theme background).');
     }
@@ -4764,7 +4851,7 @@ class KupTheme {
       const oldColor = color;
       color = this.codeToHex(color);
       isHex = color.substring(0, 1) === '#' ? true : false;
-      dom$9.ketchup.debug.logMessage('theme manager', 'Received CODE NAME color ' +
+      dom$c.ketchup.debug.logMessage('theme manager', 'Received CODE NAME color ' +
         oldColor +
         ', converted to ' +
         color +
@@ -4818,14 +4905,14 @@ class KupTheme {
         else {
           hexColor = this.rgbToHex(rgbColorObj.r, rgbColorObj.g, rgbColorObj.b);
         }
-        dom$9.ketchup.debug.logMessage('theme-manager', 'Received HEX color ' +
+        dom$c.ketchup.debug.logMessage('theme-manager', 'Received HEX color ' +
           oldColor +
           ', converted to ' +
           color +
           '.');
       }
       catch (error) {
-        dom$9.ketchup.debug.logMessage('theme-manager', 'Invalid color: ' + color + '.');
+        dom$c.ketchup.debug.logMessage('theme-manager', 'Invalid color: ' + color + '.');
       }
     }
     let rgbValues = null;
@@ -4835,14 +4922,14 @@ class KupTheme {
       rgbColor = color;
     }
     catch (error) {
-      dom$9.ketchup.debug.logMessage('theme-manager', 'Color not converted to rgb values: ' + color + '.');
+      dom$c.ketchup.debug.logMessage('theme-manager', 'Color not converted to rgb values: ' + color + '.');
     }
     if (!hexColor) {
       try {
         hexColor = this.rgbToHex(parseInt(values[1]), parseInt(values[2]), parseInt(values[3]));
       }
       catch (error) {
-        dom$9.ketchup.debug.logMessage('theme-manager', 'Color not converted to hex value: ' + color + '.');
+        dom$c.ketchup.debug.logMessage('theme-manager', 'Color not converted to hex value: ' + color + '.');
       }
     }
     if (!hslColor || !hslValues) {
@@ -4855,7 +4942,7 @@ class KupTheme {
         hslColor = 'hsl(' + hsl.h + ',' + hsl.s + '%,' + hsl.l + '%)';
       }
       catch (error) {
-        dom$9.ketchup.debug.logMessage('theme-manager', 'Color not converted to hex value: ' + color + '.');
+        dom$c.ketchup.debug.logMessage('theme-manager', 'Color not converted to hex value: ' + color + '.');
       }
     }
     return {
@@ -5160,7 +5247,7 @@ class KupTheme {
       return colorCodes[color.toLowerCase()];
     }
     else {
-      dom$9.ketchup.debug.logMessage('theme manager', 'Could not decode color ' + color + '!');
+      dom$c.ketchup.debug.logMessage('theme manager', 'Could not decode color ' + color + '!');
       return color;
     }
   }
@@ -5188,7 +5275,7 @@ var __classPrivateFieldGet$1 = (undefined && undefined.__classPrivateFieldGet) |
   return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _KupToolbar_keyEvent;
-const dom$8 = document.documentElement;
+const dom$b = document.documentElement;
 /**
  * Handles component's toolbar.
  * @module KupToolbar
@@ -5206,7 +5293,7 @@ class KupToolbar {
       KupToolbarModifierKeys.CTRL,
     ];
     __classPrivateFieldSet$1(this, _KupToolbar_keyEvent, function (e) {
-      const toolbar = dom$8.ketchup.toolbar;
+      const toolbar = dom$b.ketchup.toolbar;
       if (toolbar.managedElements) {
         for (let index = 0; index < toolbar.modifiers.length; index++) {
           if (toolbar.modifiers[index] ===
@@ -5553,78 +5640,1181 @@ var KupDataNewColumnTypes;
   KupDataNewColumnTypes["MERGE"] = "merge";
 })(KupDataNewColumnTypes || (KupDataNewColumnTypes = {}));
 
-const dom$7 = document.documentElement;
 /**
- * Finds all the cells matching the filters criteria in the input dataset.
- * @param {KupDataDataset} dataset - Input dataset.
- * @param {KupDataFindCellFilters} filters - Filters of the research.
- * @returns {KupDataCell[]}  Array of cells fetched after applying the filters.
+ * Props of the kup-data-table component.
+ * Used to export every prop in an object.
  */
-function findCell(dataset, filters) {
-  return dom$7.ketchup.data.finder(dataset, filters).cells;
-}
+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'.";
+  KupDataTableProps["dragEnabled"] = "Enables drag.";
+  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["enableColumnsFormula"] = "Enables the choice to set formulas on columns by dragging them into different columns.";
+  KupDataTableProps["enableMergeColumns"] = "Enables the merging 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.";
+  KupDataTableProps["fixedRows"] = "Fixes the given number of rows so that they stay visible when vertically 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 fixedColumns.";
+  KupDataTableProps["forceOneLine"] = "Forces cells with long text and a fixed column size to have an ellipsis set on their text. The reflect attribute is mandatory to allow styling.";
+  KupDataTableProps["globalFilter"] = "When set to true it activates the global filter.";
+  KupDataTableProps["globalFilterValue"] = "The value of the global filter.";
+  KupDataTableProps["groupLabelDisplay"] = "How the label of a group must be displayed. For available values";
+  KupDataTableProps["groups"] = "The list of groups.";
+  KupDataTableProps["headerIsPersistent"] = "When set to true the header will stick on top of the table when scrolling.";
+  KupDataTableProps["isFocusable"] = "When set to true, clicked-on rows will have a visual feedback.";
+  KupDataTableProps["lazyLoadRows"] = "When set to true, extra rows will be automatically loaded once the last row enters the viewport. When groups are present, the number of rows is referred to groups and not to their content. Paginator is disabled.";
+  KupDataTableProps["lineBreakCharacter"] = "Defines the placeholder character which will be replaced by a line break inside table header cells, normal or sticky.";
+  KupDataTableProps["loadMoreLimit"] = "Sets a maximum limit of new records which can be required by the load more functionality.";
+  KupDataTableProps["loadMoreMode"] = "Establish the modality of how many new records will be downloaded. This property is regulated also by loadMoreStep.";
+  KupDataTableProps["loadMoreStep"] = "The number of records which will be requested to be downloaded when clicking on the load more button. This property is regulated also by loadMoreMode.";
+  KupDataTableProps["multiSelection"] = "When set to true enables rows multi selection.";
+  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.";
+  KupDataTableProps["showCustomization"] = "If set to true, displays the button to open the customization panel.";
+  KupDataTableProps["showFilters"] = "When set to true enables the column filters.";
+  KupDataTableProps["showFooter"] = "When set to true shows the footer.";
+  KupDataTableProps["showGrid"] = "Can be used to customize the grid view of the table.";
+  KupDataTableProps["showGroups"] = "When set to true enables the column grouping.";
+  KupDataTableProps["showHeader"] = "Enables rendering of the table header.";
+  KupDataTableProps["showLoadMore"] = "If set to true, displays the button to load more records.";
+  KupDataTableProps["sort"] = "Defines the current sorting options.";
+  KupDataTableProps["stateId"] = "";
+  KupDataTableProps["store"] = "";
+  KupDataTableProps["sortableColumnsMutateData"] = "If set to true, when a column is dragged to be sorted, the component directly mutates the data.columns property and then fires the event";
+  KupDataTableProps["sortEnabled"] = "When set to true enables the sorting of the columns by clicking on the column header.";
+  KupDataTableProps["tableHeight"] = "Sets the height of the table.";
+  KupDataTableProps["tableWidth"] = "Sets the width of the table.";
+  KupDataTableProps["totals"] = "Defines the current totals options.";
+  KupDataTableProps["transpose"] = "Transposes the data of the data table.";
+})(KupDataTableProps || (KupDataTableProps = {}));
+var SortMode;
+(function (SortMode) {
+  SortMode["A"] = "A";
+  SortMode["D"] = "D";
+})(SortMode || (SortMode = {}));
+var TotalMode;
+(function (TotalMode) {
+  TotalMode["COUNT"] = "Count";
+  TotalMode["SUM"] = "Sum";
+  TotalMode["MIN"] = "Min";
+  TotalMode["MAX"] = "Max";
+  TotalMode["DISTINCT"] = "Distinct";
+  TotalMode["AVERAGE"] = "Average";
+  TotalMode["MATH"] = "MATH";
+})(TotalMode || (TotalMode = {}));
+var TotalLabel;
+(function (TotalLabel) {
+  TotalLabel["COUNT"] = "Count";
+  TotalLabel["SUM"] = "Sum";
+  TotalLabel["MIN"] = "Min";
+  TotalLabel["MAX"] = "Max";
+  TotalLabel["DISTINCT"] = "Distinct";
+  TotalLabel["AVERAGE"] = "Average";
+  TotalLabel["MATH"] = "Formula";
+  TotalLabel["CANC"] = "Cancel";
+  TotalLabel["CALC"] = "Calculate";
+})(TotalLabel || (TotalLabel = {}));
+var PaginatorPos;
+(function (PaginatorPos) {
+  PaginatorPos["TOP"] = "Top";
+  PaginatorPos["BOTTOM"] = "Bottom";
+  PaginatorPos["BOTH"] = "Both";
+})(PaginatorPos || (PaginatorPos = {}));
+var ShowGrid;
+(function (ShowGrid) {
+  ShowGrid["NONE"] = "None";
+  ShowGrid["ROW"] = "Row";
+  ShowGrid["COL"] = "Col";
+  ShowGrid["COMPLETE"] = "Complete";
+})(ShowGrid || (ShowGrid = {}));
+// export enum RowActionType {
+//     DEFAULT = 'Default',
+//     VARIABLE = 'Variable',
+// }
+//---- *NEXT functionality AKA load more ----
+var LoadMoreMode;
+(function (LoadMoreMode) {
+  LoadMoreMode["CONSTANT"] = "constant";
+  LoadMoreMode["CONSTANT_INCREMENT"] = "constant_increment";
+  LoadMoreMode["PROGRESSIVE_THRESHOLD"] = "progressive_threshold";
+})(LoadMoreMode || (LoadMoreMode = {}));
+//---- Group label display functionality ----
 /**
- * Returns all the cells values of the specified columns.
- * @param {KupDataDataset} dataset - Input dataset.
- * @param {string[]} columns - Columns included in the search. When missing, searches all columns.
- * @returns {string[]} Values of the cells.
+ * The possible values the display property can have.
+ * @enum
+ * @property {string} BOTH - Shows both the column label and the value. This is the default.
+ * @property {string} LABEL - Shows only the columns label.
+ * @property {string} VALUE - Shows only the value.
+ * @readonly
  */
-function getCellValue(dataset, columns) {
-  const result = [];
-  for (let index = 0; index < dataset.rows.length; index++) {
-    const row = dataset.rows[index];
-    const cells = row.cells;
-    for (const key in cells) {
-      const cell = cells[key];
-      if (!columns || !columns.length || columns.includes(key)) {
-        result.push(cell.value);
-      }
-    }
-  }
-  return result;
-}
+var GroupLabelDisplayMode;
+(function (GroupLabelDisplayMode) {
+  GroupLabelDisplayMode["BOTH"] = "Both";
+  GroupLabelDisplayMode["LABEL"] = "Label";
+  GroupLabelDisplayMode["VALUE"] = "Value";
+})(GroupLabelDisplayMode || (GroupLabelDisplayMode = {}));
+//---- Fixed rows and cells classes ----
+const FixedCellsClasses = {
+  columns: 'fixed-column',
+  rows: 'fixed-row',
+};
+const FixedCellsCSSVarsBase = {
+  columns: '--ddt_column-left-',
+  rows: '--ddt_row-top-',
+};
 /**
- * Overrides the given cell attributes for the specified columns.
- * If no columns are provided, the value will be applied to every column of the dataset.
- * @param {KupDataDataset} dataset - Input dataset.
- * @param {KupDataCell} cell - New cell.
- * @param {string[]} columns - Columns to be handled.
- * @returns {KupDataCell[]} Replaced cells.
+ * Constants for mocked/premade columns created by data mutations.
  */
-function replaceCell(dataset, cell, columns) {
-  const replaced = [];
-  for (let index = 0; index < dataset.rows.length; index++) {
-    const row = dataset.rows[index];
-    const cells = row.cells;
-    for (const key in cells) {
-      if (!columns || !columns.length || columns.includes(key)) {
-        cells[key] = Object.assign({}, cell);
-        replaced.push(cells[key]);
-      }
-    }
-  }
-  return replaced;
-}
+const fieldColumn = 'Field';
+const iconColumn = 'Icon';
+const keyColumn = 'Key';
+var SelectionMode;
+(function (SelectionMode) {
+  SelectionMode["SINGLE"] = "single";
+  SelectionMode["MULTIPLE_CHECKBOX"] = "multiple-checkbox";
+  SelectionMode["MULTIPLE"] = "multiple";
+  SelectionMode["NONE"] = "none";
+})(SelectionMode || (SelectionMode = {}));
 
-const dom$6 = document.documentElement;
 /**
- * Finds the columns matching the criteria specified in the filters argument.
- * @param {KupDataDataset | Column[]} dataset - Input dataset or array of columns.
- * @param {Partial<Column>} filters - Column interface containing the filters to match.
- * @returns {Column[]} Columns matching the criteria.
+ * Normalization types.
  */
-function findColumns(dataset, filters) {
-  const columns = dataset.columns
-    ? dataset.columns
-    : dataset;
-  const result = [];
-  for (let index = 0; index < columns.length; index++) {
-    const column = columns[index];
-    for (const key in filters) {
-      const filter = filters[key];
-      if (column[key] === filter) {
-        result.push(column);
-      }
+var KupDatesNormalize;
+(function (KupDatesNormalize) {
+  KupDatesNormalize["DATE"] = "date";
+  KupDatesNormalize["TIME"] = "time";
+  KupDatesNormalize["TIMESTAMP"] = "timestamp";
+})(KupDatesNormalize || (KupDatesNormalize = {}));
+/**
+ * Common use formats
+ */
+var KupDatesFormats;
+(function (KupDatesFormats) {
+  KupDatesFormats["ISO_DATE"] = "YYYY-MM-DD";
+  KupDatesFormats["ISO_DATE_TIME"] = "YYYY-MM-DD HH:mm:ss";
+  KupDatesFormats["ISO_TIME"] = "HH:mm:ss";
+  KupDatesFormats["ISO_TIME_WITHOUT_SECONDS"] = "HH:mm";
+})(KupDatesFormats || (KupDatesFormats = {}));
+/**
+ * Supported locales.
+ */
+var KupDatesLocales;
+(function (KupDatesLocales) {
+  KupDatesLocales["CHINESE"] = "cn";
+  KupDatesLocales["ENGLISH"] = "en";
+  KupDatesLocales["FRENCH"] = "fr";
+  KupDatesLocales["ITALIAN"] = "it";
+  KupDatesLocales["POLISH"] = "pl";
+  KupDatesLocales["RUSSIAN"] = "ru";
+  KupDatesLocales["SPANISH"] = "es";
+})(KupDatesLocales || (KupDatesLocales = {}));
+
+const dom$a = document.documentElement;
+var DateTimeFormatOptionsMonth;
+(function (DateTimeFormatOptionsMonth) {
+  DateTimeFormatOptionsMonth["NUMERIC"] = "numeric";
+  DateTimeFormatOptionsMonth["DIGIT2"] = "2-digit";
+  DateTimeFormatOptionsMonth["LONG"] = "long";
+  DateTimeFormatOptionsMonth["SHORT"] = "short";
+  DateTimeFormatOptionsMonth["NARROW"] = "narrow";
+})(DateTimeFormatOptionsMonth || (DateTimeFormatOptionsMonth = {}));
+function identify(array) {
+  if (array) {
+    for (let i = 0; i < array.length; i++) {
+      array[i].id = i.toString();
+    }
+  }
+}
+function getSeparator(locale, separatorType) {
+  const numberWithGroupAndDecimalSeparator = 1000.1;
+  return Intl.NumberFormat(locale)
+    .formatToParts(numberWithGroupAndDecimalSeparator)
+    .find((part) => part.type === separatorType).value;
+}
+function getCurrentTimeFormatFromBrowserLocale(manageSeconds) {
+  const options = {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  };
+  if (manageSeconds == true) {
+    options.second = '2-digit';
+  }
+  const formatObj = new Intl.DateTimeFormat(dom$a.ketchup.dates.getLocale() + '-u-hc-h23', options).formatToParts(new Date());
+  let timeFormat = formatObj
+    .map((obj) => {
+    switch (obj.type) {
+      case 'hour':
+        return 'HH';
+      case 'minute':
+        return 'mm';
+      case 'second':
+        return 'ss';
+      default:
+        return obj.value;
+    }
+  })
+    .join('');
+  return timeFormat;
+}
+/**
+ * @param value number as string, formatted by actual browser locale
+ * @param type - type of number for calculate suffix
+ * @returns true if number string in input is a valid number
+ */
+function isValidFormattedStringNumber(value, type) {
+  if (value == null || value.trim() == '') {
+    return false;
+  }
+  let tmpStr = formattedStringToUnformattedStringNumber(value, type);
+  if (isNumber(tmpStr)) {
+    return true;
+  }
+  return false;
+}
+function isNumber(value) {
+  //return typeof value === 'number';
+  return !isNaN(value);
+}
+/**
+ * @param input number as string, formatted by locale US, decimal separator . (like java decimal numbers)
+ * @returns number
+ **/
+function stringToNumber(input) {
+  if (!input || input == null || input.trim() == '') {
+    input = '0';
+  }
+  return dom$a.ketchup.math.numberify(input);
+}
+/**
+ * @param input number
+ * @param decimals number of significant decimal digits for output
+ * @returns number as string, formatted by actual browser locale
+ **/
+function numberToString(input, decimals) {
+  if (input == null) {
+    return '';
+  }
+  return _numberToString(input, decimals, dom$a.ketchup.dates.getLocale(), true);
+}
+/**
+ * @param type - type of number for calculate suffix
+ * @returns suffix for number, by type
+ **/
+function getNumericValueSuffixByType(type) {
+  type = type.toUpperCase();
+  let nstr = '';
+  if (type == 'P') {
+    nstr = ' %';
+  }
+  else if (type == 'VE') {
+    nstr = ' €';
+  }
+  else if (type == 'VL') {
+    nstr = ' £';
+  }
+  else if (type == 'VV') {
+    nstr = ' $';
+  }
+  return nstr;
+}
+/**
+ * @param input number
+ * @param decimals number of significant decimal digits for output
+ * @param type - type of number for calculate suffix
+ * @returns number as string, formatted by actual browser locale, with suffix by type
+ **/
+function numberToFormattedStringNumber(input, decimals, type) {
+  if (input == null || isNaN(input)) {
+    return '';
+  }
+  let nstr = numberToString(input, decimals);
+  nstr = nstr + getNumericValueSuffixByType(type);
+  return nstr;
+}
+/**
+ * @param input number as string, formatted by locale US, decimal separator . (like java decimal numbers)
+ * @param decimals number of significant decimal digits for output
+ * @param type - type of number for calculate suffix
+ * @returns number as string, formatted by actual browser locale, with suffix by type
+ **/
+function unformattedStringToFormattedStringNumber(input, decimals, type) {
+  return numberToFormattedStringNumber(stringToNumber(input), decimals, type);
+}
+/**
+ * @param input number as string, formatted by actual browser locale
+ * @param type - type of number for calculate suffix
+ * @returns number as string, formatted by locale US, decimal separator . (like java decimal numbers), without group separator
+ **/
+function formattedStringToUnformattedStringNumber(input, type) {
+  return numberStringToNumberString(input, type, getDecimalSeparator(dom$a.ketchup.dates.getLocale()));
+}
+/**
+ * @param input number as string, formatted by locale US, decimal separator . (like java decimal numbers), with group separator
+ * @param type - type of number for calculate suffix
+ * @returns number as string, formatted by locale US, decimal separator . (like java decimal numbers), without group separator
+ **/
+function unformattedStringNumberToNumber(input, type) {
+  return numberStringToNumberString(input, type, '.');
+}
+function numberStringToNumberString(input, type, decFmt) {
+  if (input == null || input.trim() == '') {
+    return '';
+  }
+  let originalInputValue = input;
+  let suffix = getNumericValueSuffixByType(type);
+  if (suffix != '') {
+    input = input.replace(suffix, '');
+  }
+  let regExpr = null;
+  if (decFmt == '.') {
+    regExpr = /,/g;
+  }
+  else {
+    regExpr = /\./g;
+  }
+  input = input.replace(regExpr, '');
+  if (decFmt != '.') {
+    input = input.replace(/,/g, '.');
+  }
+  if (dom$a.ketchup.math.numberify(input) == null ||
+    isNaN(dom$a.ketchup.math.numberify(input))) {
+    return originalInputValue;
+  }
+  let unf = stringToNumber(input);
+  return _numberToString(unf, -1, 'en-US', false);
+}
+function getDecimalSeparator(locale) {
+  return getSeparator(locale, 'decimal');
+}
+function countDecimals(value) {
+  if (Math.floor(value) === value)
+    return 0;
+  let stringValue = value.toString().split('.')[1];
+  if (stringValue) {
+    return stringValue.length ? stringValue.length : 0;
+  }
+  else {
+    return 0;
+  }
+}
+function _numberToString(input, decimals, locale, useGrouping) {
+  if (input == null) {
+    input = 0;
+  }
+  if (decimals == null || decimals == -1) {
+    decimals = countDecimals(input);
+  }
+  let n = Number(input);
+  let f = decimals > -1
+    ? {
+      minimumFractionDigits: decimals,
+      maximumFractionDigits: decimals,
+      useGrouping: useGrouping,
+    }
+    : { useGrouping: useGrouping };
+  return n.toLocaleString(locale, f);
+}
+/**
+ * @param time time as Date object
+ * @param manageSeconds flag to set seconds managing
+ * @return time as string, formatted
+ **/
+function formatTime(time, manageSeconds) {
+  const options = {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  };
+  if (manageSeconds == true) {
+    options.second = '2-digit';
+  }
+  return time.toLocaleTimeString(dom$a.ketchup.dates.getLocale() + '-u-hc-h23', options);
+}
+/**
+ * @param value time string, formatted by actual browser locale
+ * @returns true if time string in input is a valid time
+ */
+function isValidFormattedStringTime(value, manageSeconds) {
+  let format = getCurrentTimeFormatFromBrowserLocale(manageSeconds);
+  return dom$a.ketchup.dates.isValid(value, format, true);
+}
+/**
+ * @param value date/time as string, formatted by actual browser locale
+ * @returns date/time as string, formatted ISO
+ **/
+function formattedStringToDefaultUnformattedStringTimestamp(value) {
+  return formattedStringToCustomUnformattedStringTime(value, KupDatesFormats.ISO_DATE_TIME, true);
+}
+/**
+ * @param value time as string, formatted by actual browser locale
+ * @param outputFormat time format to return
+ * @param manageSeconds flag to set seconds managing
+ * @returns time as string, formatted
+ **/
+function formattedStringToCustomUnformattedStringTime(value, outputFormat, manageSeconds) {
+  let inputFormat = getCurrentTimeFormatFromBrowserLocale(manageSeconds);
+  if (dom$a.ketchup.dates.isValid(value, inputFormat)) {
+    return dom$a.ketchup.dates.format(dom$a.ketchup.dates.normalize(value, KupDatesNormalize.TIME), outputFormat);
+  }
+  else {
+    return '';
+  }
+}
+/**
+ * @param value time as string, formatted ISO
+ * @param manageSeconds flag to set seconds managing
+ * @param valueTimeFormat time format (default ISO)
+ * @param customedFormat time format from smeupObject
+ * @returns time as string, formatted by actual browser locale
+ **/
+function unformattedStringToFormattedStringTime(value, manageSeconds, customedFormat) {
+  const options = {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  };
+  if (manageSeconds == true) {
+    options.second = '2-digit';
+  }
+  let date = dom$a.ketchup.dates.toDate(dom$a.ketchup.dates.normalize(value, KupDatesNormalize.TIME));
+  return formatByCustomedOutputTimeFormat(value, date, options, customedFormat);
+}
+function formatByCustomedOutputTimeFormat(valueStr, date, options, customedFormat) {
+  if (customedFormat == null) {
+    return date.toLocaleTimeString(dom$a.ketchup.dates.getLocale() + '-u-hc-h23', options);
+  }
+  switch (customedFormat) {
+    case 'I13': {
+      //hh:mm
+      break;
+    }
+    case 'I12': {
+      //hh:mm:ss
+      break;
+    }
+    case 'I11': {
+      //???
+      //hh:dddd
+      //return moment(date).format('HH:DDDD');
+      return valueStr;
+    }
+    case 'I14': {
+      //???
+      //sssss
+      //return moment(date).format('SSSSS');
+      return valueStr;
+    }
+    case 'I1H': {
+      //???
+      //Ora,Cen/Min HH,xx
+      return valueStr;
+    }
+    case 'I1M': {
+      //???
+      //Min,Cen/Sec  MMMM,xx
+      return valueStr;
+    }
+    case 'I21': {
+      //???
+      //Giorni,(4 decim)
+      return valueStr;
+    }
+    case 'I22': {
+      //???
+      //Ore,(4 decim)
+      return valueStr;
+    }
+    case 'I23': {
+      //???
+      //Minuti,(4 decim)
+      return valueStr;
+    }
+    case 'I24': {
+      //???
+      //Secondi
+      return valueStr;
+    }
+    case 'I2H': {
+      //???
+      //Ora,Cen/Min HHHH,xx
+      return valueStr;
+    }
+    case 'I2D': {
+      //???
+      //Ore Minuti Secondi HHMMS
+      return valueStr;
+    }
+    case 'I2M': {
+      //???
+      //Min,Cen/Sec MMMM,xx
+      return valueStr;
+    }
+  }
+  return date.toLocaleTimeString(dom$a.ketchup.dates.getLocale() + '-u-hc-h23', options);
+}
+/**
+ * @param value date/time as string, formatted ISO
+ * @param valueDateFormat date/time format (default ISO)
+ * @returns date/time as string, formatted by actual browser locale
+ **/
+function unformattedStringToFormattedStringTimestamp(value) {
+  const options = {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false,
+  };
+  let date = dom$a.ketchup.dates.toDate(dom$a.ketchup.dates.normalize(value, KupDatesNormalize.TIMESTAMP));
+  return date.toLocaleString(dom$a.ketchup.dates.getLocale() + '-u-hc-h23', options);
+}
+function getMonthAsStringByLocale(month, format) {
+  if (month == null) {
+    return '';
+  }
+  const dateTmp = new Date();
+  dateTmp.setDate(1);
+  dateTmp.setMonth(month - 1);
+  const options = {
+    month: format,
+  };
+  const dateTimeFormat = new Intl.DateTimeFormat(dom$a.ketchup.dates.getLocale(), options);
+  return dateTimeFormat.format(dateTmp);
+}
+function getMonthsAsStringByLocale(format) {
+  if (format == null || format.trim() == '') {
+    format = DateTimeFormatOptionsMonth.LONG;
+  }
+  var months = [];
+  for (var i = 0; i < 12; i++) {
+    months[i] = getMonthAsStringByLocale(i + 1, format);
+  }
+  return months;
+}
+/**
+ * Used to retrieve component's props values.
+ * @param {any} comp - Component calling this function.
+ * @param {GenericObject} list - Prop list, specific for each component.
+ * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
+ * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
+ */
+function getProps(comp, list, descriptions) {
+  let props = {};
+  if (descriptions) {
+    props = list;
+  }
+  else {
+    for (const key in list) {
+      if (Object.prototype.hasOwnProperty.call(list, key)) {
+        props[key] = comp[key];
+      }
+    }
+  }
+  return props;
+}
+/**
+ * Sets the props to the component.
+ * @param {any} comp - Component calling this function.
+ * @param {GenericObject} list - Prop list, specific for each component.
+ * @param {GenericObject} props - Prop to be set.
+ */
+function setProps(comp, list, props) {
+  for (const key in props) {
+    // If key is a custom prop it will be set on the component (i.e.: "data", "customStyle", ecc.)
+    if (list[key]) {
+      comp[key] = props[key];
+    }
+    else {
+      // Otherwise, it will be set on its HTML element (i.e.: "id", "style", ecc.)
+      comp.rootElement[key] = props[key];
+    }
+  }
+}
+
+const dom$9 = document.documentElement;
+// -------------
+// COMMONS
+// -------------
+function getCellValueForDisplay(column, cell) {
+  if (cell != null) {
+    if (cell.displayedValue != null) {
+      return cell.displayedValue;
+    }
+  }
+  let formattedValue = _getCellValueForDisplay(cell.value, column, cell);
+  if (cell != null) {
+    cell.displayedValue = formattedValue;
+  }
+  return formattedValue;
+}
+function getValueForDisplay2(values, column) {
+  if (values == null) {
+    return '';
+  }
+  if (values.displayedValue == null || values.displayedValue.trim() == '') {
+    values.displayedValue = _getCellValueForDisplay(values.value, column, null);
+  }
+  return values.displayedValue;
+}
+function formatToNumber(cell) {
+  if (cell.obj) {
+    return dom$9.ketchup.math.numberify(cell.obj.k);
+  }
+  return dom$9.ketchup.math.numberify(cell.value);
+}
+function _getCellValueForDisplay(value, column, cell) {
+  let obj = column != null ? column.obj : null;
+  if (cell != null) {
+    obj = cell.obj ? cell.obj : obj;
+  }
+  return getValueForDisplay(value, obj, column != null ? column.decimals : null);
+}
+function getValueForDisplay(value, obj, decimals) {
+  if (value == null || value.trim() == '') {
+    return value;
+  }
+  if (dom$9.ketchup.objects.isNumber(obj)) {
+    return unformattedStringToFormattedStringNumber(value, decimals ? decimals : -1, obj ? obj.p : '');
+  }
+  if (dom$9.ketchup.objects.isDate(obj) &&
+    dom$9.ketchup.dates.isValid(value, KupDatesFormats.ISO_DATE)) {
+    return dom$9.ketchup.dates.format(value);
+  }
+  if (dom$9.ketchup.objects.isTime(obj)) {
+    return unformattedStringToFormattedStringTime(value, dom$9.ketchup.objects.isTimeWithSeconds(obj), obj.t + obj.p);
+  }
+  if (dom$9.ketchup.objects.isTimestamp(obj)) {
+    return unformattedStringToFormattedStringTimestamp(value);
+  }
+  return value;
+}
+function getColumnByName(columns, name) {
+  if (columns == null) {
+    return null;
+  }
+  for (let column of columns) {
+    if (column.name === name) {
+      return column;
+    }
+  }
+  return null;
+}
+function compareCell(cell1, cell2, sortMode) {
+  return compareValues(cell1.obj, cell1.value, cell2.obj, cell2.value, sortMode);
+}
+function compareValues(obj1, value1, obj2, value2, sortMode) {
+  const sm = sortMode === 'A' ? 1 : -1;
+  if (obj1 == null || obj2 == null) {
+    return sm * localCompareAsInJava(value1, value2);
+  }
+  // If either the type or the parameter of the current object are not equal.
+  if (!(obj1.t === obj2.t && obj1.p === obj2.p)) {
+    let compare = localCompareAsInJava(obj1.t, obj2.t);
+    if (compare === 0) {
+      compare = localCompareAsInJava(obj1.p, obj2.p);
+    }
+    return compare * sm;
+  }
+  let s1 = value1;
+  let s2 = value2;
+  if (s1 == s2) {
+    return 0;
+  }
+  if (s1 == '') {
+    return sm * -1;
+  }
+  if (s2 == '') {
+    return sm * 1;
+  }
+  let v1 = s1;
+  let v2 = s2;
+  if (dom$9.ketchup.objects.isNumber(obj1)) {
+    v1 = stringToNumber(s1);
+    v2 = stringToNumber(s2);
+  }
+  else if (dom$9.ketchup.objects.isDate(obj1)) {
+    v1 = dom$9.ketchup.dates.toDate(dom$9.ketchup.dates.format(s1, KupDatesFormats.ISO_DATE));
+    v2 = dom$9.ketchup.dates.toDate(dom$9.ketchup.dates.format(s2, KupDatesFormats.ISO_DATE));
+  }
+  else if (dom$9.ketchup.objects.isTime(obj1)) {
+    let manageSeconds = dom$9.ketchup.objects.isTimeWithSeconds(obj1);
+    v1 = dom$9.ketchup.dates.toDate(dom$9.ketchup.dates.format(s1, manageSeconds
+      ? KupDatesFormats.ISO_TIME
+      : KupDatesFormats.ISO_TIME_WITHOUT_SECONDS));
+    v2 = dom$9.ketchup.dates.toDate(dom$9.ketchup.dates.format(s2, manageSeconds
+      ? KupDatesFormats.ISO_TIME
+      : KupDatesFormats.ISO_TIME_WITHOUT_SECONDS));
+  }
+  else if (dom$9.ketchup.objects.isTimestamp(obj1)) {
+    v1 = dom$9.ketchup.dates.toDate(dom$9.ketchup.dates.format(s1, KupDatesFormats.ISO_DATE_TIME));
+    v2 = dom$9.ketchup.dates.toDate(dom$9.ketchup.dates.format(s2, KupDatesFormats.ISO_DATE_TIME));
+  }
+  if (v1 > v2) {
+    return sm * 1;
+  }
+  if (v1 < v2) {
+    return sm * -1;
+  }
+  return 0;
+}
+/**
+ * Given two strings to compare, the functions decides which string comes before the other or if they are equal.
+ * This is meant as a replacement for the JavaScript function localCompare() which produces a slightly different result from
+ * the Java version of compareTo().
+ *
+ * Re-implemented from java source method compareTo() of java.lang.String
+ * @param t1 firstString the first string to be compared
+ * @param t2 anotherString the another string to be compared to the first one
+ * @returns the value 0 if the anotherString is equal to
+ *          firstString; a value less than 0 if firstString
+ *          is lexicographically less than the anotherString; and a
+ *          value greater than 0 if firstString is
+ *          lexicographically greater than the anotherString.
+ */
+function localCompareAsInJava(t1, t2) {
+  let t1Length = t1 == null ? 0 : t1.length;
+  let t2Length = t2 == null ? 0 : t2.length;
+  const lim = Math.min(t1Length, t2Length);
+  let k = 0;
+  while (k < lim) {
+    const c1 = t1[k];
+    const c2 = t2[k];
+    if (c1 !== c2) {
+      return c1.charCodeAt(0) - c2.charCodeAt(0);
+    }
+    k++;
+  }
+  return t1Length - t2Length;
+}
+
+/**
+ * Interface for ranged filters.
+ */
+var FilterInterval;
+(function (FilterInterval) {
+  FilterInterval[FilterInterval["FROM"] = 0] = "FROM";
+  FilterInterval[FilterInterval["TO"] = 1] = "TO";
+})(FilterInterval || (FilterInterval = {}));
+/**
+ * This regular expressions returns a match like this one:
+ * if the string does not match is null, otherwise the indexes are equal to the object below:
+ *
+ * @property {string} 0 - The entire match of the regexp; is equal to the cellValue.
+ * @property {string} 1 - Either !' or ' it's the start of the regexp.
+ * @property {string} 2 - Either % or null: means the string must start with the given string.
+ * @property {string} 3 - Either "" or a string with a length.
+ * @property {string} 4 - Either % or null: means the string must finish with the given string.
+ * @property {string} 5 - Always equal to ': it's the end of the filter.
+ */
+const FILTER_ANALIZER = /^('|!')(%){0,1}(.*?)(%){0,1}(')$/;
+var KupGlobalFilterMode;
+(function (KupGlobalFilterMode) {
+  KupGlobalFilterMode["SIMPLE"] = "simple";
+  KupGlobalFilterMode["HIGHLIGHT"] = "highlight";
+})(KupGlobalFilterMode || (KupGlobalFilterMode = {}));
+
+const dom$8 = document.documentElement;
+/**
+ * Filtering algorithms.
+ * @module Filters
+ * @todo Should contain EVERY filtering method in common between filtering types (i.e.: global filters and column menu filters).
+ */
+class Filters {
+  /**
+   * Function used to check whether the component is a KupTree or KupDataTable.
+   * @param {KupDataTable | KupTree} comp - Component using the column menu.
+   * @returns {comp is KupTree} Returns true when the component is KupTree.
+   */
+  static isTree(comp) {
+    return comp.rootElement.tagName === KupTagNames.TREE;
+  }
+  isObjFiltrableByInterval(obj) {
+    if (dom$8.ketchup.objects.isDate(obj)) {
+      return true;
+    }
+    if (dom$8.ketchup.objects.isTime(obj)) {
+      return true;
+    }
+    if (dom$8.ketchup.objects.isTimestamp(obj)) {
+      return true;
+    }
+    if (dom$8.ketchup.objects.isNumber(obj)) {
+      return true;
+    }
+    return false;
+  }
+  normalizeValue(value, smeupObj) {
+    let newValue = value != null ? value.trim() : value;
+    if (newValue == null || newValue == '' || smeupObj == null) {
+      return newValue;
+    }
+    if (dom$8.ketchup.objects.isDate(smeupObj)) {
+      if (dom$8.ketchup.dates.isValid(value, KupDatesFormats.ISO_DATE)) {
+        return newValue;
+      }
+      if (dom$8.ketchup.dates.isValid(value)) {
+        return dom$8.ketchup.dates.format(dom$8.ketchup.dates.normalize(value, KupDatesNormalize.DATE), KupDatesFormats.ISO_DATE);
+      }
+    }
+    else if (dom$8.ketchup.objects.isTime(smeupObj)) {
+      let manageSeconds = dom$8.ketchup.objects.isTimeWithSeconds(smeupObj);
+      if (dom$8.ketchup.dates.isValid(value, manageSeconds
+        ? KupDatesFormats.ISO_TIME
+        : KupDatesFormats.ISO_TIME_WITHOUT_SECONDS)) {
+        return newValue;
+      }
+      if (isValidFormattedStringTime(value, manageSeconds)) {
+        return formattedStringToCustomUnformattedStringTime(value, manageSeconds
+          ? KupDatesFormats.ISO_TIME
+          : KupDatesFormats.ISO_TIME_WITHOUT_SECONDS, manageSeconds);
+      }
+    }
+    else if (dom$8.ketchup.objects.isTimestamp(smeupObj)) {
+      if (dom$8.ketchup.dates.isValid(value, KupDatesFormats.ISO_DATE_TIME)) {
+        return newValue;
+      }
+      if (isValidFormattedStringTime(value, true)) {
+        return formattedStringToDefaultUnformattedStringTimestamp(value);
+      }
+    }
+    else if (dom$8.ketchup.objects.isNumber(smeupObj)) {
+      if (isValidFormattedStringNumber(value, smeupObj ? smeupObj.p : '')) {
+        return formattedStringToUnformattedStringNumber(value, smeupObj ? smeupObj.p : '');
+      }
+    }
+    return newValue;
+  }
+  /**
+   * Given a filter value, check if is a negative filter
+   * @param filterValue the filter value to use for check
+   */
+  filterIsNegative(filterValue) {
+    const analyzedFilter = filterValue.match(FILTER_ANALIZER);
+    const filterIsNegative = analyzedFilter
+      ? analyzedFilter[1].indexOf('!') >= 0
+      : false;
+    return filterIsNegative;
+  }
+  /**
+   * Given a value and a filter value, returns if that value matches the filter.
+   *
+   * Web filters can also be expressions: by putting strings between single quotes (') it's possible to activate filter expressions.
+   * Valid syntax:
+   * 'filter' = search for exact phrase;
+   * '' = match when value is empty;
+   * 'filter%' = match when a string starts with "filter";
+   * '%filter' = match when a string ends with "filter";
+   * '%filter%' = match when a string contains "filter".
+   *
+   * It is also possible to negate the expression by prepending "!" in front of the expression.
+   * For example: !'' = value in the cell must not be empty.
+   *
+   * With no expression set, the filter is by default set to '%filter%'.
+   *
+   * @param value - The current value to check.
+   * @param filterValue - The value of the current filter.
+   * @returns false if value or filterValue are empty;
+              true if value contains filterValue;
+              true if value matches special filter created on filterValue;
+              false otherwise.
+   */
+  isFilterCompliantForValue(value, filterValue) {
+    if (value == null) {
+      return false;
+    }
+    if (filterValue == null) {
+      return false;
+    }
+    const _filterIsNegative = this.filterIsNegative(filterValue);
+    // checks if the value of the filter is contained inside value of the object
+    // Or is if the filter is a special filter to be matched.
+    if (value.toLowerCase().includes(filterValue.toLowerCase()) ||
+      this.matchSpecialFilter(value.toLowerCase(), filterValue.toLowerCase().match(FILTER_ANALIZER), true)) {
+      // the element matches the field filter
+      if (_filterIsNegative) {
+        return false;
+      }
+      return true;
+    }
+    if (_filterIsNegative) {
+      return true;
+    }
+    return false;
+  }
+  /**
+   * Given a value and a filter value, returns if that value matches the filter.
+   *
+   * Web filters can also be expressions: by putting strings between single quotes (') it's possible to activate filter expressions.
+   * Valid syntax:
+   * 'filter' = search for exact phrase;
+   * '' = match when value is empty;
+   * 'filter%' = match when a string starts with "filter";
+   * '%filter' = match when a string ends with "filter";
+   * '%filter%' = match when a string contains "filter".
+   *
+   * It is also possible to negate the expression by prepending "!" in front of the expression.
+   * For example: !'' = value in the cell must not be empty.
+   *
+   * With no expression set, the filter is by default set to '%filter%'.
+   *
+   * @param value - The current value to check.
+   * @param parsedFilter - The value of the current filter.
+   * @param ignoreNegativeFlag = false - When set to true, the matcher will ignore the (!) operator; useful for global filter.
+   * @returns True if the filter is empty and the value of the cell is empty, false otherwise.
+   */
+  matchSpecialFilter(value, parsedFilter, ignoreNegativeFlag = false) {
+    if (parsedFilter != null) {
+      // endsWith and startWith are not supported by IE 11
+      // Check here https://www.w3schools.com/jsref/jsref_endswith.asp
+      const toRet = (parsedFilter[3] === '' && !value.trim()) ||
+        (!parsedFilter[2] &&
+          parsedFilter[4] &&
+          value.startsWith(parsedFilter[3])) ||
+        (parsedFilter[2] &&
+          !parsedFilter[4] &&
+          value.endsWith(parsedFilter[3])) ||
+        (!parsedFilter[2] &&
+          !parsedFilter[4] &&
+          value === parsedFilter[3]) ||
+        (parsedFilter[2] &&
+          parsedFilter[4] &&
+          value.indexOf(parsedFilter[3]) >= 0);
+      return !ignoreNegativeFlag
+        ? parsedFilter[1].indexOf('!') < 0
+          ? toRet
+          : !toRet
+        : toRet;
+    }
+    return false;
+  }
+  isFilterCompliantForSimpleValue(valueToCheck, obj, filterValue, interval) {
+    if (valueToCheck == null) {
+      return false;
+    }
+    filterValue = this.normalizeValue(filterValue, obj);
+    let value = valueToCheck;
+    let from = '';
+    let to = '';
+    if (interval != null) {
+      from = interval[FilterInterval.FROM];
+      to = interval[FilterInterval.TO];
+    }
+    let checkByRegularExpression = true;
+    if (dom$8.ketchup.objects.isNumber(obj)) {
+      value = unformattedStringNumberToNumber(value, obj ? obj.p : '');
+      let valueNumber = stringToNumber(value);
+      if (from != '') {
+        if (isNumber(from)) {
+          checkByRegularExpression = false;
+          let fromNumber = stringToNumber(from);
+          if (valueNumber < fromNumber) {
+            return false;
+          }
+        }
+        else {
+          filterValue = from;
+        }
+      }
+      if (to != '') {
+        if (isNumber(to)) {
+          checkByRegularExpression = false;
+          let toNumber = stringToNumber(to);
+          if (valueNumber > toNumber) {
+            return false;
+          }
+        }
+        else {
+          filterValue = to;
+        }
+      }
+    }
+    if (dom$8.ketchup.objects.isDate(obj) ||
+      dom$8.ketchup.objects.isTime(obj) ||
+      dom$8.ketchup.objects.isTimestamp(obj)) {
+      let valueDate = null;
+      let defaultFormat = KupDatesFormats.ISO_DATE;
+      if (dom$8.ketchup.objects.isDate(obj)) {
+        defaultFormat = KupDatesFormats.ISO_DATE;
+      }
+      else if (dom$8.ketchup.objects.isTime(obj)) {
+        defaultFormat = dom$8.ketchup.objects.isTimeWithSeconds(obj)
+          ? KupDatesFormats.ISO_TIME
+          : KupDatesFormats.ISO_TIME_WITHOUT_SECONDS;
+      }
+      else if (dom$8.ketchup.objects.isTimestamp(obj)) {
+        defaultFormat = KupDatesFormats.ISO_DATE_TIME;
+      }
+      if (dom$8.ketchup.dates.isValid(value, defaultFormat, true)) {
+        valueDate = dom$8.ketchup.dates.toDate(value, defaultFormat);
+      }
+      if (from != '') {
+        if (valueDate != null &&
+          dom$8.ketchup.dates.isValid(from, defaultFormat, true)) {
+          checkByRegularExpression = false;
+          let fromDate = dom$8.ketchup.dates.toDate(from, defaultFormat);
+          if (valueDate < fromDate) {
+            return false;
+          }
+        }
+        else {
+          filterValue = from;
+        }
+      }
+      if (to != '') {
+        if (valueDate != null &&
+          dom$8.ketchup.dates.isValid(to, defaultFormat, true)) {
+          checkByRegularExpression = false;
+          let toDate = dom$8.ketchup.dates.toDate(to, defaultFormat);
+          if (valueDate > toDate) {
+            return false;
+          }
+        }
+        else {
+          filterValue = to;
+        }
+      }
+      if (!dom$8.ketchup.dates.isValid(filterValue, defaultFormat) &&
+        !dom$8.ketchup.dates.isValid(filterValue)) {
+        value = dom$8.ketchup.dates.format(value);
+      }
+    }
+    if (checkByRegularExpression) {
+      return this.isFilterCompliantForValue(value, filterValue);
+    }
+    return true;
+  }
+  static valuesArrayContainsValue(values, value) {
+    return Filters.indexOfValueInValuesArray(values, value) >= 0;
+  }
+  static indexOfValueInValuesArray(values, value) {
+    if (values == null || values.length < 1) {
+      return -1;
+    }
+    for (let i = 0; i < values.length; i++) {
+      if (values[i].value == value) {
+        return i;
+      }
+    }
+    return -1;
+  }
+}
+
+const dom$7 = document.documentElement;
+const kupObjects = dom$7.ketchup
+  ? dom$7.ketchup.objects
+  : new KupObjects();
+/**
+ * Finds all the cells matching the filters criteria in the input dataset.
+ * @param {KupDataDataset} dataset - Input dataset.
+ * @param {KupDataFindCellFilters} filters - Filters of the research.
+ * @returns {KupDataCell[]}  Array of cells fetched after applying the filters.
+ */
+function findCell(dataset, filters) {
+  return dom$7.ketchup.data.finder(dataset, filters).cells;
+}
+/**
+ * Returns all the cells values of the specified column, sorted if required.
+ * @param {Array<KupDataRow>} dataset - Input dataset.
+ * @param {KupDataColumn} column - Column included in the search. When missing, returns empty array.
+ * @returns {ValueDisplayedValue[]} Values of the cells, sorted.
+ */
+function getCellValue(dataset, column, sorted) {
+  const rows = dataset.rows;
+  const values = new Array();
+  const result = new Array();
+  if (!rows || rows.length == 0 || !column) {
+    return result;
+  }
+  extractColumnValues(rows, column, values);
+  if (sorted == true) {
+    values.sort((n1, n2) => {
+      return compareValues(null, kupObjects.isDate(n1.obj)
+        ? n1.value
+        : getValueForDisplay2(n1, column), null, kupObjects.isDate(n2.obj)
+        ? n2.value
+        : getValueForDisplay2(n2, column), SortMode.A);
+    });
+  }
+  for (let i = 0; i < values.length; i++) {
+    let v = values[i];
+    result.push({ value: v.value, displayedValue: v.displayedValue });
+  }
+  return result;
+}
+function extractColumnValues(rows, column, values) {
+  /** il valore delle righe attualmente filtrate, formattato */
+  rows.forEach((row) => addColumnValueFromRow(values, column, row.cells[column.name]));
+  return values;
+}
+function addColumnValueFromRow(values, column, cell) {
+  if (cell) {
+    let item = {
+      value: cell.value,
+      displayedValue: getCellValueForDisplay(column, cell),
+      obj: cell.obj ? cell.obj : column.obj,
+    };
+    if (!Filters.valuesArrayContainsValue(values, cell.value)) {
+      values.push(item);
+    }
+  }
+}
+/**
+ * Overrides the given cell attributes for the specified columns.
+ * If no columns are provided, the value will be applied to every column of the dataset.
+ * @param {KupDataDataset} dataset - Input dataset.
+ * @param {KupDataCell} cell - New cell.
+ * @param {string[]} columns - Columns to be handled.
+ * @returns {KupDataCell[]} Replaced cells.
+ */
+function replaceCell(dataset, cell, columns) {
+  const replaced = [];
+  for (let index = 0; index < dataset.rows.length; index++) {
+    const row = dataset.rows[index];
+    const cells = row.cells;
+    for (const key in cells) {
+      if (!columns || !columns.length || columns.includes(key)) {
+        cells[key] = Object.assign({}, cell);
+        replaced.push(cells[key]);
+      }
+    }
+  }
+  return replaced;
+}
+
+const dom$6 = document.documentElement;
+/**
+ * Finds the columns matching the criteria specified in the filters argument.
+ * @param {KupDataDataset | Column[]} dataset - Input dataset or array of columns.
+ * @param {Partial<Column>} filters - Column interface containing the filters to match.
+ * @returns {Column[]} Columns matching the criteria.
+ */
+function findColumns(dataset, filters) {
+  const columns = dataset.columns
+    ? dataset.columns
+    : dataset;
+  const result = [];
+  for (let index = 0; index < columns.length; index++) {
+    const column = columns[index];
+    for (const key in filters) {
+      const filter = filters[key];
+      if (column[key] === filter) {
+        result.push(column);
+      }
       else if (dom$6.ketchup.objects.deepEqual(column[key], filter)) {
         result.push(column);
       }
@@ -6092,154 +7282,6 @@ function _getNode(nodes, node, index) {
   }
 }
 
-/**
- * Props of the kup-data-table component.
- * Used to export every prop in an object.
- */
-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'.";
-  KupDataTableProps["dragEnabled"] = "Enables drag.";
-  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["enableColumnsFormula"] = "Enables the choice to set formulas on columns by dragging them into different columns.";
-  KupDataTableProps["enableMergeColumns"] = "Enables the merging 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.";
-  KupDataTableProps["fixedRows"] = "Fixes the given number of rows so that they stay visible when vertically 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 fixedColumns.";
-  KupDataTableProps["forceOneLine"] = "Forces cells with long text and a fixed column size to have an ellipsis set on their text. The reflect attribute is mandatory to allow styling.";
-  KupDataTableProps["globalFilter"] = "When set to true it activates the global filter.";
-  KupDataTableProps["globalFilterValue"] = "The value of the global filter.";
-  KupDataTableProps["groupLabelDisplay"] = "How the label of a group must be displayed. For available values";
-  KupDataTableProps["groups"] = "The list of groups.";
-  KupDataTableProps["headerIsPersistent"] = "When set to true the header will stick on top of the table when scrolling.";
-  KupDataTableProps["isFocusable"] = "When set to true, clicked-on rows will have a visual feedback.";
-  KupDataTableProps["lazyLoadRows"] = "When set to true, extra rows will be automatically loaded once the last row enters the viewport. When groups are present, the number of rows is referred to groups and not to their content. Paginator is disabled.";
-  KupDataTableProps["lineBreakCharacter"] = "Defines the placeholder character which will be replaced by a line break inside table header cells, normal or sticky.";
-  KupDataTableProps["loadMoreLimit"] = "Sets a maximum limit of new records which can be required by the load more functionality.";
-  KupDataTableProps["loadMoreMode"] = "Establish the modality of how many new records will be downloaded. This property is regulated also by loadMoreStep.";
-  KupDataTableProps["loadMoreStep"] = "The number of records which will be requested to be downloaded when clicking on the load more button. This property is regulated also by loadMoreMode.";
-  KupDataTableProps["multiSelection"] = "When set to true enables rows multi selection.";
-  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.";
-  KupDataTableProps["showCustomization"] = "If set to true, displays the button to open the customization panel.";
-  KupDataTableProps["showFilters"] = "When set to true enables the column filters.";
-  KupDataTableProps["showFooter"] = "When set to true shows the footer.";
-  KupDataTableProps["showGrid"] = "Can be used to customize the grid view of the table.";
-  KupDataTableProps["showGroups"] = "When set to true enables the column grouping.";
-  KupDataTableProps["showHeader"] = "Enables rendering of the table header.";
-  KupDataTableProps["showLoadMore"] = "If set to true, displays the button to load more records.";
-  KupDataTableProps["sort"] = "Defines the current sorting options.";
-  KupDataTableProps["stateId"] = "";
-  KupDataTableProps["store"] = "";
-  KupDataTableProps["sortableColumnsMutateData"] = "If set to true, when a column is dragged to be sorted, the component directly mutates the data.columns property and then fires the event";
-  KupDataTableProps["sortEnabled"] = "When set to true enables the sorting of the columns by clicking on the column header.";
-  KupDataTableProps["tableHeight"] = "Sets the height of the table.";
-  KupDataTableProps["tableWidth"] = "Sets the width of the table.";
-  KupDataTableProps["totals"] = "Defines the current totals options.";
-  KupDataTableProps["transpose"] = "Transposes the data of the data table.";
-})(KupDataTableProps || (KupDataTableProps = {}));
-var SortMode;
-(function (SortMode) {
-  SortMode["A"] = "A";
-  SortMode["D"] = "D";
-})(SortMode || (SortMode = {}));
-var TotalMode;
-(function (TotalMode) {
-  TotalMode["COUNT"] = "Count";
-  TotalMode["SUM"] = "Sum";
-  TotalMode["MIN"] = "Min";
-  TotalMode["MAX"] = "Max";
-  TotalMode["DISTINCT"] = "Distinct";
-  TotalMode["AVERAGE"] = "Average";
-  TotalMode["MATH"] = "MATH";
-})(TotalMode || (TotalMode = {}));
-var TotalLabel;
-(function (TotalLabel) {
-  TotalLabel["COUNT"] = "Count";
-  TotalLabel["SUM"] = "Sum";
-  TotalLabel["MIN"] = "Min";
-  TotalLabel["MAX"] = "Max";
-  TotalLabel["DISTINCT"] = "Distinct";
-  TotalLabel["AVERAGE"] = "Average";
-  TotalLabel["MATH"] = "Formula";
-  TotalLabel["CANC"] = "Cancel";
-  TotalLabel["CALC"] = "Calculate";
-})(TotalLabel || (TotalLabel = {}));
-var PaginatorPos;
-(function (PaginatorPos) {
-  PaginatorPos["TOP"] = "Top";
-  PaginatorPos["BOTTOM"] = "Bottom";
-  PaginatorPos["BOTH"] = "Both";
-})(PaginatorPos || (PaginatorPos = {}));
-var ShowGrid;
-(function (ShowGrid) {
-  ShowGrid["NONE"] = "None";
-  ShowGrid["ROW"] = "Row";
-  ShowGrid["COL"] = "Col";
-  ShowGrid["COMPLETE"] = "Complete";
-})(ShowGrid || (ShowGrid = {}));
-// export enum RowActionType {
-//     DEFAULT = 'Default',
-//     VARIABLE = 'Variable',
-// }
-//---- *NEXT functionality AKA load more ----
-var LoadMoreMode;
-(function (LoadMoreMode) {
-  LoadMoreMode["CONSTANT"] = "constant";
-  LoadMoreMode["CONSTANT_INCREMENT"] = "constant_increment";
-  LoadMoreMode["PROGRESSIVE_THRESHOLD"] = "progressive_threshold";
-})(LoadMoreMode || (LoadMoreMode = {}));
-//---- Group label display functionality ----
-/**
- * The possible values the display property can have.
- * @enum
- * @property {string} BOTH - Shows both the column label and the value. This is the default.
- * @property {string} LABEL - Shows only the columns label.
- * @property {string} VALUE - Shows only the value.
- * @readonly
- */
-var GroupLabelDisplayMode;
-(function (GroupLabelDisplayMode) {
-  GroupLabelDisplayMode["BOTH"] = "Both";
-  GroupLabelDisplayMode["LABEL"] = "Label";
-  GroupLabelDisplayMode["VALUE"] = "Value";
-})(GroupLabelDisplayMode || (GroupLabelDisplayMode = {}));
-//---- Fixed rows and cells classes ----
-const FixedCellsClasses = {
-  columns: 'fixed-column',
-  rows: 'fixed-row',
-};
-const FixedCellsCSSVarsBase = {
-  columns: '--ddt_column-left-',
-  rows: '--ddt_row-top-',
-};
-/**
- * Constants for mocked/premade columns created by data mutations.
- */
-const fieldColumn = 'Field';
-const iconColumn = 'Icon';
-const keyColumn = 'Key';
-var SelectionMode;
-(function (SelectionMode) {
-  SelectionMode["SINGLE"] = "single";
-  SelectionMode["MULTIPLE_CHECKBOX"] = "multiple-checkbox";
-  SelectionMode["MULTIPLE"] = "multiple";
-  SelectionMode["NONE"] = "none";
-})(SelectionMode || (SelectionMode = {}));
-
 const autoCenterComps = [KupTagNames.DATA_TABLE, KupTagNames.TREE];
 const fullWidthFieldsComps = [KupTagNames.DATA_TABLE, KupTagNames.TREE];
 /**
@@ -6400,8 +7442,8 @@ class KupData {
       find(dataset, filters) {
         return findCell(dataset, filters);
       },
-      getValue(dataset, columns) {
-        return getCellValue(dataset, columns);
+      getValue(dataset, column, sorted) {
+        return getCellValue(dataset, column, sorted);
       },
       replace(dataset, cell, columns) {
         return replaceCell(dataset, cell, columns);
@@ -6758,9 +7800,9 @@ class KupData {
     };
     const length = dataset.rows.length;
     // sort all columns values by descending
-    let values = getCellValue(dataset, [headerColumn]);
+    let values = getCellValue(dataset, this.column.find(dataset, { name: headerColumn })[0]);
     values.sort(function (a, b) {
-      return Number(a) - Number(b);
+      return Number(a.value) - Number(b.value);
     });
     values.reverse();
     // excluding duplicates values.
@@ -6772,7 +7814,7 @@ class KupData {
     let rightIdx = idx + 1;
     // sort the rows like a "mountain", the greatest is in the middle and the other ones are splitted left and right
     for (let i = 0; i < length; i++) {
-      const value = values[i];
+      const value = values[i].value;
       // looping the rows because we have many rows with same value.
       this.finder(dataset, {
         columns: [headerColumn],
@@ -6915,39 +7957,6 @@ createCommonjsModule(function (module, exports) {
 !function(e,_){module.exports=_(dayjs_min);}(commonjsGlobal,(function(e){function _(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=_(e),d={name:"zh",weekdays:"星期日_星期一_星期二_星期三_星期四_星期五_星期六".split("_"),weekdaysShort:"周日_周一_周二_周三_周四_周五_周六".split("_"),weekdaysMin:"日_一_二_三_四_五_六".split("_"),months:"一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月".split("_"),monthsShort:"1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),ordinal:function(e,_){return "W"===_?e+"周":e+"日"},weekStart:1,yearStart:4,formats:{LT:"HH:mm",LTS:"HH:mm:ss",L:"YYYY/MM/DD",LL:"YYYY年M月D日",LLL:"YYYY年M月D日Ah点mm分",LLLL:"YYYY年M月D日ddddAh点mm分",l:"YYYY/M/D",ll:"YYYY年M月D日",lll:"YYYY年M月D日 HH:mm",llll:"YYYY年M月D日dddd HH:mm"},relativeTime:{future:"%s后",past:"%s前",s:"几秒",m:"1 分钟",mm:"%d 分钟",h:"1 小时",hh:"%d 小时",d:"1 天",dd:"%d 天",M:"1 个月",MM:"%d 个月",y:"1 年",yy:"%d 年"},meridiem:function(e,_){var t=100*e+_;return t<600?"凌晨":t<900?"早上":t<1100?"上午":t<1300?"中午":t<1800?"下午":"晚上"}};return t.default.locale(d,null,!0),d}));
 });
 
-/**
- * Normalization types.
- */
-var KupDatesNormalize;
-(function (KupDatesNormalize) {
-  KupDatesNormalize["DATE"] = "date";
-  KupDatesNormalize["TIME"] = "time";
-  KupDatesNormalize["TIMESTAMP"] = "timestamp";
-})(KupDatesNormalize || (KupDatesNormalize = {}));
-/**
- * Common use formats
- */
-var KupDatesFormats;
-(function (KupDatesFormats) {
-  KupDatesFormats["ISO_DATE"] = "YYYY-MM-DD";
-  KupDatesFormats["ISO_DATE_TIME"] = "YYYY-MM-DD HH:mm:ss";
-  KupDatesFormats["ISO_TIME"] = "HH:mm:ss";
-  KupDatesFormats["ISO_TIME_WITHOUT_SECONDS"] = "HH:mm";
-})(KupDatesFormats || (KupDatesFormats = {}));
-/**
- * Supported locales.
- */
-var KupDatesLocales;
-(function (KupDatesLocales) {
-  KupDatesLocales["CHINESE"] = "cn";
-  KupDatesLocales["ENGLISH"] = "en";
-  KupDatesLocales["FRENCH"] = "fr";
-  KupDatesLocales["ITALIAN"] = "it";
-  KupDatesLocales["POLISH"] = "pl";
-  KupDatesLocales["RUSSIAN"] = "ru";
-  KupDatesLocales["SPANISH"] = "es";
-})(KupDatesLocales || (KupDatesLocales = {}));
-
 /**
  * Handles operations and formatting of dates.
  * @module KupDates
@@ -17079,4 +18088,4 @@ function kupManagerInstance() {
   return dom.ketchup;
 }
 
-export { fullWidthFieldsComps as $, kupDragActiveAttr as A, KupDragEffect as B, kupDraggableCellAttr as C, KupDropEventTypes as D, iconColumn as E, FCellPadding as F, GroupLabelDisplayMode as G, keyColumn as H, fieldColumn as I, FixedCellsCSSVarsBase as J, KupThemeIconValues as K, LoadMoreMode as L, SortMode as M, KupLanguageFontsize as N, KupLanguageDensity as O, PaginatorPos as P, KupLanguageGrid as Q, kupDynamicPositionAttribute as R, SelectionMode as S, TotalMode as T, KupDataTableProps as U, FixedCellsClasses as V, KupTagNames as W, KupLanguagePage as X, editableTypes as Y, kupTypes as Z, FCellTypes as _, KupDynamicPositionPlacement as a, FCellClasses as a0, autoCenterComps as a1, FCellEvents as a2, createCommonjsModule as a3, getDefaultExportFromCjs as a4, KupDatesLocales as a5, KupLanguageDashboard as a6, kupDropEvent as a7, kupDraggableRowAttr as a8, KupThemeColorValues as b, KupDebugCategory as c, KupDatesFormats as d, KupCardBuiltInClockElements as e, KupCardCSSClasses as f, KupLanguageTotals as g, KupLanguageGeneric as h, KupLanguageColumn as i, KupDataNewColumnTypes as j, kupManagerInstance as k, KupCardSubEvents as l, KupCardIds as m, KupLanguageRow as n, KupCardFamily as o, KupCardProps as p, KupDates as q, KupDatesNormalize as r, KupObjects as s, KupLanguageGrouping as t, KupLanguageCheckbox as u, KupLanguageSearch as v, ShowGrid as w, TotalLabel as x, KupPointerEventTypes as y, kupDraggableColumnAttr as z };
+export { numberToFormattedStringNumber as $, KupLanguageCheckbox as A, getValueForDisplay2 as B, getValueForDisplay as C, DateTimeFormatOptionsMonth as D, KupLanguageSearch as E, Filters as F, GroupLabelDisplayMode as G, FilterInterval as H, FCellPadding as I, ShowGrid as J, KupThemeIconValues as K, LoadMoreMode as L, TotalLabel as M, KupPointerEventTypes as N, kupDraggableColumnAttr as O, PaginatorPos as P, kupDragActiveAttr as Q, KupDragEffect as R, SelectionMode as S, TotalMode as T, kupDraggableCellAttr as U, KupDropEventTypes as V, iconColumn as W, keyColumn as X, fieldColumn as Y, FixedCellsCSSVarsBase as Z, SortMode as _, KupDynamicPositionPlacement as a, KupLanguageFontsize as a0, KupLanguageDensity as a1, KupLanguageGrid as a2, kupDynamicPositionAttribute as a3, KupDataTableProps as a4, FixedCellsClasses as a5, unformattedStringToFormattedStringNumber as a6, formattedStringToCustomUnformattedStringTime as a7, isValidFormattedStringTime as a8, formatTime as a9, unformattedStringToFormattedStringTime as aa, addColumnValueFromRow as ab, KupGlobalFilterMode as ac, getCellValueForDisplay as ad, KupData as ae, compareCell as af, stringToNumber as ag, isNumber as ah, KupLanguagePage as ai, editableTypes as aj, kupTypes as ak, FCellTypes as al, KupTagNames as am, fullWidthFieldsComps as an, FCellClasses as ao, autoCenterComps as ap, FCellEvents as aq, createCommonjsModule as ar, getDefaultExportFromCjs as as, KupDatesLocales as at, getDecimalSeparator as au, KupLanguageDashboard as av, kupDropEvent as aw, kupDraggableRowAttr as ax, KupThemeColorValues as b, KupDebugCategory as c, getMonthsAsStringByLocale as d, KupDatesFormats as e, KupCardBuiltInClockElements as f, getProps as g, KupCardCSSClasses as h, KupLanguageTotals as i, KupLanguageGeneric as j, kupManagerInstance as k, KupLanguageColumn as l, KupDataNewColumnTypes as m, KupCardSubEvents as n, KupCardIds as o, KupLanguageRow as p, KupCardFamily as q, KupCardProps as r, setProps as s, getColumnByName as t, KupDates as u, formatToNumber as v, KupDatesNormalize as w, KupObjects as x, identify as y, KupLanguageGrouping as z };