@sme.up/ketchup 10.2.0 → 10.3.1

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

@@ -1,19 +1,19 @@
 import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, d as getElement$1, g as getAssetPath, F as Fragment } from './index-9b0f4a0d.js';
-import { k as kupManagerInstance, I as ItemsDisplayMode, a as KupComponentSizing, g as getProps, s as setProps, b as KupThemeIconValues, c as KupDynamicPositionPlacement, d as KupThemeColorValues, e as KupDebugCategory, F as FCellShapes, f as FCellPadding, h as KupLanguageGeneric, i as fillString, j as KupCardBuiltInClockElements, l as KupCardCSSClasses, m as KupLanguageTotals, n as KupLanguageColumn, o as KupDataNewColumnTypes, p as KupCardSubEvents, q as KupCardIds, r as KupLanguageRow, t as KupLanguageSearch, u as KupCardFamily, v as KupCardProps, w as getColumnByName, x as formatToNumber, y as KupObjects, z as identify, G as GroupLabelDisplayMode, S as SelectionMode, A as KupLanguageGrouping, B as KupLanguageCheckbox, C as getValueForDisplay2, D as Filters, E as getValueForDisplay, H as FILTER_ANALYZER, L as LoadMoreMode, P as PaginatorPos, J as ShowGrid, M as KupPerfTuningPriority, T as TotalLabel, N as TotalMode, O as getRegExpFromString, Q as isNegativeNumber, R as FCellClasses, U as kupDynamicPositionAttribute, V as KupPointerEventTypes, W as kupDraggableColumnAttr, X as kupDragActiveAttr, Y as KupDragEffect, Z as kupDraggableCellAttr, _ as KupDropEventTypes, $ as DataTableAreasEnum, a0 as TypesToDuplicate, a1 as FixedCellsClasses, a2 as FixedCellsCSSVarsBase, a3 as KupLanguageFontsize, a4 as KupLanguageDensity, a5 as KupLanguageGrid, a6 as KupDataTableProps, a7 as SortMode, a8 as iconColumn, a9 as keyColumn, aa as fieldColumn, ab as KupLanguageUpload, ac as FCellTypes, ad as KupListRole, ae as KupListProps, af as addColumnValueFromRow, ag as KupGlobalFilterMode } from './kup-manager-6aa0a1c7.js';
-import { F as FTextField } from './f-text-field-9be88e51.js';
+import { k as kupManagerInstance, I as ItemsDisplayMode, a as KupComponentSizing, g as getProps, s as setProps, b as KupThemeIconValues, c as KupDynamicPositionPlacement, d as KupThemeColorValues, e as KupDebugCategory, F as FCellShapes, f as FCellPadding, h as KupLanguageGeneric, i as fillString, j as KupCardBuiltInClockElements, l as KupCardCSSClasses, m as KupLanguageTotals, n as KupLanguageColumn, o as KupDataNewColumnTypes, p as KupCardSubEvents, q as KupCardIds, r as KupLanguageRow, t as KupLanguageSearch, u as KupCardFamily, v as KupCardProps, w as getColumnByName, x as formatToNumber, y as KupObjects, z as identify, G as GroupLabelDisplayMode, S as SelectionMode, A as KupLanguageGrouping, B as KupLanguageCheckbox, C as getValueForDisplay2, D as Filters, E as getValueForDisplay, H as FILTER_ANALYZER, L as LoadMoreMode, P as PaginatorPos, J as ShowGrid, M as KupPerfTuningPriority, T as TotalLabel, N as TotalMode, O as getRegExpFromString, Q as isNegativeNumber, R as FCellClasses, U as kupDynamicPositionAttribute, V as KupPointerEventTypes, W as kupDraggableColumnAttr, X as kupDragActiveAttr, Y as KupDragEffect, Z as kupDraggableCellAttr, _ as KupDropEventTypes, $ as DataTableAreasEnum, a0 as TypesToDuplicate, a1 as FixedCellsClasses, a2 as FixedCellsCSSVarsBase, a3 as KupLanguageFontsize, a4 as KupLanguageDensity, a5 as KupLanguageGrid, a6 as KupDataTableProps, a7 as SortMode, a8 as iconColumn, a9 as keyColumn, aa as fieldColumn, ab as KupLanguageUpload, ac as FCellTypes, ad as KupListRole, ae as KupListProps, af as addColumnValueFromRow, ag as KupGlobalFilterMode } from './kup-manager-a3f8ee8f.js';
+import { F as FTextField } from './f-text-field-591dc383.js';
 import { F as FTextFieldMDC } from './f-text-field-mdc-9a862967.js';
-import { g as getIdOfItemByDisplayMode, c as consistencyCheck, F as FChipType, a as FChipSize, b as FChipStyling, d as FChip } from './f-chip-bb62428a.js';
+import { g as getIdOfItemByDisplayMode, c as consistencyCheck, F as FChipType, a as FChipSize, b as FChipStyling, d as FChip } from './f-chip-72bcea75.js';
 import { c as componentWrapperId } from './GenericVariables-d8d0541e.js';
 import { F as FImage } from './f-image-a2ecd7c3.js';
 import { F as FButton } from './f-button-3c8f4506.js';
 import { F as FButtonAlign, a as FButtonStyling } from './f-button-declarations-6c8f8abe.js';
-import { F as FCell, a as FRadio, b as FRating, c as FSwitchSizing, d as FSwitch } from './f-cell-6576e009.js';
+import { F as FCell, a as FRadio, b as FRating, c as FSwitchSizing, d as FSwitch } from './f-cell-eea4e836.js';
 import { d as KupDateTimeFormatOptionsMonth, K as KupDatesFormats, a as KupDates } from './kup-dates-da19044e.js';
 import { M as MDCRipple } from './component-879e99bf.js';
 import { F as FCheckbox } from './f-checkbox-5cdd1cad.js';
-import { F as FiltersColumnMenu, a as FiltersRows, g as getDiffData, d as decorateDataTable, c as calcTotals, n as normalizeRows, p as paginateRows, f as filterRows, b as groupRows, s as sortRows, t as treeMainColumnName, K as KupTreeExpansionMode, e as KupTreeProps } from './kup-data-table-helper-13eb7abf.js';
-import { F as FPaginator, p as pageChange, r as rowsPerPageChange } from './f-paginator-utils-04903d74.js';
-import './f-object-field-b87b6ae6.js';
+import { F as FiltersColumnMenu, a as FiltersRows, g as getDiffData, d as decorateDataTable, c as calcTotals, n as normalizeRows, p as paginateRows, f as filterRows, b as groupRows, s as sortRows, t as treeMainColumnName, K as KupTreeExpansionMode, e as KupTreeProps } from './kup-data-table-helper-0fbe9df1.js';
+import { F as FPaginator, p as pageChange, r as rowsPerPageChange } from './f-paginator-utils-e785d34e.js';
+import './f-object-field-1827746c.js';
 
 /**
  * Props of the kup-autocomplete component.
@@ -34,6 +34,7 @@ var KupAutocompleteProps;
     KupAutocompleteProps["serverHandledFilter"] = "When true, the items filter is managed server side, otherwise items filter is done client side.";
     KupAutocompleteProps["showDropDownIcon"] = "When true shows the drop-down icon, for open list.";
     KupAutocompleteProps["showMarker"] = "When true shows a small marker on the component";
+    KupAutocompleteProps["legacyLook"] = "When true enables the monospaces look for the ACP component";
 })(KupAutocompleteProps || (KupAutocompleteProps = {}));
 
 const kupAutocompleteCss = ".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{display:block;width:max-content}.kup-icon{transition:transform 0.15s}.toggled .kup-icon.kup-dropdown-icon{transform:rotate(-180deg)}.kup-icon.kup-dropdown-icon{-webkit-mask:var(--kup-dropdown-icon);mask:var(--kup-dropdown-icon)}.f-text-field{position:relative}:host(.kup-full-height){height:100%}:host(.kup-full-height) #kup-component,:host(.kup-full-height) .f-text-field,:host(.kup-full-height) .mdc-text-field{height:100%}:host(.kup-full-width){width:100%}:host(.kup-full-width) #kup-component{width:100%}:host(.kup-danger){--kup-textfield-primary-color:var(--kup-danger-color-60);--kup-textfield-primary-color-rgb:var(--kup-danger-color-rgb)}:host(.kup-info){--kup-textfield-primary-color:var(--kup-info-color);--kup-textfield-primary-color-rgb:var(--kup-info-color-rgb)}:host(.kup-secondary){--kup-textfield-primary-color:var(--kup-secondary-color);--kup-textfield-primary-color-rgb:var(--kup-secondary-color-rgb)}:host(.kup-success){--kup-textfield-primary-color:var(--kup-success-color);--kup-textfield-primary-color-rgb:var(--kup-success-color-rgb)}:host(.kup-warning){--kup-textfield-primary-color:var(--kup-warning-color-50);--kup-textfield-primary-color-rgb:var(--kup-warning-color-50-rgb)}";
@@ -83,7 +84,7 @@ const KupAutocomplete = class {
         this.displayedValue = undefined;
         this.value = '';
         this.alert = '';
-        this.allowInconsistentValues = false;
+        this.allowInconsistentValues = true;
         this.customStyle = '';
         this.data = undefined;
         this.disabled = false;
@@ -106,6 +107,7 @@ const KupAutocomplete = class {
         this.sizing = KupComponentSizing.SMALL;
         this.trailingIcon = false;
         this.placeholder = 'Type code or description';
+        this.legacyLook = false;
     }
     onKupBlur() {
         if (!__classPrivateFieldGet$a(this, _KupAutocomplete_instances, "m", _KupAutocomplete_isListOpened).call(this)) {
@@ -250,7 +252,7 @@ const KupAutocomplete = class {
                 case 'ArrowDown':
                     e.preventDefault();
                     e.stopPropagation();
-                    __classPrivateFieldGet$a(this, _KupAutocomplete_instances, "m", _KupAutocomplete_openList).call(this, false);
+                    __classPrivateFieldGet$a(this, _KupAutocomplete_instances, "m", _KupAutocomplete_openList).call(this, true);
                     __classPrivateFieldGet$a(this, _KupAutocomplete_listEl, "f").focusNext();
                     break;
                 case 'ArrowUp':
@@ -373,10 +375,11 @@ const KupAutocomplete = class {
                 : false,
             showMarker: this.showMarker,
             size: __classPrivateFieldGet$a(this, _KupAutocomplete_instances, "m", _KupAutocomplete_calcSize).call(this),
+            legacyLook: this.legacyLook,
         };
         const fullHeight = this.rootElement.classList.contains('kup-full-height');
         const fullWidth = this.rootElement.classList.contains('kup-full-width');
-        return (h(Host, { key: '34b53e37b4e6d9ea9ad04fc93f9e50f172243483', class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet$a(this, _KupAutocomplete_elStyle, "f") }, h("style", { key: 'aa6fe378e2035a502e273261b6a2bf098635deb5' }, __classPrivateFieldGet$a(this, _KupAutocomplete_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'af0e6b946566ced1bee92e5b1ec39c8f7cea1b0b', id: componentWrapperId, style: __classPrivateFieldGet$a(this, _KupAutocomplete_elStyle, "f") }, h(FTextField, Object.assign({ key: '013526b611b989ca3c21fdcf78135a0a086434b0' }, props, { icon: this.showDropDownIcon
+        return (h(Host, { key: '3f6a66ca4b883e9632b7350f3d85b4f9cdeea29e', class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet$a(this, _KupAutocomplete_elStyle, "f") }, h("style", { key: '3fecd938e95c108cd84b312f1d88afd0b90d2782' }, __classPrivateFieldGet$a(this, _KupAutocomplete_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '62b0977226e9b5cd0f3e25001797997c9f3ceafa', id: componentWrapperId, style: __classPrivateFieldGet$a(this, _KupAutocomplete_elStyle, "f") }, h(FTextField, Object.assign({ key: 'adf742e46d43da776fae42c4a9b42bc989c5bcda' }, 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.onKupChange(e.target.value), onFocus: () => this.onKupFocus(), onInput: () => {
                 window.clearTimeout(__classPrivateFieldGet$a(this, _KupAutocomplete_inputTimeout, "f"));
@@ -397,14 +400,23 @@ const KupAutocomplete = class {
     }; }
 };
 _KupAutocomplete_elStyle = new WeakMap(), _KupAutocomplete_listEl = new WeakMap(), _KupAutocomplete_kupManager = new WeakMap(), _KupAutocomplete_textfieldWrapper = new WeakMap(), _KupAutocomplete_textfieldEl = new WeakMap(), _KupAutocomplete_clickCb = new WeakMap(), _KupAutocomplete_inputTimeout = new WeakMap(), _KupAutocomplete_instances = new WeakSet(), _KupAutocomplete_openList = function _KupAutocomplete_openList(forceOpen) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     if (forceOpen != true &&
         __classPrivateFieldGet$a(this, _KupAutocomplete_textfieldEl, "f").value.length < this.minimumChars) {
         __classPrivateFieldGet$a(this, _KupAutocomplete_instances, "m", _KupAutocomplete_closeList).call(this);
         return false;
     }
-    const hasError = ((_a = this.error) === null || _a === void 0 ? void 0 : _a.trim().length) > 0;
-    const hasAlert = ((_b = this.alert) === null || _b === void 0 ? void 0 : _b.trim().length) > 0;
+    if (forceOpen && !((_b = (_a = this.data['kup-list']) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.length)) {
+        this.kupIconClick.emit({
+            comp: this,
+            id: this.rootElement.id,
+            value: this.value,
+            inputValue: __classPrivateFieldGet$a(this, _KupAutocomplete_textfieldEl, "f").value,
+            open: true,
+        });
+    }
+    const hasError = ((_c = this.error) === null || _c === void 0 ? void 0 : _c.trim().length) > 0;
+    const hasAlert = ((_d = this.alert) === null || _d === void 0 ? void 0 : _d.trim().length) > 0;
     const topOffset = hasError || hasAlert ? -20 : 0;
     __classPrivateFieldGet$a(this, _KupAutocomplete_textfieldWrapper, "f").classList.add('toggled');
     __classPrivateFieldGet$a(this, _KupAutocomplete_listEl, "f").menuVisible = true;
@@ -639,7 +651,6 @@ const KupButton = class {
         this.toggable = false;
         this.trailingIcon = false;
         this.sizing = KupComponentSizing.SMALL;
-        this.keyShortcut = undefined;
     }
     onKupBlur() {
         this.kupBlur.emit({
@@ -722,9 +733,6 @@ const KupButton = class {
         else {
             this.value = 'N/A';
         }
-        if (this.keyShortcut && !this.disabled) {
-            this.kupManager.keysBinding.register(this.keyShortcut, this.onKupClick.bind(this));
-        }
     }
     componentDidRender() {
         this.kupManager.debug.logRender(this, true);
@@ -794,9 +802,6 @@ const KupButton = class {
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);
-        if (this.keyShortcut) {
-            this.kupManager.keysBinding.unregister(this.keyShortcut);
-        }
     }
     get rootElement() { return getElement$1(this); }
 };
@@ -7468,6 +7473,7 @@ var KupComboboxProps;
     KupComboboxProps["label"] = "When set, its content will be shown as a label.";
     KupComboboxProps["leadingLabel"] = "When set to true, the label will be on the left of the component.";
     KupComboboxProps["showMarker"] = "When true shows a small marker on the component";
+    KupComboboxProps["legacyLook"] = "When true enables the monospaced look for the CMB component";
 })(KupComboboxProps || (KupComboboxProps = {}));
 
 const kupComboboxCss = ".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{display:block;font-size:var(--kup-font-size);width:max-content}:host([is-select]) #kup-component{transition:background-color 0.2s}:host([is-select]) .mdc-text-field:not(.mdc-text-field--disabled) input{cursor:pointer}.kup-icon{transition:transform 0.15s}.toggled .kup-icon.kup-dropdown-icon{transform:rotate(-180deg)}.kup-icon.kup-dropdown-icon{-webkit-mask:var(--kup-dropdown-icon);mask:var(--kup-dropdown-icon);order:2}.f-text-field{position:relative}:host(.kup-full-height){height:100%}:host(.kup-full-height) #kup-component,:host(.kup-full-height) .f-text-field,:host(.kup-full-height) .mdc-text-field{height:100%}:host(.kup-full-width){width:100%}:host(.kup-full-width) #kup-component{width:100%}:host(.kup-danger){--kup-textfield-primary-color:var(--kup-danger-color-60);--kup-textfield-primary-color-rgb:var(--kup-danger-color-rgb)}:host(.kup-info){--kup-textfield-primary-color:var(--kup-info-color);--kup-textfield-primary-color-rgb:var(--kup-info-color-rgb)}:host(.kup-secondary){--kup-textfield-primary-color:var(--kup-secondary-color);--kup-textfield-primary-color-rgb:var(--kup-secondary-color-rgb)}:host(.kup-success){--kup-textfield-primary-color:var(--kup-success-color);--kup-textfield-primary-color-rgb:var(--kup-success-color-rgb)}:host(.kup-warning){--kup-textfield-primary-color:var(--kup-warning-color-50);--kup-textfield-primary-color-rgb:var(--kup-warning-color-rgb)}:host(.page-selector) .f-text-field .mdc-text-field,:host(.rows-selector) .f-text-field .mdc-text-field{border-bottom:none !important;width:max-content !important}:host(.page-selector) .f-text-field .mdc-text-field-container,:host(.rows-selector) .f-text-field .mdc-text-field-container{flex-direction:row !important}:host(.page-selector) .f-text-field .mdc-text-field-container .mdc-text-field__label-container,:host(.rows-selector) .f-text-field .mdc-text-field-container .mdc-text-field__label-container{white-space:nowrap;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}:host(.page-selector) .f-text-field .mdc-text-field-helper-line,:host(.rows-selector) .f-text-field .mdc-text-field-helper-line{display:none}";
@@ -7533,6 +7539,7 @@ const KupCombobox = class {
         this.sizing = KupComponentSizing.SMALL;
         this.trailingIcon = false;
         this.showMarker = false;
+        this.legacyLook = false;
     }
     onKupBlur() {
         if (!__classPrivateFieldGet$8(this, _KupCombobox_instances, "m", _KupCombobox_isListOpened).call(this)) {
@@ -7777,10 +7784,11 @@ const KupCombobox = class {
                 ? true
                 : false,
             showMarker: this.showMarker,
+            legacyLook: this.legacyLook,
         };
         const fullHeight = this.rootElement.classList.contains('kup-full-height');
         const fullWidth = this.rootElement.classList.contains('kup-full-width');
-        return (h(Host, { key: 'bb14609b26ad896dac3158ce4427d129fd520abb', class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet$8(this, _KupCombobox_elStyle, "f") }, h("style", { key: 'dfc874e6d1f9facc181fd7d05cb3e3a981d18daf' }, __classPrivateFieldGet$8(this, _KupCombobox_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '47eca4f5d10c0be8d4910b6028abed16de4c0b8e', id: componentWrapperId, style: __classPrivateFieldGet$8(this, _KupCombobox_elStyle, "f") }, h(FTextField, Object.assign({ key: '6c922d6c51567e3a337eb6fbf26228f42b03041e' }, props, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, trailingIcon: true, icon: this.showDropDownIcon
+        return (h(Host, { key: 'd724bfd8c4b33e0756be8a9669d218e7a3f15dd9', class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet$8(this, _KupCombobox_elStyle, "f") }, h("style", { key: '2115e4d44f5d28d72de809e98818e81e14f955b3' }, __classPrivateFieldGet$8(this, _KupCombobox_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'd907dc96d2dbf1c680ce181f868be5daea0f6f1f', id: componentWrapperId, style: __classPrivateFieldGet$8(this, _KupCombobox_elStyle, "f") }, h(FTextField, Object.assign({ key: 'b305bb5e3f2408217ff82abf854d82a3caca5886' }, 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() }))), __classPrivateFieldGet$8(this, _KupCombobox_instances, "m", _KupCombobox_prepList).call(this)));
     }
@@ -8738,10 +8746,11 @@ const KupDataTable = class {
         });
         //======== Event Listeners ========
         _KupDataTable_horNav.set(this, (isRight) => {
-            if (!__classPrivateFieldGet$7(this, _KupDataTable_lastFocusedCell, "f")) {
+            if (!__classPrivateFieldGet$7(this, _KupDataTable_lastFocusedCell, "f") ||
+                this.selection == SelectionMode.MULTIPLE) {
                 return;
             }
-            __classPrivateFieldGet$7(this, _KupDataTable_instances, "m", _KupDataTable_resetSelectedRows).call(this, true);
+            //this.#resetSelectedRows(true);
             const tr = __classPrivateFieldGet$7(this, _KupDataTable_lastFocusedCell, "f").element.closest('tr:not(.group)');
             const cells = tr.querySelectorAll('.f-cell');
             const oldIndex = Array.from(cells).indexOf(__classPrivateFieldGet$7(this, _KupDataTable_lastFocusedCell, "f").element);
@@ -8754,14 +8763,15 @@ const KupDataTable = class {
             }
             const focused = cells[newIndex];
             const focusedProps = focused['kup-get-cell-props']();
-            __classPrivateFieldGet$7(this, _KupDataTable_instances, "m", _KupDataTable_onRowClick).call(this, focusedProps.row, focused.closest('td'), false);
+            __classPrivateFieldGet$7(this, _KupDataTable_instances, "m", _KupDataTable_onRowClick).call(this, focusedProps.row, focused.closest('td'), true, true);
             __classPrivateFieldSet$3(this, _KupDataTable_lastFocusedCell, focusedProps.cell, "f");
         });
         _KupDataTable_verNav.set(this, (isDown) => {
-            if (!__classPrivateFieldGet$7(this, _KupDataTable_lastFocusedCell, "f")) {
+            if (!__classPrivateFieldGet$7(this, _KupDataTable_lastFocusedCell, "f") ||
+                this.selection == SelectionMode.MULTIPLE) {
                 return;
             }
-            __classPrivateFieldGet$7(this, _KupDataTable_instances, "m", _KupDataTable_resetSelectedRows).call(this, true);
+            //this.#resetSelectedRows(true);
             const tr = __classPrivateFieldGet$7(this, _KupDataTable_lastFocusedCell, "f").element.closest('tr:not(.group)');
             const cellXIndex = Array.from(tr.querySelectorAll('.f-cell')).indexOf(__classPrivateFieldGet$7(this, _KupDataTable_lastFocusedCell, "f").element);
             const rows = tr.parentElement.querySelectorAll('tr:not(.group)');
@@ -8778,7 +8788,7 @@ const KupDataTable = class {
             const focused = focusedCells[cellXIndex];
             const focusedProps = focused['kup-get-cell-props']();
             __classPrivateFieldSet$3(this, _KupDataTable_lastFocusedCell, focusedProps.cell, "f");
-            __classPrivateFieldGet$7(this, _KupDataTable_instances, "m", _KupDataTable_onRowClick).call(this, focusedProps.row, focused.closest('td'), false);
+            __classPrivateFieldGet$7(this, _KupDataTable_instances, "m", _KupDataTable_onRowClick).call(this, focusedProps.row, focused.closest('td'), true, true);
         });
         _KupDataTable_onKupKeyDown.set(this, (e) => {
             const isHorizontal = e.key === 'ArrowLeft' || e.key === 'ArrowRight';
@@ -9078,6 +9088,9 @@ const KupDataTable = class {
      * Collapses all groups.
      */
     async collapseAll() {
+        if (!this.expandGroups) {
+            this.expandGroupsHandler();
+        }
         this.expandGroups = false;
     }
     /**
@@ -9177,6 +9190,9 @@ const KupDataTable = class {
      * Expands all groups.
      */
     async expandAll() {
+        if (this.expandGroups) {
+            this.expandGroupsHandler();
+        }
         this.expandGroups = true;
     }
     /**
@@ -9212,6 +9228,11 @@ const KupDataTable = class {
         if ((_a = this.visibleColumns) === null || _a === void 0 ? void 0 : _a.length) {
             this.visibleColumns = this.visibleColumns.filter((colName) => colName != column.name);
         }
+        else {
+            this.visibleColumns = this.data.columns
+                .filter((col) => col.name != column.name && col.visible)
+                .map((col) => col.name);
+        }
         this.kupColumnRemove.emit({
             comp: this,
             id: this.rootElement.id,
@@ -9469,13 +9490,25 @@ const KupDataTable = class {
      * @param {string|number} rowIdentifier - Id (dataset) or indexe (rendered rows).
      */
     async scrollToRow(rowIdentifier) {
-        var _a;
         const id = rowIdentifier;
         const row = __classPrivateFieldGet$7(this, _KupDataTable_instances, "m", _KupDataTable_getRow).call(this, id);
         if (row) {
-            const idx = __classPrivateFieldGet$7(this, _KupDataTable_rows, "f").indexOf(row) - this.calculateScrollToRowOffset();
-            if (idx >= 1) {
-                (_a = __classPrivateFieldGet$7(this, _KupDataTable_rowsRefs, "f")[idx]) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
+            const start = (this.currentPage - 1) * this.currentRowsPerPage;
+            const end = this.currentPage * this.currentRowsPerPage;
+            const index = __classPrivateFieldGet$7(this, _KupDataTable_rows, "f").indexOf(row) % (end - start);
+            const scrollableContainer = __classPrivateFieldGet$7(this, _KupDataTable_tableAreaRef, "f");
+            const target = __classPrivateFieldGet$7(this, _KupDataTable_rowsRefs, "f")[index];
+            if (index >= 1) {
+                const headerHeight = parseInt(getComputedStyle(__classPrivateFieldGet$7(this, _KupDataTable_theadRef, "f")).height.replace('px', ''));
+                const targetRect = target.getBoundingClientRect();
+                const scrollableContainerRect = scrollableContainer.getBoundingClientRect();
+                const scrollOffset = scrollableContainer.scrollTop -
+                    headerHeight +
+                    (targetRect.top - scrollableContainerRect.top);
+                scrollableContainer.scrollTo({
+                    top: scrollOffset,
+                    behavior: 'instant',
+                });
             }
         }
     }
@@ -9516,6 +9549,20 @@ const KupDataTable = class {
             details: __classPrivateFieldGet$7(this, _KupDataTable_instances, "m", _KupDataTable_tooltipRequestHandler).call(this),
         });
     }
+    /**
+     * Trigger update from outside
+     * @param {string} commandId - When provided, will trigger onclick event of command instead of *UPDATE
+     */
+    async update(commandId) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (!commandId) {
+            __classPrivateFieldGet$7(this, _KupDataTable_handleUpdateClick, "f").call(this);
+        }
+        const command = (_h = (_d = (_c = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.setup) === null || _b === void 0 ? void 0 : _b.commands) === null || _c === void 0 ? void 0 : _c.find((cmd) => { var _a; return ((_a = cmd.obj) === null || _a === void 0 ? void 0 : _a.k) === commandId; })) !== null && _d !== void 0 ? _d : (_g = (_f = (_e = this.data) === null || _e === void 0 ? void 0 : _e.setup) === null || _f === void 0 ? void 0 : _f.commands) === null || _g === void 0 ? void 0 : _g.flatMap((cmd) => cmd.children).find((child) => { var _a; return ((_a = child === null || child === void 0 ? void 0 : child.obj) === null || _a === void 0 ? void 0 : _a.k) === commandId; })) !== null && _h !== void 0 ? _h : null;
+        if (command) {
+            __classPrivateFieldGet$7(this, _KupDataTable_handleUpdateClick, "f").call(this, command);
+        }
+    }
     //#region LISTENERS
     /*-------------------------------------------------*/
     /*                L i s t e n e r s                */
@@ -9621,6 +9668,14 @@ const KupDataTable = class {
         __classPrivateFieldGet$7(this, _KupDataTable_instances, "m", _KupDataTable_didRenderObservers).call(this);
         __classPrivateFieldGet$7(this, _KupDataTable_instances, "m", _KupDataTable_didRenderInteractables).call(this);
         __classPrivateFieldGet$7(this, _KupDataTable_instances, "m", _KupDataTable_hideShowColumnDropArea).call(this, false);
+        // scroll to row if current page contains selected rows
+        if (this.state.rowsPerPage != this.currentRowsPerPage) {
+            __classPrivateFieldGet$7(this, _KupDataTable_paginatedRows, "f").forEach((row) => {
+                if (this.selectedRows.includes(row)) {
+                    this.scrollToRow(row.id);
+                }
+            });
+        }
         if (this.headerIsPersistent &&
             this.tableHeight === undefined &&
             this.tableWidth === undefined) {
@@ -9973,12 +10028,9 @@ const KupDataTable = class {
         let elStyle = undefined;
         let actionWrapperWidth = undefined;
         __classPrivateFieldSet$3(this, _KupDataTable_sizedColumns, __classPrivateFieldGet$7(this, _KupDataTable_instances, "m", _KupDataTable_getSizedColumns).call(this), "f");
-        if (this.updatableData) {
-            __classPrivateFieldGet$7(this, _KupDataTable_kupManager, "f").keysBinding.unregister('enter');
-        }
         let rows = null;
         if (__classPrivateFieldGet$7(this, _KupDataTable_paginatedRowsLength, "f") === 0) {
-            rows = (h("tr", { key: '3fefb7b4f3206c0f4c8c5ea8f79b3c71834552ff', ref: (el) => __classPrivateFieldGet$7(this, _KupDataTable_rowsRefs, "f").push(el) }, h("td", { key: '5a983fc3f5f7040aada820e727aba3fd21e20462', colSpan: __classPrivateFieldGet$7(this, _KupDataTable_instances, "m", _KupDataTable_calculateColspan).call(this) }, this.emptyDataLabel)));
+            rows = (h("tr", { key: '73ab25510b36c211a9b526566f034d0238258dc9', ref: (el) => __classPrivateFieldGet$7(this, _KupDataTable_rowsRefs, "f").push(el) }, h("td", { key: 'a208779c47e4dbf1e07f2e376b29ab887826cba9', colSpan: __classPrivateFieldGet$7(this, _KupDataTable_instances, "m", _KupDataTable_calculateColspan).call(this) }, this.emptyDataLabel)));
         }
         else {
             rows = [];
@@ -10043,7 +10095,7 @@ const KupDataTable = class {
                 for (let i = 0; i < chipsData.length; i++) {
                     props.onIconClick.push(() => __classPrivateFieldGet$7(this, _KupDataTable_instances, "m", _KupDataTable_removeGroup).call(this, i));
                 }
-                groupChips = h(FChip, Object.assign({ key: '4cba4c25819eda0225aedddc814a122467e916d6' }, props));
+                groupChips = h(FChip, Object.assign({ key: 'b48f3f165d245d0521de81bd439edec989594b38' }, props));
             }
         }
         const tableClass = {
@@ -10075,7 +10127,7 @@ const KupDataTable = class {
         if (this.headerIsPersistent &&
             this.tableHeight === undefined &&
             this.tableWidth === undefined) {
-            stickyEl = (h("sticky-header", { key: '8a066069e55f0b641a651acdf80a5e07f7bfe61c', class: "hover-scrolling-child", hidden: !this.showHeader, ref: (el) => (__classPrivateFieldSet$3(this, _KupDataTable_stickyTheadRef, el, "f")) }, h("thead-sticky", { key: '8bcc3199698f8d175228b6f94f2bc2465584bdb2' }, h("tr-sticky", { key: '2f403b212d89bf66323e77e6a7d086ba63316476' }, stickyHeader))));
+            stickyEl = (h("sticky-header", { key: '8c5bc6abb9a3aab7a2c3e93b48b493a90fdcd663', class: "hover-scrolling-child", hidden: !this.showHeader, ref: (el) => (__classPrivateFieldSet$3(this, _KupDataTable_stickyTheadRef, el, "f")) }, h("thead-sticky", { key: 'f6c33df33b18a7c647db818171136fdec7cd80ee' }, h("tr-sticky", { key: '341ef08fb5646aebbae32175025d60f8135c087a' }, stickyHeader))));
         }
         let belowClass = 'below-wrapper';
         if (!!this.tableHeight || !!this.tableWidth) {
@@ -10121,7 +10173,7 @@ const KupDataTable = class {
         const useGlobalFilter = !this.legacyLook &&
             (this.globalFilter ||
                 this.getRows().length > __classPrivateFieldGet$7(this, _KupDataTable_DEFAULT_ROWS_FOR_GLOBAL_FILTER, "f"));
-        const compCreated = (h(Host, { key: 'd0dae93766bffab07e3b658f578b26bbaf6d734a', "onKup-drop": (e) => {
+        const compCreated = (h(Host, { key: '97ba3d4478eefd7a0e6f5aa512c9552507f0bb83', "onKup-drop": (e) => {
                 this.kupDataTableDrop.emit(e.detail);
             }, "onKup-cell-input": (e) => {
                 autoselectOnAction(e);
@@ -10136,11 +10188,11 @@ const KupDataTable = class {
                 this.kupDataTableObjectFieldOpenSearchMenu.emit(e.detail);
             }, "onKup-objectfield-selectedmenuitem": (e) => {
                 this.kupDataTableObjectFieldSelectedMenuItem.emit(e.detail);
-            } }, h("style", { key: '141fd050f5961523ff13fa1f41384f2ea50c8aac' }, __classPrivateFieldGet$7(this, _KupDataTable_kupManager, "f").theme.setKupStyle(this.rootElement)), this.updatableData ? __classPrivateFieldGet$7(this, _KupDataTable_instances, "m", _KupDataTable_renderUpdateButtons).call(this) : null, h("div", { key: '42664bbf87261728923f62ccfe0984d9fcf2d69c', id: componentWrapperId, class: wrapClass }, h("div", { key: '648d595d25723624dcd19c155c21660e75bf4582', class: "group-wrapper" }, groupChips), h("div", { key: 'c0505cdd9b8d54005cce1b5240166c80c41263fc', class: "actions-wrapper", style: actionWrapperWidth }, useGlobalFilter ? (h("div", { id: "global-filter" }, h(FTextField, { fullWidth: true, icon: KupThemeIconValues.SEARCH, label: __classPrivateFieldGet$7(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), sizing: KupComponentSizing.EXTRA_SMALL, value: this.globalFilterValue, onInput: (event) => {
+            } }, h("style", { key: '79b085a799d77cdb6c4fc1aa27ab4a399f589361' }, __classPrivateFieldGet$7(this, _KupDataTable_kupManager, "f").theme.setKupStyle(this.rootElement)), this.updatableData ? __classPrivateFieldGet$7(this, _KupDataTable_instances, "m", _KupDataTable_renderUpdateButtons).call(this) : null, h("div", { key: 'd2bc7d721927b76b71a9dc7c30277cb15e4e55e0', id: componentWrapperId, class: wrapClass }, h("div", { key: '1f05f6ec24e005b51a75566f40ef2ec5c8c6a326', class: "group-wrapper" }, groupChips), h("div", { key: 'ff34915fbead73c720150f8638f1d3b63cacce4f', class: "actions-wrapper", style: actionWrapperWidth }, useGlobalFilter ? (h("div", { id: "global-filter" }, h(FTextField, { fullWidth: true, icon: KupThemeIconValues.SEARCH, label: __classPrivateFieldGet$7(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), sizing: KupComponentSizing.EXTRA_SMALL, value: this.globalFilterValue, onInput: (event) => {
                 const t = event.target;
                 window.clearTimeout(__classPrivateFieldGet$7(this, _KupDataTable_globalFilterTimeout, "f"));
                 __classPrivateFieldSet$3(this, _KupDataTable_globalFilterTimeout, window.setTimeout(() => __classPrivateFieldGet$7(this, _KupDataTable_instances, "m", _KupDataTable_onGlobalFilterChange).call(this, t), 600, t), "f");
-            } }))) : null, h("div", { key: 'a36bc85d4a044ba36971f655a9dc7c12f81b2dd5', class: "above-wrapper paginator-top" }, paginatorTop), this.insertMode !== '' &&
+            } }))) : null, h("div", { key: '577f5abb16f1a83d95111176e8d1a498a174b3b0', class: "above-wrapper paginator-top" }, paginatorTop), this.insertMode !== '' &&
             this.selectedRows.length > 0 ? (h(FButton, { icon: "save", onClick: () => {
                 this.kupSave.emit({
                     comp: this,
@@ -10190,9 +10242,9 @@ const KupDataTable = class {
                     this.data.rows.unshift(row);
                     await this.refresh(true);
                 }
-            }, sizing: KupComponentSizing.MEDIUM, styling: FButtonStyling.RAISED, title: "Insert row", wrapperClass: "insert-button" })) : null), h("div", { key: '42c4af845508b7c5d7d79ff6ad040f7a75d03485', class: "droparea", ref: (el) => (__classPrivateFieldSet$3(this, _KupDataTable_dropareaRef, el, "f")) }, this.showGroups ? __classPrivateFieldGet$7(this, _KupDataTable_instances, "m", _KupDataTable_columnGroupArea).call(this) : null, this.removableColumns
+            }, sizing: KupComponentSizing.MEDIUM, styling: FButtonStyling.RAISED, title: "Insert row", wrapperClass: "insert-button" })) : null), h("div", { key: '78b38e239fcac9d73b210eb8752cf55fcacb9b1d', class: "droparea", ref: (el) => (__classPrivateFieldSet$3(this, _KupDataTable_dropareaRef, el, "f")) }, this.showGroups ? __classPrivateFieldGet$7(this, _KupDataTable_instances, "m", _KupDataTable_columnGroupArea).call(this) : null, this.removableColumns
             ? __classPrivateFieldGet$7(this, _KupDataTable_instances, "m", _KupDataTable_columnRemoveArea).call(this)
-            : null), h("div", { key: 'efa822fc8f31de6b9ab5f1ca7320231ab99f86a7', style: elStyle, class: belowClass, ref: (el) => (__classPrivateFieldSet$3(this, _KupDataTable_tableAreaRef, el, "f")) }, this.showCustomization
+            : null), h("div", { key: '0270f09b310618dd8ab5665bcfcefd890d85739a', style: elStyle, class: belowClass, ref: (el) => (__classPrivateFieldSet$3(this, _KupDataTable_tableAreaRef, el, "f")) }, this.showCustomization
             ? [
                 h("div", { class: "settings-trigger", onClick: () => {
                         __classPrivateFieldGet$7(this, _KupDataTable_instances, "m", _KupDataTable_onCustomSettingsClick).call(this);
@@ -10201,7 +10253,7 @@ const KupDataTable = class {
                     } }, h(FImage, { color: `var(${KupThemeColorValues.TITLE})`, resource: "settings", sizeX: "10px" })),
                 this.renderCustomizePanel(),
             ]
-            : null, h("table", { key: '3b33abb9f4f87c6697015e38985ecbb5c62142d7', class: tableClass, ref: (el) => (__classPrivateFieldSet$3(this, _KupDataTable_tableRef, el, "f")), onKeyDown: (e) => __classPrivateFieldGet$7(this, _KupDataTable_onKupKeyDown, "f").call(this, e), onMouseLeave: (ev) => {
+            : null, h("table", { key: 'fefe6e4a726947617cc80124c0cb8afd436dec59', class: tableClass, ref: (el) => (__classPrivateFieldSet$3(this, _KupDataTable_tableRef, el, "f")), onKeyDown: (e) => __classPrivateFieldGet$7(this, _KupDataTable_onKupKeyDown, "f").call(this, e), onMouseLeave: (ev) => {
                 ev.stopPropagation();
             }, onPointerDown: (e) => {
                 __classPrivateFieldSet$3(this, _KupDataTable_lastPointerDetails, __classPrivateFieldGet$7(this, _KupDataTable_instances, "m", _KupDataTable_getEventDetails).call(this, __classPrivateFieldGet$7(this, _KupDataTable_kupManager, "f").getEventPath(e.target, this.rootElement), e), "f");
@@ -10209,7 +10261,7 @@ const KupDataTable = class {
                 __classPrivateFieldSet$3(this, _KupDataTable_lastPointerDetails, __classPrivateFieldGet$7(this, _KupDataTable_instances, "m", _KupDataTable_getEventDetails).call(this, __classPrivateFieldGet$7(this, _KupDataTable_kupManager, "f").getEventPath(e.target, this.rootElement), e), "f");
             }, onContextMenu: (e) => {
                 e.preventDefault();
-            } }, h("thead", { key: '11d332d763576d69adf27fe8ab2b060e77cdd206', hidden: !this.showHeader, ref: (el) => (__classPrivateFieldSet$3(this, _KupDataTable_theadRef, el, "f")) }, h("tr", { key: '51e0ebbde7020a9a211daf7bbbeba8a13a72694f' }, header)), h("tbody", { key: 'cee9d5cbe10415f2f574a904ab5adac85c99bec8' }, rows), this.showFooter && this.renderFooter()), stickyEl), paginatorBottom)));
+            } }, h("thead", { key: 'f78b9dc9e18ca0e9cbc9f563bda07f3ad20d7a76', hidden: !this.showHeader, ref: (el) => (__classPrivateFieldSet$3(this, _KupDataTable_theadRef, el, "f")) }, h("tr", { key: '728fe1c1d3b292d70163aabcd2a7438a87151263' }, header)), h("tbody", { key: 'ffd21db3ef0ee1dcd734b8f73974de8ee8e0c02d' }, rows), this.showFooter && this.renderFooter()), stickyEl), paginatorBottom)));
         __classPrivateFieldGet$7(this, _KupDataTable_kupManager, "f").perfMonitoring.measure('componentRender', 'kup-data-table');
         return compCreated;
     }
@@ -11818,7 +11870,6 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     if (this.currentPage > numberOfPages) {
         // reset page
         this.currentPage = 1;
-        this.resetCurrentPage();
     }
 }, _KupDataTable_setCellEditability = function _KupDataTable_setCellEditability(column, row, cell) {
     if (column.useAs) {
@@ -11996,6 +12047,12 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     const newPage = pageChange(pageNumber, __classPrivateFieldGet$7(this, _KupDataTable_rowsLength, "f"), this.currentRowsPerPage);
     if (newPage) {
         this.currentPage = newPage;
+        // scroll to row if current page contains selected rows
+        __classPrivateFieldGet$7(this, _KupDataTable_paginatedRows, "f").forEach((row) => {
+            if (this.selectedRows.includes(row)) {
+                this.scrollToRow(row.id);
+            }
+        });
     }
 }, _KupDataTable_handleRowsPerPageChange = function _KupDataTable_handleRowsPerPageChange(rowsNumber) {
     const newRows = rowsPerPageChange(rowsNumber, __classPrivateFieldGet$7(this, _KupDataTable_rowsLength, "f"));
@@ -12003,7 +12060,7 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
         this.currentRowsPerPage = newRows;
         __classPrivateFieldGet$7(this, _KupDataTable_instances, "m", _KupDataTable_adjustPaginator).call(this);
     }
-}, _KupDataTable_onRowClick = function _KupDataTable_onRowClick(row, td, emitEvent) {
+}, _KupDataTable_onRowClick = function _KupDataTable_onRowClick(row, td, emitEvent, isKeyboardNav = false) {
     // selecting row
     if (!row.unselectable) {
         switch (this.selection) {
@@ -12042,6 +12099,7 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
                 selectedRows: this.selectedRows,
                 clickedRow: row,
                 clickedColumn,
+                isKeyboardNav,
             });
         }
     }
@@ -12240,6 +12298,12 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
         const sortedName = this.visibleColumns.splice(sIdx, 1)[0];
         this.visibleColumns.splice(rIdx, 0, sortedName);
     }
+    else {
+        // // Adds the sorted column to visibleColumns to preserve the current column order.
+        this.visibleColumns = this.data.columns
+            .filter((col) => col.visible)
+            .map((col) => col.name);
+    }
 }, _KupDataTable_moveSortedColumns = function _KupDataTable_moveSortedColumns(columns, receivingColumnIndex, sortedColumnIndex) {
     const remove = columns.splice(sortedColumnIndex, 1);
     columns.splice(receivingColumnIndex, 0, remove[0]);
@@ -12632,6 +12696,10 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
             cell.data = Object.assign(Object.assign({}, cell.data), { legacyLook: this.legacyLook, sizing: this.density === 'extra_dense'
                     ? 'extra-small'
                     : (_a = cell.data) === null || _a === void 0 ? void 0 : _a.sizing });
+            if (!cell.isEditable) {
+                cell.cssClass =
+                    __classPrivateFieldGet$7(this, _KupDataTable_kupManager, "f").data.cell.getObjectRelatedStyleClasses(cell.obj, cell.cssClass);
+            }
             const fcell = Object.assign(Object.assign({}, __classPrivateFieldGet$7(this, _KupDataTable_kupManager, "f").data.cell.buildFCell(cell, currentColumn, row)), { component: this, density: this.density, editable: this.editableData || this.updatableData, indents: indend, previousValue: hideValuesRepetitions && previousRow
                     ? previousRow.cells[name].value
                     : undefined, renderKup: this.lazyLoadCells, cellActionIcon: __classPrivateFieldGet$7(this, _KupDataTable_kupManager, "f").data.cell.hasActionCell(cell, (_b = this.commands) !== null && _b !== void 0 ? _b : [])
@@ -12750,7 +12818,6 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     }
 }, _KupDataTable_handleColumnGroup = function _KupDataTable_handleColumnGroup(column2group) {
     // Get sorted column current position
-    this.getVisibleColumns();
     const columnX = this.getVisibleColumns().find((col) => col.name === column2group.name &&
         col.title === column2group.title);
     if (columnX) {
@@ -12934,8 +13001,7 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
             this.showGrid = grid;
         } })));
 }, _KupDataTable_renderCommandButton = function _KupDataTable_renderCommandButton(commandObj, styling) {
-    var _a;
-    return (h("kup-button", { styling: styling, "onKup-button-click": () => __classPrivateFieldGet$7(this, _KupDataTable_handleUpdateClick, "f").call(this, commandObj), keyShortcut: (_a = commandObj.data) === null || _a === void 0 ? void 0 : _a.keyShortcut, icon: commandObj.icon, label: commandObj.value }));
+    return (h("kup-button", { styling: styling, "onKup-button-click": () => __classPrivateFieldGet$7(this, _KupDataTable_handleUpdateClick, "f").call(this, commandObj), icon: commandObj.icon, placeholderIcon: commandObj.placeholderIcon, label: commandObj.value }));
 }, _KupDataTable_renderCommandDropDownButton = function _KupDataTable_renderCommandDropDownButton(commandObj, styling) {
     const data = {
         'kup-list': {
@@ -19018,6 +19084,7 @@ const KupTree = class {
         this.kupTreeNodeDblClick = createEvent(this, "kup-tree-nodedblclick", 6);
         this.kupTreeDynamicMassExpansion = createEvent(this, "kup-tree-dynamicmassexpansion", 6);
         this.kupColumnRemove = createEvent(this, "kup-tree-columnremove", 6);
+        this.kupTreeCellClick = createEvent(this, "kup-tree-cell-click", 6);
         _KupTree_instances.add(this);
         /*-------------------------------------------------*/
         /*                   S t a t e s                   */
@@ -19577,6 +19644,7 @@ const KupTree = class {
     }
     // When a TreeNode can be selected
     hdlTreeNodeClick(e, treeNodeData, treeNodePath) {
+        var _a;
         if (this.expansionMode.toLowerCase() ===
             KupTreeExpansionMode.DROPDOWN ||
             (this.expansionMode.toLowerCase() === KupTreeExpansionMode.NODE &&
@@ -19594,13 +19662,18 @@ const KupTree = class {
                 this.selectedNode = treeNodePath
                     .split(',')
                     .map((treeNodeIndex) => parseInt(treeNodeIndex));
-                this.kupTreeNodeSelected.emit({
-                    comp: this,
-                    id: this.rootElement.id,
-                    treeNodePath: this.selectedNode,
-                    treeNode: treeNodeData,
-                    columnName: td ? td.dataset.column : null,
-                });
+                const columnName = td ? td.dataset.column : null;
+                const column = (_a = this.columns) === null || _a === void 0 ? void 0 : _a.find((c) => c.name == columnName);
+                if (!columnName ||
+                    !__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.isButton(column === null || column === void 0 ? void 0 : column.obj)) {
+                    this.kupTreeNodeSelected.emit({
+                        comp: this,
+                        id: this.rootElement.id,
+                        treeNodePath: this.selectedNode,
+                        treeNode: treeNodeData,
+                        columnName,
+                    });
+                }
             }
         }
         // If KupTreeExpansionMode.NODE then click is a collapse/expand click
@@ -19961,6 +20034,13 @@ const KupTree = class {
                     const cell = treeNodeData.cells[column.name]
                         ? treeNodeData.cells[column.name]
                         : null;
+                    if (treeNodeData.style) {
+                        cell.style = treeNodeData.style;
+                    }
+                    if (!cell.isEditable) {
+                        cell.cssClass =
+                            __classPrivateFieldGet(this, _KupTree_kupManager, "f").data.cell.getObjectRelatedStyleClasses(cell.obj, cell.cssClass);
+                    }
                     const cellProps = {
                         cell: cell,
                         column: column,
@@ -20340,17 +20420,19 @@ const KupTree = class {
             this.data &&
             this.data.length &&
             this.data.length > 0) {
-            filterField = (h("div", { key: 'e68236c35b28dc74903b90003d4a1240b569f366', id: "global-filter" }, h("kup-text-field", { key: '526bdfb87cd35eb6168a1bf3334fde8323e45be1', fullWidth: true, label: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), sizing: KupComponentSizing.EXTRA_SMALL, icon: KupThemeIconValues.SEARCH, initialValue: this.globalFilterValue, "onkup-textfield-input": (event) => {
+            filterField = (h("div", { key: 'b9095e93e4a60648ccda218cbc7fcd738a108d8a', id: "global-filter" }, h("kup-text-field", { key: 'f98a0639052c43ce4e0ef13296136e467182ac4e', fullWidth: true, label: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), sizing: KupComponentSizing.EXTRA_SMALL, icon: KupThemeIconValues.SEARCH, initialValue: this.globalFilterValue, "onkup-textfield-input": (event) => {
                     window.clearTimeout(this.globalFilterTimeout);
                     this.globalFilterTimeout = window.setTimeout(() => this.onGlobalFilterChange(event), 600);
                 } })));
         }
-        return (h(Host, { key: 'c369bdb6e28db1beb946f3a715a8421fe3e2a701' }, h("style", { key: '82c896b8da6ef3e31158198388bb0664096b2c49' }, __classPrivateFieldGet(this, _KupTree_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'f2d74776516574f96aab1ca357f9da575a577bfd', id: componentWrapperId, class: wrapperClass, style: wrapperStyle }, filterField, h("div", { key: '7944337733b78bed4ac37052fff0a03d4a7e03b0', class: "wrapper", ref: (el) => (this.treeWrapperRef =
-                el) }, h("table", { key: 'd63479c278a53d922ad04aa335dd1744a19def0a', class: "kup-tree", "data-show-columns": this.showColumns, onContextMenu: (e) => {
+        return (h(Host, { key: '15ef1ec888317912adcf8db2df390dbf06b906a5', "onKup-cell-click": (e) => {
+                this.kupTreeCellClick.emit(e.detail);
+            } }, h("style", { key: '46df5fad7874e3c272adcc78e909ee6035536ccc' }, __classPrivateFieldGet(this, _KupTree_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'd61be1bdc5e5e659a7169fc70dbf74ec09318ae2', id: componentWrapperId, class: wrapperClass, style: wrapperStyle }, filterField, h("div", { key: 'b35a3be92fdbf4f30e6e2b87fec7a7228db5aaa1', class: "wrapper", ref: (el) => (this.treeWrapperRef =
+                el) }, h("table", { key: '7bcd57a6d631589197c28de1088f0689bcaff46d', class: "kup-tree", "data-show-columns": this.showColumns, onContextMenu: (e) => {
                 e.preventDefault();
-            } }, h("thead", { key: '98aa898b8f23b08d2e0813bb86f64c7d51a6c246', class: {
+            } }, h("thead", { key: 'a0f63e145ce0f6c2c0f3f612b06edbf08ece937e', class: {
                 'header--is-visible': visibleHeader,
-            } }, h("tr", { key: 'cba9c76ebbaa03e58069683bff831507ce51e0fa' }, visibleHeader ? this.renderHeader() : null)), h("tbody", { key: 'f4a869f9406a8c4a7fd9158cca6db016054ddea8' }, treeNodes), (this.showFooter || this.hasTotals()) &&
+            } }, h("tr", { key: '5c3dce5b4828fdf00e91354aa9308798a3bf282d' }, visibleHeader ? this.renderHeader() : null)), h("tbody", { key: '2599e820e154176730bc67879708d68120eb4579' }, treeNodes), (this.showFooter || this.hasTotals()) &&
             this.columns
             ? this.renderFooter()
             : null)))));