@sme.up/ketchup 8.3.3 → 9.1.0

package/dist/collection/components/kup-progress-bar/kup-progress-bar.js

@@ -1,8 +1,9 @@
-import { forceUpdate, getAssetPath, h, Host, } from "@stencil/core";
+import { forceUpdate, h, Host, } from "@stencil/core";
 import { kupManagerInstance, } from "../../managers/kup-manager/kup-manager";
 import { getProps, setProps } from "../../utils/utils";
 import { componentWrapperId } from "../../variables/GenericVariables";
 import { KupProgressBarProps } from "./kup-progress-bar-declarations";
+import { FProgressBar } from "../../f-components/f-progress-bar/f-progress-bar";
 export class KupProgressBar {
   constructor() {
     /*-------------------------------------------------*/
@@ -45,27 +46,6 @@ export class KupProgressBar {
     setProps(this, KupProgressBarProps, props);
   }
   /*-------------------------------------------------*/
-  /*           P r i v a t e   M e t h o d s         */
-  /*-------------------------------------------------*/
-  createIconElement() {
-    if (!this.icon) {
-      return undefined;
-    }
-    if (this.icon.indexOf('.') > -1 ||
-      this.icon.indexOf('/') > -1 ||
-      this.icon.indexOf('\\') > -1) {
-      return (h("span", { class: "label kup-icon is-image" }, h("img", { src: this.icon })));
-    }
-    else {
-      let svg = `url('${getAssetPath(`./assets/svg/${this.icon}.svg`)}') no-repeat center`;
-      let iconStyle = {
-        mask: svg,
-        webkitMask: svg,
-      };
-      return h("span", { style: iconStyle, class: "label kup-icon" });
-    }
-  }
-  /*-------------------------------------------------*/
   /*          L i f e c y c l e   H o o k s          */
   /*-------------------------------------------------*/
   componentWillLoad() {
@@ -87,69 +67,42 @@ export class KupProgressBar {
     this.kupManager.debug.logRender(this, true);
   }
   render() {
-    let componentClass = '';
-    let pieClass = 'pie';
-    let radialStyle = undefined;
-    if (this.isRadial) {
-      componentClass = 'pie-wrapper';
-    }
-    else {
-      componentClass = 'progress-bar';
-    }
-    let labelStyle = undefined;
-    const valueStyle = {
-      width: `${this.value}%`,
+    const props = {
+      animated: this.rootElement.classList.contains('kup-animated')
+        ? true
+        : false,
+      danger: this.rootElement.classList.contains('kup-danger')
+        ? true
+        : false,
+      centeredLabel: this.centeredLabel,
+      hideLabel: this.hideLabel,
+      icon: this.icon,
+      info: this.rootElement.classList.contains('kup-info')
+        ? true
+        : false,
+      isRadial: this.isRadial,
+      label: this.label,
+      padded: this.rootElement.classList.contains('kup-padded')
+        ? true
+        : false,
+      secondary: this.rootElement.classList.contains('kup-secondary')
+        ? true
+        : false,
+      slim: this.rootElement.classList.contains('kup-slim')
+        ? true
+        : false,
+      striped: this.rootElement.classList.contains('kup-striped')
+        ? true
+        : false,
+      success: this.rootElement.classList.contains('kup-success')
+        ? true
+        : false,
+      value: this.value,
+      warning: this.rootElement.classList.contains('kup-warning')
+        ? true
+        : false,
     };
-    if (!this.centeredLabel) {
-      labelStyle = valueStyle;
-      if (this.value > 2) {
-        componentClass += ' text-color-on-primary';
-      }
-    }
-    else if (this.value > 49) {
-      componentClass += ' text-color-on-primary';
-    }
-    let label = null;
-    if (this.icon) {
-      label = this.createIconElement();
-    }
-    else {
-      if (!this.hideLabel) {
-        if (this.isRadial) {
-          if (this.label) {
-            label = h("span", { class: "label" }, this.label);
-          }
-          else {
-            label = (h("span", { class: "label" }, this.value, h("span", { class: "smaller" }, "%")));
-          }
-        }
-        else {
-          if (this.label) {
-            label = this.label;
-          }
-          else {
-            label = this.value + '%';
-          }
-        }
-      }
-    }
-    if (this.value > 0) {
-      pieClass += ' has-value';
-      if (this.value > 50) {
-        pieClass += ' is-more-than-half';
-      }
-      else {
-        pieClass += ' is-less-than-half';
-      }
-    }
-    let el;
-    if (this.isRadial) {
-      el = (h("div", { class: componentClass }, label, h("div", { class: pieClass }, h("div", { style: radialStyle, class: "left-side half-circle" }), h("div", { class: "right-side half-circle" })), h("div", { class: "shadow" })));
-    }
-    else {
-      el = (h("div", { class: componentClass }, h("div", { class: "progress-bar-percentage", style: valueStyle }, h("span", { style: labelStyle }, label))));
-    }
-    return (h(Host, null, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, el)));
+    return (h(Host, null, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, h(FProgressBar, Object.assign({}, props)))));
   }
   disconnectedCallback() {
     this.kupManager.theme.unregister(this);

package/dist/collection/components/kup-radio/kup-radio.css

@@ -8,166 +8,5 @@
 * @prop --kup-radio-text-color: Sets text color of the radio's label.
 */
 :host {
-  --kup_radio_font_family: var(--kup-radio-font-family, var(--kup-font-family));
-  --kup_radio_font_size: var(--kup-radio-font-size, var(--kup-font-size));
-  --kup_radio_font_weight: var(--kup-radio-font-weight, 400);
-  --kup_radio_outer_circle_color: var(
-    --kup-radio-outer-circle-color,
-    rgba(var(--kup-text-color-rgb), 0.5)
-  );
-  --kup_radio_primary_color: var(
-    --kup-radio-primary-color,
-    var(--kup-primary-color)
-  );
-  --kup_radio_primary_color_rgb: var(
-    --kup-radio-primary-color-rgb,
-    var(--kup-primary-color-rgb)
-  );
-  --kup_radio_text_color: var(--kup-radio-text-color, var(--kup-text-color));
   display: block;
-  font-family: var(--kup_radio_font_family);
-  font-size: var(--kup_radio_font_size);
-}
-
-.form-field {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-size: 0.875em;
-  line-height: 2em;
-  font-weight: var(--kup_radio_font_weight);
-  letter-spacing: 0.0178571429em;
-  display: inline-flex;
-  align-items: center;
-  vertical-align: middle;
-}
-.form-field label {
-  color: var(--kup_radio_text_color);
-  margin-left: 0px;
-  margin-right: auto;
-  padding-left: 4px;
-  padding-right: 0px;
-  order: 0;
-}
-.form-field.form-field--align-end label {
-  margin-left: auto;
-  margin-right: 0px;
-  padding-left: 0px;
-  padding-right: 4px;
-  order: -1 !important;
-}
-
-.radio-wrapper.radio-wrapper--grid {
-  display: grid;
-  grid-gap: 1em;
-  grid-template-columns: var(--kup_radio_columns);
-}
-.radio-wrapper .radio {
-  border-radius: 50%;
-  padding: 10px;
-  position: relative;
-  flex: 0 0 auto;
-  box-sizing: content-box;
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
-  will-change: opacity, transform, border-color, color;
-  will-change: transform, opacity;
-}
-.radio-wrapper .radio:hover {
-  background-color: rgba(var(--kup_radio_primary_color_rgb), 0.125);
-}
-.radio-wrapper .radio .radio__native-control {
-  position: absolute;
-  margin: 0px;
-  padding: 0px;
-  opacity: 0;
-  cursor: inherit;
-  z-index: 1;
-  top: 0px;
-  right: 0px;
-  left: 0px;
-  width: 40px;
-  height: 40px;
-}
-.radio-wrapper .radio .radio__background {
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  width: 20px;
-  height: 20px;
-  transition: opacity 120ms cubic-bezier(0, 0, 0.2, 1) 0ms, transform 120ms cubic-bezier(0, 0, 0.2, 1) 0ms;
-}
-.radio-wrapper .radio .radio__background .radio__outer-circle {
-  border-color: var(--kup_radio_outer_circle_color);
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  border-width: 2px;
-  border-style: solid;
-  border-radius: 50%;
-  transition: border-color 120ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
-}
-.radio-wrapper .radio .radio__background .radio__inner-circle {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  transform: scale(0, 0);
-  border-width: 10px;
-  border-style: solid;
-  border-radius: 50%;
-  transition: transform 120ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, border-color 120ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
-}
-.radio-wrapper .radio.radio--checked .radio__outer-circle {
-  border-color: var(--kup_radio_primary_color);
-}
-.radio-wrapper .radio.radio--checked .radio__inner-circle {
-  border-color: var(--kup_radio_primary_color);
-  transform: scale(0.5);
-  transition: transform 120ms cubic-bezier(0, 0, 0.2, 1) 0ms, border-color 120ms cubic-bezier(0, 0, 0.2, 1) 0ms;
-}
-.radio-wrapper .radio.radio--disabled {
-  pointer-events: none;
-}
-.radio-wrapper .radio.radio--disabled + label {
-  pointer-events: none;
-}
-.radio-wrapper .radio.radio--disabled .radio__outer-circle {
-  border-color: var(--kup_radio_outer_circle_color);
-}
-.radio-wrapper .radio.radio--disabled .radio__inner-circle {
-  border-color: var(--kup_radio_outer_circle_color);
-}
-
-/*-------------------------------------------------*/
-/*        C o m p o n e n t   C l a s s e s        */
-/*-------------------------------------------------*/
-:host(.kup-danger) {
-  --kup-radio-primary-color: var(--kup-danger-color);
-  --kup-radio-primary-color-rgb: var(--kup-danger-color-rgb);
-}
-
-:host(.kup-info) {
-  --kup-radio-primary-color: var(--kup-info-color);
-  --kup-radio-primary-color-rgb: var(--kup-info-color-rgb);
-}
-
-:host(.kup-secondary) {
-  --kup-radio-primary-color: var(--kup-secondary-color);
-  --kup-radio-primary-color-rgb: var(--kup-secondary-color-rgb);
-}
-
-:host(.kup-success) {
-  --kup-radio-primary-color: var(--kup-success-color);
-  --kup-radio-primary-color-rgb: var(--kup-success-color-rgb);
-}
-
-:host(.kup-warning) {
-  --kup-radio-primary-color: var(--kup-warning-color);
-  --kup-radio-primary-color-rgb: var(--kup-warning-color-rgb);
 }

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

@@ -3,6 +3,7 @@ import { kupManagerInstance, } from "../../managers/kup-manager/kup-manager";
 import { KupRadioProps, } from "./kup-radio-declarations";
 import { getProps, setProps } from "../../utils/utils";
 import { componentWrapperId } from "../../variables/GenericVariables";
+import { FRadio } from "../../f-components/f-radio/f-radio";
 export class KupRadio {
   constructor() {
     /*-------------------------------------------------*/
@@ -41,6 +42,7 @@ export class KupRadio {
       id: this.rootElement.id,
       value: this.value,
     });
+    this.refresh();
   }
   onKupFocus() {
     this.kupFocus.emit({
@@ -92,28 +94,31 @@ export class KupRadio {
     if (!this.data || this.data.length === 0) {
       return;
     }
-    const hasColumns = !!this.columns;
-    const radioList = [];
-    for (let i = 0; i < this.data.length; i++) {
-      const data = this.data[i];
-      const classObj = {
-        radio: true,
-        'radio--checked': data.checked ? true : false,
-        'radio--disabled': this.disabled ? true : false,
-      };
-      const radioEl = (h("div", { class: `form-field ${this.leadingLabel ? ' form-field--align-end' : ''}` }, h("div", { class: classObj }, h("input", { class: "radio__native-control", type: "radio", name: "radio-element", value: data.value, checked: data.checked, disabled: this.disabled, onBlur: () => this.onKupBlur(), onChange: () => this.onKupChange(i), onFocus: () => this.onKupFocus() }), h("div", { class: "radio__background" }, h("div", { class: "radio__outer-circle" }), h("div", { class: "radio__inner-circle" }))), h("label", { htmlFor: 'radio-element', onClick: () => this.onKupChange(i) }, data.label ? data.label : '')));
-      radioList.push(radioEl);
-    }
-    const hostStyle = {
-      '--kup_radio_columns': hasColumns
-        ? `repeat(${this.columns}, 1fr)`
-        : '',
-    };
-    const classObj = {
-      'radio-wrapper': true,
-      'radio-wrapper--grid': hasColumns ? true : false,
+    const props = {
+      columns: this.columns,
+      danger: this.rootElement.classList.contains('kup-danger')
+        ? true
+        : false,
+      data: this.data,
+      disabled: this.disabled,
+      info: this.rootElement.classList.contains('kup-info')
+        ? true
+        : false,
+      leadingLabel: this.leadingLabel,
+      secondary: this.rootElement.classList.contains('kup-secondary')
+        ? true
+        : false,
+      success: this.rootElement.classList.contains('kup-success')
+        ? true
+        : false,
+      warning: this.rootElement.classList.contains('kup-warning')
+        ? true
+        : false,
+      onBlur: () => this.onKupBlur(),
+      onChange: (i) => this.onKupChange(i),
+      onFocus: () => this.onKupFocus(),
     };
-    return (h(Host, { style: hostStyle }, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, h("div", { class: classObj }, radioList))));
+    return (h(Host, null, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, h(FRadio, Object.assign({}, props)))));
   }
   disconnectedCallback() {
     this.kupManager.theme.unregister(this);
@@ -181,13 +186,13 @@ export class KupRadio {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "KupRadioData[]",
-          "resolved": "KupRadioData[]",
+          "original": "FRadioData[]",
+          "resolved": "FRadioData[]",
           "references": {
-            "KupRadioData": {
+            "FRadioData": {
               "location": "import",
-              "path": "./kup-radio-declarations",
-              "id": "src/components/kup-radio/kup-radio-declarations.ts::KupRadioData"
+              "path": "../../f-components/f-radio/f-radio-declarations",
+              "id": "src/f-components/f-radio/f-radio-declarations.ts::FRadioData"
             }
           }
         },

package/dist/collection/components/kup-rating/kup-rating.css

@@ -3,13 +3,5 @@
 * @prop --kup-rating-font-size: Sets font size of the component.
 */
 :host {
-  --kup_rating_color: var(--kup-rating-color, orange);
-  --kup_rating_font_size: var(--kup-rating-font-size, 30px);
   display: block;
-}
-
-.rating {
-  color: var(--kup_rating_color);
-  cursor: pointer;
-  font-size: var(--kup_rating_font_size);
 }

package/dist/collection/components/kup-rating/kup-rating.js

@@ -3,6 +3,7 @@ import { kupManagerInstance, } from "../../managers/kup-manager/kup-manager";
 import { getProps, setProps } from "../../utils/utils";
 import { componentWrapperId } from "../../variables/GenericVariables";
 import { KupRatingProps, } from "./kup-rating-declarations";
+import { FRating } from "../../f-components/f-rating/f-rating";
 export class KupRating {
   constructor() {
     /*-------------------------------------------------*/
@@ -12,30 +13,23 @@ export class KupRating {
      * Instance of the KupManager class.
      */
     this.kupManager = kupManagerInstance();
-    this.stars = [];
     this.customStyle = '';
     this.disabled = false;
     this.maxValue = 5;
     this.value = 0;
   }
-  onStarClick(newValue) {
+  onKupClick(newValue) {
     if (!this.disabled) {
       this.value = newValue;
-      this.buildStars(this.value);
-      this.kupRatingClick.emit({
+      this.kupClick.emit({
         comp: this,
         id: this.rootElement.id,
         value: this.value,
       });
+      this.refresh();
     }
   }
   /*-------------------------------------------------*/
-  /*                  W a t c h e r s                */
-  /*-------------------------------------------------*/
-  onValueChanged() {
-    this.buildStars(this.value);
-  }
-  /*-------------------------------------------------*/
   /*           P u b l i c   M e t h o d s           */
   /*-------------------------------------------------*/
   /**
@@ -60,37 +54,11 @@ export class KupRating {
     setProps(this, KupRatingProps, props);
   }
   /*-------------------------------------------------*/
-  /*           P r i v a t e   M e t h o d s         */
-  /*-------------------------------------------------*/
-  onMouseOver(newValue) {
-    if (!this.disabled) {
-      this.buildStars(newValue);
-    }
-  }
-  onMouseOut() {
-    if (!this.disabled) {
-      this.buildStars(this.value);
-    }
-  }
-  buildStars(numberOfStars) {
-    let stars = [];
-    for (let i = 1; i <= this.maxValue; i++) {
-      if (i <= numberOfStars) {
-        stars.push(h("span", { class: "rating", onMouseOver: () => this.onMouseOver(i), onMouseOut: () => this.onMouseOut(), onClick: () => this.onStarClick(i) }, "\u2605"));
-      }
-      else {
-        stars.push(h("span", { class: "rating", onMouseOver: () => this.onMouseOver(i), onMouseOut: () => this.onMouseOut(), onClick: () => this.onStarClick(i) }, "\u2606"));
-      }
-    }
-    this.stars = stars;
-  }
-  /*-------------------------------------------------*/
   /*          L i f e c y c l e   H o o k s          */
   /*-------------------------------------------------*/
   componentWillLoad() {
     this.kupManager.debug.logLoad(this, false);
     this.kupManager.theme.register(this);
-    this.onValueChanged();
   }
   componentDidLoad() {
     this.kupManager.debug.logLoad(this, true);
@@ -102,7 +70,28 @@ export class KupRating {
     this.kupManager.debug.logRender(this, true);
   }
   render() {
-    return (h(Host, null, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, h("div", null, this.stars))));
+    const props = {
+      danger: this.rootElement.classList.contains('kup-danger')
+        ? true
+        : false,
+      disabled: this.disabled,
+      info: this.rootElement.classList.contains('kup-info')
+        ? true
+        : false,
+      maxValue: this.maxValue,
+      secondary: this.rootElement.classList.contains('kup-secondary')
+        ? true
+        : false,
+      success: this.rootElement.classList.contains('kup-success')
+        ? true
+        : false,
+      value: this.value,
+      warning: this.rootElement.classList.contains('kup-warning')
+        ? true
+        : false,
+      onClick: (i) => this.onKupClick(i),
+    };
+    return (h(Host, null, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, h(FRating, Object.assign({}, props)))));
   }
   disconnectedCallback() {
     this.kupManager.theme.unregister(this);
@@ -210,14 +199,9 @@ export class KupRating {
       }
     };
   }
-  static get states() {
-    return {
-      "stars": {}
-    };
-  }
   static get events() {
     return [{
-        "method": "kupRatingClick",
+        "method": "kupClick",
         "name": "kup-rating-click",
         "bubbles": true,
         "cancelable": false,
@@ -326,13 +310,4 @@ export class KupRating {
     };
   }
   static get elementRef() { return "rootElement"; }
-  static get watchers() {
-    return [{
-        "propName": "value",
-        "methodName": "onValueChanged"
-      }, {
-        "propName": "maxValue",
-        "methodName": "onValueChanged"
-      }];
-  }
 }

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

@@ -86,6 +86,8 @@ export var FCellShapes;
   FCellShapes["EDITOR"] = "EDT";
   FCellShapes["GAUGE"] = "GAU";
   FCellShapes["IMAGE"] = "IMG";
+  FCellShapes["INPUT_CHECKBOX"] = "INC";
+  FCellShapes["INPUT_FIELD"] = "INF";
   FCellShapes["KNOB"] = "KNB";
   FCellShapes["MULTI_AUTOCOMPLETE"] = "AML";
   FCellShapes["MULTI_COMBOBOX"] = "CML";

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

@@ -1,5 +1,5 @@
 import { KupTagNames, } from "../../types/GenericTypes";
-import { autoCenterComps, editableTypes, FCellClasses, FCellEvents, FCellTypes, fullWidthFieldsComps, kupTypes, } from "./f-cell-declarations";
+import { autoCenterComps, editableTypes, FCellClasses, FCellEvents, FCellShapes, FCellTypes, fullWidthFieldsComps, kupTypes, } from "./f-cell-declarations";
 import { h } from "@stencil/core";
 import { getCellValueForDisplay } from "../../utils/cell-utils";
 import { FCheckbox } from "../f-checkbox/f-checkbox";
@@ -10,6 +10,10 @@ import { KupThemeColorValues } from "../../managers/kup-theme/kup-theme-declarat
 import { FSwitch } from "../f-switch/f-switch";
 import { FChipType } from "../f-chip/f-chip-declarations";
 import { ItemsDisplayMode } from "../../components/kup-list/kup-list-declarations";
+import { FButton } from "../f-button/f-button";
+import { FProgressBar } from "../f-progress-bar/f-progress-bar";
+import { FRadio } from "../f-radio/f-radio";
+import { FRating } from "../f-rating/f-rating";
 const dom = document.documentElement;
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */
@@ -207,7 +211,14 @@ function setEditableCell(cellType, classObj, cell, column, props) {
       if (isAutoCentered(props)) {
         classObj[FCellClasses.C_CENTERED] = true;
       }
-      return (h(FCheckbox, Object.assign({}, cell.data, { onChange: (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) })));
+      if (cell.shape === FCellShapes.INPUT_CHECKBOX) {
+        return (h("input", { checked: cell.value === 'on' || cell.value === '1'
+            ? true
+            : false, class: "input-checkbox", onChange: (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), type: "checkbox" }));
+      }
+      else {
+        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:
@@ -230,17 +241,24 @@ function setEditableCell(cellType, classObj, cell, column, props) {
       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.data && cell.data.icon
-          ? cell.data.icon
-          : cell.icon
-            ? cell.icon
-            : column.icon
-              ? column.icon
-              : null, value: cellType === FCellTypes.NUMBER && cell.value
-          ? 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) })));
+      const onChange = (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE);
+      const onInput = (e) => cellEvent(e, props, cellType, FCellEvents.INPUT);
+      const type = cellType === FCellTypes.NUMBER ? 'number' : null;
+      const value = cellType === FCellTypes.NUMBER && cell.value
+        ? dom.ketchup.math.numberifySafe(cell.value).toString()
+        : cell.value;
+      if (cell.shape === FCellShapes.INPUT_FIELD) {
+        return (h("input", { class: 'input-field', onChange: onChange, onInput: onInput, type: type, value: value }));
+      }
+      else {
+        return (h(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, FCellEvents.ICON_CLICK) })));
+      }
   }
 }
 function setCell(cellType, subcomponentProps, content, classObj, cell, column, props) {
@@ -315,7 +333,7 @@ function setKupCell(cellType, classObj, subcomponentProps, cell, row, column, pr
       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) })));
+      return (h(FButton, Object.assign({}, subcomponentProps, { onClick: (e) => cellEvent(e, props, cellType, FCellEvents.CLICK) })));
     case FCellTypes.BUTTON_LIST:
       if (isAutoCentered(props)) {
         classObj[FCellClasses.C_CENTERED] = true;
@@ -341,15 +359,15 @@ function setKupCell(cellType, classObj, subcomponentProps, cell, row, column, pr
       return (h("kup-gauge", Object.assign({ key: column.name + props.row.id, value: dom.ketchup.math.numberifySafe(cell.value), "width-component": "280px" }, subcomponentProps)));
     case FCellTypes.KNOB:
     case FCellTypes.PROGRESS_BAR:
-      return (h("kup-progress-bar", Object.assign({ key: column.name + props.row.id }, subcomponentProps)));
+      return subcomponentProps.customStyle ? (h("kup-progress-bar", Object.assign({ key: column.name + props.row.id }, subcomponentProps))) : (h(FProgressBar, Object.assign({}, 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)));
+      return h(FRadio, Object.assign({}, subcomponentProps));
     case FCellTypes.RATING:
-      return (h("kup-rating", Object.assign({ key: column.name + props.row.id }, subcomponentProps, { disabled: true })));
+      return h(FRating, Object.assign({}, subcomponentProps, { disabled: true }));
   }
 }
 function cellEvent(e, props, cellType, cellEventName) {
@@ -422,6 +440,9 @@ function getValueFromEventTaget(e, cellType) {
   let value = isInputEvent
     ? e.target.value
     : e.detail.value;
+  if (cellType === FCellTypes.CHECKBOX && isInputEvent) {
+    value = e.target.checked ? 'off' : 'on';
+  }
   if (cellType === FCellTypes.NUMBER && isInputEvent) {
     value = dom.ketchup.math.formattedStringToNumberString(value, '');
   }

package/dist/collection/f-components/f-progress-bar/f-progress-bar-declarations.js

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