@sme.up/ketchup 9.1.0 → 9.3.0

package/dist/cjs/f-cell-979c26ea.js

@@ -0,0 +1,670 @@
+'use strict';
+
+const kupManager = require('./kup-manager-c63f4fb9.js');
+const index = require('./index-8f2f4159.js');
+const fCheckbox = require('./f-checkbox-41864e53.js');
+const fTextField = require('./f-text-field-2fac8078.js');
+const fImage = require('./f-image-e16fe10d.js');
+const fChip = require('./f-chip-8957940b.js');
+const fButton = require('./f-button-4caf541a.js');
+
+/**
+ * Props of the kup-list component.
+ * Used to export every prop in an object.
+ */
+exports.KupListProps = void 0;
+(function (KupListProps) {
+    KupListProps["customStyle"] = "Custom style of the component.";
+    KupListProps["data"] = "The data of the list.";
+    KupListProps["displayMode"] = "Selects how the items must display their label and how they can be filtered for.";
+    KupListProps["filter"] = "Keeps string for filtering elements when filter mode is active";
+    KupListProps["hideText"] = "Hides rows' text, ideally to display a list of icons only.";
+    KupListProps["isMenu"] = "Defines whether the list is a menu or not.";
+    KupListProps["keyboardNavigation"] = "When true, enables items' navigation through arrow keys.";
+    KupListProps["menuVisible"] = "Sets the status of the menu, when false it's hidden otherwise it's visible.";
+    KupListProps["roleType"] = "Defines the type of selection. Values accepted: listbox, radiogroup or group.";
+    KupListProps["selectable"] = "Defines whether items are selectable or not.";
+    KupListProps["showIcons"] = "Displays the icons associated to each row when set to true.";
+    KupListProps["twoLine"] = "The list elements descriptions will be arranged in two lines.";
+})(exports.KupListProps || (exports.KupListProps = {}));
+/**
+ * Available types of selection.
+ */
+exports.KupListRole = void 0;
+(function (KupListRole) {
+    KupListRole["LISTBOX"] = "listbox";
+    KupListRole["RADIOGROUP"] = "radiogroup";
+    KupListRole["GROUP"] = "group";
+})(exports.KupListRole || (exports.KupListRole = {}));
+exports.ItemsDisplayMode = void 0;
+(function (ItemsDisplayMode) {
+    ItemsDisplayMode["CODE"] = "code";
+    ItemsDisplayMode["DESCRIPTION"] = "description";
+    ItemsDisplayMode["DESCRIPTION_AND_CODE"] = "both";
+})(exports.ItemsDisplayMode || (exports.ItemsDisplayMode = {}));
+
+/*-------------------------------------------------*/
+/*                C o m p o n e n t                */
+/*-------------------------------------------------*/
+const FSwitch = (props) => {
+    return (index.h("div", Object.assign({ class: `f-switch ${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.dataSet, { id: props.id, title: props.title }),
+        index.h("div", { class: `form-field ${props.leadingLabel ? 'form-field--align-end' : ''}` },
+            index.h("div", { class: `switch ${props.checked ? 'switch--checked' : ''} ${props.disabled ? 'switch--disabled' : ''}` },
+                index.h("div", { class: "switch__track" }),
+                index.h("div", { class: "switch__thumb-underlay" },
+                    index.h("div", { class: "switch__thumb" },
+                        index.h("input", { type: "checkbox", class: "switch__native-control", role: "switch", checked: props.checked, disabled: props.disabled, value: props.checked ? 'on' : 'off', onBlur: props.onBlur, onChange: props.onChange, onFocus: props.onFocus })))),
+            index.h("label", { onClick: props.onChange }, props.label))));
+};
+
+/*-------------------------------------------------*/
+/*                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 = index.h("span", { class: "label" }, props.label);
+                }
+                else {
+                    label = (index.h("span", { class: "label" },
+                        props.value,
+                        index.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 (index.h("div", { class: componentClass },
+            label,
+            index.h("div", { class: pieClass },
+                index.h("div", { style: radialStyle, class: "left-side half-circle" }),
+                index.h("div", { class: "right-side half-circle" })),
+            index.h("div", { class: "shadow" })));
+    }
+    else {
+        return (index.h("div", { class: componentClass },
+            index.h("div", { class: "progress-bar-percentage", style: valueStyle },
+                index.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 (index.h("span", { class: "label kup-icon is-image" },
+            index.h("img", { src: props.icon })));
+    }
+    else {
+        let svg = `url('${index.getAssetPath(`./assets/svg/${props.icon}.svg`)}') no-repeat center`;
+        let iconStyle = {
+            mask: svg,
+            webkitMask: svg,
+        };
+        return index.h("span", { style: iconStyle, class: "label kup-icon" });
+    }
+}
+
+/*-------------------------------------------------*/
+/*                C o m p o n e n t                */
+/*-------------------------------------------------*/
+const FRadio = (props) => {
+    var _a;
+    const hasColumns = !!props.columns;
+    const radioList = [];
+    for (let i = 0; i < ((_a = props.data) === null || _a === void 0 ? void 0 : _a.length); i++) {
+        const data = props.data[i];
+        const classObj = {
+            radio: true,
+            'radio--checked': data.checked ? true : false,
+            'radio--disabled': props.disabled ? true : false,
+        };
+        radioList.push(index.h("div", { class: `form-field ${props.leadingLabel ? ' form-field--align-end' : ''}` },
+            index.h("div", { class: classObj },
+                index.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 }),
+                index.h("div", { class: "radio__background" },
+                    index.h("div", { class: "radio__outer-circle" }),
+                    index.h("div", { class: "radio__inner-circle" }))),
+            index.h("label", { htmlFor: 'radio-element', onClick: props.onChange
+                    ? props.onChange.bind(props.onChange, i)
+                    : null }, data.label ? data.label : '')));
+    }
+    const styleObj = {
+        '--kup_radio_columns': hasColumns
+            ? `repeat(${props.columns}, 1fr)`
+            : '',
+    };
+    return (index.h("div", { class: `f-radio radio-wrapper ${hasColumns ? 'radio-wrapper-grid' : ''} ${props.danger ? 'kup-danger' : ''} ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}`, style: styleObj }, radioList));
+};
+
+/*-------------------------------------------------*/
+/*                C o m p o n e n t                */
+/*-------------------------------------------------*/
+const FRating = (props) => {
+    if (!props.maxValue) {
+        props.maxValue = 5;
+    }
+    return (index.h("div", { class: `f-rating ${props.disabled ? 'disabled' : ''} ${props.danger ? 'kup-danger' : ''} ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, buildStars(props)));
+};
+function buildStars(props) {
+    const stars = [];
+    for (let i = 1; i <= props.maxValue; i++) {
+        if (i <= props.value) {
+            stars.push(index.h("span", { class: "rating", onClick: props.onClick
+                    ? props.onClick.bind(props.onClick, i)
+                    : null }, "\u2605"));
+        }
+        else {
+            stars.push(index.h("span", { class: "rating", onClick: props.onClick
+                    ? props.onClick.bind(props.onClick, i)
+                    : null }, "\u2606"));
+        }
+    }
+    return stars;
+}
+
+const dom = document.documentElement;
+/*-------------------------------------------------*/
+/*                C o m p o n e n t                */
+/*-------------------------------------------------*/
+const FCell = (props, children) => {
+    const cell = props.cell;
+    const column = props.column;
+    const row = props.row;
+    const shape = props.shape
+        ? props.shape
+        : cell.shape
+            ? cell.shape
+            : column.shape
+                ? column.shape
+                : null;
+    const hasObj = !dom.ketchup.objects.isEmptyKupObj(cell.obj);
+    const isEditable = (cell.isEditable || column.isEditable) && props.editable ? true : false;
+    const valueToDisplay = props.previousValue !== cell.value ? cell.value : '';
+    const cellType = dom.ketchup.data.cell.getType(cell, shape);
+    const subcomponentProps = Object.assign({}, cell.data);
+    let cssClasses = cell.cssClass
+        ? cell.cssClass
+        : column.cssClass
+            ? column.cssClass
+            : '';
+    const classObj = {
+        'f-cell': true,
+        [kupManager.FCellClasses.OBJ]: hasObj ? true : false,
+        [cellType + '-cell']: true,
+        [props.wrapperClass]: props.wrapperClass ? true : false,
+        [props.density]: props.density && cellType !== kupManager.FCellTypes.BAR ? true : false,
+        [cssClasses]: cssClasses ? true : false,
+    };
+    let content = valueToDisplay;
+    if (isEditable && kupManager.editableTypes.includes(cellType)) {
+        content = setEditableCell(cellType, classObj, cell, column, props);
+    }
+    else if (cell.data && kupManager.kupTypes.includes(cellType)) {
+        if (props.setSizes) {
+            setCellSizeKup(cellType, subcomponentProps, cell);
+        }
+        if (!props.renderKup) {
+            const lazyClass = 'cell-' + cellType + ' placeholder';
+            content = index.h("span", { class: lazyClass });
+        }
+        else {
+            content = setKupCell(cellType, classObj, subcomponentProps, cell, row, column, props);
+        }
+    }
+    else {
+        if (props.setSizes) {
+            setCellSize(cellType, subcomponentProps, cell, props);
+        }
+        content = setCell(cellType, subcomponentProps, content, classObj, cell, column, props);
+    }
+    let icon = null;
+    if (!isEditable && (column.icon || cell.icon) && content) {
+        const fProps = {
+            color: `rgba(var(${kupManager.KupThemeColorValues.TEXT}-rgb), 0.375)`,
+            resource: cell.icon ? cell.icon : column.icon,
+            sizeX: '1.25em',
+            sizeY: '1.25em',
+            wrapperClass: 'obj-icon',
+        };
+        icon = index.h(fImage.FImage, Object.assign({}, fProps));
+    }
+    let cellTitle = null;
+    if (dom.ketchup.debug.isDebug() && hasObj) {
+        cellTitle = cell.obj.t + '; ' + cell.obj.p + '; ' + cell.obj.k + ';';
+    }
+    else if (cell.title != null && cell.title.trim() != '') {
+        cellTitle = cell.title;
+    }
+    let infoEl = null;
+    if (cell.info) {
+        const info = Object.assign({}, cell.info);
+        if (!info.color) {
+            info.color = `var(${kupManager.KupThemeColorValues.INFO})`;
+        }
+        if (!info.icon) {
+            info.icon = 'info';
+        }
+        const fProps = {
+            color: info.color,
+            resource: info.icon,
+            sizeX: '1.25em',
+            sizeY: '1.25em',
+            title: info.message ? info.message : '',
+            wrapperClass: 'cell-info',
+        };
+        infoEl = index.h(fImage.FImage, Object.assign({}, fProps));
+    }
+    return (index.h("div", { onKeyUp: (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.KEYUP), class: classObj, "kup-get-cell-props": () => {
+            return props;
+        }, ref: (el) => (cell.element = el), style: cell.style },
+        index.h("div", { class: "f-cell__content", style: cell.styleContent, title: cellTitle }, children && children.length > 0
+            ? children
+            : [props.indents, infoEl, icon, content])));
+};
+function setCellSize(cellType, subcomponentProps, cell, props) {
+    switch (cellType) {
+        case kupManager.FCellTypes.CHECKBOX:
+        case kupManager.FCellTypes.ICON:
+            if (!subcomponentProps.sizeX) {
+                subcomponentProps.sizeX = '18px';
+            }
+            if (!subcomponentProps.sizeY) {
+                subcomponentProps.sizeY = '18px';
+            }
+            if (cell.style) {
+                if (!cell.style.height) {
+                    cell.style['minHeight'] = subcomponentProps.sizeY;
+                }
+            }
+            else {
+                cell.style = {
+                    minHeight: subcomponentProps.sizeY,
+                };
+            }
+            break;
+        case kupManager.FCellTypes.IMAGE:
+            if (props.component.rootElement.tagName ===
+                kupManager.KupTagNames.BOX) {
+                if (!subcomponentProps.sizeY) {
+                    subcomponentProps.sizeY = 'auto';
+                }
+                if (subcomponentProps.fit === undefined) {
+                    subcomponentProps.fit = true;
+                }
+            }
+            else if (!subcomponentProps.sizeX) {
+                subcomponentProps.sizeX = 'auto';
+            }
+            if (!subcomponentProps.sizeY) {
+                subcomponentProps.sizeY = '64px';
+            }
+            break;
+    }
+}
+function setCellSizeKup(cellType, subcomponentProps, cell) {
+    switch (cellType) {
+        case kupManager.FCellTypes.BAR:
+            if (!subcomponentProps.sizeY) {
+                subcomponentProps.sizeY = '26px';
+            }
+            break;
+        case kupManager.FCellTypes.BUTTON:
+            let height = '';
+            if (subcomponentProps.label) {
+                height = '36px';
+            }
+            if (cell.style) {
+                if (!cell.style.height) {
+                    cell.style['minHeight'] = height;
+                }
+            }
+            else {
+                cell.style = { minHeight: height };
+            }
+            break;
+        case kupManager.FCellTypes.CHART:
+            if (!subcomponentProps.sizeX) {
+                subcomponentProps.sizeX = '100%';
+            }
+            if (!subcomponentProps.sizeY) {
+                subcomponentProps.sizeY = '100%';
+            }
+            break;
+        case kupManager.FCellTypes.CHIP:
+            if (cell.style) {
+                if (!cell.style.height) {
+                    cell.style['minHeight'] = '40px';
+                }
+            }
+            else {
+                cell.style = { minHeight: '40px' };
+            }
+            break;
+        case kupManager.FCellTypes.RADIO:
+            if (cell.style) {
+                if (!cell.style.height) {
+                    cell.style['minHeight'] = '40px';
+                }
+            }
+            else {
+                cell.style = { minHeight: '40px' };
+            }
+            break;
+    }
+}
+function setEditableCell(cellType, classObj, cell, column, props) {
+    switch (cellType) {
+        case kupManager.FCellTypes.AUTOCOMPLETE:
+            return (index.h("kup-autocomplete", Object.assign({ key: column.name + props.row.id, initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-autocomplete-change": (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.UPDATE), "onkup-autocomplete-input": (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.INPUT), "onkup-autocomplete-iconclick": (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.ICON_CLICK) })));
+        case kupManager.FCellTypes.CHECKBOX:
+            if (isAutoCentered(props)) {
+                classObj[kupManager.FCellClasses.C_CENTERED] = true;
+            }
+            if (cell.shape === kupManager.FCellShapes.INPUT_CHECKBOX) {
+                return (index.h("input", { checked: cell.value === 'on' || cell.value === '1'
+                        ? true
+                        : false, class: "input-checkbox", onChange: (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.UPDATE), type: "checkbox" }));
+            }
+            else {
+                return (index.h(fCheckbox.FCheckbox, Object.assign({}, cell.data, { onChange: (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.UPDATE) })));
+            }
+        case kupManager.FCellTypes.CHIP:
+            return (index.h("kup-chip", Object.assign({}, cell.data, { type: fChip.FChipType.INPUT, enableInput: true, "onKup-chip-change": (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.UPDATE) }),
+                index.h("kup-text-field", Object.assign({ fullWidth: true, slot: "field" }, cell.slotData))));
+        case kupManager.FCellTypes.COLOR_PICKER:
+            return (index.h("kup-color-picker", Object.assign({ key: column.name + props.row.id, initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', disabled: false, "onkup-colorpicker-change": (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.UPDATE) })));
+        case kupManager.FCellTypes.COMBOBOX:
+            return (index.h("kup-combobox", Object.assign({ key: column.name + props.row.id, initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-combobox-change": (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.UPDATE), "onkup-combobox-input": (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.INPUT), "onkup-combobox-iconclick": (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.ICON_CLICK) })));
+        case kupManager.FCellTypes.DATE:
+            return (index.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, kupManager.FCellEvents.UPDATE), "onkup-datepicker-input": (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.INPUT) })));
+        case kupManager.FCellTypes.MULTI_AUTOCOMPLETE:
+            return (index.h("kup-chip", Object.assign({ displayId: true }, cell.data, { type: fChip.FChipType.INPUT, enableInput: true, "onKup-chip-change": (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.UPDATE) }),
+                index.h("kup-autocomplete", Object.assign({ class: "kup-full-width", slot: "field", displayMode: exports.ItemsDisplayMode.DESCRIPTION_AND_CODE, selectMode: exports.ItemsDisplayMode.DESCRIPTION_AND_CODE, "onkup-autocomplete-input": (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.INPUT), "onkup-autocomplete-iconclick": (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.ICON_CLICK), showDropDownIcon: false }, cell.slotData))));
+        case kupManager.FCellTypes.MULTI_COMBOBOX:
+            return (index.h("kup-chip", Object.assign({ displayId: true }, cell.data, { type: fChip.FChipType.INPUT, enableInput: true, "onKup-chip-change": (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.UPDATE) }),
+                index.h("kup-combobox", Object.assign({ class: "kup-full-width", slot: "field", displayMode: exports.ItemsDisplayMode.DESCRIPTION_AND_CODE, selectMode: exports.ItemsDisplayMode.DESCRIPTION_AND_CODE, "onkup-combobox-input": (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.INPUT), "onkup-combobox-iconclick": (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.ICON_CLICK) }, cell.slotData))));
+        case kupManager.FCellTypes.RATING:
+            return (index.h("kup-rating", Object.assign({ key: column.name + props.row.id }, cell.data, { disabled: false, "onkup-rating-click": (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.UPDATE) })));
+        case kupManager.FCellTypes.SWITCH:
+            return (index.h(FSwitch, Object.assign({}, cell.data, { disabled: false, onChange: (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.UPDATE) })));
+        case kupManager.FCellTypes.TIME:
+            return (index.h("kup-time-picker", Object.assign({ key: column.name + props.row.id, initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-timepicker-change": (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.UPDATE), "onkup-timepicker-input": (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.INPUT) })));
+        case kupManager.FCellTypes.NUMBER:
+            classObj[kupManager.FCellClasses.C_RIGHT_ALIGNED] = true;
+        case kupManager.FCellTypes.LINK:
+        case kupManager.FCellTypes.STRING:
+            const onChange = (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.UPDATE);
+            const onInput = (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.INPUT);
+            const type = cellType === kupManager.FCellTypes.NUMBER ? 'number' : null;
+            const value = cellType === kupManager.FCellTypes.NUMBER && cell.value
+                ? dom.ketchup.math.numberifySafe(cell.value).toString()
+                : cell.value;
+            if (cell.shape === kupManager.FCellShapes.INPUT_FIELD) {
+                return (index.h("input", { class: 'input-field', onChange: onChange, onInput: onInput, type: type, value: value }));
+            }
+            else {
+                return (index.h(fTextField.FTextField, Object.assign({ inputType: type, fullWidth: isFullWidth(props) ? true : false }, cell.data, { icon: cell.data && cell.data.icon
+                        ? cell.data.icon
+                        : cell.icon
+                            ? cell.icon
+                            : column.icon
+                                ? column.icon
+                                : null, value: value, onChange: onChange, onInput: onInput, onIconClick: (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.ICON_CLICK) })));
+            }
+    }
+}
+function setCell(cellType, subcomponentProps, content, classObj, cell, column, props) {
+    switch (cellType) {
+        case kupManager.FCellTypes.AUTOCOMPLETE:
+        case kupManager.FCellTypes.COMBOBOX:
+        case kupManager.FCellTypes.DATE:
+        case kupManager.FCellTypes.DATETIME:
+        case kupManager.FCellTypes.TIME:
+            if (content && content != '') {
+                const cellValue = kupManager.getCellValueForDisplay(column, cell);
+                return index.h("div", { class: "f-cell__text" }, cellValue);
+            }
+            return content;
+        case kupManager.FCellTypes.CHECKBOX:
+            if (isAutoCentered(props)) {
+                classObj[kupManager.FCellClasses.C_CENTERED] = true;
+            }
+            return (index.h(fImage.FImage, { resource: subcomponentProps.checked
+                    ? 'check_box'
+                    : 'check_box_outline_blank', sizeX: "18px", sizeY: "18px" }));
+        case kupManager.FCellTypes.EDITOR:
+            return index.h("div", { innerHTML: cell.value });
+        case kupManager.FCellTypes.ICON:
+        case kupManager.FCellTypes.IMAGE:
+            if (isAutoCentered(props)) {
+                classObj[kupManager.FCellClasses.C_CENTERED] = true;
+            }
+            if (subcomponentProps.badgeData) {
+                classObj[kupManager.FCellClasses.C_PADDED] = true;
+            }
+            return index.h(fImage.FImage, Object.assign({}, subcomponentProps));
+        case kupManager.FCellTypes.LINK:
+            return (index.h("a", { href: content, target: "_blank" }, cell.value));
+        case kupManager.FCellTypes.NUMBER:
+            if (content && content != '') {
+                const cellValueNumber = dom.ketchup.math.numberifySafe(cell.value);
+                const cellValue = kupManager.getCellValueForDisplay(column, cell);
+                if (cellValueNumber < 0) {
+                    classObj[kupManager.FCellClasses.TEXT_DANGER] = true;
+                }
+                if (isAutoCentered(props)) {
+                    classObj[kupManager.FCellClasses.C_RIGHT_ALIGNED] = true;
+                }
+                return index.h("div", { class: "f-cell__text" }, cellValue);
+            }
+            return index.h("div", { class: "f-cell__text" }, content);
+        case kupManager.FCellTypes.SWITCH:
+            if (isAutoCentered(props)) {
+                classObj[kupManager.FCellClasses.C_CENTERED] = true;
+            }
+            subcomponentProps['disabled'] = true;
+            return index.h(FSwitch, Object.assign({}, subcomponentProps));
+        default:
+            return index.h("div", { class: "f-cell__text" }, content);
+    }
+}
+function setKupCell(cellType, classObj, subcomponentProps, cell, row, column, props) {
+    switch (cellType) {
+        case kupManager.FCellTypes.BAR:
+            if (!subcomponentProps.data) {
+                return (index.h("kup-image", Object.assign({ key: column.name + props.row.id, sizeX: "250px" }, subcomponentProps)));
+            }
+            else {
+                const barStyle = {
+                    height: subcomponentProps.sizeY,
+                    width: '100%',
+                };
+                return (index.h("div", { style: barStyle },
+                    index.h(fImage.FImage, Object.assign({}, subcomponentProps))));
+            }
+        case kupManager.FCellTypes.BUTTON:
+            if (isAutoCentered(props)) {
+                classObj[kupManager.FCellClasses.C_CENTERED] = true;
+            }
+            return (index.h(fButton.FButton, Object.assign({}, subcomponentProps, { onClick: (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.CLICK) })));
+        case kupManager.FCellTypes.BUTTON_LIST:
+            if (isAutoCentered(props)) {
+                classObj[kupManager.FCellClasses.C_CENTERED] = true;
+            }
+            subcomponentProps['data-storage'] = {
+                cell: cell,
+                row: row,
+                column: column,
+            };
+            return (index.h("kup-button-list", Object.assign({ key: column.name + props.row.id }, subcomponentProps)));
+        case kupManager.FCellTypes.CHART:
+            if (isAutoCentered(props)) {
+                classObj[kupManager.FCellClasses.C_CENTERED] = true;
+            }
+            return (index.h("kup-chart", Object.assign({ key: column.name + props.row.id }, subcomponentProps)));
+        case kupManager.FCellTypes.MULTI_AUTOCOMPLETE:
+        case kupManager.FCellTypes.MULTI_COMBOBOX:
+        case kupManager.FCellTypes.CHIP:
+            return index.h(fChip.FChip, Object.assign({}, subcomponentProps));
+        case kupManager.FCellTypes.COLOR_PICKER:
+            return (index.h("kup-color-picker", Object.assign({ key: column.name + props.row.id }, subcomponentProps, { class: isFullWidth(props) ? 'kup-full-width' : '', disabled: true })));
+        case kupManager.FCellTypes.GAUGE:
+            return (index.h("kup-gauge", Object.assign({ key: column.name + props.row.id, value: dom.ketchup.math.numberifySafe(cell.value), "width-component": "280px" }, subcomponentProps)));
+        case kupManager.FCellTypes.KNOB:
+        case kupManager.FCellTypes.PROGRESS_BAR:
+            return subcomponentProps.customStyle ? (index.h("kup-progress-bar", Object.assign({ key: column.name + props.row.id }, subcomponentProps))) : (index.h(FProgressBar, Object.assign({}, subcomponentProps)));
+        case kupManager.FCellTypes.RADIO:
+            if (isAutoCentered(props)) {
+                classObj[kupManager.FCellClasses.C_CENTERED] = true;
+            }
+            subcomponentProps['disabled'] = row.readOnly;
+            return index.h(FRadio, Object.assign({}, subcomponentProps));
+        case kupManager.FCellTypes.RATING:
+            return index.h(FRating, Object.assign({}, subcomponentProps, { disabled: true }));
+    }
+}
+function cellEvent(e, props, cellType, cellEventName) {
+    const cell = props.cell;
+    const column = props.column;
+    const comp = props.component;
+    const row = props.row;
+    let value = getValueFromEventTaget(e, cellType);
+    if (cellEventName === kupManager.FCellEvents.UPDATE) {
+        switch (cellType) {
+            case kupManager.FCellTypes.AUTOCOMPLETE:
+            case kupManager.FCellTypes.COMBOBOX:
+            case kupManager.FCellTypes.DATE:
+            case kupManager.FCellTypes.TIME:
+                if (cell.data) {
+                    cell.data['initialValue'] = value;
+                }
+                break;
+            case kupManager.FCellTypes.CHECKBOX:
+            case kupManager.FCellTypes.SWITCH:
+                value = value === 'on' ? '0' : '1';
+                if (cell.data) {
+                    cell.data.checked =
+                        value === '0' ? false : true;
+                }
+                break;
+            case kupManager.FCellTypes.CHIP:
+            case kupManager.FCellTypes.MULTI_AUTOCOMPLETE:
+            case kupManager.FCellTypes.MULTI_COMBOBOX:
+                value = e.detail
+                    .stringifiedValues;
+                if (cell.data) {
+                    cell.data.data = e.detail.comp.data;
+                }
+                break;
+        }
+        if (cell.obj) {
+            cell.obj.k = value.toString();
+        }
+        cell.value = value.toString();
+        cell.displayedValue = null;
+        cell.displayedValue = kupManager.getCellValueForDisplay(column, cell);
+    }
+    if (comp && comp.rootElement) {
+        const cellEvent = new CustomEvent(cellEventName, {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+            detail: {
+                comp: comp,
+                id: comp.rootElement.id,
+                cell: cell,
+                column: column,
+                event: e,
+                row: row,
+                type: cellType,
+            },
+        });
+        comp.rootElement.dispatchEvent(cellEvent);
+        if (cellEventName === kupManager.FCellEvents.UPDATE) {
+            try {
+                comp.refresh();
+            }
+            catch (error) { }
+        }
+    }
+}
+function getValueFromEventTaget(e, cellType) {
+    const isInputEvent = !!(e.target.tagName === 'INPUT');
+    let value = isInputEvent
+        ? e.target.value
+        : e.detail.value;
+    if (cellType === kupManager.FCellTypes.CHECKBOX && isInputEvent) {
+        value = e.target.checked ? 'off' : 'on';
+    }
+    if (cellType === kupManager.FCellTypes.NUMBER && isInputEvent) {
+        value = dom.ketchup.math.formattedStringToNumberString(value, '');
+    }
+    return value;
+}
+function isAutoCentered(props) {
+    var _a;
+    return kupManager.autoCenterComps.includes((_a = props.component) === null || _a === void 0 ? void 0 : _a.rootElement.tagName);
+}
+function isFullWidth(props) {
+    var _a;
+    return kupManager.fullWidthFieldsComps.includes((_a = props.component) === null || _a === void 0 ? void 0 : _a.rootElement.tagName);
+}
+
+exports.FCell = FCell;
+exports.FProgressBar = FProgressBar;
+exports.FRadio = FRadio;
+exports.FRating = FRating;
+exports.FSwitch = FSwitch;