@sme.up/ketchup 8.0.0 → 8.0.1

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

@@ -1,16 +1,16 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement$1, a as getAssetPath } from './index-b326ffc9.js';
-import { k as kupManagerInstance, g as getProps, s as setProps, K as KupThemeIconValues, a as KupDynamicPositionPlacement, b as KupThemeColorValues, c as KupDebugCategory, F as FCellShapes, d as FCellPadding, e as getMonthsAsStringByLocale, f as KupDatesFormats, D as DateTimeFormatOptionsMonth, h as KupCardBuiltInClockElements, i as KupCardCSSClasses, j as KupLanguageTotals, l as KupLanguageGeneric, m as KupLanguageColumn, n as KupDataNewColumnTypes, o as KupCardSubEvents, p as KupCardIds, q as KupLanguageRow, r as KupCardFamily, t as KupCardProps, u as getColumnByName, v as KupDates, w as formatToNumber, x as KupDatesNormalize, y as KupObjects, z as identify, G as GroupLabelDisplayMode, S as SelectionMode, A as KupLanguageGrouping, B as KupLanguageCheckbox, C as getValueForDisplay2, E as Filters, H as getValueForDisplay, I as KupLanguageSearch, J as FilterInterval, L as LoadMoreMode, P as PaginatorPos, M as ShowGrid, T as TotalLabel, N as TotalMode, O as numberToFormattedStringNumber, Q as kupDynamicPositionAttribute, R as KupPointerEventTypes, U as kupDraggableColumnAttr, V as kupDragActiveAttr, W as KupDragEffect, X as kupDraggableCellAttr, Y as KupDropEventTypes, Z as FixedCellsCSSVarsBase, _ as KupLanguageFontsize, $ as KupLanguageDensity, a0 as KupLanguageGrid, a1 as KupDataTableProps, a2 as FixedCellsClasses, a3 as SortMode, a4 as iconColumn, a5 as keyColumn, a6 as fieldColumn, a7 as FCellTypes, a8 as unformattedStringToFormattedStringNumber, a9 as formattedStringToCustomUnformattedStringTime, aa as isValidFormattedStringTime, ab as formatTime, ac as unformattedStringToFormattedStringTime, ad as addColumnValueFromRow, ae as KupGlobalFilterMode } from './kup-manager-b41eb2a8.js';
-import { F as FTextField } from './f-text-field-c38ef113.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement$1, a as getAssetPath } from './index-8bd38435.js';
+import { k as kupManagerInstance, g as getProps, s as setProps, K as KupThemeIconValues, a as KupDynamicPositionPlacement, b as KupThemeColorValues, c as KupDebugCategory, F as FCellShapes, d as FCellPadding, e as getMonthsAsStringByLocale, f as KupDatesFormats, D as DateTimeFormatOptionsMonth, h as KupCardBuiltInClockElements, i as KupCardCSSClasses, j as KupLanguageTotals, l as KupLanguageGeneric, m as KupLanguageColumn, n as KupDataNewColumnTypes, o as KupCardSubEvents, p as KupCardIds, q as KupLanguageRow, r as KupCardFamily, t as KupCardProps, u as getColumnByName, v as KupDates, w as formatToNumber, x as KupDatesNormalize, y as KupObjects, z as identify, G as GroupLabelDisplayMode, S as SelectionMode, A as KupLanguageGrouping, B as KupLanguageCheckbox, C as getValueForDisplay2, E as Filters, H as getValueForDisplay, I as KupLanguageSearch, J as FilterInterval, L as LoadMoreMode, P as PaginatorPos, M as ShowGrid, T as TotalLabel, N as TotalMode, O as numberToFormattedStringNumber, Q as kupDynamicPositionAttribute, R as KupPointerEventTypes, U as kupDraggableColumnAttr, V as kupDragActiveAttr, W as KupDragEffect, X as kupDraggableCellAttr, Y as KupDropEventTypes, Z as FixedCellsCSSVarsBase, _ as KupLanguageFontsize, $ as KupLanguageDensity, a0 as KupLanguageGrid, a1 as KupDataTableProps, a2 as FixedCellsClasses, a3 as SortMode, a4 as iconColumn, a5 as keyColumn, a6 as fieldColumn, a7 as FCellTypes, a8 as unformattedStringToFormattedStringNumber, a9 as formattedStringToUnformattedStringNumber, aa as formattedStringToCustomUnformattedStringTime, ab as isValidFormattedStringTime, ac as formatTime, ad as unformattedStringToFormattedStringTime, ae as addColumnValueFromRow, af as KupGlobalFilterMode } from './kup-manager-3594cde8.js';
+import { F as FTextField } from './f-text-field-dafb7c8b.js';
 import { F as FTextFieldMDC } from './f-text-field-mdc-cee583ea.js';
-import { I as ItemsDisplayMode, F as FCell, K as KupListRole, a as KupListProps, b as FSwitch } from './f-cell-b319c869.js';
+import { I as ItemsDisplayMode, F as FCell, K as KupListRole, a as KupListProps, b as FSwitch } from './f-cell-e5a98bc8.js';
 import { c as componentWrapperId } from './GenericVariables-665de00a.js';
-import { F as FImage } from './f-image-098c26ce.js';
-import { F as FButton } from './f-button-744cf1f6.js';
+import { F as FImage } from './f-image-5cbdf39d.js';
+import { F as FButton } from './f-button-c377973d.js';
 import { F as FButtonStyling } from './f-button-declarations-b1b4cac4.js';
-import { F as FChipType, a as FChip } from './f-chip-7e3e4180.js';
+import { F as FChipType, a as FChip } from './f-chip-c8a18c48.js';
 import { M as MDCRipple } from './component-120651a0.js';
-import { F as FCheckbox } from './f-checkbox-ec85b437.js';
-import { F as FiltersColumnMenu, a as FiltersRows, c as calcTotals, n as normalizeRows, p as paginateRows, f as filterRows, g as groupRows, s as sortRows, b as FPaginator, d as pageChange, r as rowsPerPageChange, t as treeMainColumnName, K as KupTreeExpansionMode, e as KupTreeProps } from './f-paginator-utils-674cb2ae.js';
+import { F as FCheckbox } from './f-checkbox-9b3f5f5b.js';
+import { F as FiltersColumnMenu, a as FiltersRows, c as calcTotals, n as normalizeRows, p as paginateRows, f as filterRows, g as groupRows, s as sortRows, b as FPaginator, d as pageChange, r as rowsPerPageChange, t as treeMainColumnName, K as KupTreeExpansionMode, e as KupTreeProps } from './f-paginator-utils-a1dab059.js';
 import './tslib.es6-8c2af864.js';
 
 /**
@@ -164,7 +164,7 @@ function getItemByDisplayMode(listData, id, displayMode, setSelected) {
 
 const kupAutocompleteCss = ":host{display:block;width:max-content}.kup-icon{transition:transform 0.15s}.toggled .kup-icon.kup-dropdown-icon{transform:rotate(-180deg)}.kup-icon.kup-dropdown-icon{-webkit-mask:var(--kup-dropdown-icon);mask:var(--kup-dropdown-icon)}.f-text-field{position:relative}:host(.kup-full-height){height:100%}:host(.kup-full-height) #kup-component,:host(.kup-full-height) .f-text-field,:host(.kup-full-height) .mdc-text-field{height:100%}:host(.kup-full-width){width:100%}:host(.kup-full-width) #kup-component{width:100%}:host(.kup-danger){--kup-textfield-primary-color:var(--kup-danger-color);--kup-textfield-primary-color-rgb:var(--kup-danger-color-rgb)}:host(.kup-info){--kup-textfield-primary-color:var(--kup-info-color);--kup-textfield-primary-color-rgb:var(--kup-info-color-rgb)}:host(.kup-secondary){--kup-textfield-primary-color:var(--kup-secondary-color);--kup-textfield-primary-color-rgb:var(--kup-secondary-color-rgb)}:host(.kup-success){--kup-textfield-primary-color:var(--kup-success-color);--kup-textfield-primary-color-rgb:var(--kup-success-color-rgb)}:host(.kup-warning){--kup-textfield-primary-color:var(--kup-warning-color);--kup-textfield-primary-color-rgb:var(--kup-warning-color-rgb)}";
 
-var __classPrivateFieldGet$6 = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+var __classPrivateFieldGet$7 = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
   if (kind === "a" && !f)
     throw new TypeError("Private accessor was defined without a getter");
   if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
@@ -225,18 +225,18 @@ const KupAutocomplete = class {
       comp: this,
       id: this.rootElement.id,
       value: this.value,
-      inputValue: __classPrivateFieldGet$6(this, _KupAutocomplete_textfieldEl, "f").value,
+      inputValue: __classPrivateFieldGet$7(this, _KupAutocomplete_textfieldEl, "f").value,
     });
   }
   onKupChange(value) {
     __classPrivateFieldSet$4(this, _KupAutocomplete_doConsistencyCheck, true, "f");
-    const ret = __classPrivateFieldGet$6(this, _KupAutocomplete_instances, "m", _KupAutocomplete_consistencyCheck).call(this, value, true);
+    const ret = __classPrivateFieldGet$7(this, _KupAutocomplete_instances, "m", _KupAutocomplete_consistencyCheck).call(this, value, true);
     if (ret.exists || this.allowInconsistentValues) {
       this.kupChange.emit({
         comp: this,
         id: this.rootElement.id,
         value: this.value,
-        inputValue: __classPrivateFieldGet$6(this, _KupAutocomplete_textfieldEl, "f").value,
+        inputValue: __classPrivateFieldGet$7(this, _KupAutocomplete_textfieldEl, "f").value,
         node: ret.node,
       });
     }
@@ -246,7 +246,7 @@ const KupAutocomplete = class {
       comp: this,
       id: this.rootElement.id,
       value: this.value,
-      inputValue: __classPrivateFieldGet$6(this, _KupAutocomplete_textfieldEl, "f").value,
+      inputValue: __classPrivateFieldGet$7(this, _KupAutocomplete_textfieldEl, "f").value,
     });
   }
   onKupFocus() {
@@ -254,51 +254,51 @@ const KupAutocomplete = class {
       comp: this,
       id: this.rootElement.id,
       value: this.value,
-      inputValue: __classPrivateFieldGet$6(this, _KupAutocomplete_textfieldEl, "f").value,
+      inputValue: __classPrivateFieldGet$7(this, _KupAutocomplete_textfieldEl, "f").value,
     });
   }
   onKupInput() {
     __classPrivateFieldSet$4(this, _KupAutocomplete_doConsistencyCheck, true, "f");
-    const ret = __classPrivateFieldGet$6(this, _KupAutocomplete_instances, "m", _KupAutocomplete_consistencyCheck).call(this, __classPrivateFieldGet$6(this, _KupAutocomplete_textfieldEl, "f").value, false);
-    __classPrivateFieldGet$6(this, _KupAutocomplete_instances, "m", _KupAutocomplete_openList).call(this, false);
-    if (__classPrivateFieldGet$6(this, _KupAutocomplete_textfieldEl, "f").value.length >= this.minimumChars) {
+    const ret = __classPrivateFieldGet$7(this, _KupAutocomplete_instances, "m", _KupAutocomplete_consistencyCheck).call(this, __classPrivateFieldGet$7(this, _KupAutocomplete_textfieldEl, "f").value, false);
+    __classPrivateFieldGet$7(this, _KupAutocomplete_instances, "m", _KupAutocomplete_openList).call(this, false);
+    if (__classPrivateFieldGet$7(this, _KupAutocomplete_textfieldEl, "f").value.length >= this.minimumChars) {
       this.kupInput.emit({
         comp: this,
         id: this.rootElement.id,
         value: this.value,
-        inputValue: __classPrivateFieldGet$6(this, _KupAutocomplete_textfieldEl, "f").value,
+        inputValue: __classPrivateFieldGet$7(this, _KupAutocomplete_textfieldEl, "f").value,
         node: ret.node,
       });
     }
   }
   onKupIconClick() {
-    if (__classPrivateFieldGet$6(this, _KupAutocomplete_textfieldWrapper, "f").classList.contains('toggled')) {
-      __classPrivateFieldGet$6(this, _KupAutocomplete_instances, "m", _KupAutocomplete_closeList).call(this);
+    if (__classPrivateFieldGet$7(this, _KupAutocomplete_textfieldWrapper, "f").classList.contains('toggled')) {
+      __classPrivateFieldGet$7(this, _KupAutocomplete_instances, "m", _KupAutocomplete_closeList).call(this);
     }
     else {
       if (this.showDropDownIcon) {
-        __classPrivateFieldGet$6(this, _KupAutocomplete_instances, "m", _KupAutocomplete_openList).call(this, true);
+        __classPrivateFieldGet$7(this, _KupAutocomplete_instances, "m", _KupAutocomplete_openList).call(this, true);
       }
     }
     this.kupIconClick.emit({
       comp: this,
       id: this.rootElement.id,
       value: this.value,
-      inputValue: __classPrivateFieldGet$6(this, _KupAutocomplete_textfieldEl, "f").value,
-      open: __classPrivateFieldGet$6(this, _KupAutocomplete_textfieldWrapper, "f").classList.contains('toggled'),
+      inputValue: __classPrivateFieldGet$7(this, _KupAutocomplete_textfieldEl, "f").value,
+      open: __classPrivateFieldGet$7(this, _KupAutocomplete_textfieldWrapper, "f").classList.contains('toggled'),
     });
   }
   onKupItemClick(e) {
     this.onKupChange(e.detail.selected.id);
-    __classPrivateFieldGet$6(this, _KupAutocomplete_instances, "m", _KupAutocomplete_closeList).call(this);
-    if (__classPrivateFieldGet$6(this, _KupAutocomplete_textfieldEl, "f")) {
-      __classPrivateFieldGet$6(this, _KupAutocomplete_textfieldEl, "f").focus();
+    __classPrivateFieldGet$7(this, _KupAutocomplete_instances, "m", _KupAutocomplete_closeList).call(this);
+    if (__classPrivateFieldGet$7(this, _KupAutocomplete_textfieldEl, "f")) {
+      __classPrivateFieldGet$7(this, _KupAutocomplete_textfieldEl, "f").focus();
     }
     this.kupItemClick.emit({
       comp: this,
       id: this.rootElement.id,
       value: this.value,
-      inputValue: __classPrivateFieldGet$6(this, _KupAutocomplete_textfieldEl, "f").value,
+      inputValue: __classPrivateFieldGet$7(this, _KupAutocomplete_textfieldEl, "f").value,
       node: e.detail.selected,
     });
   }
@@ -306,30 +306,30 @@ const KupAutocomplete = class {
   /*                L i s t e n e r s                */
   /*-------------------------------------------------*/
   listenKeydown(e) {
-    if (__classPrivateFieldGet$6(this, _KupAutocomplete_instances, "m", _KupAutocomplete_isListOpened).call(this)) {
+    if (__classPrivateFieldGet$7(this, _KupAutocomplete_instances, "m", _KupAutocomplete_isListOpened).call(this)) {
       switch (e.key) {
         case 'ArrowDown':
           e.preventDefault();
           e.stopPropagation();
-          __classPrivateFieldGet$6(this, _KupAutocomplete_listEl, "f").focusNext();
+          __classPrivateFieldGet$7(this, _KupAutocomplete_listEl, "f").focusNext();
           break;
         case 'ArrowUp':
           e.preventDefault();
           e.stopPropagation();
-          __classPrivateFieldGet$6(this, _KupAutocomplete_listEl, "f").focusPrevious();
+          __classPrivateFieldGet$7(this, _KupAutocomplete_listEl, "f").focusPrevious();
           break;
         case 'Enter':
           e.preventDefault();
           e.stopPropagation();
-          __classPrivateFieldGet$6(this, _KupAutocomplete_listEl, "f").select().then(() => {
-            __classPrivateFieldGet$6(this, _KupAutocomplete_instances, "m", _KupAutocomplete_closeList).call(this);
-            __classPrivateFieldGet$6(this, _KupAutocomplete_textfieldEl, "f").focus();
+          __classPrivateFieldGet$7(this, _KupAutocomplete_listEl, "f").select().then(() => {
+            __classPrivateFieldGet$7(this, _KupAutocomplete_instances, "m", _KupAutocomplete_closeList).call(this);
+            __classPrivateFieldGet$7(this, _KupAutocomplete_textfieldEl, "f").focus();
           });
           break;
         case 'Escape':
           e.preventDefault();
           e.stopPropagation();
-          __classPrivateFieldGet$6(this, _KupAutocomplete_instances, "m", _KupAutocomplete_closeList).call(this);
+          __classPrivateFieldGet$7(this, _KupAutocomplete_instances, "m", _KupAutocomplete_closeList).call(this);
           break;
       }
     }
@@ -338,14 +338,14 @@ const KupAutocomplete = class {
         case 'ArrowDown':
           e.preventDefault();
           e.stopPropagation();
-          __classPrivateFieldGet$6(this, _KupAutocomplete_instances, "m", _KupAutocomplete_openList).call(this, false);
-          __classPrivateFieldGet$6(this, _KupAutocomplete_listEl, "f").focusNext();
+          __classPrivateFieldGet$7(this, _KupAutocomplete_instances, "m", _KupAutocomplete_openList).call(this, false);
+          __classPrivateFieldGet$7(this, _KupAutocomplete_listEl, "f").focusNext();
           break;
         case 'ArrowUp':
           e.preventDefault();
           e.stopPropagation();
-          __classPrivateFieldGet$6(this, _KupAutocomplete_instances, "m", _KupAutocomplete_openList).call(this, false);
-          __classPrivateFieldGet$6(this, _KupAutocomplete_listEl, "f").focusPrevious();
+          __classPrivateFieldGet$7(this, _KupAutocomplete_instances, "m", _KupAutocomplete_openList).call(this, false);
+          __classPrivateFieldGet$7(this, _KupAutocomplete_listEl, "f").focusPrevious();
           break;
       }
     }
@@ -378,7 +378,7 @@ const KupAutocomplete = class {
    * Sets the focus to the component.
    */
   async setFocus() {
-    __classPrivateFieldGet$6(this, _KupAutocomplete_textfieldEl, "f").focus();
+    __classPrivateFieldGet$7(this, _KupAutocomplete_textfieldEl, "f").focus();
   }
   /**
    * Sets the props to the component.
@@ -393,14 +393,14 @@ const KupAutocomplete = class {
    */
   async setValue(value) {
     __classPrivateFieldSet$4(this, _KupAutocomplete_doConsistencyCheck, true, "f");
-    __classPrivateFieldGet$6(this, _KupAutocomplete_instances, "m", _KupAutocomplete_consistencyCheck).call(this, value, true);
+    __classPrivateFieldGet$7(this, _KupAutocomplete_instances, "m", _KupAutocomplete_consistencyCheck).call(this, value, true);
   }
   /*-------------------------------------------------*/
   /*          L i f e c y c l e   H o o k s          */
   /*-------------------------------------------------*/
   componentWillLoad() {
-    __classPrivateFieldGet$6(this, _KupAutocomplete_kupManager, "f").debug.logLoad(this, false);
-    __classPrivateFieldGet$6(this, _KupAutocomplete_kupManager, "f").theme.register(this);
+    __classPrivateFieldGet$7(this, _KupAutocomplete_kupManager, "f").debug.logLoad(this, false);
+    __classPrivateFieldGet$7(this, _KupAutocomplete_kupManager, "f").theme.register(this);
     __classPrivateFieldSet$4(this, _KupAutocomplete_doConsistencyCheck, true, "f");
     this.value = this.initialValue;
     if (!this.data) {
@@ -411,11 +411,11 @@ const KupAutocomplete = class {
     }
   }
   componentDidLoad() {
-    __classPrivateFieldGet$6(this, _KupAutocomplete_instances, "m", _KupAutocomplete_consistencyCheck).call(this, this.value, true);
-    __classPrivateFieldGet$6(this, _KupAutocomplete_kupManager, "f").debug.logLoad(this, true);
+    __classPrivateFieldGet$7(this, _KupAutocomplete_instances, "m", _KupAutocomplete_consistencyCheck).call(this, this.value, true);
+    __classPrivateFieldGet$7(this, _KupAutocomplete_kupManager, "f").debug.logLoad(this, true);
   }
   componentWillRender() {
-    __classPrivateFieldGet$6(this, _KupAutocomplete_kupManager, "f").debug.logRender(this, false);
+    __classPrivateFieldGet$7(this, _KupAutocomplete_kupManager, "f").debug.logRender(this, false);
   }
   componentDidRender() {
     const root = this.rootElement.shadowRoot;
@@ -427,81 +427,81 @@ const KupAutocomplete = class {
         FTextFieldMDC(f);
       }
     }
-    __classPrivateFieldGet$6(this, _KupAutocomplete_kupManager, "f").debug.logRender(this, true);
+    __classPrivateFieldGet$7(this, _KupAutocomplete_kupManager, "f").debug.logRender(this, true);
   }
   render() {
     const fullHeight = this.rootElement.classList.contains('kup-full-height');
     const fullWidth = this.rootElement.classList.contains('kup-full-width');
-    return (h(Host, { class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet$6(this, _KupAutocomplete_elStyle, "f") }, h("style", null, __classPrivateFieldGet$6(this, _KupAutocomplete_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId, style: __classPrivateFieldGet$6(this, _KupAutocomplete_elStyle, "f") }, h(FTextField, Object.assign({ icon: this.showDropDownIcon
+    return (h(Host, { class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet$7(this, _KupAutocomplete_elStyle, "f") }, h("style", null, __classPrivateFieldGet$7(this, _KupAutocomplete_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId, style: __classPrivateFieldGet$7(this, _KupAutocomplete_elStyle, "f") }, h(FTextField, Object.assign({ icon: this.showDropDownIcon
         ? KupThemeIconValues.DROPDOWN
         : null, trailingIcon: true }, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, value: this.displayedValue, onBlur: () => this.onKupBlur(), onClick: () => this.onKupClick(), onChange: (e) => this.onKupChange(e.target.value), onFocus: () => this.onKupFocus(), onInput: () => {
-        window.clearTimeout(__classPrivateFieldGet$6(this, _KupAutocomplete_inputTimeout, "f"));
+        window.clearTimeout(__classPrivateFieldGet$7(this, _KupAutocomplete_inputTimeout, "f"));
         __classPrivateFieldSet$4(this, _KupAutocomplete_inputTimeout, window.setTimeout(() => this.onKupInput(), this.inputDelay), "f");
-      }, onIconClick: () => this.onKupIconClick() }))), __classPrivateFieldGet$6(this, _KupAutocomplete_instances, "m", _KupAutocomplete_prepList).call(this)));
+      }, onIconClick: () => this.onKupIconClick() }))), __classPrivateFieldGet$7(this, _KupAutocomplete_instances, "m", _KupAutocomplete_prepList).call(this)));
   }
   disconnectedCallback() {
-    if (__classPrivateFieldGet$6(this, _KupAutocomplete_listEl, "f")) {
-      __classPrivateFieldGet$6(this, _KupAutocomplete_kupManager, "f").dynamicPosition.unregister([__classPrivateFieldGet$6(this, _KupAutocomplete_listEl, "f")]);
-      __classPrivateFieldGet$6(this, _KupAutocomplete_listEl, "f").remove();
+    if (__classPrivateFieldGet$7(this, _KupAutocomplete_listEl, "f")) {
+      __classPrivateFieldGet$7(this, _KupAutocomplete_kupManager, "f").dynamicPosition.unregister([__classPrivateFieldGet$7(this, _KupAutocomplete_listEl, "f")]);
+      __classPrivateFieldGet$7(this, _KupAutocomplete_listEl, "f").remove();
     }
-    __classPrivateFieldGet$6(this, _KupAutocomplete_kupManager, "f").theme.unregister(this);
+    __classPrivateFieldGet$7(this, _KupAutocomplete_kupManager, "f").theme.unregister(this);
   }
   get rootElement() { return getElement$1(this); }
 };
 _KupAutocomplete_doConsistencyCheck = new WeakMap(), _KupAutocomplete_elStyle = new WeakMap(), _KupAutocomplete_listEl = new WeakMap(), _KupAutocomplete_kupManager = new WeakMap(), _KupAutocomplete_textfieldWrapper = new WeakMap(), _KupAutocomplete_textfieldEl = new WeakMap(), _KupAutocomplete_clickCb = new WeakMap(), _KupAutocomplete_inputTimeout = new WeakMap(), _KupAutocomplete_instances = new WeakSet(), _KupAutocomplete_openList = function _KupAutocomplete_openList(forceOpen) {
   if (forceOpen != true &&
-    __classPrivateFieldGet$6(this, _KupAutocomplete_textfieldEl, "f").value.length < this.minimumChars) {
-    __classPrivateFieldGet$6(this, _KupAutocomplete_instances, "m", _KupAutocomplete_closeList).call(this);
+    __classPrivateFieldGet$7(this, _KupAutocomplete_textfieldEl, "f").value.length < this.minimumChars) {
+    __classPrivateFieldGet$7(this, _KupAutocomplete_instances, "m", _KupAutocomplete_closeList).call(this);
     return false;
   }
-  __classPrivateFieldGet$6(this, _KupAutocomplete_textfieldWrapper, "f").classList.add('toggled');
-  __classPrivateFieldGet$6(this, _KupAutocomplete_listEl, "f").menuVisible = true;
-  const elStyle = __classPrivateFieldGet$6(this, _KupAutocomplete_listEl, "f").style;
+  __classPrivateFieldGet$7(this, _KupAutocomplete_textfieldWrapper, "f").classList.add('toggled');
+  __classPrivateFieldGet$7(this, _KupAutocomplete_listEl, "f").menuVisible = true;
+  const elStyle = __classPrivateFieldGet$7(this, _KupAutocomplete_listEl, "f").style;
   elStyle.height = 'auto';
-  elStyle.minWidth = __classPrivateFieldGet$6(this, _KupAutocomplete_textfieldWrapper, "f").clientWidth + 'px';
-  if (__classPrivateFieldGet$6(this, _KupAutocomplete_kupManager, "f").dynamicPosition.isRegistered(__classPrivateFieldGet$6(this, _KupAutocomplete_listEl, "f"))) {
-    __classPrivateFieldGet$6(this, _KupAutocomplete_kupManager, "f").dynamicPosition.changeAnchor(__classPrivateFieldGet$6(this, _KupAutocomplete_listEl, "f"), __classPrivateFieldGet$6(this, _KupAutocomplete_textfieldWrapper, "f"));
+  elStyle.minWidth = __classPrivateFieldGet$7(this, _KupAutocomplete_textfieldWrapper, "f").clientWidth + 'px';
+  if (__classPrivateFieldGet$7(this, _KupAutocomplete_kupManager, "f").dynamicPosition.isRegistered(__classPrivateFieldGet$7(this, _KupAutocomplete_listEl, "f"))) {
+    __classPrivateFieldGet$7(this, _KupAutocomplete_kupManager, "f").dynamicPosition.changeAnchor(__classPrivateFieldGet$7(this, _KupAutocomplete_listEl, "f"), __classPrivateFieldGet$7(this, _KupAutocomplete_textfieldWrapper, "f"));
   }
   else {
-    __classPrivateFieldGet$6(this, _KupAutocomplete_kupManager, "f").dynamicPosition.register(__classPrivateFieldGet$6(this, _KupAutocomplete_listEl, "f"), __classPrivateFieldGet$6(this, _KupAutocomplete_textfieldWrapper, "f"), 0, KupDynamicPositionPlacement.AUTO, true);
+    __classPrivateFieldGet$7(this, _KupAutocomplete_kupManager, "f").dynamicPosition.register(__classPrivateFieldGet$7(this, _KupAutocomplete_listEl, "f"), __classPrivateFieldGet$7(this, _KupAutocomplete_textfieldWrapper, "f"), 0, KupDynamicPositionPlacement.AUTO, true);
   }
-  __classPrivateFieldGet$6(this, _KupAutocomplete_kupManager, "f").dynamicPosition.start(__classPrivateFieldGet$6(this, _KupAutocomplete_listEl, "f"));
-  if (!__classPrivateFieldGet$6(this, _KupAutocomplete_clickCb, "f")) {
+  __classPrivateFieldGet$7(this, _KupAutocomplete_kupManager, "f").dynamicPosition.start(__classPrivateFieldGet$7(this, _KupAutocomplete_listEl, "f"));
+  if (!__classPrivateFieldGet$7(this, _KupAutocomplete_clickCb, "f")) {
     __classPrivateFieldSet$4(this, _KupAutocomplete_clickCb, {
       cb: () => {
-        __classPrivateFieldGet$6(this, _KupAutocomplete_instances, "m", _KupAutocomplete_closeList).call(this);
+        __classPrivateFieldGet$7(this, _KupAutocomplete_instances, "m", _KupAutocomplete_closeList).call(this);
       },
-      el: __classPrivateFieldGet$6(this, _KupAutocomplete_listEl, "f"),
+      el: __classPrivateFieldGet$7(this, _KupAutocomplete_listEl, "f"),
     }, "f");
   }
-  __classPrivateFieldGet$6(this, _KupAutocomplete_kupManager, "f").addClickCallback(__classPrivateFieldGet$6(this, _KupAutocomplete_clickCb, "f"), true);
+  __classPrivateFieldGet$7(this, _KupAutocomplete_kupManager, "f").addClickCallback(__classPrivateFieldGet$7(this, _KupAutocomplete_clickCb, "f"), true);
   return true;
 }, _KupAutocomplete_closeList = function _KupAutocomplete_closeList() {
-  __classPrivateFieldGet$6(this, _KupAutocomplete_textfieldWrapper, "f").classList.remove('toggled');
-  __classPrivateFieldGet$6(this, _KupAutocomplete_listEl, "f").menuVisible = false;
-  __classPrivateFieldGet$6(this, _KupAutocomplete_kupManager, "f").dynamicPosition.stop(__classPrivateFieldGet$6(this, _KupAutocomplete_listEl, "f"));
-  __classPrivateFieldGet$6(this, _KupAutocomplete_kupManager, "f").removeClickCallback(__classPrivateFieldGet$6(this, _KupAutocomplete_clickCb, "f"));
+  __classPrivateFieldGet$7(this, _KupAutocomplete_textfieldWrapper, "f").classList.remove('toggled');
+  __classPrivateFieldGet$7(this, _KupAutocomplete_listEl, "f").menuVisible = false;
+  __classPrivateFieldGet$7(this, _KupAutocomplete_kupManager, "f").dynamicPosition.stop(__classPrivateFieldGet$7(this, _KupAutocomplete_listEl, "f"));
+  __classPrivateFieldGet$7(this, _KupAutocomplete_kupManager, "f").removeClickCallback(__classPrivateFieldGet$7(this, _KupAutocomplete_clickCb, "f"));
 }, _KupAutocomplete_isListOpened = function _KupAutocomplete_isListOpened() {
-  return __classPrivateFieldGet$6(this, _KupAutocomplete_listEl, "f").menuVisible == true;
+  return __classPrivateFieldGet$7(this, _KupAutocomplete_listEl, "f").menuVisible == true;
 }, _KupAutocomplete_consistencyCheck = function _KupAutocomplete_consistencyCheck(idIn, setValue) {
-  if (!__classPrivateFieldGet$6(this, _KupAutocomplete_doConsistencyCheck, "f")) {
+  if (!__classPrivateFieldGet$7(this, _KupAutocomplete_doConsistencyCheck, "f")) {
     return;
   }
   __classPrivateFieldSet$4(this, _KupAutocomplete_doConsistencyCheck, false, "f");
-  const ret = consistencyCheck(idIn, this.data['kup-list'], __classPrivateFieldGet$6(this, _KupAutocomplete_listEl, "f"), this.selectMode, this.displayMode);
+  const ret = consistencyCheck(idIn, this.data['kup-list'], __classPrivateFieldGet$7(this, _KupAutocomplete_listEl, "f"), this.selectMode, this.displayMode);
   if (ret.exists || this.allowInconsistentValues) {
     if (setValue) {
       this.value = ret.value;
       this.displayedValue = ret.displayedValue;
     }
-    if (__classPrivateFieldGet$6(this, _KupAutocomplete_listEl, "f") != null && !this.serverHandledFilter) {
-      __classPrivateFieldGet$6(this, _KupAutocomplete_listEl, "f").filter = ret.value;
+    if (__classPrivateFieldGet$7(this, _KupAutocomplete_listEl, "f") != null && !this.serverHandledFilter) {
+      __classPrivateFieldGet$7(this, _KupAutocomplete_listEl, "f").filter = ret.value;
     }
   }
   else {
     this.displayedValue = idIn;
-    if (__classPrivateFieldGet$6(this, _KupAutocomplete_listEl, "f") != null && !this.serverHandledFilter) {
-      __classPrivateFieldGet$6(this, _KupAutocomplete_listEl, "f").filter = ret.value;
+    if (__classPrivateFieldGet$7(this, _KupAutocomplete_listEl, "f") != null && !this.serverHandledFilter) {
+      __classPrivateFieldGet$7(this, _KupAutocomplete_listEl, "f").filter = ret.value;
     }
   }
   return ret;
@@ -6447,7 +6447,7 @@ var KupChipProps;
 
 const kupChipCss = ":host{display:block}";
 
-var __classPrivateFieldGet$5 = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+var __classPrivateFieldGet$6 = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
   if (kind === "a" && !f)
     throw new TypeError("Private accessor was defined without a getter");
   if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
@@ -6516,7 +6516,7 @@ const KupChip = class {
     this.kupChange.emit({
       comp: this,
       id: this.rootElement.id,
-      stringifiedValues: __classPrivateFieldGet$5(this, _KupChip_instances, "m", _KupChip_stringifiedValues).call(this),
+      stringifiedValues: __classPrivateFieldGet$6(this, _KupChip_instances, "m", _KupChip_stringifiedValues).call(this),
     });
     this.refresh();
   }
@@ -6633,11 +6633,11 @@ const KupChip = class {
       props.onIconClick.push((chip) => this.onKupIconClick(chip));
     }
     return (h(Host, { "onKup-autocomplete-itemclick": (e) => {
-        __classPrivateFieldGet$5(this, _KupChip_instances, "m", _KupChip_changeHandler).call(this, e);
+        __classPrivateFieldGet$6(this, _KupChip_instances, "m", _KupChip_changeHandler).call(this, e);
       }, "onKup-combobox-itemclick": (e) => {
-        __classPrivateFieldGet$5(this, _KupChip_instances, "m", _KupChip_changeHandler).call(this, e);
+        __classPrivateFieldGet$6(this, _KupChip_instances, "m", _KupChip_changeHandler).call(this, e);
       }, "onKup-textfield-change": (e) => {
-        __classPrivateFieldGet$5(this, _KupChip_instances, "m", _KupChip_changeHandler).call(this, e);
+        __classPrivateFieldGet$6(this, _KupChip_instances, "m", _KupChip_changeHandler).call(this, e);
       } }, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) > 0 ? h(FChip, Object.assign({}, props)) : null, h("slot", { name: "field" }))));
   }
   disconnectedCallback() {
@@ -6675,7 +6675,7 @@ _KupChip_instances = new WeakSet(), _KupChip_changeHandler =
         this.kupChange.emit({
           comp: this,
           id: this.rootElement.id,
-          stringifiedValues: __classPrivateFieldGet$5(this, _KupChip_instances, "m", _KupChip_stringifiedValues).call(this),
+          stringifiedValues: __classPrivateFieldGet$6(this, _KupChip_instances, "m", _KupChip_stringifiedValues).call(this),
         });
       }
     }
@@ -6964,7 +6964,7 @@ var KupComboboxProps;
 
 const kupComboboxCss = ":host{display:block;font-size:var(--kup-font-size);width:max-content}:host([is-select]) #kup-component{transition:background-color 0.2s}:host([is-select]) #kup-component:hover{background-color:rgba(var(--kup-text-color-rgb), 0.1)}:host([is-select]) .mdc-text-field:not(.mdc-text-field--disabled) input{cursor:pointer}.kup-icon{transition:transform 0.15s}.toggled .kup-icon.kup-dropdown-icon{transform:rotate(-180deg)}.kup-icon.kup-dropdown-icon{-webkit-mask:var(--kup-dropdown-icon);mask:var(--kup-dropdown-icon)}.f-text-field{position:relative}:host(.kup-full-height){height:100%}:host(.kup-full-height) #kup-component,:host(.kup-full-height) .f-text-field,:host(.kup-full-height) .mdc-text-field{height:100%}:host(.kup-full-width){width:100%}:host(.kup-full-width) #kup-component{width:100%}:host(.kup-danger){--kup-textfield-primary-color:var(--kup-danger-color);--kup-textfield-primary-color-rgb:var(--kup-danger-color-rgb)}:host(.kup-info){--kup-textfield-primary-color:var(--kup-info-color);--kup-textfield-primary-color-rgb:var(--kup-info-color-rgb)}:host(.kup-secondary){--kup-textfield-primary-color:var(--kup-secondary-color);--kup-textfield-primary-color-rgb:var(--kup-secondary-color-rgb)}:host(.kup-success){--kup-textfield-primary-color:var(--kup-success-color);--kup-textfield-primary-color-rgb:var(--kup-success-color-rgb)}:host(.kup-warning){--kup-textfield-primary-color:var(--kup-warning-color);--kup-textfield-primary-color-rgb:var(--kup-warning-color-rgb)}";
 
-var __classPrivateFieldGet$4 = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+var __classPrivateFieldGet$5 = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
   if (kind === "a" && !f)
     throw new TypeError("Private accessor was defined without a getter");
   if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
@@ -7020,33 +7020,33 @@ const KupCombobox = class {
       comp: this,
       id: this.rootElement.id,
       value: this.value,
-      inputValue: __classPrivateFieldGet$4(this, _KupCombobox_textfieldEl, "f").value,
+      inputValue: __classPrivateFieldGet$5(this, _KupCombobox_textfieldEl, "f").value,
     });
   }
   onKupChange(value) {
-    let ret = __classPrivateFieldGet$4(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, value, true);
+    let ret = __classPrivateFieldGet$5(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, value, true);
     this.kupChange.emit({
       comp: this,
       id: this.rootElement.id,
       value: this.value,
-      inputValue: __classPrivateFieldGet$4(this, _KupCombobox_textfieldEl, "f").value,
+      inputValue: __classPrivateFieldGet$5(this, _KupCombobox_textfieldEl, "f").value,
       node: ret.node,
     });
   }
   onKupClick() {
     if (this.isSelect == true) {
-      if (__classPrivateFieldGet$4(this, _KupCombobox_textfieldWrapper, "f").classList.contains('toggled')) {
-        __classPrivateFieldGet$4(this, _KupCombobox_instances, "m", _KupCombobox_closeList).call(this);
+      if (__classPrivateFieldGet$5(this, _KupCombobox_textfieldWrapper, "f").classList.contains('toggled')) {
+        __classPrivateFieldGet$5(this, _KupCombobox_instances, "m", _KupCombobox_closeList).call(this);
       }
       else {
-        __classPrivateFieldGet$4(this, _KupCombobox_instances, "m", _KupCombobox_openList).call(this);
+        __classPrivateFieldGet$5(this, _KupCombobox_instances, "m", _KupCombobox_openList).call(this);
       }
     }
     this.kupClick.emit({
       comp: this,
       id: this.rootElement.id,
       value: this.value,
-      inputValue: __classPrivateFieldGet$4(this, _KupCombobox_textfieldEl, "f").value,
+      inputValue: __classPrivateFieldGet$5(this, _KupCombobox_textfieldEl, "f").value,
     });
   }
   onKupFocus() {
@@ -7054,47 +7054,47 @@ const KupCombobox = class {
       comp: this,
       id: this.rootElement.id,
       value: this.value,
-      inputValue: __classPrivateFieldGet$4(this, _KupCombobox_textfieldEl, "f").value,
+      inputValue: __classPrivateFieldGet$5(this, _KupCombobox_textfieldEl, "f").value,
     });
   }
   onKupInput() {
-    let ret = __classPrivateFieldGet$4(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, __classPrivateFieldGet$4(this, _KupCombobox_textfieldEl, "f").value, false);
-    __classPrivateFieldGet$4(this, _KupCombobox_instances, "m", _KupCombobox_openList).call(this);
+    let ret = __classPrivateFieldGet$5(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, __classPrivateFieldGet$5(this, _KupCombobox_textfieldEl, "f").value, false);
+    __classPrivateFieldGet$5(this, _KupCombobox_instances, "m", _KupCombobox_openList).call(this);
     this.kupInput.emit({
       comp: this,
       id: this.rootElement.id,
       value: this.value,
-      inputValue: __classPrivateFieldGet$4(this, _KupCombobox_textfieldEl, "f").value,
+      inputValue: __classPrivateFieldGet$5(this, _KupCombobox_textfieldEl, "f").value,
       node: ret.node,
     });
   }
   onKupIconClick() {
-    if (__classPrivateFieldGet$4(this, _KupCombobox_textfieldWrapper, "f").classList.contains('toggled')) {
-      __classPrivateFieldGet$4(this, _KupCombobox_instances, "m", _KupCombobox_closeList).call(this);
+    if (__classPrivateFieldGet$5(this, _KupCombobox_textfieldWrapper, "f").classList.contains('toggled')) {
+      __classPrivateFieldGet$5(this, _KupCombobox_instances, "m", _KupCombobox_closeList).call(this);
     }
     else {
-      __classPrivateFieldGet$4(this, _KupCombobox_instances, "m", _KupCombobox_openList).call(this);
+      __classPrivateFieldGet$5(this, _KupCombobox_instances, "m", _KupCombobox_openList).call(this);
     }
     this.kupIconClick.emit({
       comp: this,
       id: this.rootElement.id,
       value: this.value,
-      inputValue: __classPrivateFieldGet$4(this, _KupCombobox_textfieldEl, "f").value,
-      open: __classPrivateFieldGet$4(this, _KupCombobox_textfieldWrapper, "f").classList.contains('toggled'),
+      inputValue: __classPrivateFieldGet$5(this, _KupCombobox_textfieldEl, "f").value,
+      open: __classPrivateFieldGet$5(this, _KupCombobox_textfieldWrapper, "f").classList.contains('toggled'),
     });
   }
   onKupItemClick(e) {
     this.onKupChange(e.detail.selected.id);
-    __classPrivateFieldGet$4(this, _KupCombobox_instances, "m", _KupCombobox_closeList).call(this);
-    if (__classPrivateFieldGet$4(this, _KupCombobox_textfieldEl, "f")) {
-      __classPrivateFieldGet$4(this, _KupCombobox_textfieldEl, "f").focus();
+    __classPrivateFieldGet$5(this, _KupCombobox_instances, "m", _KupCombobox_closeList).call(this);
+    if (__classPrivateFieldGet$5(this, _KupCombobox_textfieldEl, "f")) {
+      __classPrivateFieldGet$5(this, _KupCombobox_textfieldEl, "f").focus();
     }
     this.kupItemClick.emit({
       comp: this,
       id: this.rootElement.id,
       node: e.detail.selected,
       value: this.value,
-      inputValue: __classPrivateFieldGet$4(this, _KupCombobox_textfieldEl, "f").value,
+      inputValue: __classPrivateFieldGet$5(this, _KupCombobox_textfieldEl, "f").value,
     });
   }
   /*-------------------------------------------------*/
@@ -7107,30 +7107,30 @@ const KupCombobox = class {
   /*                L i s t e n e r s                */
   /*-------------------------------------------------*/
   listenKeydown(e) {
-    if (__classPrivateFieldGet$4(this, _KupCombobox_instances, "m", _KupCombobox_isListOpened).call(this)) {
+    if (__classPrivateFieldGet$5(this, _KupCombobox_instances, "m", _KupCombobox_isListOpened).call(this)) {
       switch (e.key) {
         case 'ArrowDown':
           e.preventDefault();
           e.stopPropagation();
-          __classPrivateFieldGet$4(this, _KupCombobox_listEl, "f").focusNext();
+          __classPrivateFieldGet$5(this, _KupCombobox_listEl, "f").focusNext();
           break;
         case 'ArrowUp':
           e.preventDefault();
           e.stopPropagation();
-          __classPrivateFieldGet$4(this, _KupCombobox_listEl, "f").focusPrevious();
+          __classPrivateFieldGet$5(this, _KupCombobox_listEl, "f").focusPrevious();
           break;
         case 'Enter':
           e.preventDefault();
           e.stopPropagation();
-          __classPrivateFieldGet$4(this, _KupCombobox_listEl, "f").select().then(() => {
-            __classPrivateFieldGet$4(this, _KupCombobox_instances, "m", _KupCombobox_closeList).call(this);
-            __classPrivateFieldGet$4(this, _KupCombobox_textfieldEl, "f").focus();
+          __classPrivateFieldGet$5(this, _KupCombobox_listEl, "f").select().then(() => {
+            __classPrivateFieldGet$5(this, _KupCombobox_instances, "m", _KupCombobox_closeList).call(this);
+            __classPrivateFieldGet$5(this, _KupCombobox_textfieldEl, "f").focus();
           });
           break;
         case 'Escape':
           e.preventDefault();
           e.stopPropagation();
-          __classPrivateFieldGet$4(this, _KupCombobox_instances, "m", _KupCombobox_closeList).call(this);
+          __classPrivateFieldGet$5(this, _KupCombobox_instances, "m", _KupCombobox_closeList).call(this);
           break;
       }
     }
@@ -7139,14 +7139,14 @@ const KupCombobox = class {
         case 'ArrowDown':
           e.preventDefault();
           e.stopPropagation();
-          __classPrivateFieldGet$4(this, _KupCombobox_instances, "m", _KupCombobox_openList).call(this);
-          __classPrivateFieldGet$4(this, _KupCombobox_listEl, "f").focusNext();
+          __classPrivateFieldGet$5(this, _KupCombobox_instances, "m", _KupCombobox_openList).call(this);
+          __classPrivateFieldGet$5(this, _KupCombobox_listEl, "f").focusNext();
           break;
         case 'ArrowUp':
           e.preventDefault();
           e.stopPropagation();
-          __classPrivateFieldGet$4(this, _KupCombobox_instances, "m", _KupCombobox_openList).call(this);
-          __classPrivateFieldGet$4(this, _KupCombobox_listEl, "f").focusPrevious();
+          __classPrivateFieldGet$5(this, _KupCombobox_instances, "m", _KupCombobox_openList).call(this);
+          __classPrivateFieldGet$5(this, _KupCombobox_listEl, "f").focusPrevious();
           break;
       }
     }
@@ -7179,7 +7179,7 @@ const KupCombobox = class {
    * Sets the focus to the component.
    */
   async setFocus() {
-    __classPrivateFieldGet$4(this, _KupCombobox_textfieldEl, "f").focus();
+    __classPrivateFieldGet$5(this, _KupCombobox_textfieldEl, "f").focus();
   }
   /**
    * Sets the props to the component.
@@ -7193,14 +7193,14 @@ const KupCombobox = class {
    * @param {string} value - Value to be set.
    */
   async setValue(value) {
-    __classPrivateFieldGet$4(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, value, true);
+    __classPrivateFieldGet$5(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, value, true);
   }
   /*-------------------------------------------------*/
   /*          L i f e c y c l e   H o o k s          */
   /*-------------------------------------------------*/
   componentWillLoad() {
-    __classPrivateFieldGet$4(this, _KupCombobox_kupManager, "f").debug.logLoad(this, false);
-    __classPrivateFieldGet$4(this, _KupCombobox_kupManager, "f").theme.register(this);
+    __classPrivateFieldGet$5(this, _KupCombobox_kupManager, "f").debug.logLoad(this, false);
+    __classPrivateFieldGet$5(this, _KupCombobox_kupManager, "f").theme.register(this);
     this.value = this.initialValue;
     if (!this.data) {
       this.data = {
@@ -7210,11 +7210,11 @@ const KupCombobox = class {
     }
   }
   componentDidLoad() {
-    __classPrivateFieldGet$4(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, this.value, true);
-    __classPrivateFieldGet$4(this, _KupCombobox_kupManager, "f").debug.logLoad(this, true);
+    __classPrivateFieldGet$5(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, this.value, true);
+    __classPrivateFieldGet$5(this, _KupCombobox_kupManager, "f").debug.logLoad(this, true);
   }
   componentWillRender() {
-    __classPrivateFieldGet$4(this, _KupCombobox_kupManager, "f").debug.logRender(this, false);
+    __classPrivateFieldGet$5(this, _KupCombobox_kupManager, "f").debug.logRender(this, false);
   }
   componentDidRender() {
     const root = this.rootElement.shadowRoot;
@@ -7226,21 +7226,21 @@ const KupCombobox = class {
         FTextFieldMDC(f);
       }
     }
-    __classPrivateFieldGet$4(this, _KupCombobox_kupManager, "f").debug.logRender(this, true);
+    __classPrivateFieldGet$5(this, _KupCombobox_kupManager, "f").debug.logRender(this, true);
   }
   render() {
     const fullHeight = this.rootElement.classList.contains('kup-full-height');
     const fullWidth = this.rootElement.classList.contains('kup-full-width');
-    return (h(Host, { class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet$4(this, _KupCombobox_elStyle, "f") }, h("style", null, __classPrivateFieldGet$4(this, _KupCombobox_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId, style: __classPrivateFieldGet$4(this, _KupCombobox_elStyle, "f") }, h(FTextField, Object.assign({}, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, icon: this.showDropDownIcon
+    return (h(Host, { class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet$5(this, _KupCombobox_elStyle, "f") }, h("style", null, __classPrivateFieldGet$5(this, _KupCombobox_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId, style: __classPrivateFieldGet$5(this, _KupCombobox_elStyle, "f") }, h(FTextField, Object.assign({}, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, icon: this.showDropDownIcon
         ? KupThemeIconValues.DROPDOWN
-        : null, readOnly: this.isSelect, trailingIcon: true, value: this.displayedValue, onBlur: () => this.onKupBlur(), onClick: () => this.onKupClick(), onChange: (e) => this.onKupChange(e.target.value), onFocus: () => this.onKupFocus(), onInput: () => this.onKupInput(), onIconClick: () => this.onKupIconClick() }))), __classPrivateFieldGet$4(this, _KupCombobox_instances, "m", _KupCombobox_prepList).call(this)));
+        : null, readOnly: this.isSelect, trailingIcon: true, value: this.displayedValue, onBlur: () => this.onKupBlur(), onClick: () => this.onKupClick(), onChange: (e) => this.onKupChange(e.target.value), onFocus: () => this.onKupFocus(), onInput: () => this.onKupInput(), onIconClick: () => this.onKupIconClick() }))), __classPrivateFieldGet$5(this, _KupCombobox_instances, "m", _KupCombobox_prepList).call(this)));
   }
   disconnectedCallback() {
-    if (__classPrivateFieldGet$4(this, _KupCombobox_listEl, "f")) {
-      __classPrivateFieldGet$4(this, _KupCombobox_kupManager, "f").dynamicPosition.unregister([__classPrivateFieldGet$4(this, _KupCombobox_listEl, "f")]);
-      __classPrivateFieldGet$4(this, _KupCombobox_listEl, "f").remove();
+    if (__classPrivateFieldGet$5(this, _KupCombobox_listEl, "f")) {
+      __classPrivateFieldGet$5(this, _KupCombobox_kupManager, "f").dynamicPosition.unregister([__classPrivateFieldGet$5(this, _KupCombobox_listEl, "f")]);
+      __classPrivateFieldGet$5(this, _KupCombobox_listEl, "f").remove();
     }
-    __classPrivateFieldGet$4(this, _KupCombobox_kupManager, "f").theme.unregister(this);
+    __classPrivateFieldGet$5(this, _KupCombobox_kupManager, "f").theme.unregister(this);
   }
   get rootElement() { return getElement$1(this); }
   static get watchers() { return {
@@ -7248,54 +7248,54 @@ const KupCombobox = class {
   }; }
 };
 _KupCombobox_kupManager = new WeakMap(), _KupCombobox_elStyle = new WeakMap(), _KupCombobox_listEl = new WeakMap(), _KupCombobox_textfieldWrapper = new WeakMap(), _KupCombobox_textfieldEl = new WeakMap(), _KupCombobox_clickCb = new WeakMap(), _KupCombobox_instances = new WeakSet(), _KupCombobox_openList = function _KupCombobox_openList() {
-  if (__classPrivateFieldGet$4(this, _KupCombobox_instances, "m", _KupCombobox_isListOpened).call(this)) {
+  if (__classPrivateFieldGet$5(this, _KupCombobox_instances, "m", _KupCombobox_isListOpened).call(this)) {
     return;
   }
-  __classPrivateFieldGet$4(this, _KupCombobox_textfieldWrapper, "f").classList.add('toggled');
-  __classPrivateFieldGet$4(this, _KupCombobox_listEl, "f").menuVisible = true;
-  __classPrivateFieldGet$4(this, _KupCombobox_listEl, "f").filter = '';
-  const elStyle = __classPrivateFieldGet$4(this, _KupCombobox_listEl, "f").style;
+  __classPrivateFieldGet$5(this, _KupCombobox_textfieldWrapper, "f").classList.add('toggled');
+  __classPrivateFieldGet$5(this, _KupCombobox_listEl, "f").menuVisible = true;
+  __classPrivateFieldGet$5(this, _KupCombobox_listEl, "f").filter = '';
+  const elStyle = __classPrivateFieldGet$5(this, _KupCombobox_listEl, "f").style;
   elStyle.height = 'auto';
-  elStyle.minWidth = __classPrivateFieldGet$4(this, _KupCombobox_textfieldWrapper, "f").clientWidth + 'px';
-  if (__classPrivateFieldGet$4(this, _KupCombobox_kupManager, "f").dynamicPosition.isRegistered(__classPrivateFieldGet$4(this, _KupCombobox_listEl, "f"))) {
-    __classPrivateFieldGet$4(this, _KupCombobox_kupManager, "f").dynamicPosition.changeAnchor(__classPrivateFieldGet$4(this, _KupCombobox_listEl, "f"), __classPrivateFieldGet$4(this, _KupCombobox_textfieldWrapper, "f"));
+  elStyle.minWidth = __classPrivateFieldGet$5(this, _KupCombobox_textfieldWrapper, "f").clientWidth + 'px';
+  if (__classPrivateFieldGet$5(this, _KupCombobox_kupManager, "f").dynamicPosition.isRegistered(__classPrivateFieldGet$5(this, _KupCombobox_listEl, "f"))) {
+    __classPrivateFieldGet$5(this, _KupCombobox_kupManager, "f").dynamicPosition.changeAnchor(__classPrivateFieldGet$5(this, _KupCombobox_listEl, "f"), __classPrivateFieldGet$5(this, _KupCombobox_textfieldWrapper, "f"));
   }
   else {
-    __classPrivateFieldGet$4(this, _KupCombobox_kupManager, "f").dynamicPosition.register(__classPrivateFieldGet$4(this, _KupCombobox_listEl, "f"), __classPrivateFieldGet$4(this, _KupCombobox_textfieldWrapper, "f"), 0, KupDynamicPositionPlacement.AUTO, true);
+    __classPrivateFieldGet$5(this, _KupCombobox_kupManager, "f").dynamicPosition.register(__classPrivateFieldGet$5(this, _KupCombobox_listEl, "f"), __classPrivateFieldGet$5(this, _KupCombobox_textfieldWrapper, "f"), 0, KupDynamicPositionPlacement.AUTO, true);
   }
-  __classPrivateFieldGet$4(this, _KupCombobox_kupManager, "f").dynamicPosition.start(__classPrivateFieldGet$4(this, _KupCombobox_listEl, "f"));
-  if (!__classPrivateFieldGet$4(this, _KupCombobox_clickCb, "f")) {
+  __classPrivateFieldGet$5(this, _KupCombobox_kupManager, "f").dynamicPosition.start(__classPrivateFieldGet$5(this, _KupCombobox_listEl, "f"));
+  if (!__classPrivateFieldGet$5(this, _KupCombobox_clickCb, "f")) {
     __classPrivateFieldSet$3(this, _KupCombobox_clickCb, {
       cb: () => {
-        __classPrivateFieldGet$4(this, _KupCombobox_instances, "m", _KupCombobox_closeList).call(this);
+        __classPrivateFieldGet$5(this, _KupCombobox_instances, "m", _KupCombobox_closeList).call(this);
       },
-      el: __classPrivateFieldGet$4(this, _KupCombobox_listEl, "f"),
+      el: __classPrivateFieldGet$5(this, _KupCombobox_listEl, "f"),
     }, "f");
   }
-  __classPrivateFieldGet$4(this, _KupCombobox_kupManager, "f").addClickCallback(__classPrivateFieldGet$4(this, _KupCombobox_clickCb, "f"), true);
+  __classPrivateFieldGet$5(this, _KupCombobox_kupManager, "f").addClickCallback(__classPrivateFieldGet$5(this, _KupCombobox_clickCb, "f"), true);
 }, _KupCombobox_closeList = function _KupCombobox_closeList() {
-  __classPrivateFieldGet$4(this, _KupCombobox_textfieldWrapper, "f").classList.remove('toggled');
-  __classPrivateFieldGet$4(this, _KupCombobox_listEl, "f").menuVisible = false;
-  __classPrivateFieldGet$4(this, _KupCombobox_kupManager, "f").dynamicPosition.stop(__classPrivateFieldGet$4(this, _KupCombobox_listEl, "f"));
-  __classPrivateFieldGet$4(this, _KupCombobox_kupManager, "f").removeClickCallback(__classPrivateFieldGet$4(this, _KupCombobox_clickCb, "f"));
+  __classPrivateFieldGet$5(this, _KupCombobox_textfieldWrapper, "f").classList.remove('toggled');
+  __classPrivateFieldGet$5(this, _KupCombobox_listEl, "f").menuVisible = false;
+  __classPrivateFieldGet$5(this, _KupCombobox_kupManager, "f").dynamicPosition.stop(__classPrivateFieldGet$5(this, _KupCombobox_listEl, "f"));
+  __classPrivateFieldGet$5(this, _KupCombobox_kupManager, "f").removeClickCallback(__classPrivateFieldGet$5(this, _KupCombobox_clickCb, "f"));
 }, _KupCombobox_isListOpened = function _KupCombobox_isListOpened() {
-  return __classPrivateFieldGet$4(this, _KupCombobox_listEl, "f").menuVisible == true;
+  return __classPrivateFieldGet$5(this, _KupCombobox_listEl, "f").menuVisible == true;
 }, _KupCombobox_consistencyCheck = function _KupCombobox_consistencyCheck(idIn, setValue) {
-  let ret = consistencyCheck(idIn, this.data['kup-list'], __classPrivateFieldGet$4(this, _KupCombobox_listEl, "f"), this.selectMode, this.displayMode);
+  let ret = consistencyCheck(idIn, this.data['kup-list'], __classPrivateFieldGet$5(this, _KupCombobox_listEl, "f"), this.selectMode, this.displayMode);
   if (ret.exists) {
     if (setValue) {
       this.value = ret.value;
       this.displayedValue = ret.displayedValue;
     }
-    if (__classPrivateFieldGet$4(this, _KupCombobox_listEl, "f") != null) {
-      __classPrivateFieldGet$4(this, _KupCombobox_listEl, "f").filter = ret.value;
+    if (__classPrivateFieldGet$5(this, _KupCombobox_listEl, "f") != null) {
+      __classPrivateFieldGet$5(this, _KupCombobox_listEl, "f").filter = ret.value;
     }
   }
   else {
     this.value = idIn;
     this.displayedValue = idIn;
-    if (__classPrivateFieldGet$4(this, _KupCombobox_listEl, "f") != null) {
-      __classPrivateFieldGet$4(this, _KupCombobox_listEl, "f").filter = ret.value;
+    if (__classPrivateFieldGet$5(this, _KupCombobox_listEl, "f") != null) {
+      __classPrivateFieldGet$5(this, _KupCombobox_listEl, "f").filter = ret.value;
     }
   }
   return ret;
@@ -7310,8 +7310,8 @@ class KupDataTableState {
     this.expandGroups = false;
     this.groupLabelDisplay = GroupLabelDisplayMode.BOTH;
     this.density = 'small';
-    this.enableSortableColumns = false;
     this.enableExtraColumns = true;
+    this.enableSortableColumns = false;
     this.forceOneLine = false;
     this.globalFilter = false;
     this.globalFilterValue = '';
@@ -8081,7 +8081,7 @@ class KupColumnMenu {
 
 const kupDataTableCss = ":host{--kup_datatable_background_color:var(\n    --kup-datatable-background-color,\n    var(--kup-background-color)\n  );--kup_datatable_border:var(\n    --kup-datatable-border,\n    1px solid var(--kup-border-color)\n  );--kup_datatable_color:var(--kup-datatable-color, var(--kup-text-color));--kup_datatable_font_family:var(\n    --kup-datatable-font-family,\n    var(--kup-font-family)\n  );--kup_datatable_font_family_monospace:var(\n    --kup-datatable-font-family-monospace,\n    var(--kup-font-family-monospace)\n  );--kup_datatable_font_size:var(\n    --kup-datatable-font-size,\n    var(--kup-font-size)\n  );--kup_datatable_th_border:var(\n    --kup-datatable-th-border,\n    1px solid var(--kup-border-color)\n  );--kup_datatable_th_resize_handle_width:var(\n    --kup-datatable-th-resize-handle-width,\n    3px\n  );display:block;font-family:var(--kup_datatable_font_family);font-size:var(--kup_datatable_font_size);position:relative}:host([kup-toolbar]) .settings-trigger{height:12px}:host([kup-toolbar]) .customize-panel{visibility:visible}:host([force-one-line]) .f-cell__text{white-space:nowrap}table{background-color:var(--kup_datatable_background_color);border-spacing:0;border-collapse:separate;color:var(--kup_datatable_color);min-width:intrinsic;min-width:-moz-max-content;min-width:-webkit-max-content;text-align:left;width:100%}table.auto-width{min-width:auto;width:0}table>tbody>tr.focus td:first-of-type,table>tbody>tr[kup-drag-over] td:first-of-type{box-shadow:inset 4px 0px 0px 0px var(--kup-secondary-color)}table>tbody>tr>td:first-of-type,table>tbody>tr>td.placeholder~td:not(.placeholder){border-left:var(--kup_datatable_border)}table>tbody>tr>td:last-of-type{border-right:var(--kup_datatable_border)}table>tbody>tr:last-of-type>td{border-bottom:var(--kup_datatable_border)}table.border-top>tbody>tr:first-of-type>td{border-top:var(--kup_datatable_border)}table.row-separation>tbody>tr>td{border-bottom:var(--kup_datatable_border)}table.column-separation>tbody>tr>td{border-right:var(--kup_datatable_border)}table.noGrid,table.noGrid td{border:none}table tfoot td{border-bottom:var(--kup_datatable_border);border-right:var(--kup_datatable_border);box-sizing:border-box;height:36px;text-align:right;font-weight:bold;padding:0.5em 0.3125em}table tfoot td:hover{background-color:var(--kup_datatable_background_color)}table tfoot td:first-of-type{border-left:var(--kup_datatable_border)}#global-filter{margin:0.5em 0px;min-width:140px;width:100%}.kup-icon:not(.f-image){background-color:var(--kup-title-color);margin:0 0.25em;height:1.25em;width:1.25em}.kup-icon:not(.f-image).kup-ascending-icon,.kup-icon:not(.f-image).kup-descending-icon,.kup-icon:not(.f-image).kup-key-icon,.kup-icon:not(.f-image).kup-filter-remove-icon{height:auto}.kup-icon:not(.f-image).kup-collapsed-icon,.kup-icon:not(.f-image).kup-expanded-icon{float:left}.kup-icon:not(.f-image).kup-filter-remove-icon,.kup-icon:not(.f-image).kup-key-icon{margin:0 0.25em}.below-wrapper{backface-visibility:hidden;height:auto;overflow:auto}.below-wrapper.custom-size{overflow:unset}.below-wrapper:not(.custom-size){overflow-x:auto}.density-dense tbody>tr.group td{padding-top:0.25em;padding-bottom:0.25em}.density-wide tbody>tr.group>td{padding-top:0.75em;padding-bottom:0.75em}.fontsize-small{font-size:calc(var(--kup_datatable_font_size) * 0.75);transition:font-size 0.1s}.fontsize-small .group-cell-content>span:before{font-size:calc(var(--kup_datatable_font_size) * 1) !important}.fontsize-big{font-size:calc(var(--kup_datatable_font_size) * 1.25);transition:font-size 0.1s}.fontsize-big .group-cell-content>span:before{font-size:calc(var(--kup_datatable_font_size) * 1.5) !important}th{background-color:var(--kup-title-background-color);border:var(--kup_datatable_th_border);border-left:0 none;border-bottom-width:2px;box-sizing:border-box;top:0;touch-action:none;transition:background-color 0.25s ease;user-select:none}th:first-of-type{border-left:var(--kup_datatable_th_border)}.header-cell__content{color:var(--kup-title-color);display:flex;justify-content:space-between;padding:0.5em 0.3125em;text-overflow:ellipsis;white-space:nowrap}.header-cell--centered .header-cell__content{justify-content:center}.header-cell--is-number .header-cell__content{justify-content:flex-end}.header-cell__title{overflow:hidden;text-overflow:ellipsis;user-select:none}.header-cell__icons{display:flex}.header-cell__drag-handler{background:rgba(var(--kup-title-color-rgb), 0.25);height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:var(--kup_datatable_th_resize_handle_width)}.header-cell__drag-handler:hover{background:rgba(var(--kup-title-color-rgb), 0.5)}.header-cell--sortable{cursor:pointer}.header-cell--is-icon{width:30px}tbody{cursor:auto}tbody td{height:0;padding:0}tbody td>*{border:none !important}tbody tr kup-button{max-width:max-content}tbody tr[kup-draggable]{opacity:0.5}tbody tr.selected td{background-color:rgba(var(--kup-primary-color-rgb), 0.175)}tbody tr:hover:not(.group):not(.selected) td{color:var(--kup-hover-color);background-color:var(--kup-hover-background-color)}tbody tr.group{background:var(--kup-title-background-color);border-top:var(--kup_datatable_border);color:var(--kup-title-color);font-weight:bold;cursor:pointer}tbody tr.group.group-label{border-bottom:none}tbody tr.group.group-total{border-top:none;line-height:0.5em}tbody tr.group>td{padding:0.5em 0}tbody tr.group>td .group-cell-content .indent{float:left;margin-left:0.25em}tbody tr.group>td .group-cell-content>span{display:inline-flex;outline:none;margin-left:0.25em}tbody tr.group>td.total{text-align:right;padding:0.5em 0.3125em}tbody tr.group>td.total.negative-number{color:var(--kup-danger-color)}tbody tr>td{box-sizing:border-box;transition:box-shadow 0.1s}tbody tr>td .row-expander{margin-right:0.5em}tbody tr>td .row-action{margin-right:0.2em}tbody tr [row-select-cell]{min-height:40px}tbody tr td[row-action-cell]{width:calc(3em * var(--kup_datatable_row_actions))}tbody tr td[row-action-cell] .f-image{cursor:pointer;margin-left:0.75em;display:inline-block;opacity:1;transition:0.25s ease-in-out}tbody tr td[row-action-cell] .f-image:hover{opacity:0.5}.above-wrapper{display:flex;width:100%}.kup-icon.overlay-action{display:none;position:absolute;top:0.5em;left:calc(50% - 0.625em)}th:hover .kup-icon.overlay-action{display:block}thead th{position:relative}th.obj:hover span:not(.overlay-action){opacity:0.5}.hidden span{color:transparent;position:relative;text-overflow:ellipsis;transition:color 200ms}.hidden span:hover{color:var(--kup_datatable_color)}.group-wrapper{--kup-chip-margin:0 4px}.totals-value{font-weight:bold}.settings-trigger{cursor:pointer;display:block;width:32px;height:0;border-top-left-radius:25px 30px;border-top-right-radius:25px 30px;background-color:var(--kup-border-color);transition:height 0.25s}.settings-trigger.toggled{background-color:var(--kup-primary-color)}.settings-trigger.toggled .f-image__icon{background:var(--kup-text-on-primary-color) !important}.indent{display:inline-block;height:1em;width:2em}.indent~kup-image,.indent~kup-button{margin:0;vertical-align:middle}.indent~kup-image{display:inline-block}.indent~kup-button,.indent~kup-checkbox{display:inline-block}.actions-wrapper{display:flex}.insert-button,.delete-button,.save-button{padding:1em 0.5em}.kup-icon.kup-ascending-icon{-webkit-mask:var(--kup-ascending-icon);mask:var(--kup-ascending-icon)}.kup-icon.kup-collapsed-icon{-webkit-mask:var(--kup-collapsed-icon);mask:var(--kup-collapsed-icon)}.kup-icon.kup-descending-icon{-webkit-mask:var(--kup-descending-icon);mask:var(--kup-descending-icon)}.kup-icon.kup-expanded-icon{-webkit-mask:var(--kup-expanded-icon);mask:var(--kup-expanded-icon)}.kup-icon.kup-filter-remove-icon{-webkit-mask:var(--kup-filter-remove-icon);mask:var(--kup-filter-remove-icon)}.kup-icon.kup-key-icon{-webkit-mask:var(--kup-key-icon);mask:var(--kup-key-icon)}.paginator-wrapper{display:flex;flex-flow:wrap;min-width:max-content}.paginator-tabs{width:100%}.paginator-tabs kup-paginator{display:inline-flex}.paginator-tabs kup-button{position:relative;height:100%;margin-left:0.25em;float:right}.paginator-tabs .load-more-button{margin:0.5em 0px 0px}sticky-header{display:none}.persistent-header~sticky-header{background:var(--kup-title-background-color);border-bottom:2px solid var(--kup-border-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);color:var(--kup-title-color);display:block;opacity:0;overflow:hidden;pointer-events:none;position:fixed;top:0;transition:opacity 0.25s ease-in-out;z-index:10}.persistent-header~sticky-header.activated{opacity:1;pointer-events:all}.persistent-header~sticky-header[hidden]{display:none}.persistent-header~sticky-header tr-sticky{display:inline-flex}.persistent-header~sticky-header th-sticky{box-sizing:border-box;display:inline-flex;padding:0 0.3125em}.persistent-header~sticky-header th-sticky .header-cell__content{width:100%}.fixed-column,.fixed-row{background-color:var(--kup_datatable_background_color);color:var(--kup-text-color);position:sticky}thead .fixed-column,thead .fixed-row,tfoot .fixed-column,tfoot .fixed-row{z-index:10}table.custom-size th{position:sticky;top:0;z-index:10}table.custom-size th.fixed-column{z-index:11}tr:hover .fixed-row,tr:hover .fixed-column{color:var(--kup-hover-color);background-color:var(--kup-hover-background-color)}tr.selected .fixed-column,tr.selected .fixed-row{background-color:var(--kup_datatable_background_color);background-image:linear-gradient(to right, rgba(var(--kup-primary-color-rgb), 0.175) 0%, rgba(var(--kup-primary-color-rgb), 0.175) 0.1%, rgba(var(--kup-primary-color-rgb), 0.175))}.fixed-row{top:0;z-index:4}.fixed-column{left:0;z-index:6}.fixed-column.fixed-row{z-index:8}thead tr .fixed-column,thead tr:hover:not(.group):not(.selected) .fixed-column{background-color:var(--kup-title-background-color);color:var(--kup-title-color)}tfoot tr:hover:not(.group):not(.selected) .fixed-row,tfoot tr:hover:not(.group):not(.selected) .fixed-column{color:var(--kup-text-color);background-color:var(--kup_datatable_background_color)}:host([drag-enabled]) tr{touch-action:none}th[kup-drag-over]{background-color:rgba(var(--kup-success-color-rgb), 0.25)}th[kup-draggable]{cursor:grabbing !important;opacity:0.5}.droparea{animation:fade-in 0.25s ease-out;background:var(--kup_datatable_background_color);border-radius:8px;box-shadow:var(--kup-box-shadow);display:none;padding:1em 0.5em}.droparea--visible{display:flex}.droparea__groups{border:2px dashed var(--kup-text-color)}.droparea__remove{border:2px dashed var(--kup-danger-color)}.droparea__groups,.droparea__remove{background:var(--kup_datatable_background_color);box-shadow:var(--kup-box-shadow);display:block;height:50px;margin:0 0.5em;opacity:0.5;position:relative;transition:opacity 0.25s;width:50px}.droparea__groups .f-image,.droparea__remove .f-image{width:100%;position:absolute}.droparea__groups .f-image:first-of-type,.droparea__remove .f-image:first-of-type{opacity:1}.droparea__groups .f-image:last-of-type,.droparea__remove .f-image:last-of-type{opacity:0}.droparea__groups[kup-drag-over],.droparea__remove[kup-drag-over]{opacity:1}.droparea__groups[kup-drag-over] .f-image:first-of-type,.droparea__remove[kup-drag-over] .f-image:first-of-type{opacity:0}.droparea__groups[kup-drag-over] .f-image:last-of-type,.droparea__remove[kup-drag-over] .f-image:last-of-type{opacity:1}:host(.kup-cross-selection) #kup-component th.selected{box-shadow:inset 0px 4px 0px 0px var(--kup-secondary-color)}:host(.kup-cross-selection) #kup-component td.selected{background-color:rgba(var(--kup-text-color-rgb), 0.075)}:host(.kup-cross-selection) #kup-component td.selected.fixed-column,:host(.kup-cross-selection) #kup-component td.selected.fixed-row{background-color:var(--kup_datatable_background_color);background-image:linear-gradient(to right, rgba(var(--kup-text-color-rgb), 0.075) 0%, rgba(var(--kup-text-color-rgb), 0.075) 0.1%, rgba(var(--kup-text-color-rgb), 0.075))}:host(.kup-cross-selection) #kup-component tr.selected td{background-color:rgba(var(--kup-text-color-rgb), 0.075)}:host(.kup-cross-selection) #kup-component tr.selected td:first-of-type{box-shadow:inset 4px 0px 0px 0px var(--kup-secondary-color)}:host(.kup-cross-selection) #kup-component tr.selected td.selected{background-color:rgba(var(--kup-text-color-rgb), 0.15)}:host(.kup-cross-selection) #kup-component tr.selected td.fixed-column,:host(.kup-cross-selection) #kup-component tr.selected td.fixed-row{background-color:var(--kup_datatable_background_color);background-image:linear-gradient(to right, rgba(var(--kup-text-color-rgb), 0.075) 0%, rgba(var(--kup-text-color-rgb), 0.075) 0.1%, rgba(var(--kup-text-color-rgb), 0.075))}:host(.kup-cross-selection) #kup-component tr.selected td.fixed-column.selected,:host(.kup-cross-selection) #kup-component tr.selected td.fixed-row.selected{background-image:linear-gradient(to right, rgba(var(--kup-text-color-rgb), 0.15) 0%, rgba(var(--kup-text-color-rgb), 0.15) 0.1%, rgba(var(--kup-text-color-rgb), 0.15))}:host(.kup-layout-fixed) #kup-component table{table-layout:fixed;width:100%}tr.clickable{cursor:pointer}";
 
-var __classPrivateFieldGet$3 = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+var __classPrivateFieldGet$4 = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
   if (kind === "a" && !f)
     throw new TypeError("Private accessor was defined without a getter");
   if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
@@ -8193,18 +8193,18 @@ const KupDataTable = class {
     _KupDataTable_MESSAGE_WRAPPER_ID.set(this, 'messageWrapper');
     _KupDataTable_INSERT_PREFIX.set(this, 'insert_');
     _KupDataTable_stickyHeaderPosition.set(this, () => {
-      if (__classPrivateFieldGet$3(this, _KupDataTable_tableRef, "f")) {
-        if (__classPrivateFieldGet$3(this, _KupDataTable_tableIntersecting, "f")) {
-          if (!__classPrivateFieldGet$3(this, _KupDataTable_theadIntersecting, "f")) {
-            __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_updateStickyHeaderSize).call(this);
-            __classPrivateFieldGet$3(this, _KupDataTable_stickyTheadRef, "f").classList.add('activated');
+      if (__classPrivateFieldGet$4(this, _KupDataTable_tableRef, "f")) {
+        if (__classPrivateFieldGet$4(this, _KupDataTable_tableIntersecting, "f")) {
+          if (!__classPrivateFieldGet$4(this, _KupDataTable_theadIntersecting, "f")) {
+            __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_updateStickyHeaderSize).call(this);
+            __classPrivateFieldGet$4(this, _KupDataTable_stickyTheadRef, "f").classList.add('activated');
           }
           else {
-            __classPrivateFieldGet$3(this, _KupDataTable_stickyTheadRef, "f").classList.remove('activated');
+            __classPrivateFieldGet$4(this, _KupDataTable_stickyTheadRef, "f").classList.remove('activated');
           }
         }
         else {
-          __classPrivateFieldGet$3(this, _KupDataTable_stickyTheadRef, "f").classList.remove('activated');
+          __classPrivateFieldGet$4(this, _KupDataTable_stickyTheadRef, "f").classList.remove('activated');
         }
       }
     });
@@ -8298,7 +8298,7 @@ const KupDataTable = class {
     if (this.store && this.stateId) {
       const state = this.store.getState(this.stateId);
       if (state != null) {
-        __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").debug.logMessage(this, 'Initializing stateId ' + this.stateId);
+        __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").debug.logMessage(this, 'Initializing stateId ' + this.stateId);
         // *** PROPS ***
         this.filters = Object.assign({}, state.filters);
         this.groups = [...state.groups];
@@ -8334,116 +8334,116 @@ const KupDataTable = class {
   persistState() {
     if (this.store && this.stateId) {
       let somethingChanged = false;
-      if (!__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.filters, this.filters)) {
+      if (!__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.filters, this.filters)) {
         this.state.filters = Object.assign({}, this.filters);
         somethingChanged = true;
       }
-      if (!__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.groups, this.groups)) {
+      if (!__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.groups, this.groups)) {
         this.state.groups = [...this.groups];
         somethingChanged = true;
       }
-      if (!__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.sort, this.sort)) {
+      if (!__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.sort, this.sort)) {
         this.state.sort = [...this.sort];
         somethingChanged = true;
       }
-      if (!__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.expandGroups, this.expandGroups)) {
+      if (!__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.expandGroups, this.expandGroups)) {
         this.state.expandGroups = this.expandGroups;
         somethingChanged = true;
       }
-      if (!__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.groupLabelDisplay, this.groupLabelDisplay)) {
+      if (!__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.groupLabelDisplay, this.groupLabelDisplay)) {
         this.state.groupLabelDisplay = this.groupLabelDisplay;
         somethingChanged = true;
       }
-      if (!__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.density, this.density)) {
+      if (!__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.density, this.density)) {
         this.state.density = this.density;
         somethingChanged = true;
       }
-      if (!__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.enableExtraColumns, this.enableExtraColumns)) {
+      if (!__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.enableExtraColumns, this.enableExtraColumns)) {
         this.state.enableExtraColumns = this.enableExtraColumns;
         somethingChanged = true;
       }
-      if (!__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.enableSortableColumns, this.enableSortableColumns)) {
+      if (!__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.enableSortableColumns, this.enableSortableColumns)) {
         this.state.enableSortableColumns = this.enableSortableColumns;
         somethingChanged = true;
       }
-      if (!__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.forceOneLine, this.forceOneLine)) {
+      if (!__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.forceOneLine, this.forceOneLine)) {
         this.state.forceOneLine = this.forceOneLine;
         somethingChanged = true;
       }
-      if (!__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.globalFilter, this.globalFilter)) {
+      if (!__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.globalFilter, this.globalFilter)) {
         this.state.globalFilter = this.globalFilter;
         somethingChanged = true;
       }
-      if (!__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.globalFilterValue, this.globalFilterValue)) {
+      if (!__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.globalFilterValue, this.globalFilterValue)) {
         this.state.globalFilterValue = this.globalFilterValue;
         somethingChanged = true;
       }
-      if (!__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.headerIsPersistent, this.headerIsPersistent)) {
+      if (!__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.headerIsPersistent, this.headerIsPersistent)) {
         this.state.headerIsPersistent = this.headerIsPersistent;
         somethingChanged = true;
       }
-      if (!__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.lazyLoadRows, this.lazyLoadRows)) {
+      if (!__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.lazyLoadRows, this.lazyLoadRows)) {
         this.state.lazyLoadRows = this.lazyLoadRows;
         somethingChanged = true;
       }
-      if (!__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.loadMoreLimit, this.loadMoreLimit)) {
+      if (!__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.loadMoreLimit, this.loadMoreLimit)) {
         this.state.loadMoreLimit = this.loadMoreLimit;
         somethingChanged = true;
       }
-      if (!__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.selection, this.selection)) {
+      if (!__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.selection, this.selection)) {
         this.state.selection = this.selection;
         somethingChanged = true;
       }
-      if (!__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.rowsPerPage, this.currentRowsPerPage)) {
+      if (!__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.rowsPerPage, this.currentRowsPerPage)) {
         this.state.rowsPerPage = this.currentRowsPerPage;
         somethingChanged = true;
       }
-      if (!__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.showFilters, this.showFilters)) {
+      if (!__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.showFilters, this.showFilters)) {
         this.state.showFilters = this.showFilters;
         somethingChanged = true;
       }
-      if (!__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.showGroups, this.showGroups)) {
+      if (!__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.showGroups, this.showGroups)) {
         this.state.showGroups = this.showGroups;
         somethingChanged = true;
       }
-      if (!__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.showHeader, this.showHeader)) {
+      if (!__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.showHeader, this.showHeader)) {
         this.state.showHeader = this.showHeader;
         somethingChanged = true;
       }
-      if (!__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.showLoadMore, this.showLoadMore)) {
+      if (!__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.showLoadMore, this.showLoadMore)) {
         this.state.showLoadMore = this.showLoadMore;
         somethingChanged = true;
       }
-      if (!__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.sortEnabled, this.sortEnabled)) {
+      if (!__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.sortEnabled, this.sortEnabled)) {
         this.state.sortEnabled = this.sortEnabled;
         somethingChanged = true;
       }
-      if (!__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.sortableColumnsMutateData, this.sortableColumnsMutateData)) {
+      if (!__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.sortableColumnsMutateData, this.sortableColumnsMutateData)) {
         this.state.sortableColumnsMutateData =
           this.sortableColumnsMutateData;
         somethingChanged = true;
       }
-      if (!__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.pageSelected, this.currentPage)) {
+      if (!__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.pageSelected, this.currentPage)) {
         this.state.pageSelected = this.currentPage;
         somethingChanged = true;
       }
-      if (!__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.dragEnabled, this.dragEnabled)) {
+      if (!__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.dragEnabled, this.dragEnabled)) {
         this.state.dragEnabled = this.dragEnabled;
         somethingChanged = true;
       }
-      if (!__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.dropEnabled, this.dropEnabled)) {
+      if (!__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.dropEnabled, this.dropEnabled)) {
         this.state.dropEnabled = this.dropEnabled;
         somethingChanged = true;
       }
-      if (!__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.showFooter, this.showFooter)) {
+      if (!__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.showFooter, this.showFooter)) {
         this.state.showFooter = this.showFooter;
         somethingChanged = true;
       }
-      if (!__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.totals, this.totals)) {
+      if (!__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.totals, this.totals)) {
         this.state.totals = Object.assign({}, this.totals);
         somethingChanged = true;
       }
-      if (!__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.selectRowsById, this.selectedRows.reduce((accumulator, row, currentIndex) => {
+      if (!__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.selectRowsById, this.selectedRows.reduce((accumulator, row, currentIndex) => {
         const prefix = currentIndex > 0 ? ';' : '';
         return accumulator + prefix + row.id;
       }, ''))) {
@@ -8458,7 +8458,7 @@ const KupDataTable = class {
         return;
       }
       if (somethingChanged) {
-        __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").debug.logMessage(this, 'Persisting stateId ' + this.stateId);
+        __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").debug.logMessage(this, 'Persisting stateId ' + this.stateId);
         this.store.persistState(this.stateId, this.state);
       }
     }
@@ -8467,33 +8467,33 @@ const KupDataTable = class {
     this.currentRowsPerPage = newValue;
   }
   expandGroupsHandler() {
-    if (!__classPrivateFieldGet$3(this, _KupDataTable_isRestoringState, "f")) {
+    if (!__classPrivateFieldGet$4(this, _KupDataTable_isRestoringState, "f")) {
       this.recalculateRows();
       // reset group state
       this.groupState = {};
-      __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_forceGroupExpansion).call(this);
+      __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_forceGroupExpansion).call(this);
     }
   }
   filtersChanged() {
     this.expandGroupsHandler();
   }
   recalculateRows() {
-    if (!__classPrivateFieldGet$3(this, _KupDataTable_isRestoringState, "f")) {
-      __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_initRows).call(this);
+    if (!__classPrivateFieldGet$4(this, _KupDataTable_isRestoringState, "f")) {
+      __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_initRows).call(this);
     }
   }
   identifyAndInitRows() {
     identify(this.getRows());
     this.expandGroupsHandler();
-    __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_resetSelectedRows).call(this);
+    __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_resetSelectedRows).call(this);
   }
   recalculateRowsAndUndoSelections() {
-    if (!__classPrivateFieldGet$3(this, _KupDataTable_isRestoringState, "f")) {
+    if (!__classPrivateFieldGet$4(this, _KupDataTable_isRestoringState, "f")) {
       this.recalculateRows();
       // reset group state
       this.groupState = {};
-      __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_forceGroupExpansion).call(this);
-      __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_resetSelectedRows).call(this);
+      __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_forceGroupExpansion).call(this);
+      __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_resetSelectedRows).call(this);
     }
   }
   controlFixedRowsColumns() {
@@ -8509,8 +8509,8 @@ const KupDataTable = class {
     }
   }
   recalculateData() {
-    if (__classPrivateFieldGet$3(this, _KupDataTable_initialized, "f")) {
-      __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_calculateData).call(this);
+    if (__classPrivateFieldGet$4(this, _KupDataTable_initialized, "f")) {
+      __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_calculateData).call(this);
     }
   }
   /**
@@ -8518,14 +8518,14 @@ const KupDataTable = class {
    */
   async closeColumnMenu() {
     this.columnMenuAnchor = null;
-    if (__classPrivateFieldGet$3(this, _KupDataTable_columnMenuCard, "f")) {
-      __classPrivateFieldGet$3(this, _KupDataTable_columnMenuCard, "f").data = null;
+    if (__classPrivateFieldGet$4(this, _KupDataTable_columnMenuCard, "f")) {
+      __classPrivateFieldGet$4(this, _KupDataTable_columnMenuCard, "f").data = null;
     }
-    __classPrivateFieldGet$3(this, _KupDataTable_columnMenuInstance, "f").close(__classPrivateFieldGet$3(this, _KupDataTable_columnMenuCard, "f"));
+    __classPrivateFieldGet$4(this, _KupDataTable_columnMenuInstance, "f").close(__classPrivateFieldGet$4(this, _KupDataTable_columnMenuCard, "f"));
     this.kupDataTableColumnMenu.emit({
       comp: this,
       id: this.rootElement.id,
-      card: __classPrivateFieldGet$3(this, _KupDataTable_columnMenuCard, "f"),
+      card: __classPrivateFieldGet$4(this, _KupDataTable_columnMenuCard, "f"),
       event: null,
       open: false,
     });
@@ -8568,8 +8568,8 @@ const KupDataTable = class {
    * Closes the insert new record card (called by backend, on success)
    */
   async closeInsertCard() {
-    if (__classPrivateFieldGet$3(this, _KupDataTable_insertCard, "f")) {
-      __classPrivateFieldGet$3(this, _KupDataTable_insertCard, "f").remove();
+    if (__classPrivateFieldGet$4(this, _KupDataTable_insertCard, "f")) {
+      __classPrivateFieldGet$4(this, _KupDataTable_insertCard, "f").remove();
       __classPrivateFieldSet$2(this, _KupDataTable_insertCard, null, "f");
     }
   }
@@ -8577,8 +8577,8 @@ const KupDataTable = class {
    * Closes the delete confirm card (called by backend, on success)
    */
   async closeConfirmDeleteCard() {
-    if (__classPrivateFieldGet$3(this, _KupDataTable_confirmDeleteDialog, "f")) {
-      __classPrivateFieldGet$3(this, _KupDataTable_confirmDeleteDialog, "f").close();
+    if (__classPrivateFieldGet$4(this, _KupDataTable_confirmDeleteDialog, "f")) {
+      __classPrivateFieldGet$4(this, _KupDataTable_confirmDeleteDialog, "f").close();
       __classPrivateFieldSet$2(this, _KupDataTable_confirmDeleteCard, null, "f");
       __classPrivateFieldSet$2(this, _KupDataTable_confirmDeleteDialog, null, "f");
     }
@@ -8588,23 +8588,23 @@ const KupDataTable = class {
    */
   async getCards() {
     const obj = {};
-    if (__classPrivateFieldGet$3(this, _KupDataTable_insertCard, "f")) {
+    if (__classPrivateFieldGet$4(this, _KupDataTable_insertCard, "f")) {
       obj['insertCard'] = {
-        el: __classPrivateFieldGet$3(this, _KupDataTable_insertCard, "f"),
-        messageWrapper: __classPrivateFieldGet$3(this, _KupDataTable_insertCard, "f").querySelector('#' + __classPrivateFieldGet$3(this, _KupDataTable_MESSAGE_WRAPPER_ID, "f")),
-        message: __classPrivateFieldGet$3(this, _KupDataTable_insertCard, "f").querySelector('#' + __classPrivateFieldGet$3(this, _KupDataTable_MESSAGE_ID, "f")),
-        submitButton: __classPrivateFieldGet$3(this, _KupDataTable_insertCard, "f").querySelector('#' + __classPrivateFieldGet$3(this, _KupDataTable_BUTTON_SUBMIT_ID, "f")),
-        cancelButton: __classPrivateFieldGet$3(this, _KupDataTable_insertCard, "f").querySelector('#' + __classPrivateFieldGet$3(this, _KupDataTable_BUTTON_CANCEL_ID, "f")),
-        form: __classPrivateFieldGet$3(this, _KupDataTable_insertCard, "f").querySelector('#' + __classPrivateFieldGet$3(this, _KupDataTable_FIELDS_FORM_ID, "f")),
+        el: __classPrivateFieldGet$4(this, _KupDataTable_insertCard, "f"),
+        messageWrapper: __classPrivateFieldGet$4(this, _KupDataTable_insertCard, "f").querySelector('#' + __classPrivateFieldGet$4(this, _KupDataTable_MESSAGE_WRAPPER_ID, "f")),
+        message: __classPrivateFieldGet$4(this, _KupDataTable_insertCard, "f").querySelector('#' + __classPrivateFieldGet$4(this, _KupDataTable_MESSAGE_ID, "f")),
+        submitButton: __classPrivateFieldGet$4(this, _KupDataTable_insertCard, "f").querySelector('#' + __classPrivateFieldGet$4(this, _KupDataTable_BUTTON_SUBMIT_ID, "f")),
+        cancelButton: __classPrivateFieldGet$4(this, _KupDataTable_insertCard, "f").querySelector('#' + __classPrivateFieldGet$4(this, _KupDataTable_BUTTON_CANCEL_ID, "f")),
+        form: __classPrivateFieldGet$4(this, _KupDataTable_insertCard, "f").querySelector('#' + __classPrivateFieldGet$4(this, _KupDataTable_FIELDS_FORM_ID, "f")),
       };
     }
-    if (__classPrivateFieldGet$3(this, _KupDataTable_confirmDeleteCard, "f")) {
+    if (__classPrivateFieldGet$4(this, _KupDataTable_confirmDeleteCard, "f")) {
       obj['confirmDeleteCard'] = {
-        el: __classPrivateFieldGet$3(this, _KupDataTable_confirmDeleteCard, "f"),
-        messageWrapper: __classPrivateFieldGet$3(this, _KupDataTable_insertCard, "f").querySelector('#' + __classPrivateFieldGet$3(this, _KupDataTable_MESSAGE_WRAPPER_ID, "f")),
-        message: __classPrivateFieldGet$3(this, _KupDataTable_confirmDeleteCard, "f").querySelector('#' + __classPrivateFieldGet$3(this, _KupDataTable_MESSAGE_ID, "f")),
-        submitButton: __classPrivateFieldGet$3(this, _KupDataTable_confirmDeleteCard, "f").querySelector('#' + __classPrivateFieldGet$3(this, _KupDataTable_BUTTON_SUBMIT_ID, "f")),
-        cancelButton: __classPrivateFieldGet$3(this, _KupDataTable_confirmDeleteCard, "f").querySelector('#' + __classPrivateFieldGet$3(this, _KupDataTable_BUTTON_CANCEL_ID, "f")),
+        el: __classPrivateFieldGet$4(this, _KupDataTable_confirmDeleteCard, "f"),
+        messageWrapper: __classPrivateFieldGet$4(this, _KupDataTable_insertCard, "f").querySelector('#' + __classPrivateFieldGet$4(this, _KupDataTable_MESSAGE_WRAPPER_ID, "f")),
+        message: __classPrivateFieldGet$4(this, _KupDataTable_confirmDeleteCard, "f").querySelector('#' + __classPrivateFieldGet$4(this, _KupDataTable_MESSAGE_ID, "f")),
+        submitButton: __classPrivateFieldGet$4(this, _KupDataTable_confirmDeleteCard, "f").querySelector('#' + __classPrivateFieldGet$4(this, _KupDataTable_BUTTON_SUBMIT_ID, "f")),
+        cancelButton: __classPrivateFieldGet$4(this, _KupDataTable_confirmDeleteCard, "f").querySelector('#' + __classPrivateFieldGet$4(this, _KupDataTable_BUTTON_CANCEL_ID, "f")),
       };
     }
     /*
@@ -8658,7 +8658,7 @@ const KupDataTable = class {
    * @param {KupDataColumn} column - Column to hide.
    */
   async hideColumn(column) {
-    __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").data.column.hide(this.data, [column.name]);
+    __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").data.column.hide(this.data, [column.name]);
     this.kupColumnRemove.emit({
       comp: this,
       id: this.rootElement.id,
@@ -8673,7 +8673,7 @@ const KupDataTable = class {
    * @returns {string|KupDataColumn} Returns the new column created or a string containing the error message if something went wrong.
    */
   async newColumn(type, options) {
-    const result = __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").data.column.new(this.data, type, options);
+    const result = __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").data.column.new(this.data, type, options);
     this.refresh();
     return result;
   }
@@ -8683,40 +8683,40 @@ const KupDataTable = class {
    */
   async openColumnMenu(column) {
     this.columnMenuAnchor = column;
-    if (!__classPrivateFieldGet$3(this, _KupDataTable_columnMenuCard, "f")) {
+    if (!__classPrivateFieldGet$4(this, _KupDataTable_columnMenuCard, "f")) {
       __classPrivateFieldSet$2(this, _KupDataTable_columnMenuCard, document.createElement('kup-card'), "f");
-      __classPrivateFieldGet$3(this, _KupDataTable_columnMenuCard, "f").isMenu = true;
-      __classPrivateFieldGet$3(this, _KupDataTable_columnMenuCard, "f").layoutNumber = 12;
-      __classPrivateFieldGet$3(this, _KupDataTable_columnMenuCard, "f").sizeX = 'auto';
-      __classPrivateFieldGet$3(this, _KupDataTable_columnMenuCard, "f").sizeY = 'auto';
-      __classPrivateFieldGet$3(this, _KupDataTable_columnMenuCard, "f").addEventListener('kup-card-click', (e) => {
+      __classPrivateFieldGet$4(this, _KupDataTable_columnMenuCard, "f").isMenu = true;
+      __classPrivateFieldGet$4(this, _KupDataTable_columnMenuCard, "f").layoutNumber = 12;
+      __classPrivateFieldGet$4(this, _KupDataTable_columnMenuCard, "f").sizeX = 'auto';
+      __classPrivateFieldGet$4(this, _KupDataTable_columnMenuCard, "f").sizeY = 'auto';
+      __classPrivateFieldGet$4(this, _KupDataTable_columnMenuCard, "f").addEventListener('kup-card-click', (e) => {
         this.kupDataTableColumnMenu.emit({
           comp: this,
           id: this.rootElement.id,
-          card: __classPrivateFieldGet$3(this, _KupDataTable_columnMenuCard, "f"),
+          card: __classPrivateFieldGet$4(this, _KupDataTable_columnMenuCard, "f"),
           event: e,
-          open: __classPrivateFieldGet$3(this, _KupDataTable_columnMenuCard, "f").menuVisible,
+          open: __classPrivateFieldGet$4(this, _KupDataTable_columnMenuCard, "f").menuVisible,
         });
       });
-      __classPrivateFieldGet$3(this, _KupDataTable_columnMenuCard, "f").addEventListener('kup-card-event', (e) => {
-        __classPrivateFieldGet$3(this, _KupDataTable_columnMenuInstance, "f").eventHandlers(e, this);
+      __classPrivateFieldGet$4(this, _KupDataTable_columnMenuCard, "f").addEventListener('kup-card-event', (e) => {
+        __classPrivateFieldGet$4(this, _KupDataTable_columnMenuInstance, "f").eventHandlers(e, this);
         this.kupDataTableColumnMenu.emit({
           comp: this,
           id: this.rootElement.id,
-          card: __classPrivateFieldGet$3(this, _KupDataTable_columnMenuCard, "f"),
+          card: __classPrivateFieldGet$4(this, _KupDataTable_columnMenuCard, "f"),
           event: e,
-          open: __classPrivateFieldGet$3(this, _KupDataTable_columnMenuCard, "f").menuVisible,
+          open: __classPrivateFieldGet$4(this, _KupDataTable_columnMenuCard, "f").menuVisible,
         });
       });
     }
-    __classPrivateFieldGet$3(this, _KupDataTable_columnMenuCard, "f").setAttribute('data-column', column);
-    __classPrivateFieldGet$3(this, _KupDataTable_columnMenuCard, "f").data = __classPrivateFieldGet$3(this, _KupDataTable_columnMenuInstance, "f").prepData(this, getColumnByName(this.getVisibleColumns(), column));
-    __classPrivateFieldGet$3(this, _KupDataTable_columnMenuInstance, "f").open(this, column);
-    __classPrivateFieldGet$3(this, _KupDataTable_columnMenuInstance, "f").reposition(this, __classPrivateFieldGet$3(this, _KupDataTable_columnMenuCard, "f"));
+    __classPrivateFieldGet$4(this, _KupDataTable_columnMenuCard, "f").setAttribute('data-column', column);
+    __classPrivateFieldGet$4(this, _KupDataTable_columnMenuCard, "f").data = __classPrivateFieldGet$4(this, _KupDataTable_columnMenuInstance, "f").prepData(this, getColumnByName(this.getVisibleColumns(), column));
+    __classPrivateFieldGet$4(this, _KupDataTable_columnMenuInstance, "f").open(this, column);
+    __classPrivateFieldGet$4(this, _KupDataTable_columnMenuInstance, "f").reposition(this, __classPrivateFieldGet$4(this, _KupDataTable_columnMenuCard, "f"));
     this.kupDataTableColumnMenu.emit({
       comp: this,
       id: this.rootElement.id,
-      card: __classPrivateFieldGet$3(this, _KupDataTable_columnMenuCard, "f"),
+      card: __classPrivateFieldGet$4(this, _KupDataTable_columnMenuCard, "f"),
       event: null,
       open: true,
     });
@@ -8726,7 +8726,7 @@ const KupDataTable = class {
    */
   async refresh(recalcRows) {
     if (recalcRows) {
-      __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_initRows).call(this);
+      __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_initRows).call(this);
     }
     forceUpdate(this);
   }
@@ -8735,8 +8735,8 @@ const KupDataTable = class {
    */
   async resizeCallback() {
     if (this.lazyLoadCells &&
-      this.rootElement.clientWidth !== __classPrivateFieldGet$3(this, _KupDataTable_oldWidth, "f")) {
-      window.clearTimeout(__classPrivateFieldGet$3(this, _KupDataTable_resizeTimeout, "f"));
+      this.rootElement.clientWidth !== __classPrivateFieldGet$4(this, _KupDataTable_oldWidth, "f")) {
+      window.clearTimeout(__classPrivateFieldGet$4(this, _KupDataTable_resizeTimeout, "f"));
       __classPrivateFieldSet$2(this, _KupDataTable_resizeTimeout, window.setTimeout(() => this.refresh(), 300), "f");
     }
   }
@@ -8751,7 +8751,7 @@ const KupDataTable = class {
     if (!column) {
       return;
     }
-    const row = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_getRow).call(this, rowId);
+    const row = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_getRow).call(this, rowId);
     if (!row) {
       return;
     }
@@ -8809,7 +8809,7 @@ const KupDataTable = class {
     this.selectedRows = [];
     for (let index = 0; index < rowsIdentifiers.length; index++) {
       const id = rowsIdentifiers[index];
-      this.selectedRows.push(__classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_getRow).call(this, id));
+      this.selectedRows.push(__classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_getRow).call(this, id));
     }
     if (emitEvent !== false) {
       this.kupRowSelected.emit({
@@ -8823,12 +8823,12 @@ const KupDataTable = class {
   }
   //---- Lifecycle hooks ----
   componentWillLoad() {
-    __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").debug.logLoad(this, false);
-    __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.register(this);
-    __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").theme.register(this);
-    __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").toolbar.register(this.rootElement);
+    __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").debug.logLoad(this, false);
+    __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.register(this);
+    __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").theme.register(this);
+    __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").toolbar.register(this.rootElement);
     if (!this.emptyDataLabel) {
-      this.emptyDataLabel = __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.EMPTY_DATA);
+      this.emptyDataLabel = __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.EMPTY_DATA);
     }
     __classPrivateFieldSet$2(this, _KupDataTable_columnMenuInstance, new KupColumnMenu(), "f");
     __classPrivateFieldSet$2(this, _KupDataTable_filtersColumnMenuInstance, new FiltersColumnMenu(), "f");
@@ -8852,18 +8852,18 @@ const KupDataTable = class {
       __classPrivateFieldSet$2(this, _KupDataTable_navBarHeight, 0, "f");
     }
     if (document.querySelector('.topbar')) {
-      __classPrivateFieldSet$2(this, _KupDataTable_navBarHeight, __classPrivateFieldGet$3(this, _KupDataTable_navBarHeight, "f") + document.querySelector('.topbar').clientHeight, "f");
+      __classPrivateFieldSet$2(this, _KupDataTable_navBarHeight, __classPrivateFieldGet$4(this, _KupDataTable_navBarHeight, "f") + document.querySelector('.topbar').clientHeight, "f");
     }
-    __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_setObserver).call(this);
+    __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_setObserver).call(this);
     //this.recalculateRows();
     // Detects is the browser is Safari. If needed, this function can be moved into an external file and then imported into components
     __classPrivateFieldSet$2(this, _KupDataTable_isSafariBrowser, CSS.supports('position', '-webkit-sticky') ||
       !!(window && window.safari), "f");
-    __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_calculateData).call(this);
+    __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_calculateData).call(this);
     __classPrivateFieldSet$2(this, _KupDataTable_initialized, true, "f");
   }
   componentWillRender() {
-    __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").debug.logRender(this, false);
+    __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").debug.logRender(this, false);
   }
   componentDidRender() {
     const root = this.rootElement.shadowRoot;
@@ -8874,40 +8874,40 @@ const KupDataTable = class {
       }
     }
     if (this.showCustomization) {
-      __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_customizePanelPosition).call(this);
-    }
-    __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_totalMenuPosition).call(this);
-    __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_checkScrollOnHover).call(this);
-    __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_didRenderObservers).call(this);
-    __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_didRenderInteractables).call(this);
-    __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_hideShowColumnDropArea).call(this, false);
-    __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_setDynPosElements).call(this);
+      __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_customizePanelPosition).call(this);
+    }
+    __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_totalMenuPosition).call(this);
+    __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_checkScrollOnHover).call(this);
+    __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_didRenderObservers).call(this);
+    __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_didRenderInteractables).call(this);
+    __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_hideShowColumnDropArea).call(this, false);
+    __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_setDynPosElements).call(this);
     if (this.headerIsPersistent &&
       this.tableHeight === undefined &&
       this.tableWidth === undefined) {
-      __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_updateStickyHeaderSize).call(this);
+      __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_updateStickyHeaderSize).call(this);
     }
-    setTimeout(() => __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_updateFixedRowsAndColumnsCssVariables).call(this), 50);
+    setTimeout(() => __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_updateFixedRowsAndColumnsCssVariables).call(this), 50);
     // *** Store
     if (this.lazyLoadCells) {
       this.persistState();
     }
     // ***
     __classPrivateFieldSet$2(this, _KupDataTable_oldWidth, this.rootElement.clientWidth, "f");
-    __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").debug.logRender(this, true);
+    __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").debug.logRender(this, true);
   }
   componentDidLoad() {
-    __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_didLoadObservers).call(this);
-    __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_didLoadEventHandling).call(this);
-    __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_didLoadInteractables).call(this);
+    __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_didLoadObservers).call(this);
+    __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_didLoadEventHandling).call(this);
+    __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_didLoadInteractables).call(this);
     this.lazyLoadCells = true;
     this.kupDidLoad.emit({ comp: this, id: this.rootElement.id });
-    __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").resize.observe(this.rootElement);
-    __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").debug.logLoad(this, true);
+    __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").resize.observe(this.rootElement);
+    __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").debug.logLoad(this, true);
   }
   resetCurrentPage() {
     this.currentPage = 1;
-    __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_resetSelectedRows).call(this);
+    __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_resetSelectedRows).call(this);
   }
   getColumns() {
     return this.data && this.data.columns
@@ -8918,7 +8918,7 @@ const KupDataTable = class {
     // TODO: change into `visible ?? true` when TS dependency has been updated
     const visibleColumns = this.getColumns().filter(({ visible }) => visible !== undefined ? visible : true);
     // check grouping
-    if (__classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_isGrouping).call(this)) {
+    if (__classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_isGrouping).call(this)) {
       // filtering column based on group visibility
       return visibleColumns.filter((column) => {
         // check if in group
@@ -8942,7 +8942,7 @@ const KupDataTable = class {
     return visibleColumns;
   }
   getGroupByName(column) {
-    if (!__classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_isGrouping).call(this)) {
+    if (!__classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_isGrouping).call(this)) {
       return null;
     }
     for (let group of this.groups) {
@@ -8953,7 +8953,7 @@ const KupDataTable = class {
     return null;
   }
   getColumnValues(column) {
-    return __classPrivateFieldGet$3(this, _KupDataTable_filtersRowsInstance, "f").getColumnValues(this, column, this.globalFilterValue, __classPrivateFieldGet$3(this, _KupDataTable_filtersColumnMenuInstance, "f"));
+    return __classPrivateFieldGet$4(this, _KupDataTable_filtersRowsInstance, "f").getColumnValues(this, column, this.globalFilterValue, __classPrivateFieldGet$4(this, _KupDataTable_filtersColumnMenuInstance, "f"));
   }
   getRows() {
     return this.data && this.data.rows ? this.data.rows : [];
@@ -8968,7 +8968,7 @@ const KupDataTable = class {
   }
   async defaultSortingFunction(columns, receivingColumnIndex, sortedColumnIndex, useNewObject = false) {
     const toSort = !useNewObject ? columns : [...columns];
-    __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_moveSortedColumns).call(this, toSort, receivingColumnIndex, sortedColumnIndex);
+    __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_moveSortedColumns).call(this, toSort, receivingColumnIndex, sortedColumnIndex);
     return toSort;
   }
   areTotalsSelected(column) {
@@ -8976,7 +8976,7 @@ const KupDataTable = class {
   }
   onTotalsChange(event, column) {
     // close menu
-    __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_closeTotalMenu).call(this);
+    __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_closeTotalMenu).call(this);
     if (column) {
       // must do this
       // otherwise does not fire the watcher
@@ -8999,14 +8999,14 @@ const KupDataTable = class {
     let selectRowCell = null;
     if (this.selection === SelectionMode.MULTIPLE_CHECKBOX) {
       extraCells++;
-      const fixedCellStyle = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_composeFixedCellStyleAndClass).call(this, extraCells, 0, extraCells);
+      const fixedCellStyle = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_composeFixedCellStyleAndClass).call(this, extraCells, 0, extraCells);
       selectRowCell = (h("td", { class: fixedCellStyle ? fixedCellStyle.fixedCellClasses : null, style: fixedCellStyle ? fixedCellStyle.fixedCellStyle : null }));
     }
     // Action cell
     let actionsCell = null;
-    if (__classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_hasRowActions).call(this)) {
+    if (__classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_hasRowActions).call(this)) {
       extraCells++;
-      const selectionStyleAndClass = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_composeFixedCellStyleAndClass).call(this, extraCells, 0, extraCells);
+      const selectionStyleAndClass = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_composeFixedCellStyleAndClass).call(this, extraCells, 0, extraCells);
       actionsCell = (h("td", { class: selectionStyleAndClass
           ? selectionStyleAndClass.fixedCellClasses
           : {}, style: selectionStyleAndClass
@@ -9014,19 +9014,19 @@ const KupDataTable = class {
           : {} }));
     }
     const footerCells = this.getVisibleColumns().map((column, columnIndex) => {
-      const fixedCellStyle = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_composeFixedCellStyleAndClass).call(this, columnIndex + 1 + extraCells, 0, extraCells);
+      const fixedCellStyle = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_composeFixedCellStyleAndClass).call(this, columnIndex + 1 + extraCells, 0, extraCells);
       let totalMenu = undefined;
       let menuLabel = TotalLabel.CALC;
       const translation = {
-        [TotalLabel.AVERAGE]: __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageTotals.AVERAGE),
-        [TotalLabel.CALC]: __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageTotals.CALCULATE),
-        [TotalLabel.CANC]: __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageTotals.CANCEL),
-        [TotalLabel.COUNT]: __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageTotals.COUNT),
-        [TotalLabel.DISTINCT]: __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageTotals.DISTINCT),
-        [TotalLabel.MATH]: __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageTotals.FORMULA),
-        [TotalLabel.MAX]: __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageTotals.MAXIMUM),
-        [TotalLabel.MIN]: __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageTotals.MINIMUM),
-        [TotalLabel.SUM]: __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageTotals.SUM),
+        [TotalLabel.AVERAGE]: __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageTotals.AVERAGE),
+        [TotalLabel.CALC]: __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageTotals.CALCULATE),
+        [TotalLabel.CANC]: __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageTotals.CANCEL),
+        [TotalLabel.COUNT]: __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageTotals.COUNT),
+        [TotalLabel.DISTINCT]: __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageTotals.DISTINCT),
+        [TotalLabel.MATH]: __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageTotals.FORMULA),
+        [TotalLabel.MAX]: __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageTotals.MAXIMUM),
+        [TotalLabel.MIN]: __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageTotals.MINIMUM),
+        [TotalLabel.SUM]: __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageTotals.SUM),
       };
       if (this.totals) {
         const totalValue = this.totals[column.name];
@@ -9058,7 +9058,7 @@ const KupDataTable = class {
           }
         }
       }
-      if (__classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_isOpenedTotalMenuForColumn).call(this, column.name)) {
+      if (__classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_isOpenedTotalMenuForColumn).call(this, column.name)) {
         const listData = [
           {
             id: TotalMode.COUNT,
@@ -9069,7 +9069,7 @@ const KupDataTable = class {
             value: translation[TotalLabel.DISTINCT],
           },
         ];
-        if (__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.isNumber(column.obj)) {
+        if (__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.isNumber(column.obj)) {
           // TODO Move these objects in declarations
           listData.push({
             id: TotalMode.SUM,
@@ -9086,7 +9086,7 @@ const KupDataTable = class {
             value: translation[TotalLabel.MAX],
           });
         }
-        else if (__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.isDate(column.obj)) {
+        else if (__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.isDate(column.obj)) {
           listData.push({
             id: TotalMode.MIN,
             separator: true,
@@ -9111,14 +9111,14 @@ const KupDataTable = class {
       }
       // TODO please use getValueForDisplay
       let value;
-      const footerValue = __classPrivateFieldGet$3(this, _KupDataTable_footer, "f")[column.name];
+      const footerValue = __classPrivateFieldGet$4(this, _KupDataTable_footer, "f")[column.name];
       if (menuLabel === TotalLabel.COUNT ||
         menuLabel === TotalLabel.DISTINCT) {
         value = footerValue;
       }
       else if ((menuLabel === TotalLabel.MAX ||
         menuLabel === TotalLabel.MIN) &&
-        __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.isDate(column.obj)) {
+        __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.isDate(column.obj)) {
         if (footerValue) {
           value = footerValue;
         }
@@ -9142,38 +9142,38 @@ const KupDataTable = class {
     let transpose = undefined;
     let totalsMatrix = undefined;
     if (this.openedCustomSettings) {
-      density = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_renderDensityPanel).call(this);
-      fontsize = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_renderFontSizePanel).call(this);
-      grid = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_renderGridPanel).call(this);
-      transpose = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_renderTransposeSwitch).call(this);
+      density = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_renderDensityPanel).call(this);
+      fontsize = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_renderFontSizePanel).call(this);
+      grid = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_renderGridPanel).call(this);
+      transpose = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_renderTransposeSwitch).call(this);
       if (this.totals && this.groups.length > 0) {
-        totalsMatrix = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_renderTotalsMatrix).call(this);
+        totalsMatrix = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_renderTotalsMatrix).call(this);
       }
     }
     return (h("kup-card", { customStyle: "::slotted(kup-switch) { width: max-content !important; } ::slotted(*) { margin: auto !important; } ::slotted(.customize-element) { margin: auto !important; padding: 0 1em 1em 1em !important; width: max-content !important; } ::slotted(.customize-element):nth-child(1) { padding-top: 1em !important; }", isMenu: true, layoutFamily: KupCardFamily.FREE, ref: (el) => {
         __classPrivateFieldSet$2(this, _KupDataTable_customizeTopPanelRef, el, "f");
-      }, sizeX: "360px", sizeY: "300px" }, density, grid, fontsize, transpose, h("kup-switch", { class: "customize-element", checked: this.dragEnabled, label: __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.DRAG_AND_DROP), leadingLabel: true, "onkup-switch-change": () => (this.dragEnabled = !this.dragEnabled) }), h("kup-switch", { class: "customize-element", checked: this.editableData, label: __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.EDITABLE), leadingLabel: true, "onkup-switch-change": () => (this.editableData = !this.editableData) }), h("kup-button", { title: __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.TOGGLE) +
+      }, sizeX: "360px", sizeY: "300px" }, density, grid, fontsize, transpose, h("kup-switch", { class: "customize-element", checked: this.dragEnabled, label: __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.DRAG_AND_DROP), leadingLabel: true, "onkup-switch-change": () => (this.dragEnabled = !this.dragEnabled) }), h("kup-switch", { class: "customize-element", checked: this.editableData, label: __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.EDITABLE), leadingLabel: true, "onkup-switch-change": () => (this.editableData = !this.editableData) }), h("kup-button", { title: __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.TOGGLE) +
         ' Magic Box ' +
         '(' +
-        __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.EXPERIMENTAL_FEAT) +
-        ')', icon: "auto-fix", "onkup-button-click": () => __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").toggleMagicBox() }), totalsMatrix));
+        __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.EXPERIMENTAL_FEAT) +
+        ')', icon: "auto-fix", "onkup-button-click": () => __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").toggleMagicBox() }), totalsMatrix));
   }
   render() {
     __classPrivateFieldSet$2(this, _KupDataTable_thRefs, [], "f");
     __classPrivateFieldSet$2(this, _KupDataTable_rowsRefs, [], "f");
     __classPrivateFieldSet$2(this, _KupDataTable_renderedRows, [], "f");
     let elStyle = undefined;
-    __classPrivateFieldSet$2(this, _KupDataTable_sizedColumns, __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_getSizedColumns).call(this), "f");
+    __classPrivateFieldSet$2(this, _KupDataTable_sizedColumns, __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_getSizedColumns).call(this), "f");
     let rows = null;
-    if (__classPrivateFieldGet$3(this, _KupDataTable_paginatedRowsLength, "f") === 0) {
-      rows = (h("tr", { ref: (el) => __classPrivateFieldGet$3(this, _KupDataTable_rowsRefs, "f").push(el) }, h("td", { colSpan: __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_calculateColspan).call(this) }, this.emptyDataLabel)));
+    if (__classPrivateFieldGet$4(this, _KupDataTable_paginatedRowsLength, "f") === 0) {
+      rows = (h("tr", { ref: (el) => __classPrivateFieldGet$4(this, _KupDataTable_rowsRefs, "f").push(el) }, h("td", { colSpan: __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_calculateColspan).call(this) }, this.emptyDataLabel)));
     }
     else {
       rows = [];
-      __classPrivateFieldGet$3(this, _KupDataTable_paginatedRows, "f")
+      __classPrivateFieldGet$4(this, _KupDataTable_paginatedRows, "f")
         // We must pass the previous element of the array to check if we must hide or display the value of the cell
         // When the column has specified the parameter hideValuesRepetitions
-        .map((row, rowIndex, currentArray) => __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_renderRow).call(this, row, 0, rowIndex + 1, rowIndex > 0 ? currentArray[rowIndex - 1] : null))
+        .map((row, rowIndex, currentArray) => __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_renderRow).call(this, row, 0, rowIndex + 1, rowIndex > 0 ? currentArray[rowIndex - 1] : null))
         .forEach((jsxRow) => {
         if (Array.isArray(jsxRow)) {
           jsxRow.forEach((jr) => rows.push(jr));
@@ -9185,24 +9185,24 @@ const KupDataTable = class {
     }
     // header
     // for multi selection purposes, this should be called before this.renderedRows has been evaluated
-    const header = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_renderHeader).call(this);
-    const stickyHeader = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_renderStickyHeader).call(this);
+    const header = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_renderHeader).call(this);
+    const stickyHeader = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_renderStickyHeader).call(this);
     let paginatorTop = undefined;
     let paginatorBottom = undefined;
-    if ((!this.lazyLoadRows && __classPrivateFieldGet$3(this, _KupDataTable_rowsLength, "f") > this.rowsPerPage) ||
+    if ((!this.lazyLoadRows && __classPrivateFieldGet$4(this, _KupDataTable_rowsLength, "f") > this.rowsPerPage) ||
       this.showCustomization ||
       this.showLoadMore) {
       if (PaginatorPos.TOP === this.paginatorPos ||
         PaginatorPos.BOTH === this.paginatorPos) {
-        paginatorTop = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_renderPaginator).call(this, true);
+        paginatorTop = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_renderPaginator).call(this, true);
       }
       if (PaginatorPos.BOTTOM === this.paginatorPos ||
         PaginatorPos.BOTH === this.paginatorPos) {
-        paginatorBottom = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_renderPaginator).call(this, false);
+        paginatorBottom = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_renderPaginator).call(this, false);
       }
     }
     let groupChips = null;
-    if (__classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_isGrouping).call(this)) {
+    if (__classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_isGrouping).call(this)) {
       const chipsData = [];
       for (let index = 0; index < this.groups.length; index++) {
         const group = this.groups[index];
@@ -9215,7 +9215,7 @@ const KupDataTable = class {
           });
         }
         else {
-          __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").debug.logMessage(this, 'Grouped for a non-existent column! (' +
+          __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").debug.logMessage(this, 'Grouped for a non-existent column! (' +
             group.column +
             ')', KupDebugCategory.WARNING);
         }
@@ -9228,7 +9228,7 @@ const KupDataTable = class {
           onIconClick: [],
         };
         for (let i = 0; i < chipsData.length; i++) {
-          props.onIconClick.push(() => __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_removeGroup).call(this, i));
+          props.onIconClick.push(() => __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_removeGroup).call(this, i));
         }
         groupChips = h(FChip, Object.assign({}, props));
       }
@@ -9236,7 +9236,7 @@ const KupDataTable = class {
     const tableClass = {
       // Class to specify whether the table should have width: auto or not.
       // Mandatory to check with custom column size.
-      'auto-width': __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_tableHasAutoWidth).call(this),
+      'auto-width': __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_tableHasAutoWidth).call(this),
       'column-separation': ShowGrid.COMPLETE === this.showGrid ||
         ShowGrid.COL === this.showGrid,
       // When there are columns with a specified width, we must add table-layout: fixed to force the table to respect them
@@ -9286,17 +9286,17 @@ const KupDataTable = class {
         }
       }
     };
-    const compCreated = (h(Host, { "onKup-cell-input": autoselectOnAction, "onKup-cell-update": autoselectOnAction }, h("style", null, __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, h("div", { class: "above-wrapper" }, this.globalFilter ? (h("div", { id: "global-filter" }, h(FTextField, { fullWidth: true, icon: KupThemeIconValues.SEARCH, label: __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), value: this.globalFilterValue, onInput: (event) => {
+    const compCreated = (h(Host, { "onKup-cell-input": autoselectOnAction, "onKup-cell-update": autoselectOnAction }, h("style", null, __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, h("div", { class: "above-wrapper" }, this.globalFilter ? (h("div", { id: "global-filter" }, h(FTextField, { fullWidth: true, icon: KupThemeIconValues.SEARCH, label: __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), value: this.globalFilterValue, onInput: (event) => {
         const t = event.target;
-        window.clearTimeout(__classPrivateFieldGet$3(this, _KupDataTable_globalFilterTimeout, "f"));
-        __classPrivateFieldSet$2(this, _KupDataTable_globalFilterTimeout, window.setTimeout(() => __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_onGlobalFilterChange).call(this, t), 600, t), "f");
+        window.clearTimeout(__classPrivateFieldGet$4(this, _KupDataTable_globalFilterTimeout, "f"));
+        __classPrivateFieldSet$2(this, _KupDataTable_globalFilterTimeout, window.setTimeout(() => __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_onGlobalFilterChange).call(this, t), 600, t), "f");
       } }))) : null, paginatorTop), h("div", { class: "group-wrapper" }, groupChips), h("div", { class: "actions-wrapper" }, this.insertMode !== '' ? (h(FButton, { icon: "plus", onClick: async () => {
         var _a;
         if (this.insertMode === 'form') {
-          __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_rowInsertForm).call(this);
+          __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_rowInsertForm).call(this);
         }
         else {
-          __classPrivateFieldSet$2(this, _KupDataTable_insertCount, (_a = __classPrivateFieldGet$3(this, _KupDataTable_insertCount, "f"), _a++, _a), "f");
+          __classPrivateFieldSet$2(this, _KupDataTable_insertCount, (_a = __classPrivateFieldGet$4(this, _KupDataTable_insertCount, "f"), _a++, _a), "f");
           const cells = {};
           for (let index = 0; index < this.data.columns.length; index++) {
             const column = this.data.columns[index];
@@ -9310,8 +9310,8 @@ const KupDataTable = class {
           }
           const row = {
             cells,
-            id: __classPrivateFieldGet$3(this, _KupDataTable_INSERT_PREFIX, "f") +
-              __classPrivateFieldGet$3(this, _KupDataTable_insertCount, "f"),
+            id: __classPrivateFieldGet$4(this, _KupDataTable_INSERT_PREFIX, "f") +
+              __classPrivateFieldGet$4(this, _KupDataTable_insertCount, "f"),
           };
           this.data.rows.unshift(row);
           await this.refresh(true);
@@ -9325,13 +9325,13 @@ const KupDataTable = class {
         });
       }, styling: FButtonStyling.OUTLINED, title: "Save", wrapperClass: "save-button" })) : null, this.showDeleteButton &&
       this.selectedRows.length > 0 ? (h(FButton, { icon: "delete", onClick: () => {
-        __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_rowsDelete).call(this);
-      }, styling: FButtonStyling.OUTLINED, title: "Delete selected rows", wrapperClass: "delete-button" })) : null), h("div", { class: "droparea", ref: (el) => (__classPrivateFieldSet$2(this, _KupDataTable_dropareaRef, el, "f")) }, this.showGroups ? __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_columnGroupArea).call(this) : null, this.removableColumns
-      ? __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_columnRemoveArea).call(this)
+        __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_rowsDelete).call(this);
+      }, styling: FButtonStyling.OUTLINED, title: "Delete selected rows", wrapperClass: "delete-button" })) : null), h("div", { class: "droparea", ref: (el) => (__classPrivateFieldSet$2(this, _KupDataTable_dropareaRef, el, "f")) }, this.showGroups ? __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_columnGroupArea).call(this) : null, this.removableColumns
+      ? __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_columnRemoveArea).call(this)
       : null), h("div", { style: elStyle, class: belowClass, ref: (el) => (__classPrivateFieldSet$2(this, _KupDataTable_tableAreaRef, el, "f")) }, this.showCustomization
       ? [
         h("div", { class: "settings-trigger", onClick: () => {
-            __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_onCustomSettingsClick).call(this);
+            __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_onCustomSettingsClick).call(this);
           }, ref: (el) => {
             __classPrivateFieldSet$2(this, _KupDataTable_customizeTopButtonRef, el, "f");
           } }, h(FImage, { color: `var(${KupThemeColorValues.TITLE})`, resource: "settings", sizeX: "10px" })),
@@ -9341,29 +9341,29 @@ const KupDataTable = class {
         ev.stopPropagation();
       }, onContextMenu: (e) => {
         e.preventDefault();
-      } }, h("thead", { hidden: !this.showHeader, ref: (el) => (__classPrivateFieldSet$2(this, _KupDataTable_theadRef, el, "f")) }, h("tr", null, header)), h("tbody", null, rows), this.showFooter || __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_hasTotals).call(this)
+      } }, h("thead", { hidden: !this.showHeader, ref: (el) => (__classPrivateFieldSet$2(this, _KupDataTable_theadRef, el, "f")) }, h("tr", null, header)), h("tbody", null, rows), this.showFooter || __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_hasTotals).call(this)
       ? this.renderFooter()
       : null), stickyEl), paginatorBottom)));
     return compCreated;
   }
   disconnectedCallback() {
-    __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").interact.unregister(__classPrivateFieldGet$3(this, _KupDataTable_interactableDrag, "f").concat(__classPrivateFieldGet$3(this, _KupDataTable_interactableDrop, "f"), __classPrivateFieldGet$3(this, _KupDataTable_interactableResize, "f"), __classPrivateFieldGet$3(this, _KupDataTable_interactableTouch, "f")));
-    __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.unregister(this);
-    __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").theme.unregister(this);
+    __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").interact.unregister(__classPrivateFieldGet$4(this, _KupDataTable_interactableDrag, "f").concat(__classPrivateFieldGet$4(this, _KupDataTable_interactableDrop, "f"), __classPrivateFieldGet$4(this, _KupDataTable_interactableResize, "f"), __classPrivateFieldGet$4(this, _KupDataTable_interactableTouch, "f")));
+    __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.unregister(this);
+    __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").theme.unregister(this);
     const dynamicPositionElements = this.rootElement.shadowRoot.querySelectorAll('[' + kupDynamicPositionAttribute + ']');
     if (dynamicPositionElements.length > 0) {
-      __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").dynamicPosition.unregister(Array.prototype.slice.call(dynamicPositionElements));
+      __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").dynamicPosition.unregister(Array.prototype.slice.call(dynamicPositionElements));
     }
-    if (__classPrivateFieldGet$3(this, _KupDataTable_customizeTopPanelRef, "f")) {
-      __classPrivateFieldGet$3(this, _KupDataTable_customizeTopPanelRef, "f").remove();
+    if (__classPrivateFieldGet$4(this, _KupDataTable_customizeTopPanelRef, "f")) {
+      __classPrivateFieldGet$4(this, _KupDataTable_customizeTopPanelRef, "f").remove();
     }
-    if (__classPrivateFieldGet$3(this, _KupDataTable_columnMenuCard, "f")) {
-      __classPrivateFieldGet$3(this, _KupDataTable_columnMenuCard, "f").remove();
+    if (__classPrivateFieldGet$4(this, _KupDataTable_columnMenuCard, "f")) {
+      __classPrivateFieldGet$4(this, _KupDataTable_columnMenuCard, "f").remove();
     }
     if (this.scrollOnHover) {
-      __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").scrollOnHover.unregister(__classPrivateFieldGet$3(this, _KupDataTable_tableAreaRef, "f"));
+      __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").scrollOnHover.unregister(__classPrivateFieldGet$4(this, _KupDataTable_tableAreaRef, "f"));
     }
-    __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").resize.unobserve(this.rootElement);
+    __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").resize.unobserve(this.rootElement);
     this.kupDidUnload.emit({ comp: this, id: this.rootElement.id });
   }
   get rootElement() { return getElement$1(this); }
@@ -9384,16 +9384,16 @@ const KupDataTable = class {
   }; }
 };
 _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _KupDataTable_rowsLength = new WeakMap(), _KupDataTable_paginatedRows = new WeakMap(), _KupDataTable_paginatedRowsLength = new WeakMap(), _KupDataTable_footer = new WeakMap(), _KupDataTable_kupManager = new WeakMap(), _KupDataTable_renderedRows = new WeakMap(), _KupDataTable_loadMoreEventCounter = new WeakMap(), _KupDataTable_loadMoreEventPreviousQuantity = new WeakMap(), _KupDataTable_theadRef = new WeakMap(), _KupDataTable_tableRef = new WeakMap(), _KupDataTable_originalData = new WeakMap(), _KupDataTable_tableAreaRef = new WeakMap(), _KupDataTable_stickyTheadRef = new WeakMap(), _KupDataTable_customizeTopButtonRef = new WeakMap(), _KupDataTable_customizeTopPanelRef = new WeakMap(), _KupDataTable_sizedColumns = new WeakMap(), _KupDataTable_intObserver = new WeakMap(), _KupDataTable_navBarHeight = new WeakMap(), _KupDataTable_theadIntersecting = new WeakMap(), _KupDataTable_tableIntersecting = new WeakMap(), _KupDataTable_isSafariBrowser = new WeakMap(), _KupDataTable_isRestoringState = new WeakMap(), _KupDataTable_globalFilterTimeout = new WeakMap(), _KupDataTable_totalMenuCoords = new WeakMap(), _KupDataTable_clickTimeout = new WeakMap(), _KupDataTable_thRefs = new WeakMap(), _KupDataTable_rowsRefs = new WeakMap(), _KupDataTable_oldWidth = new WeakMap(), _KupDataTable_hold = new WeakMap(), _KupDataTable_interactableDrag = new WeakMap(), _KupDataTable_interactableDrop = new WeakMap(), _KupDataTable_interactableResize = new WeakMap(), _KupDataTable_interactableTouch = new WeakMap(), _KupDataTable_dropareaRef = new WeakMap(), _KupDataTable_removeDropareaRef = new WeakMap(), _KupDataTable_groupsDropareaRef = new WeakMap(), _KupDataTable_clickCb = new WeakMap(), _KupDataTable_clickCbCustomPanel = new WeakMap(), _KupDataTable_clickCbDropCard = new WeakMap(), _KupDataTable_resizeTimeout = new WeakMap(), _KupDataTable_columnMenuInstance = new WeakMap(), _KupDataTable_filtersColumnMenuInstance = new WeakMap(), _KupDataTable_filtersRowsInstance = new WeakMap(), _KupDataTable_detailCard = new WeakMap(), _KupDataTable_insertCard = new WeakMap(), _KupDataTable_confirmDeleteCard = new WeakMap(), _KupDataTable_confirmDeleteDialog = new WeakMap(), _KupDataTable_columnMenuCard = new WeakMap(), _KupDataTable_columnDropCard = new WeakMap(), _KupDataTable_columnDropCardAnchor = new WeakMap(), _KupDataTable_insertCount = new WeakMap(), _KupDataTable_BUTTON_CANCEL_ID = new WeakMap(), _KupDataTable_BUTTON_SUBMIT_ID = new WeakMap(), _KupDataTable_FIELDS_FORM_ID = new WeakMap(), _KupDataTable_MESSAGE_ID = new WeakMap(), _KupDataTable_MESSAGE_WRAPPER_ID = new WeakMap(), _KupDataTable_INSERT_PREFIX = new WeakMap(), _KupDataTable_stickyHeaderPosition = new WeakMap(), _KupDataTable_FONTSIZE_CODES = new WeakMap(), _KupDataTable_FONTSIZE_DECODES = new WeakMap(), _KupDataTable_FONTSIZE_ICONS = new WeakMap(), _KupDataTable_DENSITY_DECODES = new WeakMap(), _KupDataTable_DENSITY_ICONS = new WeakMap(), _KupDataTable_GRID_CODES = new WeakMap(), _KupDataTable_GRID_DECODES = new WeakMap(), _KupDataTable_GRID_ICONS = new WeakMap(), _KupDataTable_instances = new WeakSet(), _KupDataTable_closeDropCard = function _KupDataTable_closeDropCard() {
-  __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").dynamicPosition.stop(__classPrivateFieldGet$3(this, _KupDataTable_columnDropCard, "f"));
-  __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").removeClickCallback(__classPrivateFieldGet$3(this, _KupDataTable_clickCbDropCard, "f"));
-  __classPrivateFieldGet$3(this, _KupDataTable_columnDropCard, "f").remove();
+  __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").dynamicPosition.stop(__classPrivateFieldGet$4(this, _KupDataTable_columnDropCard, "f"));
+  __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").removeClickCallback(__classPrivateFieldGet$4(this, _KupDataTable_clickCbDropCard, "f"));
+  __classPrivateFieldGet$4(this, _KupDataTable_columnDropCard, "f").remove();
   __classPrivateFieldSet$2(this, _KupDataTable_columnDropCard, null, "f");
 }, _KupDataTable_createDropCard = function _KupDataTable_createDropCard(starter, receiving) {
-  if (__classPrivateFieldGet$3(this, _KupDataTable_columnDropCard, "f")) {
-    __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_closeDropCard).call(this);
+  if (__classPrivateFieldGet$4(this, _KupDataTable_columnDropCard, "f")) {
+    __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_closeDropCard).call(this);
   }
   __classPrivateFieldSet$2(this, _KupDataTable_columnDropCard, document.createElement('kup-card'), "f");
-  __classPrivateFieldGet$3(this, _KupDataTable_columnDropCard, "f").data = {
+  __classPrivateFieldGet$4(this, _KupDataTable_columnDropCard, "f").data = {
     options: {
       data: this.data,
       enableFormula: this.enableColumnsFormula,
@@ -9402,46 +9402,46 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
       receivingColumn: receiving,
       starterColumn: starter,
       formulaCb: () => {
-        __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_closeDropCard).call(this);
+        __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_closeDropCard).call(this);
         this.refresh();
       },
       mergeCb: () => {
         this.newColumn(KupDataNewColumnTypes.CONCATENATE, {
           columns: [receiving.name, starter.name],
         });
-        __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_closeDropCard).call(this);
+        __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_closeDropCard).call(this);
       },
       moveCb: () => {
-        __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_handleColumnSort).call(this, receiving, starter);
-        __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_closeDropCard).call(this);
+        __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_handleColumnSort).call(this, receiving, starter);
+        __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_closeDropCard).call(this);
       },
     },
   };
-  __classPrivateFieldGet$3(this, _KupDataTable_columnDropCard, "f").layoutFamily = KupCardFamily.BUILT_IN;
-  __classPrivateFieldGet$3(this, _KupDataTable_columnDropCard, "f").layoutNumber = 3;
-  __classPrivateFieldGet$3(this, _KupDataTable_columnDropCard, "f").isMenu = true;
-  __classPrivateFieldGet$3(this, _KupDataTable_columnDropCard, "f").sizeX = '280px';
-  __classPrivateFieldGet$3(this, _KupDataTable_columnDropCard, "f").sizeY = 'auto';
-  __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").dynamicPosition.register(__classPrivateFieldGet$3(this, _KupDataTable_columnDropCard, "f"), __classPrivateFieldGet$3(this, _KupDataTable_columnDropCardAnchor, "f"), 0, KupDynamicPositionPlacement.AUTO, true);
-  __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").dynamicPosition.start(__classPrivateFieldGet$3(this, _KupDataTable_columnDropCard, "f"));
+  __classPrivateFieldGet$4(this, _KupDataTable_columnDropCard, "f").layoutFamily = KupCardFamily.BUILT_IN;
+  __classPrivateFieldGet$4(this, _KupDataTable_columnDropCard, "f").layoutNumber = 3;
+  __classPrivateFieldGet$4(this, _KupDataTable_columnDropCard, "f").isMenu = true;
+  __classPrivateFieldGet$4(this, _KupDataTable_columnDropCard, "f").sizeX = '280px';
+  __classPrivateFieldGet$4(this, _KupDataTable_columnDropCard, "f").sizeY = 'auto';
+  __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").dynamicPosition.register(__classPrivateFieldGet$4(this, _KupDataTable_columnDropCard, "f"), __classPrivateFieldGet$4(this, _KupDataTable_columnDropCardAnchor, "f"), 0, KupDynamicPositionPlacement.AUTO, true);
+  __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").dynamicPosition.start(__classPrivateFieldGet$4(this, _KupDataTable_columnDropCard, "f"));
   __classPrivateFieldSet$2(this, _KupDataTable_clickCbDropCard, {
     cb: () => {
-      __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_closeDropCard).call(this);
+      __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_closeDropCard).call(this);
     },
-    el: __classPrivateFieldGet$3(this, _KupDataTable_columnDropCard, "f"),
+    el: __classPrivateFieldGet$4(this, _KupDataTable_columnDropCard, "f"),
   }, "f");
-  __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").addClickCallback(__classPrivateFieldGet$3(this, _KupDataTable_clickCbDropCard, "f"), true);
-  __classPrivateFieldGet$3(this, _KupDataTable_columnDropCard, "f").menuVisible = true;
+  __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").addClickCallback(__classPrivateFieldGet$4(this, _KupDataTable_clickCbDropCard, "f"), true);
+  __classPrivateFieldGet$4(this, _KupDataTable_columnDropCard, "f").menuVisible = true;
 }, _KupDataTable_calculateData = function _KupDataTable_calculateData() {
   if (!this.transpose) {
     // restore
-    if (__classPrivateFieldGet$3(this, _KupDataTable_originalData, "f")) {
-      this.data = Object.assign({}, __classPrivateFieldGet$3(this, _KupDataTable_originalData, "f"));
+    if (__classPrivateFieldGet$4(this, _KupDataTable_originalData, "f")) {
+      this.data = Object.assign({}, __classPrivateFieldGet$4(this, _KupDataTable_originalData, "f"));
     }
   }
   else {
     // transpose
-    __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_setTransposedData).call(this);
+    __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_setTransposedData).call(this);
   }
 }, _KupDataTable_getRow = function _KupDataTable_getRow(id) {
   let row = null;
@@ -9458,26 +9458,26 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
       row = rows.find((row) => row.id === id);
     }
   };
-  if (__classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_isGrouping).call(this) && typeof id === 'string') {
-    __classPrivateFieldGet$3(this, _KupDataTable_paginatedRows, "f").forEach((row) => search(row.group.children));
+  if (__classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_isGrouping).call(this) && typeof id === 'string') {
+    __classPrivateFieldGet$4(this, _KupDataTable_paginatedRows, "f").forEach((row) => search(row.group.children));
   }
   else {
-    test(__classPrivateFieldGet$3(this, _KupDataTable_rows, "f"));
+    test(__classPrivateFieldGet$4(this, _KupDataTable_rows, "f"));
   }
   return row;
 }, _KupDataTable_getTransposedData = function _KupDataTable_getTransposedData(column) {
   if (column) {
     this.filters = {};
   }
-  return __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").data.transpose(this.data, column);
+  return __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").data.transpose(this.data, column);
 }, _KupDataTable_setTransposedData = function _KupDataTable_setTransposedData() {
   // transpose
   __classPrivateFieldSet$2(this, _KupDataTable_originalData, Object.assign({}, this.data), "f");
   if (this.data.columns.length > 0) {
-    this.data = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_getTransposedData).call(this, this.data.columns[0].name);
+    this.data = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_getTransposedData).call(this, this.data.columns[0].name);
   }
 }, _KupDataTable_switchToTotalsMatrix = function _KupDataTable_switchToTotalsMatrix() {
-  if (__classPrivateFieldGet$3(this, _KupDataTable_rows, "f").length === 0 || !__classPrivateFieldGet$3(this, _KupDataTable_rows, "f")[0].group)
+  if (__classPrivateFieldGet$4(this, _KupDataTable_rows, "f").length === 0 || !__classPrivateFieldGet$4(this, _KupDataTable_rows, "f")[0].group)
     return;
   // calc totals matrix data
   const totalsMatrixData = {};
@@ -9485,9 +9485,9 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
   // note that the sorting of the columns depends on the totals selection
   // the first column is the one that is selected first in the totals, and so on...
   const ids = [];
-  ids.push(__classPrivateFieldGet$3(this, _KupDataTable_rows, "f")[0].group.column);
-  Object.keys(__classPrivateFieldGet$3(this, _KupDataTable_rows, "f")[0].group.totals).forEach((columnKey) => {
-    if (__classPrivateFieldGet$3(this, _KupDataTable_rows, "f")[0].group.column !== columnKey)
+  ids.push(__classPrivateFieldGet$4(this, _KupDataTable_rows, "f")[0].group.column);
+  Object.keys(__classPrivateFieldGet$4(this, _KupDataTable_rows, "f")[0].group.totals).forEach((columnKey) => {
+    if (__classPrivateFieldGet$4(this, _KupDataTable_rows, "f")[0].group.column !== columnKey)
       ids.push(columnKey);
   });
   // calc columns
@@ -9517,7 +9517,7 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
                 totalMode + ' ' + currentColumn.title;
             }
           }
-          __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_setObjForTotalsMatrix).call(this, currentColumn, this.totals);
+          __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_setObjForTotalsMatrix).call(this, currentColumn, this.totals);
         }
         totalsMatrixColumns.push(currentColumn);
       }
@@ -9528,15 +9528,15 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
   // calc rows
   const totalsMatrixRows = [];
   let index = 0;
-  __classPrivateFieldGet$3(this, _KupDataTable_rows, "f").forEach((row) => {
+  __classPrivateFieldGet$4(this, _KupDataTable_rows, "f").forEach((row) => {
     const cells = {};
     ids.forEach((id) => {
       let totalValue = row.group.totals[id];
       if (!totalValue) {
         totalValue = row.group.id;
       }
-      if (__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").dates.isValid(totalValue, KupDatesFormats.ISO_DATE)) {
-        totalValue = __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").dates.format(totalValue);
+      if (__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").dates.isValid(totalValue, KupDatesFormats.ISO_DATE)) {
+        totalValue = __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").dates.format(totalValue);
       }
       cells[id] = {
         value: String(totalValue),
@@ -9576,13 +9576,13 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
 }, _KupDataTable_setObjForTotalsMatrix = function _KupDataTable_setObjForTotalsMatrix(column, totals) {
   const obj = column.obj;
   const totalMode = totals[column.name];
-  if (__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.isDate(obj)) {
+  if (__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.isDate(obj)) {
     // check if min or max totals mode
     if (totalMode === TotalMode.MAX || totalMode === TotalMode.MIN) {
       return;
     }
   }
-  else if (__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.isNumber(obj)) {
+  else if (__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.isNumber(obj)) {
     // check if percentage
     if (obj.p && obj.p.toUpperCase() === 'P') {
       if (totalMode !== TotalMode.COUNT &&
@@ -9610,14 +9610,14 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     __classPrivateFieldSet$2(this, _KupDataTable_navBarHeight, 0, "f");
   }
   if (topBar) {
-    __classPrivateFieldSet$2(this, _KupDataTable_navBarHeight, __classPrivateFieldGet$3(this, _KupDataTable_navBarHeight, "f") + topBar.clientHeight, "f");
-  }
-  if (__classPrivateFieldGet$3(this, _KupDataTable_stickyTheadRef, "f")) {
-    __classPrivateFieldGet$3(this, _KupDataTable_stickyTheadRef, "f").style.top = __classPrivateFieldGet$3(this, _KupDataTable_navBarHeight, "f") + 'px';
-    const widthTable = __classPrivateFieldGet$3(this, _KupDataTable_tableAreaRef, "f").offsetWidth;
-    __classPrivateFieldGet$3(this, _KupDataTable_stickyTheadRef, "f").style.maxWidth = widthTable + 'px';
-    const thCollection = __classPrivateFieldGet$3(this, _KupDataTable_theadRef, "f").querySelectorAll('th');
-    const thStickyCollection = __classPrivateFieldGet$3(this, _KupDataTable_stickyTheadRef, "f").querySelectorAll('th-sticky');
+    __classPrivateFieldSet$2(this, _KupDataTable_navBarHeight, __classPrivateFieldGet$4(this, _KupDataTable_navBarHeight, "f") + topBar.clientHeight, "f");
+  }
+  if (__classPrivateFieldGet$4(this, _KupDataTable_stickyTheadRef, "f")) {
+    __classPrivateFieldGet$4(this, _KupDataTable_stickyTheadRef, "f").style.top = __classPrivateFieldGet$4(this, _KupDataTable_navBarHeight, "f") + 'px';
+    const widthTable = __classPrivateFieldGet$4(this, _KupDataTable_tableAreaRef, "f").offsetWidth;
+    __classPrivateFieldGet$4(this, _KupDataTable_stickyTheadRef, "f").style.maxWidth = widthTable + 'px';
+    const thCollection = __classPrivateFieldGet$4(this, _KupDataTable_theadRef, "f").querySelectorAll('th');
+    const thStickyCollection = __classPrivateFieldGet$4(this, _KupDataTable_stickyTheadRef, "f").querySelectorAll('th-sticky');
     for (let i = 0; i < thCollection.length; i++) {
       const widthTH = thCollection[i].offsetWidth;
       thStickyCollection[i].style.width = widthTH + 'px';
@@ -9628,8 +9628,8 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     entries.forEach((entry) => {
       if (entry.target.tagName === 'TR') {
         if (entry.isIntersecting) {
-          __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").debug.logMessage(this, 'Last row entering the viewport, loading more elements.');
-          const delta = __classPrivateFieldGet$3(this, _KupDataTable_rows, "f").length - this.currentRowsPerPage;
+          __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").debug.logMessage(this, 'Last row entering the viewport, loading more elements.');
+          const delta = __classPrivateFieldGet$4(this, _KupDataTable_rows, "f").length - this.currentRowsPerPage;
           if (delta < this.loadMoreStep) {
             this.currentRowsPerPage += delta;
           }
@@ -9643,7 +9643,7 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
         if (entry.isIntersecting) {
           __classPrivateFieldSet$2(this, _KupDataTable_theadIntersecting, true, "f");
         }
-        else if (entry.boundingClientRect.bottom > __classPrivateFieldGet$3(this, _KupDataTable_navBarHeight, "f")) {
+        else if (entry.boundingClientRect.bottom > __classPrivateFieldGet$4(this, _KupDataTable_navBarHeight, "f")) {
           //If the thead is not intersecting but it still is inside the viewport, is to be considered intersected
           __classPrivateFieldSet$2(this, _KupDataTable_theadIntersecting, true, "f");
         }
@@ -9662,19 +9662,19 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
       if (this.tableHeight === undefined &&
         this.tableWidth === undefined &&
         this.headerIsPersistent) {
-        __classPrivateFieldGet$3(this, _KupDataTable_stickyHeaderPosition, "f").call(this);
+        __classPrivateFieldGet$4(this, _KupDataTable_stickyHeaderPosition, "f").call(this);
       }
     });
   };
   const options = {
     threshold: 0,
-    rootMargin: '-' + __classPrivateFieldGet$3(this, _KupDataTable_navBarHeight, "f") + 'px 0px 0px 0px',
+    rootMargin: '-' + __classPrivateFieldGet$4(this, _KupDataTable_navBarHeight, "f") + 'px 0px 0px 0px',
   };
   __classPrivateFieldSet$2(this, _KupDataTable_intObserver, new IntersectionObserver(callback, options), "f");
 }, _KupDataTable_didLoadInteractables = function _KupDataTable_didLoadInteractables() {
-  __classPrivateFieldGet$3(this, _KupDataTable_interactableTouch, "f").push(__classPrivateFieldGet$3(this, _KupDataTable_tableRef, "f"));
+  __classPrivateFieldGet$4(this, _KupDataTable_interactableTouch, "f").push(__classPrivateFieldGet$4(this, _KupDataTable_tableRef, "f"));
   const tapCb = (e) => {
-    if (__classPrivateFieldGet$3(this, _KupDataTable_hold, "f")) {
+    if (__classPrivateFieldGet$4(this, _KupDataTable_hold, "f")) {
       __classPrivateFieldSet$2(this, _KupDataTable_hold, false, "f");
       return;
     }
@@ -9687,11 +9687,11 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
         for (const key in e) {
           clone[key] = e[key];
         }
-        __classPrivateFieldGet$3(this, _KupDataTable_clickTimeout, "f").push(setTimeout(() => {
+        __classPrivateFieldGet$4(this, _KupDataTable_clickTimeout, "f").push(setTimeout(() => {
           this.kupDataTableClick.emit({
             comp: this,
             id: this.rootElement.id,
-            details: __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_clickHandler).call(this, clone),
+            details: __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_clickHandler).call(this, clone),
           });
         }, 300));
         break;
@@ -9700,7 +9700,7 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
         this.kupDataTableContextMenu.emit({
           comp: this,
           id: this.rootElement.id,
-          details: __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_contextMenuHandler).call(this, e),
+          details: __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_contextMenuHandler).call(this, e),
         });
         break;
     }
@@ -9709,17 +9709,17 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     switch (e.button) {
       // left click
       case 0:
-        for (let index = 0; index < __classPrivateFieldGet$3(this, _KupDataTable_clickTimeout, "f").length; index++) {
-          clearTimeout(__classPrivateFieldGet$3(this, _KupDataTable_clickTimeout, "f")[index]);
-          __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").debug.logMessage(this, 'Cleared clickHandler timeout(' +
-            __classPrivateFieldGet$3(this, _KupDataTable_clickTimeout, "f")[index] +
+        for (let index = 0; index < __classPrivateFieldGet$4(this, _KupDataTable_clickTimeout, "f").length; index++) {
+          clearTimeout(__classPrivateFieldGet$4(this, _KupDataTable_clickTimeout, "f")[index]);
+          __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").debug.logMessage(this, 'Cleared clickHandler timeout(' +
+            __classPrivateFieldGet$4(this, _KupDataTable_clickTimeout, "f")[index] +
             ').');
         }
         __classPrivateFieldSet$2(this, _KupDataTable_clickTimeout, [], "f");
         this.kupDataTableDblClick.emit({
           comp: this,
           id: this.rootElement.id,
-          details: __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_dblClickHandler).call(this, e),
+          details: __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_dblClickHandler).call(this, e),
         });
         break;
     }
@@ -9730,40 +9730,40 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
       this.kupDataTableContextMenu.emit({
         comp: this,
         id: this.rootElement.id,
-        details: __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_contextMenuHandler).call(this, e),
+        details: __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_contextMenuHandler).call(this, e),
       });
     }
   };
-  __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").interact.on(__classPrivateFieldGet$3(this, _KupDataTable_tableRef, "f"), KupPointerEventTypes.TAP, tapCb);
-  __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").interact.on(__classPrivateFieldGet$3(this, _KupDataTable_tableRef, "f"), KupPointerEventTypes.DOUBLETAP, doubletapCb);
-  __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").interact.on(__classPrivateFieldGet$3(this, _KupDataTable_tableRef, "f"), KupPointerEventTypes.HOLD, holdCb);
+  __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").interact.on(__classPrivateFieldGet$4(this, _KupDataTable_tableRef, "f"), KupPointerEventTypes.TAP, tapCb);
+  __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").interact.on(__classPrivateFieldGet$4(this, _KupDataTable_tableRef, "f"), KupPointerEventTypes.DOUBLETAP, doubletapCb);
+  __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").interact.on(__classPrivateFieldGet$4(this, _KupDataTable_tableRef, "f"), KupPointerEventTypes.HOLD, holdCb);
 }, _KupDataTable_didRenderInteractables = function _KupDataTable_didRenderInteractables() {
   if (this.showGroups) {
-    if (!__classPrivateFieldGet$3(this, _KupDataTable_interactableDrop, "f").includes(__classPrivateFieldGet$3(this, _KupDataTable_groupsDropareaRef, "f"))) {
-      __classPrivateFieldGet$3(this, _KupDataTable_interactableDrop, "f").push(__classPrivateFieldGet$3(this, _KupDataTable_groupsDropareaRef, "f"));
-      __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").interact.dropzone(__classPrivateFieldGet$3(this, _KupDataTable_groupsDropareaRef, "f"), {
+    if (!__classPrivateFieldGet$4(this, _KupDataTable_interactableDrop, "f").includes(__classPrivateFieldGet$4(this, _KupDataTable_groupsDropareaRef, "f"))) {
+      __classPrivateFieldGet$4(this, _KupDataTable_interactableDrop, "f").push(__classPrivateFieldGet$4(this, _KupDataTable_groupsDropareaRef, "f"));
+      __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").interact.dropzone(__classPrivateFieldGet$4(this, _KupDataTable_groupsDropareaRef, "f"), {
         accept: `[${kupDraggableColumnAttr}]`,
       }, null, {
         drop: (e) => {
           const draggedTh = e.relatedTarget;
           const grouped = getColumnByName(this.getColumns(), draggedTh.dataset.column);
-          __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_handleColumnGroup).call(this, grouped);
-          __classPrivateFieldGet$3(this, _KupDataTable_tableRef, "f").removeAttribute(kupDragActiveAttr);
+          __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_handleColumnGroup).call(this, grouped);
+          __classPrivateFieldGet$4(this, _KupDataTable_tableRef, "f").removeAttribute(kupDragActiveAttr);
         },
       });
     }
   }
   if (this.removableColumns) {
-    if (!__classPrivateFieldGet$3(this, _KupDataTable_interactableDrop, "f").includes(__classPrivateFieldGet$3(this, _KupDataTable_removeDropareaRef, "f"))) {
-      __classPrivateFieldGet$3(this, _KupDataTable_interactableDrop, "f").push(__classPrivateFieldGet$3(this, _KupDataTable_removeDropareaRef, "f"));
-      __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").interact.dropzone(__classPrivateFieldGet$3(this, _KupDataTable_removeDropareaRef, "f"), {
+    if (!__classPrivateFieldGet$4(this, _KupDataTable_interactableDrop, "f").includes(__classPrivateFieldGet$4(this, _KupDataTable_removeDropareaRef, "f"))) {
+      __classPrivateFieldGet$4(this, _KupDataTable_interactableDrop, "f").push(__classPrivateFieldGet$4(this, _KupDataTable_removeDropareaRef, "f"));
+      __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").interact.dropzone(__classPrivateFieldGet$4(this, _KupDataTable_removeDropareaRef, "f"), {
         accept: `[${kupDraggableColumnAttr}]`,
       }, null, {
         drop: (e) => {
           const draggedTh = e.relatedTarget;
           const deleted = getColumnByName(this.getColumns(), draggedTh.dataset.column);
           this.hideColumn(deleted);
-          __classPrivateFieldGet$3(this, _KupDataTable_tableRef, "f").removeAttribute(kupDragActiveAttr);
+          __classPrivateFieldGet$4(this, _KupDataTable_tableRef, "f").removeAttribute(kupDragActiveAttr);
         },
       });
     }
@@ -9796,7 +9796,7 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
       __classPrivateFieldSet$2(this, _KupDataTable_columnDropCardAnchor, e.target, "f");
       if (receiving && starter) {
         if (onlySort) {
-          __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_handleColumnSort).call(this, receiving, starter);
+          __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_handleColumnSort).call(this, receiving, starter);
         }
         else if (onlyMerge) {
           this.newColumn(KupDataNewColumnTypes.CONCATENATE, {
@@ -9804,17 +9804,17 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
           });
         }
         else {
-          __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_createDropCard).call(this, starter, receiving);
+          __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_createDropCard).call(this, starter, receiving);
         }
       }
-      __classPrivateFieldGet$3(this, _KupDataTable_tableRef, "f").removeAttribute(kupDragActiveAttr);
+      __classPrivateFieldGet$4(this, _KupDataTable_tableRef, "f").removeAttribute(kupDragActiveAttr);
     };
     const startCb = (e) => {
       const draggable = e.target;
-      __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_hideShowColumnDropArea).call(this, true, draggable);
+      __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_hideShowColumnDropArea).call(this, true, draggable);
     };
     const endCb = () => {
-      __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_hideShowColumnDropArea).call(this, false);
+      __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_hideShowColumnDropArea).call(this, false);
     };
     const dropCallbacks = {
       drop: dropCb,
@@ -9823,14 +9823,14 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
       start: startCb,
       end: endCb,
     };
-    for (let index = 0; index < __classPrivateFieldGet$3(this, _KupDataTable_thRefs, "f").length; index++) {
-      const th = __classPrivateFieldGet$3(this, _KupDataTable_thRefs, "f")[index];
-      if (th && !__classPrivateFieldGet$3(this, _KupDataTable_interactableDrag, "f").includes(th)) {
-        __classPrivateFieldGet$3(this, _KupDataTable_interactableDrag, "f").push(th);
-        __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").interact.dropzone(th, {
+    for (let index = 0; index < __classPrivateFieldGet$4(this, _KupDataTable_thRefs, "f").length; index++) {
+      const th = __classPrivateFieldGet$4(this, _KupDataTable_thRefs, "f")[index];
+      if (th && !__classPrivateFieldGet$4(this, _KupDataTable_interactableDrag, "f").includes(th)) {
+        __classPrivateFieldGet$4(this, _KupDataTable_interactableDrag, "f").push(th);
+        __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").interact.dropzone(th, {
           accept: `[${kupDraggableColumnAttr}]`,
         }, null, dropCallbacks);
-        __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").interact.draggable(th, {
+        __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").interact.draggable(th, {
           cursorChecker() {
             return null;
           },
@@ -9850,11 +9850,11 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     const callbacks = {
       move: moveCb,
     };
-    for (let index = 0; index < __classPrivateFieldGet$3(this, _KupDataTable_thRefs, "f").length; index++) {
-      const th = __classPrivateFieldGet$3(this, _KupDataTable_thRefs, "f")[index];
-      if (th && !__classPrivateFieldGet$3(this, _KupDataTable_interactableResize, "f").includes(th)) {
-        __classPrivateFieldGet$3(this, _KupDataTable_interactableResize, "f").push(th);
-        __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").interact.resizable(th, {
+    for (let index = 0; index < __classPrivateFieldGet$4(this, _KupDataTable_thRefs, "f").length; index++) {
+      const th = __classPrivateFieldGet$4(this, _KupDataTable_thRefs, "f")[index];
+      if (th && !__classPrivateFieldGet$4(this, _KupDataTable_interactableResize, "f").includes(th)) {
+        __classPrivateFieldGet$4(this, _KupDataTable_interactableResize, "f").push(th);
+        __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").interact.resizable(th, {
           allowFrom: '.header-cell__drag-handler',
           edges: {
             left: false,
@@ -9868,8 +9868,8 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     }
   }
   if (this.dragEnabled) {
-    for (let index = 0; index < __classPrivateFieldGet$3(this, _KupDataTable_rowsRefs, "f").length; index++) {
-      const row = __classPrivateFieldGet$3(this, _KupDataTable_rowsRefs, "f")[index];
+    for (let index = 0; index < __classPrivateFieldGet$4(this, _KupDataTable_rowsRefs, "f").length; index++) {
+      const row = __classPrivateFieldGet$4(this, _KupDataTable_rowsRefs, "f")[index];
       const dataCb = () => {
         const cellEl = this.rootElement.shadowRoot.querySelector('td:hover');
         return {
@@ -9882,9 +9882,9 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
           selectedRows: this.selectedRows,
         };
       };
-      if (row && !__classPrivateFieldGet$3(this, _KupDataTable_interactableDrag, "f").includes(row)) {
-        __classPrivateFieldGet$3(this, _KupDataTable_interactableDrag, "f").push(row);
-        __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").interact.draggable(row, {
+      if (row && !__classPrivateFieldGet$4(this, _KupDataTable_interactableDrag, "f").includes(row)) {
+        __classPrivateFieldGet$4(this, _KupDataTable_interactableDrag, "f").push(row);
+        __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").interact.draggable(row, {
           allowFrom: 'td',
           cursorChecker() {
             return null;
@@ -9899,11 +9899,11 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     const dataCb = () => {
       const cell = this.rootElement.shadowRoot.querySelector('td:hover');
       if (!cell) {
-        __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").debug.logMessage(this, "Couldn't find cell hovered to retrieve dropzone informations!", KupDebugCategory.WARNING);
+        __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").debug.logMessage(this, "Couldn't find cell hovered to retrieve dropzone informations!", KupDebugCategory.WARNING);
         return;
       }
-      const path = __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").getEventPath(cell, this.rootElement);
-      const receivingDetails = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_getEventDetails).call(this, path);
+      const path = __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").getEventPath(cell, this.rootElement);
+      const receivingDetails = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_getEventDetails).call(this, path);
       return {
         cell: receivingDetails.cell,
         column: receivingDetails.column,
@@ -9911,11 +9911,11 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
         row: receivingDetails.row,
       };
     };
-    for (let index = 0; index < __classPrivateFieldGet$3(this, _KupDataTable_rowsRefs, "f").length; index++) {
-      const row = __classPrivateFieldGet$3(this, _KupDataTable_rowsRefs, "f")[index];
-      if (row && !__classPrivateFieldGet$3(this, _KupDataTable_interactableDrop, "f").includes(row)) {
-        __classPrivateFieldGet$3(this, _KupDataTable_interactableDrop, "f").push(row);
-        __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").interact.dropzone(row, {
+    for (let index = 0; index < __classPrivateFieldGet$4(this, _KupDataTable_rowsRefs, "f").length; index++) {
+      const row = __classPrivateFieldGet$4(this, _KupDataTable_rowsRefs, "f")[index];
+      if (row && !__classPrivateFieldGet$4(this, _KupDataTable_interactableDrop, "f").includes(row)) {
+        __classPrivateFieldGet$4(this, _KupDataTable_interactableDrop, "f").push(row);
+        __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").interact.dropzone(row, {
           accept: `[${kupDraggableCellAttr}]`,
         }, {
           callback: dataCb,
@@ -9929,44 +9929,44 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
   if (this.headerIsPersistent &&
     this.tableHeight === undefined &&
     this.tableWidth === undefined) {
-    __classPrivateFieldGet$3(this, _KupDataTable_intObserver, "f").observe(__classPrivateFieldGet$3(this, _KupDataTable_tableRef, "f"));
-    __classPrivateFieldGet$3(this, _KupDataTable_intObserver, "f").observe(__classPrivateFieldGet$3(this, _KupDataTable_theadRef, "f"));
+    __classPrivateFieldGet$4(this, _KupDataTable_intObserver, "f").observe(__classPrivateFieldGet$4(this, _KupDataTable_tableRef, "f"));
+    __classPrivateFieldGet$4(this, _KupDataTable_intObserver, "f").observe(__classPrivateFieldGet$4(this, _KupDataTable_theadRef, "f"));
   }
 }, _KupDataTable_didRenderObservers = function _KupDataTable_didRenderObservers() {
-  if (__classPrivateFieldGet$3(this, _KupDataTable_paginatedRowsLength, "f") < __classPrivateFieldGet$3(this, _KupDataTable_rowsLength, "f") && this.lazyLoadRows) {
-    __classPrivateFieldGet$3(this, _KupDataTable_intObserver, "f").observe(__classPrivateFieldGet$3(this, _KupDataTable_rowsRefs, "f")[__classPrivateFieldGet$3(this, _KupDataTable_paginatedRowsLength, "f") - 1]);
+  if (__classPrivateFieldGet$4(this, _KupDataTable_paginatedRowsLength, "f") < __classPrivateFieldGet$4(this, _KupDataTable_rowsLength, "f") && this.lazyLoadRows) {
+    __classPrivateFieldGet$4(this, _KupDataTable_intObserver, "f").observe(__classPrivateFieldGet$4(this, _KupDataTable_rowsRefs, "f")[__classPrivateFieldGet$4(this, _KupDataTable_paginatedRowsLength, "f") - 1]);
   }
 }, _KupDataTable_didLoadEventHandling = function _KupDataTable_didLoadEventHandling() {
-  __classPrivateFieldGet$3(this, _KupDataTable_tableAreaRef, "f").addEventListener('scroll', () => __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_scrollStickyHeader).call(this));
+  __classPrivateFieldGet$4(this, _KupDataTable_tableAreaRef, "f").addEventListener('scroll', () => __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_scrollStickyHeader).call(this));
 }, _KupDataTable_scrollStickyHeader = function _KupDataTable_scrollStickyHeader() {
-  if (!__classPrivateFieldGet$3(this, _KupDataTable_stickyTheadRef, "f")) {
+  if (!__classPrivateFieldGet$4(this, _KupDataTable_stickyTheadRef, "f")) {
     return;
   }
-  __classPrivateFieldGet$3(this, _KupDataTable_stickyTheadRef, "f").scrollLeft = __classPrivateFieldGet$3(this, _KupDataTable_tableAreaRef, "f").scrollLeft;
+  __classPrivateFieldGet$4(this, _KupDataTable_stickyTheadRef, "f").scrollLeft = __classPrivateFieldGet$4(this, _KupDataTable_tableAreaRef, "f").scrollLeft;
 }, _KupDataTable_checkScrollOnHover = function _KupDataTable_checkScrollOnHover() {
-  if (!__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").scrollOnHover.isRegistered(__classPrivateFieldGet$3(this, _KupDataTable_tableAreaRef, "f"))) {
+  if (!__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").scrollOnHover.isRegistered(__classPrivateFieldGet$4(this, _KupDataTable_tableAreaRef, "f"))) {
     if (this.scrollOnHover &&
       this.tableHeight === undefined &&
       this.tableWidth === undefined) {
-      __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").scrollOnHover.register(__classPrivateFieldGet$3(this, _KupDataTable_tableAreaRef, "f"));
+      __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").scrollOnHover.register(__classPrivateFieldGet$4(this, _KupDataTable_tableAreaRef, "f"));
     }
   }
   else {
     if (!this.scrollOnHover &&
       (this.tableHeight !== undefined ||
         this.tableWidth !== undefined)) {
-      __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").scrollOnHover.unregister(__classPrivateFieldGet$3(this, _KupDataTable_tableAreaRef, "f"));
+      __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").scrollOnHover.unregister(__classPrivateFieldGet$4(this, _KupDataTable_tableAreaRef, "f"));
     }
   }
 }, _KupDataTable_customizePanelPosition = function _KupDataTable_customizePanelPosition() {
-  if (__classPrivateFieldGet$3(this, _KupDataTable_customizeTopButtonRef, "f") &&
-    !__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").dynamicPosition.isRegistered(__classPrivateFieldGet$3(this, _KupDataTable_customizeTopPanelRef, "f"))) {
-    __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").dynamicPosition.register(__classPrivateFieldGet$3(this, _KupDataTable_customizeTopPanelRef, "f"), __classPrivateFieldGet$3(this, _KupDataTable_customizeTopButtonRef, "f"), 0, KupDynamicPositionPlacement.BOTTOM, true);
+  if (__classPrivateFieldGet$4(this, _KupDataTable_customizeTopButtonRef, "f") &&
+    !__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").dynamicPosition.isRegistered(__classPrivateFieldGet$4(this, _KupDataTable_customizeTopPanelRef, "f"))) {
+    __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").dynamicPosition.register(__classPrivateFieldGet$4(this, _KupDataTable_customizeTopPanelRef, "f"), __classPrivateFieldGet$4(this, _KupDataTable_customizeTopButtonRef, "f"), 0, KupDynamicPositionPlacement.BOTTOM, true);
   }
 }, _KupDataTable_rowsPointLength = function _KupDataTable_rowsPointLength() {
-  return __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable__rowsLength).call(this, __classPrivateFieldGet$3(this, _KupDataTable_rows, "f"));
+  return __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable__rowsLength).call(this, __classPrivateFieldGet$4(this, _KupDataTable_rows, "f"));
 }, _KupDataTable_paginatedRowsPointLength = function _KupDataTable_paginatedRowsPointLength() {
-  return __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable__rowsLength).call(this, __classPrivateFieldGet$3(this, _KupDataTable_paginatedRows, "f"));
+  return __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable__rowsLength).call(this, __classPrivateFieldGet$4(this, _KupDataTable_paginatedRows, "f"));
 }, _KupDataTable__rowsLength = function _KupDataTable__rowsLength(r) {
   if (r == null) {
     return 0;
@@ -9979,14 +9979,14 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     }
     count += 1;
     if (row.group != null) {
-      count += __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable__rowsLength).call(this, row.group.children);
+      count += __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable__rowsLength).call(this, row.group.children);
     }
   }
   return count;
 }, _KupDataTable_setDynPosElements = function _KupDataTable_setDynPosElements() {
   // Column menu
-  if (__classPrivateFieldGet$3(this, _KupDataTable_columnMenuCard, "f") && __classPrivateFieldGet$3(this, _KupDataTable_columnMenuCard, "f").data) {
-    __classPrivateFieldGet$3(this, _KupDataTable_columnMenuCard, "f").data = __classPrivateFieldGet$3(this, _KupDataTable_columnMenuInstance, "f").prepData(this, getColumnByName(this.getVisibleColumns(), this.columnMenuAnchor), __classPrivateFieldGet$3(this, _KupDataTable_columnMenuCard, "f").data);
+  if (__classPrivateFieldGet$4(this, _KupDataTable_columnMenuCard, "f") && __classPrivateFieldGet$4(this, _KupDataTable_columnMenuCard, "f").data) {
+    __classPrivateFieldGet$4(this, _KupDataTable_columnMenuCard, "f").data = __classPrivateFieldGet$4(this, _KupDataTable_columnMenuInstance, "f").prepData(this, getColumnByName(this.getVisibleColumns(), this.columnMenuAnchor), __classPrivateFieldGet$4(this, _KupDataTable_columnMenuCard, "f").data);
   }
 }, _KupDataTable_resetSelectedRows = function _KupDataTable_resetSelectedRows() {
   if (this.getRows().length === 0)
@@ -10010,7 +10010,7 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     return undefined;
   }
 }, _KupDataTable_rowDetail = function _KupDataTable_rowDetail(row, x, y) {
-  const transposedData = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_getTransposedData).call(this);
+  const transposedData = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_getTransposedData).call(this);
   const cardData = {
     button: [
       {
@@ -10039,7 +10039,7 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
         showHeader: false,
       },
     ],
-    text: [__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageRow.DETAIL)],
+    text: [__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageRow.DETAIL)],
   };
   const columns = cardData.datatable[0].data.columns;
   const rows = cardData.datatable[0].data.rows;
@@ -10063,7 +10063,7 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     currentColumn.visible = true;
   }
   else {
-    __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").debug.logMessage(this, 'Invalid column name on row ID (' +
+    __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").debug.logMessage(this, 'Invalid column name on row ID (' +
       row.id +
       "), couldn't set current record!", KupDebugCategory.WARNING);
   }
@@ -10072,7 +10072,7 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
   for (let index = 0; index < rows.length; index++) {
     const column = this.data.columns.find((x) => x.name === rows[index].transposedColumnName);
     if (!column) {
-      __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").debug.logMessage(this, 'Column not found on row name (' + column + ')!', KupDebugCategory.WARNING);
+      __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").debug.logMessage(this, 'Column not found on row name (' + column + ')!', KupDebugCategory.WARNING);
       return;
     }
     const editable = rows[index].cells[row.id].isEditable
@@ -10096,8 +10096,8 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
           resource: editable ? 'edit-key' : 'key-variant',
         },
         title: editable
-          ? __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageRow.EDITABLE_KEY)
-          : __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageRow.KEY),
+          ? __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageRow.EDITABLE_KEY)
+          : __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageRow.KEY),
         value: editable ? 'edit-key' : 'key-variant',
       };
     }
@@ -10112,7 +10112,7 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
           color: `var(${KupThemeColorValues.TEXT})`,
           resource: 'pencil',
         },
-        title: __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.EDITABLE_FIELD),
+        title: __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.EDITABLE_FIELD),
         value: 'pencil',
       };
     }
@@ -10134,35 +10134,35 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     }
     rows[index].cells[iconColumn.toUpperCase()] = iconCell;
   }
-  if (!__classPrivateFieldGet$3(this, _KupDataTable_detailCard, "f")) {
+  if (!__classPrivateFieldGet$4(this, _KupDataTable_detailCard, "f")) {
     __classPrivateFieldSet$2(this, _KupDataTable_detailCard, document.createElement('kup-card'), "f");
-    __classPrivateFieldGet$3(this, _KupDataTable_detailCard, "f").layoutFamily = KupCardFamily.DIALOG;
-    __classPrivateFieldGet$3(this, _KupDataTable_detailCard, "f").layoutNumber = 4;
-    __classPrivateFieldGet$3(this, _KupDataTable_detailCard, "f").sizeX = 'auto';
-    __classPrivateFieldGet$3(this, _KupDataTable_detailCard, "f").sizeY = 'auto';
+    __classPrivateFieldGet$4(this, _KupDataTable_detailCard, "f").layoutFamily = KupCardFamily.DIALOG;
+    __classPrivateFieldGet$4(this, _KupDataTable_detailCard, "f").layoutNumber = 4;
+    __classPrivateFieldGet$4(this, _KupDataTable_detailCard, "f").sizeX = 'auto';
+    __classPrivateFieldGet$4(this, _KupDataTable_detailCard, "f").sizeY = 'auto';
   }
   else {
-    const children = Array.prototype.slice.call(__classPrivateFieldGet$3(this, _KupDataTable_detailCard, "f").children, 0);
+    const children = Array.prototype.slice.call(__classPrivateFieldGet$4(this, _KupDataTable_detailCard, "f").children, 0);
     for (let index = 0; index < children.length; index++) {
       children[index].remove();
     }
   }
-  __classPrivateFieldGet$3(this, _KupDataTable_detailCard, "f").data = cardData;
-  __classPrivateFieldGet$3(this, _KupDataTable_detailCard, "f").style.position = 'fixed';
-  __classPrivateFieldGet$3(this, _KupDataTable_detailCard, "f").style.left = '0';
-  __classPrivateFieldGet$3(this, _KupDataTable_detailCard, "f").style.top = '0';
-  __classPrivateFieldGet$3(this, _KupDataTable_detailCard, "f").setAttribute('data-x', x.toString());
-  __classPrivateFieldGet$3(this, _KupDataTable_detailCard, "f").setAttribute('data-y', y.toString());
-  __classPrivateFieldGet$3(this, _KupDataTable_detailCard, "f").style.transform = 'translate(' + x + 'px,' + y + 'px)';
-  this.rootElement.shadowRoot.append(__classPrivateFieldGet$3(this, _KupDataTable_detailCard, "f"));
+  __classPrivateFieldGet$4(this, _KupDataTable_detailCard, "f").data = cardData;
+  __classPrivateFieldGet$4(this, _KupDataTable_detailCard, "f").style.position = 'fixed';
+  __classPrivateFieldGet$4(this, _KupDataTable_detailCard, "f").style.left = '0';
+  __classPrivateFieldGet$4(this, _KupDataTable_detailCard, "f").style.top = '0';
+  __classPrivateFieldGet$4(this, _KupDataTable_detailCard, "f").setAttribute('data-x', x.toString());
+  __classPrivateFieldGet$4(this, _KupDataTable_detailCard, "f").setAttribute('data-y', y.toString());
+  __classPrivateFieldGet$4(this, _KupDataTable_detailCard, "f").style.transform = 'translate(' + x + 'px,' + y + 'px)';
+  this.rootElement.shadowRoot.append(__classPrivateFieldGet$4(this, _KupDataTable_detailCard, "f"));
 }, _KupDataTable_rowInsertForm = function _KupDataTable_rowInsertForm() {
   const CARD_WIDTH = 400;
   const CARD_HEIGHT = 400;
   __classPrivateFieldSet$2(this, _KupDataTable_insertCard, document.createElement('kup-card'), "f");
-  __classPrivateFieldGet$3(this, _KupDataTable_insertCard, "f").layoutFamily = KupCardFamily.FREE;
-  __classPrivateFieldGet$3(this, _KupDataTable_insertCard, "f").layoutNumber = 1;
-  __classPrivateFieldGet$3(this, _KupDataTable_insertCard, "f").sizeX = CARD_WIDTH + 'px';
-  __classPrivateFieldGet$3(this, _KupDataTable_insertCard, "f").sizeY = CARD_HEIGHT + 'px';
+  __classPrivateFieldGet$4(this, _KupDataTable_insertCard, "f").layoutFamily = KupCardFamily.FREE;
+  __classPrivateFieldGet$4(this, _KupDataTable_insertCard, "f").layoutNumber = 1;
+  __classPrivateFieldGet$4(this, _KupDataTable_insertCard, "f").sizeX = CARD_WIDTH + 'px';
+  __classPrivateFieldGet$4(this, _KupDataTable_insertCard, "f").sizeY = CARD_HEIGHT + 'px';
   const style = document.createElement('style');
   style.innerText =
     'kup-form { max-height: 40vh; overflow: auto; } .page-wrapper { display: grid; } ' +
@@ -10170,24 +10170,24 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
       '.message-wrapper { display: none; justify-content: start; padding-top: 5px; padding-bottom: 5px; } ' +
       '.errorIcon { --kup-icon-color: var(--kup-danger-color); } ' +
       '.message { background-color: var(--kup-danger-color); color: white; padding: 3px; } ';
-  __classPrivateFieldGet$3(this, _KupDataTable_insertCard, "f").append(style);
+  __classPrivateFieldGet$4(this, _KupDataTable_insertCard, "f").append(style);
   const pageWrapper = document.createElement('div');
   pageWrapper.className = 'page-wrapper';
   const buttonWrapper = document.createElement('div');
   buttonWrapper.className = 'button-wrapper';
   const cancel = document.createElement('kup-button');
   const confirm = document.createElement('kup-button');
-  cancel.id = __classPrivateFieldGet$3(this, _KupDataTable_BUTTON_CANCEL_ID, "f");
+  cancel.id = __classPrivateFieldGet$4(this, _KupDataTable_BUTTON_CANCEL_ID, "f");
   cancel.icon = 'clear';
-  cancel.label = __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.ABORT);
+  cancel.label = __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.ABORT);
   cancel.styling = FButtonStyling.FLAT;
   cancel.addEventListener('kup-button-click', () => {
-    __classPrivateFieldGet$3(this, _KupDataTable_insertCard, "f").remove();
+    __classPrivateFieldGet$4(this, _KupDataTable_insertCard, "f").remove();
     __classPrivateFieldSet$2(this, _KupDataTable_insertCard, null, "f");
   });
-  confirm.id = __classPrivateFieldGet$3(this, _KupDataTable_BUTTON_SUBMIT_ID, "f");
+  confirm.id = __classPrivateFieldGet$4(this, _KupDataTable_BUTTON_SUBMIT_ID, "f");
   confirm.icon = 'check';
-  confirm.label = __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.CONFIRM);
+  confirm.label = __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.CONFIRM);
   let innerComp = document.createElement('kup-spinner');
   innerComp.slot = 'spinner';
   innerComp.dimensions = '0.6em';
@@ -10206,7 +10206,7 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
   buttonWrapper.append(cancel);
   buttonWrapper.append(confirm);
   const form = document.createElement('kup-form');
-  form.id = __classPrivateFieldGet$3(this, _KupDataTable_FIELDS_FORM_ID, "f");
+  form.id = __classPrivateFieldGet$4(this, _KupDataTable_FIELDS_FORM_ID, "f");
   const row = {
     cells: {},
     id: '0',
@@ -10226,7 +10226,7 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
   };
   const messageWrapper = document.createElement('div');
   messageWrapper.className = 'message-wrapper';
-  messageWrapper.id = __classPrivateFieldGet$3(this, _KupDataTable_MESSAGE_WRAPPER_ID, "f");
+  messageWrapper.id = __classPrivateFieldGet$4(this, _KupDataTable_MESSAGE_WRAPPER_ID, "f");
   const icon = document.createElement('kup-image');
   icon.className = 'errorIcon';
   icon.resource = 'cancel';
@@ -10235,43 +10235,43 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
   messageWrapper.append(icon);
   const message = document.createElement('span');
   message.className = 'message';
-  message.id = __classPrivateFieldGet$3(this, _KupDataTable_MESSAGE_ID, "f");
+  message.id = __classPrivateFieldGet$4(this, _KupDataTable_MESSAGE_ID, "f");
   let msg = '';
   message.innerText = msg;
   messageWrapper.append(message);
   pageWrapper.append(messageWrapper);
   pageWrapper.append(form);
   pageWrapper.append(buttonWrapper);
-  __classPrivateFieldGet$3(this, _KupDataTable_insertCard, "f").append(pageWrapper);
-  __classPrivateFieldGet$3(this, _KupDataTable_insertCard, "f").data = {};
-  this.rootElement.shadowRoot.append(__classPrivateFieldGet$3(this, _KupDataTable_insertCard, "f"));
+  __classPrivateFieldGet$4(this, _KupDataTable_insertCard, "f").append(pageWrapper);
+  __classPrivateFieldGet$4(this, _KupDataTable_insertCard, "f").data = {};
+  this.rootElement.shadowRoot.append(__classPrivateFieldGet$4(this, _KupDataTable_insertCard, "f"));
 }, _KupDataTable_rowsDelete = function _KupDataTable_rowsDelete() {
   const createDeleteCard = () => {
     __classPrivateFieldSet$2(this, _KupDataTable_confirmDeleteDialog, document.createElement('kup-dialog'), "f");
     __classPrivateFieldSet$2(this, _KupDataTable_confirmDeleteCard, document.createElement('kup-card'), "f");
-    __classPrivateFieldGet$3(this, _KupDataTable_confirmDeleteCard, "f").layoutFamily = KupCardFamily.FREE;
-    __classPrivateFieldGet$3(this, _KupDataTable_confirmDeleteCard, "f").layoutNumber = 1;
-    __classPrivateFieldGet$3(this, _KupDataTable_confirmDeleteCard, "f").sizeX = 'auto';
-    __classPrivateFieldGet$3(this, _KupDataTable_confirmDeleteCard, "f").sizeY = 'auto';
+    __classPrivateFieldGet$4(this, _KupDataTable_confirmDeleteCard, "f").layoutFamily = KupCardFamily.FREE;
+    __classPrivateFieldGet$4(this, _KupDataTable_confirmDeleteCard, "f").layoutNumber = 1;
+    __classPrivateFieldGet$4(this, _KupDataTable_confirmDeleteCard, "f").sizeX = 'auto';
+    __classPrivateFieldGet$4(this, _KupDataTable_confirmDeleteCard, "f").sizeY = 'auto';
     const style = document.createElement('style');
     style.innerText =
       '.button-wrapper, .message-wrapper { display: flex; justify-content: space-around; z-index: var(--kup-card-zindex); } .message-wrapper { padding-bottom: 20px; }';
     const messageWrapper = document.createElement('div');
     messageWrapper.className = 'message-wrapper';
-    messageWrapper.id = __classPrivateFieldGet$3(this, _KupDataTable_MESSAGE_WRAPPER_ID, "f");
+    messageWrapper.id = __classPrivateFieldGet$4(this, _KupDataTable_MESSAGE_WRAPPER_ID, "f");
     const message = document.createElement('span');
     message.className = 'message';
-    message.id = __classPrivateFieldGet$3(this, _KupDataTable_MESSAGE_ID, "f");
-    let msg = __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.CONFIRM_DELETE_X_ROWS);
+    message.id = __classPrivateFieldGet$4(this, _KupDataTable_MESSAGE_ID, "f");
+    let msg = __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.CONFIRM_DELETE_X_ROWS);
     msg = msg.replace('{0}', this.selectedRows.length + '');
     message.innerText = msg;
     messageWrapper.append(message);
     const buttonWrapper = document.createElement('div');
     buttonWrapper.className = 'button-wrapper';
     const confirm = document.createElement('kup-button');
-    confirm.id = __classPrivateFieldGet$3(this, _KupDataTable_BUTTON_SUBMIT_ID, "f");
+    confirm.id = __classPrivateFieldGet$4(this, _KupDataTable_BUTTON_SUBMIT_ID, "f");
     confirm.icon = 'check';
-    confirm.label = __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.CONFIRM);
+    confirm.label = __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.CONFIRM);
     let innerComp = document.createElement('kup-spinner');
     innerComp.slot = 'spinner';
     innerComp.dimensions = '0.6em';
@@ -10286,17 +10286,17 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
       });
     });
     buttonWrapper.append(confirm);
-    __classPrivateFieldGet$3(this, _KupDataTable_confirmDeleteCard, "f").append(style);
-    __classPrivateFieldGet$3(this, _KupDataTable_confirmDeleteCard, "f").append(messageWrapper);
-    __classPrivateFieldGet$3(this, _KupDataTable_confirmDeleteCard, "f").append(buttonWrapper);
-    __classPrivateFieldGet$3(this, _KupDataTable_confirmDeleteCard, "f").data = {};
-    __classPrivateFieldGet$3(this, _KupDataTable_confirmDeleteDialog, "f").append(__classPrivateFieldGet$3(this, _KupDataTable_confirmDeleteCard, "f"));
-    document.querySelector('body').append(__classPrivateFieldGet$3(this, _KupDataTable_confirmDeleteDialog, "f"));
+    __classPrivateFieldGet$4(this, _KupDataTable_confirmDeleteCard, "f").append(style);
+    __classPrivateFieldGet$4(this, _KupDataTable_confirmDeleteCard, "f").append(messageWrapper);
+    __classPrivateFieldGet$4(this, _KupDataTable_confirmDeleteCard, "f").append(buttonWrapper);
+    __classPrivateFieldGet$4(this, _KupDataTable_confirmDeleteCard, "f").data = {};
+    __classPrivateFieldGet$4(this, _KupDataTable_confirmDeleteDialog, "f").append(__classPrivateFieldGet$4(this, _KupDataTable_confirmDeleteCard, "f"));
+    document.querySelector('body').append(__classPrivateFieldGet$4(this, _KupDataTable_confirmDeleteDialog, "f"));
   };
   const insertRowsIds = [];
   const startingRows = [];
   this.selectedRows.forEach((row) => {
-    if (row.id.indexOf(__classPrivateFieldGet$3(this, _KupDataTable_INSERT_PREFIX, "f")) > -1) {
+    if (row.id.indexOf(__classPrivateFieldGet$4(this, _KupDataTable_INSERT_PREFIX, "f")) > -1) {
       insertRowsIds.push(row.id);
     }
     else {
@@ -10401,15 +10401,15 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     tr: tr ? tr : null,
   };
 }, _KupDataTable_clickHandler = function _KupDataTable_clickHandler(e) {
-  const details = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_getEventDetails).call(this, __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").getEventPath(e.target, this.rootElement), e);
+  const details = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_getEventDetails).call(this, __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").getEventPath(e.target, this.rootElement), e);
   if (details.area === 'header') {
     if (details.th && details.column) {
       if (details.filterRemove) {
-        __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_onRemoveFilter).call(this, details.column);
+        __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_onRemoveFilter).call(this, details.column);
         return details;
       }
       else if (this.sortEnabled) {
-        __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_onColumnSort).call(this, e, details.column.name);
+        __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_onColumnSort).call(this, e, details.column.name);
         return details;
       }
     }
@@ -10424,22 +10424,22 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
       }
       details.tr.classList.add('focus');
       if (e.ctrlKey || e.metaKey) {
-        __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_rowDetail).call(this, Object.assign({}, details.row), e.clientX, e.clientY);
+        __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_rowDetail).call(this, Object.assign({}, details.row), e.clientX, e.clientY);
         return details;
       }
     }
     if (details.tr && details.row && details.isGroupRow) {
-      __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_onRowExpand).call(this, details.row);
+      __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_onRowExpand).call(this, details.row);
       return details;
     }
     if (details.td && details.row && !details.textfield) {
-      __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_onRowClick).call(this, details.row, details.td, true);
+      __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_onRowClick).call(this, details.row, details.td, true);
       return details;
     }
   }
   return details;
 }, _KupDataTable_contextMenuHandler = function _KupDataTable_contextMenuHandler(e) {
-  const details = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_getEventDetails).call(this, __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").getEventPath(e.target, this.rootElement), e);
+  const details = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_getEventDetails).call(this, __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").getEventPath(e.target, this.rootElement), e);
   if (details.area === 'header') {
     if (details.th && details.column) {
       this.openColumnMenu(details.column.name);
@@ -10449,34 +10449,34 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
   else if (details.area === 'footer') {
     if (details.td && details.column) {
       __classPrivateFieldSet$2(this, _KupDataTable_totalMenuCoords, { x: e.clientX, y: e.clientY }, "f");
-      __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_onTotalMenuOpen).call(this, details.column);
+      __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_onTotalMenuOpen).call(this, details.column);
       return details;
     }
   }
   return details;
 }, _KupDataTable_dblClickHandler = function _KupDataTable_dblClickHandler(e) {
-  const details = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_getEventDetails).call(this, __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").getEventPath(e.target, this.rootElement), e);
+  const details = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_getEventDetails).call(this, __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").getEventPath(e.target, this.rootElement), e);
   if (details.area === 'body') {
     if (this.selection == SelectionMode.MULTIPLE) {
-      __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_resetSelectedRows).call(this);
+      __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_resetSelectedRows).call(this);
     }
     if (this.selection == SelectionMode.SINGLE ||
       this.selection == SelectionMode.MULTIPLE) {
-      __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_onRowClick).call(this, details.row, details.td, false);
+      __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_onRowClick).call(this, details.row, details.td, false);
     }
   }
   return details;
 }, _KupDataTable_initRows = function _KupDataTable_initRows() {
-  __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_filterRows).call(this);
-  __classPrivateFieldSet$2(this, _KupDataTable_footer, calcTotals(normalizeRows(this.getColumns(), __classPrivateFieldGet$3(this, _KupDataTable_rows, "f")), this.totals), "f");
-  __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_groupRows).call(this);
-  __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_sortRows).call(this);
-  __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_adjustPaginator).call(this);
-  __classPrivateFieldSet$2(this, _KupDataTable_paginatedRows, paginateRows(__classPrivateFieldGet$3(this, _KupDataTable_rows, "f"), this.currentPage, this.currentRowsPerPage, __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_isGrouping).call(this)), "f");
-  __classPrivateFieldSet$2(this, _KupDataTable_paginatedRowsLength, __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_paginatedRowsPointLength).call(this), "f");
+  __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_filterRows).call(this);
+  __classPrivateFieldSet$2(this, _KupDataTable_footer, calcTotals(normalizeRows(this.getColumns(), __classPrivateFieldGet$4(this, _KupDataTable_rows, "f")), this.totals), "f");
+  __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_groupRows).call(this);
+  __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_sortRows).call(this);
+  __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_adjustPaginator).call(this);
+  __classPrivateFieldSet$2(this, _KupDataTable_paginatedRows, paginateRows(__classPrivateFieldGet$4(this, _KupDataTable_rows, "f"), this.currentPage, this.currentRowsPerPage, __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_isGrouping).call(this)), "f");
+  __classPrivateFieldSet$2(this, _KupDataTable_paginatedRowsLength, __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_paginatedRowsPointLength).call(this), "f");
 }, _KupDataTable_filterRows = function _KupDataTable_filterRows() {
   __classPrivateFieldSet$2(this, _KupDataTable_rows, filterRows(this.getRows(), this.filters, this.globalFilterValue, this.getColumns()), "f");
-  __classPrivateFieldSet$2(this, _KupDataTable_rowsLength, __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_rowsPointLength).call(this), "f");
+  __classPrivateFieldSet$2(this, _KupDataTable_rowsLength, __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_rowsPointLength).call(this), "f");
 }, _KupDataTable_isGrouping = function _KupDataTable_isGrouping() {
   return this.groups && this.groups.length > 0;
 }, _KupDataTable_hasRowActions = function _KupDataTable_hasRowActions() {
@@ -10490,19 +10490,19 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
 }, _KupDataTable_hasTotals = function _KupDataTable_hasTotals() {
   return this.totals && Object.keys(this.totals).length > 0;
 }, _KupDataTable_tableHasAutoWidth = function _KupDataTable_tableHasAutoWidth() {
-  if (!__classPrivateFieldGet$3(this, _KupDataTable_sizedColumns, "f")) {
+  if (!__classPrivateFieldGet$4(this, _KupDataTable_sizedColumns, "f")) {
     return;
   }
   const visibleCols = this.getVisibleColumns();
   // Before checking each column, controls that visible columns are as many as items with custom sizes.
   // If there are more visible columns, it means that the width of the table will be set to auto.
-  if (visibleCols.length <= __classPrivateFieldGet$3(this, _KupDataTable_sizedColumns, "f").length) {
+  if (visibleCols.length <= __classPrivateFieldGet$4(this, _KupDataTable_sizedColumns, "f").length) {
     let found = false;
     // Each visible column must have its own width for the table to have a auto width
     for (let i = 0; i < visibleCols.length; i++) {
       found = false;
-      for (let j = 0; j < __classPrivateFieldGet$3(this, _KupDataTable_sizedColumns, "f").length; j++) {
-        if (visibleCols[i].name === __classPrivateFieldGet$3(this, _KupDataTable_sizedColumns, "f")[j].name) {
+      for (let j = 0; j < __classPrivateFieldGet$4(this, _KupDataTable_sizedColumns, "f").length; j++) {
+        if (visibleCols[i].name === __classPrivateFieldGet$4(this, _KupDataTable_sizedColumns, "f")[j].name) {
           found = true;
           break;
         }
@@ -10515,8 +10515,8 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
   }
   return false;
 }, _KupDataTable_forceGroupExpansion = function _KupDataTable_forceGroupExpansion() {
-  __classPrivateFieldGet$3(this, _KupDataTable_rows, "f").forEach((row) => __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_forceRowGroupExpansion).call(this, row));
-  __classPrivateFieldGet$3(this, _KupDataTable_paginatedRows, "f").forEach((row) => __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_forceRowGroupExpansion).call(this, row));
+  __classPrivateFieldGet$4(this, _KupDataTable_rows, "f").forEach((row) => __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_forceRowGroupExpansion).call(this, row));
+  __classPrivateFieldGet$4(this, _KupDataTable_paginatedRows, "f").forEach((row) => __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_forceRowGroupExpansion).call(this, row));
 }, _KupDataTable_forceRowGroupExpansion = function _KupDataTable_forceRowGroupExpansion(row) {
   // check if row is group
   if (!row.group) {
@@ -10537,10 +10537,10 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
   }
   this.groupState[row.group.id] = groupState;
   if (row.group.children) {
-    row.group.children.forEach((childRow) => __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_forceRowGroupExpansion).call(this, childRow));
+    row.group.children.forEach((childRow) => __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_forceRowGroupExpansion).call(this, childRow));
   }
 }, _KupDataTable_adjustPaginator = function _KupDataTable_adjustPaginator() {
-  const numberOfRows = __classPrivateFieldGet$3(this, _KupDataTable_rowsLength, "f");
+  const numberOfRows = __classPrivateFieldGet$4(this, _KupDataTable_rowsLength, "f");
   // check if current page is valid
   const numberOfPages = Math.ceil(numberOfRows / this.currentRowsPerPage);
   if (this.currentPage > numberOfPages) {
@@ -10549,7 +10549,7 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     this.resetCurrentPage();
   }
 }, _KupDataTable_composeFixedCellStyleAndClass = function _KupDataTable_composeFixedCellStyleAndClass(columnCssIndex, rowCssIndex, extraCellsCount = 0) {
-  if (__classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_isGrouping).call(this)) {
+  if (__classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_isGrouping).call(this)) {
     return undefined;
   }
   //-- Controls if there are fixed rows or columns --
@@ -10586,20 +10586,20 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
 }, _KupDataTable_updateFixedRowsAndColumnsCssVariables = function _KupDataTable_updateFixedRowsAndColumnsCssVariables() {
   // [ffbf] - Using getBoundingClientRect is mandatory since Firefox return a wrong value for ele.offsetHeight and witdh values
   // When grouping, the fixed rows and columns are not sticky
-  if (__classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_isGrouping).call(this) || !__classPrivateFieldGet$3(this, _KupDataTable_tableRef, "f"))
+  if (__classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_isGrouping).call(this) || !__classPrivateFieldGet$4(this, _KupDataTable_tableRef, "f"))
     return false;
   let toRet = false;
   if (this.fixedRows >= 1) {
-    let currentRow = __classPrivateFieldGet$3(this, _KupDataTable_tableRef, "f").querySelector('tbody > tr:first-of-type');
+    let currentRow = __classPrivateFieldGet$4(this, _KupDataTable_tableRef, "f").querySelector('tbody > tr:first-of-type');
     // The height must start from the height of the header. BUT not on Safari.
     // Safari handles the sticky position on the tables in a different way, making it start from the tbody element
     // and not on the table with a specified position of sticky. There fore in that case we must set initial height to 0.
-    let previousHeight = !__classPrivateFieldGet$3(this, _KupDataTable_isSafariBrowser, "f")
-      ? __classPrivateFieldGet$3(this, _KupDataTable_tableRef, "f").querySelector('thead > tr:first-of-type > th:first-of-type').getBoundingClientRect().height // [ffbf]
+    let previousHeight = !__classPrivateFieldGet$4(this, _KupDataTable_isSafariBrowser, "f")
+      ? __classPrivateFieldGet$4(this, _KupDataTable_tableRef, "f").querySelector('thead > tr:first-of-type > th:first-of-type').getBoundingClientRect().height // [ffbf]
       : 0;
     // [CSSCount] - I must start from 1 since we are referencing html elements e not array (with CSS selectors starting from 1)
     for (let i = 1; i <= this.fixedRows && currentRow; i++) {
-      __classPrivateFieldGet$3(this, _KupDataTable_tableAreaRef, "f").style.setProperty(FixedCellsCSSVarsBase.rows + i, previousHeight + 'px');
+      __classPrivateFieldGet$4(this, _KupDataTable_tableAreaRef, "f").style.setProperty(FixedCellsCSSVarsBase.rows + i, previousHeight + 'px');
       previousHeight += currentRow.children[0].getBoundingClientRect().height; // [ffbf]
       currentRow =
         currentRow.nextElementSibling;
@@ -10607,14 +10607,14 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     toRet = true;
   }
   if (this.fixedColumns >= 1) {
-    let currentCell = __classPrivateFieldGet$3(this, _KupDataTable_tableRef, "f").querySelector('tbody > tr:first-of-type > td:first-of-type');
+    let currentCell = __classPrivateFieldGet$4(this, _KupDataTable_tableRef, "f").querySelector('tbody > tr:first-of-type > td:first-of-type');
     let previousWidth = 0;
     const totalFixedColumns = this.fixedColumns +
-      (__classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_hasRowActions).call(this) ? 1 : 0) +
+      (__classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_hasRowActions).call(this) ? 1 : 0) +
       (this.selection === SelectionMode.MULTIPLE_CHECKBOX ? 1 : 0);
     // @See [CSSCount]
     for (let i = 1; i <= totalFixedColumns && currentCell; i++) {
-      __classPrivateFieldGet$3(this, _KupDataTable_tableAreaRef, "f").style.setProperty(FixedCellsCSSVarsBase.columns + i, previousWidth + 'px');
+      __classPrivateFieldGet$4(this, _KupDataTable_tableAreaRef, "f").style.setProperty(FixedCellsCSSVarsBase.columns + i, previousWidth + 'px');
       previousWidth += currentCell.getBoundingClientRect().width; // [ffbf]
       currentCell =
         currentCell.nextElementSibling;
@@ -10662,10 +10662,10 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
   // resetting current page
   this.resetCurrentPage();
   const newFilters = Object.assign({}, this.filters);
-  __classPrivateFieldGet$3(this, _KupDataTable_filtersColumnMenuInstance, "f").removeFilter(newFilters, column.name);
+  __classPrivateFieldGet$4(this, _KupDataTable_filtersColumnMenuInstance, "f").removeFilter(newFilters, column.name);
   this.filters = newFilters;
 }, _KupDataTable_getFilterValueForTooltip = function _KupDataTable_getFilterValueForTooltip(column) {
-  return __classPrivateFieldGet$3(this, _KupDataTable_filtersColumnMenuInstance, "f").getFilterValueForTooltip(this.filters, column);
+  return __classPrivateFieldGet$4(this, _KupDataTable_filtersColumnMenuInstance, "f").getFilterValueForTooltip(this.filters, column);
 }, _KupDataTable_onGlobalFilterChange = function _KupDataTable_onGlobalFilterChange(inputEl) {
   this.resetCurrentPage();
   if (inputEl) {
@@ -10676,15 +10676,15 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     this.globalFilterValue = '';
   }
 }, _KupDataTable_handlePageChange = function _KupDataTable_handlePageChange(pageNumber) {
-  const newPage = pageChange(pageNumber, __classPrivateFieldGet$3(this, _KupDataTable_rowsLength, "f"), this.currentRowsPerPage);
+  const newPage = pageChange(pageNumber, __classPrivateFieldGet$4(this, _KupDataTable_rowsLength, "f"), this.currentRowsPerPage);
   if (newPage) {
     this.currentPage = newPage;
   }
 }, _KupDataTable_handleRowsPerPageChange = function _KupDataTable_handleRowsPerPageChange(rowsNumber) {
-  const newRows = rowsPerPageChange(rowsNumber, __classPrivateFieldGet$3(this, _KupDataTable_rowsLength, "f"));
+  const newRows = rowsPerPageChange(rowsNumber, __classPrivateFieldGet$4(this, _KupDataTable_rowsLength, "f"));
   if (newRows) {
     this.currentRowsPerPage = newRows;
-    __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_adjustPaginator).call(this);
+    __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_adjustPaginator).call(this);
   }
 }, _KupDataTable_onRowClick = function _KupDataTable_onRowClick(row, td, emitEvent) {
   // selecting row
@@ -10714,9 +10714,9 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
   if (!row.unselectable &&
     this.selection !== SelectionMode.NONE &&
     clickedColumn) {
-    __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_deselectColumn).call(this, this.selectedColumn);
+    __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_deselectColumn).call(this, this.selectedColumn);
     this.selectedColumn = clickedColumn;
-    __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_selectColumn).call(this, this.selectedColumn);
+    __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_selectColumn).call(this, this.selectedColumn);
     if (emitEvent !== false) {
       // emit event
       this.kupRowSelected.emit({
@@ -10791,7 +10791,7 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
 }, _KupDataTable_onSelectAll = function _KupDataTable_onSelectAll({ target }) {
   if (target.checked) {
     // select all rows
-    this.selectedRows = __classPrivateFieldGet$3(this, _KupDataTable_renderedRows, "f");
+    this.selectedRows = __classPrivateFieldGet$4(this, _KupDataTable_renderedRows, "f");
     // triggering event
     this.kupRowSelected.emit({
       comp: this,
@@ -10803,21 +10803,21 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
   }
   else {
     // deselect all rows
-    __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_resetSelectedRows).call(this);
+    __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_resetSelectedRows).call(this);
   }
 }, _KupDataTable_openTotalMenu = function _KupDataTable_openTotalMenu(column) {
   this.openedTotalMenu = column.name;
 }, _KupDataTable_closeTotalMenu = function _KupDataTable_closeTotalMenu() {
   this.openedTotalMenu = null;
-  __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").removeClickCallback(__classPrivateFieldGet$3(this, _KupDataTable_clickCb, "f"));
+  __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").removeClickCallback(__classPrivateFieldGet$4(this, _KupDataTable_clickCb, "f"));
 }, _KupDataTable_isOpenedTotalMenuForColumn = function _KupDataTable_isOpenedTotalMenuForColumn(column) {
   return this.openedTotalMenu === column;
 }, _KupDataTable_groupRows = function _KupDataTable_groupRows() {
-  if (!__classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_isGrouping).call(this)) {
+  if (!__classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_isGrouping).call(this)) {
     return;
   }
-  __classPrivateFieldSet$2(this, _KupDataTable_rows, groupRows(this.getColumns(), __classPrivateFieldGet$3(this, _KupDataTable_rows, "f"), this.groups, this.totals), "f");
-  __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_adjustGroupState).call(this);
+  __classPrivateFieldSet$2(this, _KupDataTable_rows, groupRows(this.getColumns(), __classPrivateFieldGet$4(this, _KupDataTable_rows, "f"), this.groups, this.totals), "f");
+  __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_adjustGroupState).call(this);
 }, _KupDataTable_onLoadMoreClick = function _KupDataTable_onLoadMoreClick() {
   var _a;
   let loadItems = 0;
@@ -10827,11 +10827,11 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
       break;
     case LoadMoreMode.CONSTANT_INCREMENT:
       loadItems =
-        this.loadMoreStep * (__classPrivateFieldGet$3(this, _KupDataTable_loadMoreEventCounter, "f") + 1);
+        this.loadMoreStep * (__classPrivateFieldGet$4(this, _KupDataTable_loadMoreEventCounter, "f") + 1);
       break;
     case LoadMoreMode.PROGRESSIVE_THRESHOLD:
       loadItems =
-        Math.max(__classPrivateFieldGet$3(this, _KupDataTable_loadMoreEventPreviousQuantity, "f"), this.loadMoreStep) * Math.min(__classPrivateFieldGet$3(this, _KupDataTable_loadMoreEventCounter, "f") + 1, 2);
+        Math.max(__classPrivateFieldGet$4(this, _KupDataTable_loadMoreEventPreviousQuantity, "f"), this.loadMoreStep) * Math.min(__classPrivateFieldGet$4(this, _KupDataTable_loadMoreEventCounter, "f") + 1, 2);
       break;
   }
   if (loadItems > this.loadMoreLimit) {
@@ -10843,15 +10843,15 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     loadItems: loadItems,
   });
   __classPrivateFieldSet$2(this, _KupDataTable_loadMoreEventPreviousQuantity, loadItems, "f");
-  __classPrivateFieldSet$2(this, _KupDataTable_loadMoreEventCounter, (_a = __classPrivateFieldGet$3(this, _KupDataTable_loadMoreEventCounter, "f"), _a++, _a), "f");
+  __classPrivateFieldSet$2(this, _KupDataTable_loadMoreEventCounter, (_a = __classPrivateFieldGet$4(this, _KupDataTable_loadMoreEventCounter, "f"), _a++, _a), "f");
 }, _KupDataTable_adjustGroupState = function _KupDataTable_adjustGroupState() {
-  if (!__classPrivateFieldGet$3(this, _KupDataTable_rows, "f") ||
-    __classPrivateFieldGet$3(this, _KupDataTable_rowsLength, "f") === 0 ||
-    !__classPrivateFieldGet$3(this, _KupDataTable_rows, "f")[0].hasOwnProperty('group')) {
+  if (!__classPrivateFieldGet$4(this, _KupDataTable_rows, "f") ||
+    __classPrivateFieldGet$4(this, _KupDataTable_rowsLength, "f") === 0 ||
+    !__classPrivateFieldGet$4(this, _KupDataTable_rows, "f")[0].hasOwnProperty('group')) {
     // no grouping
     return;
   }
-  __classPrivateFieldGet$3(this, _KupDataTable_rows, "f").forEach((r) => __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_adjustGroupStateFromRow).call(this, r));
+  __classPrivateFieldGet$4(this, _KupDataTable_rows, "f").forEach((r) => __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_adjustGroupStateFromRow).call(this, r));
 }, _KupDataTable_adjustGroupStateFromRow = function _KupDataTable_adjustGroupStateFromRow(row) {
   if (!row || !row.hasOwnProperty('group')) {
     // not a groping row, nothing to do
@@ -10868,9 +10868,9 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     // update expanded
     group.expanded = groupFromState.expanded;
   }
-  group.children.forEach((child) => __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_adjustGroupStateFromRow).call(this, child));
+  group.children.forEach((child) => __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_adjustGroupStateFromRow).call(this, child));
 }, _KupDataTable_sortRows = function _KupDataTable_sortRows() {
-  __classPrivateFieldSet$2(this, _KupDataTable_rows, sortRows(__classPrivateFieldGet$3(this, _KupDataTable_rows, "f"), this.sort), "f");
+  __classPrivateFieldSet$2(this, _KupDataTable_rows, sortRows(__classPrivateFieldGet$4(this, _KupDataTable_rows, "f"), this.sort), "f");
 }, _KupDataTable_getSortIcon = function _KupDataTable_getSortIcon(columnName) {
   // check if column in sort array
   for (let sortObj of this.sort) {
@@ -10896,7 +10896,7 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
   if (this.selection === SelectionMode.MULTIPLE_CHECKBOX) {
     colSpan += 1;
   }
-  if (__classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_hasRowActions).call(this)) {
+  if (__classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_hasRowActions).call(this)) {
     colSpan += 1;
   }
   return colSpan;
@@ -10926,7 +10926,7 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
       sourceColumn: this.data.columns[sortedColIndex],
       targetColumn: this.data.columns[receivingColIndex],
     });
-    __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_moveSortedColumns).call(this, this.data.columns, receivingColIndex, sortedColIndex);
+    __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_moveSortedColumns).call(this, this.data.columns, receivingColIndex, sortedColIndex);
   }
 }, _KupDataTable_moveSortedColumns = function _KupDataTable_moveSortedColumns(columns, receivingColumnIndex, sortedColumnIndex) {
   const remove = columns.splice(sortedColumnIndex, 1);
@@ -10939,25 +10939,25 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     .map((chunk, index) => (index !== 0 ? [h("br", null), chunk] : chunk));
 }, _KupDataTable_composeHeaderCellClassAndStyle = function _KupDataTable_composeHeaderCellClassAndStyle(columnIndex, extraCells = 0, column) {
   let columnClass = { ['header-cell']: true }, thStyle = column.style ? Object.assign({}, column.style) : {};
-  if (__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.isBar(column.obj) ||
-    __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.isButton(column.obj) ||
-    __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.isChart(column.obj) ||
-    __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.isCheckbox(column.obj) ||
-    __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.isImage(column.obj) ||
-    __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.isIcon(column.obj) ||
-    __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.isProgressBar(column.obj) ||
-    __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.isRadio(column.obj) ||
-    __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.isVoCodver(column.obj)) {
+  if (__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.isBar(column.obj) ||
+    __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.isButton(column.obj) ||
+    __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.isChart(column.obj) ||
+    __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.isCheckbox(column.obj) ||
+    __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.isImage(column.obj) ||
+    __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.isIcon(column.obj) ||
+    __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.isProgressBar(column.obj) ||
+    __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.isRadio(column.obj) ||
+    __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.isVoCodver(column.obj)) {
     columnClass['header-cell--centered'] = true;
   }
-  if (__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.isNumber(column.obj)) {
+  if (__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.isNumber(column.obj)) {
     columnClass['header-cell--is-number'] = true;
   }
-  if (__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.isIcon(column.obj)) {
+  if (__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.isIcon(column.obj)) {
     columnClass['header-cell--is-icon'] = true;
   }
   // For fixed cells styles and classes
-  const fixedCellStyle = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_composeFixedCellStyleAndClass).call(this, columnIndex + 1 + extraCells, 0, extraCells);
+  const fixedCellStyle = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_composeFixedCellStyleAndClass).call(this, columnIndex + 1 + extraCells, 0, extraCells);
   if (fixedCellStyle) {
     columnClass = Object.assign(Object.assign({}, columnClass), fixedCellStyle.fixedCellClasses);
     thStyle = Object.assign(Object.assign({}, thStyle), fixedCellStyle.fixedCellStyle);
@@ -10972,24 +10972,24 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
   let multiSelectColumn = null;
   if (this.selection === SelectionMode.MULTIPLE_CHECKBOX) {
     specialExtraCellsCount++;
-    const selectionStyleAndClass = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_composeFixedCellStyleAndClass).call(this, specialExtraCellsCount, 0, specialExtraCellsCount - 1);
+    const selectionStyleAndClass = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_composeFixedCellStyleAndClass).call(this, specialExtraCellsCount, 0, specialExtraCellsCount - 1);
     const style = Object.assign({ width: '30px', margin: '0 auto' }, (selectionStyleAndClass
       ? selectionStyleAndClass.fixedCellStyle
       : {}));
     multiSelectColumn = (h("th", { class: selectionStyleAndClass
         ? selectionStyleAndClass.fixedCellClasses
-        : {}, style: style }, h("kup-checkbox", { "onkup-checkbox-change": (e) => __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_onSelectAll).call(this, e), title: __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageRow.SELECTED) +
+        : {}, style: style }, h("kup-checkbox", { "onkup-checkbox-change": (e) => __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_onSelectAll).call(this, e), title: __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageRow.SELECTED) +
         `: ${this.selectedRows.length},` +
-        __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageRow.RENDERED) +
-        `: ${__classPrivateFieldGet$3(this, _KupDataTable_renderedRows, "f").length}`, checked: this.selectedRows.length > 0 &&
+        __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageRow.RENDERED) +
+        `: ${__classPrivateFieldGet$4(this, _KupDataTable_renderedRows, "f").length}`, checked: this.selectedRows.length > 0 &&
         this.selectedRows.length ===
-          __classPrivateFieldGet$3(this, _KupDataTable_renderedRows, "f").length })));
+          __classPrivateFieldGet$4(this, _KupDataTable_renderedRows, "f").length })));
   }
   // Renders action column
   let actionsColumn = null;
-  if (__classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_hasRowActions).call(this)) {
+  if (__classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_hasRowActions).call(this)) {
     specialExtraCellsCount++;
-    const selectionStyleAndClass = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_composeFixedCellStyleAndClass).call(this, specialExtraCellsCount, 0, specialExtraCellsCount - 1);
+    const selectionStyleAndClass = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_composeFixedCellStyleAndClass).call(this, specialExtraCellsCount, 0, specialExtraCellsCount - 1);
     actionsColumn = (h("th", { class: selectionStyleAndClass
         ? selectionStyleAndClass.fixedCellClasses
         : {}, style: selectionStyleAndClass
@@ -10998,26 +10998,26 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
   }
   // Renders normal cells
   const dataColumns = this.getVisibleColumns().map((column, columnIndex) => {
-    const { columnClass, thStyle } = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_composeHeaderCellClassAndStyle).call(this, columnIndex, specialExtraCellsCount, column);
+    const { columnClass, thStyle } = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_composeHeaderCellClassAndStyle).call(this, columnIndex, specialExtraCellsCount, column);
     let filter = null;
-    if (__classPrivateFieldGet$3(this, _KupDataTable_filtersColumnMenuInstance, "f").hasFiltersForColumn(this.filters, column)) {
-      const svgLabel = __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.REMOVE_FILTERS) + `: '${__classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_getFilterValueForTooltip).call(this, column)}'`;
+    if (__classPrivateFieldGet$4(this, _KupDataTable_filtersColumnMenuInstance, "f").hasFiltersForColumn(this.filters, column)) {
+      const svgLabel = __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.REMOVE_FILTERS) + `: '${__classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_getFilterValueForTooltip).call(this, column)}'`;
       filter = (h("span", { title: svgLabel, class: `kup-icon ${KupThemeIconValues.FILTER_REMOVE.replace('--', '')}` }));
     }
     let sortIcon = null;
-    let iconClass = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_getSortIcon).call(this, column.name);
+    let iconClass = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_getSortIcon).call(this, column.name);
     if (iconClass !== '') {
-      sortIcon = (h("span", { class: iconClass, title: __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_getSortDecode).call(this, column.name) }));
+      sortIcon = (h("span", { class: iconClass, title: __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_getSortDecode).call(this, column.name) }));
     }
     columnClass['header-cell--sortable'] = true;
     let keyIcon = null;
     if (column.isKey) {
-      keyIcon = (h("span", { class: `kup-icon ${KupThemeIconValues.KEY.replace('--', '')}`, title: __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageRow.KEY) }));
+      keyIcon = (h("span", { class: `kup-icon ${KupThemeIconValues.KEY.replace('--', '')}`, title: __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageRow.KEY) }));
     }
     // Sets custom columns width
-    if (__classPrivateFieldGet$3(this, _KupDataTable_sizedColumns, "f")) {
-      for (let i = 0; i < __classPrivateFieldGet$3(this, _KupDataTable_sizedColumns, "f").length; i++) {
-        const currentCol = __classPrivateFieldGet$3(this, _KupDataTable_sizedColumns, "f")[i];
+    if (__classPrivateFieldGet$4(this, _KupDataTable_sizedColumns, "f")) {
+      for (let i = 0; i < __classPrivateFieldGet$4(this, _KupDataTable_sizedColumns, "f").length; i++) {
+        const currentCol = __classPrivateFieldGet$4(this, _KupDataTable_sizedColumns, "f")[i];
         if (currentCol.name === column.name) {
           const width = currentCol.size + '';
           if (width.indexOf('ch') < 1) {
@@ -11030,7 +11030,7 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
         }
       }
     }
-    return (h("th", { ref: (el) => __classPrivateFieldGet$3(this, _KupDataTable_thRefs, "f").push(el), "data-cell": column, "data-column": column.name, class: columnClass, style: thStyle, title: column.name }, h("div", { class: "header-cell__content" }, h("span", { class: "header-cell__title" }, __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_applyLineBreaks).call(this, column.title)), h("span", { class: "header-cell__icons" }, keyIcon, sortIcon, filter)), this.resizableColumns ? (h("span", { class: "header-cell__drag-handler" })) : null));
+    return (h("th", { ref: (el) => __classPrivateFieldGet$4(this, _KupDataTable_thRefs, "f").push(el), "data-cell": column, "data-column": column.name, class: columnClass, style: thStyle, title: column.name }, h("div", { class: "header-cell__content" }, h("span", { class: "header-cell__title" }, __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_applyLineBreaks).call(this, column.title)), h("span", { class: "header-cell__icons" }, keyIcon, sortIcon, filter)), this.resizableColumns ? (h("span", { class: "header-cell__drag-handler" })) : null));
   });
   return [multiSelectColumn, actionsColumn, ...dataColumns];
   //  return [multiSelectColumn, groupColumn, actionsColumn, ...dataColumns];
@@ -11039,24 +11039,24 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
   let multiSelectColumn = null;
   if (this.selection === SelectionMode.MULTIPLE_CHECKBOX) {
     specialExtraCellsCount++;
-    const selectionStyleAndClass = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_composeFixedCellStyleAndClass).call(this, specialExtraCellsCount, 0, specialExtraCellsCount - 1);
+    const selectionStyleAndClass = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_composeFixedCellStyleAndClass).call(this, specialExtraCellsCount, 0, specialExtraCellsCount - 1);
     const style = Object.assign({ width: '30px', margin: '0 auto' }, (selectionStyleAndClass
       ? selectionStyleAndClass.fixedCellStyle
       : {}));
     multiSelectColumn = (h("th-sticky", { class: selectionStyleAndClass
         ? selectionStyleAndClass.fixedCellClasses
-        : null, style: style }, h("kup-checkbox", { "onkup-checkbox-change": (e) => __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_onSelectAll).call(this, e), title: __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageRow.SELECTED) +
+        : null, style: style }, h("kup-checkbox", { "onkup-checkbox-change": (e) => __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_onSelectAll).call(this, e), title: __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageRow.SELECTED) +
         `: ${this.selectedRows.length},` +
-        __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageRow.RENDERED) +
-        `: ${__classPrivateFieldGet$3(this, _KupDataTable_renderedRows, "f").length}`, checked: this.selectedRows.length > 0 &&
+        __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageRow.RENDERED) +
+        `: ${__classPrivateFieldGet$4(this, _KupDataTable_renderedRows, "f").length}`, checked: this.selectedRows.length > 0 &&
         this.selectedRows.length ===
-          __classPrivateFieldGet$3(this, _KupDataTable_renderedRows, "f").length })));
+          __classPrivateFieldGet$4(this, _KupDataTable_renderedRows, "f").length })));
   }
   // Empty cell for the actions
   let actionsColumn = null;
-  if (__classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_hasRowActions).call(this)) {
+  if (__classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_hasRowActions).call(this)) {
     specialExtraCellsCount++;
-    const selectionStyleAndClass = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_composeFixedCellStyleAndClass).call(this, specialExtraCellsCount, 0, specialExtraCellsCount - 1);
+    const selectionStyleAndClass = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_composeFixedCellStyleAndClass).call(this, specialExtraCellsCount, 0, specialExtraCellsCount - 1);
     actionsColumn = (h("th-sticky", { class: selectionStyleAndClass
         ? selectionStyleAndClass.fixedCellClasses
         : null, style: selectionStyleAndClass
@@ -11065,29 +11065,29 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
   }
   // Composes normal header cells
   const dataColumns = this.getVisibleColumns().map((column, columnIndex) => {
-    const { columnClass, thStyle } = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_composeHeaderCellClassAndStyle).call(this, columnIndex, specialExtraCellsCount, column);
-    return (h("th-sticky", { class: columnClass, style: thStyle }, h("div", { class: "header-cell__content" }, h("span", { class: "header-cell__title" }, __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_applyLineBreaks).call(this, column.title)))));
+    const { columnClass, thStyle } = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_composeHeaderCellClassAndStyle).call(this, columnIndex, specialExtraCellsCount, column);
+    return (h("th-sticky", { class: columnClass, style: thStyle }, h("div", { class: "header-cell__content" }, h("span", { class: "header-cell__title" }, __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_applyLineBreaks).call(this, column.title)))));
   });
   return [multiSelectColumn, actionsColumn, ...dataColumns];
 }, _KupDataTable_totalMenuPosition = function _KupDataTable_totalMenuPosition() {
   if (this.rootElement.shadowRoot) {
     const menu = this.rootElement.shadowRoot.querySelector('#totals-menu');
     if (menu) {
-      __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").dynamicPosition.register(menu, __classPrivateFieldGet$3(this, _KupDataTable_totalMenuCoords, "f"));
+      __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").dynamicPosition.register(menu, __classPrivateFieldGet$4(this, _KupDataTable_totalMenuCoords, "f"));
       __classPrivateFieldSet$2(this, _KupDataTable_clickCb, {
         cb: () => {
-          __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_closeTotalMenu).call(this);
+          __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_closeTotalMenu).call(this);
         },
         el: menu,
       }, "f");
-      __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").addClickCallback(__classPrivateFieldGet$3(this, _KupDataTable_clickCb, "f"), true);
-      __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").dynamicPosition.start(menu);
+      __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").addClickCallback(__classPrivateFieldGet$4(this, _KupDataTable_clickCb, "f"), true);
+      __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").dynamicPosition.start(menu);
       menu.menuVisible = true;
     }
   }
 }, _KupDataTable_onTotalMenuOpen = function _KupDataTable_onTotalMenuOpen(column) {
-  __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_closeTotalMenu).call(this);
-  __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_openTotalMenu).call(this, column);
+  __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_closeTotalMenu).call(this);
+  __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_openTotalMenu).call(this, column);
 }, _KupDataTable_renderRow = function _KupDataTable_renderRow(row, level = 0, rowCssIndex = 0, previousRow) {
   const visibleColumns = this.getVisibleColumns();
   let rowActionsCount = 0;
@@ -11119,17 +11119,17 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     for (let i = 0; i < level; i++) {
       indent.push(h("span", { class: "indent" }));
     }
-    if (__classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_hasTotals).call(this)) {
+    if (__classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_hasTotals).call(this)) {
       //const colSpan = this.multiSelection ? 2 : 1;
       const cells = [];
-      if (__classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_hasRowActions).call(this)) {
+      if (__classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_hasRowActions).call(this)) {
         cells.push(h("td", null));
       }
       if (this.selection === SelectionMode.MULTIPLE_CHECKBOX) {
         cells.push(h("td", null));
       }
       // adding 'grouping' cell
-      const grouplabelcell = (h("td", { colSpan: __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_calculateColspan).call(this) }, h("span", { class: "group-cell-content" }, indent, h("span", { class: iconClass }), h("span", { class: "text" }, composedGroupLabel))));
+      const grouplabelcell = (h("td", { colSpan: __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_calculateColspan).call(this) }, h("span", { class: "group-cell-content" }, indent, h("span", { class: iconClass }), h("span", { class: "text" }, composedGroupLabel))));
       // adding 'totals grouping' cells
       for (let column of visibleColumns) {
         let totalClass = 'total';
@@ -11144,11 +11144,11 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
           value = totalValue;
         }
         else {
-          if (__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").objects.isDate(column.obj)) {
+          if (__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").objects.isDate(column.obj)) {
             if (totalValue) {
-              if (__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").dates.isValid(totalValue, KupDatesFormats.ISO_DATE)) {
+              if (__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").dates.isValid(totalValue, KupDatesFormats.ISO_DATE)) {
                 value =
-                  __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").dates.format(totalValue);
+                  __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").dates.format(totalValue);
               }
               else {
                 console.warn(`invalid date: ${totalValue}`);
@@ -11161,18 +11161,18 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
         }
         cells.push(h("td", { class: totalClass }, value));
       }
-      jsxRows.push(h("tr", { ref: (el) => __classPrivateFieldGet$3(this, _KupDataTable_rowsRefs, "f").push(el), "data-row": row, class: "group group-label" }, grouplabelcell));
-      jsxRows.push(h("tr", { ref: (el) => __classPrivateFieldGet$3(this, _KupDataTable_rowsRefs, "f").push(el), "data-row": row, class: "group group-total" }, cells));
+      jsxRows.push(h("tr", { ref: (el) => __classPrivateFieldGet$4(this, _KupDataTable_rowsRefs, "f").push(el), "data-row": row, class: "group group-label" }, grouplabelcell));
+      jsxRows.push(h("tr", { ref: (el) => __classPrivateFieldGet$4(this, _KupDataTable_rowsRefs, "f").push(el), "data-row": row, class: "group group-total" }, cells));
     }
     else {
-      jsxRows.push(h("tr", { ref: (el) => __classPrivateFieldGet$3(this, _KupDataTable_rowsRefs, "f").push(el), "data-row": row, class: "group" }, h("td", { colSpan: __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_calculateColspan).call(this) }, h("span", { class: "group-cell-content" }, indent, h("span", { class: iconClass }), h("span", { class: "text" }, composedGroupLabel)))));
+      jsxRows.push(h("tr", { ref: (el) => __classPrivateFieldGet$4(this, _KupDataTable_rowsRefs, "f").push(el), "data-row": row, class: "group" }, h("td", { colSpan: __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_calculateColspan).call(this) }, h("span", { class: "group-cell-content" }, indent, h("span", { class: iconClass }), h("span", { class: "text" }, composedGroupLabel)))));
     }
     // if group is expanded, add children
-    if (__classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_isGroupExpanded).call(this, row)) {
+    if (__classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_isGroupExpanded).call(this, row)) {
       row.group.children
         // We must pass the previous element of the array to check if we must hide or display the value of the cell
         // When the column has specified the parameter hideValuesRepetitions
-        .map((row, groupRowIndex, currentArray) => __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_renderRow).call(this, row, level + 1, groupRowIndex, groupRowIndex > 0
+        .map((row, groupRowIndex, currentArray) => __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_renderRow).call(this, row, level + 1, groupRowIndex, groupRowIndex > 0
         ? currentArray[groupRowIndex - 1]
         : undefined))
         .forEach((jsxRow) => {
@@ -11199,11 +11199,11 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     let selectRowCell = null;
     if (this.selection === SelectionMode.MULTIPLE_CHECKBOX) {
       specialExtraCellsCount++;
-      const selectionStyleAndClass = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_composeFixedCellStyleAndClass).call(this, specialExtraCellsCount, rowCssIndex, specialExtraCellsCount - 1);
+      const selectionStyleAndClass = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_composeFixedCellStyleAndClass).call(this, specialExtraCellsCount, rowCssIndex, specialExtraCellsCount - 1);
       const props = {
         checked: this.selectedRows.includes(row),
         onChange: () => {
-          __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_handleRowSelect).call(this, row);
+          __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_handleRowSelect).call(this, row);
         },
       };
       selectRowCell = (h("td", { "row-select-cell": true, class: selectionStyleAndClass
@@ -11215,18 +11215,18 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     // Renders action cell
     // If active, this can be either the first or second cell
     let rowActionsCell = null;
-    if (__classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_hasRowActions).call(this)) {
+    if (__classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_hasRowActions).call(this)) {
       // Increments
       specialExtraCellsCount++;
-      const actionsStyleAndClass = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_composeFixedCellStyleAndClass).call(this, specialExtraCellsCount, rowCssIndex, specialExtraCellsCount - 1);
+      const actionsStyleAndClass = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_composeFixedCellStyleAndClass).call(this, specialExtraCellsCount, rowCssIndex, specialExtraCellsCount - 1);
       rowActionsCount += this.rowActions.length;
-      const defaultRowActions = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_renderActions).call(this, this.rowActions, row, 'default');
+      const defaultRowActions = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_renderActions).call(this, this.rowActions, row, 'default');
       let rowActionExpander = null;
       let variableActions = null;
       if (row.actions) {
         rowActionsCount += row.actions.length;
         // adding variable actions
-        variableActions = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_renderActions).call(this, row.actions, row, 'variable');
+        variableActions = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_renderActions).call(this, row.actions, row, 'variable');
       }
       else {
         // adding expander
@@ -11235,10 +11235,10 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
           resource: 'chevron-right',
           sizeX: '1.5em',
           sizeY: '1.5em',
-          title: __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.EXPAND),
+          title: __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.EXPAND),
           wrapperClass: 'expander',
           onClick: (e) => {
-            __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_onRowActionExpanderClick).call(this, e, row);
+            __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_onRowActionExpanderClick).call(this, e, row);
           },
         };
         rowActionsCount++;
@@ -11287,18 +11287,18 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
       let cellClass = null;
       let cellStyle = Object.assign({}, cell.style);
       //-- For fixed cells --
-      const fixedStyles = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_composeFixedCellStyleAndClass).call(this, cellIndex + 1 + specialExtraCellsCount, rowCssIndex, specialExtraCellsCount);
+      const fixedStyles = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_composeFixedCellStyleAndClass).call(this, cellIndex + 1 + specialExtraCellsCount, rowCssIndex, specialExtraCellsCount);
       if (fixedStyles) {
         cellStyle = Object.assign(cellStyle ? cellStyle : {}, fixedStyles.fixedCellStyle);
         cellClass = Object.assign(Object.assign({}, cellClass), fixedStyles.fixedCellClasses);
       }
       // Controls if there are columns with a specified width
-      if (__classPrivateFieldGet$3(this, _KupDataTable_sizedColumns, "f")) {
+      if (__classPrivateFieldGet$4(this, _KupDataTable_sizedColumns, "f")) {
         let colWidth = '';
         // Search if this column has a specified width
-        for (let j = 0; j < __classPrivateFieldGet$3(this, _KupDataTable_sizedColumns, "f").length; j++) {
-          if (name === __classPrivateFieldGet$3(this, _KupDataTable_sizedColumns, "f")[j].name) {
-            colWidth = __classPrivateFieldGet$3(this, _KupDataTable_sizedColumns, "f")[j].size;
+        for (let j = 0; j < __classPrivateFieldGet$4(this, _KupDataTable_sizedColumns, "f").length; j++) {
+          if (name === __classPrivateFieldGet$4(this, _KupDataTable_sizedColumns, "f")[j].name) {
+            colWidth = __classPrivateFieldGet$4(this, _KupDataTable_sizedColumns, "f")[j].size;
             break;
           }
         }
@@ -11320,7 +11320,7 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
       return (h("td", Object.assign({ title: title, colSpan: cell.span && cell.span.col ? cell.span.col : null, rowSpan: cell.span && cell.span.row ? cell.span.row : null, "data-cell": cell, "data-column": name, "data-row": row, style: cellStyle, class: cellClass }, eventHandlers), jsxCell));
     });
     // adding row to rendered rows
-    __classPrivateFieldGet$3(this, _KupDataTable_renderedRows, "f").push(row);
+    __classPrivateFieldGet$4(this, _KupDataTable_renderedRows, "f").push(row);
     const rowClass = {
       selected: this.selectedRows.includes(row),
     };
@@ -11330,7 +11330,7 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     const style = {
       '--kup_datatable_row_actions': rowActionsCount,
     };
-    return (h("tr", { ref: (el) => __classPrivateFieldGet$3(this, _KupDataTable_rowsRefs, "f").push(el), "data-row": row, class: rowClass, style: style }, selectRowCell, rowActionsCell, cells));
+    return (h("tr", { ref: (el) => __classPrivateFieldGet$4(this, _KupDataTable_rowsRefs, "f").push(el), "data-row": row, class: rowClass, style: style }, selectRowCell, rowActionsCell, cells));
   }
 }, _KupDataTable_renderActions = function _KupDataTable_renderActions(actions, row, type) {
   return actions.map((action, index) => {
@@ -11341,7 +11341,7 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
       sizeY: '1.5em',
       title: action.text,
       wrapperClass: 'action',
-      onClick: () => __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_onDefaultRowActionClick).call(this, {
+      onClick: () => __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_onDefaultRowActionClick).call(this, {
         action,
         row,
         index,
@@ -11352,58 +11352,58 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
   });
 }, _KupDataTable_onCustomSettingsClick = function _KupDataTable_onCustomSettingsClick() {
   if (!this.openedCustomSettings) {
-    __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_openCustomSettings).call(this);
+    __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_openCustomSettings).call(this);
   }
   else {
-    __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_closeCustomSettings).call(this);
+    __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_closeCustomSettings).call(this);
   }
 }, _KupDataTable_openCustomSettings = function _KupDataTable_openCustomSettings() {
-  __classPrivateFieldGet$3(this, _KupDataTable_customizeTopPanelRef, "f").menuVisible = true;
-  __classPrivateFieldGet$3(this, _KupDataTable_customizeTopButtonRef, "f").classList.add('toggled');
-  __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").dynamicPosition.start(__classPrivateFieldGet$3(this, _KupDataTable_customizeTopPanelRef, "f"));
+  __classPrivateFieldGet$4(this, _KupDataTable_customizeTopPanelRef, "f").menuVisible = true;
+  __classPrivateFieldGet$4(this, _KupDataTable_customizeTopButtonRef, "f").classList.add('toggled');
+  __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").dynamicPosition.start(__classPrivateFieldGet$4(this, _KupDataTable_customizeTopPanelRef, "f"));
   this.openedCustomSettings = true;
-  if (!__classPrivateFieldGet$3(this, _KupDataTable_clickCbCustomPanel, "f")) {
+  if (!__classPrivateFieldGet$4(this, _KupDataTable_clickCbCustomPanel, "f")) {
     __classPrivateFieldSet$2(this, _KupDataTable_clickCbCustomPanel, {
       cb: () => {
-        __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_closeCustomSettings).call(this);
+        __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_closeCustomSettings).call(this);
       },
-      el: __classPrivateFieldGet$3(this, _KupDataTable_customizeTopPanelRef, "f"),
+      el: __classPrivateFieldGet$4(this, _KupDataTable_customizeTopPanelRef, "f"),
     }, "f");
   }
-  __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").addClickCallback(__classPrivateFieldGet$3(this, _KupDataTable_clickCbCustomPanel, "f"), true);
+  __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").addClickCallback(__classPrivateFieldGet$4(this, _KupDataTable_clickCbCustomPanel, "f"), true);
 }, _KupDataTable_closeCustomSettings = function _KupDataTable_closeCustomSettings() {
-  __classPrivateFieldGet$3(this, _KupDataTable_customizeTopButtonRef, "f").classList.remove('toggled');
-  if (__classPrivateFieldGet$3(this, _KupDataTable_customizeTopPanelRef, "f") == null) {
+  __classPrivateFieldGet$4(this, _KupDataTable_customizeTopButtonRef, "f").classList.remove('toggled');
+  if (__classPrivateFieldGet$4(this, _KupDataTable_customizeTopPanelRef, "f") == null) {
     return;
   }
-  __classPrivateFieldGet$3(this, _KupDataTable_customizeTopPanelRef, "f").menuVisible = false;
+  __classPrivateFieldGet$4(this, _KupDataTable_customizeTopPanelRef, "f").menuVisible = false;
   this.openedCustomSettings = false;
-  __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").removeClickCallback(__classPrivateFieldGet$3(this, _KupDataTable_clickCbCustomPanel, "f"));
+  __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").removeClickCallback(__classPrivateFieldGet$4(this, _KupDataTable_clickCbCustomPanel, "f"));
 }, _KupDataTable_renderPaginator = function _KupDataTable_renderPaginator(top) {
   return (h("div", { class: "paginator-wrapper" }, h("div", { class: "paginator-tabs" }, this.showLoadMore ||
     (!this.lazyLoadRows &&
-      __classPrivateFieldGet$3(this, _KupDataTable_rowsLength, "f") > this.rowsPerPage) ? (h(FPaginator, { id: top ? 'top-paginator' : 'bottom-paginator', currentPage: this.currentPage, max: __classPrivateFieldGet$3(this, _KupDataTable_rowsLength, "f"), perPage: this.currentRowsPerPage
+      __classPrivateFieldGet$4(this, _KupDataTable_rowsLength, "f") > this.rowsPerPage) ? (h(FPaginator, { id: top ? 'top-paginator' : 'bottom-paginator', currentPage: this.currentPage, max: __classPrivateFieldGet$4(this, _KupDataTable_rowsLength, "f"), perPage: this.currentRowsPerPage
       ? this.currentRowsPerPage
       : this.rowsPerPage, onLoadMore: this.showLoadMore
       ? () => {
-        __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_onLoadMoreClick).call(this);
+        __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_onLoadMoreClick).call(this);
       }
-      : null, onNextPage: () => __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_handlePageChange).call(this, this.currentPage + 1), onPrevPage: () => __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_handlePageChange).call(this, this.currentPage - 1), onPageChange: (e) => __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_handlePageChange).call(this, e.detail.value), onRowsChange: (e) => __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_handleRowsPerPageChange).call(this, e.detail.value) })) : null)));
+      : null, onNextPage: () => __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_handlePageChange).call(this, this.currentPage + 1), onPrevPage: () => __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_handlePageChange).call(this, this.currentPage - 1), onPageChange: (e) => __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_handlePageChange).call(this, e.detail.value), onRowsChange: (e) => __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_handleRowsPerPageChange).call(this, e.detail.value) })) : null)));
 }, _KupDataTable_columnRemoveArea = function _KupDataTable_columnRemoveArea() {
   return (h("div", { class: "droparea__remove", ref: (el) => (__classPrivateFieldSet$2(this, _KupDataTable_removeDropareaRef, el, "f")) }, h(FImage, { resource: "delete", color: `var(${KupThemeColorValues.DANGER})`, sizeX: "30px", sizeY: "50px" }), h(FImage, { resource: "delete-empty", color: `var(${KupThemeColorValues.DANGER})`, sizeX: "30px", sizeY: "50px" })));
 }, _KupDataTable_columnGroupArea = function _KupDataTable_columnGroupArea() {
   return (h("div", { class: "droparea__groups", ref: (el) => (__classPrivateFieldSet$2(this, _KupDataTable_groupsDropareaRef, el, "f")) }, h(FImage, { resource: "bookmark", color: `var(${KupThemeColorValues.TEXT})`, sizeX: "30px", sizeY: "50px" }), h(FImage, { resource: "book", color: `var(${KupThemeColorValues.TEXT})`, sizeX: "30px", sizeY: "50px" })));
 }, _KupDataTable_hideShowColumnDropArea = function _KupDataTable_hideShowColumnDropArea(show, th) {
   if (show && th && (this.removableColumns || this.showGroups)) {
-    __classPrivateFieldGet$3(this, _KupDataTable_dropareaRef, "f").classList.add('droparea--visible');
-    __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").dynamicPosition.register(__classPrivateFieldGet$3(this, _KupDataTable_dropareaRef, "f"), th, 10, KupDynamicPositionPlacement.TOP);
-    __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").dynamicPosition.start(__classPrivateFieldGet$3(this, _KupDataTable_dropareaRef, "f"));
-    __classPrivateFieldGet$3(this, _KupDataTable_dropareaRef, "f").style.marginLeft =
-      th.clientWidth / 2 - __classPrivateFieldGet$3(this, _KupDataTable_dropareaRef, "f").clientWidth / 2 + 'px';
+    __classPrivateFieldGet$4(this, _KupDataTable_dropareaRef, "f").classList.add('droparea--visible');
+    __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").dynamicPosition.register(__classPrivateFieldGet$4(this, _KupDataTable_dropareaRef, "f"), th, 10, KupDynamicPositionPlacement.TOP);
+    __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").dynamicPosition.start(__classPrivateFieldGet$4(this, _KupDataTable_dropareaRef, "f"));
+    __classPrivateFieldGet$4(this, _KupDataTable_dropareaRef, "f").style.marginLeft =
+      th.clientWidth / 2 - __classPrivateFieldGet$4(this, _KupDataTable_dropareaRef, "f").clientWidth / 2 + 'px';
   }
   else {
-    __classPrivateFieldGet$3(this, _KupDataTable_dropareaRef, "f").classList.remove('droparea--visible');
-    +__classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").dynamicPosition.stop(__classPrivateFieldGet$3(this, _KupDataTable_dropareaRef, "f"));
+    __classPrivateFieldGet$4(this, _KupDataTable_dropareaRef, "f").classList.remove('droparea--visible');
+    +__classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").dynamicPosition.stop(__classPrivateFieldGet$4(this, _KupDataTable_dropareaRef, "f"));
   }
 }, _KupDataTable_handleColumnGroup = function _KupDataTable_handleColumnGroup(column2group) {
   // Get sorted column current position
@@ -11471,19 +11471,19 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
         icon: icons[i],
         id: codes[i],
         selected: selectedCode == codes[i],
-        value: __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(value),
+        value: __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(value),
       };
     }
   }
   return listItems;
 }, _KupDataTable_getFontSizeCodeFromDecode = function _KupDataTable_getFontSizeCodeFromDecode(decode) {
-  return __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_transcodeItem).call(this, decode, __classPrivateFieldGet$3(this, _KupDataTable_FONTSIZE_DECODES, "f"), __classPrivateFieldGet$3(this, _KupDataTable_FONTSIZE_CODES, "f"));
+  return __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_transcodeItem).call(this, decode, __classPrivateFieldGet$4(this, _KupDataTable_FONTSIZE_DECODES, "f"), __classPrivateFieldGet$4(this, _KupDataTable_FONTSIZE_CODES, "f"));
 }, _KupDataTable_renderFontSizePanel = function _KupDataTable_renderFontSizePanel() {
-  const listItems = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_createListData).call(this, __classPrivateFieldGet$3(this, _KupDataTable_FONTSIZE_CODES, "f"), __classPrivateFieldGet$3(this, _KupDataTable_FONTSIZE_ICONS, "f"), this.fontsize);
+  const listItems = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_createListData).call(this, __classPrivateFieldGet$4(this, _KupDataTable_FONTSIZE_CODES, "f"), __classPrivateFieldGet$4(this, _KupDataTable_FONTSIZE_ICONS, "f"), this.fontsize);
   const listData = { data: listItems, showIcons: true };
   const textfieldData = {
     trailingIcon: true,
-    label: __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageFontsize.LABEL),
+    label: __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageFontsize.LABEL),
     icon: 'arrow_drop_down',
   };
   const data = { 'kup-text-field': textfieldData, 'kup-list': listData };
@@ -11500,22 +11500,22 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
       text = KupLanguageFontsize.SMALL;
       break;
   }
-  return (h("div", { class: "customize-element fontsize-panel" }, h("kup-combobox", { isSelect: true, data: data, initialValue: __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(text), "onkup-combobox-itemclick": (e) => {
+  return (h("div", { class: "customize-element fontsize-panel" }, h("kup-combobox", { isSelect: true, data: data, initialValue: __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(text), "onkup-combobox-itemclick": (e) => {
       e.stopPropagation();
-      this.fontsize = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_getFontSizeCodeFromDecode).call(this, e.detail.node.id);
+      this.fontsize = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_getFontSizeCodeFromDecode).call(this, e.detail.node.id);
     } })));
 }, _KupDataTable_getDensityCodeFromDecode = function _KupDataTable_getDensityCodeFromDecode(decode) {
-  return __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_transcodeItem).call(this, decode, __classPrivateFieldGet$3(this, _KupDataTable_DENSITY_DECODES, "f"), [
+  return __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_transcodeItem).call(this, decode, __classPrivateFieldGet$4(this, _KupDataTable_DENSITY_DECODES, "f"), [
     'dense',
     'medium',
     'wide',
   ]);
 }, _KupDataTable_renderDensityPanel = function _KupDataTable_renderDensityPanel() {
-  const listItems = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_createListData).call(this, ['dense', 'medium', 'wide'], __classPrivateFieldGet$3(this, _KupDataTable_DENSITY_ICONS, "f"), this.density);
+  const listItems = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_createListData).call(this, ['dense', 'medium', 'wide'], __classPrivateFieldGet$4(this, _KupDataTable_DENSITY_ICONS, "f"), this.density);
   const listData = { data: listItems, showIcons: true };
   const textfieldData = {
     trailingIcon: true,
-    label: __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageDensity.LABEL),
+    label: __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageDensity.LABEL),
     icon: 'arrow_drop_down',
   };
   const data = { 'kup-text-field': textfieldData, 'kup-list': listData };
@@ -11532,14 +11532,14 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
       text = KupLanguageDensity.WIDE;
       break;
   }
-  return (h("div", { class: "customize-element density-panel" }, h("kup-combobox", { isSelect: true, initialValue: __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(text), selectMode: ItemsDisplayMode.DESCRIPTION, data: data, "onkup-combobox-itemclick": (e) => {
+  return (h("div", { class: "customize-element density-panel" }, h("kup-combobox", { isSelect: true, initialValue: __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(text), selectMode: ItemsDisplayMode.DESCRIPTION, data: data, "onkup-combobox-itemclick": (e) => {
       e.stopPropagation();
-      this.density = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_getDensityCodeFromDecode).call(this, e.detail.node.id);
+      this.density = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_getDensityCodeFromDecode).call(this, e.detail.node.id);
     } })));
 }, _KupDataTable_getGridCodeFromDecode = function _KupDataTable_getGridCodeFromDecode(decode) {
-  return __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_transcodeItem).call(this, decode, __classPrivateFieldGet$3(this, _KupDataTable_GRID_DECODES, "f"), __classPrivateFieldGet$3(this, _KupDataTable_GRID_CODES, "f"));
+  return __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_transcodeItem).call(this, decode, __classPrivateFieldGet$4(this, _KupDataTable_GRID_DECODES, "f"), __classPrivateFieldGet$4(this, _KupDataTable_GRID_CODES, "f"));
 }, _KupDataTable_renderTransposeSwitch = function _KupDataTable_renderTransposeSwitch() {
-  return (h("div", { class: "customize-element grid-panel" }, h("kup-switch", { checked: this.transpose, label: __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.TRANSPOSE_DATA), leadingLabel: true, "onkup-switch-change": (e) => {
+  return (h("div", { class: "customize-element grid-panel" }, h("kup-switch", { checked: this.transpose, label: __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.TRANSPOSE_DATA), leadingLabel: true, "onkup-switch-change": (e) => {
       e.stopPropagation();
       if (e.detail.value === 'on') {
         this.transpose = true;
@@ -11549,16 +11549,16 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
       }
     } })));
 }, _KupDataTable_renderTotalsMatrix = function _KupDataTable_renderTotalsMatrix() {
-  return (h("div", { class: "customize-element grid-panel" }, h("kup-button", { title: __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.TOTALS_TABLE) +
+  return (h("div", { class: "customize-element grid-panel" }, h("kup-button", { title: __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.TOTALS_TABLE) +
       ' (' +
-      __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.EXPERIMENTAL_FEAT) +
-      ')', label: __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.TOTALS_TABLE), icon: "exposure", "onkup-button-click": () => __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_switchToTotalsMatrix).call(this) })));
+      __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.EXPERIMENTAL_FEAT) +
+      ')', label: __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.TOTALS_TABLE), icon: "exposure", "onkup-button-click": () => __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_switchToTotalsMatrix).call(this) })));
 }, _KupDataTable_renderGridPanel = function _KupDataTable_renderGridPanel() {
-  const listItems = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_createListData).call(this, __classPrivateFieldGet$3(this, _KupDataTable_GRID_CODES, "f"), __classPrivateFieldGet$3(this, _KupDataTable_GRID_ICONS, "f"), this.showGrid);
+  const listItems = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_createListData).call(this, __classPrivateFieldGet$4(this, _KupDataTable_GRID_CODES, "f"), __classPrivateFieldGet$4(this, _KupDataTable_GRID_ICONS, "f"), this.showGrid);
   const listData = { data: listItems, showIcons: true };
   const textfieldData = {
     trailingIcon: true,
-    label: __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGrid.LABEL),
+    label: __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGrid.LABEL),
     icon: 'arrow_drop_down',
   };
   const data = { 'kup-text-field': textfieldData, 'kup-list': listData };
@@ -11578,9 +11578,9 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
       text = KupLanguageGrid.ROW;
       break;
   }
-  return (h("div", { class: "customize-element grid-panel" }, h("kup-combobox", { isSelect: true, initialValue: __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(text), data: data, "onkup-combobox-itemclick": (e) => {
+  return (h("div", { class: "customize-element grid-panel" }, h("kup-combobox", { isSelect: true, initialValue: __classPrivateFieldGet$4(this, _KupDataTable_kupManager, "f").language.translate(text), data: data, "onkup-combobox-itemclick": (e) => {
       e.stopPropagation();
-      const grid = __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_getGridCodeFromDecode).call(this, e.detail.value);
+      const grid = __classPrivateFieldGet$4(this, _KupDataTable_instances, "m", _KupDataTable_getGridCodeFromDecode).call(this, e.detail.value);
       this.showGrid = grid;
     } })));
 };
@@ -11984,7 +11984,7 @@ var KupDialogProps;
 
 const kupDialogCss = ":host{--kup_dialog_header_height:var(--kup-dialog-header-height, 2em);box-sizing:border-box;display:block;height:var(--kup_dialog_height);left:var(--kup_dialog_left);min-height:var(--kup_dialog_height);min-width:var(--kup_dialog_width);position:absolute;top:var(--kup_dialog_top);transition:opacity 0.25s ease-in;width:var(--kup_dialog_width)}#kup-component{height:100%;width:100%}[fade-in]{opacity:0}[fade-in] ::slotted{display:none}.header{background-color:var(--kup-title-background-color);color:var(--kup-title-color);display:flex;flex-direction:row;height:var(--kup_dialog_header_height);position:relative;width:100%}.header__title{font-weight:bold;line-height:2em;padding-left:0.5em;padding-right:2em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header__close.f-image{--kup-icon-color:var(--kup-title-color);cursor:pointer;margin-right:0;transition:opacity 0.25s;position:absolute;right:0;background:var(--kup-title-background-color)}.header__close.f-image:hover{opacity:0.5}.content{height:calc(100% - var(--kup_dialog_header_height));overflow:auto;user-select:text}";
 
-var __classPrivateFieldGet$2 = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+var __classPrivateFieldGet$3 = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
   if (kind === "a" && !f)
     throw new TypeError("Private accessor was defined without a getter");
   if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
@@ -12067,12 +12067,12 @@ const KupDialog = class {
   /*          L i f e c y c l e   H o o k s          */
   /*-------------------------------------------------*/
   componentWillLoad() {
-    __classPrivateFieldGet$2(this, _KupDialog_kupManager, "f").debug.logLoad(this, false);
-    __classPrivateFieldGet$2(this, _KupDialog_kupManager, "f").theme.register(this);
+    __classPrivateFieldGet$3(this, _KupDialog_kupManager, "f").debug.logLoad(this, false);
+    __classPrivateFieldGet$3(this, _KupDialog_kupManager, "f").theme.register(this);
   }
   componentDidLoad() {
     var _a;
-    __classPrivateFieldGet$2(this, _KupDialog_kupManager, "f").interact.dialogify(this.rootElement, __classPrivateFieldGet$2(this, _KupDialog_header, "f") ? __classPrivateFieldGet$2(this, _KupDialog_header, "f") : null, !this.resizable);
+    __classPrivateFieldGet$3(this, _KupDialog_kupManager, "f").interact.dialogify(this.rootElement, __classPrivateFieldGet$3(this, _KupDialog_header, "f") ? __classPrivateFieldGet$3(this, _KupDialog_header, "f") : null, !this.resizable);
     if ((_a = this.autoCenter) === null || _a === void 0 ? void 0 : _a.onReady) {
       this.recalcPosition().then(() => {
         this.rootElement.removeAttribute('fade-in');
@@ -12082,7 +12082,7 @@ const KupDialog = class {
       this.rootElement.removeAttribute('fade-in');
     }
     if (this.modal) {
-      __classPrivateFieldGet$2(this, _KupDialog_kupManager, "f").interact.showModalBackdrop(this.modal.closeOnBackdropClick
+      __classPrivateFieldGet$3(this, _KupDialog_kupManager, "f").interact.showModalBackdrop(this.modal.closeOnBackdropClick
         ? () => {
           this.close();
         }
@@ -12092,13 +12092,13 @@ const KupDialog = class {
       comp: this,
       id: this.rootElement.id,
     });
-    __classPrivateFieldGet$2(this, _KupDialog_kupManager, "f").debug.logLoad(this, true);
+    __classPrivateFieldGet$3(this, _KupDialog_kupManager, "f").debug.logLoad(this, true);
   }
   componentWillRender() {
-    __classPrivateFieldGet$2(this, _KupDialog_kupManager, "f").debug.logRender(this, false);
+    __classPrivateFieldGet$3(this, _KupDialog_kupManager, "f").debug.logRender(this, false);
   }
   componentDidRender() {
-    __classPrivateFieldGet$2(this, _KupDialog_kupManager, "f").debug.logRender(this, true);
+    __classPrivateFieldGet$3(this, _KupDialog_kupManager, "f").debug.logRender(this, true);
   }
   render() {
     var _a;
@@ -12106,13 +12106,13 @@ const KupDialog = class {
       '--kup_dialog_height': this.sizeY ? this.sizeY : 'auto',
       '--kup_dialog_width': this.sizeX ? this.sizeX : 'auto',
     };
-    return (h(Host, { "fade-in": true, style: style }, h("style", null, __classPrivateFieldGet$2(this, _KupDialog_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, this.header ? (h("div", { class: "header", ref: (el) => (__classPrivateFieldSet$1(this, _KupDialog_header, el, "f")) }, this.header.title ? (h("div", { class: "header__title" }, this.header.title)) : null, ((_a = this.header.icons) === null || _a === void 0 ? void 0 : _a.close) ? (h(FImage, { onClick: () => this.close(), sizeX: "1.25em", sizeY: "100%", resource: "clear", wrapperClass: "header__close" })) : null)) : null, h("div", { class: "content" }, h("slot", null)))));
+    return (h(Host, { "fade-in": true, style: style }, h("style", null, __classPrivateFieldGet$3(this, _KupDialog_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, this.header ? (h("div", { class: "header", ref: (el) => (__classPrivateFieldSet$1(this, _KupDialog_header, el, "f")) }, this.header.title ? (h("div", { class: "header__title" }, this.header.title)) : null, ((_a = this.header.icons) === null || _a === void 0 ? void 0 : _a.close) ? (h(FImage, { onClick: () => this.close(), sizeX: "1.25em", sizeY: "100%", resource: "clear", wrapperClass: "header__close" })) : null)) : null, h("div", { class: "content" }, h("slot", null)))));
   }
   disconnectedCallback() {
     if (this.modal) {
-      __classPrivateFieldGet$2(this, _KupDialog_kupManager, "f").interact.hideModalBackdrop();
+      __classPrivateFieldGet$3(this, _KupDialog_kupManager, "f").interact.hideModalBackdrop();
     }
-    __classPrivateFieldGet$2(this, _KupDialog_kupManager, "f").theme.unregister(this);
+    __classPrivateFieldGet$3(this, _KupDialog_kupManager, "f").theme.unregister(this);
   }
   get rootElement() { return getElement$1(this); }
 };
@@ -14238,7 +14238,7 @@ KupImage.style = kupImageCss;
 
 const kupListCss = ":host{--kup_list_background:var(\n    --kup-list-background,\n    var(--kup-background-color)\n  );--kup_list_color:var(--kup-list-color, var(--kup-text-color));--kup_list_font_family:var(--kup-list-font-family, var(--kup-font-family));--kup_list_font_size:var(--kup-list-font-size, var(--kup-font-size));--kup_list_font_weight:var(--kup-list-font-weight, 400);--kup_list_group_item_height:var(--kup-list-group-item-height, 3em);--kup_list_item_height:var(--kup-list-item-height, 2.5em);--kup_list_item_padding_left:var(--kup-list-item-padding, 0.75em);--kup_list_item_padding_right:var(--kup-list-item-padding, 0.75em);--kup_list_max_height_as_menu:var(--kup-list-max-height-as-menu, 33vh);--kup_list_primary_color:var(\n    --kup-list-primary-color,\n    var(--kup-primary-color)\n  );--kup_list_primary_color_rgb:var(\n    --kup-list-primary-color-rgb,\n    var(--kup-primary-color-rgb)\n  );--kup_list_separator_color:var(\n    --kup-list-separator-color,\n    rgba(var(--kup-text-color-rgb), 0.25)\n  );--kup_list_transition:var(--kup-list-transition, 120ms);display:block;font-family:var(--kup_list_font_family);font-size:var(--kup_list_font_size);outline:none}.list{background:var(--kup_list_background);color:var(--kup_list_color);font-weight:var(--kup_list_font_weight);letter-spacing:0.009375em;line-height:1.5em;list-style-type:none;margin:0;padding:0.5em 0;text-decoration:inherit;text-transform:inherit}.list--empty{padding:0}.list .list-item{display:-ms-flexbox;display:flex;height:var(--kup_list_item_height);position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;padding-left:var(--kup_list_item_padding_left);padding-right:calc(var(--kup_list_item_padding_left) + var(--kup_list_item_expand_padding, 0px));overflow:hidden;outline:none;transition:background-color var(--kup_list_transition), color var(--kup_list_transition)}.list .list-item[role=checkbox],.list .list-item[role=radio]{height:var(--kup_list_group_item_height)}.list .list-item.list-item--activated,.list .list-item.list-item--activated .list-item__graphic,.list .list-item.list-item--selected,.list .list-item.list-item--selected .list-item__graphic{background-color:rgba(var(--kup_list_primary_color_rgb), 0.175);color:var(--kup_list_primary_color)}.list .list-item .list-item__text{-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.list .list-item .list-item__primary-text{-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin-top:0;line-height:normal;margin-bottom:-1.5em;display:block}.list .list-item .list-item__primary-text:before{display:inline-block;width:0;height:1.5em;content:\"\";vertical-align:0}.list .list-item .list-item__primary-text:after{display:inline-block;width:0;height:2em;content:\"\";vertical-align:-2em}.list .list-item .list-item__secondary-text{-moz-osx-font-smoothing:grayscale;-o-text-overflow:ellipsis;-webkit-font-smoothing:antialiased;display:block;font-size:0.875em;font-weight:400;letter-spacing:0.0178571429em;line-height:1.25em;text-decoration:inherit;text-transform:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin-top:0;line-height:normal;color:var(--kup_list_color);opacity:0.75}.list .list-item .kup-icon{margin:0;margin-right:0.75em}.list .list-item kup-checkbox{margin:0}.list .list-divider{background-color:var(--kup_list_separator_color);height:1px;padding:0;background-clip:content-box}.list.list--two-line .list-item{height:3.6em}.list.list--two-line .list-item__text{-ms-flex-item-align:start;align-self:flex-start}.list:not(.list--non-interactive)>:not(.list-item--disabled).list-item{cursor:pointer}.list:not(.list--non-interactive)>:not(.list-item--disabled).list-item label{cursor:pointer}.list:not(.list--non-interactive) .list-item:not(.list-item--selected):hover,.list:not(.list--non-interactive) .list-item:not(.list-item--selected).list-item--focused{background-color:var(--kup-hover-background-color);color:var(--kup-hover-color)}.list.text-hidden .list-item__text{display:none}.kup-menu{animation:fade-in 0.25s ease-out;background-color:var(--kup-background-color);box-shadow:var(--kup-box-shadow);color:var(--kup-text-color);display:none;max-height:var(--kup_list_max_height_as_menu);overflow:auto;position:relative;transform:none;transform-origin:unset;transition:height 0.2s;user-select:none;will-change:unset}.kup-menu.visible{display:block}.kup-menu .list-item__text{user-select:none}:host([nested-list]){--kup_list_item_expand_padding:1.5em;max-width:250px}:host([nested-list]) .kup-menu{max-height:unset;overflow:visible}:host([nested-list]) kup-list{display:none;left:100%;position:absolute;top:0}:host([nested-list]) .list-item{overflow:visible}:host([nested-list]) .list-item__expand-icon{position:absolute;right:0}:host([nested-list]) .list-item:hover kup-list{display:block}:host(.kup-paddingless) .list{padding:0}:host(.kup-danger){--kup-list-primary-color:var(--kup-danger-color);--kup-list-primary-color-rgb:var(--kup-danger-color-rgb)}:host(.kup-info){--kup-list-primary-color:var(--kup-info-color);--kup-list-primary-color-rgb:var(--kup-info-color-rgb)}:host(.kup-secondary){--kup-list-primary-color:var(--kup-secondary-color);--kup-list-primary-color-rgb:var(--kup-secondary-color-rgb)}:host(.kup-success){--kup-list-primary-color:var(--kup-success-color);--kup-list-primary-color-rgb:var(--kup-success-color-rgb)}:host(.kup-warning){--kup-list-primary-color:var(--kup-warning-color);--kup-list-primary-color-rgb:var(--kup-warning-color-rgb)}";
 
-var __classPrivateFieldGet$1 = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+var __classPrivateFieldGet$2 = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
   if (kind === "a" && !f)
     throw new TypeError("Private accessor was defined without a getter");
   if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
@@ -14299,7 +14299,7 @@ const KupList = class {
     });
   }
   onKupClick(index) {
-    __classPrivateFieldGet$1(this, _KupList_instances, "m", _KupList_handleSelection).call(this, index);
+    __classPrivateFieldGet$2(this, _KupList_instances, "m", _KupList_handleSelection).call(this, index);
   }
   /*-------------------------------------------------*/
   /*                L i s t e n e r s                */
@@ -14320,7 +14320,7 @@ const KupList = class {
         case 'Enter':
           e.preventDefault();
           e.stopPropagation();
-          __classPrivateFieldGet$1(this, _KupList_instances, "m", _KupList_handleSelection).call(this, this.focused);
+          __classPrivateFieldGet$2(this, _KupList_instances, "m", _KupList_handleSelection).call(this, this.focused);
           break;
       }
     }
@@ -14346,10 +14346,10 @@ const KupList = class {
     else {
       this.focused++;
     }
-    if (this.focused > __classPrivateFieldGet$1(this, _KupList_listItems, "f").length - 1) {
+    if (this.focused > __classPrivateFieldGet$2(this, _KupList_listItems, "f").length - 1) {
       this.focused = 0;
     }
-    __classPrivateFieldGet$1(this, _KupList_listItems, "f")[this.focused].focus();
+    __classPrivateFieldGet$2(this, _KupList_listItems, "f")[this.focused].focus();
   }
   /**
    * Focuses the previous element of the list.
@@ -14370,9 +14370,9 @@ const KupList = class {
       this.focused--;
     }
     if (this.focused < 0) {
-      this.focused = __classPrivateFieldGet$1(this, _KupList_listItems, "f").length - 1;
+      this.focused = __classPrivateFieldGet$2(this, _KupList_listItems, "f").length - 1;
     }
-    __classPrivateFieldGet$1(this, _KupList_listItems, "f")[this.focused].focus();
+    __classPrivateFieldGet$2(this, _KupList_listItems, "f")[this.focused].focus();
   }
   /**
    * Used to retrieve component's props values.
@@ -14409,7 +14409,7 @@ const KupList = class {
     if (index === undefined) {
       index = this.focused;
     }
-    __classPrivateFieldGet$1(this, _KupList_instances, "m", _KupList_handleSelection).call(this, index);
+    __classPrivateFieldGet$2(this, _KupList_instances, "m", _KupList_handleSelection).call(this, index);
   }
   /**
    * Sets the props to the component.
@@ -14422,8 +14422,8 @@ const KupList = class {
   /*          L i f e c y c l e   H o o k s          */
   /*-------------------------------------------------*/
   componentWillLoad() {
-    __classPrivateFieldGet$1(this, _KupList_kupManager, "f").debug.logLoad(this, false);
-    __classPrivateFieldGet$1(this, _KupList_kupManager, "f").theme.register(this);
+    __classPrivateFieldGet$2(this, _KupList_kupManager, "f").debug.logLoad(this, false);
+    __classPrivateFieldGet$2(this, _KupList_kupManager, "f").theme.register(this);
     for (let index = 0; index < this.data.length; index++) {
       const el = this.data[index];
       if (el.selected) {
@@ -14432,10 +14432,10 @@ const KupList = class {
     }
   }
   componentDidLoad() {
-    __classPrivateFieldGet$1(this, _KupList_kupManager, "f").debug.logLoad(this, true);
+    __classPrivateFieldGet$2(this, _KupList_kupManager, "f").debug.logLoad(this, true);
   }
   componentWillRender() {
-    __classPrivateFieldGet$1(this, _KupList_kupManager, "f").debug.logRender(this, false);
+    __classPrivateFieldGet$2(this, _KupList_kupManager, "f").debug.logRender(this, false);
   }
   componentDidRender() {
     if (this.isMenu &&
@@ -14446,7 +14446,7 @@ const KupList = class {
         this.rootElement.focus();
       }, 0);
     }
-    __classPrivateFieldGet$1(this, _KupList_kupManager, "f").debug.logRender(this, true);
+    __classPrivateFieldGet$2(this, _KupList_kupManager, "f").debug.logRender(this, true);
   }
   render() {
     __classPrivateFieldSet(this, _KupList_listItems, [], "f");
@@ -14458,7 +14458,7 @@ const KupList = class {
         wrapperClass += ' visible';
       }
     }
-    __classPrivateFieldGet$1(this, _KupList_instances, "m", _KupList_checkRoleType).call(this);
+    __classPrivateFieldGet$2(this, _KupList_instances, "m", _KupList_checkRoleType).call(this);
     if (this.selectable != true) {
       componentClass += ' list--non-interactive';
     }
@@ -14473,17 +14473,17 @@ const KupList = class {
     }
     let roleAttr = this.roleType;
     let ariaMultiSelectable = 'false';
-    if (__classPrivateFieldGet$1(this, _KupList_instances, "m", _KupList_isMultiSelection).call(this)) {
+    if (__classPrivateFieldGet$2(this, _KupList_instances, "m", _KupList_isMultiSelection).call(this)) {
       ariaMultiSelectable = 'true';
     }
     __classPrivateFieldSet(this, _KupList_radios, [], "f");
     let index = 0;
-    return (h(Host, null, h("style", null, __classPrivateFieldGet$1(this, _KupList_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { id: "kup-component", class: wrapperClass }, h("ul", { class: componentClass, role: roleAttr, "aria-multiselectable": ariaMultiSelectable }, this.data
-      .filter((item) => __classPrivateFieldGet$1(this, _KupList_instances, "m", _KupList_itemCompliant).call(this, item))
-      .map((item) => __classPrivateFieldGet$1(this, _KupList_instances, "m", _KupList_renderListItem).call(this, item, index++))))));
+    return (h(Host, null, h("style", null, __classPrivateFieldGet$2(this, _KupList_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { id: "kup-component", class: wrapperClass }, h("ul", { class: componentClass, role: roleAttr, "aria-multiselectable": ariaMultiSelectable }, this.data
+      .filter((item) => __classPrivateFieldGet$2(this, _KupList_instances, "m", _KupList_itemCompliant).call(this, item))
+      .map((item) => __classPrivateFieldGet$2(this, _KupList_instances, "m", _KupList_renderListItem).call(this, item, index++))))));
   }
   disconnectedCallback() {
-    __classPrivateFieldGet$1(this, _KupList_kupManager, "f").theme.unregister(this);
+    __classPrivateFieldGet$2(this, _KupList_kupManager, "f").theme.unregister(this);
   }
   get rootElement() { return getElement$1(this); }
 };
@@ -14534,7 +14534,7 @@ _KupList_kupManager = new WeakMap(), _KupList_radios = new WeakMap(), _KupList_l
   if (this.showIcons == true &&
     item.icon != null &&
     item.icon.trim() != '') {
-    imageTag = __classPrivateFieldGet$1(this, _KupList_instances, "m", _KupList_getIconTag).call(this, item.icon);
+    imageTag = __classPrivateFieldGet$2(this, _KupList_instances, "m", _KupList_getIconTag).call(this, item.icon);
   }
   let primaryTextTag = [
     getIdOfItemByDisplayMode(item, this.displayMode, ' - '),
@@ -14550,9 +14550,9 @@ _KupList_kupManager = new WeakMap(), _KupList_radios = new WeakMap(), _KupList_l
   }
   let classAttr = 'list-item';
   let tabIndexAttr = item.selected == true ? '0' : '-1';
-  if (!__classPrivateFieldGet$1(this, _KupList_instances, "m", _KupList_isNested).call(this) &&
+  if (!__classPrivateFieldGet$2(this, _KupList_instances, "m", _KupList_isNested).call(this) &&
     item.selected == true &&
-    __classPrivateFieldGet$1(this, _KupList_instances, "m", _KupList_isListBoxRule).call(this)) {
+    __classPrivateFieldGet$2(this, _KupList_instances, "m", _KupList_isListBoxRule).call(this)) {
     classAttr += ' list-item--selected';
   }
   if (this.focused === index) {
@@ -14568,7 +14568,7 @@ _KupList_kupManager = new WeakMap(), _KupList_radios = new WeakMap(), _KupList_l
     imageTag,
     h("span", { class: "list-item__text" }, primaryTextTag, secTextTag),
   ];
-  if (__classPrivateFieldGet$1(this, _KupList_instances, "m", _KupList_isRadioButtonRule).call(this)) {
+  if (__classPrivateFieldGet$2(this, _KupList_instances, "m", _KupList_isRadioButtonRule).call(this)) {
     roleAttr = 'radio';
     ariaCheckedAttr = item.selected == true ? 'true' : 'false';
     let dataTmp = [
@@ -14582,12 +14582,12 @@ _KupList_kupManager = new WeakMap(), _KupList_radios = new WeakMap(), _KupList_l
       display: 'none',
     };
     innerSpanTag = [
-      h("span", { class: "list-item__graphic" }, h("input", { type: "radio", style: trickForMDC }), h("kup-radio", { data: dataTmp, id: this.rootElement.id + '_' + index, ref: (el) => (__classPrivateFieldGet$1(this, _KupList_radios, "f")[index] = el) })),
+      h("span", { class: "list-item__graphic" }, h("input", { type: "radio", style: trickForMDC }), h("kup-radio", { data: dataTmp, id: this.rootElement.id + '_' + index, ref: (el) => (__classPrivateFieldGet$2(this, _KupList_radios, "f")[index] = el) })),
       imageTag,
       h("label", { class: "list-item__text", htmlFor: this.rootElement.id + '_' + index }, primaryTextTag, secTextTag),
     ];
   }
-  else if (__classPrivateFieldGet$1(this, _KupList_instances, "m", _KupList_isCheckBoxRule).call(this)) {
+  else if (__classPrivateFieldGet$2(this, _KupList_instances, "m", _KupList_isCheckBoxRule).call(this)) {
     roleAttr = 'checkbox';
     ariaCheckedAttr = item.selected == true ? 'true' : 'false';
     let checkedAttr = item.selected == true ? true : false;
@@ -14605,14 +14605,14 @@ _KupList_kupManager = new WeakMap(), _KupList_radios = new WeakMap(), _KupList_l
     vNodes.push(h("li", { role: "separator", class: "list-divider" }));
   }
   vNodes.push(h("li", { ref: (el) => {
-      __classPrivateFieldGet$1(this, _KupList_listItems, "f").push(el);
+      __classPrivateFieldGet$2(this, _KupList_listItems, "f").push(el);
     }, class: classAttr, role: roleAttr, tabindex: tabIndexAttr, "data-id": item.id, "aria-selected": ariaSelectedAttr, "aria-checked": ariaCheckedAttr, onBlur: !this.selectable
       ? (e) => e.stopPropagation()
       : () => this.onKupBlur(), onFocus: !this.selectable
       ? (e) => e.stopPropagation()
       : () => this.onKupFocus(), onClick: !this.selectable
       ? (e) => e.stopPropagation()
-      : __classPrivateFieldGet$1(this, _KupList_instances, "m", _KupList_isNested).call(this)
+      : __classPrivateFieldGet$2(this, _KupList_instances, "m", _KupList_isNested).call(this)
         ? (e) => {
           e.stopPropagation();
           this.onKupClick(index);
@@ -14633,7 +14633,7 @@ _KupList_kupManager = new WeakMap(), _KupList_radios = new WeakMap(), _KupList_l
   };
   return (h(FImage, Object.assign({}, propsFImage, { resource: icon, wrapperClass: `icon-button__icon kup-icon` })));
 }, _KupList_isMultiSelection = function _KupList_isMultiSelection() {
-  return __classPrivateFieldGet$1(this, _KupList_instances, "m", _KupList_isCheckBoxRule).call(this);
+  return __classPrivateFieldGet$2(this, _KupList_instances, "m", _KupList_isCheckBoxRule).call(this);
 }, _KupList_isCheckBoxRule = function _KupList_isCheckBoxRule() {
   return this.roleType == KupListRole.GROUP;
 }, _KupList_isRadioButtonRule = function _KupList_isRadioButtonRule() {
@@ -14641,7 +14641,7 @@ _KupList_kupManager = new WeakMap(), _KupList_radios = new WeakMap(), _KupList_l
 }, _KupList_isListBoxRule = function _KupList_isListBoxRule() {
   return this.roleType == KupListRole.LISTBOX;
 }, _KupList_checkRoleType = function _KupList_checkRoleType() {
-  if (!__classPrivateFieldGet$1(this, _KupList_instances, "m", _KupList_isCheckBoxRule).call(this) && !__classPrivateFieldGet$1(this, _KupList_instances, "m", _KupList_isRadioButtonRule).call(this)) {
+  if (!__classPrivateFieldGet$2(this, _KupList_instances, "m", _KupList_isCheckBoxRule).call(this) && !__classPrivateFieldGet$2(this, _KupList_instances, "m", _KupList_isRadioButtonRule).call(this)) {
     this.roleType = KupListRole.LISTBOX;
   }
 }, _KupList_itemCompliant = function _KupList_itemCompliant(item) {
@@ -15629,11 +15629,13 @@ KupTabBar.style = kupTabBarCss;
  */
 var KupTextFieldProps;
 (function (KupTextFieldProps) {
+  KupTextFieldProps["allowNegative"] = "When true, could be input negative numbers. It has effect only with number input type.";
   KupTextFieldProps["customStyle"] = "Custom style of the component.";
   KupTextFieldProps["decimals"] = "Number of decimals (should be used when inputType is number).";
   KupTextFieldProps["disabled"] = "When set to true, the component is disabled.";
   KupTextFieldProps["emitSubmitEventOnEnter"] = "When the text field is part of the autocomplete component and the list is opened, enter key selects the item and doesn't submit.";
   KupTextFieldProps["fullWidth"] = "When set to true, the component will be rendered at full width.";
+  KupTextFieldProps["group"] = "When true, the number will be formatted with group separator. It has effect only with number input type.";
   KupTextFieldProps["helper"] = "When set, its content will be shown as a help text below the field.";
   KupTextFieldProps["helperEnabled"] = "When true, the helper will be displayed.";
   KupTextFieldProps["helperWhenFocused"] = "When set, the helper will be shown only when the field is focused.";
@@ -15641,6 +15643,7 @@ var KupTextFieldProps;
   KupTextFieldProps["initialValue"] = "Sets the initial value of the component";
   KupTextFieldProps["inputMode"] = "The HTML inputmode of the input element. It has no effect on text areas.";
   KupTextFieldProps["inputType"] = "The HTML type of the input element. It has no effect on text areas.";
+  KupTextFieldProps["integers"] = "Number of integers (should be used when inputType is number).";
   KupTextFieldProps["isClearable"] = "Enables a clear trailing icon.";
   KupTextFieldProps["label"] = "When set, its content will be shown as a label.";
   KupTextFieldProps["leadingLabel"] = "When set to true, the label will be on the left of the component.";
@@ -15658,6 +15661,14 @@ var KupTextFieldProps;
 
 const kupTextFieldCss = ":host{display:block;font-size:var(--kup-font-size)}:host([full-width]){width:100%}:host([full-width]) #kup-component{width:100%}:host(.kup-full-height){height:100%}:host(.kup-full-height) #kup-component,:host(.kup-full-height) .f-text-field,:host(.kup-full-height) .mdc-text-field{height:100%}:host(.kup-shaped) #kup-component .mdc-text-field.mdc-text-field--filled{border-radius:16px 16px 0 0}:host(.kup-shaped) #kup-component .mdc-text-field.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading{border-radius:28px 0 0 28px;width:28px}:host(.kup-shaped) #kup-component .mdc-text-field.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-radius:0 28px 28px 0;width:28px}";
 
+var __classPrivateFieldGet$1 = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+  if (kind === "a" && !f)
+    throw new TypeError("Private accessor was defined without a getter");
+  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 _KupTextField_instances, _KupTextField_getValueForOutput, _KupTextField_setValueFromEventTaget;
 const KupTextField = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -15669,16 +15680,19 @@ const KupTextField = class {
     this.kupIconClick = createEvent(this, "kup-textfield-iconclick", 6);
     this.kupClearIconClick = createEvent(this, "kup-textfield-cleariconclick", 6);
     this.kupTextFieldSubmit = createEvent(this, "kup-textfield-submit", 6);
+    _KupTextField_instances.add(this);
     /**
      * Instance of the KupManager class.
      */
     this.kupManager = kupManagerInstance();
     this.value = '';
+    this.allowNegative = false;
     this.customStyle = '';
     this.decimals = null;
     this.disabled = false;
     this.emitSubmitEventOnEnter = true;
     this.fullWidth = false;
+    this.group = false;
     this.helper = null;
     this.helperEnabled = true;
     this.helperWhenFocused = false;
@@ -15686,6 +15700,7 @@ const KupTextField = class {
     this.initialValue = '';
     this.inputMode = null;
     this.inputType = 'text';
+    this.integers = null;
     this.isClearable = false;
     this.label = null;
     this.leadingLabel = false;
@@ -15702,35 +15717,36 @@ const KupTextField = class {
   }
   onKupBlur(event) {
     const { target } = event;
+    __classPrivateFieldGet$1(this, _KupTextField_instances, "m", _KupTextField_setValueFromEventTaget).call(this, target);
     this.kupBlur.emit({
       comp: this,
       id: this.rootElement.id,
-      value: target.value,
+      value: this.value,
     });
   }
   onKupChange(event) {
     const { target } = event;
-    this.value = target.value;
+    __classPrivateFieldGet$1(this, _KupTextField_instances, "m", _KupTextField_setValueFromEventTaget).call(this, target);
     this.kupChange.emit({
       comp: this,
       id: this.rootElement.id,
-      value: target.value,
+      value: this.value,
     });
   }
   onKupClick(event) {
     const { target } = event;
+    __classPrivateFieldGet$1(this, _KupTextField_instances, "m", _KupTextField_setValueFromEventTaget).call(this, target);
     this.kupClick.emit({
       comp: this,
       id: this.rootElement.id,
-      value: target.value,
+      value: this.value,
     });
   }
-  onKupFocus(event) {
-    const { target } = event;
+  onKupFocus(_event) {
     this.kupFocus.emit({
       comp: this,
       id: this.rootElement.id,
-      value: target.value,
+      value: this.value,
     });
   }
   onKupInput(event) {
@@ -15758,12 +15774,14 @@ const KupTextField = class {
     });
   }
   onKeyDown(event) {
+    const { target } = event;
     if (event.key === 'Enter') {
       if (this.emitSubmitEventOnEnter == true) {
+        __classPrivateFieldGet$1(this, _KupTextField_instances, "m", _KupTextField_setValueFromEventTaget).call(this, target);
         this.kupTextFieldSubmit.emit({
           comp: this,
           id: this.rootElement.id,
-          value: this.inputEl.value,
+          value: this.value,
         });
       }
     }
@@ -15783,6 +15801,9 @@ const KupTextField = class {
    * Returns the component's internal value.
    */
   async getValue() {
+    if (this.inputType == 'number') {
+      return formattedStringToUnformattedStringNumber(this.value, '');
+    }
     return this.value;
   }
   /**
@@ -15810,7 +15831,7 @@ const KupTextField = class {
   async setValue(value) {
     this.value = value;
     try {
-      this.inputEl.value = value;
+      this.inputEl.value = __classPrivateFieldGet$1(this, _KupTextField_instances, "m", _KupTextField_getValueForOutput).call(this);
     }
     catch (error) {
       this.kupManager.debug.logMessage(this, "Couldn't set value on input element: '" + value + "'", KupDebugCategory.WARNING);
@@ -15846,6 +15867,7 @@ const KupTextField = class {
   }
   render() {
     const props = {
+      allowNegative: this.allowNegative,
       danger: this.rootElement.classList.contains('kup-danger')
         ? true
         : false,
@@ -15855,6 +15877,7 @@ const KupTextField = class {
         ? true
         : false,
       fullWidth: this.fullWidth,
+      group: this.group,
       helper: this.helper,
       helperEnabled: this.helperEnabled,
       helperWhenFocused: this.helperWhenFocused,
@@ -15864,6 +15887,7 @@ const KupTextField = class {
         : false,
       inputMode: this.inputMode,
       inputType: this.inputType,
+      integers: this.integers,
       isClearable: this.isClearable,
       label: this.label,
       leadingLabel: this.leadingLabel,
@@ -15906,6 +15930,20 @@ const KupTextField = class {
   }
   get rootElement() { return getElement$1(this); }
 };
+_KupTextField_instances = new WeakSet(), _KupTextField_getValueForOutput = function _KupTextField_getValueForOutput() {
+  if (this.value == null || this.value.trim() == '') {
+    return '';
+  }
+  let v1 = unformattedStringToFormattedStringNumber(this.value, this.decimals, '');
+  return v1;
+}, _KupTextField_setValueFromEventTaget = function _KupTextField_setValueFromEventTaget(target) {
+  if (this.inputType == 'number') {
+    this.value = formattedStringToUnformattedStringNumber(target.value, '');
+  }
+  else {
+    this.value = target.value;
+  }
+};
 KupTextField.style = kupTextFieldCss;
 
 /**