@sme.up/ketchup 10.3.7 → 10.3.9

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

@@ -1,19 +1,19 @@
 import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, d as getElement$1, F as Fragment, g as getAssetPath } from './index-9b0f4a0d.js';
-import { k as kupManagerInstance, I as ItemsDisplayMode, a as KupComponentSizing, g as getProps, s as setProps, b as KupLanguageGeneric, c as getSizeOfInputElement, d as KupThemeIconValues, e as KupDynamicPositionPlacement, f as KupThemeColorValues, h as KupDebugCategory, F as FCellShapes, i as FCellPadding, j as fillString, l as KupCardBuiltInClockElements, m as KupCardCSSClasses, n as KupLanguageTotals, o as KupLanguageColumn, p as KupDataNewColumnTypes, q as KupCardSubEvents, r as KupCardIds, t as KupLanguageRow, u as KupLanguageSearch, v as KupCardFamily, w as KupCardProps, x as getColumnByName, y as formatToNumber, z as KupObjects, A as identify, G as GroupLabelDisplayMode, S as SelectionMode, B as KupLanguageGrouping, C as KupLanguageCheckbox, D as getValueForDisplay2, E as Filters, H as getValueForDisplay, J as FILTER_ANALYZER, L as LoadMoreMode, P as PaginatorPos, M as ShowGrid, T as TotalLabel, N as TotalMode, O as getRegExpFromString, Q as isNegativeNumber, R as FCellClasses, U as kupDynamicPositionAttribute, V as KupPointerEventTypes, W as kupDraggableColumnAttr, X as kupDragActiveAttr, Y as KupDragEffect, Z as kupDraggableCellAttr, _ as KupDropEventTypes, $ as DataTableAreasEnum, a0 as TypesToDuplicate, a1 as FixedCellsClasses, a2 as FixedCellsCSSVarsBase, a3 as KupLanguageFontsize, a4 as KupLanguageDensity, a5 as KupLanguageGrid, a6 as KupDataTableProps, a7 as UseAsValue, a8 as SortMode, a9 as iconColumn, aa as keyColumn, ab as fieldColumn, ac as KupLanguageUpload, ad as FCellTypes, ae as KupListRole, af as KupListProps, ag as addColumnValueFromRow, ah as KupGlobalFilterMode } from './kup-manager-7acd779a.js';
-import { F as FTextField } from './f-text-field-f64cc53e.js';
+import { k as kupManagerInstance, I as ItemsDisplayMode, a as KupComponentSizing, g as getProps, s as setProps, b as KupLanguageGeneric, c as getSizeOfInputElement, d as KupThemeIconValues, e as KupDynamicPositionPlacement, f as KupThemeColorValues, h as KupDebugCategory, F as FCellShapes, i as FCellPadding, j as fillString, l as KupCardBuiltInClockElements, m as KupCardCSSClasses, n as KupLanguageTotals, o as KupLanguageColumn, p as KupDataNewColumnTypes, q as KupCardSubEvents, r as KupCardIds, t as KupLanguageRow, u as KupLanguageSearch, v as KupCardFamily, w as KupCardProps, x as getColumnByName, y as formatToNumber, z as KupObjects, A as identify, G as GroupLabelDisplayMode, S as SelectionMode, B as KupLanguageGrouping, C as KupLanguageCheckbox, D as getValueForDisplay2, E as Filters, H as getValueForDisplay, J as FILTER_ANALYZER, L as LoadMoreMode, P as PaginatorPos, M as ShowGrid, T as TotalLabel, N as TotalMode, O as getRegExpFromString, Q as isNegativeNumber, R as FCellClasses, U as kupDynamicPositionAttribute, V as KupPointerEventTypes, W as kupDraggableColumnAttr, X as kupDragActiveAttr, Y as KupDragEffect, Z as kupDraggableCellAttr, _ as KupDropEventTypes, $ as DataTableAreasEnum, a0 as TypesToDuplicate, a1 as FixedCellsClasses, a2 as FixedCellsCSSVarsBase, a3 as KupLanguageFontsize, a4 as KupLanguageDensity, a5 as KupLanguageGrid, a6 as KupDataTableProps, a7 as UseAsValue, a8 as SortMode, a9 as iconColumn, aa as keyColumn, ab as fieldColumn, ac as KupLanguageUpload, ad as FCellTypes, ae as KupListRole, af as KupListProps, ag as addColumnValueFromRow, ah as KupGlobalFilterMode } from './kup-manager-5c23bae7.js';
+import { F as FTextField } from './f-text-field-4934ff74.js';
 import { F as FTextFieldMDC } from './f-text-field-mdc-81ce6c7c.js';
-import { g as getIdOfItemByDisplayMode, c as consistencyCheck, F as FChipType, a as FChipSize, b as FChipStyling, d as FChip } from './f-chip-28fde4c9.js';
+import { g as getIdOfItemByDisplayMode, c as consistencyCheck, F as FChipType, a as FChipSize, b as FChipStyling, d as FChip } from './f-chip-3ed440ef.js';
 import { c as componentWrapperId } from './GenericVariables-d8d0541e.js';
-import { F as FImage } from './f-image-a2ecd7c3.js';
-import { F as FButton } from './f-button-3c8f4506.js';
+import { F as FImage } from './f-image-96ea1421.js';
+import { F as FButton } from './f-button-6298565d.js';
 import { F as FButtonAlign, a as FButtonStyling } from './f-button-declarations-6c8f8abe.js';
-import { F as FCell, a as FRadio, b as FRating, c as FSwitchSizing, d as FSwitch } from './f-cell-3f9d4de0.js';
+import { F as FCell, a as FRadio, b as FRating, c as FSwitchSizing, d as FSwitch } from './f-cell-b3f0782c.js';
 import { d as KupDateTimeFormatOptionsMonth, K as KupDatesFormats, a as KupDates } from './kup-dates-77f1a451.js';
 import { M as MDCRipple } from './component-a35bc7f1.js';
-import { F as FCheckbox } from './f-checkbox-5cdd1cad.js';
-import { F as FiltersColumnMenu, a as FiltersRows, g as getDiffData, d as decorateDataTable, c as calcTotals, n as normalizeRows, p as paginateRows, f as filterRows, b as groupRows, s as sortRows, t as treeMainColumnName, K as KupTreeExpansionMode, e as KupTreeProps } from './kup-data-table-helper-edbee21a.js';
-import { F as FPaginator, p as pageChange, r as rowsPerPageChange } from './f-paginator-utils-3e2a0dcd.js';
-import './f-object-field-24f67438.js';
+import { F as FCheckbox } from './f-checkbox-191ec2e7.js';
+import { F as FiltersColumnMenu, a as FiltersRows, g as getDiffData, d as decorateDataTable, c as calcTotals, n as normalizeRows, p as paginateRows, f as filterRows, b as groupRows, s as sortRows, t as treeMainColumnName, K as KupTreeExpansionMode, e as KupTreeProps } from './kup-data-table-helper-de9421a0.js';
+import { F as FPaginator, p as pageChange, r as rowsPerPageChange } from './f-paginator-utils-a9d5c2d3.js';
+import './f-object-field-23935da4.js';
 
 /**
  * Props of the kup-autocomplete component.
@@ -2758,6 +2758,8 @@ var KupColumnMenuIds;
     KupColumnMenuIds["SWITCH_KEY"] = "key";
     KupColumnMenuIds["TEXTFIELD_FILTER"] = "filter";
     KupColumnMenuIds["TEXTFIELD_FORMULA"] = "formula";
+    KupColumnMenuIds["TOTALS_TABLE"] = "totals-table";
+    KupColumnMenuIds["BACK_TO_ORIGINAL_TABLE"] = "back-to-original-table";
 })(KupColumnMenuIds || (KupColumnMenuIds = {}));
 
 /**
@@ -4327,7 +4329,10 @@ function create12(component) {
             buttonsIds.includes(KupColumnMenuIds.BUTTON_ADD_COLUMNS) ? (h("div", { class: "section-1" },
             buttonsIds.includes(KupColumnMenuIds.BUTTON_REMOVE) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id === KupColumnMenuIds.BUTTON_REMOVE)))) : null,
             buttonsIds.includes(KupColumnMenuIds.BUTTON_GROUP) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id === KupColumnMenuIds.BUTTON_GROUP)))) : null,
-            buttonsIds.includes(KupColumnMenuIds.BUTTON_ADD_COLUMNS) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id === KupColumnMenuIds.BUTTON_ADD_COLUMNS)))) : null)) : null,
+            buttonsIds.includes(KupColumnMenuIds.BUTTON_ADD_COLUMNS) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id === KupColumnMenuIds.BUTTON_ADD_COLUMNS)))) : null,
+            buttonsIds.includes(KupColumnMenuIds.TOTALS_TABLE) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id === KupColumnMenuIds.TOTALS_TABLE)))) : null,
+            buttonsIds.includes(KupColumnMenuIds.BACK_TO_ORIGINAL_TABLE) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id ===
+                KupColumnMenuIds.BACK_TO_ORIGINAL_TABLE)))) : null)) : null,
         h("div", { class: `section-2 ${textfieldArray.length > 0 ||
                 datepickerArray.length > 0 ||
                 timepickerArray.length > 0
@@ -4516,7 +4521,11 @@ function create14(component) {
                     buttonsIds.includes(KupColumnMenuIds.BUTTON_REMOVE) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id ===
                         KupColumnMenuIds.BUTTON_REMOVE)))) : null,
                     buttonsIds.includes(KupColumnMenuIds.BUTTON_GROUP) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id ===
-                        KupColumnMenuIds.BUTTON_GROUP)))) : null),
+                        KupColumnMenuIds.BUTTON_GROUP)))) : null,
+                    buttonsIds.includes(KupColumnMenuIds.TOTALS_TABLE) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id ===
+                        KupColumnMenuIds.TOTALS_TABLE)))) : null,
+                    buttonsIds.includes(KupColumnMenuIds.BACK_TO_ORIGINAL_TABLE) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id ===
+                        KupColumnMenuIds.BACK_TO_ORIGINAL_TABLE)))) : null),
                 h("div", { class: "sub-formula" }, textfieldsIds.includes(KupColumnMenuIds.TEXTFIELD_FORMULA) ? (h("kup-text-field", Object.assign({}, textfieldArray.find((x) => x.id ===
                     KupColumnMenuIds.TEXTFIELD_FORMULA)))) : null),
                 h("div", { class: "sub-chip" },
@@ -6937,8 +6946,13 @@ var KupChipProps;
 (function (KupChipProps) {
     KupChipProps["customStyle"] = "Custom style of the component.";
     KupChipProps["data"] = "List of elements.";
-    KupChipProps["displayId"] = "When enabled, the chip's text will display both the id and the value.";
+    // displayId = "When enabled, the chip's text will display both the id and the value.",
+    KupChipProps["disabled"] = "When true, the chip cannot be edited, nor removed.";
+    KupChipProps["displayMode"] = "When enabled, the chip will display both the id and description of the data.";
     KupChipProps["enableInput"] = "When enabled, it's possible to add items to the chip's dataset through an input slot (kup-autocomplete, kup-combobox, kup-text-field).";
+    KupChipProps["label"] = "When set, will be shown a label on the chips.";
+    KupChipProps["sizing"] = "The size of the chip. Available sizes: small, medium.";
+    KupChipProps["styling"] = "The style of the chip. Available styles: outlined, raised.";
     KupChipProps["type"] = "The type of chip. Available types: input, filter, choice or empty for default.";
 })(KupChipProps || (KupChipProps = {}));
 
@@ -6971,13 +6985,13 @@ const KupChip = class {
         this.kupManager = kupManagerInstance();
         this.customStyle = '';
         this.data = [];
-        this.enableInput = false;
         this.disabled = false;
-        this.type = FChipType.STANDARD;
-        this.sizing = FChipSize.SMALL;
-        this.styling = FChipStyling.RAISED;
         this.displayMode = ItemsDisplayMode.DESCRIPTION;
+        this.enableInput = false;
         this.label = null;
+        this.sizing = FChipSize.SMALL;
+        this.styling = FChipStyling.RAISED;
+        this.type = FChipType.STANDARD;
     }
     onKupBlur(chip) {
         this.kupBlur.emit({
@@ -7140,7 +7154,7 @@ const KupChip = class {
             props.onFocus.push((chip) => this.onKupFocus(chip));
             props.onIconClick.push((chip) => this.onKupIconClick(chip));
         }
-        return (h(Host, { key: '9e280d8351e8a26e8c7ab5d130b27c354738257d', "onKup-autocomplete-itemclick": (e) => {
+        return (h(Host, { key: '092919df319761de61a7e6535f0dd18976463c6c', "onKup-autocomplete-itemclick": (e) => {
                 __classPrivateFieldGet$a(this, _KupChip_instances, "m", _KupChip_changeHandler).call(this, e);
             }, "onKup-combobox-itemclick": (e) => {
                 __classPrivateFieldGet$a(this, _KupChip_instances, "m", _KupChip_changeHandler).call(this, e);
@@ -7150,7 +7164,7 @@ const KupChip = class {
                 __classPrivateFieldGet$a(this, _KupChip_instances, "m", _KupChip_changeHandler).call(this, e);
             }, "onKup-textfield-submit": (e) => {
                 __classPrivateFieldGet$a(this, _KupChip_instances, "m", _KupChip_changeHandler).call(this, e);
-            } }, h("style", { key: '4cea204a7aa31ca3f91ee3f0f94cc088e7f7373f' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '46238eff774c3ff26846cf401a870bfd24d8cd59', id: componentWrapperId }, this.label ? (h("div", { class: "mdc-text-field__label-container" }, h("label", { class: "mdc-label" }, this.label))) : null, ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) > 0 ? h(FChip, Object.assign({}, props)) : null, h("slot", { key: '2c59e3ee549a3d2797aa81129d85661aa440bb58', name: "field" }))));
+            } }, h("style", { key: '3cc916a8db665b151f59f4224d5f6f168268f842' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '57500014b7c3f0fe98add9eb950fa88615e6eec0', id: componentWrapperId }, this.label ? (h("div", { class: "mdc-text-field__label-container" }, h("label", { class: "mdc-label" }, this.label))) : null, ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) > 0 ? h(FChip, Object.assign({}, props)) : null, h("slot", { key: '92f0d3996bddacc0be40eab0298c4716de3783c1', name: "field" }))));
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);
@@ -8092,8 +8106,35 @@ class KupColumnMenu {
                 title: dom$3.ketchup.language.translate(KupLanguageGeneric.APPLY),
             });
         }
+        if (this.isKupDataTable(comp)) {
+            if (comp.totals && comp.groups) {
+                props.push({
+                    className: 'printable',
+                    'data-storage': {
+                        columnName: column.name,
+                    },
+                    icon: 'table',
+                    id: KupColumnMenuIds.TOTALS_TABLE,
+                    title: dom$3.ketchup.language.translate(KupLanguageGeneric.TOTALS_TABLE),
+                });
+                if (comp.totalsMatrixView) {
+                    props.push({
+                        className: 'printable',
+                        'data-storage': {
+                            columnName: column.name,
+                        },
+                        icon: 'table-large',
+                        id: KupColumnMenuIds.BACK_TO_ORIGINAL_TABLE,
+                        title: dom$3.ketchup.language.translate(KupLanguageGeneric.BACK_TO_ORIGINAL_TABLE),
+                    });
+                }
+            }
+        }
         return props;
     }
+    isKupDataTable(comp) {
+        return comp && comp.rowsPerPage;
+    }
     /**
      * Handles the column menu's checkbox prop.
      * @param {KupDataTable | KupTree} comp - Component using the column menu.
@@ -8167,12 +8208,25 @@ class KupColumnMenu {
                 catch (error) {
                     dom$3.ketchup.debug.logMessage(this, 'Child column not found (' + child.name + ')!' + error, KupDebugCategory.ERROR);
                 }
-                chipData.push({
-                    icon: child.icon ? child.icon : null,
-                    value: childColumn ? childColumn.title : '*Not found!',
-                    obj: child.obj ? child.obj : null,
-                    id: childColumn ? childColumn.name : '*NOTFND',
-                });
+                if (childColumn) {
+                    if (childColumn.visible) {
+                        chipData.push({
+                            icon: child.icon ? child.icon : null,
+                            value: childColumn.title,
+                            obj: child.obj ? child.obj : null,
+                            id: childColumn.name,
+                        });
+                    }
+                    // if column is not visible it means it has been removed, do not push anything
+                }
+                else {
+                    chipData.push({
+                        icon: child.icon ? child.icon : null,
+                        value: '*Not found!',
+                        obj: child.obj ? child.obj : null,
+                        id: '*NOTFND',
+                    });
+                }
             }
             chipProps.dataSet = { initialData: [...chipData] };
             chipProps.data = chipData;
@@ -8412,7 +8466,7 @@ class KupColumnMenu {
      * @param {CustomEvent} cardEvent - kup-card-event emitted by the column menu.
      * @param {KupDataTable | KupTree} comp - Component using the column menu.
      */
-    eventHandlers(cardEvent, comp) {
+    eventHandlers(cardEvent, comp, columnName) {
         var _a;
         const card = cardEvent.detail.card
             ? cardEvent.detail.card
@@ -8510,6 +8564,16 @@ class KupColumnMenu {
                             comp.hideColumn(dataStorage['column']);
                         });
                         break;
+                    case KupColumnMenuIds.TOTALS_TABLE:
+                        comp.closeColumnMenu().then(() => {
+                            comp.toggleTotalsMatrix(columnName, true);
+                        });
+                        break;
+                    case KupColumnMenuIds.BACK_TO_ORIGINAL_TABLE:
+                        comp.closeColumnMenu().then(() => {
+                            comp.toggleTotalsMatrix(columnName, false);
+                        });
+                        break;
                 }
                 break;
             case 'kup-checkbox-change':
@@ -8624,7 +8688,7 @@ class KupColumnMenu {
     }
 }
 
-const kupDataTableCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:var(--kup-body-01-font-size, 14px);line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:var(--kup-label-01-font-size, 12px);line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-heading-compact-01-font-size, 14px);line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:var(--kup-heading-01-font-size, 14px);line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}:host{--kup_datatable_background_color:var(\n    --kup-datatable-background-color,\n    var(--kup-layer-1)\n  );--kup_datatable_th_background_color:var(\n    --kup-datatable-th-background-color,\n    var(--kup-layer-2)\n  );--kup_datatable_background_color_selected:var(\n    --kup-datatable-background-color-selected,\n    var(--kup-layer-1-selected)\n  );--kup_datatable_border:var(\n    --kup-datatable-border-color,\n    1px solid var(--kup-border-subtle)\n  );--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_fcell_line_height_extradense:var(\n    --kup-fcell-line-height-extradense,\n    14px\n  );--kup_fcell_font_size_extradense:var(--kup-fcell-font-size-extradense, 12px);--kup_datatable_th_border:var(\n    --kup-datatable-th-border,\n    1px solid var(--kup-gray-color-30)\n  );--kup_datatable_th_resize_handle_width:var(\n    --kup-datatable-th-resize-handle-width,\n    3px\n  );--kup_datatable_background_color_hover:var(\n    --kup-datatable-background-color-hover,\n    var(--kup-layer-1-hover)\n  );--kup_datatable_text_color_hover:var(\n    --kup-datatable-text-color-hover,\n    var(--kup-text-primary)\n  );--kup_card_text_color:var(--kup-card-text-color, var(--kup-text-secondary));--kup_fcell_padding_extradense:var(\n    --kup-fcell-padding-dense,\n    var(--kup-space-01) var(--kup-space-01)\n  );--kup_fcell_padding_dense:var(\n    --kup-fcell-padding-dense,\n    var(--kup-space-01) var(--kup-space-03)\n  );--kup_fcell_padding_medium:var(\n    --kup-fcell-padding-medium,\n    var(--kup-space-02) var(--kup-space-03)\n  );--kup_fcell_padding_wide:var(\n    --kup-fcell-padding-wide,\n    var(--kup-space-04) var(--kup-space-03)\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}#kup-component.auto-width{width:fit-content}table{background-color:var(--kup_datatable_background_color);border-spacing:0;border-collapse:separate;color:var(--kup_card_text_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_datatable_th_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 tr td{background-color:var(--kup_datatable_background_color);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 var(--kup-space-03)}table tfoot tr td:hover{background-color:var(--kup_datatable_background_color)}table tfoot tr td:last-of-type{border-right:none}#global-filter{min-width:140px;width:100%;flex:1}#global-filter .f-text-field .mdc-text-field-container .mdc-text-field{border-bottom:none}.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.custom-size table{overflow:auto}.below-wrapper:not(.custom-size){overflow-x:auto}.density-extra_dense .header-cell__content,.density-extra_dense tbody>tr.group td{padding:var(--kup-fcell-padding-extradense, var(--kup_fcell_padding_extradense))}.density-extra_dense .header-cell__title{font-size:var(--kup_fcell_font_size_extradense)}.density-extra_dense .group-cell-content>span.text{font-size:var(--kup_fcell_font_size_extradense);line-height:var(--kup_fcell_line_height_extradense)}.density-dense .header-cell__content,.density-dense tbody>tr.group td{padding:var(--kup-fcell-padding-dense, var(--kup_fcell_padding_dense))}.density-medium .header-cell__content,.density-medium tbody>tr.group>td{padding:var(--kup-fcell-padding-medium, var(--kup_fcell_padding_medium))}.density-wide .header-cell__content,.density-wide tbody>tr.group>td{padding:var(--kup-fcell-padding-wide, var(--kup_fcell_padding_wide))}.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_datatable_th_background_color);border:var(--kup_datatable_th_border);border-left:0 none;box-sizing:border-box;top:0;touch-action:none;transition:background-color 0.25s ease;user-select:none}th:last-of-type{border-right:none}.header-cell__content{color:var(--kup-text-primary);display:flex;justify-content:space-between;padding:0.5em var(--kup-space-03);text-overflow:ellipsis;white-space:nowrap;font-family:var(--kup-font-family);font-size:var(--kup-heading-compact-01-font-size, 14px);line-height:18px;font-weight:600;letter-spacing:0.16px}.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__icons .kup-icon{background-color:var(--kup-text-primary)}.header-cell__drag-handler{background:var(--kup-border-strong);height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:var(--kup-space-01)}.header-cell__drag-handler:hover{background:var(--kup-border-strong-hover)}.header-cell--sortable{cursor:pointer}.header-cell--is-icon{width:30px}tbody{cursor:auto}tbody td{height:0;padding:0;font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px;font-size:13px;outline:none}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:var(--kup_datatable_background_color_selected)}tbody tr:hover:not(.group):not(.selected) td{color:var(--kup_datatable_text_color_hover);background-color:var(--kup_datatable_background_color_hover)}tbody tr.group{background:var(--kup-layer-1-selected);border-top:var(--kup_datatable_border);color:var(--kup-text-secondary);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 .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;font-family:var(--kup-font-family);font-size:var(--kup-heading-compact-01-font-size, 14px);line-height:18px;font-weight:600;letter-spacing:0.16px}tbody tr.group>td .group-cell-content .kup-icon{background-color:var(--kup-text-secondary)}tbody tr.group>td.total{border-bottom:1px solid var(--kup-border-subtle-selected);text-align:right;padding:0 var(--kup-space-03) 0.25em var(--kup-space-03);font-family:var(--kup_datatable_font_family_monospace)}tbody tr.group>td.total.negative-number{color:var(--kup-danger-color-60)}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}.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;box-sizing:content-box}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-text-secondary)}.group-wrapper{--kup-chip-margin:0 4px}.totals-value{font-weight:bold;font-family:var(--kup-font-family);font-size:var(--kup-heading-compact-01-font-size, 14px);line-height:18px;font-weight:600;letter-spacing:0.16px;font-size:13px;font-family:var(--kup_datatable_font_family_monospace)}.totals-value.danger-text{color:var(--kup-danger-color-60) !important}.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-subtle);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;justify-content:flex-end;background-color:var(--kup-layer-1)}.actions-wrapper .insert-button .f-button .icon-button,.actions-wrapper .delete-button .f-button .icon-button,.actions-wrapper .history-button .f-button .icon-button,.actions-wrapper .save-button .f-button .icon-button{padding:0.55em}.actions-wrapper.paginator-top{border-left:var(--kup_datatable_border)}.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)}@media (max-width: 830px){.actions-wrapper{flex-direction:column-reverse}#kup-component.auto-width{width:auto}}:host([legacy-look]){--kup-textfield-background-color:transparent;--kup-fcell-width:100%;--kup-fcell-padding-extradense:0px;--kup-extradense-legacy-look-padding:var(--kup-space-00) var(--kup-space-03);--kup-textfield-extrasmall-padding:var(--kup-extradense-legacy-look-padding);--kup-textfield-extrasmall-height:20px}:host([legacy-look]) th .header-cell__content{font-family:var(--kup_datatable_font_family_monospace);white-space:pre !important;font-size:12px;padding:var(--kup-extradense-legacy-look-padding)}:host([legacy-look]) .f-cell__text{padding:var(--kup-extradense-legacy-look-padding)}:host([legacy-look]) .f-cell.extra_dense{min-height:var(--kup_fcell_extradense_min_height)}:host([legacy-look]) .f-cell.dense{min-height:var(--kup_fcell_dense_min_height)}:host([legacy-look]) .f-cell.medium{min-height:var(--kup_fcell_medium_min_height)}:host([legacy-look]) .f-cell.wide{min-height:var(--kup_fcell_wide_min_height)}:host([legacy-look]) table.row-separation>tbody>tr>td{box-shadow:0px 1px var(--kup-border-subtle);border-bottom:0px}.paginator-wrapper{display:flex;flex-flow:wrap}.paginator-tabs{width:100%;display:flex}.paginator-tabs kup-paginator{display:inline-flex}.paginator-tabs kup-button{position:relative;height:100%;margin-left:0.25em;float:right}@media (max-width: 830px){.above-wrapper.paginator-top{border-bottom:1px solid var(--kup-border-subtle)}}@media (max-width: 500px){.paginator-wrapper{min-width:fit-content}}sticky-header{display:none}.persistent-header~sticky-header{background:var(--kup-gray-color-20);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-r,.fixed-column,.fixed-row{background-color:var(--kup_datatable_background_color);color:var(--kup-text-color);position:sticky}thead .fixed-column-r,thead .fixed-column,thead .fixed-row,tfoot .fixed-column-r,tfoot .fixed-column,tfoot .fixed-row{z-index:10}table.custom-size th{position:sticky;inset-block-start:0;z-index:10}table.custom-size th.fixed-column,table.custom-size th.fixed-column-r{z-index:11}table.custom-size tfoot td{position:sticky;inset-block-end:0;z-index:10}table.custom-size tfoot td.fixed-column{z-index:11}tr:hover .fixed-row,tr:hover .fixed-column,tr:hover .fixed-column-r{background-color:var(--kup-gray-color-20-hover)}tr.selected .fixed-column,tr.selected .fixed-row,tr.selected .fixed-row-r{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}.fixed-column-r{right:0;z-index:6}.fixed-column-r.fixed-row{z-index:8}thead tr .fixed-column,thead tr:hover:not(.group):not(.selected) .fixed-column,thead tr .fixed-column-r,thead tr:hover:not(.group):not(.selected) .fixed-column-r{background-color:var(--kup-gray-color-20-hover)}tfoot tr:hover:not(.group):not(.selected) .fixed-row,tfoot tr:hover:not(.group):not(.selected) .fixed-column,tfoot tr:hover:not(.group):not(.selected) .fixed-column-r{background-color:var(--kup-gray-color-20-hover)}: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-60)}.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 tbody td.selected{background-color:rgba(var(--kup-text-color-rgb), 0.075)}:host(.kup-cross-selection) #kup-component tbody td.selected.fixed-column,:host(.kup-cross-selection) #kup-component tbody 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:var(--kup-gray-color-20-hover)}: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}.commands{display:flex;gap:1px}";
+const kupDataTableCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:var(--kup-body-01-font-size, 14px);line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:var(--kup-label-01-font-size, 12px);line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-heading-compact-01-font-size, 14px);line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:var(--kup-heading-01-font-size, 14px);line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}:host{--kup_datatable_background_color:var(\n    --kup-datatable-background-color,\n    var(--kup-layer-1)\n  );--kup_datatable_th_background_color:var(\n    --kup-datatable-th-background-color,\n    var(--kup-layer-2)\n  );--kup_datatable_background_color_selected:var(\n    --kup-datatable-background-color-selected,\n    var(--kup-layer-1-selected)\n  );--kup_datatable_border:var(\n    --kup-datatable-border-color,\n    1px solid var(--kup-border-subtle)\n  );--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_fcell_line_height_extradense:var(\n    --kup-fcell-line-height-extradense,\n    14px\n  );--kup_fcell_font_size_extradense:var(--kup-fcell-font-size-extradense, 12px);--kup_datatable_th_border:var(\n    --kup-datatable-th-border,\n    1px solid var(--kup-gray-color-30)\n  );--kup_datatable_th_resize_handle_width:var(\n    --kup-datatable-th-resize-handle-width,\n    3px\n  );--kup_datatable_background_color_hover:var(\n    --kup-datatable-background-color-hover,\n    var(--kup-layer-1-hover)\n  );--kup_datatable_text_color_hover:var(\n    --kup-datatable-text-color-hover,\n    var(--kup-text-primary)\n  );--kup_card_text_color:var(--kup-card-text-color, var(--kup-text-secondary));--kup_fcell_padding_extradense:var(\n    --kup-fcell-padding-dense,\n    var(--kup-space-01) var(--kup-space-01)\n  );--kup_fcell_padding_dense:var(\n    --kup-fcell-padding-dense,\n    var(--kup-space-01) var(--kup-space-03)\n  );--kup_fcell_padding_medium:var(\n    --kup-fcell-padding-medium,\n    var(--kup-space-02) var(--kup-space-03)\n  );--kup_fcell_padding_wide:var(\n    --kup-fcell-padding-wide,\n    var(--kup-space-04) var(--kup-space-03)\n  );--kup_datatable_inserted_row_background:var(\n    --kup-datatable-inserted-row-background,\n    #c8e6c9\n  );--kup_datatable_modified_row_background:var(\n    --kup-datatable-modified-row-background,\n    #ffd8a6\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}#kup-component.auto-width{width:fit-content}table{background-color:var(--kup_datatable_background_color);border-spacing:0;border-collapse:separate;color:var(--kup_card_text_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_datatable_th_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 tr td{background-color:var(--kup_datatable_background_color);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 var(--kup-space-03)}table tfoot tr td:hover{background-color:var(--kup_datatable_background_color)}table tfoot tr td:last-of-type{border-right:none}#global-filter{min-width:140px;width:100%;flex:1}#global-filter .f-text-field .mdc-text-field-container .mdc-text-field{border-bottom:none}.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.custom-size table{overflow:auto}.below-wrapper:not(.custom-size){overflow-x:auto}.density-extra_dense .header-cell__content,.density-extra_dense tbody>tr.group td{padding:var(--kup-fcell-padding-extradense, var(--kup_fcell_padding_extradense))}.density-extra_dense .header-cell__title{font-size:var(--kup_fcell_font_size_extradense)}.density-extra_dense .group-cell-content>span.text{font-size:var(--kup_fcell_font_size_extradense);line-height:var(--kup_fcell_line_height_extradense)}.density-dense .header-cell__content,.density-dense tbody>tr.group td{padding:var(--kup-fcell-padding-dense, var(--kup_fcell_padding_dense))}.density-medium .header-cell__content,.density-medium tbody>tr.group>td{padding:var(--kup-fcell-padding-medium, var(--kup_fcell_padding_medium))}.density-wide .header-cell__content,.density-wide tbody>tr.group>td{padding:var(--kup-fcell-padding-wide, var(--kup_fcell_padding_wide))}.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_datatable_th_background_color);border:var(--kup_datatable_th_border);border-left:0 none;box-sizing:border-box;top:0;touch-action:none;transition:background-color 0.25s ease;user-select:none}th:last-of-type{border-right:none}.header-cell__content{color:var(--kup-text-primary);display:flex;justify-content:space-between;padding:0.5em var(--kup-space-03);text-overflow:ellipsis;white-space:nowrap;font-family:var(--kup-font-family);font-size:var(--kup-heading-compact-01-font-size, 14px);line-height:18px;font-weight:600;letter-spacing:0.16px}.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__icons .kup-icon{background-color:var(--kup-text-primary)}.header-cell__drag-handler{background:var(--kup-border-strong);height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:var(--kup-space-01)}.header-cell__drag-handler:hover{background:var(--kup-border-strong-hover)}.header-cell--sortable{cursor:pointer}.header-cell--is-icon{width:30px}tbody{cursor:auto}tbody td{height:0;padding:0;font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px;font-size:13px;outline:none}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:var(--kup_datatable_background_color_selected)}tbody tr.inserted td{background-color:var(--kup_datatable_inserted_row_background)}tbody tr.modified td{background-color:var(--kup_datatable_modified_row_background)}tbody tr:hover:not(.group):not(.selected) td{color:var(--kup_datatable_text_color_hover);background-color:var(--kup_datatable_background_color_hover)}tbody tr.group{background:var(--kup-layer-1-selected);border-top:var(--kup_datatable_border);color:var(--kup-text-secondary);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 .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;font-family:var(--kup-font-family);font-size:var(--kup-heading-compact-01-font-size, 14px);line-height:18px;font-weight:600;letter-spacing:0.16px}tbody tr.group>td .group-cell-content .kup-icon{background-color:var(--kup-text-secondary)}tbody tr.group>td.total{border-bottom:1px solid var(--kup-border-subtle-selected);text-align:right;padding:0 var(--kup-space-03) 0.25em var(--kup-space-03);font-family:var(--kup_datatable_font_family_monospace)}tbody tr.group>td.total.negative-number{color:var(--kup-danger-color-60)}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}.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;box-sizing:content-box}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-text-secondary)}.group-wrapper{--kup-chip-margin:0 4px}.totals-value{font-weight:bold;font-family:var(--kup-font-family);font-size:var(--kup-heading-compact-01-font-size, 14px);line-height:18px;font-weight:600;letter-spacing:0.16px;font-size:13px;font-family:var(--kup_datatable_font_family_monospace)}.totals-value.danger-text{color:var(--kup-danger-color-60) !important}.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-subtle);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;justify-content:flex-end;background-color:var(--kup-layer-1)}.actions-wrapper .insert-button .f-button .icon-button,.actions-wrapper .delete-button .f-button .icon-button,.actions-wrapper .history-button .f-button .icon-button,.actions-wrapper .save-button .f-button .icon-button{padding:0.55em}.actions-wrapper.paginator-top{border-left:var(--kup_datatable_border)}.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)}@media (max-width: 830px){.actions-wrapper{flex-direction:column-reverse}#kup-component.auto-width{width:auto}}:host([legacy-look]){--kup-textfield-background-color:transparent;--kup-fcell-width:100%;--kup-fcell-padding-extradense:0px;--kup-extradense-legacy-look-padding:var(--kup-space-00) var(--kup-space-03);--kup-textfield-extrasmall-padding:var(--kup-extradense-legacy-look-padding);--kup-textfield-extrasmall-height:20px}:host([legacy-look]) th .header-cell__content{font-family:var(--kup_datatable_font_family_monospace);white-space:pre !important;font-size:12px;padding:var(--kup-extradense-legacy-look-padding)}:host([legacy-look]) .f-cell__text{padding:var(--kup-extradense-legacy-look-padding)}:host([legacy-look]) .f-cell.extra_dense{min-height:var(--kup_fcell_extradense_min_height)}:host([legacy-look]) .f-cell.dense{min-height:var(--kup_fcell_dense_min_height)}:host([legacy-look]) .f-cell.medium{min-height:var(--kup_fcell_medium_min_height)}:host([legacy-look]) .f-cell.wide{min-height:var(--kup_fcell_wide_min_height)}:host([legacy-look]) table.row-separation>tbody>tr>td{box-shadow:0px 1px var(--kup-border-subtle);border-bottom:0px}.paginator-wrapper{display:flex;flex-flow:wrap}.paginator-tabs{width:100%;display:flex}.paginator-tabs kup-paginator{display:inline-flex}.paginator-tabs kup-button{position:relative;height:100%;margin-left:0.25em;float:right}@media (max-width: 830px){.above-wrapper.paginator-top{border-bottom:1px solid var(--kup-border-subtle)}}@media (max-width: 500px){.paginator-wrapper{min-width:fit-content}}sticky-header{display:none}.persistent-header~sticky-header{background:var(--kup-gray-color-20);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-r,.fixed-column,.fixed-row{background-color:var(--kup_datatable_background_color);color:var(--kup-text-color);position:sticky}thead .fixed-column-r,thead .fixed-column,thead .fixed-row,tfoot .fixed-column-r,tfoot .fixed-column,tfoot .fixed-row{z-index:10}table.custom-size th{position:sticky;inset-block-start:0;z-index:10}table.custom-size th.fixed-column,table.custom-size th.fixed-column-r{z-index:11}table.custom-size tfoot td{position:sticky;inset-block-end:0;z-index:10}table.custom-size tfoot td.fixed-column{z-index:11}tr:hover .fixed-row,tr:hover .fixed-column,tr:hover .fixed-column-r{background-color:var(--kup-gray-color-20-hover)}tr.selected .fixed-column,tr.selected .fixed-row,tr.selected .fixed-row-r{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}.fixed-column-r{right:0;z-index:6}.fixed-column-r.fixed-row{z-index:8}thead tr .fixed-column,thead tr:hover:not(.group):not(.selected) .fixed-column,thead tr .fixed-column-r,thead tr:hover:not(.group):not(.selected) .fixed-column-r{background-color:var(--kup-gray-color-20-hover)}tfoot tr:hover:not(.group):not(.selected) .fixed-row,tfoot tr:hover:not(.group):not(.selected) .fixed-column,tfoot tr:hover:not(.group):not(.selected) .fixed-column-r{background-color:var(--kup-gray-color-20-hover)}: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-60)}.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 tbody td.selected{background-color:rgba(var(--kup-text-color-rgb), 0.075)}:host(.kup-cross-selection) #kup-component tbody td.selected.fixed-column,:host(.kup-cross-selection) #kup-component tbody 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:var(--kup-gray-color-20-hover)}: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}.commands{display:flex;gap:1px}";
 const KupDataTableStyle0 = kupDataTableCss;
 
 var __classPrivateFieldGet$8 = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
@@ -8643,7 +8707,7 @@ var __classPrivateFieldSet$4 = (undefined && undefined.__classPrivateFieldSet) |
         throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _KupDataTable_instances, _KupDataTable_checkUpdateState, _KupDataTable_initialized, _KupDataTable_rows, _KupDataTable_rowsLength, _KupDataTable_paginatedRows, _KupDataTable_paginatedRowsLength, _KupDataTable_footer, _KupDataTable_kupManager, _KupDataTable_renderedRows, _KupDataTable_loadMoreEventCounter, _KupDataTable_loadMoreEventPreviousQuantity, _KupDataTable_theadRef, _KupDataTable_tableRef, _KupDataTable_originalData, _KupDataTable_originalDataLoaded, _KupDataTable_originalDataLoadedMaxId, _KupDataTable_insertedRowIds, _KupDataTable_tableAreaRef, _KupDataTable_stickyTheadRef, _KupDataTable_lastPointerDetails, _KupDataTable_customizeTopButtonRef, _KupDataTable_customizeTopPanelRef, _KupDataTable_sizedColumns, _KupDataTable_intObserver, _KupDataTable_navBarHeight, _KupDataTable_theadIntersecting, _KupDataTable_tableIntersecting, _KupDataTable_isSafariBrowser, _KupDataTable_isRestoringState, _KupDataTable_globalFilterTimeout, _KupDataTable_totalMenuCoords, _KupDataTable_clickTimeout, _KupDataTable_thRefs, _KupDataTable_rowsRefs, _KupDataTable_oldWidth, _KupDataTable_hold, _KupDataTable_interactableDrag, _KupDataTable_interactableDrop, _KupDataTable_interactableResize, _KupDataTable_interactableTouch, _KupDataTable_dropareaRef, _KupDataTable_removeDropareaRef, _KupDataTable_groupsDropareaRef, _KupDataTable_clickCb, _KupDataTable_clickCbCustomPanel, _KupDataTable_clickCbDropCard, _KupDataTable_resizeTimeout, _KupDataTable_columnMenuInstance, _KupDataTable_filtersColumnMenuInstance, _KupDataTable_filtersRowsInstance, _KupDataTable_detailCard, _KupDataTable_insertCard, _KupDataTable_actionsCard, _KupDataTable_confirmDeleteCard, _KupDataTable_confirmDeleteDialog, _KupDataTable_columnMenuCard, _KupDataTable_columnDropCard, _KupDataTable_columnDropCardAnchor, _KupDataTable_dropDownActionCardAnchor, _KupDataTable_insertCount, _KupDataTable_lastFocusedColumn, _KupDataTable_lastFocusedCell, _KupDataTable_lastFocusedRow, _KupDataTable_maxRowsPerPage, _KupDataTable_readyPromise, _KupDataTable_readyResolve, _KupDataTable_BUTTON_CANCEL_ID, _KupDataTable_BUTTON_SUBMIT_ID, _KupDataTable_FIELDS_FORM_ID, _KupDataTable_MESSAGE_ID, _KupDataTable_MESSAGE_WRAPPER_ID, _KupDataTable_INSERT_PREFIX, _KupDataTable_DEFAULT_ROWS_FOR_GLOBAL_FILTER, _KupDataTable_insertNewColumnInVisibleColumnsList, _KupDataTable_closeDropCard, _KupDataTable_createDropCard, _KupDataTable_calculateData, _KupDataTable_getRow, _KupDataTable__getRow, _KupDataTable_getTransposedData, _KupDataTable_setTransposedData, _KupDataTable_switchToTotalsMatrix, _KupDataTable_setObjForTotalsMatrix, _KupDataTable_stickyHeaderPosition, _KupDataTable_updateStickyHeaderSize, _KupDataTable_setObserver, _KupDataTable_didLoadInteractables, _KupDataTable_didRenderInteractables, _KupDataTable_didLoadObservers, _KupDataTable_didRenderObservers, _KupDataTable_didLoadEventHandling, _KupDataTable_scrollStickyHeader, _KupDataTable_checkScrollOnHover, _KupDataTable_customizePanelPosition, _KupDataTable_rowsPointLength, _KupDataTable_paginatedRowsPointLength, _KupDataTable__rowsLength, _KupDataTable_resetSelectedRows, _KupDataTable_getSizedColumns, _KupDataTable_rowDetail, _KupDataTable_dropDownActions, _KupDataTable_createDropDownActionsCard, _KupDataTable_clearSearchActionsCard, _KupDataTable_filterRowActionsCard, _KupDataTable_closeRowActionsCard, _KupDataTable_closeColumnMenuCard, _KupDataTable_prepareDataForActionsCard, _KupDataTable_rowInsertForm, _KupDataTable_rowsDelete, _KupDataTable_getEventDetails, _KupDataTable_getEventDetailsForCurrentSelection, _KupDataTable_getSourceElementCoordsForCurrentSelection, _KupDataTable_clickHandler, _KupDataTable_cellActionsMenuHandler, _KupDataTable_contextMenuHandler, _KupDataTable_tooltipRequestHandler, _KupDataTable_contextMenuHandlerDetailsManager, _KupDataTable_dblClickHandler, _KupDataTable_initRows, _KupDataTable_filterRows, _KupDataTable_isGrouping, _KupDataTable_hasRowActions, _KupDataTable_removeGroup, _KupDataTable_hasTotals, _KupDataTable_copyCellValueInColumnHandler, _KupDataTable_tableHasAutoWidth, _KupDataTable_forceGroupExpansion, _KupDataTable_forceRowGroupExpansion, _KupDataTable_adjustPaginator, _KupDataTable_setCellEditability, _KupDataTable_composeFixedCellStyleAndClass, _KupDataTable_updateFixedRowsAndColumnsCssVariables, _KupDataTable_horNav, _KupDataTable_verNav, _KupDataTable_onKupKeyDown, _KupDataTable_onColumnSort, _KupDataTable_onRemoveFilter, _KupDataTable_getFilterValueForTooltip, _KupDataTable_onGlobalFilterChange, _KupDataTable_handlePageChange, _KupDataTable_handleRowsPerPageChange, _KupDataTable_onRowClick, _KupDataTable_selectColumn, _KupDataTable_deselectColumn, _KupDataTable_onRowActionExpanderClick, _KupDataTable_handleRowSelect, _KupDataTable_onRowExpand, _KupDataTable_onSelectAll, _KupDataTable_openTotalMenu, _KupDataTable_closeTotalMenu, _KupDataTable_isOpenedTotalMenuForColumn, _KupDataTable_groupRows, _KupDataTable_onLoadMoreClick, _KupDataTable_adjustGroupState, _KupDataTable_adjustGroupStateFromRow, _KupDataTable_sortRows, _KupDataTable_getSortIcon, _KupDataTable_getSortDecode, _KupDataTable_calculateColspan, _KupDataTable_isGroupExpanded, _KupDataTable_handleColumnSort, _KupDataTable_moveSortedColumns, _KupDataTable_handleUpdateClick, _KupDataTable_onBlurHandler, _KupDataTable_applyLineBreaks, _KupDataTable_composeHeaderCellClassAndStyle, _KupDataTable_renderHeader, _KupDataTable_renderStickyHeader, _KupDataTable_totalMenuPosition, _KupDataTable_onTotalMenuOpen, _KupDataTable_renderRow, _KupDataTable_onCustomSettingsClick, _KupDataTable_openCustomSettings, _KupDataTable_closeCustomSettings, _KupDataTable_renderPaginator, _KupDataTable_columnRemoveArea, _KupDataTable_columnGroupArea, _KupDataTable_hideShowColumnDropArea, _KupDataTable_handleColumnGroup, _KupDataTable_transcodeItem, _KupDataTable_createListData, _KupDataTable_FONTSIZE_CODES, _KupDataTable_FONTSIZE_DECODES, _KupDataTable_FONTSIZE_ICONS, _KupDataTable_getFontSizeCodeFromDecode, _KupDataTable_renderFontSizePanel, _KupDataTable_DENSITY_DECODES, _KupDataTable_DENSITY_ICONS, _KupDataTable_getDensityCodeFromDecode, _KupDataTable_renderDensityPanel, _KupDataTable_GRID_CODES, _KupDataTable_GRID_DECODES, _KupDataTable_GRID_ICONS, _KupDataTable_getGridCodeFromDecode, _KupDataTable_renderTransposeSwitch, _KupDataTable_renderTotalsMatrix, _KupDataTable_renderGridPanel, _KupDataTable_renderCommandButton, _KupDataTable_handleChipsContextMenu, _KupDataTable_renderCommandDropDownButton, _KupDataTable_renderUpdateButtons;
+var _KupDataTable_instances, _KupDataTable_checkUpdateState, _KupDataTable_initialized, _KupDataTable_rows, _KupDataTable_rowsLength, _KupDataTable_paginatedRows, _KupDataTable_paginatedRowsLength, _KupDataTable_footer, _KupDataTable_kupManager, _KupDataTable_renderedRows, _KupDataTable_loadMoreEventCounter, _KupDataTable_loadMoreEventPreviousQuantity, _KupDataTable_theadRef, _KupDataTable_tableRef, _KupDataTable_originalData, _KupDataTable_originalDataLoaded, _KupDataTable_originalDataLoadedMaxId, _KupDataTable_beforeTotalMatrixData, _KupDataTable_beforeTotalMatrixGroups, _KupDataTable_beforeTotalMatrixTotals, _KupDataTable_beforeTotalMatrixVisibleColumns, _KupDataTable_insertedRowIds, _KupDataTable_modifiedRowsIds, _KupDataTable_tableAreaRef, _KupDataTable_stickyTheadRef, _KupDataTable_lastPointerDetails, _KupDataTable_customizeTopButtonRef, _KupDataTable_customizeTopPanelRef, _KupDataTable_sizedColumns, _KupDataTable_intObserver, _KupDataTable_navBarHeight, _KupDataTable_theadIntersecting, _KupDataTable_tableIntersecting, _KupDataTable_isSafariBrowser, _KupDataTable_isRestoringState, _KupDataTable_globalFilterTimeout, _KupDataTable_totalMenuCoords, _KupDataTable_clickTimeout, _KupDataTable_thRefs, _KupDataTable_rowsRefs, _KupDataTable_oldWidth, _KupDataTable_hold, _KupDataTable_interactableDrag, _KupDataTable_interactableDrop, _KupDataTable_interactableResize, _KupDataTable_interactableTouch, _KupDataTable_dropareaRef, _KupDataTable_removeDropareaRef, _KupDataTable_groupsDropareaRef, _KupDataTable_clickCb, _KupDataTable_clickCbCustomPanel, _KupDataTable_clickCbDropCard, _KupDataTable_resizeTimeout, _KupDataTable_columnMenuInstance, _KupDataTable_filtersColumnMenuInstance, _KupDataTable_filtersRowsInstance, _KupDataTable_detailCard, _KupDataTable_insertCard, _KupDataTable_actionsCard, _KupDataTable_confirmDeleteCard, _KupDataTable_confirmDeleteDialog, _KupDataTable_columnMenuCard, _KupDataTable_columnDropCard, _KupDataTable_columnDropCardAnchor, _KupDataTable_dropDownActionCardAnchor, _KupDataTable_insertCount, _KupDataTable_lastFocusedColumn, _KupDataTable_lastFocusedCell, _KupDataTable_lastFocusedRow, _KupDataTable_maxRowsPerPage, _KupDataTable_readyPromise, _KupDataTable_readyResolve, _KupDataTable_BUTTON_CANCEL_ID, _KupDataTable_BUTTON_SUBMIT_ID, _KupDataTable_FIELDS_FORM_ID, _KupDataTable_MESSAGE_ID, _KupDataTable_MESSAGE_WRAPPER_ID, _KupDataTable_INSERT_PREFIX, _KupDataTable_DEFAULT_ROWS_FOR_GLOBAL_FILTER, _KupDataTable_insertNewColumnInVisibleColumnsList, _KupDataTable_closeDropCard, _KupDataTable_createDropCard, _KupDataTable_calculateData, _KupDataTable_getRow, _KupDataTable__getRow, _KupDataTable_getTransposedData, _KupDataTable_setTransposedData, _KupDataTable_switchBackFromTotalsMatrix, _KupDataTable_switchToTotalsMatrix, _KupDataTable_findGroupsAtLevel, _KupDataTable_getGroupElementsBefore, _KupDataTable_buildTotalTitle, _KupDataTable_promoteTotals, _KupDataTable_setObjForTotalsMatrix, _KupDataTable_stickyHeaderPosition, _KupDataTable_updateStickyHeaderSize, _KupDataTable_setObserver, _KupDataTable_didLoadInteractables, _KupDataTable_didRenderInteractables, _KupDataTable_didLoadObservers, _KupDataTable_didRenderObservers, _KupDataTable_didLoadEventHandling, _KupDataTable_scrollStickyHeader, _KupDataTable_checkScrollOnHover, _KupDataTable_customizePanelPosition, _KupDataTable_rowsPointLength, _KupDataTable_paginatedRowsPointLength, _KupDataTable__rowsLength, _KupDataTable_resetSelectedRows, _KupDataTable_getSizedColumns, _KupDataTable_rowDetail, _KupDataTable_dropDownActions, _KupDataTable_createDropDownActionsCard, _KupDataTable_clearSearchActionsCard, _KupDataTable_filterRowActionsCard, _KupDataTable_closeRowActionsCard, _KupDataTable_closeColumnMenuCard, _KupDataTable_prepareDataForActionsCard, _KupDataTable_rowInsertForm, _KupDataTable_rowsDelete, _KupDataTable_getEventDetails, _KupDataTable_getEventDetailsForCurrentSelection, _KupDataTable_getSourceElementCoordsForCurrentSelection, _KupDataTable_clickHandler, _KupDataTable_cellActionsMenuHandler, _KupDataTable_contextMenuHandler, _KupDataTable_tooltipRequestHandler, _KupDataTable_contextMenuHandlerDetailsManager, _KupDataTable_dblClickHandler, _KupDataTable_initRows, _KupDataTable_filterRows, _KupDataTable_isGrouping, _KupDataTable_hasRowActions, _KupDataTable_removeGroup, _KupDataTable_hasTotals, _KupDataTable_copyCellValueInColumnHandler, _KupDataTable_tableHasAutoWidth, _KupDataTable_forceGroupExpansion, _KupDataTable_forceRowGroupExpansion, _KupDataTable_adjustPaginator, _KupDataTable_setCellEditability, _KupDataTable_composeFixedCellStyleAndClass, _KupDataTable_updateFixedRowsAndColumnsCssVariables, _KupDataTable_horNav, _KupDataTable_verNav, _KupDataTable_onKupKeyDown, _KupDataTable_onColumnSort, _KupDataTable_onRemoveFilter, _KupDataTable_getFilterValueForTooltip, _KupDataTable_onGlobalFilterChange, _KupDataTable_handlePageChange, _KupDataTable_handleRowsPerPageChange, _KupDataTable_onRowClick, _KupDataTable_selectColumn, _KupDataTable_deselectColumn, _KupDataTable_onRowActionExpanderClick, _KupDataTable_handleRowSelect, _KupDataTable_onRowExpand, _KupDataTable_onSelectAll, _KupDataTable_openTotalMenu, _KupDataTable_closeTotalMenu, _KupDataTable_isOpenedTotalMenuForColumn, _KupDataTable_groupRows, _KupDataTable_onLoadMoreClick, _KupDataTable_adjustGroupState, _KupDataTable_adjustGroupStateFromRow, _KupDataTable_sortRows, _KupDataTable_getSortIcon, _KupDataTable_getSortDecode, _KupDataTable_calculateColspan, _KupDataTable_isGroupExpanded, _KupDataTable_handleColumnSort, _KupDataTable_moveSortedColumns, _KupDataTable_handleUpdateClick, _KupDataTable_onBlurHandler, _KupDataTable_applyLineBreaks, _KupDataTable_composeHeaderCellClassAndStyle, _KupDataTable_renderHeader, _KupDataTable_renderStickyHeader, _KupDataTable_totalMenuPosition, _KupDataTable_onTotalMenuOpen, _KupDataTable_renderRow, _KupDataTable_onCustomSettingsClick, _KupDataTable_openCustomSettings, _KupDataTable_closeCustomSettings, _KupDataTable_renderPaginator, _KupDataTable_columnRemoveArea, _KupDataTable_columnGroupArea, _KupDataTable_hideShowColumnDropArea, _KupDataTable_handleColumnGroup, _KupDataTable_transcodeItem, _KupDataTable_createListData, _KupDataTable_FONTSIZE_CODES, _KupDataTable_FONTSIZE_DECODES, _KupDataTable_FONTSIZE_ICONS, _KupDataTable_getFontSizeCodeFromDecode, _KupDataTable_renderFontSizePanel, _KupDataTable_DENSITY_DECODES, _KupDataTable_DENSITY_ICONS, _KupDataTable_getDensityCodeFromDecode, _KupDataTable_renderDensityPanel, _KupDataTable_GRID_CODES, _KupDataTable_GRID_DECODES, _KupDataTable_GRID_ICONS, _KupDataTable_getGridCodeFromDecode, _KupDataTable_renderTransposeSwitch, _KupDataTable_renderTotalsMatrix, _KupDataTable_renderBackFromTotalsMatrix, _KupDataTable_renderGridPanel, _KupDataTable_renderCommandButton, _KupDataTable_handleChipsContextMenu, _KupDataTable_renderCommandDropDownButton, _KupDataTable_renderOtherButtons, _KupDataTable_renderUpdateButtons, _KupDataTable_createDeletePayload, _KupDataTable_isRowInserted, _KupDataTable_isRowModified, _KupDataTable_arraysContainSameElements;
 const dom$2 = document.documentElement;
 const KupDataTable = class {
     constructor(hostRef) {
@@ -8708,10 +8772,21 @@ const KupDataTable = class {
          * contains the id greater value in #originalDataLoaded
          */
         _KupDataTable_originalDataLoadedMaxId.set(this, void 0);
+        /**
+         * variables keeping track of the matrix properties before the totals view
+         */
+        _KupDataTable_beforeTotalMatrixData.set(this, undefined);
+        _KupDataTable_beforeTotalMatrixGroups.set(this, undefined);
+        _KupDataTable_beforeTotalMatrixTotals.set(this, undefined);
+        _KupDataTable_beforeTotalMatrixVisibleColumns.set(this, undefined);
         /**
          * contains the id greater value in #originalDataLoaded
          */
         _KupDataTable_insertedRowIds.set(this, []);
+        /**
+         * contains the id greater value in #originalDataLoaded
+         */
+        _KupDataTable_modifiedRowsIds.set(this, []);
         /**
          * Reference to the working area of the table. This is the below-wrapper reference.
          */
@@ -8854,11 +8929,12 @@ const KupDataTable = class {
             }
         });
         _KupDataTable_handleUpdateClick.set(this, (command) => {
+            var _a, _b;
             this.kupUpdate.emit({
                 comp: this,
                 id: this.rootElement.id,
-                originalData: __classPrivateFieldGet$8(this, _KupDataTable_originalDataLoaded, "f"),
-                updatedData: getDiffData(__classPrivateFieldGet$8(this, _KupDataTable_originalDataLoaded, "f"), this.data, true),
+                originalData: (_a = __classPrivateFieldGet$8(this, _KupDataTable_originalDataLoaded, "f")) !== null && _a !== void 0 ? _a : this.data,
+                updatedData: getDiffData((_b = __classPrivateFieldGet$8(this, _KupDataTable_originalDataLoaded, "f")) !== null && _b !== void 0 ? _b : this.data, this.data, true, __classPrivateFieldGet$8(this, _KupDataTable_insertedRowIds, "f")),
                 command: command,
             });
         });
@@ -8962,6 +9038,7 @@ const KupDataTable = class {
         this.openedTotalMenu = null;
         this.openedCustomSettings = false;
         this.fontsize = 'small';
+        this.totalsMatrixView = false;
     }
     initWithPersistedState() {
         if (this.store && this.stateId) {
@@ -9057,6 +9134,7 @@ const KupDataTable = class {
                 ? SelectionMode.MULTIPLE_CHECKBOX
                 : this.selection;
             __classPrivateFieldSet$4(this, _KupDataTable_insertedRowIds, [], "f");
+            __classPrivateFieldSet$4(this, _KupDataTable_modifiedRowsIds, [], "f");
             __classPrivateFieldSet$4(this, _KupDataTable_originalDataLoadedMaxId, ((_c = __classPrivateFieldGet$8(this, _KupDataTable_originalDataLoaded, "f").rows) === null || _c === void 0 ? void 0 : _c.length) > 0
                 ? Math.max(...__classPrivateFieldGet$8(this, _KupDataTable_originalDataLoaded, "f").rows.map((r) => parseInt(r.id)))
                 : -1, "f");
@@ -9376,7 +9454,7 @@ const KupDataTable = class {
             });
         });
         __classPrivateFieldGet$8(this, _KupDataTable_columnMenuCard, "f").addEventListener('kup-card-event', (e) => {
-            __classPrivateFieldGet$8(this, _KupDataTable_columnMenuInstance, "f").eventHandlers(e, this);
+            __classPrivateFieldGet$8(this, _KupDataTable_columnMenuInstance, "f").eventHandlers(e, this, columnName);
             this.kupDataTableColumnMenu.emit({
                 comp: this,
                 id: this.rootElement.id,
@@ -9620,6 +9698,11 @@ const KupDataTable = class {
             }
         }
     }
+    async toggleTotalsMatrix(columnName, calculateTotals) {
+        calculateTotals === true
+            ? __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_switchToTotalsMatrix).call(this, columnName)
+            : __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_switchBackFromTotalsMatrix).call(this);
+    }
     //---- Lifecycle hooks ----
     connectedCallback() {
         __classPrivateFieldSet$4(this, _KupDataTable_readyPromise, new Promise((resolve) => {
@@ -10009,8 +10092,13 @@ const KupDataTable = class {
             grid = __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_renderGridPanel).call(this);
             transpose = __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_renderTransposeSwitch).call(this);
             if (this.totals && this.groups.length > 0) {
+                // From original matrix to totalsMatrix
                 totalsMatrix = __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_renderTotalsMatrix).call(this);
             }
+            if (this.totalsMatrixView) {
+                // From totals matrix to original
+                totalsMatrix = __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_renderBackFromTotalsMatrix).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$4(this, _KupDataTable_customizeTopPanelRef, el, "f");
@@ -10063,7 +10151,7 @@ const KupDataTable = class {
         __classPrivateFieldSet$4(this, _KupDataTable_sizedColumns, __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_getSizedColumns).call(this), "f");
         let rows = null;
         if (__classPrivateFieldGet$8(this, _KupDataTable_paginatedRowsLength, "f") === 0) {
-            rows = (h("tr", { key: '65b3fb40eaad33e6d3c3bcb8f160b69856ecf701', ref: (el) => __classPrivateFieldGet$8(this, _KupDataTable_rowsRefs, "f").push(el) }, h("td", { key: '5e670d0765de2341365a739bc3f825e78721ac25', colSpan: __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_calculateColspan).call(this) }, this.emptyDataLabel)));
+            rows = (h("tr", { key: 'f756c110837ac07883be514318b398066cdc3840', ref: (el) => __classPrivateFieldGet$8(this, _KupDataTable_rowsRefs, "f").push(el) }, h("td", { key: '60bb274da01b04591b72c739b4a16c43700e0dce', colSpan: __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_calculateColspan).call(this) }, this.emptyDataLabel)));
         }
         else {
             rows = [];
@@ -10139,7 +10227,7 @@ const KupDataTable = class {
                         __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_handleChipsContextMenu).call(this, chipArg.id, e);
                     });
                 }
-                groupChips = h(FChip, Object.assign({ key: '5b8732380a56359aef620c40b29c64159570f9d9' }, props));
+                groupChips = h(FChip, Object.assign({ key: 'f97dd630bea3bd273b870b0db7bcd6da75b7bda6' }, props));
             }
         }
         const tableClass = {
@@ -10171,7 +10259,7 @@ const KupDataTable = class {
         if (this.headerIsPersistent &&
             this.tableHeight === undefined &&
             this.tableWidth === undefined) {
-            stickyEl = (h("sticky-header", { key: 'f4209dc154f69639a46e566999616b493caed499', class: "hover-scrolling-child", hidden: !this.showHeader, ref: (el) => (__classPrivateFieldSet$4(this, _KupDataTable_stickyTheadRef, el, "f")) }, h("thead-sticky", { key: 'de05e2fbcb98a9d1beaf6a9ae903219398d80478' }, h("tr-sticky", { key: 'd4df92b29c1a2328f1095e852fee3a98495ef33c' }, stickyHeader))));
+            stickyEl = (h("sticky-header", { key: '0662d9ee62e82826c4ac0f3b177a65e5be681b09', class: "hover-scrolling-child", hidden: !this.showHeader, ref: (el) => (__classPrivateFieldSet$4(this, _KupDataTable_stickyTheadRef, el, "f")) }, h("thead-sticky", { key: '2c2a444728fb55d1cf75fc1cf9355a190b5adc6d' }, h("tr-sticky", { key: '76635d27d299a0fbcaf2b4d8ba23dfe2ced0a57f' }, stickyHeader))));
         }
         let belowClass = 'below-wrapper';
         if (!!this.tableHeight || !!this.tableWidth) {
@@ -10217,12 +10305,16 @@ const KupDataTable = class {
         const useGlobalFilter = !this.legacyLook &&
             (this.globalFilter ||
                 this.getRows().length > __classPrivateFieldGet$8(this, _KupDataTable_DEFAULT_ROWS_FOR_GLOBAL_FILTER, "f"));
-        const compCreated = (h(Host, { key: '9a17685f40d632c7cb18a342236f99f96825120d', "onKup-drop": (e) => {
+        const compCreated = (h(Host, { key: '668806149ffdece2873c90423fc8230f1774d18d', "onKup-drop": (e) => {
                 this.kupDataTableDrop.emit(e.detail);
             }, "onKup-cell-input": (e) => {
                 autoselectOnAction(e);
                 this.kupDataTableCellInput.emit(e.detail);
-            }, "onKup-cell-update": autoselectOnAction, "onKup-cell-blur": __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_onBlurHandler), "onKup-cell-click": (e) => {
+                __classPrivateFieldGet$8(this, _KupDataTable_modifiedRowsIds, "f").push(e.detail.row.id);
+            }, "onKup-cell-update": (e) => {
+                autoselectOnAction(e);
+                __classPrivateFieldGet$8(this, _KupDataTable_modifiedRowsIds, "f").push(e.detail.row.id);
+            }, "onKup-cell-blur": __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_onBlurHandler), "onKup-cell-click": (e) => {
                 this.kupDataTableCellClick.emit(e.detail);
             }, "onKup-cell-iconclick": (e) => {
                 this.kupDataTableCellIconClick.emit(e.detail);
@@ -10232,11 +10324,11 @@ const KupDataTable = class {
                 this.kupDataTableObjectFieldOpenSearchMenu.emit(e.detail);
             }, "onKup-objectfield-selectedmenuitem": (e) => {
                 this.kupDataTableObjectFieldSelectedMenuItem.emit(e.detail);
-            } }, h("style", { key: '79ace6176b404970802c44e116bfe85eb4f97585' }, __classPrivateFieldGet$8(this, _KupDataTable_kupManager, "f").theme.setKupStyle(this.rootElement)), this.updatableData ? __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_renderUpdateButtons).call(this) : null, h("div", { key: '351cd4f3fa636ae8aac9b789ab5ddf2161b17942', id: componentWrapperId, class: wrapClass }, h("div", { key: '32ec90f3dc78d10462e5e5ef8a4ef0684cdcff36', class: "group-wrapper" }, groupChips), h("div", { key: '41c4515d9d59078f867aa638cdd3b9ea0f157d45', class: "actions-wrapper", style: actionWrapperWidth }, useGlobalFilter ? (h("div", { id: "global-filter" }, h(FTextField, { fullWidth: true, icon: KupThemeIconValues.SEARCH, label: __classPrivateFieldGet$8(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), sizing: KupComponentSizing.EXTRA_SMALL, value: this.globalFilterValue, onInput: (event) => {
+            } }, h("style", { key: 'b4f670a84ca9e6c048145c18b66c95c0c8d94bf2' }, __classPrivateFieldGet$8(this, _KupDataTable_kupManager, "f").theme.setKupStyle(this.rootElement)), this.updatableData ? __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_renderUpdateButtons).call(this) : null, __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_renderOtherButtons).call(this), h("div", { key: '10ad3ac25486699a1b2f4a72ef9a55df6923c09d', id: componentWrapperId, class: wrapClass }, h("div", { key: 'af5425d020f6aace2de2097b1640352af4c23474', class: "group-wrapper" }, groupChips), h("div", { key: 'c3719eb37a42275d12a14cdd9f17d4aa089a644b', class: "actions-wrapper", style: actionWrapperWidth }, useGlobalFilter ? (h("div", { id: "global-filter" }, h(FTextField, { fullWidth: true, icon: KupThemeIconValues.SEARCH, label: __classPrivateFieldGet$8(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), sizing: KupComponentSizing.EXTRA_SMALL, value: this.globalFilterValue, onInput: (event) => {
                 const t = event.target;
                 window.clearTimeout(__classPrivateFieldGet$8(this, _KupDataTable_globalFilterTimeout, "f"));
                 __classPrivateFieldSet$4(this, _KupDataTable_globalFilterTimeout, window.setTimeout(() => __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_onGlobalFilterChange).call(this, t), 600, t), "f");
-            } }))) : null, paginatorTop && (h("div", { key: 'cabedeb68bcfe2cf6a99deff4d591a9a9ee29bb3', class: "above-wrapper paginator-top" }, paginatorTop)), this.insertMode !== '' &&
+            } }))) : null, paginatorTop && (h("div", { key: 'e01912dae8c3547a51c34f1215a81139b81c0efc', class: "above-wrapper paginator-top" }, paginatorTop)), this.insertMode !== '' &&
             this.selectedRows.length > 0 ? (h(FButton, { icon: "save", onClick: () => {
                 this.kupSave.emit({
                     comp: this,
@@ -10286,9 +10378,9 @@ const KupDataTable = class {
                     this.data.rows.unshift(row);
                     await this.refresh(true);
                 }
-            }, sizing: KupComponentSizing.MEDIUM, styling: FButtonStyling.RAISED, title: "Insert row", wrapperClass: "insert-button" })) : null), h("div", { key: 'eb03546e0494b0185762bcbef91938c67fb67f71', class: "droparea", ref: (el) => (__classPrivateFieldSet$4(this, _KupDataTable_dropareaRef, el, "f")) }, this.showGroups ? __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_columnGroupArea).call(this) : null, this.removableColumns
+            }, sizing: KupComponentSizing.MEDIUM, styling: FButtonStyling.RAISED, title: "Insert row", wrapperClass: "insert-button" })) : null), h("div", { key: '4e3b3890fc29bc744b945cb12aff638259bf070a', class: "droparea", ref: (el) => (__classPrivateFieldSet$4(this, _KupDataTable_dropareaRef, el, "f")) }, this.showGroups ? __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_columnGroupArea).call(this) : null, this.removableColumns
             ? __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_columnRemoveArea).call(this)
-            : null), h("div", { key: '1c23ebbebedf9b71f1774dc9a719a814ae2d9342', style: elStyle, class: belowClass, ref: (el) => (__classPrivateFieldSet$4(this, _KupDataTable_tableAreaRef, el, "f")) }, this.showCustomization
+            : null), h("div", { key: '13e409dd5151019d4241f5c715fac71f45f8b2d9', style: elStyle, class: belowClass, ref: (el) => (__classPrivateFieldSet$4(this, _KupDataTable_tableAreaRef, el, "f")) }, this.showCustomization
             ? [
                 h("div", { class: "settings-trigger", onClick: () => {
                         __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_onCustomSettingsClick).call(this);
@@ -10297,7 +10389,7 @@ const KupDataTable = class {
                     } }, h(FImage, { color: `var(${KupThemeColorValues.TITLE})`, resource: "settings", sizeX: "10px" })),
                 this.renderCustomizePanel(),
             ]
-            : null, h("table", { key: '0c641583cbf04c513aa98d0dce01ca6d9b8c011c', class: tableClass, ref: (el) => (__classPrivateFieldSet$4(this, _KupDataTable_tableRef, el, "f")), onKeyDown: (e) => __classPrivateFieldGet$8(this, _KupDataTable_onKupKeyDown, "f").call(this, e), onMouseLeave: (ev) => {
+            : null, h("table", { key: '9dbaa5b996c7be9610cfc86f4fec1fe8f51bc088', class: tableClass, ref: (el) => (__classPrivateFieldSet$4(this, _KupDataTable_tableRef, el, "f")), onKeyDown: (e) => __classPrivateFieldGet$8(this, _KupDataTable_onKupKeyDown, "f").call(this, e), onMouseLeave: (ev) => {
                 ev.stopPropagation();
             }, onPointerDown: (e) => {
                 __classPrivateFieldSet$4(this, _KupDataTable_lastPointerDetails, __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_getEventDetails).call(this, __classPrivateFieldGet$8(this, _KupDataTable_kupManager, "f").getEventPath(e.target, this.rootElement), e), "f");
@@ -10305,7 +10397,7 @@ const KupDataTable = class {
                 __classPrivateFieldSet$4(this, _KupDataTable_lastPointerDetails, __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_getEventDetails).call(this, __classPrivateFieldGet$8(this, _KupDataTable_kupManager, "f").getEventPath(e.target, this.rootElement), e), "f");
             }, onContextMenu: (e) => {
                 e.preventDefault();
-            } }, h("thead", { key: '19ba63a8356e15878207df1c167825c7089dcb43', hidden: !this.showHeader, ref: (el) => (__classPrivateFieldSet$4(this, _KupDataTable_theadRef, el, "f")) }, h("tr", { key: '14477c0152f8a5dc08c6ca4adbff833c6f04713a' }, header)), h("tbody", { key: '1a91bb716cea4d295c659e30006385ac3c0081d6' }, rows), this.showFooter && this.renderFooter()), stickyEl), paginatorBottom)));
+            } }, h("thead", { key: '33ec409789766dea9659e28f214d0ec90898d64c', hidden: !this.showHeader, ref: (el) => (__classPrivateFieldSet$4(this, _KupDataTable_theadRef, el, "f")) }, h("tr", { key: '50d184585969f3626e86612213421f3fcc2f1212' }, header)), h("tbody", { key: '9eaadffb972a9332c77ba8c0f382d84b4b20e9fd' }, rows), this.showFooter && this.renderFooter()), stickyEl), paginatorBottom)));
         __classPrivateFieldGet$8(this, _KupDataTable_kupManager, "f").perfMonitoring.measure('componentRender', 'kup-data-table');
         return compCreated;
     }
@@ -10353,7 +10445,7 @@ const KupDataTable = class {
         "transpose": ["recalculateData"]
     }; }
 };
-_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_originalDataLoaded = new WeakMap(), _KupDataTable_originalDataLoadedMaxId = new WeakMap(), _KupDataTable_insertedRowIds = new WeakMap(), _KupDataTable_tableAreaRef = new WeakMap(), _KupDataTable_stickyTheadRef = new WeakMap(), _KupDataTable_lastPointerDetails = 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_actionsCard = new WeakMap(), _KupDataTable_confirmDeleteCard = new WeakMap(), _KupDataTable_confirmDeleteDialog = new WeakMap(), _KupDataTable_columnMenuCard = new WeakMap(), _KupDataTable_columnDropCard = new WeakMap(), _KupDataTable_columnDropCardAnchor = new WeakMap(), _KupDataTable_dropDownActionCardAnchor = new WeakMap(), _KupDataTable_insertCount = new WeakMap(), _KupDataTable_lastFocusedColumn = new WeakMap(), _KupDataTable_lastFocusedCell = new WeakMap(), _KupDataTable_lastFocusedRow = new WeakMap(), _KupDataTable_maxRowsPerPage = new WeakMap(), _KupDataTable_readyPromise = new WeakMap(), _KupDataTable_readyResolve = 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_DEFAULT_ROWS_FOR_GLOBAL_FILTER = new WeakMap(), _KupDataTable_stickyHeaderPosition = new WeakMap(), _KupDataTable_horNav = new WeakMap(), _KupDataTable_verNav = new WeakMap(), _KupDataTable_onKupKeyDown = new WeakMap(), _KupDataTable_handleUpdateClick = 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_checkUpdateState = function _KupDataTable_checkUpdateState() {
+_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_originalDataLoaded = new WeakMap(), _KupDataTable_originalDataLoadedMaxId = new WeakMap(), _KupDataTable_beforeTotalMatrixData = new WeakMap(), _KupDataTable_beforeTotalMatrixGroups = new WeakMap(), _KupDataTable_beforeTotalMatrixTotals = new WeakMap(), _KupDataTable_beforeTotalMatrixVisibleColumns = new WeakMap(), _KupDataTable_insertedRowIds = new WeakMap(), _KupDataTable_modifiedRowsIds = new WeakMap(), _KupDataTable_tableAreaRef = new WeakMap(), _KupDataTable_stickyTheadRef = new WeakMap(), _KupDataTable_lastPointerDetails = 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_actionsCard = new WeakMap(), _KupDataTable_confirmDeleteCard = new WeakMap(), _KupDataTable_confirmDeleteDialog = new WeakMap(), _KupDataTable_columnMenuCard = new WeakMap(), _KupDataTable_columnDropCard = new WeakMap(), _KupDataTable_columnDropCardAnchor = new WeakMap(), _KupDataTable_dropDownActionCardAnchor = new WeakMap(), _KupDataTable_insertCount = new WeakMap(), _KupDataTable_lastFocusedColumn = new WeakMap(), _KupDataTable_lastFocusedCell = new WeakMap(), _KupDataTable_lastFocusedRow = new WeakMap(), _KupDataTable_maxRowsPerPage = new WeakMap(), _KupDataTable_readyPromise = new WeakMap(), _KupDataTable_readyResolve = 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_DEFAULT_ROWS_FOR_GLOBAL_FILTER = new WeakMap(), _KupDataTable_stickyHeaderPosition = new WeakMap(), _KupDataTable_horNav = new WeakMap(), _KupDataTable_verNav = new WeakMap(), _KupDataTable_onKupKeyDown = new WeakMap(), _KupDataTable_handleUpdateClick = 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_checkUpdateState = function _KupDataTable_checkUpdateState() {
     let somethingChanged = false;
     if (!__classPrivateFieldGet$8(this, _KupDataTable_kupManager, "f").objects.deepEqual(this.state.filters, this.filters)) {
         this.state.filters = Object.assign({}, this.filters);
@@ -10606,127 +10698,190 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     if (this.data.columns.length > 0) {
         this.data = __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_getTransposedData).call(this, this.data.columns[0].name);
     }
-}, _KupDataTable_switchToTotalsMatrix = function _KupDataTable_switchToTotalsMatrix() {
-    if (__classPrivateFieldGet$8(this, _KupDataTable_rows, "f").length === 0 || !__classPrivateFieldGet$8(this, _KupDataTable_rows, "f")[0].group)
+}, _KupDataTable_switchBackFromTotalsMatrix = function _KupDataTable_switchBackFromTotalsMatrix() {
+    this.groups = __classPrivateFieldGet$8(this, _KupDataTable_beforeTotalMatrixGroups, "f");
+    this.data = __classPrivateFieldGet$8(this, _KupDataTable_beforeTotalMatrixData, "f");
+    this.totals = __classPrivateFieldGet$8(this, _KupDataTable_beforeTotalMatrixTotals, "f");
+    this.visibleColumns = __classPrivateFieldGet$8(this, _KupDataTable_beforeTotalMatrixVisibleColumns, "f");
+    __classPrivateFieldSet$4(this, _KupDataTable_beforeTotalMatrixData, undefined, "f");
+    __classPrivateFieldSet$4(this, _KupDataTable_beforeTotalMatrixGroups, undefined, "f");
+    __classPrivateFieldSet$4(this, _KupDataTable_beforeTotalMatrixTotals, undefined, "f");
+    __classPrivateFieldSet$4(this, _KupDataTable_beforeTotalMatrixVisibleColumns, undefined, "f");
+    this.totalsMatrixView = false;
+}, _KupDataTable_switchToTotalsMatrix = function _KupDataTable_switchToTotalsMatrix(columnName) {
+    const groupColName = columnName !== null && columnName !== void 0 ? columnName : this.groups[0].column;
+    const totalsColumns = Object.keys(this.totals);
+    __classPrivateFieldSet$4(this, _KupDataTable_beforeTotalMatrixData, this.data, "f");
+    __classPrivateFieldSet$4(this, _KupDataTable_beforeTotalMatrixGroups, this.groups, "f");
+    __classPrivateFieldSet$4(this, _KupDataTable_beforeTotalMatrixTotals, this.totals, "f");
+    __classPrivateFieldSet$4(this, _KupDataTable_beforeTotalMatrixVisibleColumns, this.visibleColumns, "f");
+    if (__classPrivateFieldGet$8(this, _KupDataTable_rows, "f").length === 0 ||
+        !__classPrivateFieldGet$8(this, _KupDataTable_rows, "f")[0].group ||
+        (totalsColumns === null || totalsColumns === void 0 ? void 0 : totalsColumns.length) === 0 ||
+        !groupColName)
         return;
-    // calc totals matrix data
+    // ---------------------------
+    // Build the matrix data object
+    // ---------------------------
     const totalsMatrixData = {};
-    // calc columns id
-    // 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$8(this, _KupDataTable_rows, "f")[0].group.column);
-    Object.keys(__classPrivateFieldGet$8(this, _KupDataTable_rows, "f")[0].group.totals).forEach((columnKey) => {
-        if (__classPrivateFieldGet$8(this, _KupDataTable_rows, "f")[0].group.column !== columnKey)
-            ids.push(columnKey);
+    const groupsToInsert = __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_getGroupElementsBefore).call(this, this.groups, groupColName);
+    // 1. Compute column IDs in correct order
+    const columnIds = [
+        ...groupsToInsert.map((group) => group.column),
+        ...[columnName],
+        ...Object.keys(this.totals),
+    ];
+    // 2. Optimize lookup of columns by building a Map
+    const columnMap = new Map(this.data.columns.map((col) => [col.name, col]));
+    // 3. Build matrix columns
+    totalsMatrixData.columns = columnIds
+        .map((id) => columnMap.get(id))
+        .filter((col) => !!col) // ensure defined
+        .map((col) => {
+        const currentColumn = Object.assign({}, col);
+        const totalMode = this.totals[currentColumn.name];
+        if (totalMode) {
+            currentColumn.title = __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_buildTotalTitle).call(this, currentColumn.title, totalMode);
+            __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_setObjForTotalsMatrix).call(this, currentColumn, this.totals);
+        }
+        return currentColumn;
     });
-    // calc columns
-    const totalsMatrixColumns = [];
-    ids.forEach((id) => {
-        this.data.columns.forEach((column) => {
-            if (column.name === id) {
-                const currentColumn = Object.assign({}, column);
-                const totalMode = this.totals[currentColumn.name];
-                if (totalMode) {
-                    if (totalMode.startsWith(TotalMode.MATH)) {
-                        currentColumn.title =
-                            TotalLabel[TotalMode.MATH] +
-                                ' ' +
-                                currentColumn.title;
-                    }
-                    else {
-                        const totalModeKey = Object.keys(TotalMode).find((key) => TotalMode[key] === totalMode);
-                        if (totalModeKey) {
-                            currentColumn.title =
-                                TotalLabel[totalModeKey] +
-                                    ' ' +
-                                    currentColumn.title;
-                        }
-                        else {
-                            currentColumn.title =
-                                totalMode + ' ' + currentColumn.title;
+    // 4. Build matrix rows
+    if (!groupsToInsert || groupsToInsert.length === 0) {
+        totalsMatrixData.rows = __classPrivateFieldGet$8(this, _KupDataTable_rows, "f").map((row, index) => {
+            const cells = {};
+            columnIds.forEach((id) => {
+                let totalValue;
+                if ((columnName === id ||
+                    groupsToInsert
+                        .map((group) => group.column)
+                        .includes(id)) &&
+                    row.group.id) {
+                    // ID is contained in the column of the group levels before the one clicked
+                    // ID equals the column relative to the group the user clicked
+                    // - Returns the value of the group - row headers
+                    totalValue = row.group.id;
+                }
+                else if (row.group.totals[id] &&
+                    Object.keys(this.totals).includes(id)) {
+                    // The column id is contained in the totals columns
+                    // and the total exists
+                    totalValue = row.group.totals[id];
+                }
+                else {
+                    // Default with an empty value because '---' breaks the totals
+                    totalValue = '';
+                }
+                if (__classPrivateFieldGet$8(this, _KupDataTable_kupManager, "f").dates.isIsoDate(totalValue)) {
+                    totalValue = __classPrivateFieldGet$8(this, _KupDataTable_kupManager, "f").dates.format(totalValue);
+                }
+                cells[id] = { value: String(totalValue) };
+            });
+            return {
+                id: String(index),
+                cells,
+            };
+        });
+    }
+    else {
+        totalsMatrixData.rows = [];
+        for (const row of __classPrivateFieldGet$8(this, _KupDataTable_rows, "f")) {
+            const foundGroups = __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_findGroupsAtLevel).call(this, row.group, columnName);
+            if (foundGroups) {
+                for (const g of foundGroups) {
+                    if (g === null || g === void 0 ? void 0 : g.totals) {
+                        const utilityRow = g.children[0];
+                        for (const [key, value] of Object.entries(g.totals)) {
+                            let cellValue = value;
+                            if (__classPrivateFieldGet$8(this, _KupDataTable_kupManager, "f").dates.isIsoDate(cellValue)) {
+                                cellValue =
+                                    __classPrivateFieldGet$8(this, _KupDataTable_kupManager, "f").dates.format(cellValue);
+                            }
+                            utilityRow.cells[key].value = String(cellValue);
+                            utilityRow.cells[key].obj.k = String(cellValue);
+                            utilityRow.cells[key].displayedValue =
+                                String(cellValue);
                         }
+                        totalsMatrixData.rows.push(utilityRow);
                     }
-                    __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_setObjForTotalsMatrix).call(this, currentColumn, this.totals);
                 }
-                totalsMatrixColumns.push(currentColumn);
             }
-        });
-    });
-    // set columns
-    totalsMatrixData.columns = totalsMatrixColumns;
-    // calc rows
-    const totalsMatrixRows = [];
-    let index = 0;
-    __classPrivateFieldGet$8(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$8(this, _KupDataTable_kupManager, "f").dates.isIsoDate(totalValue)) {
-                totalValue = __classPrivateFieldGet$8(this, _KupDataTable_kupManager, "f").dates.format(totalValue);
-            }
-            cells[id] = {
-                value: String(totalValue),
-            };
-        });
-        totalsMatrixRows.push({
-            id: String(index),
-            cells,
-        });
-        index++;
-    });
-    // set rows
-    totalsMatrixData.rows = totalsMatrixRows;
-    // reset groups
-    this.groups = [];
-    // update data
-    this.data = Object.assign({}, totalsMatrixData);
-    // calc totals
-    // distinct becomes count
-    // count becomes sum
-    const updatedTotals = {};
-    Object.keys(this.totals).forEach((key) => {
-        switch (this.totals[key]) {
+        }
+    }
+    // ---------------------------
+    // Finalize matrix
+    // ---------------------------
+    this.totalsMatrixView = true;
+    this.groups = groupsToInsert;
+    this.data = Object.assign({}, totalsMatrixData); // update dataset
+    this.totals = __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_promoteTotals).call(this, this.totals); // promote totals
+    this.visibleColumns = columnIds;
+}, _KupDataTable_findGroupsAtLevel = function _KupDataTable_findGroupsAtLevel(group, columnName) {
+    let results = [];
+    if (!group || !Array.isArray(group.children)) {
+        return results;
+    }
+    // check if any child group matches the columnName
+    const hasMatch = group.children.some((child) => { var _a; return ((_a = child.group) === null || _a === void 0 ? void 0 : _a.column) === columnName; });
+    if (hasMatch) {
+        // collect all sibling groups at this level
+        results.push(...group.children.map((child) => child.group));
+    }
+    else {
+        // traverse children
+        for (const child of group.children) {
+            results.push(...__classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_findGroupsAtLevel).call(this, child.group, columnName));
+        }
+    }
+    return results;
+}, _KupDataTable_getGroupElementsBefore = function _KupDataTable_getGroupElementsBefore(arr, target) {
+    const index = arr.findIndex((obj) => obj.column === target);
+    if (index <= 0) {
+        return []; // not found or at index 0
+    }
+    return arr.slice(0, index);
+}, _KupDataTable_buildTotalTitle = function _KupDataTable_buildTotalTitle(originalTitle, totalMode) {
+    if (totalMode.startsWith(TotalMode.MATH)) {
+        return `${TotalLabel[TotalMode.MATH]} ${originalTitle}`;
+    }
+    const totalModeKey = Object.keys(TotalMode).find((key) => TotalMode[key] === totalMode);
+    const label = totalModeKey ? TotalLabel[totalModeKey] : totalMode;
+    return `${label} ${originalTitle}`;
+}, _KupDataTable_promoteTotals = function _KupDataTable_promoteTotals(totals) {
+    const updated = {};
+    for (const [key, mode] of Object.entries(totals)) {
+        switch (mode) {
             case TotalMode.DISTINCT:
-                updatedTotals[key] = TotalMode.COUNT;
+                updated[key] = TotalMode.COUNT;
                 break;
             case TotalMode.COUNT:
-                updatedTotals[key] = TotalMode.SUM;
+                updated[key] = TotalMode.SUM;
                 break;
             default:
-                updatedTotals[key] = this.totals[key];
+                updated[key] = mode;
                 break;
         }
-    });
-    // update totals
-    this.totals = Object.assign({}, updatedTotals);
+    }
+    return updated;
 }, _KupDataTable_setObjForTotalsMatrix = function _KupDataTable_setObjForTotalsMatrix(column, totals) {
+    var _a;
     const obj = column.obj;
     const totalMode = totals[column.name];
+    // Date columns: keep MAX/MIN modes
     if (__classPrivateFieldGet$8(this, _KupDataTable_kupManager, "f").objects.isDate(obj)) {
-        // check if min or max totals mode
-        if (totalMode === TotalMode.MAX || totalMode === TotalMode.MIN) {
+        if (totalMode === TotalMode.MAX || totalMode === TotalMode.MIN)
             return;
-        }
     }
-    else if (__classPrivateFieldGet$8(this, _KupDataTable_kupManager, "f").objects.isNumber(obj)) {
-        // check if percentage
-        if (obj.p && obj.p.toUpperCase() === 'P') {
-            if (totalMode !== TotalMode.COUNT &&
-                totalMode !== TotalMode.DISTINCT) {
-                return;
-            }
+    // Percentage numbers: keep COUNT/DISTINCT modes
+    if (__classPrivateFieldGet$8(this, _KupDataTable_kupManager, "f").objects.isNumber(obj) &&
+        ((_a = obj.p) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === 'P') {
+        if (totalMode === TotalMode.COUNT ||
+            totalMode === TotalMode.DISTINCT) {
+            return;
         }
     }
-    // force obj number
-    column.obj = {
-        t: 'NR',
-        p: '',
-        k: '',
-    };
+    // Default: force numeric
+    column.obj = { t: 'NR', p: '', k: '' };
     if (column.icon) {
         delete column.icon;
     }
@@ -10804,7 +10959,7 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
 }, _KupDataTable_didLoadInteractables = function _KupDataTable_didLoadInteractables() {
     __classPrivateFieldGet$8(this, _KupDataTable_interactableTouch, "f").push(__classPrivateFieldGet$8(this, _KupDataTable_tableRef, "f"));
     const tapCb = (e) => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         if (__classPrivateFieldGet$8(this, _KupDataTable_hold, "f")) {
             __classPrivateFieldSet$4(this, _KupDataTable_hold, false, "f");
             return;
@@ -10823,7 +10978,8 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
                     const details = __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_getEventDetails).call(this, __classPrivateFieldGet$8(this, _KupDataTable_kupManager, "f").getEventPath(e.target, this.rootElement), e);
                     // in case a cell action icon is clicked
                     if (((_b = (_a = details === null || details === void 0 ? void 0 : details.cell) === null || _a === void 0 ? void 0 : _a.obj) === null || _b === void 0 ? void 0 : _b.t) !== 'J4' &&
-                        ((_d = (_c = details === null || details === void 0 ? void 0 : details.cell) === null || _c === void 0 ? void 0 : _c.obj) === null || _d === void 0 ? void 0 : _d.p) !== 'ICO') {
+                        ((_d = (_c = details === null || details === void 0 ? void 0 : details.cell) === null || _c === void 0 ? void 0 : _c.obj) === null || _d === void 0 ? void 0 : _d.p) !== 'ICO' &&
+                        ((_e = details === null || details === void 0 ? void 0 : details.cell) === null || _e === void 0 ? void 0 : _e.shape) !== FCellShapes.ICON) {
                         break;
                     }
                 }
@@ -12705,7 +12861,7 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
                 const rowActions = __classPrivateFieldGet$8(this, _KupDataTable_kupManager, "f").data.row.buildRowActions(row, this.getVisibleColumns({ includeCodVer: true }), this.rowActions, (_b = this.commands) !== null && _b !== void 0 ? _b : []);
                 if (__classPrivateFieldGet$8(this, _KupDataTable_kupManager, "f").data.action.checkEveryActionHasOnlyIcon(rowActions) ||
                     (rowActions.length === 1 && rowActions[0].icon)) {
-                    rowActions.forEach((action, index) => {
+                    rowActions.forEach((action) => {
                         var _a;
                         const imageProp = __classPrivateFieldGet$8(this, _KupDataTable_kupManager, "f").data.action.buildImageProp(action.icon, action.text || ((_a = action.column) === null || _a === void 0 ? void 0 : _a.title) || '', 'action', () => {
                             this.kupRowActionItemClick.emit({
@@ -12715,7 +12871,7 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
                                 obj: action.obj,
                                 cell: action.cell,
                                 type: action.type,
-                                index: index,
+                                index: action.index,
                                 column: action.column,
                             });
                         });
@@ -12817,6 +12973,8 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
         __classPrivateFieldGet$8(this, _KupDataTable_renderedRows, "f").push(row);
         const rowClass = {
             selected: this.selectedRows.includes(row),
+            inserted: __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_isRowInserted).call(this, row.id),
+            modified: !__classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_isRowInserted).call(this, row.id) && __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_isRowModified).call(this, row.id),
         };
         if (row.cssClass) {
             rowClass[row.cssClass] = true;
@@ -13032,7 +13190,12 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     return (h("div", { class: "customize-element grid-panel" }, h("kup-button", { title: __classPrivateFieldGet$8(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.TOTALS_TABLE) +
             ' (' +
             __classPrivateFieldGet$8(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.EXPERIMENTAL_FEAT) +
-            ')', label: __classPrivateFieldGet$8(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.TOTALS_TABLE), icon: "exposure", "onkup-button-click": () => __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_switchToTotalsMatrix).call(this) })));
+            ')', label: __classPrivateFieldGet$8(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.TOTALS_TABLE), icon: "exposure", "onkup-button-click": () => this.toggleTotalsMatrix() })));
+}, _KupDataTable_renderBackFromTotalsMatrix = function _KupDataTable_renderBackFromTotalsMatrix() {
+    return (h("div", { class: "customize-element grid-panel" }, h("kup-button", { title: __classPrivateFieldGet$8(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.BACK_TO_ORIGINAL_TABLE) +
+            ' (' +
+            __classPrivateFieldGet$8(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.EXPERIMENTAL_FEAT) +
+            ')', label: __classPrivateFieldGet$8(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.BACK_TO_ORIGINAL_TABLE), icon: "exposure", "onkup-button-click": () => __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_switchBackFromTotalsMatrix).call(this) })));
 }, _KupDataTable_renderGridPanel = function _KupDataTable_renderGridPanel() {
     const listItems = __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_createListData).call(this, __classPrivateFieldGet$8(this, _KupDataTable_GRID_CODES, "f"), __classPrivateFieldGet$8(this, _KupDataTable_GRID_ICONS, "f"), this.showGrid);
     const listData = { data: listItems, showIcons: true };
@@ -13080,18 +13243,39 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     return (h("kup-dropdown-button", Object.assign({}, commandObj.data, { styling: styling, sizing: KupComponentSizing.MEDIUM, label: commandObj.value, data: data, "onkup-dropdownbutton-itemclick": (e) => {
             __classPrivateFieldGet$8(this, _KupDataTable_handleUpdateClick, "f").call(this, e.detail.node);
         } })));
+}, _KupDataTable_renderOtherButtons = function _KupDataTable_renderOtherButtons() {
+    const styling = FButtonStyling.FLAT;
+    const addCommands = () => {
+        var _a, _b, _c;
+        (_c = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.setup) === null || _b === void 0 ? void 0 : _b.otherCommands) === null || _c === void 0 ? void 0 : _c.forEach((commandObj) => {
+            commandButtons.push((commandObj === null || commandObj === void 0 ? void 0 : commandObj.children) && (commandObj === null || commandObj === void 0 ? void 0 : commandObj.children.length) > 0
+                ? __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_renderCommandDropDownButton).call(this, commandObj, styling)
+                : __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_renderCommandButton).call(this, commandObj, styling));
+        });
+    };
+    let commandButtons = [];
+    addCommands();
+    return (!!commandButtons.length && (h("div", { class: "commands" }, commandButtons)));
 }, _KupDataTable_renderUpdateButtons = function _KupDataTable_renderUpdateButtons() {
     const styling = FButtonStyling.FLAT;
     const createRowWithInputFields = () => {
         var _a;
-        let row = { cells: {} };
-        (_a = __classPrivateFieldGet$8(this, _KupDataTable_originalDataLoaded, "f")) === null || _a === void 0 ? void 0 : _a.columns.forEach((c) => {
-            var _a;
-            row.cells[c.name] = {
-                shape: (_a = c.shape) !== null && _a !== void 0 ? _a : FCellShapes.INPUT_FIELD,
+        const row = { cells: {} };
+        (_a = this.data) === null || _a === void 0 ? void 0 : _a.columns.forEach((c) => {
+            var _a, _b;
+            const cell = {
+                shape: (_a = c.shape) !== null && _a !== void 0 ? _a : FCellShapes.TEXT_FIELD,
                 obj: Object.assign({}, c.obj),
-                isEditable: true,
+                isEditable: (_b = c.isEditable) !== null && _b !== void 0 ? _b : true,
+                data: {},
             };
+            if (c['length'] && c['maxLength']) {
+                cell.data = {
+                    size: c['length'],
+                    maxLength: c['maxLength'],
+                };
+            }
+            row.cells[c.name] = cell;
         });
         return row;
     };
@@ -13118,10 +13302,6 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
         __classPrivateFieldGet$8(this, _KupDataTable_insertedRowIds, "f").push(newRow.id);
         this.insertNewRow(newRow, true);
     };
-    const deleteRowHandler = async () => {
-        const ids = (await this.getSelectedRows()).map((row) => row.id);
-        this.deleteRows(ids);
-    };
     const addConfirmButton = () => {
         if (this.hiddenSubmitButton) {
             return;
@@ -13152,7 +13332,24 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
                 enabled: operationList === null || operationList === void 0 ? void 0 : operationList.delete,
                 icon: 'minus',
                 title: __classPrivateFieldGet$8(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageGeneric.ROW_DELETE),
-                onClickHandler: () => deleteRowHandler(),
+                onClickHandler: () => {
+                    const selectedRowsIds = this.selectedRows.map((row) => row.id);
+                    const insertedRowsIds = __classPrivateFieldGet$8(this, _KupDataTable_insertedRowIds, "f");
+                    if (__classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_arraysContainSameElements).call(this, selectedRowsIds, insertedRowsIds)) {
+                        //If the only rows to delete are the ones inserted by the user
+                        //AND NOT CONFIRMED, avoid calling the update
+                        this.deleteRows(selectedRowsIds);
+                    }
+                    else {
+                        this.kupUpdate.emit({
+                            comp: this,
+                            id: this.rootElement.id,
+                            originalData: __classPrivateFieldGet$8(this, _KupDataTable_originalDataLoaded, "f"),
+                            updatedData: __classPrivateFieldGet$8(this, _KupDataTable_instances, "m", _KupDataTable_createDeletePayload).call(this),
+                            command: undefined,
+                        });
+                    }
+                },
             },
         };
         Object.values(operations)
@@ -13166,6 +13363,20 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     addCommands();
     addOperations();
     return (!!commandButtons.length && (h("div", { class: "commands" }, commandButtons)));
+}, _KupDataTable_createDeletePayload = function _KupDataTable_createDeletePayload() {
+    const idsToRemove = this.selectedRows.map((item) => item.id);
+    const newRows = __classPrivateFieldGet$8(this, _KupDataTable_originalDataLoaded, "f").rows.filter((row) => !idsToRemove.includes(row.id));
+    return getDiffData(__classPrivateFieldGet$8(this, _KupDataTable_originalDataLoaded, "f"), Object.assign(Object.assign({}, __classPrivateFieldGet$8(this, _KupDataTable_originalDataLoaded, "f")), { rows: newRows }), true);
+}, _KupDataTable_isRowInserted = function _KupDataTable_isRowInserted(rowId) {
+    return __classPrivateFieldGet$8(this, _KupDataTable_insertedRowIds, "f").includes(rowId);
+}, _KupDataTable_isRowModified = function _KupDataTable_isRowModified(rowId) {
+    return __classPrivateFieldGet$8(this, _KupDataTable_modifiedRowsIds, "f").includes(rowId);
+}, _KupDataTable_arraysContainSameElements = function _KupDataTable_arraysContainSameElements(arr1, arr2) {
+    if (arr1.length !== arr2.length)
+        return false;
+    const sorted1 = [...arr1].sort();
+    const sorted2 = [...arr2].sort();
+    return sorted1.every((val, index) => val === sorted2[index]);
 };
 KupDataTable.style = KupDataTableStyle0;
 
@@ -13567,7 +13778,7 @@ const KupDatePicker = class {
                 showPreviousNextMonthDays: this.showPreviousNextMonthDays,
             },
         };
-        return (h(Host, { key: '4c53bd7bac94334e6e7cbc3992da2024a2062fdf' }, h("style", { key: '625ecea49d44c9451c9174b43a7ef1b69bae392e' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'b50d12bb7550d9cddaed8c1429dbde2ab6b88777', id: componentWrapperId }, h(FTextField, Object.assign({ key: 'c2f78eae07d993dcaf2454329de981006c1ffa1e' }, textfieldData, { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, maxLength: (_a = textfieldData.maxLength) !== null && _a !== void 0 ? _a : 10, size: 10, id: this.rootElement.id + '_text-field', value: this.getDateForOutput(), onBlur: () => this.onKupBlur(), onChange: (e) => this.onKupChange(e), onClearIconClick: () => this.onKupClearIconClick(), onClick: () => this.onKupClick(), onFocus: () => this.onKupFocus(), onIconClick: () => this.onKupIconClick(), onKeyDown: (e) => this.onKupTextFieldSubmit(e), onInput: (e) => this.onKupInput(e) }), h("div", { key: 'a73631f1dc1e6fb33c9b17a02bcbc1101f3ce88d', id: this.rootElement.id + '_card', class: "kup-date-picker-card" }, h("kup-card", { key: 'aec6de4c78ee91185b91485b4d9045026ff84ba1', ref: (el) => (this.pickerContainerEl = el), data: cardData, layoutFamily: KupCardFamily.BUILT_IN, sizeX: "300px", sizeY: "auto", isMenu: true, "onkup-card-click": (ev) => {
+        return (h(Host, { key: '827b64b4e81a6238bd45388c3f5234a29685ce74' }, h("style", { key: '4bb32836db6bd0e39579f52abbd5b29cef9d2bf6' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'f8549d32cf3813544c56ad90f7b6e619dd131a53', id: componentWrapperId }, h(FTextField, Object.assign({ key: 'b561786c364f4f27b5edba3746202a8a6d5301b3' }, textfieldData, { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, maxLength: (_a = textfieldData.maxLength) !== null && _a !== void 0 ? _a : 10, size: 10, id: this.rootElement.id + '_text-field', value: this.getDateForOutput(), onBlur: () => this.onKupBlur(), onChange: (e) => this.onKupChange(e), onClearIconClick: () => this.onKupClearIconClick(), onClick: () => this.onKupClick(), onFocus: () => this.onKupFocus(), onIconClick: () => this.onKupIconClick(), onKeyDown: (e) => this.onKupTextFieldSubmit(e), onInput: (e) => this.onKupInput(e) }), h("div", { key: '136e15a45145ed9160a7da70ec0444ff417ec0c7', id: this.rootElement.id + '_card', class: "kup-date-picker-card" }, h("kup-card", { key: '5dd13a969e65cd4a6b4ebc9ea96019904ab7ffd6', ref: (el) => (this.pickerContainerEl = el), data: cardData, layoutFamily: KupCardFamily.BUILT_IN, sizeX: "300px", sizeY: "auto", isMenu: true, "onkup-card-click": (ev) => {
                 if (ev.detail.value != null &&
                     ev.detail.value != '')
                     this.onKupDatePickerItemClick(ev.detail.value);
@@ -14200,12 +14411,15 @@ KupDropdownButton.style = KupDropdownButtonStyle0;
 var KupFileUploadProps;
 (function (KupFileUploadProps) {
     KupFileUploadProps["customStyle"] = "Custom style of the component.";
+    KupFileUploadProps["error"] = "Error string to render in component";
     KupFileUploadProps["pathString"] = "The initial filepaths.";
     KupFileUploadProps["FupMul"] = "Sets the multiple upload.";
     KupFileUploadProps["FupAut"] = "Sets the auto upload of select file";
+    KupFileUploadProps["FupDir"] = "Sets the custom dir to upload files";
+    KupFileUploadProps["FupAty"] = "Sets the accepted extensions";
 })(KupFileUploadProps || (KupFileUploadProps = {}));
 
-const kupFileUploadCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:var(--kup-body-01-font-size, 14px);line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:var(--kup-label-01-font-size, 12px);line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-heading-compact-01-font-size, 14px);line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:var(--kup-heading-01-font-size, 14px);line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}:host{--kup_upload_icon_color:var(--kup-upload-icon-color, var(--kup-icon-color));--kup_upload_border_color:var(\n    --kup-upload-border-color,\n    var(--kup-gray-color-30)\n  );flex:1;min-width:360px}:host .file-upload-spinner>*{opacity:0.6;pointer-events:none}:host .file-upload-spinner>file-upload__spinner-container{opacity:1}:host .file-upload{display:flex;flex-direction:column;gap:1em;border:2px dashed var(--kup_upload_border_color);border-radius:4px;padding:1em;position:relative}:host .file-upload__buttons{display:flex;gap:1em;align-items:center;justify-content:center}:host .file-upload__buttons .spinner{height:48px;margin:auto;width:48px}:host .file-upload__error{display:flex;justify-content:center}:host .file-upload__error .mdc-error-message{font-family:var(--kup-font-family);font-size:var(--kup-label-01-font-size, 12px);line-height:16px;font-weight:400;letter-spacing:0.32px;color:var(--kup-danger-color-60)}:host .file-upload__list{display:flex;flex-direction:column;gap:1em}:host .file-upload__list__item{display:flex;gap:1em;align-items:center}:host .file-upload__list__item__preview{height:3em;width:3em;display:flex;align-items:center}:host .file-upload__list__item__desc{width:14em}:host .file-upload__list__item__clear{background-color:var(--kup_upload_icon_color);cursor:pointer;height:16px;width:16px;min-width:16px;min-height:16px;outline:none;pointer-events:all;-webkit-mask:var(--kup-clear-icon);mask:var(--kup-clear-icon)}:host .file-upload__list__item__clear:hover{background-color:var(--kup-danger-color-60)}:host .file-upload__spinner-container{height:calc(100% - 2em);width:20%;position:absolute;left:40%}";
+const kupFileUploadCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:var(--kup-body-01-font-size, 14px);line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:var(--kup-label-01-font-size, 12px);line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-heading-compact-01-font-size, 14px);line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:var(--kup-heading-01-font-size, 14px);line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}:host{--kup_upload_icon_color:var(--kup-upload-icon-color, var(--kup-icon-color));--kup_upload_border_color:var(\n    --kup-upload-border-color,\n    var(--kup-gray-color-30)\n  );flex:1;min-width:360px}:host .file-upload-spinner>*{opacity:0.6;pointer-events:none}:host .file-upload-spinner>file-upload__spinner-container{opacity:1}:host .file-upload{display:flex;flex-direction:column;gap:1em;border:2px dashed var(--kup_upload_border_color);border-radius:4px;padding:1em;position:relative}:host .file-upload__invalid{border-color:var(--kup-danger-color, #d32f2f);background:rgba(211, 47, 47, 0.06);box-shadow:0 0 0 2px rgba(211, 47, 47, 0.15) inset;cursor:not-allowed}:host .file-upload__invalid *{opacity:0.95}:host .file-upload__buttons{display:flex;gap:1em;align-items:center;justify-content:center}:host .file-upload__buttons .spinner{height:48px;margin:auto;width:48px}:host .file-upload__error{display:flex;justify-content:center}:host .file-upload__error .mdc-error-message{font-family:var(--kup-font-family);font-size:var(--kup-label-01-font-size, 12px);line-height:16px;font-weight:400;letter-spacing:0.32px;color:var(--kup-danger-color-60)}:host .file-upload__list{display:flex;flex-direction:column;gap:1em}:host .file-upload__list__item{display:flex;gap:1em;align-items:center}:host .file-upload__list__item__preview{height:3em;width:3em;display:flex;align-items:center}:host .file-upload__list__item__desc{width:14em}:host .file-upload__list__item__clear{background-color:var(--kup_upload_icon_color);cursor:pointer;height:16px;width:16px;min-width:16px;min-height:16px;outline:none;pointer-events:all;-webkit-mask:var(--kup-clear-icon);mask:var(--kup-clear-icon)}:host .file-upload__list__item__clear:hover{background-color:var(--kup-danger-color-60)}:host .file-upload__spinner-container{height:calc(100% - 2em);width:20%;position:absolute;left:40%}";
 const KupFileUploadStyle0 = kupFileUploadCss;
 
 var __classPrivateFieldGet$6 = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
@@ -14215,7 +14429,7 @@ var __classPrivateFieldGet$6 = (undefined && undefined.__classPrivateFieldGet) |
         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 _KupFileUpload_instances, _KupFileUpload_kupManager, _KupFileUpload_previewMap, _KupFileUpload_handleClick, _KupFileUpload_handleFileChange, _KupFileUpload_handleFileRemove, _KupFileUpload_handleDrop, _KupFileUpload_handleCancel, _KupFileUpload_getPreview, _KupFileUpload_trimFileName, _KupFileUpload_uploadClick;
+var _KupFileUpload_instances, _KupFileUpload_kupManager, _KupFileUpload_previewMap, _KupFileUpload_handleClick, _KupFileUpload_handleFileChange, _KupFileUpload_handleDrop, _KupFileUpload_handleFileRemove, _KupFileUpload_processFiles, _KupFileUpload_handleCancel, _KupFileUpload_getPreview, _KupFileUpload_trimFileName, _KupFileUpload_uploadClick, _KupFileUpload_getUniqueFiles, _KupFileUpload_isValidDraggedItems, _KupFileUpload_areValidFiles, _KupFileUpload_isValidFile, _KupFileUpload_getFileExtension;
 const KupFileUpload = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -14247,25 +14461,32 @@ const KupFileUpload = class {
         this.FupMul = 'false';
         this.FupAut = 'false';
         this.FupDir = null;
+        this.FupAty = null;
         this.error = undefined;
         this.inputRef = undefined;
         this.tempFiles = [];
         this.pathFiles = [];
-        this.uploadSuccess = false;
         this.showSpinner = false;
         this.multiUpload = false;
         this.autoUpload = false;
+        this.acceptedFiles = null;
+        this.isValidDropFiles = true;
+        this.fupError = null;
     }
     //#endregion
     //#region WATCHERS
     /*-------------------------------------------------*/
     /*                  W a t c h e r s                */
     /*-------------------------------------------------*/
+    onErrorChange() {
+        this.fupError = this.error;
+    }
     onDataChanged() {
         var _a;
-        this.uploadSuccess = false;
+        this.fupError = '';
         __classPrivateFieldGet$6(this, _KupFileUpload_instances, "m", _KupFileUpload_handleCancel).call(this);
-        this.pathFiles = ((_a = this.pathString) === null || _a === void 0 ? void 0 : _a.split(';')) || [];
+        this.pathFiles =
+            ((_a = this.pathString) === null || _a === void 0 ? void 0 : _a.split(';').filter((path) => path.trim())) || [];
     }
     onFupMulChanged() {
         this.multiUpload = this.FupMul === 'true';
@@ -14273,6 +14494,10 @@ const KupFileUpload = class {
     onFupAutChanged() {
         this.autoUpload = this.FupAut === 'true';
     }
+    onFupFupAtyChanged() {
+        var _a;
+        this.acceptedFiles = (_a = this.FupAty) === null || _a === void 0 ? void 0 : _a.split('|').map((ext) => `.${ext}`);
+    }
     //#endregion
     //#region PUBLIC METHODS
     /*-------------------------------------------------*/
@@ -14307,7 +14532,6 @@ const KupFileUpload = class {
         this.setLoading(false);
         if (success && pathFiles) {
             __classPrivateFieldGet$6(this, _KupFileUpload_instances, "m", _KupFileUpload_handleCancel).call(this);
-            this.uploadSuccess = success;
             this.pathFiles = this.multiUpload
                 ? [...this.pathFiles, ...pathFiles.split(';')]
                 : [pathFiles.split(';')[0]];
@@ -14331,11 +14555,13 @@ const KupFileUpload = class {
     /*          L i f e c y c l e   H o o k s          */
     /*-------------------------------------------------*/
     componentWillLoad() {
+        var _a;
         __classPrivateFieldGet$6(this, _KupFileUpload_kupManager, "f").debug.logLoad(this, false);
         __classPrivateFieldGet$6(this, _KupFileUpload_kupManager, "f").language.register(this);
         __classPrivateFieldGet$6(this, _KupFileUpload_kupManager, "f").theme.register(this);
         this.multiUpload = this.FupMul === 'true';
         this.autoUpload = this.FupAut === 'true';
+        this.acceptedFiles = (_a = this.FupAty) === null || _a === void 0 ? void 0 : _a.split('|').map((ext) => `.${ext}`);
     }
     componentDidLoad() {
         this.kupReady.emit({ comp: this, id: this.rootElement.id });
@@ -14348,10 +14574,16 @@ const KupFileUpload = class {
         __classPrivateFieldGet$6(this, _KupFileUpload_kupManager, "f").debug.logRender(this, true);
     }
     render() {
-        return (h(Host, { key: 'f412a49eeb30049bdc81a66ab6337e3cfba02b81' }, h("style", { key: '00f66f5328af5e41c35576acbdc73d84b9152cfc' }, __classPrivateFieldGet$6(this, _KupFileUpload_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '7a5f52038e5b41ed7639a2acc0db051b14c5e6e4', id: componentWrapperId }, h("div", { key: 'aff6d5be5a5ca600a1950a2195f9a26ae6f164c6', class: {
+        var _a;
+        return (h(Host, { key: 'e82c20508f86798008b2e961f2cef347ea19908f' }, h("style", { key: 'f9549e18810a5d38d300c167142d41e783d9e80d' }, __classPrivateFieldGet$6(this, _KupFileUpload_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '09d2ae3e36a7e871aba975ccbb745472cb63652f', id: componentWrapperId }, h("div", { key: 'c2b798c7bf6cababc587990b710515060bb2e2a8', class: {
                 'file-upload': true,
                 'file-upload-spinner': this.showSpinner,
-            }, onDrop: __classPrivateFieldGet$6(this, _KupFileUpload_instances, "m", _KupFileUpload_handleDrop).bind(this), onDragOver: (event) => event.preventDefault() }, h("input", { key: '2d7d9cce86ee2dccb4183105bd2f87fbfbd8e771', type: "file", ref: (el) => (this.inputRef = el), onChange: __classPrivateFieldGet$6(this, _KupFileUpload_instances, "m", _KupFileUpload_handleFileChange).bind(this), multiple: this.multiUpload, hidden: true }), h("div", { key: 'ed2ab48eb2cb2c6cfde66c1cc3ffd82a40ec25b9', class: "file-upload__buttons" }, h(FButton, { key: '419105498c36ca6b6af5ca01d5ec7c751e593172', icon: "upload", label: __classPrivateFieldGet$6(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageGeneric.CHOOSE), onClick: __classPrivateFieldGet$6(this, _KupFileUpload_instances, "m", _KupFileUpload_handleClick).bind(this) }), !this.autoUpload && (h(Fragment, { key: '1b7549c1063dd8c2f17b17b1b8c59ef02937c66d' }, h(FButton, { key: 'c67ce873043022be3d1d2f7bddad747940993b2f', icon: "save", disabled: !this.tempFiles.length, label: __classPrivateFieldGet$6(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageGeneric.UPLOAD), onClick: __classPrivateFieldGet$6(this, _KupFileUpload_instances, "m", _KupFileUpload_uploadClick).bind(this), styling: FButtonStyling.FLAT }), h(FButton, { key: '4c6779d87c9bf1fc272afdab69b798aedfc222fc', icon: "clear", disabled: !this.tempFiles.length, label: __classPrivateFieldGet$6(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageGeneric.ABORT), onClick: __classPrivateFieldGet$6(this, _KupFileUpload_instances, "m", _KupFileUpload_handleCancel).bind(this), styling: FButtonStyling.FLAT })))), this.error && (h("div", { key: '39033957eb653997df1241f583bb361fe424ae42', class: "file-upload__error" }, h("span", { key: 'b862700c37fac995a820c8a0e21a168486f097ae', class: "mdc-error-message" }, this.error))), this.uploadSuccess ? (h("span", null, __classPrivateFieldGet$6(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageUpload.SUCCESS))) : (h("div", { class: "file-upload__list" }, this.tempFiles.map((file, i) => (h("div", { class: "file-upload__list__item" }, h("div", { class: "file-upload__list__item__preview" }, h(FImage, { resource: __classPrivateFieldGet$6(this, _KupFileUpload_instances, "m", _KupFileUpload_getPreview).call(this, file), placeholderResource: "file" })), h("span", { class: "file-upload__list__item__desc", title: file.name }, __classPrivateFieldGet$6(this, _KupFileUpload_instances, "m", _KupFileUpload_trimFileName).call(this, file.name)), h("span", { class: "file-upload__list__item__clear", onClick: __classPrivateFieldGet$6(this, _KupFileUpload_instances, "m", _KupFileUpload_handleFileRemove).bind(this, i) })))))), this.pathFiles.length ? (h("div", { class: "file-upload__list" }, this.pathFiles.map((path, i) => (h("span", { class: "file-upload__list__item" }, h("span", null, i + 1, ". ", path)))))) : null, this.showSpinner && (h("div", { key: '33fae247104f72981e072659f04f7fff71e0785a', class: "file-upload__spinner-container" }, h("kup-spinner", { key: 'f86cb406e5b9476c9f37f02845b48e8b41ca191d', active: true, layout: 14, dimensions: "7px" })))))));
+                'file-upload__invalid': !this.isValidDropFiles,
+            }, onDragOver: (event) => {
+                var _a;
+                event.preventDefault();
+                this.isValidDropFiles = __classPrivateFieldGet$6(this, _KupFileUpload_instances, "m", _KupFileUpload_isValidDraggedItems).call(this, (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.items);
+            }, onDrop: __classPrivateFieldGet$6(this, _KupFileUpload_instances, "m", _KupFileUpload_handleDrop).bind(this), onDragLeave: () => (this.isValidDropFiles = true), onDragEnd: () => (this.isValidDropFiles = true) }, h("input", { key: 'a79897d0ea5885a55a71f04ce39bbd4791e1462d', type: "file", ref: (el) => (this.inputRef = el), onChange: __classPrivateFieldGet$6(this, _KupFileUpload_instances, "m", _KupFileUpload_handleFileChange).bind(this), multiple: this.multiUpload, accept: (_a = this.acceptedFiles) === null || _a === void 0 ? void 0 : _a.join(','), hidden: true }), h("div", { key: '856a74817a14d88844efb2b9ad765e8d7223d547', class: "file-upload__buttons" }, h(FButton, { key: '1eb230b6313b6fb9e65f178b9e4edd0592e87e20', icon: "upload", label: __classPrivateFieldGet$6(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageGeneric.CHOOSE), onClick: __classPrivateFieldGet$6(this, _KupFileUpload_instances, "m", _KupFileUpload_handleClick).bind(this) }), !this.autoUpload && (h(Fragment, { key: 'df73268c675f6bf4ce81cd44c80a01305adf2f97' }, h(FButton, { key: '821b641f32a70972892b624d8ac55a9e38faaa14', icon: "save", disabled: !this.tempFiles.length, label: __classPrivateFieldGet$6(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageGeneric.UPLOAD), onClick: __classPrivateFieldGet$6(this, _KupFileUpload_instances, "m", _KupFileUpload_uploadClick).bind(this), styling: FButtonStyling.FLAT }), h(FButton, { key: 'f8f969b3eb16bd86dcd4826b3c3f46f8f8551b8f', icon: "clear", disabled: !this.tempFiles.length, label: __classPrivateFieldGet$6(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageGeneric.ABORT), onClick: __classPrivateFieldGet$6(this, _KupFileUpload_instances, "m", _KupFileUpload_handleCancel).bind(this), styling: FButtonStyling.FLAT })))), this.fupError && (h("div", { key: '2b760c793e980290ffb0847f46d0d5fb0abfac73', class: "file-upload__error" }, h("span", { key: '4c1a2cd135f330cf0dbda3f4da6dca78a5a298d4', class: "mdc-error-message" }, this.fupError))), h("div", { key: 'a034a8a57062eba3445e29168f740b867d5085a7', class: "file-upload__list" }, this.tempFiles.map((file, i) => (h("div", { class: "file-upload__list__item" }, h("div", { class: "file-upload__list__item__preview" }, h(FImage, { resource: __classPrivateFieldGet$6(this, _KupFileUpload_instances, "m", _KupFileUpload_getPreview).call(this, file), placeholderResource: "file" })), h("span", { class: "file-upload__list__item__desc", title: file.name }, __classPrivateFieldGet$6(this, _KupFileUpload_instances, "m", _KupFileUpload_trimFileName).call(this, file.name)), h("span", { class: "file-upload__list__item__clear", onClick: __classPrivateFieldGet$6(this, _KupFileUpload_instances, "m", _KupFileUpload_handleFileRemove).bind(this, i) }))))), this.pathFiles.length ? (h("div", { class: "file-upload__list" }, this.pathFiles.map((path, i) => (h("span", { class: "file-upload__list__item" }, h("span", null, i + 1, ". ", path)))))) : null, this.showSpinner && (h("div", { key: 'cda18a34e433799f62f0026f4b38af748d39d2d7', class: "file-upload__spinner-container" }, h("kup-spinner", { key: 'cb010ba98b016941a087af4b250be33f675ac3fa', active: true, layout: 14, dimensions: "7px" })))))));
     }
     disconnectedCallback() {
         __classPrivateFieldGet$6(this, _KupFileUpload_kupManager, "f").language.unregister(this);
@@ -14359,19 +14591,50 @@ const KupFileUpload = class {
     }
     get rootElement() { return getElement$1(this); }
     static get watchers() { return {
+        "error": ["onErrorChange"],
         "pathString": ["onDataChanged"],
         "FupMul": ["onFupMulChanged"],
-        "FupAut": ["onFupAutChanged"]
+        "FupAut": ["onFupAutChanged"],
+        "FupAty": ["onFupFupAtyChanged"]
     }; }
 };
 _KupFileUpload_kupManager = new WeakMap(), _KupFileUpload_previewMap = new WeakMap(), _KupFileUpload_instances = new WeakSet(), _KupFileUpload_handleClick = function _KupFileUpload_handleClick() {
     this.inputRef.click();
 }, _KupFileUpload_handleFileChange = function _KupFileUpload_handleFileChange(event) {
-    this.uploadSuccess = false;
-    this.error = '';
-    const newFiles = Array.from(event.target.files);
-    this.tempFiles = [...this.tempFiles, ...newFiles];
+    this.fupError = '';
+    const newFiles = Array.from(event.target.files) || [];
+    if (!this.multiUpload && newFiles.length > 1) {
+        return;
+    }
     this.inputRef.value = '';
+    __classPrivateFieldGet$6(this, _KupFileUpload_instances, "m", _KupFileUpload_processFiles).call(this, newFiles);
+}, _KupFileUpload_handleDrop = function _KupFileUpload_handleDrop(event) {
+    event.preventDefault();
+    this.fupError = '';
+    this.isValidDropFiles = true;
+    const droppedFiles = event.dataTransfer.files;
+    if ((droppedFiles === null || droppedFiles === void 0 ? void 0 : droppedFiles.length) <= 0) {
+        return;
+    }
+    if (!this.multiUpload && droppedFiles.length > 1) {
+        return;
+    }
+    const newFiles = Array.from(droppedFiles);
+    __classPrivateFieldGet$6(this, _KupFileUpload_instances, "m", _KupFileUpload_processFiles).call(this, newFiles);
+}, _KupFileUpload_handleFileRemove = function _KupFileUpload_handleFileRemove(index) {
+    this.tempFiles = [
+        ...this.tempFiles.splice(0, index),
+        ...this.tempFiles.splice(index + 1),
+    ];
+}, _KupFileUpload_processFiles = function _KupFileUpload_processFiles(newFiles) {
+    if (!__classPrivateFieldGet$6(this, _KupFileUpload_instances, "m", _KupFileUpload_areValidFiles).call(this, newFiles)) {
+        return;
+    }
+    this.tempFiles = this.multiUpload
+        ? // Add new files
+            __classPrivateFieldGet$6(this, _KupFileUpload_instances, "m", _KupFileUpload_getUniqueFiles).call(this, [...this.tempFiles, ...newFiles])
+        : // Reset files
+            newFiles;
     if (this.autoUpload) {
         this.kupUpload.emit({
             comp: this,
@@ -14380,19 +14643,6 @@ _KupFileUpload_kupManager = new WeakMap(), _KupFileUpload_previewMap = new WeakM
         });
         this.setLoading(true);
     }
-}, _KupFileUpload_handleFileRemove = function _KupFileUpload_handleFileRemove(index) {
-    this.tempFiles = [
-        ...this.tempFiles.splice(0, index),
-        ...this.tempFiles.splice(index + 1),
-    ];
-}, _KupFileUpload_handleDrop = function _KupFileUpload_handleDrop(event) {
-    event.preventDefault();
-    this.uploadSuccess = false;
-    const droppedFiles = event.dataTransfer.files;
-    if (droppedFiles.length > 0) {
-        const newFiles = Array.from(droppedFiles);
-        this.tempFiles = [...this.tempFiles, ...newFiles];
-    }
 }, _KupFileUpload_handleCancel = function _KupFileUpload_handleCancel() {
     this.tempFiles = [];
 }, _KupFileUpload_getPreview = function _KupFileUpload_getPreview(file) {
@@ -14419,6 +14669,51 @@ _KupFileUpload_kupManager = new WeakMap(), _KupFileUpload_previewMap = new WeakM
         files: this.tempFiles,
     });
     this.setLoading(true);
+}, _KupFileUpload_getUniqueFiles = function _KupFileUpload_getUniqueFiles(files) {
+    const uniqueFiles = files.reduce((map, file) => {
+        const key = `${file.name}-${file.size}-${file.lastModified}`;
+        map.set(key, file);
+        return map;
+    }, new Map());
+    return Array.from(uniqueFiles.values());
+}, _KupFileUpload_isValidDraggedItems = function _KupFileUpload_isValidDraggedItems(items) {
+    if (!(items === null || items === void 0 ? void 0 : items.length) || (!this.multiUpload && items.length > 1)) {
+        return false;
+    }
+    for (const item of Array.from(items)) {
+        if (item.kind != 'file') {
+            return false;
+        }
+    }
+    return true;
+}, _KupFileUpload_areValidFiles = function _KupFileUpload_areValidFiles(files) {
+    if (!(files === null || files === void 0 ? void 0 : files.length)) {
+        return false;
+    }
+    for (const file of files) {
+        if (!__classPrivateFieldGet$6(this, _KupFileUpload_instances, "m", _KupFileUpload_isValidFile).call(this, file)) {
+            return false;
+        }
+    }
+    return true;
+}, _KupFileUpload_isValidFile = function _KupFileUpload_isValidFile(file) {
+    var _a;
+    if (!((_a = this.acceptedFiles) === null || _a === void 0 ? void 0 : _a.length)) {
+        return true;
+    }
+    // Check extensions
+    const fileExtension = __classPrivateFieldGet$6(this, _KupFileUpload_instances, "m", _KupFileUpload_getFileExtension).call(this, file.name);
+    const isValid = fileExtension
+        ? this.acceptedFiles.includes(fileExtension)
+        : false;
+    if (!isValid) {
+        // Set extension error
+        this.fupError = __classPrivateFieldGet$6(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageUpload.INVALID_EXTENSION);
+    }
+    return isValid;
+}, _KupFileUpload_getFileExtension = function _KupFileUpload_getFileExtension(fileName) {
+    const dotIndex = fileName.lastIndexOf('.');
+    return dotIndex >= 0 ? fileName.substring(dotIndex).toLowerCase() : '';
 };
 KupFileUpload.style = KupFileUploadStyle0;
 
@@ -14857,7 +15152,7 @@ const KupForm = class {
     render() {
         let formContent = null;
         if (this.data.rows.length === 0) {
-            formContent = (h("p", { key: '103de9b30f44f7958a691e5dccc8698e49ca76cf' }, this.kupManager.language.translate(KupLanguageGeneric.EMPTY_DATA)));
+            formContent = (h("p", { key: 'e6e94006b6a608e301373fdb7a4ca02665b2d844' }, this.kupManager.language.translate(KupLanguageGeneric.EMPTY_DATA)));
         }
         else {
             const rows = this.data.rows;
@@ -14868,7 +15163,7 @@ const KupForm = class {
                 formContent.push(this.renderRow(rows[cnt++]));
             }
         }
-        return (h(Host, { key: 'cdaa7ff6add189834cc6f570d2a7cd032d3a0b3c' }, h("style", { key: 'd9eff3af01d39df16086be74e2c893b64f861e52' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'd4dd031f9dac773296738ebfe27510be56af8e5a', id: componentWrapperId }, formContent)));
+        return (h(Host, { key: 'c6fb5b3851606811f0c1cab66ce83f00c3073cd7' }, h("style", { key: '7451643bd2809dd41742977dc0c8ffaf2d29017c' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'f68f672b0a6f03a01577a5120e8f3e74385a0373', id: componentWrapperId }, formContent)));
     }
     disconnectedCallback() {
         this.kupManager.language.unregister(this);
@@ -16534,14 +16829,14 @@ const KupImageList = class {
         }
         const imlClass = 'image-list' +
             (this.showFullDescription ? ' full-description' : '');
-        return (h(Host, { key: '4a3c80748fec9b98c9268077893643042b2c4ade' }, h("style", { key: '5fbc10ef98292d3cc1919d26cf64baa1286611e4' }, __classPrivateFieldGet$5(this, _KupImageList_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '52254d30b66446960be0db63fdf486420d35a7ce', id: componentWrapperId, ref: (el) => {
+        return (h(Host, { key: 'd3dd048c9d3557174d5feb3b6ba6203ea5ecafe7' }, h("style", { key: '8178c806d90f4852441e8b18743bfd0f6836d6ef' }, __classPrivateFieldGet$5(this, _KupImageList_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'd349af3c953aa70469c19f3868e5e850374996a0', id: componentWrapperId, ref: (el) => {
                 __classPrivateFieldSet$2(this, _KupImageList_el, el, "f");
-            } }, h("div", { key: '68cb3d98496d6314556ad5d777e6a67543a14ff3', class: "navigation-bar" }, hasNavigation ? (h("div", { class: `navigation-bar__wrapper ${this.navigationBarToggled
+            } }, h("div", { key: '5501f3c1eb46fa4e856248c1e876de729a68195a', class: "navigation-bar" }, hasNavigation ? (h("div", { class: `navigation-bar__wrapper ${this.navigationBarToggled
                 ? 'navigation-bar__wrapper--active'
                 : ''}` }, h("div", { class: `navigation-bar__title`, onClick: () => {
                 this.navigationBarToggled =
                     !this.navigationBarToggled;
-            } }, h(FImage, { fit: true, resource: this.currentNode.icon, placeholderResource: this.currentNode.placeholderIcon, sizeX: "1.25em", sizeY: "1.25em", wrapperClass: "navigation-bar__title__image" }), h("div", { class: "navigation-bar__title__label" }, this.currentNode.value)), h(FButton, Object.assign({}, __classPrivateFieldGet$5(this, _KupImageList_backProps, "f"), { label: __classPrivateFieldGet$5(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.BACK) })), h(FButton, Object.assign({}, __classPrivateFieldGet$5(this, _KupImageList_topProps, "f"), { label: __classPrivateFieldGet$5(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.TOP) })))) : null), this.leadingLabel && (h("div", { key: '4b808d9230730a0eb49c5eca46a8130eda1c0f51', class: "mdc-text-field__label-container" }, h("label", { key: 'c1fcdb83116da8e7591091fcb97ea6c4ecb19a27', class: "mdc-label" }, this.leadingLabel))), h("div", { key: 'f0b462e13602be5a3a8c00ffd993fd9c8b02476a', class: imlClass, style: combinedGridStyle }, ...__classPrivateFieldGet$5(this, _KupImageList_instances, "m", _KupImageList_createList).call(this)))));
+            } }, h(FImage, { fit: true, resource: this.currentNode.icon, placeholderResource: this.currentNode.placeholderIcon, sizeX: "1.25em", sizeY: "1.25em", wrapperClass: "navigation-bar__title__image" }), h("div", { class: "navigation-bar__title__label" }, this.currentNode.value)), h(FButton, Object.assign({}, __classPrivateFieldGet$5(this, _KupImageList_backProps, "f"), { label: __classPrivateFieldGet$5(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.BACK) })), h(FButton, Object.assign({}, __classPrivateFieldGet$5(this, _KupImageList_topProps, "f"), { label: __classPrivateFieldGet$5(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.TOP) })))) : null), this.leadingLabel && (h("div", { key: 'e3a0c1acb410e52590a0309b9d1863ab75d2a6b5', class: "mdc-text-field__label-container" }, h("label", { key: 'a182435d28cf9ae405f61fda93794c5d81a5ed3e', class: "mdc-label" }, this.leadingLabel))), h("div", { key: '5df777d415c2ae7eeb95f22ce229614948b9a4c7', class: imlClass, style: combinedGridStyle }, ...__classPrivateFieldGet$5(this, _KupImageList_instances, "m", _KupImageList_createList).call(this)))));
     }
     disconnectedCallback() {
         __classPrivateFieldGet$5(this, _KupImageList_kupManager, "f").interact.unregister(__classPrivateFieldGet$5(this, _KupImageList_interactableTouch, "f"));
@@ -17426,7 +17721,7 @@ const KupProgressBar = class {
                 ? true
                 : false,
         };
-        return (h(Host, { key: '94a226fb07053cb0c122582eb5d64c3a73df2ff6' }, h("style", { key: 'debd9e375096b0c6ac1cdc333b86f07896fd91e2' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '1aceed94fc1ff58e3662f96bb5422dbb95b0af4d', id: componentWrapperId }, h(FProgressBar, Object.assign({ key: 'a34d56d8f05f35d24f0e94987bc952f466082a1f' }, props)))));
+        return (h(Host, { key: '6d16fbbce2878c135c67a4b56dbf69099904d529' }, h("style", { key: 'd60887a62fa3ef9f320d97d67458561cff1f7210' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '26cb5f5983fde587f5badcbfdc2b4355326ac484', id: componentWrapperId }, h(FProgressBar, Object.assign({ key: '31de915d7832b8109087d632cf06e94c104e7c63' }, props)))));
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);
@@ -17687,7 +17982,7 @@ const KupRating = class {
                 : false,
             onClick: (i) => this.onKupClick(i),
         };
-        return (h(Host, { key: 'b4103ceb6f27d434447c69c8fff7572374e52d87' }, h("style", { key: 'c65cd936b7e5510718b9e2852af9ef8fac04e0b8' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'b9e228a246590a6ad05b228319846b9937aed321', id: componentWrapperId }, h(FRating, Object.assign({ key: '505d9988d34aa16060c392e8a97e15e4b72680ba' }, props)))));
+        return (h(Host, { key: 'd01ef2cfb73b3e72cb3d56ecede10cb7a2b66368' }, h("style", { key: '940e67e41bcaeb69205055ee5af1b56e3b015d1b' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'a3342415e91667c9e9f0677c2f5b79616a814f69', id: componentWrapperId }, h(FRating, Object.assign({ key: 'b9147b13dd6157a875c84042329874b72c3a9b0e' }, props)))));
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);
@@ -17810,59 +18105,59 @@ const KupSpinner = class {
             spinnerClass = 'spinner-v' + this.layout;
             if (this.layout === 7) {
                 spinnerEl = [
-                    h("div", { key: '976b54b2682a715ab838bafbd9efc5980f5212f3', class: "sk-spinner-v7-dot" }),
-                    h("div", { key: '6f97965d76d494469a6878ae72d747d5e18c70ea', class: "sk-spinner-v7-dot" }),
-                    h("div", { key: '4554ce59f9992eb41837eb1a5bb3e1658105c503', class: "sk-spinner-v7-dot" }),
-                    h("div", { key: 'a37de45a0684574dea995fe18cb5a816d776c8b4', class: "sk-spinner-v7-dot" }),
-                    h("div", { key: 'ef5cced1953be2c018b9114708e8cf0181d2ec10', class: "sk-spinner-v7-dot" }),
-                    h("div", { key: '2a4b5616f967c538fd97df2ae36796f43ee49d42', class: "sk-spinner-v7-dot" }),
+                    h("div", { key: '90da4bea524d6ae49bd7590b099d7af5bce8c4bc', class: "sk-spinner-v7-dot" }),
+                    h("div", { key: 'f625f8a469c687a328dec11def5481b47dfdc6b2', class: "sk-spinner-v7-dot" }),
+                    h("div", { key: 'fce31054830c273aceb9fe0a186daed290319d07', class: "sk-spinner-v7-dot" }),
+                    h("div", { key: '18b89c2a7b927b07a03a6aa374cc6dc9d22d5c2c', class: "sk-spinner-v7-dot" }),
+                    h("div", { key: '454dd58c7c1f2a51dcf3891198aa9108d3240347', class: "sk-spinner-v7-dot" }),
+                    h("div", { key: '5787a5461b543828af41373b963fc2c3c984d848', class: "sk-spinner-v7-dot" }),
                 ];
             }
             if (this.layout === 9) {
                 spinnerEl = [
-                    h("div", { key: 'f2688905d587fb4444ab0e6999f0f4cf0699cb8a', class: "sk-spinner-v9-bounce1" }),
-                    h("div", { key: 'e22161a648cb24d4b013728d45836b639ebfc0a4', class: "sk-spinner-v9-bounce2" }),
+                    h("div", { key: '3b44a114e62bcfa99acb7fd583ebee257c75477d', class: "sk-spinner-v9-bounce1" }),
+                    h("div", { key: '1ac2ee154b6db501a95dcb6b9bd84d9eabea213a', class: "sk-spinner-v9-bounce2" }),
                 ];
             }
             if (this.layout === 10) {
                 spinnerEl = [
-                    h("div", { key: 'de5e7cecb6e8b59a8e3a6113f8a0baffdcf05fe6', class: "sk-spinner-v10-cube1" }),
-                    h("div", { key: 'ab1947c193732753b345245c1bbd64f097a412a8', class: "sk-spinner-v10-cube2" }),
+                    h("div", { key: 'd0be49dd982f4f40197f23c758526bfc9b769991', class: "sk-spinner-v10-cube1" }),
+                    h("div", { key: '177788b950edddfb35643e46d871137532aeeb9d', class: "sk-spinner-v10-cube2" }),
                 ];
             }
             if (this.layout === 12) {
                 spinnerEl = [
-                    h("div", { key: '45fd80cfa818b4df9c1bf47a977a69c453e31507', class: "sk-spinner-v12-dot1" }),
-                    h("div", { key: 'e5fb43b9dc6a9867ee0b1fd201c3d2027f004fb7', class: "sk-spinner-v12-dot2" }),
+                    h("div", { key: '19e8c36f13d2c0eeb6a8ad24515a24a2e1cecfde', class: "sk-spinner-v12-dot1" }),
+                    h("div", { key: 'b8ac14d003d7f601437e223c72dfd59ff9954367', class: "sk-spinner-v12-dot2" }),
                 ];
             }
             if (this.layout === 13) {
                 spinnerEl = [
-                    h("div", { key: '310fd685b049d989574d7f31549838e12e669178', class: "sk-spinner-v13-cube sk-spinner-v13-cube1" }),
-                    h("div", { key: '45137e0118a81bad85cc2f16eb2d31778d1e9b8b', class: "sk-spinner-v13-cube sk-spinner-v13-cube2" }),
-                    h("div", { key: 'c690e6ba0b9392f5c6a7b60b797cf4abf663ffc5', class: "sk-spinner-v13-cube sk-spinner-v13-cube3" }),
-                    h("div", { key: '97c85f44fe97ca977bc8dd4d1418492d089b9d51', class: "sk-spinner-v13-cube sk-spinner-v13-cube4" }),
-                    h("div", { key: '287cf4c52ebf89f12e62e0f48f0caccbaa0d8ee5', class: "sk-spinner-v13-cube sk-spinner-v13-cube5" }),
-                    h("div", { key: '2fa436ad3f69f97a03b081fe9b747a14f831383a', class: "sk-spinner-v13-cube sk-spinner-v13-cube6" }),
-                    h("div", { key: '0ae6a6078cc9f2f34f9f6da9993e495a43afd931', class: "sk-spinner-v13-cube sk-spinner-v13-cube7" }),
-                    h("div", { key: '5cd676903937f21ab94bb8c5ad7677eef991699c', class: "sk-spinner-v13-cube sk-spinner-v13-cube8" }),
-                    h("div", { key: '307607fef550cd5b9c3d0a436bfe87cace057fd6', class: "sk-spinner-v13-cube sk-spinner-v13-cube9" }),
+                    h("div", { key: '0b4a4e591c6ca25e85170fb004f324822f050135', class: "sk-spinner-v13-cube sk-spinner-v13-cube1" }),
+                    h("div", { key: '668a13a54d0e383977bed6f32e95e3f1dd78285f', class: "sk-spinner-v13-cube sk-spinner-v13-cube2" }),
+                    h("div", { key: 'd2792cde124ce31a812d9b8c169b83de6e078dc2', class: "sk-spinner-v13-cube sk-spinner-v13-cube3" }),
+                    h("div", { key: '3fc0b2ba9eebddfc0c1be20cd3e958fdfb86d123', class: "sk-spinner-v13-cube sk-spinner-v13-cube4" }),
+                    h("div", { key: '3269b799012c027a320bff8256aa846223c3c213', class: "sk-spinner-v13-cube sk-spinner-v13-cube5" }),
+                    h("div", { key: '9d932019c87435a325307b9c3ca11441a3f8d2c2', class: "sk-spinner-v13-cube sk-spinner-v13-cube6" }),
+                    h("div", { key: 'e29e2d7a8f7092f03893c4654577a6636bca5ddc', class: "sk-spinner-v13-cube sk-spinner-v13-cube7" }),
+                    h("div", { key: '9ec5c8fc4a18283180a5e98c63b796e2c06bd00c', class: "sk-spinner-v13-cube sk-spinner-v13-cube8" }),
+                    h("div", { key: 'b7976b9cdbbdb933316448e6c5cd72c4d9492026', class: "sk-spinner-v13-cube sk-spinner-v13-cube9" }),
                 ];
             }
             if (this.layout === 14) {
                 spinnerEl = [
-                    h("div", { key: '042ef293a7573f83c76535f634ebcb7319884f3f', class: "sk-spinner-v14-circle1 sk-spinner-v14-circle" }),
-                    h("div", { key: '5a77f4c8c353a8840bf06a095dbc15dcd879d736', class: "sk-spinner-v14-circle2 sk-spinner-v14-circle" }),
-                    h("div", { key: 'f3a44ea237aa823810d13c98c179423d97d6c6cf', class: "sk-spinner-v14-circle3 sk-spinner-v14-circle" }),
-                    h("div", { key: '67f40d832beb253392d0a239128bab310b80bf38', class: "sk-spinner-v14-circle4 sk-spinner-v14-circle" }),
-                    h("div", { key: '1272b2dcee5c8b2c53720eb811781a19f11b7e55', class: "sk-spinner-v14-circle5 sk-spinner-v14-circle" }),
-                    h("div", { key: '7af652d0b2c5bc4804db9261ea18030764b2b3ce', class: "sk-spinner-v14-circle6 sk-spinner-v14-circle" }),
-                    h("div", { key: '534a436998a31e8b348fe62f52a9429b57875cfd', class: "sk-spinner-v14-circle7 sk-spinner-v14-circle" }),
-                    h("div", { key: '85002b71e7d36bfe9a71314db726ad457d968625', class: "sk-spinner-v14-circle8 sk-spinner-v14-circle" }),
-                    h("div", { key: '214b749d60eb94eafea8dba46231f3201c7cb2e9', class: "sk-spinner-v14-circle9 sk-spinner-v14-circle" }),
-                    h("div", { key: 'bbb3b65e6f6a284a9f3a8ed2f61d644d27930246', class: "sk-spinner-v14-circle10 sk-spinner-v14-circle" }),
-                    h("div", { key: 'e8393696699a1646751c64300c80179d5709c2ba', class: "sk-spinner-v14-circle11 sk-spinner-v14-circle" }),
-                    h("div", { key: '9828fdeed7750814c6900de4fb6b9081f0466594', class: "sk-spinner-v14-circle12 sk-spinner-v14-circle" }),
+                    h("div", { key: '43f703d9d094ba069b5bb02e92c9e74711828df1', class: "sk-spinner-v14-circle1 sk-spinner-v14-circle" }),
+                    h("div", { key: '82f2d547b8de3da9acd78f6ec69c6b5a67261e93', class: "sk-spinner-v14-circle2 sk-spinner-v14-circle" }),
+                    h("div", { key: 'a5e3f0d7d0ae729c4066fb0a64096b3021ed1c45', class: "sk-spinner-v14-circle3 sk-spinner-v14-circle" }),
+                    h("div", { key: '9e657fea86ab17b86ff5cc637597ca0501fea0a3', class: "sk-spinner-v14-circle4 sk-spinner-v14-circle" }),
+                    h("div", { key: '0f11f4fa9e91ad5265672903255fc07dfb08b07a', class: "sk-spinner-v14-circle5 sk-spinner-v14-circle" }),
+                    h("div", { key: '4dcec3ed2bc03228dfeca88976241e83d0210881', class: "sk-spinner-v14-circle6 sk-spinner-v14-circle" }),
+                    h("div", { key: 'a20a89d5a2d0d47bba54c9bb0c932e9e39c43c88', class: "sk-spinner-v14-circle7 sk-spinner-v14-circle" }),
+                    h("div", { key: '8061fd589444079388c88eff984b7d4c0e210fb6', class: "sk-spinner-v14-circle8 sk-spinner-v14-circle" }),
+                    h("div", { key: '27e9567b83cfd945abfa32f847dd80f7f71cf475', class: "sk-spinner-v14-circle9 sk-spinner-v14-circle" }),
+                    h("div", { key: '49d6b3a4f7bdbf78e99933a24fff7afc9126db63', class: "sk-spinner-v14-circle10 sk-spinner-v14-circle" }),
+                    h("div", { key: 'd870a887d28416a702279fbb2b84a73ef133d9c9', class: "sk-spinner-v14-circle11 sk-spinner-v14-circle" }),
+                    h("div", { key: '0e193a5bfc7a08c3cd8d82da2e36c0f319215125', class: "sk-spinner-v14-circle12 sk-spinner-v14-circle" }),
                 ];
             }
         }
@@ -17881,7 +18176,7 @@ const KupSpinner = class {
         else {
             elStyle = Object.assign(Object.assign({}, elStyle), { fontSize: '3px' });
         }
-        return (h(Host, { key: 'af30b293984ca1b3c40dd167a912ad00b2007a56', style: elStyle }, h("style", { key: '7b94db80070e95446b4fff8a91a3f9742a351008' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '0149ef208e38c49a1be20646b94e1a41fc28d1bc', id: componentWrapperId, style: elStyle }, h("div", { key: '9d126f87c3802d0016b40519a6a22b2115bacb4b', id: "loading-wrapper-master", class: masterClass, style: elStyle }, h("div", { key: '5324ae5919c9f59936ab2997924f5b1186ae0c1a', id: wrapperClass, style: elStyle }, h("div", { key: 'e927477d73c687fda3280dda70b8eb3a871a609e', class: spinnerClass }, spinnerEl))))));
+        return (h(Host, { key: '047cf91e1b91090b19b9e07e8d3ed5c9e93c9b01', style: elStyle }, h("style", { key: 'c28e4baa877428442fc12ef9908ed9e3ee606e9e' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '85c8bbcacfd075b9c3a4a16074a95df1a7773f23', id: componentWrapperId, style: elStyle }, h("div", { key: '12e7ab8754db6191ec050c32ec228df99bb2c33e', id: "loading-wrapper-master", class: masterClass, style: elStyle }, h("div", { key: '7a05138502bf991b2e72e8013712f51174bd1b50', id: wrapperClass, style: elStyle }, h("div", { key: '3bccdb4bb8beefd999fbdfbb86440e0999575819', class: spinnerClass }, spinnerEl))))));
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);
@@ -18029,7 +18324,7 @@ const KupSwitch = class {
             onChange: () => this.onKupChange(),
             onFocus: () => this.onKupFocus(),
         };
-        return (h(Host, { key: 'ea19dd0ea5069a82bd9270c9dd1fa24e6476a3aa' }, h("style", { key: '2ed2f86ad8b599a714bb7e913bd291c5fa931a21' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '212cf3d8648f188252a2975595f2c6cf741c5758', id: componentWrapperId }, h(FSwitch, Object.assign({ key: '85f9c14e7c7dd8f5df209cd6ba6f10e2794a3405' }, props)))));
+        return (h(Host, { key: '89225ee1836608a0274bbf05d86b8673345b34b1' }, h("style", { key: 'e19f9784414d547d630c24a46a2e40e6d4c1dec6' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '621a69e22881473c900fa8874e9b06a47a4e7a18', id: componentWrapperId }, h(FSwitch, Object.assign({ key: '6318405dd07e72597071f86e79985b475eaf3a58' }, props)))));
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);
@@ -18459,6 +18754,7 @@ var KupTextFieldProps;
     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["labelHelper"] = "When set, the label will be accompanied by a helper text displayed on hover.";
     KupTextFieldProps["leadingLabel"] = "When set to true, the label will be on the left of the component.";
     KupTextFieldProps["max"] = "The HTML max attribute specifies the maximum value for the input element. Works with the following input types: number, range, date, datetime-local, month, time and week.";
     KupTextFieldProps["maxLength"] = "When set, the helper will display a character counter.";
@@ -18524,6 +18820,7 @@ const KupTextField = class {
         this.integers = null;
         this.isClearable = false;
         this.label = null;
+        this.labelHelper = '';
         this.lightMode = false;
         this.leadingLabel = false;
         this.max = null;
@@ -18761,6 +19058,7 @@ const KupTextField = class {
             integers: this.integers,
             isClearable: this.isClearable,
             label: this.label,
+            labelHelper: this.labelHelper,
             leadingLabel: this.leadingLabel,
             lightMode: this.lightMode,
             max: this.max,
@@ -18801,7 +19099,7 @@ const KupTextField = class {
             onMinusClick: (e) => this.onKupMinusClick(e),
             onPlusClick: (e) => this.onKupPlusClick(e),
         };
-        return (h(Host, { key: '78c6d41ec0ff12730f8abcf90569a4aae871c5ff' }, h("style", { key: '7668f0dba74f1e1818e1f08459fbf2ee395aab85' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'b7746c8c0075b18e84d3f7f6d93dfbe604c06446', id: componentWrapperId }, h(FTextField, Object.assign({ key: 'fcf370d0278c428d62ddbb9bf153001c4467a2c7' }, props)))));
+        return (h(Host, { key: '40071a3423f0b7bc9e69dff91af306643fb7a185' }, h("style", { key: '9bcc0c7b122867bff027c2ad275932296ff7ebcf' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'c0c3353a2d4e12596a8565e4a990f35eda93f1fb', id: componentWrapperId }, h(FTextField, Object.assign({ key: '33605938b1d3bc2b8beb61b30a1a7b0b62296f50' }, props)))));
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);
@@ -19274,7 +19572,7 @@ const KupTimePicker = class {
         this.kupManager.debug.logRender(this, true);
     }
     render() {
-        return (h(Host, { key: '3076db3f1376031b4cb23a9fdd71ff1a6ae1ebbf' }, h("style", { key: '2fe19b8ed79d27303cd9960bafecc84398dacfd6' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '26fa259fac1072c29b5602cdccfff9583c247ebc', id: componentWrapperId }, this.prepTextfield(this.getTimeForOutput()))));
+        return (h(Host, { key: '65f19ff4be56ba56c32b8620dece6485f90439e2' }, h("style", { key: 'f62b3c946c6a7c69b9890afcc1ac7301c75af349' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'b614dc8e91eed4693617300fa4aa072796465918', id: componentWrapperId }, this.prepTextfield(this.getTimeForOutput()))));
     }
     disconnectedCallback() {
         this.kupManager.dates.unregister(this);