@sme.up/ketchup 10.1.1 → 10.3.0

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

@@ -26,23 +26,24 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var _KupInputPanel_instances, _KupInputPanel_kupManager, _KupInputPanel_formRef, _KupInputPanel_optionsAdapterMap, _KupInputPanel_originalData, _KupInputPanel_eventNames, _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";
+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 { 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 { 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() {
@@ -62,18 +63,6 @@ export class KupInputPanel {
             ['SmeupTable', __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_tableOptionsAdapter).bind(this)],
         ]));
         _KupInputPanel_originalData.set(this, null);
-        _KupInputPanel_eventNames.set(this, new Map([
-            [
-                FCellTypes.AUTOCOMPLETE,
-                ['kup-autocomplete-input', 'kup-autocomplete-iconclick'],
-            ],
-            [
-                FCellTypes.MULTI_AUTOCOMPLETE,
-                ['kup-autocomplete-input', 'kup-autocomplete-iconclick'],
-            ],
-            [FCellTypes.COMBOBOX, ['kup-combobox-iconclick', 'kup-combobox-blur']],
-            [FCellTypes.MULTI_COMBOBOX, ['kup-combobox-iconclick']],
-        ]));
         _KupInputPanel_listeners.set(this, []);
         _KupInputPanel_cellTypeComponents.set(this, new Map([
             [FCellTypes.DATE, 'kup-date-picker'],
@@ -125,17 +114,36 @@ 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);
         }
     }
     //#endregion
+    //#region LISTENERS
+    /*-------------------------------------------------*/
+    /*                L i s t e n e r s                */
+    /*-------------------------------------------------*/
+    listenKeydown(e) {
+        switch (e.key) {
+            case 'Enter':
+                e.preventDefault();
+                e.stopPropagation();
+                const rootActiveElement = this.rootElement.shadowRoot
+                    .activeElement;
+                const keyPressed = e.key.toLowerCase();
+                if (keyPressed === 'enter' && rootActiveElement) {
+                    rootActiveElement === null || rootActiveElement === void 0 ? void 0 : rootActiveElement.blur();
+                    this.submitCb({
+                        value: {
+                            before: Object.assign({}, __classPrivateFieldGet(this, _KupInputPanel_originalData, "f")),
+                            after: __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_reverseMapCells).call(this),
+                        },
+                    });
+                }
+                break;
+        }
+    }
+    //#endregion
     //#region PUBLIC METHODS
     /*-------------------------------------------------*/
     /*           P u b l i c   M e t h o d s           */
@@ -167,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
     /*-------------------------------------------------*/
@@ -214,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: 'dbdcea70dee7a15875679d128fb3c87f119f6424', "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: '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) => {
                 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);
@@ -222,14 +237,11 @@ export class KupInputPanel {
                 this.kupInputPanelObjectFieldOpenSearchMenu.emit(e.detail);
             }, "onKup-objectfield-selectedmenuitem": (e) => {
                 this.kupInputPanelObjectFieldSelectedMenuItem.emit(e.detail);
-            } }, h("style", { key: '205b4ab0e873a16ae0f4f4ee966c7ab00df2d416' }, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '8463d91d592fe26632207ac7ddff481a4fc96abb', id: componentWrapperId }, inputPanelContent)));
+            } }, h("style", { key: '0e7d0c363c2ca6c6c9742b633f6f4bc54c8fee19' }, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '9c9a06f9c2b7cc15b3e1a844824d5153b1f2f399', 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"; }
@@ -357,7 +369,7 @@ export class KupInputPanel {
                             "name": "default",
                             "text": "false"
                         }],
-                    "text": "Creates a hidden submit button in order to submit the form with enter."
+                    "text": "Creates a hidden submit button in order to submit the form with enter.``"
                 },
                 "attribute": "hidden-submit-button",
                 "reflect": false,
@@ -791,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"
+                        }]
+                }
             }
         };
     }
@@ -801,8 +837,20 @@ export class KupInputPanel {
                 "methodName": "onDataChanged"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "listenKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
-_KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(), _KupInputPanel_optionsAdapterMap = new WeakMap(), _KupInputPanel_originalData = new WeakMap(), _KupInputPanel_eventNames = 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_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);
@@ -829,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) {
@@ -902,12 +951,13 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
     if (customRender !== undefined) {
         return customRender(cell, column, (_a = row.layout) === null || _a === void 0 ? void 0 : _a.absolute);
     }
+    cell.data = Object.assign(Object.assign({}, cell.data), { sizing: 'extra-small' });
     const cellProps = {
         cell,
         column,
         row,
-        component: this,
         editable: true,
+        component: this,
         renderKup: true,
         setSizes: true,
     };
@@ -917,7 +967,8 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
     }
     return h(FCell, Object.assign({}, cellProps));
 }, _KupInputPanel_renderButton = function _KupInputPanel_renderButton(cell, { name }) {
-    return (h(FButton, Object.assign({ icon: cell.icon, id: name }, cell.data, { wrapperClass: "form__submit" })));
+    const renderedButton = (h(FButton, Object.assign({ icon: cell.icon, 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) => {
             __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_getFunctionOnClickBTN).call(this, e.detail.node, e.detail.node.id);
@@ -943,16 +994,20 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
 }, _KupInputPanel_renderDataTable = function _KupInputPanel_renderDataTable(cell, { name }) {
     return (h("kup-data-table", Object.assign({ id: name, editableData: true, showGroups: true, showFilters: true }, cell.data)));
 }, _KupInputPanel_renderLabel = function _KupInputPanel_renderLabel(cell, column, isAbsoluteLayout) {
-    const cellType = dom.ketchup.data.cell.getType(cell, cell.shape);
-    const baseClass = 'input-panel-label';
-    const additionalClass = isAbsoluteLayout
-        ? ' input-panel-label--legacy-look'
-        : '';
-    const numberClass = cellType === FCellTypes.NUMBER ? ' input-panel-label-number' : '';
-    if (cellType === FCellTypes.NUMBER) {
-        return (h("span", { class: `${baseClass}${additionalClass}${numberClass}`, id: column.name }, getCellValueForDisplay(column, cell)));
-    }
-    return (h("span", { class: `${baseClass}${additionalClass}`, id: column.name }, cell.value));
+    const isNumberType = dom.ketchup.objects.isNumber(cell.obj);
+    const isFormattableType = isNumberType ||
+        dom.ketchup.objects.isDate(cell.obj) ||
+        dom.ketchup.objects.isTime(cell.obj) ||
+        dom.ketchup.objects.isTimestamp(cell.obj);
+    const classList = ['input-panel-label'];
+    if (isAbsoluteLayout)
+        classList.push('input-panel-label--legacy-look');
+    if (isNumberType)
+        classList.push('input-panel-label-number');
+    const value = isFormattableType
+        ? getCellValueForDisplay(column, cell)
+        : cell.value;
+    return (h("span", { class: classList.join(' '), id: column.name }, h(FLabel, { text: value })));
 }, _KupInputPanel_getLabelComponent = function _KupInputPanel_getLabelComponent(cell, label) {
     if (!label) {
         return null;
@@ -1019,7 +1074,14 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
         content = section.sections.map((innerSection) => __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_renderAbsoluteSection).call(this, cells, innerSection));
     }
     else if ((_b = section.content) === null || _b === void 0 ? void 0 : _b.length) {
-        content = section.content.map((field) => __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_renderAbsoluteField).call(this, cells, field));
+        const firstTBL = section.content.find((item) => item.shape === FCellShapes.TABLE);
+        const absoluteTblPositioningData = firstTBL
+            ? {
+                absoluteRow: firstTBL.absoluteRow,
+                absoluteHeight: firstTBL.absoluteHeight,
+            }
+            : {};
+        content = section.content.map((field) => __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_renderAbsoluteField).call(this, cells, field, absoluteTblPositioningData));
     }
     //If width is not specified the div in the return at the end can be removed
     if (getAbsoluteWidth(section.absoluteWidth) == null) {
@@ -1117,7 +1179,7 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
         'grid-row-end': rowEnd,
     };
     return (h("div", { style: styleObj }, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_renderCell).call(this, fieldCell.cell, cells.row, fieldCell.column)));
-}, _KupInputPanel_renderAbsoluteField = function _KupInputPanel_renderAbsoluteField(cells, field) {
+}, _KupInputPanel_renderAbsoluteField = function _KupInputPanel_renderAbsoluteField(cells, field, absoluteTblPositioningData) {
     const fieldCell = cells.cells.find((cell) => cell.column.name === field.id);
     if (!fieldCell || !fieldCell.cell || !fieldCell.column.visible) {
         return;
@@ -1134,25 +1196,21 @@ _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);
+    const absoluteTop = getAbsoluteTop(field.absoluteRow, absoluteTblPositioningData);
     const absoluteLeft = getAbsoluteLeft(field.absoluteColumn);
     const styleObj = {
         position: 'absolute',
-        width: absoluteWidth !== null ? `${absoluteWidth}px` : null,
-        'min-width': absoluteWidth !== null ? `${absoluteWidth}px` : null,
-        'max-width': absoluteWidth !== null ? `${absoluteWidth}px` : null,
-        height: absoluteHeight !== null ? `${absoluteHeight}px` : null,
-        'min-height': absoluteHeight !== null ? `${absoluteHeight}px` : null,
-        'max-height': absoluteHeight !== null ? `${absoluteHeight}px` : null,
-        top: absoluteTop !== null
-            ? `${getAbsoluteTop(field.absoluteRow)}px`
-            : null,
-        left: absoluteLeft !== null
-            ? `${getAbsoluteLeft(field.absoluteColumn)}px`
-            : null,
-        overflow: 'auto',
+        width: absoluteWidth != null ? `${absoluteWidth}px` : null,
+        'min-width': absoluteWidth != null ? `${absoluteWidth}px` : null,
+        'max-width': absoluteWidth != null ? `${absoluteWidth}px` : null,
+        height: absoluteHeight != null ? `${absoluteHeight}px` : null,
+        'min-height': absoluteHeight != null ? `${absoluteHeight}px` : null,
+        'max-height': absoluteHeight != null ? `${absoluteHeight}px` : null,
+        top: absoluteTop != null ? `${absoluteTop}px` : null,
+        left: absoluteLeft != null ? `${absoluteLeft}px` : null,
+        overflow: 'hidden',
     };
     fieldCell.cell.data = Object.assign(Object.assign(Object.assign({}, fieldCell.cell.data), { customStyle: (fieldCell.cell.data.customStyle || '') +
             '.mdc-text-field {height: unset !important;}', legacyLook: true, helperEnabled: false }), (fieldCell.cell.shape === FCellShapes.TABLE && {
@@ -1214,7 +1272,7 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
     }));
     this.inputPanelCells = inpuPanelCells;
 }, _KupInputPanel_setData = function _KupInputPanel_setData(cell, column, layout) {
-    const defaultProps = Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_mapData).call(this, cell, column, layout)), { disabled: !cell.editable, id: column.name });
+    const defaultProps = Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_mapData).call(this, cell, column, layout)), { disabled: !cell.isEditable, id: column.name });
     const cellType = dom.ketchup.data.cell.getType(cell, cell.shape);
     const _a = cell.data || {}, { data } = _a, noDataProps = __rest(_a, ["data"]);
     return cellType !== FCellTypes.MULTI_AUTOCOMPLETE &&
@@ -1302,25 +1360,22 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
         : null;
 }, _KupInputPanel_slotData = function _KupInputPanel_slotData(cell, col) {
     const cellType = dom.ketchup.data.cell.getType(cell, cell.shape);
-    if (!cell.editable) {
-        return null;
-    }
     if (cellType === FCellTypes.CHIP) {
         return {
             trailingIcon: true,
             label: col.title,
-            disabled: !cell.editable,
+            disabled: !cell.isEditable,
             id: col.name,
             fullWidth: false,
         };
     }
     if (cellType === FCellTypes.MULTI_AUTOCOMPLETE ||
         cellType === FCellTypes.MULTI_COMBOBOX) {
-        return Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_CMBandACPAdapter).call(this, cell.options, col.title, null)), { showDropDownIcon: true, class: '', style: { width: '100%' }, disabled: !cell.editable, id: col.name });
+        return Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_CMBandACPAdapter).call(this, cell.options, col.title, null)), { showDropDownIcon: true, class: '', style: { width: '100%' }, disabled: !cell.isEditable, id: col.name });
     }
     return null;
-}, _KupInputPanel_CHIAdapter = function _KupInputPanel_CHIAdapter(_options, _fieldLabel, currentValue) {
-    return CHIAdapter(currentValue);
+}, _KupInputPanel_CHIAdapter = function _KupInputPanel_CHIAdapter(_options, _fieldLabel, currentValue, cell) {
+    return CHIAdapter(currentValue, cell.decode);
 }, _KupInputPanel_GRAAdapter = function _KupInputPanel_GRAAdapter() {
     //TODO: definire mapping
     return {
@@ -1335,15 +1390,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, []);
@@ -1378,9 +1428,7 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
 }, _KupInputPanel_ITXAdapter = function _KupInputPanel_ITXAdapter(_options, fieldLabel, _currentValue, cell, id) {
     var _a;
     const data = Object.assign({ label: fieldLabel }, cell.data);
-    if (this.autoSkip &&
-        (cell.isEditable || cell.editable) &&
-        ((_a = cell.data) === null || _a === void 0 ? void 0 : _a.maxLength)) {
+    if (this.autoSkip && cell.isEditable && ((_a = cell.data) === null || _a === void 0 ? void 0 : _a.maxLength)) {
         data.onInput = (event) => {
             __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_setAutoSkip).call(this, id, event);
         };
@@ -1517,21 +1565,16 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
         const [id, value] = Object.keys(cells);
         return {
             id: cells[id].value,
-            value: cells[value].value || cells[id].value,
+            value: value ? cells[value].value : cells[id].value,
             selected: currentValue === cells[id].value,
         };
     });
 }, _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) {
     this.optionsHandler(cell.fun, detail.inputValue, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_reverseMapCells).call(this), detail.id).then((options) => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         const visibleColumns = ((_a = options === null || options === void 0 ? void 0 : options.columns) === null || _a === void 0 ? void 0 : _a.filter((col) => (col === null || col === void 0 ? void 0 : col.visible) || !('visible' in col)).map((col) => col.name)) || [];
         const filteredRows = (_b = options === null || options === void 0 ? void 0 : options.rows) === null || _b === void 0 ? void 0 : _b.map((row) => {
             const { cells } = row;
@@ -1544,11 +1587,14 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
             return Object.assign(Object.assign({}, row), { cells: filteredCells });
         });
         const visibleColumnsOptions = Object.assign(Object.assign({}, options), { rows: filteredRows });
-        const kupListData = (_d = (_c = cell.data) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d['kup-list'];
+        const kupListData = cell.shape === FCellShapes.MULTI_AUTOCOMPLETE
+            ? cell.slotData.data['kup-list']
+            : (_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 : []
                 : [];
+            kupListData.options = (_f = options.columns) !== null && _f !== void 0 ? _f : [];
         }
         else {
             __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").debug.logMessage(this, 'getAutocompleteEventCallback() - "kup-list" not found in cell.data.data', KupDebugCategory.WARNING);
@@ -1633,7 +1679,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-lazy/kup-lazy.css

@@ -24,7 +24,7 @@
 
 .kup-label-01 {
   font-family: var(--kup-font-family);
-  font-size: 12px;
+  font-size: var(--kup-label-01-font-size, 12px);
   line-height: 16px;
   font-weight: 400;
   letter-spacing: 0.32px;
@@ -56,7 +56,7 @@
 
 .kup-heading-compact-01 {
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-compact-01-font-size, 14px);
   line-height: 18px;
   font-weight: 600;
   letter-spacing: 0.16px;
@@ -64,7 +64,7 @@
 
 .kup-heading-01 {
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-01-font-size, 14px);
   line-height: 20px;
   font-weight: 600;
   letter-spacing: 0.16px;

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

@@ -108,39 +108,39 @@ export class KupLazy {
         switch (this.componentName) {
             case 'kup-button':
                 //call_to_action.svg
-                resource = (h("svg", { key: '97f1ca2b82116e8b63008292c5509af0c04948e4', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '4085092defe3739995902b7337fcf3c83ae93a75', d: "M42 6H6c-2.2 0-4 1.8-4 4v28c0 2.2 1.8 4 4 4h36c2.2 0 4-1.8 4-4V10c0-2.2-1.8-4-4-4zm0 32H6v-6h36v6z" })));
+                resource = (h("svg", { key: '3d3f813296d36cdcd7d173d9f436e0d552a0673b', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '23e46931d75401379ce83357a9c343c7c720acfd', d: "M42 6H6c-2.2 0-4 1.8-4 4v28c0 2.2 1.8 4 4 4h36c2.2 0 4-1.8 4-4V10c0-2.2-1.8-4-4-4zm0 32H6v-6h36v6z" })));
                 break;
             case 'kup-card':
                 //art_track.svg
-                resource = (h("svg", { key: 'c11ebaf638b51de55f75f5743a7346065b45b676', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '5887de2553be51db0d4968c240ce12e1406d0fdb', d: "M44 26H28v-4h16v4zm0-12H28v4h16v-4zM28 34h16v-4H28v4zm-4-16v12c0 2.2-1.8 4-4 4H8c-2.2 0-4-1.8-4-4V18c0-2.2 1.8-4 4-4h12c2.2 0 4 1.8 4 4zm-3 12l-4.5-6-3.5 4.51-2.5-3.01L7 30h14z" })));
+                resource = (h("svg", { key: '31f0e5169cd260697da6edd1c763db915b8153cf', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '65ac92668eb2914e838b8333f7db8b863f500435', d: "M44 26H28v-4h16v4zm0-12H28v4h16v-4zM28 34h16v-4H28v4zm-4-16v12c0 2.2-1.8 4-4 4H8c-2.2 0-4-1.8-4-4V18c0-2.2 1.8-4 4-4h12c2.2 0 4 1.8 4 4zm-3 12l-4.5-6-3.5 4.51-2.5-3.01L7 30h14z" })));
                 break;
             case 'kup-checkbox':
                 //check_box_outline_blank.svg
-                resource = (h("svg", { key: '38580b00926d228c51e95cc8096bf9da9eb62d63', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'ce96fa50c1751e0250799df3cd1090af38022830', d: "M38 10v28H10V10h28m0-4H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V10c0-2.21-1.79-4-4-4z" })));
+                resource = (h("svg", { key: 'e969df1de6bddaad47c745033e6c67f3cd155067', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '32a60569f176c7e0bda2577c5f28116e6102741f', d: "M38 10v28H10V10h28m0-4H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V10c0-2.21-1.79-4-4-4z" })));
                 break;
             case 'kup-chart':
                 //chart-bar.svg
-                resource = (h("svg", { key: '7cbb43088541b01d6950109dd13e6bdef7d3b30c', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: 'f852949cabbbe7ce2a15fd1030b0deb221b8771b', d: "M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z" })));
+                resource = (h("svg", { key: '3990a3b5027d15ba60962352f011efc0bc0bdbc8', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: 'c745d3d21ce3dcc2f6eae81c558cdfb9ddf7856c', d: "M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z" })));
                 break;
             case 'kup-data-table':
                 //table-large.svg
-                resource = (h("svg", { key: '8a9ba11c79ebf883afd5b12ff8f3e39d4b82f480', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: '9702a12fab43642151e6355525da6fdae9e2552d', d: "M4,3H20A2,2 0 0,1 22,5V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V5A2,2 0 0,1 4,3M4,7V10H8V7H4M10,7V10H14V7H10M20,10V7H16V10H20M4,12V15H8V12H4M4,20H8V17H4V20M10,12V15H14V12H10M10,20H14V17H10V20M20,20V17H16V20H20M20,12H16V15H20V12Z" })));
+                resource = (h("svg", { key: '39530590dd10736009c375b5f21e8a62b9e9bb6e', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: '929b9d6f5a883ae75056635152b971f41b4f7fab', d: "M4,3H20A2,2 0 0,1 22,5V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V5A2,2 0 0,1 4,3M4,7V10H8V7H4M10,7V10H14V7H10M20,10V7H16V10H20M4,12V15H8V12H4M4,20H8V17H4V20M10,12V15H14V12H10M10,20H14V17H10V20M20,20V17H16V20H20M20,12H16V15H20V12Z" })));
                 break;
             case 'kup-image':
                 //photo.svg
-                resource = (h("svg", { key: 'df4c36c00ca1d05a5157e3ff0f12daf40767bc38', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '1905f0759c4a11e28cf917147426f21b8314df5b', d: "M42 38V10c0-2.21-1.79-4-4-4H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4zM17 27l5 6.01L29 24l9 12H10l7-9z" })));
+                resource = (h("svg", { key: 'e0352a356d272be14bbb79539526c0cb72ffcea1', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'c2743da82c65cc5a8a8238dda4bbd79a07a4f7e6', d: "M42 38V10c0-2.21-1.79-4-4-4H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4zM17 27l5 6.01L29 24l9 12H10l7-9z" })));
                 break;
             case 'kup-progress-bar':
                 //linear_scale.svg
-                resource = (h("svg", { key: 'a00db5e970b86023d4cc62559506de942eedd54e', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '2c67481c2c0e0ee406a60faed62c484e8cd544b2', d: "M39 19c-2.05 0-3.81 1.23-4.58 3h-5.84c-.77-1.77-2.53-3-4.58-3s-3.81 1.23-4.58 3h-5.84c-.77-1.77-2.53-3-4.58-3-2.77 0-5 2.23-5 5s2.23 5 5 5c2.05 0 3.81-1.23 4.58-3h5.84c.77 1.77 2.53 3 4.58 3s3.81-1.23 4.58-3h5.84c.77 1.77 2.53 3 4.58 3 2.77 0 5-2.23 5-5s-2.23-5-5-5z" })));
+                resource = (h("svg", { key: '490fc3794bf51a697a165784e7c2f3e208e0fb24', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'd6fe5a4e35eb39076669fff9027bc300ac0ea7a9', d: "M39 19c-2.05 0-3.81 1.23-4.58 3h-5.84c-.77-1.77-2.53-3-4.58-3s-3.81 1.23-4.58 3h-5.84c-.77-1.77-2.53-3-4.58-3-2.77 0-5 2.23-5 5s2.23 5 5 5c2.05 0 3.81-1.23 4.58-3h5.84c.77 1.77 2.53 3 4.58 3s3.81-1.23 4.58-3h5.84c.77 1.77 2.53 3 4.58 3 2.77 0 5-2.23 5-5s-2.23-5-5-5z" })));
                 break;
             case 'kup-radio':
                 //radio_button_unchecked.svg
-                resource = (h("svg", { key: '30a43ea718b74ac8aba142cac7552e27523c825c', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '13e7cfb5c923d8fd2793e88f63ebdd5ea7324535', d: "M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z" })));
+                resource = (h("svg", { key: 'ddaca4167f0df39ff99c2eedf51da43e11daa217', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'f1277d43c4b879169ef89e57f3212adc3bd1673b', d: "M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z" })));
                 break;
             default:
                 //art_track.svg
-                resource = (h("svg", { key: '33c37913976e808f144b68baf2dd9bb95d20ac8a', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'ef96c0abc3c65121388bb3f55e560f0d3e80ec64', d: "M44 26H28v-4h16v4zm0-12H28v4h16v-4zM28 34h16v-4H28v4zm-4-16v12c0 2.2-1.8 4-4 4H8c-2.2 0-4-1.8-4-4V18c0-2.2 1.8-4 4-4h12c2.2 0 4 1.8 4 4zm-3 12l-4.5-6-3.5 4.51-2.5-3.01L7 30h14z" })));
+                resource = (h("svg", { key: 'bac4baf6a31b7f455fb1ec4875c2d01109a136cf', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '6766752680a0ece7a570ae86cb7ea7451b2f6768', d: "M44 26H28v-4h16v4zm0-12H28v4h16v-4zM28 34h16v-4H28v4zm-4-16v12c0 2.2-1.8 4-4 4H8c-2.2 0-4-1.8-4-4V18c0-2.2 1.8-4 4-4h12c2.2 0 4 1.8 4 4zm-3 12l-4.5-6-3.5 4.51-2.5-3.01L7 30h14z" })));
                 break;
         }
         if ((this.renderMode === KupLazyRender.VIEWPORT && this.isInViewport) ||
@@ -149,14 +149,14 @@ export class KupLazy {
                 this.data &&
                 this.isInViewport)) {
             let Tag = this.componentName;
-            content = (h(Tag, Object.assign({ key: 'a6a2e8b0fbb26a782f2bed3fdf114a25547425f0' }, this.data, { ref: (el) => (this.lazyComponent = el) })));
+            content = (h(Tag, Object.assign({ key: 'c0d1463f2f6d7abde1954aed56c87727966a421b' }, this.data, { ref: (el) => (this.lazyComponent = el) })));
             className += ' kup-loaded';
         }
         else if (this.showPlaceholder) {
             content = resource;
             className += ' kup-to-be-loaded';
         }
-        return (h(Host, { key: 'c2dfa45261248077fe82bac49bc08cd43a0952dc', class: className }, h("style", { key: 'a4781852c8d2c3852e14c67c5faea99345101861' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'f54db109ce2ec685dbc25623ba22c2b95d7e1794', id: componentWrapperId }, content)));
+        return (h(Host, { key: '71c1a3aec26a79f50340cb14cf92f79fedd590a1', class: className }, h("style", { key: '41231e59fd53a143644414d9dc15e4be2c7b4715' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '210ea58d84ae6f3ecf2a224cb5e65f74e1b1469f', id: componentWrapperId }, content)));
     }
     disconnectedCallback() {
         var _a;

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

@@ -24,7 +24,7 @@
 
 .kup-label-01 {
   font-family: var(--kup-font-family);
-  font-size: 12px;
+  font-size: var(--kup-label-01-font-size, 12px);
   line-height: 16px;
   font-weight: 400;
   letter-spacing: 0.32px;
@@ -56,7 +56,7 @@
 
 .kup-heading-compact-01 {
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-compact-01-font-size, 14px);
   line-height: 18px;
   font-weight: 600;
   letter-spacing: 0.16px;
@@ -64,7 +64,7 @@
 
 .kup-heading-01 {
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-01-font-size, 14px);
   line-height: 20px;
   font-weight: 600;
   letter-spacing: 0.16px;