@sme.up/ketchup 10.2.0 → 10.3.0

package/dist/collection/components/kup-button/kup-button.js

@@ -32,7 +32,6 @@ export class KupButton {
         this.toggable = false;
         this.trailingIcon = false;
         this.sizing = KupComponentSizing.SMALL;
-        this.keyShortcut = undefined;
     }
     onKupBlur() {
         this.kupBlur.emit({
@@ -115,9 +114,6 @@ export class KupButton {
         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);
@@ -187,9 +183,6 @@ export class KupButton {
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);
-        if (this.keyShortcut) {
-            this.kupManager.keysBinding.unregister(this.keyShortcut);
-        }
     }
     static get is() { return "kup-button"; }
     static get encapsulation() { return "shadow"; }
@@ -540,23 +533,6 @@ export class KupButton {
                 "attribute": "sizing",
                 "reflect": false,
                 "defaultValue": "KupComponentSizing.SMALL"
-            },
-            "keyShortcut": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "key-shortcut",
-                "reflect": false
             }
         };
     }

package/dist/collection/components/kup-combobox/kup-combobox-declarations.js

@@ -17,4 +17,5 @@ export 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 = {}));

package/dist/collection/components/kup-combobox/kup-combobox.js

@@ -62,6 +62,7 @@ export class KupCombobox {
         this.sizing = KupComponentSizing.SMALL;
         this.trailingIcon = false;
         this.showMarker = false;
+        this.legacyLook = false;
     }
     onKupBlur() {
         if (!__classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_isListOpened).call(this)) {
@@ -306,10 +307,11 @@ export class KupCombobox {
                 ? 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(this, _KupCombobox_elStyle, "f") }, h("style", { key: 'dfc874e6d1f9facc181fd7d05cb3e3a981d18daf' }, __classPrivateFieldGet(this, _KupCombobox_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '47eca4f5d10c0be8d4910b6028abed16de4c0b8e', id: componentWrapperId, style: __classPrivateFieldGet(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(this, _KupCombobox_elStyle, "f") }, h("style", { key: '2115e4d44f5d28d72de809e98818e81e14f955b3' }, __classPrivateFieldGet(this, _KupCombobox_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'd907dc96d2dbf1c680ce181f868be5daea0f6f1f', id: componentWrapperId, style: __classPrivateFieldGet(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(this, _KupCombobox_instances, "m", _KupCombobox_prepList).call(this)));
     }
@@ -756,6 +758,27 @@ export class KupCombobox {
                 "attribute": "show-marker",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "legacyLook": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Allows legacyLook aspect in CMB."
+                },
+                "attribute": "legacy-look",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/kup-data-table/kup-data-table.js

@@ -169,10 +169,11 @@ export class KupDataTable {
         });
         //======== Event Listeners ========
         _KupDataTable_horNav.set(this, (isRight) => {
-            if (!__classPrivateFieldGet(this, _KupDataTable_lastFocusedCell, "f")) {
+            if (!__classPrivateFieldGet(this, _KupDataTable_lastFocusedCell, "f") ||
+                this.selection == SelectionMode.MULTIPLE) {
                 return;
             }
-            __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_resetSelectedRows).call(this, true);
+            //this.#resetSelectedRows(true);
             const tr = __classPrivateFieldGet(this, _KupDataTable_lastFocusedCell, "f").element.closest('tr:not(.group)');
             const cells = tr.querySelectorAll('.f-cell');
             const oldIndex = Array.from(cells).indexOf(__classPrivateFieldGet(this, _KupDataTable_lastFocusedCell, "f").element);
@@ -185,14 +186,15 @@ export class KupDataTable {
             }
             const focused = cells[newIndex];
             const focusedProps = focused['kup-get-cell-props']();
-            __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_onRowClick).call(this, focusedProps.row, focused.closest('td'), false);
+            __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_onRowClick).call(this, focusedProps.row, focused.closest('td'), true, true);
             __classPrivateFieldSet(this, _KupDataTable_lastFocusedCell, focusedProps.cell, "f");
         });
         _KupDataTable_verNav.set(this, (isDown) => {
-            if (!__classPrivateFieldGet(this, _KupDataTable_lastFocusedCell, "f")) {
+            if (!__classPrivateFieldGet(this, _KupDataTable_lastFocusedCell, "f") ||
+                this.selection == SelectionMode.MULTIPLE) {
                 return;
             }
-            __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_resetSelectedRows).call(this, true);
+            //this.#resetSelectedRows(true);
             const tr = __classPrivateFieldGet(this, _KupDataTable_lastFocusedCell, "f").element.closest('tr:not(.group)');
             const cellXIndex = Array.from(tr.querySelectorAll('.f-cell')).indexOf(__classPrivateFieldGet(this, _KupDataTable_lastFocusedCell, "f").element);
             const rows = tr.parentElement.querySelectorAll('tr:not(.group)');
@@ -209,7 +211,7 @@ export class KupDataTable {
             const focused = focusedCells[cellXIndex];
             const focusedProps = focused['kup-get-cell-props']();
             __classPrivateFieldSet(this, _KupDataTable_lastFocusedCell, focusedProps.cell, "f");
-            __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_onRowClick).call(this, focusedProps.row, focused.closest('td'), false);
+            __classPrivateFieldGet(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';
@@ -509,6 +511,9 @@ export class KupDataTable {
      * Collapses all groups.
      */
     async collapseAll() {
+        if (!this.expandGroups) {
+            this.expandGroupsHandler();
+        }
         this.expandGroups = false;
     }
     /**
@@ -608,6 +613,9 @@ export class KupDataTable {
      * Expands all groups.
      */
     async expandAll() {
+        if (this.expandGroups) {
+            this.expandGroupsHandler();
+        }
         this.expandGroups = true;
     }
     /**
@@ -643,6 +651,11 @@ export class KupDataTable {
         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,
@@ -904,7 +917,10 @@ export class KupDataTable {
         const id = rowIdentifier;
         const row = __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_getRow).call(this, id);
         if (row) {
-            const idx = __classPrivateFieldGet(this, _KupDataTable_rows, "f").indexOf(row) - this.calculateScrollToRowOffset();
+            const start = (this.currentPage - 1) * this.currentRowsPerPage;
+            const end = this.currentPage * this.currentRowsPerPage;
+            const index = __classPrivateFieldGet(this, _KupDataTable_rows, "f").indexOf(row) % (end - start);
+            const idx = index - this.calculateScrollToRowOffset();
             if (idx >= 1) {
                 (_a = __classPrivateFieldGet(this, _KupDataTable_rowsRefs, "f")[idx]) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
             }
@@ -947,6 +963,20 @@ export class KupDataTable {
             details: __classPrivateFieldGet(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(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(this, _KupDataTable_handleUpdateClick, "f").call(this, command);
+        }
+    }
     //#region LISTENERS
     /*-------------------------------------------------*/
     /*                L i s t e n e r s                */
@@ -1052,6 +1082,14 @@ export class KupDataTable {
         __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_didRenderObservers).call(this);
         __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_didRenderInteractables).call(this);
         __classPrivateFieldGet(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(this, _KupDataTable_paginatedRows, "f").forEach((row) => {
+                if (this.selectedRows.includes(row)) {
+                    this.scrollToRow(row.id);
+                }
+            });
+        }
         if (this.headerIsPersistent &&
             this.tableHeight === undefined &&
             this.tableWidth === undefined) {
@@ -1406,12 +1444,9 @@ export class KupDataTable {
         let elStyle = undefined;
         let actionWrapperWidth = undefined;
         __classPrivateFieldSet(this, _KupDataTable_sizedColumns, __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_getSizedColumns).call(this), "f");
-        if (this.updatableData) {
-            __classPrivateFieldGet(this, _KupDataTable_kupManager, "f").keysBinding.unregister('enter');
-        }
         let rows = null;
         if (__classPrivateFieldGet(this, _KupDataTable_paginatedRowsLength, "f") === 0) {
-            rows = (h("tr", { key: '3fefb7b4f3206c0f4c8c5ea8f79b3c71834552ff', ref: (el) => __classPrivateFieldGet(this, _KupDataTable_rowsRefs, "f").push(el) }, h("td", { key: '5a983fc3f5f7040aada820e727aba3fd21e20462', colSpan: __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_calculateColspan).call(this) }, this.emptyDataLabel)));
+            rows = (h("tr", { key: '7eef3ae6950132812cd62cdab017b45c3e31b9ed', ref: (el) => __classPrivateFieldGet(this, _KupDataTable_rowsRefs, "f").push(el) }, h("td", { key: '7f7c90376e2069e412fb7a993f6449e0785948a5', colSpan: __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_calculateColspan).call(this) }, this.emptyDataLabel)));
         }
         else {
             rows = [];
@@ -1476,7 +1511,7 @@ export class KupDataTable {
                 for (let i = 0; i < chipsData.length; i++) {
                     props.onIconClick.push(() => __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_removeGroup).call(this, i));
                 }
-                groupChips = h(FChip, Object.assign({ key: '4cba4c25819eda0225aedddc814a122467e916d6' }, props));
+                groupChips = h(FChip, Object.assign({ key: 'ddf47ea9fa13713dda0d38a74745bf5f38d5fb20' }, props));
             }
         }
         const tableClass = {
@@ -1508,7 +1543,7 @@ export class KupDataTable {
         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(this, _KupDataTable_stickyTheadRef, el, "f")) }, h("thead-sticky", { key: '8bcc3199698f8d175228b6f94f2bc2465584bdb2' }, h("tr-sticky", { key: '2f403b212d89bf66323e77e6a7d086ba63316476' }, stickyHeader))));
+            stickyEl = (h("sticky-header", { key: '7c20a020914556afb9bf43d55fb44785314adc8d', class: "hover-scrolling-child", hidden: !this.showHeader, ref: (el) => (__classPrivateFieldSet(this, _KupDataTable_stickyTheadRef, el, "f")) }, h("thead-sticky", { key: '23f35a1c9fe85161340aac63bf57b90895757330' }, h("tr-sticky", { key: '6da73ed8cb9d86f775d37530025a6781cdd86577' }, stickyHeader))));
         }
         let belowClass = 'below-wrapper';
         if (!!this.tableHeight || !!this.tableWidth) {
@@ -1554,7 +1589,7 @@ export class KupDataTable {
         const useGlobalFilter = !this.legacyLook &&
             (this.globalFilter ||
                 this.getRows().length > __classPrivateFieldGet(this, _KupDataTable_DEFAULT_ROWS_FOR_GLOBAL_FILTER, "f"));
-        const compCreated = (h(Host, { key: 'd0dae93766bffab07e3b658f578b26bbaf6d734a', "onKup-drop": (e) => {
+        const compCreated = (h(Host, { key: 'dd42df36afe474f8f9d686a210c5dc84ab97a824', "onKup-drop": (e) => {
                 this.kupDataTableDrop.emit(e.detail);
             }, "onKup-cell-input": (e) => {
                 autoselectOnAction(e);
@@ -1569,11 +1604,11 @@ export class KupDataTable {
                 this.kupDataTableObjectFieldOpenSearchMenu.emit(e.detail);
             }, "onKup-objectfield-selectedmenuitem": (e) => {
                 this.kupDataTableObjectFieldSelectedMenuItem.emit(e.detail);
-            } }, h("style", { key: '141fd050f5961523ff13fa1f41384f2ea50c8aac' }, __classPrivateFieldGet(this, _KupDataTable_kupManager, "f").theme.setKupStyle(this.rootElement)), this.updatableData ? __classPrivateFieldGet(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(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), sizing: KupComponentSizing.EXTRA_SMALL, value: this.globalFilterValue, onInput: (event) => {
+            } }, h("style", { key: '1a75edc1127c828ddbf65871b317a4e252a56817' }, __classPrivateFieldGet(this, _KupDataTable_kupManager, "f").theme.setKupStyle(this.rootElement)), this.updatableData ? __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_renderUpdateButtons).call(this) : null, h("div", { key: 'cd725be0317588ca73a9ba494a943a053ec04944', id: componentWrapperId, class: wrapClass }, h("div", { key: '748e91f02e5be185e47495d0fe1e837b43c4458b', class: "group-wrapper" }, groupChips), h("div", { key: '835ec96f8d12b1a0b56ccd9b41e92af93b74f87f', class: "actions-wrapper", style: actionWrapperWidth }, useGlobalFilter ? (h("div", { id: "global-filter" }, h(FTextField, { fullWidth: true, icon: KupThemeIconValues.SEARCH, label: __classPrivateFieldGet(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), sizing: KupComponentSizing.EXTRA_SMALL, value: this.globalFilterValue, onInput: (event) => {
                 const t = event.target;
                 window.clearTimeout(__classPrivateFieldGet(this, _KupDataTable_globalFilterTimeout, "f"));
                 __classPrivateFieldSet(this, _KupDataTable_globalFilterTimeout, window.setTimeout(() => __classPrivateFieldGet(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: 'a673be7f9896b48cbc9a47d13b0190331218714c', class: "above-wrapper paginator-top" }, paginatorTop), this.insertMode !== '' &&
             this.selectedRows.length > 0 ? (h(FButton, { icon: "save", onClick: () => {
                 this.kupSave.emit({
                     comp: this,
@@ -1623,9 +1658,9 @@ export class KupDataTable {
                     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(this, _KupDataTable_dropareaRef, el, "f")) }, this.showGroups ? __classPrivateFieldGet(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: '4b9a4bd09ed310f5cfe958cbceaa089b832a5317', class: "droparea", ref: (el) => (__classPrivateFieldSet(this, _KupDataTable_dropareaRef, el, "f")) }, this.showGroups ? __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_columnGroupArea).call(this) : null, this.removableColumns
             ? __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_columnRemoveArea).call(this)
-            : null), h("div", { key: 'efa822fc8f31de6b9ab5f1ca7320231ab99f86a7', style: elStyle, class: belowClass, ref: (el) => (__classPrivateFieldSet(this, _KupDataTable_tableAreaRef, el, "f")) }, this.showCustomization
+            : null), h("div", { key: 'e78f7ff2cd55da1cc6caaed010545d57bbe7c397', style: elStyle, class: belowClass, ref: (el) => (__classPrivateFieldSet(this, _KupDataTable_tableAreaRef, el, "f")) }, this.showCustomization
             ? [
                 h("div", { class: "settings-trigger", onClick: () => {
                         __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_onCustomSettingsClick).call(this);
@@ -1634,7 +1669,7 @@ export class KupDataTable {
                     } }, h(FImage, { color: `var(${KupThemeColorValues.TITLE})`, resource: "settings", sizeX: "10px" })),
                 this.renderCustomizePanel(),
             ]
-            : null, h("table", { key: '3b33abb9f4f87c6697015e38985ecbb5c62142d7', class: tableClass, ref: (el) => (__classPrivateFieldSet(this, _KupDataTable_tableRef, el, "f")), onKeyDown: (e) => __classPrivateFieldGet(this, _KupDataTable_onKupKeyDown, "f").call(this, e), onMouseLeave: (ev) => {
+            : null, h("table", { key: '1708aaac7a54c1fbe304afbe73afc6f16b5d8a1d', class: tableClass, ref: (el) => (__classPrivateFieldSet(this, _KupDataTable_tableRef, el, "f")), onKeyDown: (e) => __classPrivateFieldGet(this, _KupDataTable_onKupKeyDown, "f").call(this, e), onMouseLeave: (ev) => {
                 ev.stopPropagation();
             }, onPointerDown: (e) => {
                 __classPrivateFieldSet(this, _KupDataTable_lastPointerDetails, __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_getEventDetails).call(this, __classPrivateFieldGet(this, _KupDataTable_kupManager, "f").getEventPath(e.target, this.rootElement), e), "f");
@@ -1642,7 +1677,7 @@ export class KupDataTable {
                 __classPrivateFieldSet(this, _KupDataTable_lastPointerDetails, __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_getEventDetails).call(this, __classPrivateFieldGet(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(this, _KupDataTable_theadRef, el, "f")) }, h("tr", { key: '51e0ebbde7020a9a211daf7bbbeba8a13a72694f' }, header)), h("tbody", { key: 'cee9d5cbe10415f2f574a904ab5adac85c99bec8' }, rows), this.showFooter && this.renderFooter()), stickyEl), paginatorBottom)));
+            } }, h("thead", { key: '7bcd8e5d8a458c8e7ca4c338b02e4ba4b56aae15', hidden: !this.showHeader, ref: (el) => (__classPrivateFieldSet(this, _KupDataTable_theadRef, el, "f")) }, h("tr", { key: 'b028215a4df0c4613d06ecce1aed1efcf094ec3a' }, header)), h("tbody", { key: 'bdc9191bd0c388075b674644114b65e8d0d0ebff' }, rows), this.showFooter && this.renderFooter()), stickyEl), paginatorBottom)));
         __classPrivateFieldGet(this, _KupDataTable_kupManager, "f").perfMonitoring.measure('componentRender', 'kup-data-table');
         return compCreated;
     }
@@ -4227,6 +4262,30 @@ export class KupDataTable {
                     "tags": []
                 }
             },
+            "update": {
+                "complexType": {
+                    "signature": "(commandId?: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "commandId",
+                            "type": "string",
+                            "docs": "- When provided, will trigger onclick event of command instead of *UPDATE"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Trigger update from outside",
+                    "tags": [{
+                            "name": "param",
+                            "text": "commandId - When provided, will trigger onclick event of command instead of *UPDATE"
+                        }]
+                }
+            },
             "getInternalState": {
                 "complexType": {
                     "signature": "() => Promise<{ groups: GroupObject[]; filters: GenericFilter; data: KupDataTableDataset; }>",
@@ -5932,7 +5991,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) {
@@ -6110,6 +6168,12 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     const newPage = pageChange(pageNumber, __classPrivateFieldGet(this, _KupDataTable_rowsLength, "f"), this.currentRowsPerPage);
     if (newPage) {
         this.currentPage = newPage;
+        // scroll to row if current page contains selected rows
+        __classPrivateFieldGet(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(this, _KupDataTable_rowsLength, "f"));
@@ -6117,7 +6181,7 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
         this.currentRowsPerPage = newRows;
         __classPrivateFieldGet(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) {
@@ -6158,6 +6222,7 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
                 selectedRows: this.selectedRows,
                 clickedRow: row,
                 clickedColumn,
+                isKeyboardNav,
             });
         }
     }
@@ -6356,6 +6421,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]);
@@ -7055,8 +7126,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(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(this, _KupDataTable_handleUpdateClick, "f").call(this, commandObj), icon: commandObj.icon, label: commandObj.value }));
 }, _KupDataTable_renderCommandDropDownButton = function _KupDataTable_renderCommandDropDownButton(commandObj, styling) {
     const data = {
         'kup-list': {

package/dist/collection/components/kup-editor/kup-editor.js

@@ -305,8 +305,13 @@ export class KupEditor {
         }, this.autosaveTimer), "f");
     }
     onEditorSave() {
-        this.editor.getUI().getToolbar().removeItem(__classPrivateFieldGet(this, _KupEditor_unsavedChangesIndex, "f"));
-        __classPrivateFieldSet(this, _KupEditor_hasChanges, false, "f");
+        if (__classPrivateFieldGet(this, _KupEditor_hasChanges, "f")) {
+            this.editor
+                .getUI()
+                .getToolbar()
+                .removeItem(__classPrivateFieldGet(this, _KupEditor_unsavedChangesIndex, "f"));
+            __classPrivateFieldSet(this, _KupEditor_hasChanges, false, "f");
+        }
         this.kupSave.emit(this.getSaveAndAutoSaveProps());
     }
     onEditorAutoSave() {
@@ -395,7 +400,7 @@ export class KupEditor {
         __classPrivateFieldGet(this, _KupEditor_kupManager, "f").debug.logRender(this, true);
     }
     render() {
-        return (h(Host, { key: '09fc441ca21e0118ae9d721c8b77a9042a8a82e0' }, h("div", { key: '9c23d5c533cded4fd2970464bd59addecf6cc143', id: componentWrapperId }, h("div", { key: this.rootElement.id, ref: (el) => (this.editorRef = el), class: "kup-editor" }))));
+        return (h(Host, { key: 'e7af368e1134de8874c2791b82291bc5391bff6d' }, h("div", { key: '0faeedec267b850a027ce153adaf116c8dbe0a82', id: componentWrapperId }, h("div", { key: this.rootElement.id, ref: (el) => (this.editorRef = el), class: "kup-editor" }))));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupEditor_kupManager, "f").theme.unregister(this);

package/dist/collection/components/kup-input-panel/kup-input-panel-utils.js

@@ -1,6 +1,14 @@
-export const CHAR_WIDTH = 10;
-export const ROW_HEIGHT = 20;
-export const getAbsoluteWidth = (length) => {
+import { FCellShapes } from "../../f-components/f-cell/f-cell-declarations";
+// General INP constants
+export const ROW_HEIGHT = 20; // Used for the ACTUAL row height calculations (no spacing)
+export const SPACED_ROW_HEIGHT = 22; // Used for the INP total height calculations (accounting for row spacing)
+export const LEFT_MULTIPLIER = 1.15; // Multiplier commanding the left attribute "scale"
+export const ADDITIONAL_WIDTH_WITH_ICON = 18; // Additional width added to account for the shape's icon (ACP,CAL,CMB)
+// Char sizes
+export const FONT_SIZE = 12; // Monospace font size of the INP
+export const FONT_SIZE_TO_WIDTH_RATIO = 1.6; // FontSize to SingleCharWidth ratio
+export const CHAR_WIDTH = FONT_SIZE / FONT_SIZE_TO_WIDTH_RATIO; // Used for field width and left attribute
+export const getAbsoluteWidth = (length, graphicShapeHasIcon) => {
     if (length == 0) {
         return CHAR_WIDTH / 2;
     }
@@ -10,22 +18,22 @@ export const getAbsoluteWidth = (length) => {
     if (length === 1) {
         return 1.5 * CHAR_WIDTH;
     }
-    return length * CHAR_WIDTH;
+    return (length * CHAR_WIDTH +
+        (graphicShapeHasIcon ? ADDITIONAL_WIDTH_WITH_ICON : 0) +
+        4 // Additional size to include padding
+    );
 };
-export const FONT_SIZE = 12;
-export const FONT_SIZE_TO_WIDTH_RATIO = 1.666666666666667;
-export const SINGLE_CHAR_WIDTH = FONT_SIZE / FONT_SIZE_TO_WIDTH_RATIO;
 export const getLabelAbsoluteWidth = (length) => {
     if (length == 0) {
-        return SINGLE_CHAR_WIDTH / 2;
+        return CHAR_WIDTH / 2;
     }
     if (!length) {
         return null;
     }
     if (length === 1) {
-        return 1.5 * SINGLE_CHAR_WIDTH;
+        return 1.5 * CHAR_WIDTH;
     }
-    return length * SINGLE_CHAR_WIDTH;
+    return length * CHAR_WIDTH;
 };
 export const getAbsoluteHeight = (height) => {
     if (!height) {
@@ -52,7 +60,7 @@ export const getAbsoluteLeft = (col) => {
     if (!col) {
         return null;
     }
-    return (col - 1) * CHAR_WIDTH;
+    return (col - 1) * 10 * LEFT_MULTIPLIER;
 };
 export const getInpComponentAbsoluteHeight = (layout) => {
     let inpRowHeight = 0;
@@ -69,3 +77,8 @@ export const getInpComponentAbsoluteHeight = (layout) => {
     });
     return inpRowHeight;
 };
+export const graphicShapeHasIcon = (shape) => {
+    return (shape === FCellShapes.AUTOCOMPLETE ||
+        shape === FCellShapes.COMBOBOX ||
+        shape === FCellShapes.DATE);
+};