@sme.up/ketchup 10.1.1 → 10.2.0

package/dist/esm/{f-cell-50d54fdf.js → f-cell-6576e009.js}

@@ -1,109 +1,11 @@
-import { h, g as getAssetPath, F as Fragment } from './index-c9246a86.js';
-import { ak as editableTypes, al as kupTypes, am as FCellClasses, a7 as FCellTypes, d as KupThemeColorValues, ag as RADAdapter, af as CMBandACPAdapter, an as KupTagNames, F as FCellShapes, ac as getCellValueForDisplay, a as KupComponentSizing, ao as fullWidthFieldsComps, I as ItemsDisplayMode, ap as autoCenterComps, aq as adaptContentToDisplayMode, ar as FCellEvents, as as isForceUppercase, at as isForceLowercase, e as KupDebugCategory } from './kup-manager-5fbf0037.js';
-import { F as FButton } from './f-button-f1040575.js';
-import { F as FCheckbox } from './f-checkbox-3ba20ca4.js';
-import { F as FChipType, c as FChip } from './f-chip-c31b2c02.js';
-import { F as FImage } from './f-image-9b15e9ac.js';
-import { F as FObjectField } from './f-object-field-80e6eb02.js';
-import { F as FTextField } from './f-text-field-6b05bfbc.js';
-
-/*-------------------------------------------------*/
-/*                C o m p o n e n t                */
-/*-------------------------------------------------*/
-const FProgressBar = (props) => {
-    if (!props.centeredLabel && !props.centeredLabel !== false) {
-        props.centeredLabel = true;
-    }
-    let componentClass = `f-progress-bar ${props.danger ? 'kup-danger' : ''} ${props.animated ? 'kup-animated' : ''} ${props.padded ? 'kup-padded' : ''} ${props.info ? 'kup-info' : ''} ${props.slim ? 'kup-slim' : ''} ${props.striped ? 'kup-striped' : ''}   ${props.secondary ? 'kup-secondary' : ''} ${props.slim ? 'kup-slim' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}`;
-    let pieClass = 'pie';
-    let radialStyle = undefined;
-    if (props.isRadial) {
-        componentClass += ' pie-wrapper is-radial';
-    }
-    else {
-        componentClass += ' progress-bar';
-    }
-    let labelStyle = undefined;
-    const valueStyle = {
-        width: `${props.value}%`,
-    };
-    if (!props.centeredLabel) {
-        labelStyle = valueStyle;
-        if (props.value > 2) {
-            componentClass += ' text-color-on-primary';
-        }
-    }
-    else if (props.value > 49) {
-        componentClass += ' text-color-on-primary';
-    }
-    let label = null;
-    if (props.icon) {
-        label = createIconElement(props);
-    }
-    else {
-        if (!props.hideLabel) {
-            if (props.isRadial) {
-                if (props.label) {
-                    label = h("span", { class: "label" }, props.label);
-                }
-                else {
-                    label = (h("span", { class: "label" },
-                        props.value,
-                        h("span", { class: "smaller" }, "%")));
-                }
-            }
-            else {
-                if (props.label) {
-                    label = props.label;
-                }
-                else {
-                    label = props.value + '%';
-                }
-            }
-        }
-    }
-    if (props.value > 0) {
-        pieClass += ' has-value';
-        if (props.value > 50) {
-            pieClass += ' is-more-than-half';
-        }
-        else {
-            pieClass += ' is-less-than-half';
-        }
-    }
-    if (props.isRadial) {
-        return (h("div", { class: componentClass },
-            label,
-            h("div", { class: pieClass },
-                h("div", { style: radialStyle, class: "left-side half-circle" }),
-                h("div", { class: "right-side half-circle" })),
-            h("div", { class: "shadow" })));
-    }
-    else {
-        return (h("div", { class: componentClass },
-            h("div", { class: "progress-bar-percentage", style: valueStyle },
-                h("span", { style: labelStyle }, label))));
-    }
-};
-function createIconElement(props) {
-    if (!props.icon) {
-        return undefined;
-    }
-    if (props.icon.indexOf('.') > -1 ||
-        props.icon.indexOf('/') > -1 ||
-        props.icon.indexOf('\\') > -1) {
-        return (h("span", { class: "label kup-icon is-image" },
-            h("img", { src: props.icon })));
-    }
-    else {
-        let svg = `url('${getAssetPath(`./assets/svg/${props.icon}.svg`)}') no-repeat center`;
-        let iconStyle = {
-            mask: svg,
-            webkitMask: svg,
-        };
-        return h("span", { style: iconStyle, class: "label kup-icon" });
-    }
-}
+import { h, F as Fragment } from './index-9b0f4a0d.js';
+import { ap as editableTypes, aq as kupTypes, R as FCellClasses, ac as FCellTypes, d as KupThemeColorValues, an as CHIAdapter, al as RADAdapter, ak as CMBandACPAdapter, ar as KupTagNames, F as FCellShapes, ah as getCellValueForDisplay, a as KupComponentSizing, as as fullWidthFieldsComps, I as ItemsDisplayMode, at as autoCenterComps, au as adaptContentToDisplayMode, av as FCellEvents, aw as isForceUppercase, ax as isForceLowercase, e as KupDebugCategory } from './kup-manager-6aa0a1c7.js';
+import { F as FButton } from './f-button-3c8f4506.js';
+import { F as FCheckbox } from './f-checkbox-5cdd1cad.js';
+import { F as FChipType, d as FChip } from './f-chip-bb62428a.js';
+import { F as FImage } from './f-image-a2ecd7c3.js';
+import { F as FObjectField } from './f-object-field-b87b6ae6.js';
+import { F as FTextField } from './f-text-field-9be88e51.js';
 
 var FRadioType;
 (function (FRadioType) {
@@ -129,19 +31,32 @@ 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' : ''}` },
+                  ${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 },
             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.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("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("label", { htmlFor: 'radio-element', onClick: props.onChange
-                    ? props.onChange.bind(props.onChange, i)
-                    : null }, data.label ? data.label : '')));
+            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
@@ -214,12 +129,277 @@ const FSwitch = (props) => {
             h("label", { onClick: props.onChange }, props.label))));
 };
 
+function parse(input, listener) {
+    const regex = /((_G\d{2}[A-Z0-9]\d{2}_|_G\*(BOLD|ERROR|ITALIC|UNDERLINE)_)|_n_)/g;
+    let lastIndex = 0;
+    let match;
+    while ((match = regex.exec(input)) !== null) {
+        // Capture text before the match
+        if (match.index > lastIndex) {
+            listener.onContent(input.slice(lastIndex, match.index));
+        }
+        if (match[1] === '_n_') {
+            listener.onEndTag(match[1]);
+        }
+        else {
+            listener.onStartTag(match[2]);
+        }
+        lastIndex = regex.lastIndex;
+    }
+    // Capture remaining content
+    if (lastIndex < input.length) {
+        listener.onContent(input.slice(lastIndex));
+    }
+}
+function getParsedElements(input) {
+    const elements = [];
+    let lastElement = null;
+    parse(input, {
+        onStartTag(tag) {
+            if (lastElement === null || lastElement === void 0 ? void 0 : lastElement.tag) {
+                lastElement.closed = true;
+            }
+            elements.push((lastElement = { tag: tag, content: '' }));
+        },
+        onEndTag(tag) {
+            if (!lastElement) {
+                elements.push((lastElement = { content: tag }));
+            }
+            else if (lastElement.tag) {
+                lastElement.closed = true;
+                lastElement = null;
+            }
+            else {
+                this.onContent(tag);
+            }
+        },
+        onContent(content) {
+            if (!lastElement) {
+                elements.push((lastElement = { content: content }));
+            }
+            else {
+                lastElement.content += content;
+            }
+        },
+    });
+    if (lastElement && lastElement.tag) {
+        lastElement.closed = true;
+    }
+    return elements;
+}
+
+const fixedStyle = {
+    '*BOLD': 'font-weight: bold; !important;',
+    '*ERROR': 'color: white !important; background: red !important;',
+    '*UNDERLINE': 'text-decoration: underline !important;',
+    '*ITALIC': 'font-style: italic !important;',
+};
+function getGCellStyle(gCellId) {
+    const style = getGCellStyleAsString(gCellId);
+    const styleObj = style
+        .split(';')
+        .filter((s) => s.trim())
+        .reduce((acc, rule) => {
+        const [key, value] = rule.split(':').map((s) => s.trim());
+        if (key && value) {
+            const cleanValue = value.replace(/!important/g, '').trim();
+            const camelCaseKey = key.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+            acc[camelCaseKey] = cleanValue;
+        }
+        return acc;
+    }, {});
+    return styleObj;
+}
+function getGCellStyleAsString(gCellId) {
+    const regexp = /\d{2}[A-Z0-9]\d{2}|\*(BOLD|ERROR|ITALIC|UNDERLINE)/;
+    let result = '';
+    if (gCellId === null || gCellId === void 0 ? void 0 : gCellId.match(regexp)) {
+        result = fixedStyle[gCellId];
+        if (!result) {
+            result = '';
+            for (let i = 0; i < gCellId.length; i++) {
+                switch (i) {
+                    case 0:
+                        // font color
+                        result += getFontColorCss(gCellId.charAt(i));
+                        break;
+                    case 1:
+                        // font decoration
+                        result += getFontDecorationCss(gCellId.charAt(i));
+                        break;
+                    case 2:
+                        // background color
+                        result += getBackgroundColorCss(gCellId.charAt(i));
+                        break;
+                    case 3:
+                        // font family
+                        result += getFontCss(gCellId.charAt(i));
+                        break;
+                }
+            }
+        }
+    }
+    return result;
+}
+function getFontColorCss(c) {
+    let result;
+    switch (c) {
+        case '0':
+            result = 'color: #000000 !important;'; // black
+            break;
+        case '1':
+            result = 'color: #6C7A89 !important;'; // gray
+            break;
+        case '2':
+            result = 'color: #3A539B !important;'; // blue
+            break;
+        case '3':
+            result = 'color: var(--kup-danger-color-60) !important;'; // red
+            break;
+        case '4':
+            result = 'color: #C0C0C0 !important;'; // dark grey
+            break;
+        case '5':
+            result = 'color: #FFFFFF !important;'; // white
+            break;
+        case '6':
+            result = 'color: var(--kup-success-color-60) !important;'; // green
+            break;
+        case '7':
+            result = 'color: #9B59B6 !important;'; // purple
+            break;
+        default:
+            result = '';
+            break;
+    }
+    return result;
+}
+function getFontDecorationCss(c) {
+    let ris;
+    switch (c) {
+        case '1':
+            ris = 'font-weight: bold !important;';
+            break;
+        case '2':
+            ris = 'font-style: italic !important;';
+            break;
+        case '3':
+            ris = 'text-decoration: underline !important;';
+            break;
+        default:
+            ris = '';
+            break;
+    }
+    return ris;
+}
+function getBackgroundColorCss(c) {
+    let ris;
+    switch (c) {
+        case '0':
+            ris = `background: transparent;`;
+            break;
+        case '1':
+            ris = `background: #D5ECF7;`;
+            break;
+        case '2':
+            ris = `background: #59ABE3;`;
+            break;
+        case '3':
+            ris = `background: #446CB3;`;
+            break;
+        case '4':
+            ris = `background: #9B59B6;`;
+            break;
+        case '5':
+            ris = `background: #F1A9A0;`;
+            break;
+        case '6':
+            ris = `background: #E74C3C;`;
+            break;
+        case '7':
+            ris = `background: #CF000F;`;
+            break;
+        case '8':
+            ris = `background: #C0392B;`;
+            break;
+        case '9':
+            ris = `background: #95A5A6;`;
+            break;
+        case 'A':
+            ris = `background: #F5D76E;`;
+            break;
+        case 'B':
+            ris = `background: #F7CA18;`;
+            break;
+        case 'C':
+            ris = `background: #F7CA18;`;
+            break;
+        case 'D':
+            ris = `background: #F39C12;`;
+            break;
+        case 'E':
+            ris = `background: #90C695;`;
+            break;
+        case 'F':
+            ris = `background: #26A65B;`;
+            break;
+        case 'G':
+            ris = `background: #019875;`;
+            break;
+        case 'H':
+            ris = `background: #36D7B7;`;
+            break;
+        default:
+            ris = '';
+            break;
+    }
+    return ris;
+}
+function getFontCss(c) {
+    let ris;
+    switch (c) {
+        case '1':
+            ris = 'font-family: "Courier New", Courier, monospace !important;';
+            break;
+        case '2':
+            ris =
+                'font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;';
+            break;
+        case '3':
+            ris = 'font-family: Arial, Helvetica, sans-serif !important;';
+            break;
+        default:
+            ris = '';
+            break;
+    }
+    return ris;
+}
+
+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}`));
+    });
+}
+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);
+    }
+};
+
 const dom = document.documentElement;
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */
 /*-------------------------------------------------*/
 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;
@@ -239,14 +419,13 @@ 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)
@@ -261,14 +440,14 @@ 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)) {
@@ -287,12 +466,14 @@ 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 = {
@@ -366,11 +547,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([
@@ -386,24 +570,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: [
@@ -413,7 +593,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;
@@ -577,11 +757,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:
@@ -597,7 +777,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) })));
@@ -624,19 +804,33 @@ 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;
@@ -673,11 +867,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);
                 }
             };
@@ -686,14 +885,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)) ||
@@ -705,7 +906,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) })));
             }
     }
 }
@@ -733,6 +934,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)) {
@@ -771,6 +973,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, '-')
@@ -795,7 +999,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;
@@ -821,7 +1026,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;
@@ -999,7 +1204,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;
@@ -1014,7 +1219,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) {
@@ -1047,10 +1259,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();
@@ -1072,7 +1280,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);
@@ -1112,4 +1320,4 @@ function isFullWidth(props) {
     return fullWidthFieldsComps.includes((_a = props.component) === null || _a === void 0 ? void 0 : _a.rootElement.tagName);
 }
 
-export { FCell as F, FProgressBar as a, FRadio as b, FRating as c, FSwitchSizing as d, FSwitch as e };
+export { FCell as F, FRadio as a, FRating as b, FSwitchSizing as c, FSwitch as d, FLabel as e };