@sme.up/ketchup 4.0.0 → 4.2.0-SNAPSHOT

package/dist/esm/f-cell-ac520cb2.js

@@ -0,0 +1,723 @@
+import { h, a as getAssetPath } from './index-e0e67c23.js';
+import { b as getCellValueForDisplay } from './cell-utils-9a2914fc.js';
+import { a as KupThemeIconValues, b as KupThemeColorValues } from './kup-manager-bba32828.js';
+import { d as stringToNumber } from './utils-cfcbe33f.js';
+import { F as FImage } from './f-image-70ca9dfe.js';
+import { F as FChip } from './f-chip-babf1740.js';
+
+/*-------------------------------------------------*/
+/*                C o m p o n e n t                */
+/*-------------------------------------------------*/
+const FTextField = (props, children) => {
+  return (h("div", Object.assign({ class: `f-text-field ${props.danger ? 'kup-danger' : ''} ${props.fullHeight ? 'kup-full-height' : ''} ${props.fullWidth ? 'kup-full-width' : ''}  ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.shaped ? 'kup-shaped' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''}  ${props.wrapperClass ? props.wrapperClass : ''}` }, 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),
+      h("label", null, props.label),
+    ])) : ([setContent(props), setHelper(props)]),
+    children));
+};
+/*-------------------------------------------------*/
+/*                  M e t h o d s                  */
+/*-------------------------------------------------*/
+function setContent(props) {
+  const isOutlined = props.textArea || props.outlined;
+  let labelEl;
+  let iconEl;
+  if (props.label && !props.leadingLabel && !props.trailingLabel) {
+    labelEl = (h("label", { class: "mdc-floating-label", htmlFor: "kup-input" }, props.label));
+  }
+  if (props.icon) {
+    let iconStyle;
+    let iconClass = '';
+    if (Object.values(KupThemeIconValues).indexOf(props.icon) > -1) {
+      iconClass = props.icon.replace('--', '');
+    }
+    else {
+      let svg = `url('${getAssetPath(`./assets/svg/${props.icon}.svg`)}') no-repeat center`;
+      iconStyle = {
+        mask: svg,
+        webkitMask: svg,
+      };
+    }
+    iconEl = (h("span", { tabindex: "0", style: iconStyle, onClick: props.onIconClick, class: `mdc-text-field__icon kup-icon action ${iconClass}` }));
+  }
+  const classObj = {
+    'is-clearable': props.isClearable,
+    'mdc-text-field': true,
+    'mdc-text-field--disabled': props.disabled,
+    'mdc-text-field--filled': !props.fullWidth && !isOutlined,
+    'mdc-text-field--no-label': !props.label,
+    'mdc-text-field--fullwidth': props.fullWidth,
+    'mdc-text-field--outlined': isOutlined,
+    'mdc-text-field--textarea': props.textArea,
+    'mdc-text-field--with-leading-icon': props.icon && !props.trailingIcon,
+    'mdc-text-field--with-trailing-icon': props.icon && props.trailingIcon,
+  };
+  return (h("div", { class: classObj },
+    props.textArea && props.maxLength ? (h("div", { class: "mdc-text-field-character-counter" },
+      "'0 / ' + ",
+      props.maxLength)) : undefined,
+    !props.trailingIcon ? iconEl : undefined,
+    props.textArea ? (h("span", { class: "mdc-text-field__resizer" },
+      h("textarea", { class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, maxlength: props.maxLength, value: props.value, onBlur: props.onBlur, onClick: props.onClick, onChange: props.onChange, onFocus: props.onFocus, onInput: props.onInput, onKeyDown: props.onKeyDown }))) : (h("input", { type: props.inputType ? props.inputType : 'text', step: props.step, min: props.min, max: props.max, class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, placeholder: props.fullWidth ? props.label : undefined, maxlength: props.maxLength, value: props.value, onBlur: props.onBlur, onClick: props.onClick, onChange: props.onChange, onFocus: props.onFocus, onInput: props.onInput, onKeyDown: props.onKeyDown })),
+    props.isClearable ? (h("span", { tabindex: "1", class: `mdc-text-field__icon kup-icon ${KupThemeIconValues.CLEAR.replace('--', '')}`, onClick: props.onClearIconClick })) : undefined,
+    props.trailingIcon ? iconEl : undefined,
+    !props.fullWidth && !isOutlined ? labelEl : undefined,
+    isOutlined ? (h("div", { class: "mdc-notched-outline" },
+      h("div", { class: "mdc-notched-outline__leading" }),
+      h("div", { class: "mdc-notched-outline__notch" }, labelEl),
+      h("div", { class: "mdc-notched-outline__trailing" }))) : (h("span", { class: "mdc-line-ripple" }))));
+}
+function setHelper(props) {
+  if (props.helperEnabled) {
+    if (props.helper) {
+      const classObj = {
+        'mdc-text-field-helper-text': true,
+        'mdc-text-field-helper-text--persistent': !props.helperWhenFocused,
+      };
+      return (h("div", { class: "mdc-text-field-helper-line" },
+        h("div", { class: classObj }, props.helper),
+        props.maxLength && !props.textArea ? (h("div", { class: "mdc-text-field-character-counter" },
+          "'0 / ' + ",
+          props.maxLength.toString())) : undefined));
+    }
+    else {
+      if (props.maxLength && !props.textArea) {
+        return (h("div", { class: "mdc-text-field-helper-line" },
+          h("div", { class: "mdc-text-field-character-counter" },
+            "'0 / ' + ",
+            props.maxLength)));
+      }
+    }
+  }
+}
+
+const autoAlignComps = ['KUP-DATA-TABLE', 'KUP-TREE'];
+/**
+ * Supported cell events.
+ */
+var FCellEvents;
+(function (FCellEvents) {
+  FCellEvents["CLICK"] = "kup-cell-click";
+  FCellEvents["INPUT"] = "kup-cell-input";
+  FCellEvents["UPDATE"] = "kup-cell-update";
+})(FCellEvents || (FCellEvents = {}));
+/**
+ * Supported cell padding.
+ */
+var FCellPadding;
+(function (FCellPadding) {
+  FCellPadding["DENSE"] = "dense";
+  FCellPadding["MEDIUM"] = "medium";
+  FCellPadding["NONE"] = "";
+  FCellPadding["WIDE"] = "wide";
+})(FCellPadding || (FCellPadding = {}));
+/**
+ * Supported cell CSS classes.
+ */
+var FCellClasses;
+(function (FCellClasses) {
+  FCellClasses["BG_DANGER"] = "danger-bg";
+  FCellClasses["BG_GREEN"] = "green-bg";
+  FCellClasses["BG_GREY"] = "grey-bg";
+  FCellClasses["BG_ORANGE"] = "orange-bg";
+  FCellClasses["BG_PURPLE"] = "purple-bg";
+  FCellClasses["BG_SUCCESS"] = "success-bg";
+  FCellClasses["BG_TEAL"] = "teal-bg";
+  FCellClasses["BG_WARNING"] = "warning-bg";
+  FCellClasses["C_BG_DANGER"] = "c-danger-bg";
+  FCellClasses["C_BG_GREEN"] = "c-green-bg";
+  FCellClasses["C_BG_GREY"] = "c-grey-bg";
+  FCellClasses["C_BG_ORANGE"] = "c-orange-bg";
+  FCellClasses["C_BG_PURPLE"] = "c-purple-bg";
+  FCellClasses["C_BG_SUCCESS"] = "c-success-bg";
+  FCellClasses["C_BG_TEAL"] = "c-teal-bg";
+  FCellClasses["C_BG_WARNING"] = "c-warning-bg";
+  FCellClasses["C_CENTERED"] = "c-centered";
+  FCellClasses["C_FITTED"] = "c-fitted";
+  FCellClasses["C_PADDED"] = "c-padded";
+  FCellClasses["C_PADDED_HOR"] = "c-padded-hor";
+  FCellClasses["C_PADDED_VER"] = "c-padded-ver";
+  FCellClasses["C_ROUND"] = "c-round";
+  FCellClasses["C_RIGHT_ALIGNED"] = "c-right-aligned";
+  FCellClasses["C_SHAPED"] = "c-shaped";
+  FCellClasses["C_TEXT_VERTICAL"] = "c-vertical-text";
+  FCellClasses["CLICKABLE"] = "clickable";
+  FCellClasses["HOVER_DISPLAY"] = "display-on-hover";
+  FCellClasses["HOVER_EXPAND"] = "expand-on-hover";
+  FCellClasses["HOVER_REDUCE"] = "reduce-on-hover";
+  FCellClasses["INDICATOR_TOPRIGHT"] = "top-right-indicator";
+  FCellClasses["LINK"] = "link";
+  FCellClasses["MONOSPACE"] = "monospace";
+  FCellClasses["OBJ"] = "obj";
+  FCellClasses["SHAPED"] = "shaped";
+  FCellClasses["TEXT_DANGER"] = "danger-text";
+  FCellClasses["TEXT_INFO"] = "info-text";
+  FCellClasses["TEXT_PRIMARY"] = "primary-text";
+  FCellClasses["TEXT_PURPLE"] = "purple-text";
+  FCellClasses["TEXT_SECONDARY"] = "secondary-text";
+  FCellClasses["TEXT_STRONG"] = "strong-text";
+  FCellClasses["TEXT_SUCCESS"] = "success-text";
+  FCellClasses["TEXT_WARNING"] = "warning-text";
+  FCellClasses["UNDERLINED"] = "underlined";
+})(FCellClasses || (FCellClasses = {}));
+/**
+ * Supported cell shapes.
+ */
+var FCellShapes;
+(function (FCellShapes) {
+  FCellShapes["AUTOCOMPLETE"] = "ACP";
+  FCellShapes["BUTTON_LIST"] = "BTN";
+  FCellShapes["CHART"] = "GRA";
+  FCellShapes["CHECKBOX"] = "CHK";
+  FCellShapes["CHIP"] = "CHI";
+  FCellShapes["COLOR_PICKER"] = "CLP";
+  FCellShapes["COMBOBOX"] = "CMB";
+  FCellShapes["EDITOR"] = "EDT";
+  FCellShapes["GAUGE"] = "GAU";
+  FCellShapes["IMAGE"] = "IMG";
+  FCellShapes["KNOB"] = "KNB";
+  FCellShapes["PROGRESS_BAR"] = "PGB";
+  FCellShapes["RADIO"] = "RAD";
+  FCellShapes["RATING"] = "RTG";
+  FCellShapes["TEXT_FIELD"] = "ITX";
+})(FCellShapes || (FCellShapes = {}));
+/**
+ * Supported cell types.
+ */
+var FCellTypes;
+(function (FCellTypes) {
+  FCellTypes["AUTOCOMPLETE"] = "autocomplete";
+  FCellTypes["BAR"] = "bar";
+  FCellTypes["BUTTON"] = "button";
+  FCellTypes["BUTTON_LIST"] = "button-list";
+  FCellTypes["CHART"] = "chart";
+  FCellTypes["CHECKBOX"] = "checkbox";
+  FCellTypes["CHIP"] = "chips";
+  FCellTypes["COLOR_PICKER"] = "color-picker";
+  FCellTypes["COMBOBOX"] = "combobox";
+  FCellTypes["DATE"] = "date";
+  FCellTypes["DATETIME"] = "datetime";
+  FCellTypes["EDITOR"] = "editor";
+  FCellTypes["GAUGE"] = "gauge";
+  FCellTypes["ICON"] = "icon";
+  FCellTypes["IMAGE"] = "image";
+  FCellTypes["KNOB"] = "knob";
+  FCellTypes["LINK"] = "link";
+  FCellTypes["NUMBER"] = "number";
+  FCellTypes["PROGRESS_BAR"] = "progress-bar";
+  FCellTypes["RADIO"] = "radio";
+  FCellTypes["RATING"] = "rating";
+  FCellTypes["STRING"] = "string";
+  FCellTypes["TIME"] = "time";
+})(FCellTypes || (FCellTypes = {}));
+const editableTypes = [
+  FCellTypes.AUTOCOMPLETE,
+  FCellTypes.CHECKBOX,
+  FCellTypes.COLOR_PICKER,
+  FCellTypes.COMBOBOX,
+  FCellTypes.DATE,
+  FCellTypes.NUMBER,
+  FCellTypes.RATING,
+  FCellTypes.STRING,
+  FCellTypes.TIME,
+];
+const kupTypes = [
+  FCellTypes.BAR,
+  FCellTypes.BUTTON,
+  FCellTypes.BUTTON_LIST,
+  FCellTypes.CHART,
+  FCellTypes.CHIP,
+  FCellTypes.COLOR_PICKER,
+  FCellTypes.GAUGE,
+  FCellTypes.KNOB,
+  FCellTypes.PROGRESS_BAR,
+  FCellTypes.RADIO,
+  FCellTypes.RATING,
+];
+
+/*-------------------------------------------------*/
+/*                C o m p o n e n t                */
+/*-------------------------------------------------*/
+const FCheckbox = (props) => {
+  const indeterminateAttr = {
+    'data-indeterminate': props.indeterminate ? true : false,
+  };
+  const classObj = {
+    checkbox: true,
+    'checkbox--checked': props.checked && !props.indeterminate ? true : false,
+    'checkbox--disabled': props.disabled ? true : false,
+    'checkbox--indeterminate': props.indeterminate ? true : false,
+  };
+  return (h("div", Object.assign({ class: `f-checkbox ${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 }),
+    h("div", { class: `form-field ${props.leadingLabel ? 'form-field--align-end' : ''}` },
+      h("div", { class: classObj },
+        h("input", Object.assign({ type: "checkbox", class: "checkbox__native-control", checked: props.checked, disabled: props.disabled, onBlur: props.onBlur, onChange: props.onChange, onFocus: props.onFocus }, indeterminateAttr, { value: props.checked ? 'on' : 'off' })),
+        h("div", { class: "checkbox__background", onClick: props.onChange },
+          h("svg", { class: "checkbox__checkmark", viewBox: "0 0 24 24" },
+            h("path", { class: "checkbox__checkmark-path", fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" })),
+          h("div", { class: "checkbox__mixedmark" }))),
+      props.label ? h("label", null, props.label) : undefined)));
+};
+
+const dom = document.documentElement;
+/*-------------------------------------------------*/
+/*                C o m p o n e n t                */
+/*-------------------------------------------------*/
+const FCell = (props) => {
+  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 && props.editable ? true : false;
+  const valueToDisplay = props.previousValue !== cell.value ? cell.value : '';
+  const cellType = getCellType(cell, shape);
+  const subcomponentProps = Object.assign({}, cell.data);
+  let cssClasses = cell.cssClass
+    ? cell.cssClass
+    : column.cssClass
+      ? column.cssClass
+      : '';
+  const classObj = {
+    'f-cell': true,
+    [FCellClasses.OBJ]: hasObj ? true : false,
+    [cellType + '-cell']: true,
+    [props.wrapperClass]: props.wrapperClass ? true : false,
+    [props.density]: props.density && cellType !== FCellTypes.BAR ? true : false,
+    [cssClasses]: cssClasses ? true : false,
+  };
+  let content = valueToDisplay;
+  if (isEditable && editableTypes.includes(cellType)) {
+    content = setEditableCell(cellType, classObj, cell, column, props);
+  }
+  else if (cell.data && kupTypes.includes(cellType)) {
+    if (props.setSizes) {
+      setCellSizeKup(cellType, subcomponentProps, cell);
+    }
+    if (!props.renderKup) {
+      const lazyClass = 'cell-' + cellType + ' placeholder';
+      content = 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(${KupThemeColorValues.TEXT}-rgb), 0.375)`,
+      resource: cell.icon ? cell.icon : column.icon,
+      sizeX: '1.25em',
+      sizeY: '1.25em',
+      wrapperClass: 'obj-icon',
+    };
+    icon = h(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(${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 = h(FImage, Object.assign({}, fProps));
+  }
+  return (h("div", { class: classObj, style: cell.style },
+    h("div", { class: "f-cell__content", style: cell.styleContent, title: cellTitle },
+      props.indents,
+      infoEl,
+      icon,
+      content)));
+};
+function setCellSize(cellType, subcomponentProps, cell, props) {
+  switch (cellType) {
+    case FCellTypes.CHECKBOX:
+    case 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 FCellTypes.IMAGE:
+      if (props.component.rootElement.tagName ===
+        'KUP-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 FCellTypes.BAR:
+      if (!subcomponentProps.sizeY) {
+        subcomponentProps.sizeY = '26px';
+      }
+      break;
+    case 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 FCellTypes.CHART:
+      if (!subcomponentProps.sizeX) {
+        subcomponentProps.sizeX = '100%';
+      }
+      if (!subcomponentProps.sizeY) {
+        subcomponentProps.sizeY = '100%';
+      }
+      break;
+    case FCellTypes.CHIP:
+      if (cell.style) {
+        if (!cell.style.height) {
+          cell.style['minHeight'] = '40px';
+        }
+      }
+      else {
+        cell.style = { minHeight: '40px' };
+      }
+      break;
+    case 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 FCellTypes.AUTOCOMPLETE:
+      return (h("kup-autocomplete", Object.assign({}, cell.data, { class: "kup-full-width", "onkup-autocomplete-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-autocomplete-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT) })));
+    case FCellTypes.CHECKBOX:
+      if (autoAlignComps.includes(props.component.rootElement.tagName)) {
+        classObj[FCellClasses.C_CENTERED] = true;
+      }
+      return (h(FCheckbox, Object.assign({}, cell.data, { onChange: (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) })));
+    case FCellTypes.COLOR_PICKER:
+      return (h("kup-color-picker", Object.assign({}, cell.data, { disabled: false, "onkup-colorpicker-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) })));
+    case FCellTypes.COMBOBOX:
+      return (h("kup-combobox", Object.assign({}, cell.data, { class: "kup-full-width", "onkup-combobox-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-combobox-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT) })));
+    case FCellTypes.DATE:
+      return (h("kup-date-picker", Object.assign({ initialValue: cell.value }, cell.data, { class: "kup-full-width", "onkup-datepicker-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-datepicker-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT) })));
+    case FCellTypes.RATING:
+      return (h("kup-rating", Object.assign({}, cell.data, { disabled: false, "onkup-rating-click": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) })));
+    case FCellTypes.TIME:
+      return (h("kup-time-picker", Object.assign({ initialValue: cell.value }, cell.data, { class: "kup-full-width", "onkup-timepicker-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-timepicker-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT) })));
+    case FCellTypes.NUMBER:
+    case FCellTypes.STRING:
+      return (h(FTextField, Object.assign({}, cell.data, { icon: cell.icon ? cell.icon : column.icon ? column.icon : null, fullWidth: true, inputType: cellType === FCellTypes.NUMBER ? 'number' : null, value: cellType === FCellTypes.NUMBER
+          ? stringToNumber(cell.value).toString()
+          : cell.value, onChange: (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), onInput: (e) => cellEvent(e, props, cellType, FCellEvents.INPUT) })));
+  }
+}
+function setCell(cellType, subcomponentProps, content, classObj, cell, column, props) {
+  switch (cellType) {
+    case FCellTypes.AUTOCOMPLETE:
+    case FCellTypes.COMBOBOX:
+    case FCellTypes.DATE:
+    case FCellTypes.DATETIME:
+    case FCellTypes.TIME:
+      if (content && content != '') {
+        const cellValue = getCellValueForDisplay(column, cell);
+        return h("div", { class: "f-cell__text" }, cellValue);
+      }
+      return content;
+    case FCellTypes.CHECKBOX:
+      if (autoAlignComps.includes(props.component.rootElement.tagName)) {
+        classObj[FCellClasses.C_CENTERED] = true;
+      }
+      return (h(FImage, { resource: subcomponentProps.checked
+          ? 'check_box'
+          : 'check_box_outline_blank', sizeX: "18px", sizeY: "18px" }));
+    case FCellTypes.EDITOR:
+      return h("div", { innerHTML: cell.value });
+    case FCellTypes.ICON:
+    case FCellTypes.IMAGE:
+      if (autoAlignComps.includes(props.component.rootElement.tagName)) {
+        classObj[FCellClasses.C_CENTERED] = true;
+      }
+      if (subcomponentProps.badgeData) {
+        classObj[FCellClasses.C_PADDED] = true;
+      }
+      return h(FImage, Object.assign({}, subcomponentProps));
+    case FCellTypes.LINK:
+      return (h("a", { href: content, target: "_blank" }, cell.value));
+    case FCellTypes.NUMBER:
+      if (content && content != '') {
+        const cellValueNumber = stringToNumber(cell.value);
+        const cellValue = getCellValueForDisplay(column, cell);
+        if (cellValueNumber < 0) {
+          classObj[FCellClasses.TEXT_DANGER] = true;
+        }
+        if (autoAlignComps.includes(props.component.rootElement.tagName)) {
+          classObj[FCellClasses.C_RIGHT_ALIGNED] = true;
+        }
+        return h("div", { class: "f-cell__text" }, cellValue);
+      }
+      return h("div", { class: "f-cell__text" }, content);
+    default:
+      return h("div", { class: "f-cell__text" }, content);
+  }
+}
+function setKupCell(cellType, classObj, subcomponentProps, cell, row, column, props) {
+  switch (cellType) {
+    case FCellTypes.BAR:
+      if (!subcomponentProps.data) {
+        return h("kup-image", Object.assign({}, subcomponentProps));
+      }
+      else {
+        const barStyle = {
+          height: subcomponentProps.sizeY,
+        };
+        return (h("div", { style: barStyle },
+          h(FImage, Object.assign({}, subcomponentProps))));
+      }
+    case FCellTypes.BUTTON:
+      if (autoAlignComps.includes(props.component.rootElement.tagName)) {
+        classObj[FCellClasses.C_CENTERED] = true;
+      }
+      return (h("kup-button", Object.assign({}, subcomponentProps, { "onkup-button-click": (e) => cellEvent(e, props, cellType, FCellEvents.CLICK) })));
+    case FCellTypes.BUTTON_LIST:
+      if (autoAlignComps.includes(props.component.rootElement.tagName)) {
+        classObj[FCellClasses.C_CENTERED] = true;
+      }
+      subcomponentProps['data-storage'] = {
+        cell: cell,
+        row: row,
+        column: column,
+      };
+      return h("kup-button-list", Object.assign({}, subcomponentProps));
+    case FCellTypes.CHART:
+      if (autoAlignComps.includes(props.component.rootElement.tagName)) {
+        classObj[FCellClasses.C_CENTERED] = true;
+      }
+      return h("kup-chart", Object.assign({}, subcomponentProps));
+    case FCellTypes.CHIP:
+      return h(FChip, Object.assign({}, subcomponentProps));
+    case FCellTypes.COLOR_PICKER:
+      return (h("kup-color-picker", Object.assign({}, subcomponentProps, { disabled: true })));
+    case FCellTypes.GAUGE:
+      return (h("kup-gauge", Object.assign({ value: stringToNumber(cell.value), "width-component": "280px" }, subcomponentProps)));
+    case FCellTypes.KNOB:
+    case FCellTypes.PROGRESS_BAR:
+      return h("kup-progress-bar", Object.assign({}, subcomponentProps));
+    case FCellTypes.RADIO:
+      if (autoAlignComps.includes(props.component.rootElement.tagName)) {
+        classObj[FCellClasses.C_CENTERED] = true;
+      }
+      subcomponentProps['disabled'] = row.readOnly;
+      return h("kup-radio", Object.assign({}, subcomponentProps));
+    case FCellTypes.RATING:
+      return h("kup-rating", Object.assign({}, subcomponentProps, { disabled: true }));
+  }
+}
+function getCellType(cell, shape) {
+  const obj = cell.obj;
+  if (shape) {
+    switch (shape.toUpperCase()) {
+      case FCellShapes.AUTOCOMPLETE:
+        return FCellTypes.AUTOCOMPLETE;
+      case FCellShapes.BUTTON_LIST:
+        return FCellTypes.BUTTON_LIST;
+      case FCellShapes.CHART:
+        return FCellTypes.CHART;
+      case FCellShapes.CHECKBOX:
+        return FCellTypes.CHECKBOX;
+      case FCellShapes.CHIP:
+        return FCellTypes.CHIP;
+      case FCellShapes.COLOR_PICKER:
+        return FCellTypes.COLOR_PICKER;
+      case FCellShapes.COMBOBOX:
+        return FCellTypes.COMBOBOX;
+      case FCellShapes.EDITOR:
+        return FCellTypes.EDITOR;
+      case FCellShapes.GAUGE:
+        return FCellTypes.GAUGE;
+      case FCellShapes.IMAGE:
+        return FCellTypes.IMAGE;
+      case FCellShapes.KNOB:
+        return FCellTypes.KNOB;
+      case FCellShapes.PROGRESS_BAR:
+        return FCellTypes.PROGRESS_BAR;
+      case FCellShapes.RADIO:
+        return FCellTypes.RADIO;
+      case FCellShapes.RATING:
+        return FCellTypes.RATING;
+      case FCellShapes.TEXT_FIELD:
+        return FCellTypes.STRING;
+    }
+  }
+  if (dom.ketchup.objects.isBar(obj)) {
+    return FCellTypes.BAR;
+  }
+  else if (dom.ketchup.objects.isButton(obj)) {
+    return FCellTypes.BUTTON;
+  }
+  else if (dom.ketchup.objects.isChart(obj)) {
+    return FCellTypes.CHART;
+  }
+  else if (dom.ketchup.objects.isCheckbox(obj)) {
+    return FCellTypes.CHECKBOX;
+  }
+  else if (dom.ketchup.objects.isColor(obj)) {
+    return FCellTypes.COLOR_PICKER;
+  }
+  else if (dom.ketchup.objects.isIcon(obj)) {
+    return FCellTypes.ICON;
+  }
+  else if (dom.ketchup.objects.isImage(obj)) {
+    return FCellTypes.IMAGE;
+  }
+  else if (dom.ketchup.objects.isLink(obj)) {
+    return FCellTypes.LINK;
+  }
+  else if (dom.ketchup.objects.isProgressBar(obj)) {
+    return FCellTypes.PROGRESS_BAR;
+  }
+  else if (dom.ketchup.objects.isRadio(obj)) {
+    return FCellTypes.RADIO;
+  }
+  else if (dom.ketchup.objects.isKupObjList(obj)) {
+    return FCellTypes.CHIP;
+  }
+  else if (dom.ketchup.objects.isNumber(obj)) {
+    return FCellTypes.NUMBER;
+  }
+  else if (dom.ketchup.objects.isDate(obj)) {
+    return FCellTypes.DATE;
+  }
+  else if (dom.ketchup.objects.isTimestamp(obj)) {
+    return FCellTypes.DATETIME;
+  }
+  else if (dom.ketchup.objects.isTime(obj)) {
+    return FCellTypes.TIME;
+  }
+  else if (dom.ketchup.objects.isVoCodver(obj)) {
+    return FCellTypes.ICON;
+  }
+  else {
+    return FCellTypes.STRING;
+  }
+}
+function cellEvent(e, props, cellType, cellEventName) {
+  const cell = props.cell;
+  const column = props.column;
+  const comp = props.component;
+  const row = props.row;
+  const isInputEvent = !!(e.target.tagName === 'INPUT');
+  let value = isInputEvent
+    ? e.target.value
+    : e.detail.value;
+  switch (cellType) {
+    case FCellTypes.AUTOCOMPLETE:
+    case FCellTypes.COMBOBOX:
+    case FCellTypes.DATE:
+    case FCellTypes.TIME:
+      if (cell.data) {
+        cell.data['initialValue'] = value;
+      }
+      break;
+    case FCellTypes.CHECKBOX:
+      value = value === 'on' ? '0' : '1';
+      if (cell.data) {
+        cell.data.checked =
+          value === '0' ? false : true;
+      }
+      break;
+  }
+  if (cell.obj) {
+    cell.obj.k = value;
+  }
+  cell.value = value;
+  cell.displayedValue = null;
+  cell.displayedValue = getCellValueForDisplay(column, cell);
+  if (comp && comp.rootElement) {
+    const updateEvent = new CustomEvent(cellEventName, {
+      bubbles: true,
+      cancelable: true,
+      detail: {
+        comp: comp,
+        id: comp.rootElement.id,
+        cell: cell,
+        column: column,
+        event: e,
+        row: row,
+        type: cellType,
+      },
+    });
+    comp.rootElement.dispatchEvent(updateEvent);
+    try {
+      comp.refresh();
+    }
+    catch (error) { }
+  }
+}
+
+export { FTextField as F, FCell as a, FCheckbox as b, FCellPadding as c };