@sme.up/ketchup 10.2.0 → 10.3.1

package/dist/collection/components/kup-image-list/kup-image-list.js

@@ -200,14 +200,14 @@ export class KupImageList {
         }
         const imlClass = 'image-list' +
             (this.showFullDescription ? ' full-description' : '');
-        return (h(Host, { key: '0dfe8dc9ddc1120bcefb741e41ce2af6af225f63' }, h("style", { key: '2f2e1717102b7b866e6e268c8b25db6eb7586719' }, __classPrivateFieldGet(this, _KupImageList_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '2a9e85aeb724679ad85ace215c27e5b7ddd756f2', id: componentWrapperId, ref: (el) => {
+        return (h(Host, { key: 'ca040281aa4d992d8d6efaa3e294e4cc5e06f95a' }, h("style", { key: '433ac510a032fef1a28de7a19cc725338f12ed18' }, __classPrivateFieldGet(this, _KupImageList_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '09711dbe9475c429a0b87f08c4f95d33dc0a2387', id: componentWrapperId, ref: (el) => {
                 __classPrivateFieldSet(this, _KupImageList_el, el, "f");
-            } }, h("div", { key: '1afaeafc6de7b2d6743571817c8aafd1ae6f8120', class: "navigation-bar" }, hasNavigation ? (h("div", { class: `navigation-bar__wrapper ${this.navigationBarToggled
+            } }, h("div", { key: 'fa65e7bfd83e21146e71c9889cf08849cccc1479', class: "navigation-bar" }, hasNavigation ? (h("div", { class: `navigation-bar__wrapper ${this.navigationBarToggled
                 ? 'navigation-bar__wrapper--active'
                 : ''}` }, h("div", { class: `navigation-bar__title`, onClick: () => {
                 this.navigationBarToggled =
                     !this.navigationBarToggled;
-            } }, h(FImage, { fit: true, resource: this.currentNode.icon, placeholderResource: this.currentNode.placeholderIcon, sizeX: "1.25em", sizeY: "1.25em", wrapperClass: "navigation-bar__title__image" }), h("div", { class: "navigation-bar__title__label" }, this.currentNode.value)), h(FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_backProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.BACK) })), h(FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_topProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.TOP) })))) : null), h("div", { key: '1868b4d2e1e23b78ab3eb99031a21afc88ead36d', class: imlClass, style: combinedGridStyle }, ...__classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_createList).call(this)))));
+            } }, h(FImage, { fit: true, resource: this.currentNode.icon, placeholderResource: this.currentNode.placeholderIcon, sizeX: "1.25em", sizeY: "1.25em", wrapperClass: "navigation-bar__title__image" }), h("div", { class: "navigation-bar__title__label" }, this.currentNode.value)), h(FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_backProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.BACK) })), h(FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_topProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.TOP) })))) : null), h("div", { key: 'e8348ec6cfc974859f45548e1bb156032dda8d2d', class: imlClass, style: combinedGridStyle }, ...__classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_createList).call(this)))));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupImageList_kupManager, "f").interact.unregister(__classPrivateFieldGet(this, _KupImageList_interactableTouch, "f"));
@@ -611,6 +611,7 @@ _KupImageList_clickTimeout = new WeakMap(), _KupImageList_kupManager = new WeakM
             icon: node.icon,
             placeholderIcon: node.placeholderIcon,
             obj: node.obj,
+            cssClass: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").data.cell.getObjectRelatedStyleClasses(node.obj, node.cssClass),
         }, column: { name: 'IMAGE', title: 'Image' }, component: this, density: FCellPadding.NONE, row: Object.assign({}, node) }, h("div", { class: `image-list__wrapper${hasExternalResource ? ' images' : ''}` }, !hasExternalResource && (h("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", viewBox: "0 0 24 24" })), image, label)));
 }, _KupImageList_createList = function _KupImageList_createList() {
     const nodes = [];

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);
+};

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

@@ -27,23 +27,23 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 var _KupInputPanel_instances, _KupInputPanel_kupManager, _KupInputPanel_formRef, _KupInputPanel_optionsAdapterMap, _KupInputPanel_originalData, _KupInputPanel_listeners, _KupInputPanel_cellTypeComponents, _KupInputPanel_cellTypesNeedingReset, _KupInputPanel_cellCustomRender, _KupInputPanel_sectionRenderMap, _KupInputPanel_keysShortcut, _KupInputPanel_readyPromise, _KupInputPanel_readyResolve, _KupInputPanel_getCell, _KupInputPanel_renderRow, _KupInputPanel_renderCell, _KupInputPanel_renderButton, _KupInputPanel_renderDropDownButton, _KupInputPanel_renderEditor, _KupInputPanel_renderDataTable, _KupInputPanel_renderLabel, _KupInputPanel_getLabelComponent, _KupInputPanel_renderGridLayout, _KupInputPanel_renderAbsoluteLayout, _KupInputPanel_renderSection, _KupInputPanel_renderAbsoluteSection, _KupInputPanel_extractContentIds, _KupInputPanel_renderSectionTab, _KupInputPanel_renderField, _KupInputPanel_renderAbsoluteField, _KupInputPanel_mapCommands, _KupInputPanel_mapCells, _KupInputPanel_setData, _KupInputPanel_deepObjectsMerge, _KupInputPanel_reverseMapCells, _KupInputPanel_mapData, _KupInputPanel_slotData, _KupInputPanel_CHIAdapter, _KupInputPanel_GRAAdapter, _KupInputPanel_BTNAdapter, _KupInputPanel_CMBandACPAdapter, _KupInputPanel_getOptionHandler, _KupInputPanel_CHKAdapter, _KupInputPanel_CLPAdapter, _KupInputPanel_EDTAdapter, _KupInputPanel_ITXAdapter, _KupInputPanel_RADAdapter, _KupInputPanel_SWTAdapter, _KupInputPanel_DateAdapter, _KupInputPanel_ObjectAdapter, _KupInputPanel_TimeAdapter, _KupInputPanel_NumberAdapter, _KupInputPanel_DataTableAdapter, _KupInputPanel_getTableUpdatedCell, _KupInputPanel_optionsTreeComboAdapter, _KupInputPanel_treeOptionsNodeAdapter, _KupInputPanel_dataTreeOptionsChildrenAdapter, _KupInputPanel_tableOptionsAdapter, _KupInputPanel_commandAdapter, _KupInputPanel_getAutocompleteEventCallback, _KupInputPanel_manageInputPanelCheck, _KupInputPanel_onCellUpdate, _KupInputPanel_setCellError, _KupInputPanel_areValuesUpdated, _KupInputPanel_getFunctionOnClickBTN, _KupInputPanel_findTraversedFCell, _KupInputPanel_getEventDetails, _KupInputPanel_didLoadInteractables, _KupInputPanel_setFocusOnInputElement, _KupInputPanel_findFirstInput, _KupInputPanel_setAutoSkip;
-import { Host, forceUpdate, h, } from "@stencil/core";
+import { forceUpdate, h, Host, } from "@stencil/core";
 import { FButton } from "../../f-components/f-button/f-button";
 import { FCell } from "../../f-components/f-cell/f-cell";
 import { FCellShapes, FCellTypes, } from "../../f-components/f-cell/f-cell-declarations";
+import { FLabel } from "../../f-components/f-label/f-label";
 import { FTextFieldMDC } from "../../f-components/f-text-field/f-text-field-mdc";
+import { FTypography } from "../../f-components/f-typography/f-typography";
+import { FTypographyType, } from "../../f-components/f-typography/f-typography-declarations";
 import { KupDebugCategory } from "../../managers/kup-debug/kup-debug-declarations";
+import { KupPointerEventTypes } from "../../managers/kup-interact/kup-interact-declarations";
 import { KupLanguageGeneric } from "../../managers/kup-language/kup-language-declarations";
 import { kupManagerInstance, } from "../../managers/kup-manager/kup-manager";
-import { FTypographyType, } from "../../f-components/f-typography/f-typography-declarations";
 import { CHIAdapter, CHKAdapter, CMBandACPAdapter, getCellValueForDisplay, RADAdapter, SWTAdapter, } from "../../utils/cell-utils";
 import { getProps, setProps } from "../../utils/utils";
 import { componentWrapperId } from "../../variables/GenericVariables";
-import { CheckConditionsByEventType, CheckTriggeringEvents, InputPanelKeyCommands, KupInputPanelButtonsPositions, KupInputPanelLayoutSectionType, KupInputPanelPosition, KupInputPanelProps, } from "./kup-input-panel-declarations";
-import { getAbsoluteHeight, getAbsoluteLeft, getAbsoluteTop, getAbsoluteWidth, getInpComponentAbsoluteHeight, getLabelAbsoluteWidth, ROW_HEIGHT, } from "./kup-input-panel-utils";
-import { FTypography } from "../../f-components/f-typography/f-typography";
-import { KupPointerEventTypes } from "../../managers/kup-interact/kup-interact-declarations";
-import { FLabel } from "../../f-components/f-label/f-label";
+import { CheckConditionsByEventType, CheckTriggeringEvents, KupInputPanelButtonsPositions, KupInputPanelLayoutSectionType, KupInputPanelPosition, KupInputPanelProps, } from "./kup-input-panel-declarations";
+import { getAbsoluteHeight, getAbsoluteLeft, getAbsoluteTop, getAbsoluteWidth, getInpComponentAbsoluteHeight, getLabelAbsoluteWidth, graphicShapeHasIcon, SPACED_ROW_HEIGHT, } from "./kup-input-panel-utils";
 const dom = document.documentElement;
 export class KupInputPanel {
     constructor() {
@@ -114,12 +114,6 @@ export class KupInputPanel {
             });
             __classPrivateFieldSet(this, _KupInputPanel_listeners, [], "f");
         }
-        if (__classPrivateFieldGet(this, _KupInputPanel_keysShortcut, "f").length) {
-            __classPrivateFieldGet(this, _KupInputPanel_keysShortcut, "f").map((key) => {
-                __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").keysBinding.unregister(key);
-            });
-            __classPrivateFieldSet(this, _KupInputPanel_keysShortcut, [], "f");
-        }
         if (this.data) {
             __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_mapCells).call(this, this.data);
         }
@@ -181,6 +175,13 @@ export class KupInputPanel {
     async setProps(props) {
         setProps(this, KupInputPanelProps, props);
     }
+    /**
+     * Trigger update from outside
+     * @param {string} cellId - When provided, will trigger onclick event of cell instead of *UPDATE
+     */
+    async update(cellId) {
+        __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_getFunctionOnClickBTN).call(this, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_getCell).call(this, cellId), cellId);
+    }
     //#endregion
     //#region LIFECYCLE HOOKS
     /*-------------------------------------------------*/
@@ -228,7 +229,7 @@ export class KupInputPanel {
                 h("p", null, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.translate(KupLanguageGeneric.EMPTY_DATA)),
             ]
             : this.inputPanelCells.map((inputPanelCell) => __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_renderRow).call(this, inputPanelCell));
-        return (h(Host, { key: '05c05f0e83a1f080424e053c74c1d2a6ee06e672', "onKup-cell-blur": (e) => __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_manageInputPanelCheck).call(this, e, CheckTriggeringEvents.BLUR), "onKup-cell-update": __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_onCellUpdate).bind(this), "onKup-tabbar-click": (e) => {
+        return (h(Host, { key: 'd468961b69c36da299594dd70e3d65911a40a1f6', "onKup-cell-blur": (e) => __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_manageInputPanelCheck).call(this, e, CheckTriggeringEvents.BLUR), "onKup-cell-update": __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_onCellUpdate).bind(this), "onKup-tabbar-click": (e) => {
                 this.tabSelected = e.detail.node.id;
             }, "onKup-autocomplete-input": __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_getOptionHandler).bind(this), "onKup-autocomplete-iconclick": __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_getOptionHandler).bind(this), "onKup-combobox-iconclick": (e) => __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_getOptionHandler).call(this, e, true), "onKup-cell-itemclick": (e) => __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_manageInputPanelCheck).call(this, e, CheckTriggeringEvents.ITEMCLICK), "onKup-objectfield-searchpayload": (e) => {
                 this.kupInputPanelObjectFieldSearchPayload.emit(e.detail);
@@ -236,14 +237,11 @@ export class KupInputPanel {
                 this.kupInputPanelObjectFieldOpenSearchMenu.emit(e.detail);
             }, "onKup-objectfield-selectedmenuitem": (e) => {
                 this.kupInputPanelObjectFieldSelectedMenuItem.emit(e.detail);
-            } }, h("style", { key: 'c1b2093b1747eb47abd06dadad11cb932a521d89' }, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'dbc40999bdce880da7407ca757710688310548f8', id: componentWrapperId }, inputPanelContent)));
+            } }, h("style", { key: '824fd398cb63ceda965e538605c4e679085d1d33' }, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '83cb7ae70a5d7340792ed76fa53aee7c3ecbfc60', id: componentWrapperId }, inputPanelContent)));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.unregister(this);
         __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.unregister(this);
-        __classPrivateFieldGet(this, _KupInputPanel_keysShortcut, "f").forEach((keyEvent) => {
-            __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").keysBinding.unregister(keyEvent);
-        });
     }
     static get is() { return "kup-input-panel"; }
     static get encapsulation() { return "shadow"; }
@@ -805,6 +803,30 @@ export class KupInputPanel {
                             "text": "props - Object containing props that will be set to the component."
                         }]
                 }
+            },
+            "update": {
+                "complexType": {
+                    "signature": "(cellId?: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "cellId",
+                            "type": "string",
+                            "docs": "- When provided, will trigger onclick event of cell instead of *UPDATE"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Trigger update from outside",
+                    "tags": [{
+                            "name": "param",
+                            "text": "cellId - When provided, will trigger onclick event of cell instead of *UPDATE"
+                        }]
+                }
             }
         };
     }
@@ -826,6 +848,9 @@ export class KupInputPanel {
     }
 }
 _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(), _KupInputPanel_optionsAdapterMap = new WeakMap(), _KupInputPanel_originalData = new WeakMap(), _KupInputPanel_listeners = new WeakMap(), _KupInputPanel_cellTypeComponents = new WeakMap(), _KupInputPanel_cellTypesNeedingReset = new WeakMap(), _KupInputPanel_cellCustomRender = new WeakMap(), _KupInputPanel_sectionRenderMap = new WeakMap(), _KupInputPanel_keysShortcut = new WeakMap(), _KupInputPanel_readyPromise = new WeakMap(), _KupInputPanel_readyResolve = new WeakMap(), _KupInputPanel_instances = new WeakSet(), _KupInputPanel_getCell = function _KupInputPanel_getCell(id) {
+    if (!id) {
+        return null;
+    }
     return this.inputPanelCells.reduce((cell, { cells }) => {
         if (!cell) {
             const foundCell = cells.find(({ column }) => column.name === id);
@@ -837,7 +862,7 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
         return cell;
     }, null);
 }, _KupInputPanel_renderRow = function _KupInputPanel_renderRow(inputPanelCell) {
-    var _a, _b;
+    var _a, _b, _c;
     const layout = inputPanelCell.row.layout;
     const horizontal = (layout === null || layout === void 0 ? void 0 : layout.horizontal) || false;
     const styleObj = {};
@@ -852,7 +877,8 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
         if (layout.absolute) {
             rowContent = __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_renderAbsoluteLayout).call(this, inputPanelCell, layout);
             // 12px is added due to the chance that the horizontal scrollbar will be rendered
-            styleObj.height = `${getInpComponentAbsoluteHeight(layout) * ROW_HEIGHT + 12}px`;
+            styleObj.height = `${getInpComponentAbsoluteHeight(layout) * SPACED_ROW_HEIGHT +
+                12}px`;
         }
         else {
             if (!layout.sectionsType) {
@@ -899,10 +925,6 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
         'input-panel__commands': true,
         [`input-panel__commands--${this.buttonPosition}`]: true,
     };
-    const props = {
-        value: (_b = layout === null || layout === void 0 ? void 0 : layout.sections[0]) === null || _b === void 0 ? void 0 : _b.title,
-        type: FTypographyType.HEADING1,
-    };
     return (h("div", null, h("form", { name: this.rootElement.id, id: this.rootElement.id, class: inputPanelClass, ref: (el) => (__classPrivateFieldSet(this, _KupInputPanel_formRef, el, "f")), onSubmit: (e) => {
             e.preventDefault();
             this.submitCb({
@@ -915,7 +937,8 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
             if (__classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_findTraversedFCell).call(this, e) != null) {
                 e.preventDefault();
             }
-        } }, h("div", { class: "input-panel__typography" }, h(FTypography, Object.assign({}, props))), h("div", { class: classObj, style: styleObj }, rowContent), h("div", { class: commandsClass }, h(FButton, { buttonType: "submit", label: __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.translate(KupLanguageGeneric.CONFIRM), wrapperClass: "form__submit", invisible: this.hiddenSubmitButton }), this.inputPanelCommands))));
+        } }, ((_b = layout === null || layout === void 0 ? void 0 : layout.sections) === null || _b === void 0 ? void 0 : _b.length) == 1 &&
+        ((_c = layout === null || layout === void 0 ? void 0 : layout.sections[0]) === null || _c === void 0 ? void 0 : _c.title) && (h("div", { class: "input-panel__typography" }, h(FTypography, { value: layout.sections[0].title, type: FTypographyType.HEADING1 }))), h("div", { class: classObj, style: styleObj }, rowContent), h("div", { class: commandsClass }, h(FButton, { buttonType: "submit", label: __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.translate(KupLanguageGeneric.CONFIRM), wrapperClass: "form__submit", invisible: this.hiddenSubmitButton }), this.inputPanelCommands))));
 }, _KupInputPanel_renderCell = function _KupInputPanel_renderCell(cell, row, column) {
     var _a;
     if (!cell) {
@@ -941,7 +964,7 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
     }
     return h(FCell, Object.assign({}, cellProps));
 }, _KupInputPanel_renderButton = function _KupInputPanel_renderButton(cell, { name }) {
-    const renderedButton = (h(FButton, Object.assign({ icon: cell.icon, id: name }, cell.data, { wrapperClass: "form__submit" })));
+    const renderedButton = (h(FButton, Object.assign({ icon: cell.icon, placeholderIcon: cell.placeholderIcon, id: name }, cell.data, { wrapperClass: "form__submit" })));
     return renderedButton;
 }, _KupInputPanel_renderDropDownButton = function _KupInputPanel_renderDropDownButton(cell, data) {
     return (h("kup-dropdown-button", Object.assign({}, cell.data, { label: cell.value, data: data, "onkup-dropdownbutton-itemclick": (e) => {
@@ -1170,7 +1193,7 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
     }
     const absoluteWidth = fieldCell.cell.shape === FCellShapes.LABEL
         ? getLabelAbsoluteWidth(length)
-        : getAbsoluteWidth(length);
+        : getAbsoluteWidth(length, graphicShapeHasIcon(fieldCell.cell.shape));
     const absoluteHeight = getAbsoluteHeight(field.absoluteHeight);
     const absoluteTop = getAbsoluteTop(field.absoluteRow, absoluteTblPositioningData);
     const absoluteLeft = getAbsoluteLeft(field.absoluteColumn);
@@ -1364,15 +1387,10 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
         },
     };
 }, _KupInputPanel_BTNAdapter = function _KupInputPanel_BTNAdapter(_options, _fieldLabel, _currentValue, cell, id) {
-    var _a, _b, _c, _d;
     cell.data = cell.data || {};
     cell.data.onClick = () => {
         __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_getFunctionOnClickBTN).call(this, cell, id);
     };
-    if (((_a = cell.data) === null || _a === void 0 ? void 0 : _a.keyShortcut) && !((_b = cell.data) === null || _b === void 0 ? void 0 : _b.disabled)) {
-        __classPrivateFieldGet(this, _KupInputPanel_keysShortcut, "f").push((_c = cell.data) === null || _c === void 0 ? void 0 : _c.keyShortcut);
-        __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").keysBinding.register((_d = cell.data) === null || _d === void 0 ? void 0 : _d.keyShortcut, cell.data.onClick.bind(this));
-    }
     return Object.assign({ label: cell.value, fun: cell.fun }, cell.data);
 }, _KupInputPanel_CMBandACPAdapter = function _KupInputPanel_CMBandACPAdapter(rawOptions, fieldLabel, currentValue) {
     const configCMandACP = CMBandACPAdapter(currentValue, fieldLabel, []);
@@ -1549,11 +1567,6 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
         };
     });
 }, _KupInputPanel_commandAdapter = function _KupInputPanel_commandAdapter(cell) {
-    if (cell.data &&
-        !cell.data.keyShortcut &&
-        __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").objects.isJ1Key(cell.obj ? cell.obj : {})) {
-        cell.data.keyShortcut = InputPanelKeyCommands[cell.obj.k];
-    }
     const buttonCell = Object.assign(Object.assign({}, cell), { data: __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_BTNAdapter).call(this, null, null, cell.value, cell, cell.obj.k), id: cell.obj.k });
     return buttonCell;
 }, _KupInputPanel_getAutocompleteEventCallback = function _KupInputPanel_getAutocompleteEventCallback(detail, cell) {
@@ -1576,7 +1589,7 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
             : (_d = (_c = cell.data) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d['kup-list'];
         if (kupListData) {
             kupListData.data = (filteredRows === null || filteredRows === void 0 ? void 0 : filteredRows.length)
-                ? (_e = __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_optionsTreeComboAdapter).call(this, visibleColumnsOptions, cell.value)) !== null && _e !== void 0 ? _e : []
+                ? ((_e = __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_optionsTreeComboAdapter).call(this, visibleColumnsOptions, cell.value)) !== null && _e !== void 0 ? _e : [])
                 : [];
             kupListData.options = (_f = options.columns) !== null && _f !== void 0 ? _f : [];
         }
@@ -1663,7 +1676,7 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
 }, _KupInputPanel_areValuesUpdated = function _KupInputPanel_areValuesUpdated() {
     return this.inputPanelCells.some(({ cells, row }) => cells.some(({ cell, column: { name } }) => cell.value !== row.cells[name].value));
 }, _KupInputPanel_getFunctionOnClickBTN = function _KupInputPanel_getFunctionOnClickBTN(cell, id) {
-    cell.fun
+    (cell === null || cell === void 0 ? void 0 : cell.fun)
         ? this.customButtonClickHandler({
             fun: cell.fun,
             cellId: id,

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

@@ -593,6 +593,7 @@ export class KupTree {
     }
     // When a TreeNode can be selected
     hdlTreeNodeClick(e, treeNodeData, treeNodePath) {
+        var _a;
         if (this.expansionMode.toLowerCase() ===
             KupTreeExpansionMode.DROPDOWN ||
             (this.expansionMode.toLowerCase() === KupTreeExpansionMode.NODE &&
@@ -610,13 +611,18 @@ export class KupTree {
                 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
@@ -977,6 +983,13 @@ export class KupTree {
                     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,
@@ -1358,17 +1371,19 @@ export class KupTree {
             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)))));
@@ -2280,6 +2295,27 @@ export class KupTree {
                         }
                     }
                 }
+            }, {
+                "method": "kupTreeCellClick",
+                "name": "kup-tree-cell-click",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "FCellEventPayload",
+                    "resolved": "FCellEventPayload",
+                    "references": {
+                        "FCellEventPayload": {
+                            "location": "import",
+                            "path": "../../f-components/f-cell/f-cell-declarations",
+                            "id": "src/f-components/f-cell/f-cell-declarations.ts::FCellEventPayload"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {

package/dist/collection/f-components/f-cell/f-cell.js

@@ -208,7 +208,7 @@ const MainObjectAdapter = (_options, fieldLabel, currentValue, cell, _id) => (Ob
 const MainCHKAdapter = (_options, fieldLabel, currentValue, cell) => (Object.assign(Object.assign({}, cell.data), { checked: currentValue === 'on' || currentValue === '1', label: fieldLabel }));
 const MainBTNAdapter = (_options, _fieldLabel, currentValue, cell) => ({
     data: [
-        Object.assign(Object.assign({}, cell.data), { icon: cell.icon, value: currentValue }),
+        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 }));

package/dist/collection/managers/kup-data/kup-data.js

@@ -236,6 +236,55 @@ export class KupData {
             hasActionCell: (cell, commands) => {
                 return commands.some((command) => this.cell.isActionCell(command, cell));
             },
+            /**
+             * Gets css styles for cell, depending on cell's obj
+             * @param obj
+             * @param cssClass
+             * @returns
+             */
+            getObjectRelatedStyleClasses(obj, cssClass) {
+                const ParameterRelatedStylesMap = {
+                    TA: {
+                        'B£W': ['c-fitted', 'c-shaped', 'c-hor-padded'],
+                        'B§A': ['strong-text'],
+                    },
+                };
+                const CodeRelatedStylesMap = {
+                    TA: {
+                        'B£W': {
+                            '10': ['c-teal-bg'],
+                            '13': ['c-teal-bg'],
+                            '20': ['c-green-bg'],
+                            '70': ['c-orange-bg'],
+                            '80': ['c-grey-bg'],
+                            '90': ['c-purple-bg'],
+                        },
+                        'B§A': {
+                            '§': ['purple-text'],
+                            A: ['danger-text'],
+                            B: ['warning-text'],
+                            C: ['success-text'],
+                        },
+                    },
+                };
+                if (!obj)
+                    return '';
+                const { t, p, k } = obj;
+                const stylesSet = new Set();
+                if (cssClass) {
+                    cssClass
+                        .split(' ')
+                        .forEach((singleClass) => stylesSet.add(singleClass));
+                }
+                const parameterKey = Object.keys(ParameterRelatedStylesMap[t] || {}).find((param) => p.includes(param));
+                if (parameterKey) {
+                    ParameterRelatedStylesMap[t][parameterKey].forEach((style) => stylesSet.add(style));
+                    if (CodeRelatedStylesMap[t][parameterKey][k]) {
+                        CodeRelatedStylesMap[t][parameterKey][k].forEach((style) => stylesSet.add(style));
+                    }
+                }
+                return Array.from(stylesSet).join(' ');
+            },
         };
         this.column = {
             find(dataset, filters) {

package/dist/collection/managers/kup-manager/kup-manager.js

@@ -18,7 +18,6 @@ import { KupTooltip } from "../kup-tooltip/kup-tooltip";
 import { setAssetPath } from "@stencil/core";
 import html2canvas from "html2canvas";
 import { KupOpenAI } from "../kup-openai/kup-openai";
-import { KupKeysBinding } from "../kup-keys-binding/kup-keys-binding";
 import { KupPerfTuning } from "../kup-perf-tuning/kup-perf-tuning";
 import { KupPerfMonitoring } from "../kup-perf-monitoring/kup-perf-monitoring";
 import { KupPerfTuningPriority } from "../kup-perf-tuning/kup-perf-tuning-declarations";
@@ -132,7 +131,6 @@ export class KupManager {
         };
         this.theme = new KupTheme(themeList, themeName);
         this.toolbar = new KupToolbar();
-        this.keysBinding = new KupKeysBinding();
         this.tooltip = new KupTooltip(tooltipDelay, tooltipFCellCallbacks, tooltipModal);
         this.perfTuning = new KupPerfTuning({
             maxCellsPerPage: Number.MAX_VALUE,

package/dist/components/index.js

@@ -1,5 +1,5 @@
 export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-ef8cbd35.js';
-import { K as KupManager } from './p-b304b91c.js';
+import { K as KupManager } from './p-73922583.js';
 
 /** used for obtain a KupManager instance without a dom document (for UT)  */
 function newKupManager(init) {

package/dist/components/kup-accordion.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, f as forceUpdate, h, d as Host } from './p-ef8cbd35.js';
-import { k as kupManagerInstance, a as KupComponentSizing, g as getProps, s as setProps, b as KupThemeColorValues, c as KupThemeIconValues } from './p-b304b91c.js';
-import { M as MDCRipple, F as FImage, c as componentWrapperId, d as defineCustomElement$2, a as defineCustomElement$3, b as defineCustomElement$4, e as defineCustomElement$5, f as defineCustomElement$6, g as defineCustomElement$7, h as defineCustomElement$8, i as defineCustomElement$9, j as defineCustomElement$a, k as defineCustomElement$b, l as defineCustomElement$c, m as defineCustomElement$d, n as defineCustomElement$e, o as defineCustomElement$f, p as defineCustomElement$g, q as defineCustomElement$h, r as defineCustomElement$i, s as defineCustomElement$j, t as defineCustomElement$k, u as defineCustomElement$l, v as defineCustomElement$m, w as defineCustomElement$n, x as defineCustomElement$o, y as defineCustomElement$p, z as defineCustomElement$q, A as defineCustomElement$r, B as defineCustomElement$s, C as defineCustomElement$t, D as defineCustomElement$u } from './p-7d0f1f90.js';
+import { k as kupManagerInstance, a as KupComponentSizing, g as getProps, s as setProps, b as KupThemeColorValues, c as KupThemeIconValues } from './p-73922583.js';
+import { M as MDCRipple, F as FImage, c as componentWrapperId, d as defineCustomElement$2, a as defineCustomElement$3, b as defineCustomElement$4, e as defineCustomElement$5, f as defineCustomElement$6, g as defineCustomElement$7, h as defineCustomElement$8, i as defineCustomElement$9, j as defineCustomElement$a, k as defineCustomElement$b, l as defineCustomElement$c, m as defineCustomElement$d, n as defineCustomElement$e, o as defineCustomElement$f, p as defineCustomElement$g, q as defineCustomElement$h, r as defineCustomElement$i, s as defineCustomElement$j, t as defineCustomElement$k, u as defineCustomElement$l, v as defineCustomElement$m, w as defineCustomElement$n, x as defineCustomElement$o, y as defineCustomElement$p, z as defineCustomElement$q, A as defineCustomElement$r, B as defineCustomElement$s, C as defineCustomElement$t, D as defineCustomElement$u } from './p-e0031e17.js';
 
 /**
  * Props of the kup-accordion component.

package/dist/components/kup-activity-timeline.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, f as forceUpdate, h, F as Fragment, d as Host } from './p-ef8cbd35.js';
-import { k as kupManagerInstance, g as getProps, s as setProps, u as KupDebugCategory, n as getCellValueForDisplay } from './p-b304b91c.js';
-import { c as componentWrapperId, E as sortRows, d as defineCustomElement$2, a as defineCustomElement$3, b as defineCustomElement$4, e as defineCustomElement$5, f as defineCustomElement$6, g as defineCustomElement$7, h as defineCustomElement$8, i as defineCustomElement$9, j as defineCustomElement$a, k as defineCustomElement$b, l as defineCustomElement$c, m as defineCustomElement$d, n as defineCustomElement$e, o as defineCustomElement$f, p as defineCustomElement$g, q as defineCustomElement$h, r as defineCustomElement$i, s as defineCustomElement$j, t as defineCustomElement$k, u as defineCustomElement$l, v as defineCustomElement$m, w as defineCustomElement$n, x as defineCustomElement$o, y as defineCustomElement$p, z as defineCustomElement$q, A as defineCustomElement$r, B as defineCustomElement$s, C as defineCustomElement$t, D as defineCustomElement$u, F as FImage } from './p-7d0f1f90.js';
+import { k as kupManagerInstance, g as getProps, s as setProps, u as KupDebugCategory, n as getCellValueForDisplay } from './p-73922583.js';
+import { c as componentWrapperId, E as sortRows, d as defineCustomElement$2, a as defineCustomElement$3, b as defineCustomElement$4, e as defineCustomElement$5, f as defineCustomElement$6, g as defineCustomElement$7, h as defineCustomElement$8, i as defineCustomElement$9, j as defineCustomElement$a, k as defineCustomElement$b, l as defineCustomElement$c, m as defineCustomElement$d, n as defineCustomElement$e, o as defineCustomElement$f, p as defineCustomElement$g, q as defineCustomElement$h, r as defineCustomElement$i, s as defineCustomElement$j, t as defineCustomElement$k, u as defineCustomElement$l, v as defineCustomElement$m, w as defineCustomElement$n, x as defineCustomElement$o, y as defineCustomElement$p, z as defineCustomElement$q, A as defineCustomElement$r, B as defineCustomElement$s, C as defineCustomElement$t, D as defineCustomElement$u, F as FImage } from './p-e0031e17.js';
 
 var KupActivityTimelineProps;
 (function (KupActivityTimelineProps) {

package/dist/components/kup-autocomplete.js

@@ -1,4 +1,4 @@
-import { K as KupAutocomplete$1, D as defineCustomElement$1 } from './p-7d0f1f90.js';
+import { K as KupAutocomplete$1, D as defineCustomElement$1 } from './p-e0031e17.js';
 
 const KupAutocomplete = KupAutocomplete$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kup-badge.js

@@ -1,4 +1,4 @@
-import { G as KupBadge$1, C as defineCustomElement$1 } from './p-7d0f1f90.js';
+import { G as KupBadge$1, C as defineCustomElement$1 } from './p-e0031e17.js';
 
 const KupBadge = KupBadge$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kup-box.js

@@ -1,4 +1,4 @@
-import { K as KupBox$1, d as defineCustomElement$1 } from './p-3438f15f.js';
+import { K as KupBox$1, d as defineCustomElement$1 } from './p-685106b4.js';
 
 const KupBox = KupBox$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { S as KupButtonList$1, A as defineCustomElement$1 } from './p-7d0f1f90.js';
+import { S as KupButtonList$1, A as defineCustomElement$1 } from './p-e0031e17.js';
 
 const KupButtonList = KupButtonList$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kup-button.js

@@ -1,4 +1,4 @@
-import { R as KupButton$1, B as defineCustomElement$1 } from './p-7d0f1f90.js';
+import { R as KupButton$1, B as defineCustomElement$1 } from './p-e0031e17.js';
 
 const KupButton = KupButton$1;
 const defineCustomElement = defineCustomElement$1;