@sme.up/ketchup 10.3.6 → 10.3.7

package/dist/components/{p-c061deb1.js → p-66800070.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, f as forceUpdate, h as h$1, d as Host, F as Fragment$1 } from './p-ef8cbd35.js';
-import { b as KupThemeIconValues, I as ItemsDisplayMode, e as KupLanguageGeneric, a as KupComponentSizing, k as kupManagerInstance, d as KupDynamicPositionPlacement, f as editableTypes, h as kupTypes, F as FCellClasses, i as FCellTypes, c as KupThemeColorValues, C as CHIAdapter, R as RADAdapter, j as CMBandACPAdapter, l as KupTagNames, m as FCellShapes, n as getCellValueForDisplay, o as fullWidthFieldsComps, p as autoCenterComps, q as FCellEvents, r as isForceUppercase, t as isForceLowercase, u as KupDebugCategory, v as adaptContentToDisplayMode, w as FCellPadding, x as fillString, y as KupCardBuiltInClockElements, z as KupCardCSSClasses, A as KupLanguageTotals, B as KupLanguageColumn, D as KupDataNewColumnTypes, E as KupCardSubEvents, G as KupCardIds, H as KupLanguageRow, J as KupLanguageSearch, L as getColumnByName, M as KupObjects, N as formatToNumber, O as Filters, P as getValueForDisplay, Q as getValueForDisplay2, S as KupData, T as compareCell, U as TotalMode, V as getRegExpFromString, W as CHKAdapter, X as SWTAdapter, Y as SortMode, Z as GroupLabelDisplayMode, _ as SelectionMode, $ as KupLanguageGrouping, a0 as KupLanguageCheckbox, a1 as FILTER_ANALYZER, a2 as KupLanguagePage, a3 as addColumnValueFromRow, a4 as KupGlobalFilterMode, g as getProps, s as setProps, a5 as TotalLabel, a6 as isNegativeNumber, a7 as KupPointerEventTypes, a8 as kupDynamicPositionAttribute, a9 as identify, aa as KupListProps, ab as KupCardFamily, ac as KupListRole, ad as KupLanguageUpload, ae as LoadMoreMode, af as PaginatorPos, ag as ShowGrid, ah as kupDraggableColumnAttr, ai as kupDragActiveAttr, aj as KupDragEffect, ak as kupDraggableCellAttr, al as KupDropEventTypes, am as DataTableAreasEnum, an as TypesToDuplicate, ao as FixedCellsClasses, ap as FixedCellsCSSVarsBase, aq as KupLanguageFontsize, ar as KupLanguageDensity, as as KupLanguageGrid, at as KupDataTableProps, au as UseAsValue, av as iconColumn, aw as keyColumn, ax as fieldColumn, ay as getSizeOfInputElement, az as KupCardProps } from './p-df77b97b.js';
+import { b as KupThemeIconValues, I as ItemsDisplayMode, e as KupLanguageGeneric, a as KupComponentSizing, k as kupManagerInstance, d as KupDynamicPositionPlacement, f as editableTypes, h as kupTypes, F as FCellClasses, i as FCellTypes, c as KupThemeColorValues, C as CHIAdapter, R as RADAdapter, j as CMBandACPAdapter, l as KupTagNames, m as FCellShapes, n as getCellValueForDisplay, o as fullWidthFieldsComps, p as autoCenterComps, q as FCellEvents, r as isForceUppercase, t as isForceLowercase, u as KupDebugCategory, v as adaptContentToDisplayMode, w as FCellPadding, x as fillString, y as KupCardBuiltInClockElements, z as KupCardCSSClasses, A as KupLanguageTotals, B as KupLanguageColumn, D as KupDataNewColumnTypes, E as KupCardSubEvents, G as KupCardIds, H as KupLanguageRow, J as KupLanguageSearch, L as getColumnByName, M as KupObjects, N as formatToNumber, O as Filters, P as getValueForDisplay, Q as getValueForDisplay2, S as KupData, T as compareCell, U as TotalMode, V as getRegExpFromString, W as CHKAdapter, X as SWTAdapter, Y as SortMode, Z as GroupLabelDisplayMode, _ as SelectionMode, $ as KupLanguageGrouping, a0 as KupLanguageCheckbox, a1 as FILTER_ANALYZER, a2 as KupLanguagePage, a3 as addColumnValueFromRow, a4 as KupGlobalFilterMode, g as getProps, s as setProps, a5 as TotalLabel, a6 as isNegativeNumber, a7 as KupPointerEventTypes, a8 as kupDynamicPositionAttribute, a9 as identify, aa as KupListProps, ab as KupCardFamily, ac as KupListRole, ad as KupLanguageUpload, ae as LoadMoreMode, af as PaginatorPos, ag as ShowGrid, ah as kupDraggableColumnAttr, ai as kupDragActiveAttr, aj as KupDragEffect, ak as kupDraggableCellAttr, al as KupDropEventTypes, am as DataTableAreasEnum, an as TypesToDuplicate, ao as FixedCellsClasses, ap as FixedCellsCSSVarsBase, aq as KupLanguageFontsize, ar as KupLanguageDensity, as as KupLanguageGrid, at as KupDataTableProps, au as UseAsValue, av as iconColumn, aw as keyColumn, ax as fieldColumn, ay as getSizeOfInputElement, az as KupCardProps } from './p-970526a0.js';
 import { h, g as getAssetPath, F as Fragment } from './p-3aae989f.js';
 import { c as KupDateTimeFormatOptionsMonth, K as KupDatesFormats, a as KupDates } from './p-9d9181cf.js';
 
@@ -1301,9 +1301,6 @@ function setContent(props) {
     let iconEl;
     let minusEl;
     let plusEl;
-    if (props.maxLength >= 256) {
-        props.textArea = true;
-    }
     if (props.label &&
         !props.leadingLabel &&
         !props.trailingLabel &&
@@ -1383,7 +1380,7 @@ function setContent(props) {
     let value = props.value;
     let inputType = props.quantityButtons
         ? 'number'
-        : ((_a = props.inputType) !== null && _a !== void 0 ? _a : 'text');
+        : (_a = props.inputType) !== null && _a !== void 0 ? _a : 'text';
     let persManageForNumberFormat = false;
     if (props.inputType === 'number') {
         inputType = 'text';
@@ -4851,6 +4848,8 @@ var FRadioType;
 /*-------------------------------------------------*/
 const FRadio = (props) => {
     var _a;
+    // props aliases
+    const horizontal = props.horizontal || props.RadLay == 'lineDirection';
     const hasColumns = !!props.columns;
     const radioList = [];
     // Default to 'radio' if props.type is not specified
@@ -4898,7 +4897,7 @@ const FRadio = (props) => {
             : '',
     };
     return (h("div", { class: `f-radio radio-wrapper
-             ${hasColumns ? 'radio-wrapper-grid' : ''} ${props.danger ? 'kup-danger' : ''} ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''} ${props.horizontal ? 'kup-horizontal' : ''}`, style: styleObj }, radioList));
+             ${hasColumns ? 'radio-wrapper-grid' : ''} ${props.danger ? 'kup-danger' : ''} ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''} ${horizontal ? 'kup-horizontal' : ''}`, style: styleObj }, radioList));
 };
 
 /*-------------------------------------------------*/
@@ -5257,9 +5256,6 @@ const FCell = (props, children) => {
     const valueToDisplay = props.previousValue !== cell.value ? cell.value : '';
     const cellType = dom$i.ketchup.data.cell.getType(cell, shape);
     const sizing = props.density === 'extra_dense' ? 'extra-small' : (_b = cell.data) === null || _b === void 0 ? void 0 : _b.sizing;
-    const subcomponentProps = Object.assign(Object.assign(Object.assign(Object.assign({}, cell.data), ((cell === null || cell === void 0 ? void 0 : cell.icon) ? { resource: cell.icon } : {})), ((cell === null || cell === void 0 ? void 0 : cell.placeholderIcon)
-        ? { placeholderResource: cell.placeholderIcon }
-        : {})), (sizing ? { sizing } : {}));
     let cssClasses = cell.cssClass
         ? cell.cssClass
         : (column === null || column === void 0 ? void 0 : column.cssClass)
@@ -5280,6 +5276,9 @@ const FCell = (props, children) => {
     if (!cell.data || Object.keys(cell.data).length === 0) {
         setDefaults(cellType, cell);
     }
+    const subcomponentProps = Object.assign(Object.assign(Object.assign(Object.assign({}, cell.data), ((cell === null || cell === void 0 ? void 0 : cell.icon) ? { resource: cell.icon } : {})), ((cell === null || cell === void 0 ? void 0 : cell.placeholderIcon)
+        ? { placeholderResource: cell.placeholderIcon }
+        : {})), (sizing ? { sizing } : {}));
     if (isEditable && editableTypes.includes(cellType)) {
         cell.data.showMarker = (_d = cell.tooltip) !== null && _d !== void 0 ? _d : false;
         content = setEditableCell(cellType, classObj, cell, column, props);
@@ -5439,14 +5438,19 @@ const MainBTNAdapter = (_options, _fieldLabel, currentValue, cell) => ({
         Object.assign(Object.assign({}, cell.data), { icon: cell.icon, placeholderIcon: cell.placeholderIcon, value: currentValue }),
     ],
 });
-const MainITXAdapter = (_options, fieldLabel, _currentValue, cell) => (Object.assign(Object.assign({}, cell.data), { label: fieldLabel }));
+const MainITXAdapter = (_options, fieldLabel, _currentValue, cell) => {
+    var _a;
+    return (Object.assign(Object.assign(Object.assign({}, cell.data), { label: fieldLabel }), (((_a = cell.data) === null || _a === void 0 ? void 0 : _a.maxLength) && { textArea: cell.data.maxLength >= 256 })));
+};
 const MainRADAdapter = (options, _fieldLabel, currentValue, cell) => {
+    var _a, _b, _c;
     const newData = RADAdapter(currentValue, options);
-    return Object.assign(Object.assign({}, cell.data), newData);
+    const value = Object.assign(Object.assign(Object.assign({}, cell.data), newData), { data: Array.from(new Map([...((_b = (_a = cell.data) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : []), ...((_c = newData.data) !== null && _c !== void 0 ? _c : [])].map((item) => [item.value, item])).values()) });
+    return value;
 };
 const MainCMBandACPAdapter = (options, fieldLabel, currentValue, cell, _id) => {
     if (options) {
-        const configCMBandACP = CMBandACPAdapter(currentValue, fieldLabel, []);
+        const configCMBandACP = CMBandACPAdapter(currentValue, fieldLabel, [], cell.data);
         configCMBandACP.data['kup-list'].data = optionsTreeComboAdapter(options, currentValue);
         if (!cell.data) {
             return configCMBandACP;
@@ -5674,7 +5678,7 @@ function setEditableCell(cellType, classObj, cell, column, props) {
                     cellEvent(e, props, cellType, FCellEvents.INPUT);
                 }, onBlur: (e) => cellEvent(e, props, cellType, FCellEvents.BLUR), onKeyDown: onEditorKeyDown })));
         case FCellTypes.FILE_UPLOAD:
-            return h("kup-file-upload", Object.assign({}, cell.data));
+            return (h("kup-file-upload", Object.assign({ "onKup-file-upload-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) }, cell.data)));
         case FCellTypes.MULTI_AUTOCOMPLETE: {
             return (h("kup-chip", Object.assign({ displayMode: (_a = cell.data.displayMode) !== null && _a !== void 0 ? _a : ItemsDisplayMode.DESCRIPTION }, cell.data, { label: (_c = (_b = cell.slotData) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : '', type: FChipType.INPUT, enableInput: true, "onKup-chip-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) }),
                 h("kup-autocomplete", { class: "kup-full-width", slot: "field", displayMode: ItemsDisplayMode.CODE_AND_DESC, sizing: KupComponentSizing.EXTRA_SMALL, "onKup-autocomplete-blur": (e) => cellEvent(e, props, cellType, FCellEvents.BLUR), "onkup-autocomplete-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-autocomplete-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK), data: (_d = cell.slotData) === null || _d === void 0 ? void 0 : _d.data, initialValue: (_e = cell.slotData) === null || _e === void 0 ? void 0 : _e.initialValue, showDropDownIcon: (_f = cell.slotData) === null || _f === void 0 ? void 0 : _f.showDropDownIcon, style: (_g = cell.slotData) === null || _g === void 0 ? void 0 : _g.style, disabled: (_h = cell.slotData) === null || _h === void 0 ? void 0 : _h.disabled, id: (_j = cell.slotData) === null || _j === void 0 ? void 0 : _j.id, error: cell.data.error, showMarker: (_k = cell.tooltip) !== null && _k !== void 0 ? _k : false, listDisplayMode: cell.data.listDisplayMode })));
@@ -5740,7 +5744,8 @@ function setEditableCell(cellType, classObj, cell, column, props) {
             }
             else {
                 const isTextArea = (cell.shape ? cell.shape === FCellShapes.MEMO : false) ||
-                    (cellType ? cellType === FCellTypes.MEMO : false);
+                    (cellType ? cellType === FCellTypes.MEMO : false) ||
+                    cell.data.maxLength >= 256;
                 return (h(FTextField, Object.assign({}, cell.data, { textArea: isTextArea, sizing: cell.data.sizing
                         ? cell.data.sizing
                         : isTextArea
@@ -12217,8 +12222,8 @@ function decorateDataTable(data) {
             const options = cell['options'];
             cell.isEditable = (_a = cell.isEditable) !== null && _a !== void 0 ? _a : cell['editable'];
             const shapeAdapters = {
-                [FCellShapes.AUTOCOMPLETE]: () => CMBandACPAdapter(value, '', options),
-                [FCellShapes.COMBOBOX]: () => CMBandACPAdapter(value, '', options),
+                [FCellShapes.AUTOCOMPLETE]: () => CMBandACPAdapter(value, '', options, cell.data),
+                [FCellShapes.COMBOBOX]: () => CMBandACPAdapter(value, '', options, cell.data),
                 [FCellShapes.RADIO]: () => RADAdapter(value, options),
                 [FCellShapes.CHECKBOX]: () => CHKAdapter(value, ''),
                 [FCellShapes.CHIP]: () => CHIAdapter(value, decode),
@@ -13001,12 +13006,14 @@ const FPaginator = (props) => {
     return (h("div", Object.assign({ class: `f-paginator ${props.mode ? props.mode : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }),
         props.onLoadMore ? (h(FButton, { icon: "plus", onClick: props.onLoadMore, label: dom$4.ketchup.language.translate(KupLanguageGeneric.LOAD_MORE), sizing: KupComponentSizing.SMALL, styling: FButtonStyling.FLAT, wrapperClass: "load-more-button kup-neutral" })) : null,
         h("kup-combobox", { class: "rows-selector", data: dataRowsSelector, displayMode: ItemsDisplayMode.CODE, initialValue: props.perPage.toString(), initialValueDecode: props.perPage.toString(), "onkup-combobox-change": props.onRowsChange }),
-        h("kup-combobox", { class: "page-selector", data: dataPageSelector, displayMode: ItemsDisplayMode.CODE, initialValue: props.currentPage.toString(), initialValueDecode: props.currentPage.toString(), "onkup-combobox-change": props.onPageChange }),
-        props.showMaxPages ? (h("div", { class: "max-page-wrapper" },
-            h("label", { htmlFor: "page-selector" }, '/ ' + maxNumberOfPage))) : null,
-        h("div", { class: "arrow-wrapper" },
-            props.mode !== FPaginatorMode.SIMPLE ? (h(FButton, { icon: "chevron_left", disabled: isPrevPageDisabled(props), onClick: props.onPrevPage, sizing: KupComponentSizing.SMALL, styling: FButtonStyling.FLAT, wrapperClass: "kup-neutral prev-page" })) : null,
-            props.mode !== FPaginatorMode.SIMPLE ? (h(FButton, { icon: "chevron_right", disabled: isNextPageDisabled(props), onClick: props.onNextPage, sizing: KupComponentSizing.SMALL, styling: FButtonStyling.FLAT, wrapperClass: "kup-neutral next-page" })) : null)));
+        h("div", { class: "page-wrapper" },
+            h("div", { class: "page-selector-wrapper" },
+                h("kup-combobox", { class: "page-selector", data: dataPageSelector, displayMode: ItemsDisplayMode.CODE, initialValue: props.currentPage.toString(), initialValueDecode: props.currentPage.toString(), "onkup-combobox-change": props.onPageChange }),
+                props.showMaxPages ? (h("div", { class: "max-page-wrapper" },
+                    h("label", { htmlFor: "page-selector" }, '/ ' + maxNumberOfPage))) : null),
+            h("div", { class: "arrow-wrapper" },
+                props.mode !== FPaginatorMode.SIMPLE ? (h(FButton, { icon: "chevron_left", disabled: isPrevPageDisabled(props), onClick: props.onPrevPage, sizing: KupComponentSizing.SMALL, styling: FButtonStyling.FLAT, wrapperClass: "kup-neutral prev-page" })) : null,
+                props.mode !== FPaginatorMode.SIMPLE ? (h(FButton, { icon: "chevron_right", disabled: isNextPageDisabled(props), onClick: props.onNextPage, sizing: KupComponentSizing.SMALL, styling: FButtonStyling.FLAT, wrapperClass: "kup-neutral next-page" })) : null))));
 };
 function getPageItems(props, maxNumberOfPage) {
     const pageItems = [];
@@ -13123,7 +13130,9 @@ var KupDropdownButtonProps;
 var KupFileUploadProps;
 (function (KupFileUploadProps) {
     KupFileUploadProps["customStyle"] = "Custom style of the component.";
-    KupFileUploadProps["data"] = "Actual data of the input file upload.";
+    KupFileUploadProps["pathString"] = "The initial filepaths.";
+    KupFileUploadProps["FupMul"] = "Sets the multiple upload.";
+    KupFileUploadProps["FupAut"] = "Sets the auto upload of select file";
 })(KupFileUploadProps || (KupFileUploadProps = {}));
 
 /**
@@ -16546,7 +16555,7 @@ const KupForm = /*@__PURE__*/ proxyCustomElement(class KupForm extends H {
     render() {
         let formContent = null;
         if (this.data.rows.length === 0) {
-            formContent = (h$1("p", { key: 'cf8c793fae4b7ab811ed6385dd446ce1603d4921' }, this.kupManager.language.translate(KupLanguageGeneric.EMPTY_DATA)));
+            formContent = (h$1("p", { key: '103de9b30f44f7958a691e5dccc8698e49ca76cf' }, this.kupManager.language.translate(KupLanguageGeneric.EMPTY_DATA)));
         }
         else {
             const rows = this.data.rows;
@@ -16557,7 +16566,7 @@ const KupForm = /*@__PURE__*/ proxyCustomElement(class KupForm extends H {
                 formContent.push(this.renderRow(rows[cnt++]));
             }
         }
-        return (h$1(Host, { key: 'a97811d53f4ed45ced27c021e1cf164f093b04d2' }, h$1("style", { key: '5531da216461ca36e3efb0f0a365517eb8494d64' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: '50e19a44c0be7805bf35215fbc079924178458f9', id: componentWrapperId }, formContent)));
+        return (h$1(Host, { key: 'cdaa7ff6add189834cc6f570d2a7cd032d3a0b3c' }, h$1("style", { key: 'd9eff3af01d39df16086be74e2c893b64f861e52' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: 'd4dd031f9dac773296738ebfe27510be56af8e5a', id: componentWrapperId }, formContent)));
     }
     disconnectedCallback() {
         this.kupManager.language.unregister(this);
@@ -17499,7 +17508,7 @@ const KupTimePicker = /*@__PURE__*/ proxyCustomElement(class KupTimePicker exten
         this.kupManager.debug.logRender(this, true);
     }
     render() {
-        return (h$1(Host, { key: '43e729f6812126c4f1ba15a68657c765d723d55a' }, h$1("style", { key: '7a3c9c10e575721211db345cf720a1b5717cb5aa' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: '2ac059d1acac2cbfe7610f8e153fb53dc74632f1', id: componentWrapperId }, this.prepTextfield(this.getTimeForOutput()))));
+        return (h$1(Host, { key: '3076db3f1376031b4cb23a9fdd71ff1a6ae1ebbf' }, h$1("style", { key: '2fe19b8ed79d27303cd9960bafecc84398dacfd6' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: '26fa259fac1072c29b5602cdccfff9583c247ebc', id: componentWrapperId }, this.prepTextfield(this.getTimeForOutput()))));
     }
     disconnectedCallback() {
         this.kupManager.dates.unregister(this);
@@ -19221,7 +19230,7 @@ const KupSwitch = /*@__PURE__*/ proxyCustomElement(class KupSwitch extends H {
             onChange: () => this.onKupChange(),
             onFocus: () => this.onKupFocus(),
         };
-        return (h$1(Host, { key: '77148672a0e0d00bc2804c81bb4ee65915d6a8f1' }, h$1("style", { key: 'd1bbed237fddbe18b1e9b793b2272e1aea204201' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: 'fd5b7ae404f9bf48d8814ff83dc516923b447370', id: componentWrapperId }, h$1(FSwitch, Object.assign({ key: '7877a298be5e33f339486b2b497203e224fff134' }, props)))));
+        return (h$1(Host, { key: 'ea19dd0ea5069a82bd9270c9dd1fa24e6476a3aa' }, h$1("style", { key: '2ed2f86ad8b599a714bb7e913bd291c5fa931a21' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: '212cf3d8648f188252a2975595f2c6cf741c5758', id: componentWrapperId }, h$1(FSwitch, Object.assign({ key: '85f9c14e7c7dd8f5df209cd6ba6f10e2794a3405' }, props)))));
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);
@@ -19494,59 +19503,59 @@ const KupSpinner = /*@__PURE__*/ proxyCustomElement(class KupSpinner extends H {
             spinnerClass = 'spinner-v' + this.layout;
             if (this.layout === 7) {
                 spinnerEl = [
-                    h$1("div", { key: 'c01f5ea89b13c2b77c641ba51fabf141a33d0af5', class: "sk-spinner-v7-dot" }),
-                    h$1("div", { key: '31c903defabe01d9050e17e5aeabe4918d4f9672', class: "sk-spinner-v7-dot" }),
-                    h$1("div", { key: '1747d7487fdb9f57f850ed5faa3ea6dc6c46d8d7', class: "sk-spinner-v7-dot" }),
-                    h$1("div", { key: '8e46243d92c67544f073bd3734a09d6c8a79d070', class: "sk-spinner-v7-dot" }),
-                    h$1("div", { key: '56c2d3d344b545ffd0edb810d46ff1fa7e50a51c', class: "sk-spinner-v7-dot" }),
-                    h$1("div", { key: '049c44c00e41155c0a675d7e188b36e97f0717d2', class: "sk-spinner-v7-dot" }),
+                    h$1("div", { key: '976b54b2682a715ab838bafbd9efc5980f5212f3', class: "sk-spinner-v7-dot" }),
+                    h$1("div", { key: '6f97965d76d494469a6878ae72d747d5e18c70ea', class: "sk-spinner-v7-dot" }),
+                    h$1("div", { key: '4554ce59f9992eb41837eb1a5bb3e1658105c503', class: "sk-spinner-v7-dot" }),
+                    h$1("div", { key: 'a37de45a0684574dea995fe18cb5a816d776c8b4', class: "sk-spinner-v7-dot" }),
+                    h$1("div", { key: 'ef5cced1953be2c018b9114708e8cf0181d2ec10', class: "sk-spinner-v7-dot" }),
+                    h$1("div", { key: '2a4b5616f967c538fd97df2ae36796f43ee49d42', class: "sk-spinner-v7-dot" }),
                 ];
             }
             if (this.layout === 9) {
                 spinnerEl = [
-                    h$1("div", { key: '50f6366eba722065fdd5082a8d53f04050c6f776', class: "sk-spinner-v9-bounce1" }),
-                    h$1("div", { key: 'fb93c6a90bf2744c858e9c275a4da2eada4f2cd4', class: "sk-spinner-v9-bounce2" }),
+                    h$1("div", { key: 'f2688905d587fb4444ab0e6999f0f4cf0699cb8a', class: "sk-spinner-v9-bounce1" }),
+                    h$1("div", { key: 'e22161a648cb24d4b013728d45836b639ebfc0a4', class: "sk-spinner-v9-bounce2" }),
                 ];
             }
             if (this.layout === 10) {
                 spinnerEl = [
-                    h$1("div", { key: '2bdfc4c20465c94db5259ca6687f394a9ddc6ebe', class: "sk-spinner-v10-cube1" }),
-                    h$1("div", { key: 'b88a93ee6fbfcd2792947d28aef82154b9276e7e', class: "sk-spinner-v10-cube2" }),
+                    h$1("div", { key: 'de5e7cecb6e8b59a8e3a6113f8a0baffdcf05fe6', class: "sk-spinner-v10-cube1" }),
+                    h$1("div", { key: 'ab1947c193732753b345245c1bbd64f097a412a8', class: "sk-spinner-v10-cube2" }),
                 ];
             }
             if (this.layout === 12) {
                 spinnerEl = [
-                    h$1("div", { key: '78f8d7576541ad7655ae30bdb42234cbd2418202', class: "sk-spinner-v12-dot1" }),
-                    h$1("div", { key: 'd23583d213b86321cd80f40f066d227ce3760588', class: "sk-spinner-v12-dot2" }),
+                    h$1("div", { key: '45fd80cfa818b4df9c1bf47a977a69c453e31507', class: "sk-spinner-v12-dot1" }),
+                    h$1("div", { key: 'e5fb43b9dc6a9867ee0b1fd201c3d2027f004fb7', class: "sk-spinner-v12-dot2" }),
                 ];
             }
             if (this.layout === 13) {
                 spinnerEl = [
-                    h$1("div", { key: '4c8538a7f4234b1db874df9079bc7ee0db6ee0cb', class: "sk-spinner-v13-cube sk-spinner-v13-cube1" }),
-                    h$1("div", { key: '90bd897f5ce1d63c9e838efedd44d615eb72c560', class: "sk-spinner-v13-cube sk-spinner-v13-cube2" }),
-                    h$1("div", { key: 'a77cdfc43dc981b39c973b0061570991bffa564d', class: "sk-spinner-v13-cube sk-spinner-v13-cube3" }),
-                    h$1("div", { key: 'aef45d9f3eb81c87475f22e17cc87d5873988d67', class: "sk-spinner-v13-cube sk-spinner-v13-cube4" }),
-                    h$1("div", { key: '245dd32e7d3c99deb6044791802813ded8ab02fb', class: "sk-spinner-v13-cube sk-spinner-v13-cube5" }),
-                    h$1("div", { key: 'bffd38258c434e59afe98204b366ce3033af73fd', class: "sk-spinner-v13-cube sk-spinner-v13-cube6" }),
-                    h$1("div", { key: '5e2140ea8ada6b182e9485b9130c9c3e79fb07bc', class: "sk-spinner-v13-cube sk-spinner-v13-cube7" }),
-                    h$1("div", { key: 'c12923fcbe7dc5f1a42426be20bdff3f57ff0ff1', class: "sk-spinner-v13-cube sk-spinner-v13-cube8" }),
-                    h$1("div", { key: '6cba9be7a868afda19020b8baa6bae72b3220633', class: "sk-spinner-v13-cube sk-spinner-v13-cube9" }),
+                    h$1("div", { key: '310fd685b049d989574d7f31549838e12e669178', class: "sk-spinner-v13-cube sk-spinner-v13-cube1" }),
+                    h$1("div", { key: '45137e0118a81bad85cc2f16eb2d31778d1e9b8b', class: "sk-spinner-v13-cube sk-spinner-v13-cube2" }),
+                    h$1("div", { key: 'c690e6ba0b9392f5c6a7b60b797cf4abf663ffc5', class: "sk-spinner-v13-cube sk-spinner-v13-cube3" }),
+                    h$1("div", { key: '97c85f44fe97ca977bc8dd4d1418492d089b9d51', class: "sk-spinner-v13-cube sk-spinner-v13-cube4" }),
+                    h$1("div", { key: '287cf4c52ebf89f12e62e0f48f0caccbaa0d8ee5', class: "sk-spinner-v13-cube sk-spinner-v13-cube5" }),
+                    h$1("div", { key: '2fa436ad3f69f97a03b081fe9b747a14f831383a', class: "sk-spinner-v13-cube sk-spinner-v13-cube6" }),
+                    h$1("div", { key: '0ae6a6078cc9f2f34f9f6da9993e495a43afd931', class: "sk-spinner-v13-cube sk-spinner-v13-cube7" }),
+                    h$1("div", { key: '5cd676903937f21ab94bb8c5ad7677eef991699c', class: "sk-spinner-v13-cube sk-spinner-v13-cube8" }),
+                    h$1("div", { key: '307607fef550cd5b9c3d0a436bfe87cace057fd6', class: "sk-spinner-v13-cube sk-spinner-v13-cube9" }),
                 ];
             }
             if (this.layout === 14) {
                 spinnerEl = [
-                    h$1("div", { key: '590bf441b115cc3ab6738c2b6b8f1a8647243646', class: "sk-spinner-v14-circle1 sk-spinner-v14-circle" }),
-                    h$1("div", { key: '884220f8c3444a3a4af907ab75355a1ad158c87c', class: "sk-spinner-v14-circle2 sk-spinner-v14-circle" }),
-                    h$1("div", { key: '4719d8ab319183afe77e81c50c22c7fd56fb81a0', class: "sk-spinner-v14-circle3 sk-spinner-v14-circle" }),
-                    h$1("div", { key: '002e1f32921ced1bd28987a333310906e39eb508', class: "sk-spinner-v14-circle4 sk-spinner-v14-circle" }),
-                    h$1("div", { key: 'b53a512e4503677951410ac988e126868a1c0bdd', class: "sk-spinner-v14-circle5 sk-spinner-v14-circle" }),
-                    h$1("div", { key: '4dc3a0d06234332378af1b512332346e4177a4cc', class: "sk-spinner-v14-circle6 sk-spinner-v14-circle" }),
-                    h$1("div", { key: '61ecb2f55ce5a4c3e45333d731c7a54d3fafd2a7', class: "sk-spinner-v14-circle7 sk-spinner-v14-circle" }),
-                    h$1("div", { key: '64c3a5716e4433d554d80583b3dbd91bfc18b8cc', class: "sk-spinner-v14-circle8 sk-spinner-v14-circle" }),
-                    h$1("div", { key: '8f4911f833da4360bdf8201092cce2ad0fb4a5f8', class: "sk-spinner-v14-circle9 sk-spinner-v14-circle" }),
-                    h$1("div", { key: '8e230fb3c46dc7048fbb38ab9a27f05e599d0f55', class: "sk-spinner-v14-circle10 sk-spinner-v14-circle" }),
-                    h$1("div", { key: 'ee68b314741378eb5758767f2a33327a3021065a', class: "sk-spinner-v14-circle11 sk-spinner-v14-circle" }),
-                    h$1("div", { key: 'f27cbc34c0d225c09cc2bc9c60c6c917086e68cc', class: "sk-spinner-v14-circle12 sk-spinner-v14-circle" }),
+                    h$1("div", { key: '042ef293a7573f83c76535f634ebcb7319884f3f', class: "sk-spinner-v14-circle1 sk-spinner-v14-circle" }),
+                    h$1("div", { key: '5a77f4c8c353a8840bf06a095dbc15dcd879d736', class: "sk-spinner-v14-circle2 sk-spinner-v14-circle" }),
+                    h$1("div", { key: 'f3a44ea237aa823810d13c98c179423d97d6c6cf', class: "sk-spinner-v14-circle3 sk-spinner-v14-circle" }),
+                    h$1("div", { key: '67f40d832beb253392d0a239128bab310b80bf38', class: "sk-spinner-v14-circle4 sk-spinner-v14-circle" }),
+                    h$1("div", { key: '1272b2dcee5c8b2c53720eb811781a19f11b7e55', class: "sk-spinner-v14-circle5 sk-spinner-v14-circle" }),
+                    h$1("div", { key: '7af652d0b2c5bc4804db9261ea18030764b2b3ce', class: "sk-spinner-v14-circle6 sk-spinner-v14-circle" }),
+                    h$1("div", { key: '534a436998a31e8b348fe62f52a9429b57875cfd', class: "sk-spinner-v14-circle7 sk-spinner-v14-circle" }),
+                    h$1("div", { key: '85002b71e7d36bfe9a71314db726ad457d968625', class: "sk-spinner-v14-circle8 sk-spinner-v14-circle" }),
+                    h$1("div", { key: '214b749d60eb94eafea8dba46231f3201c7cb2e9', class: "sk-spinner-v14-circle9 sk-spinner-v14-circle" }),
+                    h$1("div", { key: 'bbb3b65e6f6a284a9f3a8ed2f61d644d27930246', class: "sk-spinner-v14-circle10 sk-spinner-v14-circle" }),
+                    h$1("div", { key: 'e8393696699a1646751c64300c80179d5709c2ba', class: "sk-spinner-v14-circle11 sk-spinner-v14-circle" }),
+                    h$1("div", { key: '9828fdeed7750814c6900de4fb6b9081f0466594', class: "sk-spinner-v14-circle12 sk-spinner-v14-circle" }),
                 ];
             }
         }
@@ -19565,7 +19574,7 @@ const KupSpinner = /*@__PURE__*/ proxyCustomElement(class KupSpinner extends H {
         else {
             elStyle = Object.assign(Object.assign({}, elStyle), { fontSize: '3px' });
         }
-        return (h$1(Host, { key: 'fc2133eeadba445c7730740e4744eb08e6490bd7', style: elStyle }, h$1("style", { key: '6088f76d9945e1a029f8b532c8cb460a5b492f8c' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: '965453340076e2d6e02d312db5d6124e72a60803', id: componentWrapperId, style: elStyle }, h$1("div", { key: '95190ff48eefb220e3442ea871bef793f3d4f4f2', id: "loading-wrapper-master", class: masterClass, style: elStyle }, h$1("div", { key: '3894a3f08b16c08a0c225cdf465fe16044e84b4b', id: wrapperClass, style: elStyle }, h$1("div", { key: '6a14d83f65f72e5b52eb16da6500233042c53eb8', class: spinnerClass }, spinnerEl))))));
+        return (h$1(Host, { key: 'af30b293984ca1b3c40dd167a912ad00b2007a56', style: elStyle }, h$1("style", { key: '7b94db80070e95446b4fff8a91a3f9742a351008' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: '0149ef208e38c49a1be20646b94e1a41fc28d1bc', id: componentWrapperId, style: elStyle }, h$1("div", { key: '9d126f87c3802d0016b40519a6a22b2115bacb4b', id: "loading-wrapper-master", class: masterClass, style: elStyle }, h$1("div", { key: '5324ae5919c9f59936ab2997924f5b1186ae0c1a', id: wrapperClass, style: elStyle }, h$1("div", { key: 'e927477d73c687fda3280dda70b8eb3a871a609e', class: spinnerClass }, spinnerEl))))));
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);
@@ -19834,7 +19843,7 @@ const KupRating = /*@__PURE__*/ proxyCustomElement(class KupRating extends H {
                 : false,
             onClick: (i) => this.onKupClick(i),
         };
-        return (h$1(Host, { key: 'bdb1bda1a86c539aa9e5fc9012a795758907b3b7' }, h$1("style", { key: 'e81779a6e575ca00a748cb97d1f721bc67768952' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: 'b08ef3e278eb9d9a64d16f098227b4bf81fbf918', id: componentWrapperId }, h$1(FRating, Object.assign({ key: '364542b583d1bf7d31d08632adf555c63a7f14ce' }, props)))));
+        return (h$1(Host, { key: 'b4103ceb6f27d434447c69c8fff7572374e52d87' }, h$1("style", { key: 'c65cd936b7e5510718b9e2852af9ef8fac04e0b8' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: 'b9e228a246590a6ad05b228319846b9937aed321', id: componentWrapperId }, h$1(FRating, Object.assign({ key: '505d9988d34aa16060c392e8a97e15e4b72680ba' }, props)))));
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);
@@ -20108,7 +20117,7 @@ const KupProgressBar = /*@__PURE__*/ proxyCustomElement(class KupProgressBar ext
                 ? true
                 : false,
         };
-        return (h$1(Host, { key: '8d220189c286c78ac31626254715672685f00cab' }, h$1("style", { key: 'b3be36fe507aaf6fbb334a7be2754241e2650665' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: 'a99044918007393d91c5908aeb7405c3aa926979', id: componentWrapperId }, h$1(FProgressBar, Object.assign({ key: '06fb5ea68772da03c3239076baafc09a899e9376' }, props)))));
+        return (h$1(Host, { key: '94a226fb07053cb0c122582eb5d64c3a73df2ff6' }, h$1("style", { key: 'debd9e375096b0c6ac1cdc333b86f07896fd91e2' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: '1aceed94fc1ff58e3662f96bb5422dbb95b0af4d', id: componentWrapperId }, h$1(FProgressBar, Object.assign({ key: 'a34d56d8f05f35d24f0e94987bc952f466082a1f' }, props)))));
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);
@@ -21174,14 +21183,14 @@ const KupImageList = /*@__PURE__*/ proxyCustomElement(class KupImageList extends
         }
         const imlClass = 'image-list' +
             (this.showFullDescription ? ' full-description' : '');
-        return (h$1(Host, { key: 'e126ffca6f4a347874e940c20833b9a211d75139' }, h$1("style", { key: 'ecf74bc3247070d5f246cd334885a281e8f71ecc' }, __classPrivateFieldGet$6(this, _KupImageList_kupManager, "f").theme.setKupStyle(this.rootElement)), h$1("div", { key: '2d742444cbca6dab5060901ef99313817ec95893', id: componentWrapperId, ref: (el) => {
+        return (h$1(Host, { key: '4a3c80748fec9b98c9268077893643042b2c4ade' }, h$1("style", { key: '5fbc10ef98292d3cc1919d26cf64baa1286611e4' }, __classPrivateFieldGet$6(this, _KupImageList_kupManager, "f").theme.setKupStyle(this.rootElement)), h$1("div", { key: '52254d30b66446960be0db63fdf486420d35a7ce', id: componentWrapperId, ref: (el) => {
                 __classPrivateFieldSet$4(this, _KupImageList_el, el, "f");
-            } }, h$1("div", { key: '1bc44a87241d1488cfe012a2a83567a9d6391414', class: "navigation-bar" }, hasNavigation ? (h$1("div", { class: `navigation-bar__wrapper ${this.navigationBarToggled
+            } }, h$1("div", { key: '68cb3d98496d6314556ad5d777e6a67543a14ff3', class: "navigation-bar" }, hasNavigation ? (h$1("div", { class: `navigation-bar__wrapper ${this.navigationBarToggled
                 ? 'navigation-bar__wrapper--active'
                 : ''}` }, h$1("div", { class: `navigation-bar__title`, onClick: () => {
                 this.navigationBarToggled =
                     !this.navigationBarToggled;
-            } }, h$1(FImage, { fit: true, resource: this.currentNode.icon, placeholderResource: this.currentNode.placeholderIcon, sizeX: "1.25em", sizeY: "1.25em", wrapperClass: "navigation-bar__title__image" }), h$1("div", { class: "navigation-bar__title__label" }, this.currentNode.value)), h$1(FButton, Object.assign({}, __classPrivateFieldGet$6(this, _KupImageList_backProps, "f"), { label: __classPrivateFieldGet$6(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.BACK) })), h$1(FButton, Object.assign({}, __classPrivateFieldGet$6(this, _KupImageList_topProps, "f"), { label: __classPrivateFieldGet$6(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.TOP) })))) : null), this.leadingLabel && (h$1("div", { key: 'a527e20f9633054995f013cd550aae7c9254b492', class: "mdc-text-field__label-container" }, h$1("label", { key: '8fd3989537d74e0363c822bee6dc3a12eca276d9', class: "mdc-label" }, this.leadingLabel))), h$1("div", { key: '55329659aec995c3da9718b553ce93efe04cc6e4', class: imlClass, style: combinedGridStyle }, ...__classPrivateFieldGet$6(this, _KupImageList_instances, "m", _KupImageList_createList).call(this)))));
+            } }, h$1(FImage, { fit: true, resource: this.currentNode.icon, placeholderResource: this.currentNode.placeholderIcon, sizeX: "1.25em", sizeY: "1.25em", wrapperClass: "navigation-bar__title__image" }), h$1("div", { class: "navigation-bar__title__label" }, this.currentNode.value)), h$1(FButton, Object.assign({}, __classPrivateFieldGet$6(this, _KupImageList_backProps, "f"), { label: __classPrivateFieldGet$6(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.BACK) })), h$1(FButton, Object.assign({}, __classPrivateFieldGet$6(this, _KupImageList_topProps, "f"), { label: __classPrivateFieldGet$6(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.TOP) })))) : null), this.leadingLabel && (h$1("div", { key: '4b808d9230730a0eb49c5eca46a8130eda1c0f51', class: "mdc-text-field__label-container" }, h$1("label", { key: 'c1fcdb83116da8e7591091fcb97ea6c4ecb19a27', class: "mdc-label" }, this.leadingLabel))), h$1("div", { key: 'f0b462e13602be5a3a8c00ffd993fd9c8b02476a', class: imlClass, style: combinedGridStyle }, ...__classPrivateFieldGet$6(this, _KupImageList_instances, "m", _KupImageList_createList).call(this)))));
     }
     disconnectedCallback() {
         __classPrivateFieldGet$6(this, _KupImageList_kupManager, "f").interact.unregister(__classPrivateFieldGet$6(this, _KupImageList_interactableTouch, "f"));
@@ -22373,7 +22382,7 @@ function defineCustomElement$f() {
     } });
 }
 
-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}: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__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__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$5 = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
@@ -22391,6 +22400,7 @@ const KupFileUpload = /*@__PURE__*/ proxyCustomElement(class KupFileUpload exten
         this.__attachShadow();
         this.kupReady = createEvent(this, "kup-file-upload-ready", 6);
         this.kupUpload = createEvent(this, "kup-file-upload-upload", 6);
+        this.kupChange = createEvent(this, "kup-file-upload-change", 6);
         _KupFileUpload_instances.add(this);
         //#endregion
         //#region VARIABLES
@@ -22412,18 +22422,36 @@ const KupFileUpload = /*@__PURE__*/ proxyCustomElement(class KupFileUpload exten
             ],
         ]));
         this.customStyle = '';
-        this.data = null;
+        this.pathString = null;
+        this.FupMul = 'false';
+        this.FupAut = 'false';
+        this.FupDir = null;
+        this.error = undefined;
         this.inputRef = undefined;
-        this.files = [];
+        this.tempFiles = [];
+        this.pathFiles = [];
         this.uploadSuccess = false;
         this.showSpinner = false;
+        this.multiUpload = false;
+        this.autoUpload = false;
     }
     //#endregion
     //#region WATCHERS
     /*-------------------------------------------------*/
     /*                  W a t c h e r s                */
     /*-------------------------------------------------*/
-    onDataChanged() { }
+    onDataChanged() {
+        var _a;
+        this.uploadSuccess = false;
+        __classPrivateFieldGet$5(this, _KupFileUpload_instances, "m", _KupFileUpload_handleCancel).call(this);
+        this.pathFiles = ((_a = this.pathString) === null || _a === void 0 ? void 0 : _a.split(';')) || [];
+    }
+    onFupMulChanged() {
+        this.multiUpload = this.FupMul === 'true';
+    }
+    onFupAutChanged() {
+        this.autoUpload = this.FupAut === 'true';
+    }
     //#endregion
     //#region PUBLIC METHODS
     /*-------------------------------------------------*/
@@ -22454,11 +22482,19 @@ const KupFileUpload = /*@__PURE__*/ proxyCustomElement(class KupFileUpload exten
      * Sets upload has been successfull to show success message.
      * @param {boolean} success - Boolean to set if upload has been successfull.
      */
-    async setSuccess(success) {
+    async setSuccess(success, pathFiles) {
         this.setLoading(false);
-        if (success) {
+        if (success && pathFiles) {
             __classPrivateFieldGet$5(this, _KupFileUpload_instances, "m", _KupFileUpload_handleCancel).call(this);
             this.uploadSuccess = success;
+            this.pathFiles = this.multiUpload
+                ? [...this.pathFiles, ...pathFiles.split(';')]
+                : [pathFiles.split(';')[0]];
+            this.kupChange.emit({
+                comp: this,
+                id: this.rootElement.id,
+                value: this.pathFiles.join(';'),
+            });
         }
     }
     /**
@@ -22477,6 +22513,8 @@ const KupFileUpload = /*@__PURE__*/ proxyCustomElement(class KupFileUpload exten
         __classPrivateFieldGet$5(this, _KupFileUpload_kupManager, "f").debug.logLoad(this, false);
         __classPrivateFieldGet$5(this, _KupFileUpload_kupManager, "f").language.register(this);
         __classPrivateFieldGet$5(this, _KupFileUpload_kupManager, "f").theme.register(this);
+        this.multiUpload = this.FupMul === 'true';
+        this.autoUpload = this.FupAut === 'true';
     }
     componentDidLoad() {
         this.kupReady.emit({ comp: this, id: this.rootElement.id });
@@ -22489,10 +22527,10 @@ const KupFileUpload = /*@__PURE__*/ proxyCustomElement(class KupFileUpload exten
         __classPrivateFieldGet$5(this, _KupFileUpload_kupManager, "f").debug.logRender(this, true);
     }
     render() {
-        return (h$1(Host, { key: 'c1d2c71efa28c233051bdfeb1535bcb07149c660' }, h$1("style", { key: '9fb2a5e633f49bac0fe1c8673869ac8b29c1272b' }, __classPrivateFieldGet$5(this, _KupFileUpload_kupManager, "f").theme.setKupStyle(this.rootElement)), h$1("div", { key: 'b43469650151abf962aba80f54e15343c2a95767', id: componentWrapperId }, h$1("div", { key: '18489f11209ad6cf55c2de3e232b2b0888a4f505', class: {
+        return (h$1(Host, { key: 'f412a49eeb30049bdc81a66ab6337e3cfba02b81' }, h$1("style", { key: '00f66f5328af5e41c35576acbdc73d84b9152cfc' }, __classPrivateFieldGet$5(this, _KupFileUpload_kupManager, "f").theme.setKupStyle(this.rootElement)), h$1("div", { key: '7a5f52038e5b41ed7639a2acc0db051b14c5e6e4', id: componentWrapperId }, h$1("div", { key: 'aff6d5be5a5ca600a1950a2195f9a26ae6f164c6', class: {
                 'file-upload': true,
                 'file-upload-spinner': this.showSpinner,
-            }, onDrop: __classPrivateFieldGet$5(this, _KupFileUpload_instances, "m", _KupFileUpload_handleDrop).bind(this), onDragOver: (event) => event.preventDefault() }, h$1("input", { key: '8a700a42c034d2604bfe84199212123dd082c64a', type: "file", ref: (el) => (this.inputRef = el), onChange: __classPrivateFieldGet$5(this, _KupFileUpload_instances, "m", _KupFileUpload_handleFileChange).bind(this), multiple: true, hidden: true }), h$1("div", { key: '5279ca7bbb0468519c8cb4ae223c0d4e1e6dc7a5', class: "file-upload__buttons" }, h$1(FButton, { key: '76b00cac757d67e629a043f123217cdbc0b3dc58', icon: "upload", label: __classPrivateFieldGet$5(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageGeneric.CHOOSE), onClick: __classPrivateFieldGet$5(this, _KupFileUpload_instances, "m", _KupFileUpload_handleClick).bind(this) }), h$1(FButton, { key: 'ddec08321006f92257b336530f168cbabcdb0796', icon: "save", disabled: !this.files.length, label: __classPrivateFieldGet$5(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageGeneric.UPLOAD), onClick: __classPrivateFieldGet$5(this, _KupFileUpload_instances, "m", _KupFileUpload_uploadClick).bind(this), styling: FButtonStyling.FLAT }), h$1(FButton, { key: '1e70cb49c36286d5e72dd412b776c9002194102e', icon: "clear", disabled: !this.files.length, label: __classPrivateFieldGet$5(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageGeneric.ABORT), onClick: __classPrivateFieldGet$5(this, _KupFileUpload_instances, "m", _KupFileUpload_handleCancel).bind(this), styling: FButtonStyling.FLAT })), this.uploadSuccess ? (h$1("span", null, __classPrivateFieldGet$5(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageUpload.SUCCESS))) : (h$1("div", { class: "file-upload__list" }, this.files.map((file, i) => (h$1("div", { class: "file-upload__list__item" }, h$1("div", { class: "file-upload__list__item__preview" }, h$1(FImage, { resource: __classPrivateFieldGet$5(this, _KupFileUpload_instances, "m", _KupFileUpload_getPreview).call(this, file) })), h$1("span", { class: "file-upload__list__item__desc", title: file.name }, __classPrivateFieldGet$5(this, _KupFileUpload_instances, "m", _KupFileUpload_trimFileName).call(this, file.name)), h$1("span", { class: "file-upload__list__item__clear", onClick: __classPrivateFieldGet$5(this, _KupFileUpload_instances, "m", _KupFileUpload_handleFileRemove).bind(this, i) })))))), this.showSpinner && (h$1("div", { key: 'f6a8de73c3109a9067866628f78698150bc83bdc', class: "file-upload__spinner-container" }, h$1("kup-spinner", { key: 'ca00b8efcae2be30f8ea5028d6c2a7e3839d63a4', active: true, layout: 14, dimensions: "7px" })))))));
+            }, onDrop: __classPrivateFieldGet$5(this, _KupFileUpload_instances, "m", _KupFileUpload_handleDrop).bind(this), onDragOver: (event) => event.preventDefault() }, h$1("input", { key: '2d7d9cce86ee2dccb4183105bd2f87fbfbd8e771', type: "file", ref: (el) => (this.inputRef = el), onChange: __classPrivateFieldGet$5(this, _KupFileUpload_instances, "m", _KupFileUpload_handleFileChange).bind(this), multiple: this.multiUpload, hidden: true }), h$1("div", { key: 'ed2ab48eb2cb2c6cfde66c1cc3ffd82a40ec25b9', class: "file-upload__buttons" }, h$1(FButton, { key: '419105498c36ca6b6af5ca01d5ec7c751e593172', icon: "upload", label: __classPrivateFieldGet$5(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageGeneric.CHOOSE), onClick: __classPrivateFieldGet$5(this, _KupFileUpload_instances, "m", _KupFileUpload_handleClick).bind(this) }), !this.autoUpload && (h$1(Fragment$1, { key: '1b7549c1063dd8c2f17b17b1b8c59ef02937c66d' }, h$1(FButton, { key: 'c67ce873043022be3d1d2f7bddad747940993b2f', icon: "save", disabled: !this.tempFiles.length, label: __classPrivateFieldGet$5(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageGeneric.UPLOAD), onClick: __classPrivateFieldGet$5(this, _KupFileUpload_instances, "m", _KupFileUpload_uploadClick).bind(this), styling: FButtonStyling.FLAT }), h$1(FButton, { key: '4c6779d87c9bf1fc272afdab69b798aedfc222fc', icon: "clear", disabled: !this.tempFiles.length, label: __classPrivateFieldGet$5(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageGeneric.ABORT), onClick: __classPrivateFieldGet$5(this, _KupFileUpload_instances, "m", _KupFileUpload_handleCancel).bind(this), styling: FButtonStyling.FLAT })))), this.error && (h$1("div", { key: '39033957eb653997df1241f583bb361fe424ae42', class: "file-upload__error" }, h$1("span", { key: 'b862700c37fac995a820c8a0e21a168486f097ae', class: "mdc-error-message" }, this.error))), this.uploadSuccess ? (h$1("span", null, __classPrivateFieldGet$5(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageUpload.SUCCESS))) : (h$1("div", { class: "file-upload__list" }, this.tempFiles.map((file, i) => (h$1("div", { class: "file-upload__list__item" }, h$1("div", { class: "file-upload__list__item__preview" }, h$1(FImage, { resource: __classPrivateFieldGet$5(this, _KupFileUpload_instances, "m", _KupFileUpload_getPreview).call(this, file), placeholderResource: "file" })), h$1("span", { class: "file-upload__list__item__desc", title: file.name }, __classPrivateFieldGet$5(this, _KupFileUpload_instances, "m", _KupFileUpload_trimFileName).call(this, file.name)), h$1("span", { class: "file-upload__list__item__clear", onClick: __classPrivateFieldGet$5(this, _KupFileUpload_instances, "m", _KupFileUpload_handleFileRemove).bind(this, i) })))))), this.pathFiles.length ? (h$1("div", { class: "file-upload__list" }, this.pathFiles.map((path, i) => (h$1("span", { class: "file-upload__list__item" }, h$1("span", null, i + 1, ". ", path)))))) : null, this.showSpinner && (h$1("div", { key: '33fae247104f72981e072659f04f7fff71e0785a', class: "file-upload__spinner-container" }, h$1("kup-spinner", { key: 'f86cb406e5b9476c9f37f02845b48e8b41ca191d', active: true, layout: 14, dimensions: "7px" })))))));
     }
     disconnectedCallback() {
         __classPrivateFieldGet$5(this, _KupFileUpload_kupManager, "f").language.unregister(this);
@@ -22500,34 +22538,55 @@ const KupFileUpload = /*@__PURE__*/ proxyCustomElement(class KupFileUpload exten
     }
     get rootElement() { return this; }
     static get watchers() { return {
-        "data": ["onDataChanged"]
+        "pathString": ["onDataChanged"],
+        "FupMul": ["onFupMulChanged"],
+        "FupAut": ["onFupAutChanged"]
     }; }
     static get style() { return KupFileUploadStyle0; }
 }, [1, "kup-file-upload", {
         "customStyle": [1, "custom-style"],
-        "data": [8],
+        "pathString": [1, "path-string"],
+        "FupMul": [1, "fup-mul"],
+        "FupAut": [1, "fup-aut"],
+        "FupDir": [1, "fup-dir"],
+        "error": [1],
         "inputRef": [32],
-        "files": [32],
+        "tempFiles": [32],
+        "pathFiles": [32],
         "uploadSuccess": [32],
         "showSpinner": [32],
+        "multiUpload": [32],
+        "autoUpload": [32],
         "getProps": [64],
         "refresh": [64],
         "setProps": [64],
         "setSuccess": [64],
         "setLoading": [64]
     }, undefined, {
-        "data": ["onDataChanged"]
+        "pathString": ["onDataChanged"],
+        "FupMul": ["onFupMulChanged"],
+        "FupAut": ["onFupAutChanged"]
     }]);
 _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.files = [...this.files, ...newFiles];
+    this.tempFiles = [...this.tempFiles, ...newFiles];
+    this.inputRef.value = '';
+    if (this.autoUpload) {
+        this.kupUpload.emit({
+            comp: this,
+            id: this.rootElement.id,
+            files: this.tempFiles,
+        });
+        this.setLoading(true);
+    }
 }, _KupFileUpload_handleFileRemove = function _KupFileUpload_handleFileRemove(index) {
-    this.files = [
-        ...this.files.splice(0, index),
-        ...this.files.splice(index + 1),
+    this.tempFiles = [
+        ...this.tempFiles.splice(0, index),
+        ...this.tempFiles.splice(index + 1),
     ];
 }, _KupFileUpload_handleDrop = function _KupFileUpload_handleDrop(event) {
     event.preventDefault();
@@ -22535,10 +22594,10 @@ _KupFileUpload_kupManager = new WeakMap(), _KupFileUpload_previewMap = new WeakM
     const droppedFiles = event.dataTransfer.files;
     if (droppedFiles.length > 0) {
         const newFiles = Array.from(droppedFiles);
-        this.files = [...this.files, ...newFiles];
+        this.tempFiles = [...this.tempFiles, ...newFiles];
     }
 }, _KupFileUpload_handleCancel = function _KupFileUpload_handleCancel() {
-    this.files = [];
+    this.tempFiles = [];
 }, _KupFileUpload_getPreview = function _KupFileUpload_getPreview(file) {
     const previewIcon = __classPrivateFieldGet$5(this, _KupFileUpload_previewMap, "f").get(file.type);
     if (!previewIcon) {
@@ -22560,7 +22619,7 @@ _KupFileUpload_kupManager = new WeakMap(), _KupFileUpload_previewMap = new WeakM
     this.kupUpload.emit({
         comp: this,
         id: this.rootElement.id,
-        files: this.files,
+        files: this.tempFiles,
     });
     this.setLoading(true);
 };
@@ -24239,7 +24298,7 @@ function defineCustomElement$b() {
     } });
 }
 
-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: 678px){.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%}.paginator-tabs kup-paginator{display:inline-flex}.paginator-tabs kup-button{position:relative;height:100%;margin-left:0.25em;float:right}@media (max-width: 500px){.paginator-wrapper{min-width:fit-content}.above-wrapper.paginator-top{border-bottom:1px solid var(--kup-border-subtle)}}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  );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 KupDataTableStyle0 = kupDataTableCss;
 
 var __classPrivateFieldGet$3 = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
@@ -24682,7 +24741,7 @@ const KupDataTable = /*@__PURE__*/ proxyCustomElement(class KupDataTable extends
     computeMaxRowsPerPage() {
         var _a, _b, _c, _d;
         if (((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.columns) === null || _b === void 0 ? void 0 : _b.length) > 0 && ((_d = (_c = this.data) === null || _c === void 0 ? void 0 : _c.rows) === null || _d === void 0 ? void 0 : _d.length) > 0) {
-            const columnsNumber = this.data.columns.length;
+            const columnsNumber = this.getVisibleColumns().length;
             const rowsNumber = this.data.rows.length;
             const perfTuning = __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").perfTuning;
             perfTuning.maxRowsPerPageProvider(columnsNumber, rowsNumber, (maxRows) => {
@@ -25680,7 +25739,7 @@ const KupDataTable = /*@__PURE__*/ proxyCustomElement(class KupDataTable extends
         __classPrivateFieldSet$2(this, _KupDataTable_sizedColumns, __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_getSizedColumns).call(this), "f");
         let rows = null;
         if (__classPrivateFieldGet$3(this, _KupDataTable_paginatedRowsLength, "f") === 0) {
-            rows = (h$1("tr", { key: '07ec46c9a424095e068b11ec69c3a174c367e71f', ref: (el) => __classPrivateFieldGet$3(this, _KupDataTable_rowsRefs, "f").push(el) }, h$1("td", { key: '0815316e29d0de0c08707ab2884c154e9fcfd842', colSpan: __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_calculateColspan).call(this) }, this.emptyDataLabel)));
+            rows = (h$1("tr", { key: '65b3fb40eaad33e6d3c3bcb8f160b69856ecf701', ref: (el) => __classPrivateFieldGet$3(this, _KupDataTable_rowsRefs, "f").push(el) }, h$1("td", { key: '5e670d0765de2341365a739bc3f825e78721ac25', colSpan: __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_calculateColspan).call(this) }, this.emptyDataLabel)));
         }
         else {
             rows = [];
@@ -25756,7 +25815,7 @@ const KupDataTable = /*@__PURE__*/ proxyCustomElement(class KupDataTable extends
                         __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_handleChipsContextMenu).call(this, chipArg.id, e);
                     });
                 }
-                groupChips = h$1(FChip, Object.assign({ key: 'b9787d6ffd1c934371490794b42cdfdea1c01038' }, props));
+                groupChips = h$1(FChip, Object.assign({ key: '5b8732380a56359aef620c40b29c64159570f9d9' }, props));
             }
         }
         const tableClass = {
@@ -25788,7 +25847,7 @@ const KupDataTable = /*@__PURE__*/ proxyCustomElement(class KupDataTable extends
         if (this.headerIsPersistent &&
             this.tableHeight === undefined &&
             this.tableWidth === undefined) {
-            stickyEl = (h$1("sticky-header", { key: 'b39ba6e2f3d690191289485213c40b332b1d26b5', class: "hover-scrolling-child", hidden: !this.showHeader, ref: (el) => (__classPrivateFieldSet$2(this, _KupDataTable_stickyTheadRef, el, "f")) }, h$1("thead-sticky", { key: 'b0a7cd9c667abc832d623bf50b59ca5805f27201' }, h$1("tr-sticky", { key: 'b6d8cba262f07d876f155e8e9aab2513b1ab87a1' }, stickyHeader))));
+            stickyEl = (h$1("sticky-header", { key: 'f4209dc154f69639a46e566999616b493caed499', class: "hover-scrolling-child", hidden: !this.showHeader, ref: (el) => (__classPrivateFieldSet$2(this, _KupDataTable_stickyTheadRef, el, "f")) }, h$1("thead-sticky", { key: 'de05e2fbcb98a9d1beaf6a9ae903219398d80478' }, h$1("tr-sticky", { key: 'd4df92b29c1a2328f1095e852fee3a98495ef33c' }, stickyHeader))));
         }
         let belowClass = 'below-wrapper';
         if (!!this.tableHeight || !!this.tableWidth) {
@@ -25834,7 +25893,7 @@ const KupDataTable = /*@__PURE__*/ proxyCustomElement(class KupDataTable extends
         const useGlobalFilter = !this.legacyLook &&
             (this.globalFilter ||
                 this.getRows().length > __classPrivateFieldGet$3(this, _KupDataTable_DEFAULT_ROWS_FOR_GLOBAL_FILTER, "f"));
-        const compCreated = (h$1(Host, { key: 'dae64eb7127e6224a3e70901fd95ab5e01184637', "onKup-drop": (e) => {
+        const compCreated = (h$1(Host, { key: '9a17685f40d632c7cb18a342236f99f96825120d', "onKup-drop": (e) => {
                 this.kupDataTableDrop.emit(e.detail);
             }, "onKup-cell-input": (e) => {
                 autoselectOnAction(e);
@@ -25849,11 +25908,11 @@ const KupDataTable = /*@__PURE__*/ proxyCustomElement(class KupDataTable extends
                 this.kupDataTableObjectFieldOpenSearchMenu.emit(e.detail);
             }, "onKup-objectfield-selectedmenuitem": (e) => {
                 this.kupDataTableObjectFieldSelectedMenuItem.emit(e.detail);
-            } }, h$1("style", { key: 'eb3cf7aad6a0000d4392fae00b54cd2e55c45b1e' }, __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").theme.setKupStyle(this.rootElement)), this.updatableData ? __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_renderUpdateButtons).call(this) : null, h$1("div", { key: 'b5cf011078c5cb66c3ea0e35d56876321db2d741', id: componentWrapperId, class: wrapClass }, h$1("div", { key: '3eee618cb47ea8dfffa99d579539a77399821d8b', class: "group-wrapper" }, groupChips), h$1("div", { key: '9cdd14af5170a3db5ae3ee9a9cba45b41443100a', class: "actions-wrapper", style: actionWrapperWidth }, useGlobalFilter ? (h$1("div", { id: "global-filter" }, h$1(FTextField, { fullWidth: true, icon: KupThemeIconValues.SEARCH, label: __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), sizing: KupComponentSizing.EXTRA_SMALL, value: this.globalFilterValue, onInput: (event) => {
+            } }, h$1("style", { key: '79ace6176b404970802c44e116bfe85eb4f97585' }, __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").theme.setKupStyle(this.rootElement)), this.updatableData ? __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_renderUpdateButtons).call(this) : null, h$1("div", { key: '351cd4f3fa636ae8aac9b789ab5ddf2161b17942', id: componentWrapperId, class: wrapClass }, h$1("div", { key: '32ec90f3dc78d10462e5e5ef8a4ef0684cdcff36', class: "group-wrapper" }, groupChips), h$1("div", { key: '41c4515d9d59078f867aa638cdd3b9ea0f157d45', class: "actions-wrapper", style: actionWrapperWidth }, useGlobalFilter ? (h$1("div", { id: "global-filter" }, h$1(FTextField, { fullWidth: true, icon: KupThemeIconValues.SEARCH, label: __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), sizing: KupComponentSizing.EXTRA_SMALL, value: this.globalFilterValue, onInput: (event) => {
                 const t = event.target;
                 window.clearTimeout(__classPrivateFieldGet$3(this, _KupDataTable_globalFilterTimeout, "f"));
                 __classPrivateFieldSet$2(this, _KupDataTable_globalFilterTimeout, window.setTimeout(() => __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_onGlobalFilterChange).call(this, t), 600, t), "f");
-            } }))) : null, h$1("div", { key: '738986c7da7d958e11d20a888879fe88990c6661', class: "above-wrapper paginator-top" }, paginatorTop), this.insertMode !== '' &&
+            } }))) : null, paginatorTop && (h$1("div", { key: 'cabedeb68bcfe2cf6a99deff4d591a9a9ee29bb3', class: "above-wrapper paginator-top" }, paginatorTop)), this.insertMode !== '' &&
             this.selectedRows.length > 0 ? (h$1(FButton, { icon: "save", onClick: () => {
                 this.kupSave.emit({
                     comp: this,
@@ -25903,9 +25962,9 @@ const KupDataTable = /*@__PURE__*/ proxyCustomElement(class KupDataTable extends
                     this.data.rows.unshift(row);
                     await this.refresh(true);
                 }
-            }, sizing: KupComponentSizing.MEDIUM, styling: FButtonStyling.RAISED, title: "Insert row", wrapperClass: "insert-button" })) : null), h$1("div", { key: 'bc2478aff69fa98876ff08b2f4fff283fead57ee', class: "droparea", ref: (el) => (__classPrivateFieldSet$2(this, _KupDataTable_dropareaRef, el, "f")) }, this.showGroups ? __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_columnGroupArea).call(this) : null, this.removableColumns
+            }, sizing: KupComponentSizing.MEDIUM, styling: FButtonStyling.RAISED, title: "Insert row", wrapperClass: "insert-button" })) : null), h$1("div", { key: 'eb03546e0494b0185762bcbef91938c67fb67f71', class: "droparea", ref: (el) => (__classPrivateFieldSet$2(this, _KupDataTable_dropareaRef, el, "f")) }, this.showGroups ? __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_columnGroupArea).call(this) : null, this.removableColumns
             ? __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_columnRemoveArea).call(this)
-            : null), h$1("div", { key: 'e638d996e1824aa362f60000451fdeb522422593', style: elStyle, class: belowClass, ref: (el) => (__classPrivateFieldSet$2(this, _KupDataTable_tableAreaRef, el, "f")) }, this.showCustomization
+            : null), h$1("div", { key: '1c23ebbebedf9b71f1774dc9a719a814ae2d9342', style: elStyle, class: belowClass, ref: (el) => (__classPrivateFieldSet$2(this, _KupDataTable_tableAreaRef, el, "f")) }, this.showCustomization
             ? [
                 h$1("div", { class: "settings-trigger", onClick: () => {
                         __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_onCustomSettingsClick).call(this);
@@ -25914,7 +25973,7 @@ const KupDataTable = /*@__PURE__*/ proxyCustomElement(class KupDataTable extends
                     } }, h$1(FImage, { color: `var(${KupThemeColorValues.TITLE})`, resource: "settings", sizeX: "10px" })),
                 this.renderCustomizePanel(),
             ]
-            : null, h$1("table", { key: '9170bbb26e1a0d1e9e18668df90edc9324271e15', class: tableClass, ref: (el) => (__classPrivateFieldSet$2(this, _KupDataTable_tableRef, el, "f")), onKeyDown: (e) => __classPrivateFieldGet$3(this, _KupDataTable_onKupKeyDown, "f").call(this, e), onMouseLeave: (ev) => {
+            : null, h$1("table", { key: '0c641583cbf04c513aa98d0dce01ca6d9b8c011c', class: tableClass, ref: (el) => (__classPrivateFieldSet$2(this, _KupDataTable_tableRef, el, "f")), onKeyDown: (e) => __classPrivateFieldGet$3(this, _KupDataTable_onKupKeyDown, "f").call(this, e), onMouseLeave: (ev) => {
                 ev.stopPropagation();
             }, onPointerDown: (e) => {
                 __classPrivateFieldSet$2(this, _KupDataTable_lastPointerDetails, __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_getEventDetails).call(this, __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").getEventPath(e.target, this.rootElement), e), "f");
@@ -25922,7 +25981,7 @@ const KupDataTable = /*@__PURE__*/ proxyCustomElement(class KupDataTable extends
                 __classPrivateFieldSet$2(this, _KupDataTable_lastPointerDetails, __classPrivateFieldGet$3(this, _KupDataTable_instances, "m", _KupDataTable_getEventDetails).call(this, __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").getEventPath(e.target, this.rootElement), e), "f");
             }, onContextMenu: (e) => {
                 e.preventDefault();
-            } }, h$1("thead", { key: 'f5712e5ee848bd8500bb3ba4db462c67690a51bd', hidden: !this.showHeader, ref: (el) => (__classPrivateFieldSet$2(this, _KupDataTable_theadRef, el, "f")) }, h$1("tr", { key: 'f31395dd72d13b0ae9746db64fa2505dad92c083' }, header)), h$1("tbody", { key: '084950706c42cb528f9e8eb1ab38f8bcd96e8417' }, rows), this.showFooter && this.renderFooter()), stickyEl), paginatorBottom)));
+            } }, h$1("thead", { key: '19ba63a8356e15878207df1c167825c7089dcb43', hidden: !this.showHeader, ref: (el) => (__classPrivateFieldSet$2(this, _KupDataTable_theadRef, el, "f")) }, h$1("tr", { key: '14477c0152f8a5dc08c6ca4adbff833c6f04713a' }, header)), h$1("tbody", { key: '1a91bb716cea4d295c659e30006385ac3c0081d6' }, rows), this.showFooter && this.renderFooter()), stickyEl), paginatorBottom)));
         __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").perfMonitoring.measure('componentRender', 'kup-data-table');
         return compCreated;
     }
@@ -25962,6 +26021,7 @@ const KupDataTable = /*@__PURE__*/ proxyCustomElement(class KupDataTable extends
         "currentPage": ["recalculateRows"],
         "currentRowsPerPage": ["recalculateRows"],
         "data": ["identifyAndInitRows", "decorateAndInitForUpdTable", "computeMaxRowsPerPage"],
+        "visibleColumns": ["computeMaxRowsPerPage"],
         "groups": ["recalculateRowsAndUndoSelections"],
         "fixedColumns": ["controlFixedRowsColumns"],
         "fixedColumnsR": ["controlFixedRowsColumns"],
@@ -26083,6 +26143,7 @@ const KupDataTable = /*@__PURE__*/ proxyCustomElement(class KupDataTable extends
         "currentPage": ["recalculateRows"],
         "currentRowsPerPage": ["recalculateRows"],
         "data": ["identifyAndInitRows", "decorateAndInitForUpdTable", "computeMaxRowsPerPage"],
+        "visibleColumns": ["computeMaxRowsPerPage"],
         "groups": ["recalculateRowsAndUndoSelections"],
         "fixedColumns": ["controlFixedRowsColumns"],
         "fixedColumnsR": ["controlFixedRowsColumns"],
@@ -29397,12 +29458,14 @@ const KupCombobox = /*@__PURE__*/ proxyCustomElement(class KupCombobox extends H
                 : false,
             showMarker: this.showMarker,
             legacyLook: this.legacyLook,
-            size: getSizeOfInputElement(this.data, this.displayMode, this.size),
+            size: this.size
+                ? this.size
+                : getSizeOfInputElement(this.data, this.displayMode, this.size),
             title: (_a = this.displayedValue) !== null && _a !== void 0 ? _a : '',
         };
         const fullHeight = this.rootElement.classList.contains('kup-full-height');
         const fullWidth = this.rootElement.classList.contains('kup-full-width');
-        return (h$1(Host, { key: 'b419cdf58d190601c58d0ab1501e6cfeeb215c4f', class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet$2(this, _KupCombobox_elStyle, "f") }, h$1("style", { key: '9c5b4ad2ae9303e607ab0667cd31d2fe95f50524' }, __classPrivateFieldGet$2(this, _KupCombobox_kupManager, "f").theme.setKupStyle(this.rootElement)), h$1("div", { key: '759809bb42d7f30abdcb5db1abb4a0e5689fc731', id: componentWrapperId, style: __classPrivateFieldGet$2(this, _KupCombobox_elStyle, "f") }, h$1(FTextField, Object.assign({ key: '9e864b76be8ad6602186797f68d237980ebd307d' }, props, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, trailingIcon: true, icon: this.showDropDownIcon
+        return (h$1(Host, { key: '8bb8eace416a6799a32f5d5222759ead3525ed7d', class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet$2(this, _KupCombobox_elStyle, "f") }, h$1("style", { key: 'bf9817caafcbd303719c862f4f84111ef6da27c1' }, __classPrivateFieldGet$2(this, _KupCombobox_kupManager, "f").theme.setKupStyle(this.rootElement)), h$1("div", { key: '1052268f4d6e8227b3fdc6c6a25ea2004f21d197', id: componentWrapperId, style: __classPrivateFieldGet$2(this, _KupCombobox_elStyle, "f") }, h$1(FTextField, Object.assign({ key: 'df2cf6672cfe3c9360476df936cedff6449861b6' }, props, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, trailingIcon: true, icon: this.showDropDownIcon
                 ? KupThemeIconValues.DROPDOWN
                 : null, value: this.displayedValue, onBlur: () => this.onKupBlur(), onClick: () => this.onKupIconClick(), onChange: (e) => this.onKupChange(e.target.value), onFocus: () => this.onKupFocus(), onInput: () => this.onKupInput(), onIconClick: () => this.onKupIconClick(), onClearIconClick: () => this.onKupClearIconClick() }))), __classPrivateFieldGet$2(this, _KupCombobox_instances, "m", _KupCombobox_prepList).call(this)));
     }
@@ -33588,12 +33651,14 @@ const KupAutocomplete = /*@__PURE__*/ proxyCustomElement(class KupAutocomplete e
                 : false,
             showMarker: this.showMarker,
             legacyLook: this.legacyLook,
-            size: getSizeOfInputElement(this.data, this.displayMode, this.size),
+            size: this.size
+                ? this.size
+                : getSizeOfInputElement(this.data, this.displayMode, this.size),
             title: (_a = this.displayedValue) !== null && _a !== void 0 ? _a : '',
         };
         const fullHeight = this.rootElement.classList.contains('kup-full-height');
         const fullWidth = this.rootElement.classList.contains('kup-full-width');
-        return (h$1(Host, { key: 'bd65a5abab4ff62f91a6348e03b496711b796d90', class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet(this, _KupAutocomplete_elStyle, "f") }, h$1("style", { key: '7133bd7ceb0365b4bd82846a60addb3085a25d37' }, __classPrivateFieldGet(this, _KupAutocomplete_kupManager, "f").theme.setKupStyle(this.rootElement)), h$1("div", { key: '8b09ee007f909d8f6eadeebda3262b42731a747a', id: componentWrapperId, style: __classPrivateFieldGet(this, _KupAutocomplete_elStyle, "f") }, h$1(FTextField, Object.assign({ key: '56658e721535c89c971bd7dae0af26c073a6eab6' }, props, { icon: this.showDropDownIcon
+        return (h$1(Host, { key: 'ba27aa4bc6759aec2f01a404117c115e7aa7849f', class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet(this, _KupAutocomplete_elStyle, "f") }, h$1("style", { key: 'b4b0bd1e49208182acf4681b8c3764883e41d3c8' }, __classPrivateFieldGet(this, _KupAutocomplete_kupManager, "f").theme.setKupStyle(this.rootElement)), h$1("div", { key: '2b227672c21f3fedc690cdeb36cd5fb129928567', id: componentWrapperId, style: __classPrivateFieldGet(this, _KupAutocomplete_elStyle, "f") }, h$1(FTextField, Object.assign({ key: '4e62a1c01fc2691d74b3bc257ffb4c63f93acb04' }, props, { icon: this.showDropDownIcon
                 ? KupThemeIconValues.SEARCH
                 : null, trailingIcon: true }, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, value: this.displayedValue, onBlur: () => this.onKupBlur(), onClick: () => this.onKupClick(), onChange: (e) => this.onKupChangeSubmit(e.target.value, this.kupChange), onFocus: () => this.onKupFocus(), onInput: () => {
                 window.clearTimeout(__classPrivateFieldGet(this, _KupAutocomplete_inputTimeout, "f"));