@sme.up/ketchup 10.1.1 → 10.2.0

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

@@ -3,25 +3,25 @@ import { ItemsDisplayMode } from "../../components/kup-list/kup-list-declaration
 import { KupDebugCategory } from "../../managers/kup-debug/kup-debug-declarations";
 import { KupThemeColorValues } from "../../managers/kup-theme/kup-theme-declarations";
 import { KupComponentSizing, KupTagNames, } from "../../types/GenericTypes";
-import { adaptContentToDisplayMode, CMBandACPAdapter, getCellValueForDisplay, isForceLowercase, isForceUppercase, RADAdapter, } from "../../utils/cell-utils";
+import { adaptContentToDisplayMode, CHIAdapter, CMBandACPAdapter, getCellValueForDisplay, isForceLowercase, isForceUppercase, RADAdapter, } from "../../utils/cell-utils";
 import { FButton } from "../f-button/f-button";
 import { FCheckbox } from "../f-checkbox/f-checkbox";
 import { FChip } from "../f-chip/f-chip";
 import { FChipType } from "../f-chip/f-chip-declarations";
 import { FImage } from "../f-image/f-image";
 import { FObjectField } from "../f-object-field/f-object-field";
-import { FProgressBar } from "../f-progress-bar/f-progress-bar";
 import { FRadio } from "../f-radio/f-radio";
 import { FRating } from "../f-rating/f-rating";
 import { FSwitch } from "../f-switch/f-switch";
 import { FTextField } from "../f-text-field/f-text-field";
 import { autoCenterComps, editableTypes, FCellClasses, FCellEvents, FCellShapes, FCellTypes, fullWidthFieldsComps, kupTypes, } from "./f-cell-declarations";
+import { FLabel } from "../f-label/f-label";
 const dom = document.documentElement;
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */
 /*-------------------------------------------------*/
 export const FCell = (props, children) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const cell = props.cell;
     const column = props.column;
     const row = props.row;
@@ -41,14 +41,13 @@ export const FCell = (props, children) => {
         isEditable = column.isEditable;
     }
     isEditable = isEditable && props.editable;
-    if (cell.options) {
-        cell.data = (_a = mapData(cell, column)) !== null && _a !== void 0 ? _a : cell.data;
-    }
+    cell.data = (_a = mapData(cell, column)) !== null && _a !== void 0 ? _a : cell.data;
     const valueToDisplay = props.previousValue !== cell.value ? cell.value : '';
     const cellType = dom.ketchup.data.cell.getType(cell, shape);
-    const subcomponentProps = Object.assign(Object.assign(Object.assign({}, cell.data), ((cell === null || cell === void 0 ? void 0 : cell.icon) ? { resource: cell.icon } : {})), ((cell === null || cell === void 0 ? void 0 : cell.placeholderIcon)
+    const sizing = props.density === 'extra_dense' ? 'extra-small' : (_b = cell.data) === null || _b === void 0 ? void 0 : _b.sizing;
+    const subcomponentProps = Object.assign(Object.assign(Object.assign(Object.assign({}, cell.data), ((cell === null || cell === void 0 ? void 0 : cell.icon) ? { resource: cell.icon } : {})), ((cell === null || cell === void 0 ? void 0 : cell.placeholderIcon)
         ? { placeholderResource: cell.placeholderIcon }
-        : {}));
+        : {})), (sizing ? { sizing } : {}));
     let cssClasses = cell.cssClass
         ? cell.cssClass
         : (column === null || column === void 0 ? void 0 : column.cssClass)
@@ -63,14 +62,14 @@ export const FCell = (props, children) => {
         [cssClasses]: cssClasses ? true : false,
         'c-input-uppercase': isForceUppercase(cell),
         'c-input-lowercase': isForceLowercase(cell),
-        'monospace c-pre': (_b = cell.data) === null || _b === void 0 ? void 0 : _b.legacyLook,
+        'monospace c-pre': (_c = cell.data) === null || _c === void 0 ? void 0 : _c.legacyLook,
     };
     let content = valueToDisplay;
     if (!cell.data) {
         setDefaults(cellType, cell);
     }
     if (isEditable && editableTypes.includes(cellType)) {
-        cell.data.showMarker = (_c = cell.tooltip) !== null && _c !== void 0 ? _c : false;
+        cell.data.showMarker = (_d = cell.tooltip) !== null && _d !== void 0 ? _d : false;
         content = setEditableCell(cellType, classObj, cell, column, props);
     }
     else if (cell.data && kupTypes.includes(cellType)) {
@@ -89,12 +88,14 @@ export const FCell = (props, children) => {
         if (props.setSizes) {
             setCellSize(cellType, subcomponentProps, cell, props);
         }
-        classObj[FCellClasses.INDICATOR_TOPRIGHT] = (_d = cell.tooltip) !== null && _d !== void 0 ? _d : false;
+        classObj[FCellClasses.INDICATOR_TOPRIGHT] = (_e = cell.tooltip) !== null && _e !== void 0 ? _e : false;
         content = setCell(cellType, subcomponentProps, content, classObj, cell, column, props);
     }
     let icon = null;
     if (!isEditable && (column.icon || cell.icon)) {
         if (content &&
+            cellType != FCellTypes.BUTTON &&
+            cellType != FCellTypes.BUTTON_LIST &&
             cellType != FCellTypes.IMAGE &&
             cellType != FCellTypes.ICON) {
             const fProps = {
@@ -167,11 +168,14 @@ const handleMouseLeave = (event) => {
     }
 };
 const mapData = (cell, column) => {
+    var _a;
     if (!cell) {
         return null;
     }
     const options = cell.options;
-    const fieldLabel = column.title;
+    const fieldLabel = ((_a = cell.data) === null || _a === void 0 ? void 0 : _a.hasOwnProperty('label'))
+        ? cell.data.label
+        : column.title;
     const currentValue = cell.value;
     const cellType = dom.ketchup.data.cell.getType(cell, cell.shape);
     const dataAdapterMap = new Map([
@@ -187,24 +191,20 @@ const mapData = (cell, column) => {
     const adapter = dataAdapterMap.get(cellType);
     return adapter ? adapter(options, fieldLabel, currentValue, cell) : null;
 };
-const MainCHIAdapter = (options, _fieldLabel, _currentValue, cell) => {
-    const newData = {
-        data: (options === null || options === void 0 ? void 0 : options.length)
-            ? options === null || options === void 0 ? void 0 : options.map((option) => ({
-                id: option.id,
-                value: option.id,
-            }))
-            : [],
-    };
-    cell.data = Object.assign(Object.assign({}, cell.data), newData);
+const MainCHIAdapter = (_options, _fieldLabel, _currentValue, cell) => {
+    var _a;
+    if (!((_a = cell.data) === null || _a === void 0 ? void 0 : _a.data)) {
+        return CHIAdapter(cell.value, cell.decode);
+    }
+    else {
+        return Object.assign({}, cell.data);
+    }
 };
-const MainObjectAdapter = (_options, fieldLabel, currentValue, _cell, _id) => ({
-    data: {
+const MainObjectAdapter = (_options, fieldLabel, currentValue, cell, _id) => (Object.assign(Object.assign({}, cell.data), { data: {
         initialValue: currentValue || '',
         label: fieldLabel || '',
         value: currentValue || '',
-    },
-});
+    } }));
 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: [
@@ -214,7 +214,7 @@ const MainBTNAdapter = (_options, _fieldLabel, currentValue, cell) => ({
 const MainITXAdapter = (_options, fieldLabel, _currentValue, cell) => (Object.assign(Object.assign({}, cell.data), { label: fieldLabel }));
 const MainRADAdapter = (options, _fieldLabel, currentValue, cell) => {
     const newData = RADAdapter(currentValue, options);
-    cell.data = Object.assign(Object.assign({}, cell.data), newData);
+    return Object.assign(Object.assign({}, cell.data), newData);
 };
 const MainCMBandACPAdapter = (options, fieldLabel, currentValue, cell, _id) => {
     var _a;
@@ -378,11 +378,11 @@ function setCellSizeKup(cellType, subcomponentProps, cell) {
         case FCellTypes.CHIP:
             if (cell.style) {
                 if (!cell.style.height) {
-                    cell.style['minHeight'] = '40px';
+                    cell.style['minHeight'] = '18px';
                 }
             }
             else {
-                cell.style = { minHeight: '40px' };
+                cell.style = { minHeight: '18px' };
             }
             break;
         case FCellTypes.RADIO:
@@ -398,7 +398,7 @@ function setCellSizeKup(cellType, subcomponentProps, cell) {
     }
 }
 function setEditableCell(cellType, classObj, cell, column, props) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     switch (cellType) {
         case FCellTypes.AUTOCOMPLETE:
             return (h("kup-autocomplete", Object.assign({ key: column.name + props.row.id, initialValue: cell.value, initialValueDecode: cell.decode }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-autocomplete-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-autocomplete-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-autocomplete-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK), "onKup-autocomplete-blur": (e) => cellEvent(e, props, cellType, FCellEvents.BLUR), "onKup-autocomplete-itemclick": (e) => cellEvent(e, props, cellType, FCellEvents.ITEMCLICK) })));
@@ -424,17 +424,31 @@ function setEditableCell(cellType, classObj, cell, column, props) {
         case FCellTypes.DATE:
             return (h("kup-date-picker", Object.assign({ key: column.name + props.row.id, initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-datepicker-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-datepicker-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onKup-datepicker-blur": (e) => cellEvent(e, props, cellType, FCellEvents.BLUR), "onkup-datepicker-textfieldsubmit": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) })));
         case FCellTypes.EDITOR:
+            const onEditorKeyDown = (e) => {
+                const isPlainEnter = e.key === 'Enter' && !e.ctrlKey;
+                const isSubmit = e.key === 'Enter' && e.ctrlKey;
+                if (isPlainEnter) {
+                    e.stopPropagation();
+                    return;
+                }
+                if (isSubmit || /^F[1-9]|F1[0-2]$/.test(e.key)) {
+                    cellEvent(e, props, cellType, FCellEvents.UPDATE);
+                }
+            };
             return (h(FTextField, Object.assign({}, cell.data, { textArea: true, sizing: KupComponentSizing.EXTRA_LARGE, label: column.title, fullWidth: isFullWidth(props) ? true : false, maxLength: cell.data.maxLength, value: cell.value, onChange: (e) => {
                     cellEvent(e, props, cellType, FCellEvents.UPDATE);
                 }, onInput: (e) => {
                     var _a, _b;
                     (_b = (_a = cell.data) === null || _a === void 0 ? void 0 : _a.onInput) === null || _b === void 0 ? void 0 : _b.call(_a, e);
                     cellEvent(e, props, cellType, FCellEvents.INPUT);
-                }, onBlur: (e) => cellEvent(e, props, cellType, FCellEvents.BLUR) })));
-        case FCellTypes.MULTI_AUTOCOMPLETE:
-            return (h("kup-chip", Object.assign({ displayId: true }, cell.data, { type: FChipType.INPUT, enableInput: true, "onKup-chip-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) }), h("kup-autocomplete", Object.assign({ class: "kup-full-width", slot: "field", displayMode: ItemsDisplayMode.CODE_AND_DESC, selectMode: ItemsDisplayMode.CODE_AND_DESC, "onKup-autocomplete-blur": (e) => cellEvent(e, props, cellType, FCellEvents.BLUR), "onkup-autocomplete-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-autocomplete-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK), showDropDownIcon: false }, cell.slotData, { error: cell.data.error, showMarker: (_a = cell.tooltip) !== null && _a !== void 0 ? _a : false }))));
+                }, onBlur: (e) => cellEvent(e, props, cellType, FCellEvents.BLUR), onKeyDown: onEditorKeyDown })));
+        case FCellTypes.FILE_UPLOAD:
+            return h("kup-file-upload", Object.assign({}, cell.data));
+        case FCellTypes.MULTI_AUTOCOMPLETE: {
+            return (h("kup-chip", Object.assign({ displayMode: (_a = cell.data.displayMode) !== null && _a !== void 0 ? _a : ItemsDisplayMode.DESCRIPTION }, cell.data, { label: (_c = (_b = cell.slotData) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : '', type: FChipType.INPUT, enableInput: true, "onKup-chip-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) }), h("kup-autocomplete", { class: "kup-full-width", slot: "field", displayMode: ItemsDisplayMode.CODE_AND_DESC, sizing: KupComponentSizing.EXTRA_SMALL, "onKup-autocomplete-blur": (e) => cellEvent(e, props, cellType, FCellEvents.BLUR), "onkup-autocomplete-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-autocomplete-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK), data: (_d = cell.slotData) === null || _d === void 0 ? void 0 : _d.data, initialValue: (_e = cell.slotData) === null || _e === void 0 ? void 0 : _e.initialValue, showDropDownIcon: (_f = cell.slotData) === null || _f === void 0 ? void 0 : _f.showDropDownIcon, style: (_g = cell.slotData) === null || _g === void 0 ? void 0 : _g.style, disabled: (_h = cell.slotData) === null || _h === void 0 ? void 0 : _h.disabled, id: (_j = cell.slotData) === null || _j === void 0 ? void 0 : _j.id, error: cell.data.error, showMarker: (_k = cell.tooltip) !== null && _k !== void 0 ? _k : false, listDisplayMode: cell.data.listDisplayMode })));
+        }
         case FCellTypes.MULTI_COMBOBOX:
-            return (h("kup-chip", Object.assign({ displayId: true }, cell.data, { type: FChipType.INPUT, enableInput: true, "onKup-chip-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) }), h("kup-combobox", Object.assign({ class: "kup-full-width", slot: "field", displayMode: ItemsDisplayMode.CODE_AND_DESC, selectMode: ItemsDisplayMode.CODE_AND_DESC, "onKup-combobox-blur": (e) => cellEvent(e, props, cellType, FCellEvents.BLUR), "onkup-combobox-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-combobox-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK) }, cell.slotData, { error: cell.data.error, showMarker: (_b = cell.tooltip) !== null && _b !== void 0 ? _b : false }))));
+            return (h("kup-chip", Object.assign({ displayMode: (_l = cell.data.displayMode) !== null && _l !== void 0 ? _l : ItemsDisplayMode.DESCRIPTION }, cell.data, { type: FChipType.INPUT, enableInput: true, "onKup-chip-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) }), h("kup-combobox", Object.assign({ class: "kup-full-width", slot: "field", displayMode: ItemsDisplayMode.CODE_AND_DESC, sizing: KupComponentSizing.EXTRA_SMALL, "onKup-combobox-blur": (e) => cellEvent(e, props, cellType, FCellEvents.BLUR), "onkup-combobox-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-combobox-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK) }, cell.slotData, { error: cell.data.error, showMarker: (_m = cell.tooltip) !== null && _m !== void 0 ? _m : false }))));
         case FCellTypes.RADIO:
             return (h(FRadio, Object.assign({}, cell.data, { disabled: false, onChange: (i, e) => {
                     const radioData = cell.data.data;
@@ -471,11 +485,16 @@ function setEditableCell(cellType, classObj, cell, column, props) {
             const onKeyDown = (e) => {
                 var _a, _b, _c;
                 (_b = (_a = cell.data) === null || _a === void 0 ? void 0 : _a.onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, e); // call onKeyDown handler if it is set as prop
-                if ((!(cell.shape == 'MEMO' ||
-                    cellType == FCellTypes.MEMO ||
-                    ((_c = cell.data) === null || _c === void 0 ? void 0 : _c.maxLength) >= 256) &&
-                    e.key === 'Enter') ||
-                    /^F[1-9]|F1[0-2]$/.test(e.key)) {
+                const isMemo = cell.shape === 'MEMO' ||
+                    ((_c = cell.data) === null || _c === void 0 ? void 0 : _c.maxLength) >= 256 ||
+                    cellType === FCellTypes.MEMO;
+                const isSubmit = e.key === 'Enter' && e.ctrlKey;
+                const isPlainEnter = e.key === 'Enter' && !e.ctrlKey;
+                if (isMemo && isPlainEnter) {
+                    e.stopPropagation();
+                    return;
+                }
+                if (isSubmit || /^F[1-9]|F1[0-2]$/.test(e.key)) {
                     cellEvent(e, props, cellType, FCellEvents.UPDATE);
                 }
             };
@@ -484,14 +503,16 @@ function setEditableCell(cellType, classObj, cell, column, props) {
                 const value = cellType === FCellTypes.NUMBER && cell.value
                     ? getCellValueForDisplay(column, cell)
                     : cell.value;
-                return (h("input", { class: 'input-field', onChange: onChange, onInput: onInput, onKeyDown: onKeyDown, type: type, value: value, maxLength: (_d = (_c = column.cellData) === null || _c === void 0 ? void 0 : _c.maxLength) !== null && _d !== void 0 ? _d : -1 }));
+                return (h("input", { class: 'input-field', onChange: onChange, onInput: onInput, onKeyDown: onKeyDown, type: type, value: value, maxLength: (_p = (_o = column.cellData) === null || _o === void 0 ? void 0 : _o.maxLength) !== null && _p !== void 0 ? _p : -1 }));
             }
             else {
                 const isTextArea = (cell.shape ? cell.shape === FCellShapes.MEMO : false) ||
                     (cellType ? cellType === FCellTypes.MEMO : false);
-                return (h(FTextField, Object.assign({}, cell.data, { textArea: isTextArea, sizing: isTextArea
-                        ? KupComponentSizing.EXTRA_LARGE
-                        : KupComponentSizing.SMALL, inputType: type, fullWidth: isFullWidth(props) ? true : false, maxLength: (cellType == FCellTypes.NUMBER &&
+                return (h(FTextField, Object.assign({}, cell.data, { textArea: isTextArea, sizing: cell.data.sizing
+                        ? cell.data.sizing
+                        : isTextArea
+                            ? KupComponentSizing.EXTRA_LARGE
+                            : KupComponentSizing.SMALL, inputType: type, fullWidth: isFullWidth(props) ? true : false, maxLength: (cellType == FCellTypes.NUMBER &&
                         ((props.column.decimals &&
                             props.column.decimals > 0) ||
                             props.column.group)) ||
@@ -503,7 +524,7 @@ function setEditableCell(cellType, classObj, cell, column, props) {
                             ? cell.icon
                             : column.icon
                                 ? column.icon
-                                : null, decimals: props.column.decimals, integers: props.column.integers, group: props.column.group, value: cell.value, onChange: onChange, onInput: onInput, onKeyDown: onKeyDown, onIconClick: (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK), onBlur: (e) => cellEvent(e, props, cellType, FCellEvents.BLUR) })));
+                                : null, decimals: props.column.decimals, integers: props.column.integers, group: props.column.group, value: cell.value, label: column.title, onChange: onChange, onInput: onInput, onKeyDown: onKeyDown, onIconClick: (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK), onBlur: (e) => cellEvent(e, props, cellType, FCellEvents.BLUR) })));
             }
     }
 }
@@ -531,6 +552,7 @@ function setCell(cellType, subcomponentProps, content, classObj, cell, column, p
                     ? 'check_box'
                     : 'check_box_outline_blank', sizeX: "18px", sizeY: "18px" }));
         case FCellTypes.EDITOR:
+        case FCellTypes.MEMO:
             return h("div", { innerHTML: cell.value });
         case FCellTypes.ICON:
             if (isAutoCentered(props)) {
@@ -569,6 +591,8 @@ function setCell(cellType, subcomponentProps, content, classObj, cell, column, p
             }
             subcomponentProps['disabled'] = true;
             return h(FSwitch, Object.assign({}, subcomponentProps));
+        case FCellTypes.LABEL:
+            return h(FLabel, { text: cell.value, classes: "f-cell__text" });
         default:
             return (h("div", { class: "f-cell__text" }, cell.data.displayMode
                 ? adaptContentToDisplayMode(cell, content, '-')
@@ -592,7 +616,8 @@ function setKupCell(cellType, classObj, subcomponentProps, cell, row, column, pr
             if (isAutoCentered(props)) {
                 classObj[FCellClasses.C_CENTERED] = true;
             }
-            return (h(FButton, Object.assign({}, subcomponentProps, { onClick: (e) => cellEvent(e, props, cellType, FCellEvents.CLICK) })));
+            const buttonProps = Object.assign({ label: cell.value, icon: cell.icon, placeholderIcon: cell.placeholderIcon }, subcomponentProps);
+            return (h(FButton, Object.assign({}, buttonProps, { onClick: (e) => cellEvent(e, props, cellType, FCellEvents.CLICK) })));
         case FCellTypes.BUTTON_LIST:
             if (isAutoCentered(props)) {
                 classObj[FCellClasses.C_CENTERED] = true;
@@ -618,7 +643,7 @@ function setKupCell(cellType, classObj, subcomponentProps, cell, row, column, pr
             return (h("kup-gauge", Object.assign({ key: column.name + props.row.id, value: dom.ketchup.math.numberifySafe(cell.value), "width-component": "280px" }, subcomponentProps)));
         case FCellTypes.KNOB:
         case FCellTypes.PROGRESS_BAR:
-            return subcomponentProps.customStyle ? (h("kup-progress-bar", Object.assign({ key: column.name + props.row.id }, subcomponentProps))) : (h(FProgressBar, Object.assign({}, subcomponentProps)));
+            return (h("kup-progress-bar", Object.assign({ key: column.name + props.row.id }, subcomponentProps, { value: dom.ketchup.math.numberifySafe(cell.value) })));
         case FCellTypes.RADIO:
             if (isAutoCentered(props)) {
                 classObj[FCellClasses.C_CENTERED] = true;
@@ -798,7 +823,7 @@ function setDefaults(cellType, cell) {
     }
 }
 function cellEvent(e, props, cellType, cellEventName) {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const cell = props.cell;
     const column = props.column;
     const comp = props.component;
@@ -813,7 +838,14 @@ function cellEvent(e, props, cellType, cellEventName) {
         }
         switch (cellType) {
             case FCellTypes.AUTOCOMPLETE:
+                cell.decode = (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.node) === null || _b === void 0 ? void 0 : _b.value;
+                if (cell.data) {
+                    cell.data['initialValue'] = value;
+                    cell.data['initialValueDecode'] = (_d = (_c = e.detail) === null || _c === void 0 ? void 0 : _c.node) === null || _d === void 0 ? void 0 : _d.value;
+                }
+                break;
             case FCellTypes.COMBOBOX:
+                cell.decode = (_f = (_e = e.detail) === null || _e === void 0 ? void 0 : _e.node) === null || _f === void 0 ? void 0 : _f.value;
             case FCellTypes.DATE:
             case FCellTypes.TIME:
                 if (cell.data) {
@@ -846,10 +878,6 @@ function cellEvent(e, props, cellType, cellEventName) {
                     cell.data.data = e.detail.comp.data;
                 }
                 break;
-            case FCellTypes.EDITOR:
-            case FCellTypes.STRING:
-                value = JSON.stringify(value).slice(1, -1);
-                break;
         }
         if (cell.obj) {
             cell.obj.k = value === null || value === void 0 ? void 0 : value.toString();
@@ -871,7 +899,7 @@ function cellEvent(e, props, cellType, cellEventName) {
                 event: e,
                 row: row,
                 type: cellType,
-                inputValue: ((_b = (_a = cell.element) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.value) || null,
+                inputValue: ((_h = (_g = cell.element) === null || _g === void 0 ? void 0 : _g.querySelector('input')) === null || _h === void 0 ? void 0 : _h.value) || null,
             },
         });
         comp.rootElement.dispatchEvent(cellEvent);

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

@@ -13,6 +13,7 @@ export const FCheckbox = (props) => {
         'checkbox--disabled': props.disabled ? true : false,
         'checkbox--indeterminate': props.indeterminate ? true : false,
         'checkbox--legacy-look': props.legacyLook ? true : false,
+        [`checkbox--${props.sizing || 'small'}`]: true,
     };
     const propsFImage = {
         color: props.error

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

@@ -3,6 +3,8 @@ import { FChipStyling, FChipType, } from "../f-chip/f-chip-declarations";
 import { FImage } from "../f-image/f-image";
 import { KupThemeIconValues, } from "../../managers/kup-theme/kup-theme-declarations";
 import { KupLanguageGeneric } from "../../managers/kup-language/kup-language-declarations";
+import { ItemsDisplayMode } from "../../components/kup-list/kup-list-declarations";
+import { getIdOfItemByDisplayMode } from "../../components/kup-list/kup-list-helper";
 const dom = document.documentElement;
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */
@@ -14,6 +16,9 @@ export const FChip = (props) => {
     if (!props.type) {
         props.type = FChipType.STANDARD;
     }
+    if (!props.displayMode) {
+        props.displayMode = ItemsDisplayMode.DESCRIPTION;
+    }
     const isChoice = props.type.toLowerCase() === FChipType.CHOICE;
     const isFilter = props.type.toLowerCase() === FChipType.FILTER;
     const isInput = props.type.toLowerCase() === FChipType.INPUT;
@@ -26,7 +31,7 @@ export const FChip = (props) => {
         'chip-set--input': isInput ? true : false,
         'chip--outlined': isOutlined ? true : false,
         'chip--raised': isRaised ? true : false,
-        [`chip--${props.sizing}`]: props.sizing ? true : false,
+        [`chip--${props.sizing || 'extra-small'}`]: true,
     };
     return (h("div", Object.assign({ class: `f-chip ${props.danger ? 'kup-danger' : ''} ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''} ${props.primary ? 'kup-primary' : ''}` }, props.dataSet, { id: props.id, title: props.title }), h("div", { class: classObj, role: "grid" }, createChipList(props, isChoice, isFilter, isInput))));
 };
@@ -45,6 +50,7 @@ function createChipList(props, isChoice, isFilter, isInput) {
             const indentStyle = {
                 ['--kup_chip_indent_offset']: indent.toString(),
             };
+            const isDisabled = props.disabled;
             chipGroup.push(h("div", { class: `chip-set__wrapper ${hasChildren && !showChildren
                     ? 'chip-set__wrapper--hidden-children'
                     : ''}` }, h("div", { class: "chip-set__indent", style: indentStyle }), hasChildren ? (h(FImage, { onClick: props.onExpansionClick &&
@@ -53,7 +59,7 @@ function createChipList(props, isChoice, isFilter, isInput) {
                     : null, resource: `${KupThemeIconValues.DROPDOWN}`, sizeX: "16px", sizeY: "16px", title: dom.ketchup.language.translate(KupLanguageGeneric.EXPAND) +
                     '/' +
                     dom.ketchup.language.translate(KupLanguageGeneric.COLLAPSE) +
-                    ' (CTRL + Click)', wrapperClass: "dropdown-icon" })) : indent ? (h(FImage, { resource: "blank", sizeX: "16px", sizeY: "16px", wrapperClass: "dropdown-icon" })) : null, createChip(chip)));
+                    ' (CTRL + Click)', wrapperClass: "dropdown-icon" })) : indent ? (h(FImage, { resource: "blank", sizeX: "16px", sizeY: "16px", wrapperClass: "dropdown-icon" })) : null, createChip(chip, isDisabled)));
             if (showChildren) {
                 for (let index = 0; index < chip.children.length; index++) {
                     if (chip.children[index]) {
@@ -62,9 +68,9 @@ function createChipList(props, isChoice, isFilter, isInput) {
                 }
             }
         }
-        function createChip(chip) {
+        function createChip(chip, disabled) {
             const onlyIcon = !!(chip.icon && !chip.value);
-            let componentClass = `chip ${onlyIcon ? 'chip--only-icon' : ''}`;
+            let componentClass = `chip ${onlyIcon ? 'chip--only-icon' : ''} ${disabled && 'chip--disabled'}`;
             let iconEl = [];
             let iconClass = 'chip__icon chip__icon--leading';
             if (isFilter || isChoice) {
@@ -91,6 +97,7 @@ function createChipList(props, isChoice, isFilter, isInput) {
             if (isFilter) {
                 iconEl.push(h("span", { class: "chip__checkmark" }, h("svg", { class: "chip__checkmark-svg", viewBox: "-2 -3 30 30" }, h("path", { class: "chip__checkmark-path", fill: "none", stroke: "black", d: "M1.73,12.91 8.1,19.28 22.79,4.59" }))));
             }
+            let chipText = getIdOfItemByDisplayMode(chip, chip.value == '' ? ItemsDisplayMode.CODE : props.displayMode, ' - ');
             return (h("div", { class: componentClass, "data-value": chip.id, onClick: props.onClick && props.onClick[i]
                     ? props.onClick[i].bind(props.onClick[i], chip)
                     : null, role: "row", title: chip.title ? chip.title : '' }, h("span", { class: "chip-set__indent" }), iconEl, h("span", { role: "gridcell" }, h("span", { role: "button", tabindex: i, class: "chip__primary-action",
@@ -99,9 +106,7 @@ function createChipList(props, isChoice, isFilter, isInput) {
                     ? props.onBlur[i].bind(props.onBlur[i], chip)
                     : null, onFocus: props.onFocus && props.onFocus[i]
                     ? props.onFocus[i].bind(props.onFocus[i], chip)
-                    : null }, h("span", { class: "chip__text" }, props.displayId
-                ? chip.id + ' - ' + chip.value
-                : chip.value))), isInput ? (h("span", { role: "gridcell" }, h("span", { tabindex: "-1", class: `kup-icon chip__icon ${KupThemeIconValues.CLEAR.replace('--', '')}`, onClick: props.onIconClick && props.onIconClick[i]
+                    : null }, h("span", { class: "chip__text" }, chipText))), isInput ? (h("span", { role: "gridcell" }, h("span", { tabindex: "-1", class: `kup-icon chip__icon ${KupThemeIconValues.CLEAR.replace('--', '')}`, onClick: props.onIconClick && props.onIconClick[i]
                     ? props.onIconClick[i].bind(props.onIconClick[i], chip)
                     : null }))) : null));
         }

package/dist/collection/f-components/f-label/f-label-declarations.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,21 @@
+import { Fragment, h } from "@stencil/core";
+import { getParsedElements } from "../../utils/label-utils";
+import { getGCellStyle } from "../../utils/g-cell-style-generator";
+function getVNodes(parsedElements) {
+    return parsedElements.map((e) => {
+        var _a, _b;
+        const style = getGCellStyle((_a = e.tag) === null || _a === void 0 ? void 0 : _a.replace(/[_]/g, '').slice(1));
+        return e.closed ? (h("span", { style: style }, e.content)) : (h("span", null, `${(_b = e.tag) !== null && _b !== void 0 ? _b : ''}${e.content}`));
+    });
+}
+export const FLabel = ({ text, classes }) => {
+    const parsedElements = getParsedElements(text);
+    // To avoid creating unnecessary span in the text
+    // when there are no tags to format the content
+    if (parsedElements.find((p) => p.tag !== undefined)) {
+        return h("span", { class: classes }, getVNodes(parsedElements));
+    }
+    else {
+        return h(Fragment, null, text);
+    }
+};

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

@@ -8,12 +8,17 @@ import { FTextField } from "../f-text-field/f-text-field";
 const STATE = new WeakMap();
 export const FObjectField = (props) => {
     var _a;
+    let helperSection;
+    const attachHelperSection = (element) => {
+        helperSection = element;
+        return false;
+    };
     return (h("div", { class: `f-object-field ${props.wrapperClass ? props.wrapperClass : ''}`, ref: async (el) => {
             if (el) {
                 props.root = el;
                 setState(props);
             }
-        } }, h(FTextField, Object.assign({ icon: 'search', trailingIcon: true, disabled: false }, (_a = props.cell) === null || _a === void 0 ? void 0 : _a.data, { value: props.inputValue, onChange: props.onChange, onIconClick: handlers.icon.bind(props), onInput: handlers.input.bind(props), onKeyDown: handlers.keydown.bind(props) })), h(FButton, { icon: 'menu', onClick: handlers.button.bind(props), sizing: KupComponentSizing.SMALL, styling: FButtonStyling.FLAT, wrapperClass: "obj-field-extra-btn" }), h("kup-toolbar", { "onKup-toolbar-click": handlers.toolbar.bind(props) })));
+        } }, h("div", { class: "fields-wrapper" }, h(FTextField, Object.assign({ icon: 'search', trailingIcon: true, disabled: false }, (_a = props.cell) === null || _a === void 0 ? void 0 : _a.data, { attachHelperSection: attachHelperSection, value: props.inputValue, onChange: props.onChange, onIconClick: handlers.icon.bind(props), onInput: handlers.input.bind(props), onKeyDown: handlers.keydown.bind(props) })), h(FButton, { icon: 'menu', onClick: handlers.button.bind(props), sizing: KupComponentSizing.SMALL, styling: FButtonStyling.FLAT, wrapperClass: "obj-field-extra-btn" })), helperSection, h("kup-toolbar", { "onKup-toolbar-click": handlers.toolbar.bind(props) })));
 };
 function openList(props) {
     const { cell } = props;

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

@@ -19,13 +19,24 @@ export const FRadio = (props) => {
             [`radio--${props.type}`]: props.type ? true : false,
         };
         radioList.push(h("div", { class: `form-field 
-                  ${props.leadingLabel ? ' form-field--align-end' : ''} ${props.disabled ? 'radio--disabled' : ''}` }, h("div", { class: classObj }, radioType === FRadioType.RADIO ? (h("input", { class: "radio__native-control", type: "radio", name: "radio-element", value: data.value, checked: data.checked, disabled: props.disabled, onBlur: props.onBlur, onChange: props.onChange
+                  ${props.leadingLabel ? ' form-field--align-end' : ''} ${props.disabled ? 'radio--disabled' : ''} ${radioType === FRadioType.CHEVRON ? 'form--chevron' : ''}`, onClick: props.onChange
                 ? props.onChange.bind(props.onChange, i)
-                : null, onFocus: props.onFocus })) : (h(Fragment, null, data.checked ? (h(FImage, { resource: "check", sizeX: "14px", sizeY: "14px" })) : (h(FImage, { sizeX: "14px", sizeY: "14px", onClick: props.onChange
-                ? props.onChange.bind(props.onChange, i)
-                : null })))), radioType === FRadioType.RADIO && (h("div", { class: "radio__background" }, h("div", { class: "radio__outer-circle" }), h("div", { class: "radio__inner-circle" })))), h("label", { htmlFor: 'radio-element', onClick: props.onChange
-                ? props.onChange.bind(props.onChange, i)
-                : null }, data.label ? data.label : '')));
+                : null }, h("div", { class: classObj }, radioType === FRadioType.RADIO ? (h("input", { class: "radio__native-control", type: "radio", name: "radio-element", value: data.value, checked: data.checked, disabled: props.disabled, onBlur: props.onBlur, onChange: (e) => {
+                if (props.onChange) {
+                    props.onChange(i, e);
+                }
+                e.stopPropagation();
+            }, onFocus: props.onFocus })) : (h(Fragment, null, data.checked ? (h(FImage, { resource: "check", sizeX: "14px", sizeY: "14px" })) : (h(FImage, { sizeX: "14px", sizeY: "14px", onClick: (e) => {
+                if (props.onChange) {
+                    props.onChange(i, e);
+                }
+                e.stopPropagation();
+            } })))), radioType === FRadioType.RADIO && (h("div", { class: "radio__background" }, h("div", { class: "radio__outer-circle" }), h("div", { class: "radio__inner-circle" })))), h("div", { class: "label-wrapper", onClick: (e) => {
+                if (props.onChange) {
+                    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 : ''))));
     }
     const styleObj = {
         '--kup_radio_columns': hasColumns

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

@@ -6,6 +6,7 @@ const dom = document.documentElement;
 /*                C o m p o n e n t                */
 /*-------------------------------------------------*/
 export const FTextField = (props, children) => {
+    var _a, _b;
     const classObj = {
         'f-text-field': true,
         'kup-danger': props.danger,
@@ -17,13 +18,16 @@ export const FTextField = (props, children) => {
         'kup-shaped': props.shaped,
         'kup-success': props.success,
         'kup-warning': props.warning,
+        [`f-text-field--${props.sizing || 'small'}`]: true,
         [props.wrapperClass]: !!props.wrapperClass,
     };
+    const helper = setHelper(props);
+    const attachHelperSection = (_b = (_a = props.attachHelperSection) === null || _a === void 0 ? void 0 : _a.call(props, helper)) !== null && _b !== void 0 ? _b : true;
     return (h("div", Object.assign({ class: classObj }, props.dataSet, { id: props.id, title: props.title }), props.leadingLabel || props.trailingLabel ? (h("div", { class: `mdc-form-field ${props.leadingLabel ? 'mdc-form-field--align-end' : ''}` }, [
         setContent(props),
-        setHelper(props),
+        attachHelperSection ? helper : null,
         h("label", null, props.label),
-    ])) : ([setContent(props), setHelper(props)]), children));
+    ])) : ([setContent(props), attachHelperSection ? helper : null]), children));
 };
 /*-------------------------------------------------*/
 /*                  M e t h o d s                  */
@@ -38,7 +42,11 @@ function setContent(props) {
     if (props.maxLength >= 256) {
         props.textArea = true;
     }
-    if (props.label && !props.leadingLabel && !props.trailingLabel) {
+    if (props.label &&
+        !props.leadingLabel &&
+        !props.trailingLabel &&
+        !props.legacyLook // do not show label in input panel absolute ( legacy mode )
+    ) {
         labelEl = (h("div", { class: "mdc-text-field__label-container" }, h("label", { class: "mdc-label", htmlFor: "kup-input" }, props.label), props.maxLength && props.showCounter ? (h("div", { class: "mdc-text-field__label-character-counter" }, props.value.length, " / ", props.maxLength)) : undefined));
     }
     if (props.icon) {
@@ -108,7 +116,7 @@ function setContent(props) {
     let value = props.value;
     let inputType = props.quantityButtons
         ? 'number'
-        : (_a = props.inputType) !== null && _a !== void 0 ? _a : 'text';
+        : ((_a = props.inputType) !== null && _a !== void 0 ? _a : 'text');
     let persManageForNumberFormat = false;
     if (props.inputType === 'number') {
         inputType = 'text';
@@ -124,14 +132,6 @@ function setContent(props) {
         };
         value = formatValue(value, options, false);
     }
-    if (props.textArea) {
-        try {
-            value = JSON.parse(`"${value}"`);
-        }
-        catch (e) {
-            value = JSON.parse(JSON.stringify(value));
-        }
-    }
     return (h("div", { class: classContainerObj }, !props.fullWidth ? labelEl : undefined, h("div", { class: classObj }, !props.trailingIcon ? iconEl : undefined, props.textArea ? (h("span", { class: "mdc-text-field__resizer" }, h("textarea", { class: "mdc-text-field__input", disabled: props.disabled, maxlength: props.maxLength, value: value, autoComplete: (_f = props.autocomplete) !== null && _f !== void 0 ? _f : 'off', onBlur: props.onBlur, onClick: props.onClick, onChange: props.onChange, onFocus: props.onFocus, onInput: props.onInput, onKeyDown: props.onKeyDown }))) : (h("input", { type: inputType, inputmode: props.inputMode ? props.inputMode : undefined, step: props.step, min: props.min, max: props.max, name: props.name, class: "mdc-text-field__input", disabled: props.disabled, placeholder: props.placeholder, maxlength: props.maxLength, size: props.size, value: value, readOnly: props.isSelect, autoComplete: (_g = props.autocomplete) !== null && _g !== void 0 ? _g : 'off', onBlur: (e) => {
             var _a, _b, _c, _d;
             if (persManageForNumberFormat) {

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

@@ -52,6 +52,8 @@ export class KupData {
                             return FCellTypes.DATE;
                         case FCellShapes.EDITOR:
                             return FCellTypes.EDITOR;
+                        case FCellShapes.FILE_UPLOAD:
+                            return FCellTypes.FILE_UPLOAD;
                         case FCellShapes.GAUGE:
                             return FCellTypes.GAUGE;
                         case FCellShapes.IMAGE:
@@ -84,6 +86,8 @@ export class KupData {
                             return FCellTypes.STRING;
                         case FCellShapes.TIME:
                             return FCellTypes.TIME;
+                        case FCellShapes.LABEL:
+                            return FCellTypes.LABEL;
                     }
                 }
                 if (dom.ketchup.objects.isBar(obj)) {