@sme.up/ketchup 8.0.2 → 8.1.0

package/dist/esm/{f-cell-90240a8c.js → f-cell-5822ea68.js}

@@ -1,480 +1,480 @@
-import { a9 as editableTypes, aa as kupTypes, b as KupThemeColorValues, a6 as FCellTypes, ab as KupTagNames, ac as fullWidthFieldsComps, ad as FCellClasses, ae as autoCenterComps, af as getCellValueForDisplay, ag as FCellEvents } from './kup-manager-d1da769e.js';
-import { h } from './index-8bd38435.js';
-import { F as FCheckbox } from './f-checkbox-9b3f5f5b.js';
-import { F as FTextField } from './f-text-field-d231982c.js';
-import { F as FImage } from './f-image-f2e9bf79.js';
-import { F as FChipType, a as FChip } from './f-chip-2238ad43.js';
+import { a9 as editableTypes, aa as kupTypes, b as KupThemeColorValues, a6 as FCellTypes, ab as KupTagNames, ac as fullWidthFieldsComps, ad as FCellClasses, ae as autoCenterComps, af as getCellValueForDisplay, ag as FCellEvents } from './kup-manager-89dd9137.js';
+import { h } from './index-238342f2.js';
+import { F as FCheckbox } from './f-checkbox-c15911de.js';
+import { F as FTextField } from './f-text-field-15850e05.js';
+import { F as FImage } from './f-image-f57832fa.js';
+import { F as FChipType, a as FChip } from './f-chip-f46a03f5.js';
 
-/**
- * Props of the kup-list component.
- * Used to export every prop in an object.
- */
-var KupListProps;
-(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.";
-})(KupListProps || (KupListProps = {}));
-/**
- * Available types of selection.
- */
-var KupListRole;
-(function (KupListRole) {
-  KupListRole["LISTBOX"] = "listbox";
-  KupListRole["RADIOGROUP"] = "radiogroup";
-  KupListRole["GROUP"] = "group";
-})(KupListRole || (KupListRole = {}));
-var ItemsDisplayMode;
-(function (ItemsDisplayMode) {
-  ItemsDisplayMode["CODE"] = "code";
-  ItemsDisplayMode["DESCRIPTION"] = "description";
-  ItemsDisplayMode["DESCRIPTION_AND_CODE"] = "both";
+/**
+ * Props of the kup-list component.
+ * Used to export every prop in an object.
+ */
+var KupListProps;
+(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.";
+})(KupListProps || (KupListProps = {}));
+/**
+ * Available types of selection.
+ */
+var KupListRole;
+(function (KupListRole) {
+  KupListRole["LISTBOX"] = "listbox";
+  KupListRole["RADIOGROUP"] = "radiogroup";
+  KupListRole["GROUP"] = "group";
+})(KupListRole || (KupListRole = {}));
+var ItemsDisplayMode;
+(function (ItemsDisplayMode) {
+  ItemsDisplayMode["CODE"] = "code";
+  ItemsDisplayMode["DESCRIPTION"] = "description";
+  ItemsDisplayMode["DESCRIPTION_AND_CODE"] = "both";
 })(ItemsDisplayMode || (ItemsDisplayMode = {}));
 
-/*-------------------------------------------------*/
-/*                C o m p o n e n t                */
-/*-------------------------------------------------*/
-const FSwitch = (props) => {
-  return (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 }),
-    h("div", { class: `form-field ${props.leadingLabel ? 'form-field--align-end' : ''}` },
-      h("div", { class: `switch ${props.checked ? 'switch--checked' : ''} ${props.disabled ? 'switch--disabled' : ''}` },
-        h("div", { class: "switch__track" }),
-        h("div", { class: "switch__thumb-underlay" },
-          h("div", { class: "switch__thumb" },
-            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 })))),
-      h("label", { onClick: props.onChange }, props.label))));
+/*-------------------------------------------------*/
+/*                C o m p o n e n t                */
+/*-------------------------------------------------*/
+const FSwitch = (props) => {
+  return (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 }),
+    h("div", { class: `form-field ${props.leadingLabel ? 'form-field--align-end' : ''}` },
+      h("div", { class: `switch ${props.checked ? 'switch--checked' : ''} ${props.disabled ? 'switch--disabled' : ''}` },
+        h("div", { class: "switch__track" }),
+        h("div", { class: "switch__thumb-underlay" },
+          h("div", { class: "switch__thumb" },
+            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 })))),
+      h("label", { onClick: props.onChange }, props.label))));
 };
 
-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,
-    [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", { onKeyUp: (e) => cellEvent(e, props, cellType, FCellEvents.KEYUP), class: classObj, "kup-get-cell-props": () => {
-      return props;
-    }, style: cell.style },
-    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 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 ===
-        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 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({ 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, FCellEvents.UPDATE), "onkup-autocomplete-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-autocomplete-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK) })));
-    case FCellTypes.CHECKBOX:
-      if (isAutoCentered(props)) {
-        classObj[FCellClasses.C_CENTERED] = true;
-      }
-      return (h(FCheckbox, Object.assign({}, cell.data, { onChange: (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) })));
-    case FCellTypes.CHIP:
-      return (h("kup-chip", Object.assign({}, cell.data, { type: FChipType.INPUT, enableInput: true, "onKup-chip-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) }),
-        h("kup-text-field", Object.assign({ fullWidth: true, slot: "field" }, cell.slotData))));
-    case FCellTypes.COLOR_PICKER:
-      return (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, FCellEvents.UPDATE) })));
-    case FCellTypes.COMBOBOX:
-      return (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, FCellEvents.UPDATE), "onkup-combobox-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-combobox-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK) })));
-    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) })));
-    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.DESCRIPTION_AND_CODE, selectMode: ItemsDisplayMode.DESCRIPTION_AND_CODE, "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))));
-    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.DESCRIPTION_AND_CODE, selectMode: ItemsDisplayMode.DESCRIPTION_AND_CODE, "onkup-combobox-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-combobox-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK) }, cell.slotData))));
-    case FCellTypes.RATING:
-      return (h("kup-rating", Object.assign({ key: column.name + props.row.id }, cell.data, { disabled: false, "onkup-rating-click": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) })));
-    case FCellTypes.SWITCH:
-      return (h(FSwitch, Object.assign({}, cell.data, { disabled: false, onChange: (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) })));
-    case FCellTypes.TIME:
-      return (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, FCellEvents.UPDATE), "onkup-timepicker-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT) })));
-    case FCellTypes.NUMBER:
-      classObj[FCellClasses.C_RIGHT_ALIGNED] = true;
-    case FCellTypes.LINK:
-    case FCellTypes.STRING:
-      return (h(FTextField, Object.assign({ inputType: cellType === FCellTypes.NUMBER ? 'number' : null, fullWidth: isFullWidth(props) ? true : false }, cell.data, { icon: cell.icon ? cell.icon : column.icon ? column.icon : null, value: cellType === FCellTypes.NUMBER
-          ? dom.ketchup.math
-            .numberifySafe(cell.value)
-            .toString()
-          : cell.value, onChange: (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), onInput: (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), onIconClick: (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK) })));
-  }
-}
-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 (isAutoCentered(props)) {
-        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 (isAutoCentered(props)) {
-        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 = dom.ketchup.math.numberifySafe(cell.value);
-        const cellValue = getCellValueForDisplay(column, cell);
-        if (cellValueNumber < 0) {
-          classObj[FCellClasses.TEXT_DANGER] = true;
-        }
-        if (isAutoCentered(props)) {
-          classObj[FCellClasses.C_RIGHT_ALIGNED] = true;
-        }
-        return h("div", { class: "f-cell__text" }, cellValue);
-      }
-      return h("div", { class: "f-cell__text" }, content);
-    case FCellTypes.SWITCH:
-      if (isAutoCentered(props)) {
-        classObj[FCellClasses.C_CENTERED] = true;
-      }
-      subcomponentProps['disabled'] = true;
-      return h(FSwitch, Object.assign({}, subcomponentProps));
-    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({ key: column.name + props.row.id }, subcomponentProps)));
-      }
-      else {
-        const barStyle = {
-          height: subcomponentProps.sizeY,
-          width: '100%',
-        };
-        return (h("div", { style: barStyle },
-          h(FImage, Object.assign({}, subcomponentProps))));
-      }
-    case FCellTypes.BUTTON:
-      if (isAutoCentered(props)) {
-        classObj[FCellClasses.C_CENTERED] = true;
-      }
-      return (h("kup-button", Object.assign({ key: column.name + props.row.id }, subcomponentProps, { "onkup-button-click": (e) => cellEvent(e, props, cellType, FCellEvents.CLICK) })));
-    case FCellTypes.BUTTON_LIST:
-      if (isAutoCentered(props)) {
-        classObj[FCellClasses.C_CENTERED] = true;
-      }
-      subcomponentProps['data-storage'] = {
-        cell: cell,
-        row: row,
-        column: column,
-      };
-      return (h("kup-button-list", Object.assign({ key: column.name + props.row.id }, subcomponentProps)));
-    case FCellTypes.CHART:
-      if (isAutoCentered(props)) {
-        classObj[FCellClasses.C_CENTERED] = true;
-      }
-      return (h("kup-chart", Object.assign({ key: column.name + props.row.id }, subcomponentProps)));
-    case FCellTypes.CHIP:
-      return h(FChip, Object.assign({}, subcomponentProps));
-    case FCellTypes.COLOR_PICKER:
-      return (h("kup-color-picker", Object.assign({ key: column.name + props.row.id }, subcomponentProps, { class: isFullWidth(props) ? 'kup-full-width' : '', disabled: true })));
-    case FCellTypes.GAUGE:
-      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 (h("kup-progress-bar", Object.assign({ key: column.name + props.row.id }, subcomponentProps)));
-    case FCellTypes.RADIO:
-      if (isAutoCentered(props)) {
-        classObj[FCellClasses.C_CENTERED] = true;
-      }
-      subcomponentProps['disabled'] = row.readOnly;
-      return (h("kup-radio", Object.assign({ key: column.name + props.row.id }, subcomponentProps)));
-    case FCellTypes.RATING:
-      return (h("kup-rating", Object.assign({ key: column.name + props.row.id }, 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 === FCellEvents.UPDATE) {
-    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:
-      case FCellTypes.SWITCH:
-        value = value === 'on' ? '0' : '1';
-        if (cell.data) {
-          cell.data.checked =
-            value === '0' ? false : true;
-        }
-        break;
-      case FCellTypes.CHIP:
-      case FCellTypes.MULTI_AUTOCOMPLETE:
-      case 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 = 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 === 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 === FCellTypes.NUMBER && isInputEvent) {
-    value = dom.ketchup.math.formattedStringToNumberString(value, '');
-  }
-  return value;
-}
-function isAutoCentered(props) {
-  var _a;
-  return autoCenterComps.includes((_a = props.component) === null || _a === void 0 ? void 0 : _a.rootElement.tagName);
-}
-function isFullWidth(props) {
-  var _a;
-  return fullWidthFieldsComps.includes((_a = props.component) === null || _a === void 0 ? void 0 : _a.rootElement.tagName);
+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,
+    [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", { onKeyUp: (e) => cellEvent(e, props, cellType, FCellEvents.KEYUP), class: classObj, "kup-get-cell-props": () => {
+      return props;
+    }, style: cell.style },
+    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 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 ===
+        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 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({ 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, FCellEvents.UPDATE), "onkup-autocomplete-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-autocomplete-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK) })));
+    case FCellTypes.CHECKBOX:
+      if (isAutoCentered(props)) {
+        classObj[FCellClasses.C_CENTERED] = true;
+      }
+      return (h(FCheckbox, Object.assign({}, cell.data, { onChange: (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) })));
+    case FCellTypes.CHIP:
+      return (h("kup-chip", Object.assign({}, cell.data, { type: FChipType.INPUT, enableInput: true, "onKup-chip-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) }),
+        h("kup-text-field", Object.assign({ fullWidth: true, slot: "field" }, cell.slotData))));
+    case FCellTypes.COLOR_PICKER:
+      return (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, FCellEvents.UPDATE) })));
+    case FCellTypes.COMBOBOX:
+      return (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, FCellEvents.UPDATE), "onkup-combobox-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-combobox-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK) })));
+    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) })));
+    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.DESCRIPTION_AND_CODE, selectMode: ItemsDisplayMode.DESCRIPTION_AND_CODE, "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))));
+    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.DESCRIPTION_AND_CODE, selectMode: ItemsDisplayMode.DESCRIPTION_AND_CODE, "onkup-combobox-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-combobox-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK) }, cell.slotData))));
+    case FCellTypes.RATING:
+      return (h("kup-rating", Object.assign({ key: column.name + props.row.id }, cell.data, { disabled: false, "onkup-rating-click": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) })));
+    case FCellTypes.SWITCH:
+      return (h(FSwitch, Object.assign({}, cell.data, { disabled: false, onChange: (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) })));
+    case FCellTypes.TIME:
+      return (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, FCellEvents.UPDATE), "onkup-timepicker-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT) })));
+    case FCellTypes.NUMBER:
+      classObj[FCellClasses.C_RIGHT_ALIGNED] = true;
+    case FCellTypes.LINK:
+    case FCellTypes.STRING:
+      return (h(FTextField, Object.assign({ inputType: cellType === FCellTypes.NUMBER ? 'number' : null, fullWidth: isFullWidth(props) ? true : false }, cell.data, { icon: cell.icon ? cell.icon : column.icon ? column.icon : null, value: cellType === FCellTypes.NUMBER
+          ? dom.ketchup.math
+            .numberifySafe(cell.value)
+            .toString()
+          : cell.value, onChange: (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), onInput: (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), onIconClick: (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK) })));
+  }
+}
+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 (isAutoCentered(props)) {
+        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 (isAutoCentered(props)) {
+        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 = dom.ketchup.math.numberifySafe(cell.value);
+        const cellValue = getCellValueForDisplay(column, cell);
+        if (cellValueNumber < 0) {
+          classObj[FCellClasses.TEXT_DANGER] = true;
+        }
+        if (isAutoCentered(props)) {
+          classObj[FCellClasses.C_RIGHT_ALIGNED] = true;
+        }
+        return h("div", { class: "f-cell__text" }, cellValue);
+      }
+      return h("div", { class: "f-cell__text" }, content);
+    case FCellTypes.SWITCH:
+      if (isAutoCentered(props)) {
+        classObj[FCellClasses.C_CENTERED] = true;
+      }
+      subcomponentProps['disabled'] = true;
+      return h(FSwitch, Object.assign({}, subcomponentProps));
+    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({ key: column.name + props.row.id }, subcomponentProps)));
+      }
+      else {
+        const barStyle = {
+          height: subcomponentProps.sizeY,
+          width: '100%',
+        };
+        return (h("div", { style: barStyle },
+          h(FImage, Object.assign({}, subcomponentProps))));
+      }
+    case FCellTypes.BUTTON:
+      if (isAutoCentered(props)) {
+        classObj[FCellClasses.C_CENTERED] = true;
+      }
+      return (h("kup-button", Object.assign({ key: column.name + props.row.id }, subcomponentProps, { "onkup-button-click": (e) => cellEvent(e, props, cellType, FCellEvents.CLICK) })));
+    case FCellTypes.BUTTON_LIST:
+      if (isAutoCentered(props)) {
+        classObj[FCellClasses.C_CENTERED] = true;
+      }
+      subcomponentProps['data-storage'] = {
+        cell: cell,
+        row: row,
+        column: column,
+      };
+      return (h("kup-button-list", Object.assign({ key: column.name + props.row.id }, subcomponentProps)));
+    case FCellTypes.CHART:
+      if (isAutoCentered(props)) {
+        classObj[FCellClasses.C_CENTERED] = true;
+      }
+      return (h("kup-chart", Object.assign({ key: column.name + props.row.id }, subcomponentProps)));
+    case FCellTypes.CHIP:
+      return h(FChip, Object.assign({}, subcomponentProps));
+    case FCellTypes.COLOR_PICKER:
+      return (h("kup-color-picker", Object.assign({ key: column.name + props.row.id }, subcomponentProps, { class: isFullWidth(props) ? 'kup-full-width' : '', disabled: true })));
+    case FCellTypes.GAUGE:
+      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 (h("kup-progress-bar", Object.assign({ key: column.name + props.row.id }, subcomponentProps)));
+    case FCellTypes.RADIO:
+      if (isAutoCentered(props)) {
+        classObj[FCellClasses.C_CENTERED] = true;
+      }
+      subcomponentProps['disabled'] = row.readOnly;
+      return (h("kup-radio", Object.assign({ key: column.name + props.row.id }, subcomponentProps)));
+    case FCellTypes.RATING:
+      return (h("kup-rating", Object.assign({ key: column.name + props.row.id }, 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 === FCellEvents.UPDATE) {
+    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:
+      case FCellTypes.SWITCH:
+        value = value === 'on' ? '0' : '1';
+        if (cell.data) {
+          cell.data.checked =
+            value === '0' ? false : true;
+        }
+        break;
+      case FCellTypes.CHIP:
+      case FCellTypes.MULTI_AUTOCOMPLETE:
+      case 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 = 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 === 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 === FCellTypes.NUMBER && isInputEvent) {
+    value = dom.ketchup.math.formattedStringToNumberString(value, '');
+  }
+  return value;
+}
+function isAutoCentered(props) {
+  var _a;
+  return autoCenterComps.includes((_a = props.component) === null || _a === void 0 ? void 0 : _a.rootElement.tagName);
+}
+function isFullWidth(props) {
+  var _a;
+  return fullWidthFieldsComps.includes((_a = props.component) === null || _a === void 0 ? void 0 : _a.rootElement.tagName);
 }
 
 export { FCell as F, ItemsDisplayMode as I, KupListRole as K, KupListProps as a, FSwitch as b };