@sme.up/ketchup 10.3.0 → 10.3.2

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-declarations.js

@@ -14,6 +14,7 @@ export var KupInputPanelProps;
     KupInputPanelProps["inputPanelPosition"] = "Manage the global layout of the input panel fields. The default is COLUMNS.";
     KupInputPanelProps["autoSkip"] = "Sets the auto skip between input text fields when the value reaches the max length.";
     KupInputPanelProps["autoFocus"] = "Sets whether the first input should receive focus.";
+    KupInputPanelProps["fieldReset"] = "Create e Reset button for the form";
 })(KupInputPanelProps || (KupInputPanelProps = {}));
 export var KupInputPanelPosition;
 (function (KupInputPanelPosition) {

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

@@ -62,20 +62,26 @@ export const getAbsoluteLeft = (col) => {
     }
     return (col - 1) * 10 * LEFT_MULTIPLIER;
 };
-export const getInpComponentAbsoluteHeight = (layout) => {
-    let inpRowHeight = 0;
-    layout.sections.forEach((section) => {
-        section.content.forEach((layoutField) => {
-            if (layoutField.absoluteRow > inpRowHeight) {
-                inpRowHeight =
-                    layoutField.absoluteRow +
-                        (layoutField.absoluteHeight > 1
-                            ? layoutField.absoluteHeight
-                            : 0);
-            }
-        });
-    });
-    return inpRowHeight;
+export const getInpComponentHeight = (layout) => {
+    var _a, _b;
+    if (!layout)
+        return 0;
+    const tblHeight = (_b = (_a = layout.sections
+        .flatMap((section) => section.content)
+        .find((field) => field.shape === FCellShapes.TABLE)) === null || _a === void 0 ? void 0 : _a.absoluteHeight) !== null && _b !== void 0 ? _b : null;
+    const maxRow = Math.max(0, ...layout.sections.flatMap((section) => section.content.map(
+    // -1 because if the absolute height is 1 the sum will result in a field with height 2
+    // A field with absoluteRow 1 and height 1 is only on row 1, not 1+1
+    (field) => field.absoluteRow + (field.absoluteHeight - 1))));
+    if (!tblHeight) {
+        // No TBL, all the rows have height 22
+        return maxRow * SPACED_ROW_HEIGHT;
+    }
+    else {
+        // There is a TBL, with a rows height of 20
+        // All the non-TBL rows still have height 22
+        return ((maxRow - tblHeight) * SPACED_ROW_HEIGHT + tblHeight * ROW_HEIGHT);
+    }
 };
 export const graphicShapeHasIcon = (shape) => {
     return (shape === FCellShapes.AUTOCOMPLETE ||

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

@@ -26,7 +26,7 @@ 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;
+var _KupInputPanel_instances, _KupInputPanel_kupManager, _KupInputPanel_formRef, _KupInputPanel_optionsAdapterMap, _KupInputPanel_originalData, _KupInputPanel_listeners, _KupInputPanel_cellTypeComponents, _KupInputPanel_cellTypesNeedingReset, _KupInputPanel_cellCustomRender, _KupInputPanel_sectionRenderMap, _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 { forceUpdate, h, Host, } from "@stencil/core";
 import { FButton } from "../../f-components/f-button/f-button";
 import { FCell } from "../../f-components/f-cell/f-cell";
@@ -34,7 +34,7 @@ import { FCellShapes, FCellTypes, } from "../../f-components/f-cell/f-cell-decla
 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 { 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";
@@ -43,7 +43,7 @@ import { CHIAdapter, CHKAdapter, CMBandACPAdapter, getCellValueForDisplay, RADAd
 import { getProps, setProps } from "../../utils/utils";
 import { componentWrapperId } from "../../variables/GenericVariables";
 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";
+import { getAbsoluteHeight, getAbsoluteLeft, getAbsoluteTop, getAbsoluteWidth, getInpComponentHeight, getLabelAbsoluteWidth, graphicShapeHasIcon, } from "./kup-input-panel-utils";
 const dom = document.documentElement;
 export class KupInputPanel {
     constructor() {
@@ -80,7 +80,6 @@ export class KupInputPanel {
         _KupInputPanel_sectionRenderMap.set(this, new Map([
             [KupInputPanelLayoutSectionType.TAB, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_renderSectionTab).bind(this)],
         ]));
-        _KupInputPanel_keysShortcut.set(this, []);
         _KupInputPanel_readyPromise.set(this, void 0);
         _KupInputPanel_readyResolve.set(this, void 0);
         this.buttonPosition = KupInputPanelButtonsPositions.BOTTOM;
@@ -97,6 +96,7 @@ export class KupInputPanel {
         this.autoFocus = false;
         this.autoSkip = false;
         this.updateOnClick = false;
+        this.fieldReset = false;
         this.inputPanelCells = [];
         this.inputPanelCommands = [];
         this.tabSelected = null;
@@ -182,6 +182,25 @@ export class KupInputPanel {
     async update(cellId) {
         __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_getFunctionOnClickBTN).call(this, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_getCell).call(this, cellId), cellId);
     }
+    onFormReset() {
+        var _a;
+        for (const col of this.data.columns) {
+            const cell = __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_getCell).call(this, col.name);
+            if ((cell.shape === FCellShapes.MULTI_AUTOCOMPLETE ||
+                cell.shape === FCellShapes.MULTI_COMBOBOX) &&
+                ((_a = cell.data) === null || _a === void 0 ? void 0 : _a.data)) {
+                // reset chips array
+                cell.data.data = [];
+            }
+            cell.value = '';
+            cell.obj.k = '';
+            cell.decode = '';
+            if (cell.data.initialValue) {
+                cell.data.initialValue = '';
+            }
+        }
+        this.refresh();
+    }
     //#endregion
     //#region LIFECYCLE HOOKS
     /*-------------------------------------------------*/
@@ -229,7 +248,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: '4ff52711b69f8e049b9b269696bbf9464afcec14', "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: 'b1133efe7244cc661038684eaf17e4703b9534d1', "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);
@@ -237,7 +256,7 @@ export class KupInputPanel {
                 this.kupInputPanelObjectFieldOpenSearchMenu.emit(e.detail);
             }, "onKup-objectfield-selectedmenuitem": (e) => {
                 this.kupInputPanelObjectFieldSelectedMenuItem.emit(e.detail);
-            } }, h("style", { key: '0e7d0c363c2ca6c6c9742b633f6f4bc54c8fee19' }, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '9c9a06f9c2b7cc15b3e1a844824d5153b1f2f399', id: componentWrapperId }, inputPanelContent)));
+            } }, h("style", { key: '9427c673b6350b14496c77211089da3e6addbbf3' }, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '35e45b29284732303c817997dcd0888e615453aa', id: componentWrapperId }, inputPanelContent)));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.unregister(this);
@@ -589,6 +608,27 @@ export class KupInputPanel {
                 "attribute": "update-on-click",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "fieldReset": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "When set to true, will render a reset button"
+                },
+                "attribute": "field-reset",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -847,7 +887,7 @@ 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) {
+_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_readyPromise = new WeakMap(), _KupInputPanel_readyResolve = new WeakMap(), _KupInputPanel_instances = new WeakSet(), _KupInputPanel_getCell = function _KupInputPanel_getCell(id) {
     if (!id) {
         return null;
     }
@@ -862,11 +902,10 @@ _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 = {};
-    const styleTypographyObj = {};
     let rowContent;
     if (!((_a = layout === null || layout === void 0 ? void 0 : layout.sections) === null || _a === void 0 ? void 0 : _a.length)) {
         rowContent = inputPanelCell.cells
@@ -876,9 +915,7 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
     else {
         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) * SPACED_ROW_HEIGHT +
-                12}px`;
+            styleObj.height = `${getInpComponentHeight(layout)}px`;
         }
         else {
             if (!layout.sectionsType) {
@@ -925,10 +962,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({
@@ -937,11 +970,15 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
                     after: __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_reverseMapCells).call(this),
                 },
             });
+        }, onReset: (e) => {
+            e.preventDefault();
+            this.onFormReset();
         }, onContextMenu: (e) => {
             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.fieldReset && (h(FButton, { buttonType: "reset", label: "Reset", wrapperClass: "form__submit", icon: "broom" })), this.inputPanelCommands))));
 }, _KupInputPanel_renderCell = function _KupInputPanel_renderCell(cell, row, column) {
     var _a;
     if (!cell) {
@@ -967,7 +1004,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) => {

package/dist/collection/components/kup-tab-bar/kup-tab-bar-declarations.js

@@ -6,9 +6,13 @@ export var KupTabBarProps;
 (function (KupTabBarProps) {
     KupTabBarProps["customStyle"] = "Custom style of the component.";
     KupTabBarProps["data"] = "List of elements.";
+    KupTabBarProps["dense"] = "When true, the component will be more compact.";
+    KupTabBarProps["infoIcon"] = "Icon to be shown in the info button";
     KupTabBarProps["ripple"] = "When enabled displays Material's ripple effect on item headers.";
     KupTabBarProps["toolbar"] = "when true, it will show the toolbar activation icon";
     KupTabBarProps["variant"] = "Variant of the component. It is either flat or contained";
+    KupTabBarProps["toolbarCallback"] = "Callback to be called when the toolbar icon is clicked";
+    KupTabBarProps["infoCallback"] = "Callback to be called when the info icon is clicked";
 })(KupTabBarProps || (KupTabBarProps = {}));
 /**
  * Styling options for the f-button component.

package/dist/collection/components/kup-tab-bar/kup-tab-bar.js

@@ -99,7 +99,7 @@ export class KupTabBar {
         });
     }
     onKupToolbarItemClick(e) {
-        this.kupItemClick.emit({
+        this.kupToolbarItemClick.emit({
             comp: this,
             id: this.rootElement.id,
             value: this.value,
@@ -313,27 +313,31 @@ export class KupTabBar {
                 'kup-dense': this.dense,
                 'kup-danger': node.danger,
             };
-            const tabEl = (h("f-button", { class: tabClass, role: "tab", "aria-selected": this.data[i].active ? true : false, tabIndex: i, title: node.title ? node.title : null, onBlur: () => this.onKupBlur(i, node), onClick: () => this.onKupClick(i, node), onFocus: () => this.onKupFocus(i, node) }, h("span", { class: "tab__content" }, node.icon ? (h(FImage, { color: `var(${KupThemeColorValues.PRIMARY})`, resource: node.icon, placeholderResource: node.placeholderIcon, wrapperClass: "tab__icon" })) : null, node.value ? (h("span", { class: "tab__text-label" }, this.data[i].value)) : null), this.infoIcon && (h(FImage, { resource: "info_outline", sizeX: "16px", sizeY: "16px", onClick: async (event) => {
-                    event.stopPropagation();
-                    const el = event.currentTarget;
-                    const data = await this.infoCallback();
-                    this.infoState = data;
-                    if (this.infoState.length > 0) {
-                        this.onKupInfoIconClick(el);
-                    }
-                    else {
-                        this.kupManager.debug.logMessage(this, 'InfoIcon data is empty, not opening dropdown.');
+            const tabEl = (h("f-button", { class: tabClass, role: "tab", "aria-selected": node.active ? true : false, tabIndex: i, title: node.title ? node.title : null, onBlur: () => this.onKupBlur(i, node), onClick: () => this.onKupClick(i, node), onFocus: () => this.onKupFocus(i, node) }, h("span", { class: "tab__content" }, node.icon ? (h(FImage, { color: `var(${KupThemeColorValues.PRIMARY})`, resource: node.icon, placeholderResource: node.placeholderIcon, wrapperClass: "tab__icon" })) : null, node.value ? (h("span", { class: "tab__text-label" }, node.value)) : null), this.infoIcon && (h(FImage, { resource: "info_outline", sizeX: "16px", sizeY: "16px", onClick: async (event) => {
+                    if (node.active) {
+                        event.stopPropagation();
+                        const el = event.currentTarget;
+                        const data = await this.infoCallback();
+                        this.infoState = data;
+                        if (this.infoState.length > 0) {
+                            this.onKupInfoIconClick(el);
+                        }
+                        else {
+                            this.kupManager.debug.logMessage(this, 'InfoIcon data is empty, not opening dropdown.');
+                        }
                     }
                 }, wrapperClass: "tab__iconToolbar iconInfo" })), this.toolbar && (h(FImage, { resource: "more_vert", sizeX: "16px", sizeY: "16px", onClick: async (event) => {
-                    event.stopPropagation();
-                    const el = event.currentTarget;
-                    const data = await this.toolbarCallback();
-                    this.toolbarState = data;
-                    if (this.toolbarState.length > 0) {
-                        this.onKupIconClick(el);
-                    }
-                    else {
-                        this.kupManager.debug.logMessage(this, 'Toolbar data is empty, not opening dropdown.');
+                    if (node.active) {
+                        event.stopPropagation();
+                        const el = event.currentTarget;
+                        const data = await this.toolbarCallback();
+                        this.toolbarState = data;
+                        if (this.toolbarState.length > 0) {
+                            this.onKupIconClick(el);
+                        }
+                        else {
+                            this.kupManager.debug.logMessage(this, 'Toolbar data is empty, not opening dropdown.');
+                        }
                     }
                 }, wrapperClass: "tab__iconToolbar iconToolbar" })), h("span", { class: `tab-indicator ${node.active ? ' tab-indicator--active' : ''}` }, h("span", { class: "tab-indicator__content tab-indicator__content--underline" }))));
             tabBar.push(tabEl);
@@ -650,27 +654,6 @@ export class KupTabBar {
                         }
                     }
                 }
-            }, {
-                "method": "kupInfoIconClick",
-                "name": "kup-tabbar-infoiconclick",
-                "bubbles": true,
-                "cancelable": false,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Triggered when the icon inside tab is clicked."
-                },
-                "complexType": {
-                    "original": "KupTabBarEventPayload",
-                    "resolved": "KupTabBarEventPayload",
-                    "references": {
-                        "KupTabBarEventPayload": {
-                            "location": "import",
-                            "path": "./kup-tab-bar-declarations",
-                            "id": "src/components/kup-tab-bar/kup-tab-bar-declarations.ts::KupTabBarEventPayload"
-                        }
-                    }
-                }
             }, {
                 "method": "kupFocus",
                 "name": "kup-tabbar-focus",
@@ -693,8 +676,8 @@ export class KupTabBar {
                     }
                 }
             }, {
-                "method": "kupItemClick",
-                "name": "kup-tabbar-itemclick",
+                "method": "kupToolbarItemClick",
+                "name": "kup-tabbar-toolbaritemclick",
                 "bubbles": true,
                 "cancelable": false,
                 "composed": true,

package/dist/collection/components/kup-toolbar/kup-toolbar.css

@@ -185,13 +185,27 @@
   position: absolute;
   top: 0;
   left: 100%;
-  display: none;
+  visibility: hidden;
+  opacity: 0;
   z-index: 10;
-  transition: display 0.2s ease;
+  transition: opacity 0.2s ease, visibility 0.2s ease;
   background-color: var(--kup-gray-color-10);
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.05);
   width: inherit;
-  max-width: 200px;
+  pointer-events: none;
+}
+.parent-class > .nested-class.align-left {
+  left: auto;
+  right: 100%;
+}
+.parent-class > .nested-class.align-right {
+  left: 100%;
+  right: auto;
+}
+.parent-class:hover:not(.toolbar-item-disabled) > .nested-class {
+  visibility: visible;
+  opacity: 1;
+  pointer-events: auto;
 }
 .parent-class .chevron-right {
   float: right;
@@ -203,9 +217,6 @@
   font-weight: 400;
   letter-spacing: 1px;
 }
-.parent-class:hover:not(.toolbar-item-disabled) > .nested-class {
-  display: block;
-}
 
 .chevron-type-wrapper {
   display: flex;

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

@@ -983,7 +983,13 @@ export class KupTree {
                     const cell = treeNodeData.cells[column.name]
                         ? treeNodeData.cells[column.name]
                         : null;
-                    cell.style = treeNodeData.style && 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,
@@ -1361,23 +1367,20 @@ export class KupTree {
         // Calculates if header must be shown or not
         const visibleHeader = this.showHeader && this.showColumns;
         let filterField = null;
-        if (this.globalFilter &&
-            this.data &&
-            this.data.length &&
-            this.data.length > 0) {
-            filterField = (h("div", { key: '0d3ffb1b2c0bcb8eaa05fd1fdf74eea6bb6ffd0e', id: "global-filter" }, h("kup-text-field", { key: 'aa071c6d5dd62f0d38166abcc8a13bd5c00d5465', 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) => {
+        if (this.globalFilter) {
+            filterField = (h("div", { key: '7567ac1ef9545bea4bc979736a90604aafabe599', id: "global-filter" }, h("kup-text-field", { key: '9d4320f25390cdd9916b69b10c176c6aa6f3ee19', 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: 'b329a41c2100da19dc07aa066db346232cca214c', "onKup-cell-click": (e) => {
+        return (h(Host, { key: '1707b7cb390d30ef0786500509bf5ba6eac9194c', "onKup-cell-click": (e) => {
                 this.kupTreeCellClick.emit(e.detail);
-            } }, h("style", { key: 'ca79698fe6059d8402bded86e888d468ce181b65' }, __classPrivateFieldGet(this, _KupTree_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'bf30f1d622ea6a9dff926d9ffc81e3b15038255a', id: componentWrapperId, class: wrapperClass, style: wrapperStyle }, filterField, h("div", { key: '12e3100231bcc86d1d60c969dafc23c0c3a71a64', class: "wrapper", ref: (el) => (this.treeWrapperRef =
-                el) }, h("table", { key: '5449b7e73fa4b064d25db8fc443ead1a33f188c5', class: "kup-tree", "data-show-columns": this.showColumns, onContextMenu: (e) => {
+            } }, h("style", { key: 'ba9df04a579abe0848f08eb7ade8023dc4198438' }, __classPrivateFieldGet(this, _KupTree_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '0c1a22cbf5a8a33e58d4b7d39f3f6083f07beab2', id: componentWrapperId, class: wrapperClass, style: wrapperStyle }, filterField, h("div", { key: '32dde2e7b8f85421ed3506f60421348205e0214d', class: "wrapper", ref: (el) => (this.treeWrapperRef =
+                el) }, h("table", { key: '0ee43ca41e9fe5a0dfbf0e446c687a7bf89f8acf', class: "kup-tree", "data-show-columns": this.showColumns, onContextMenu: (e) => {
                 e.preventDefault();
-            } }, h("thead", { key: 'd5976da1d6f0603113497856af95ac2a8818bd09', class: {
+            } }, h("thead", { key: 'd65ad49173c71366513c9c3a0900132b0865ab9a', class: {
                 'header--is-visible': visibleHeader,
-            } }, h("tr", { key: 'f75ce0e26d7cff3c1f173388702296d84f748529' }, visibleHeader ? this.renderHeader() : null)), h("tbody", { key: 'ac81183ca8f13d9d72c454a311e68f59ff343d23' }, treeNodes), (this.showFooter || this.hasTotals()) &&
+            } }, h("tr", { key: '19d41241f8db4ea2509d8e203275a32ee72e8a0e' }, visibleHeader ? this.renderHeader() : null)), h("tbody", { key: 'acdb52709fbe70f644128e034d28b3db414845b0' }, treeNodes), (this.showFooter || this.hasTotals()) &&
             this.columns
             ? this.renderFooter()
             : null)))));

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 }));
@@ -915,7 +915,8 @@ function cellEvent(e, props, cellType, cellEventName) {
 }
 function getValueFromEventTarget(e, cellType) {
     var _a;
-    const isInputEvent = !!(e.target.tagName === 'INPUT' || 'TEXTAREA');
+    const isInputEvent = !!(e.target.tagName === 'INPUT' ||
+        e.target.tagName === 'TEXTAREA');
     let value = isInputEvent
         ? e.target.value
         : e.detail.value;

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

@@ -36,7 +36,7 @@ export const FRadio = (props) => {
                     props.onChange(i, e);
                 }
                 e.stopPropagation();
-            } }, radioType === FRadioType.CHEVRON && (h(FImage, { resource: data.icon, sizeX: "14px", sizeY: "14px" })), h("label", { htmlFor: 'radio-element' }, data.label ? data.label : ''))));
+            } }, radioType === FRadioType.CHEVRON && (h(FImage, { resource: data.icon, sizeX: "14px", sizeY: "14px" })), h("label", { htmlFor: 'radio-element' }, data.label ? data.label : ''), data.shortcutLabel && (h("div", { class: "shortcut" }, data.shortcutLabel)))));
     }
     const styleObj = {
         '--kup_radio_columns': hasColumns

package/dist/collection/f-components/f-text-field/f-text-field.js

@@ -247,7 +247,7 @@ function setContent(props) {
                 e.preventDefault();
                 return;
             }
-        } })), props.trailingIcon ? iconEl : undefined, props.helperIcon && props.error ? (h("div", { class: "mdc-error-icon" }, h(FImage, Object.assign({}, propsFImage)))) : props.helperIcon && props.alert ? (h("div", { class: "mdc-alert-icon" }, h(FImage, Object.assign({}, propsFImage)))) : undefined, props.quantityButtons && (h("div", { class: "mdc-quantity-buttons" }, h("button", { onClick: props.onMinusClick }, minusEl), h("button", { onClick: props.onPlusClick }, plusEl))), props.isClearable ? (h("span", { class: `mdc-text-field__icon kup-icon ${KupThemeIconValues.CLEAR.replace('--', '')}`, onClick: props.onClearIconClick })) : undefined)));
+        } })), props.trailingIcon ? iconEl : undefined, props.helperIcon && props.error ? (h("div", { class: "mdc-error-icon" }, h(FImage, Object.assign({}, propsFImage)))) : props.helperIcon && props.alert ? (h("div", { class: "mdc-alert-icon" }, h(FImage, Object.assign({}, propsFImage)))) : undefined, props.quantityButtons && (h("div", { class: "mdc-quantity-buttons" }, h("button", { onClick: props.onMinusClick }, minusEl), h("button", { onClick: props.onPlusClick }, plusEl))), props.isClearable && props.value ? (h("span", { class: `mdc-text-field__icon kup-icon ${KupThemeIconValues.CLEAR.replace('--', '')}`, onClick: props.onClearIconClick })) : undefined)));
 }
 /**
  * Generates a helper HTML element for a text field based on the provided properties.

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

@@ -234,8 +234,59 @@ export class KupData {
              * @returns {boolean} if cell contain action showed on f-cell
              */
             hasActionCell: (cell, commands) => {
+                if (!cell || !cell.obj)
+                    return false;
                 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) {