@sme.up/ketchup 9.0.0 → 9.2.0

package/dist/cjs/{f-button-b2cfce1c.js → f-button-9ccadd52.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-const index = require('./index-c3d10561.js');
+const index = require('./index-d8e5eb5f.js');
 const fButtonDeclarations = require('./f-button-declarations-3fd791a8.js');
-const fImage = require('./f-image-270d39ae.js');
+const fImage = require('./f-image-66a3c3c1.js');
 
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */

package/dist/cjs/{f-cell-75fca92b.js → f-cell-3130506f.js}

@@ -1,11 +1,12 @@
 'use strict';
 
-const kupManager = require('./kup-manager-130bbd9d.js');
-const index = require('./index-c3d10561.js');
-const fCheckbox = require('./f-checkbox-48d7af02.js');
-const fTextField = require('./f-text-field-bbcd2143.js');
-const fImage = require('./f-image-270d39ae.js');
-const fChip = require('./f-chip-3e504f3e.js');
+const kupManager = require('./kup-manager-7334c396.js');
+const index = require('./index-d8e5eb5f.js');
+const fCheckbox = require('./f-checkbox-9d2635d9.js');
+const fTextField = require('./f-text-field-c74856ff.js');
+const fImage = require('./f-image-66a3c3c1.js');
+const fChip = require('./f-chip-beb7af58.js');
+const fButton = require('./f-button-9ccadd52.js');
 
 /**
  * Props of the kup-list component.
@@ -56,6 +57,164 @@ const FSwitch = (props) => {
       index.h("label", { onClick: props.onChange }, props.label))));
 };
 
+/*-------------------------------------------------*/
+/*                C o m p o n e n t                */
+/*-------------------------------------------------*/
+const FProgressBar = (props) => {
+  if (!props.centeredLabel && !props.centeredLabel !== false) {
+    props.centeredLabel = true;
+  }
+  let componentClass = `f-progress-bar ${props.danger ? 'kup-danger' : ''} ${props.animated ? 'kup-animated' : ''} ${props.padded ? 'kup-padded' : ''} ${props.info ? 'kup-info' : ''} ${props.slim ? 'kup-slim' : ''} ${props.striped ? 'kup-striped' : ''}   ${props.secondary ? 'kup-secondary' : ''} ${props.slim ? 'kup-slim' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}`;
+  let pieClass = 'pie';
+  let radialStyle = undefined;
+  if (props.isRadial) {
+    componentClass += ' pie-wrapper is-radial';
+  }
+  else {
+    componentClass += ' progress-bar';
+  }
+  let labelStyle = undefined;
+  const valueStyle = {
+    width: `${props.value}%`,
+  };
+  if (!props.centeredLabel) {
+    labelStyle = valueStyle;
+    if (props.value > 2) {
+      componentClass += ' text-color-on-primary';
+    }
+  }
+  else if (props.value > 49) {
+    componentClass += ' text-color-on-primary';
+  }
+  let label = null;
+  if (props.icon) {
+    label = createIconElement(props);
+  }
+  else {
+    if (!props.hideLabel) {
+      if (props.isRadial) {
+        if (props.label) {
+          label = index.h("span", { class: "label" }, props.label);
+        }
+        else {
+          label = (index.h("span", { class: "label" },
+            props.value,
+            index.h("span", { class: "smaller" }, "%")));
+        }
+      }
+      else {
+        if (props.label) {
+          label = props.label;
+        }
+        else {
+          label = props.value + '%';
+        }
+      }
+    }
+  }
+  if (props.value > 0) {
+    pieClass += ' has-value';
+    if (props.value > 50) {
+      pieClass += ' is-more-than-half';
+    }
+    else {
+      pieClass += ' is-less-than-half';
+    }
+  }
+  if (props.isRadial) {
+    return (index.h("div", { class: componentClass },
+      label,
+      index.h("div", { class: pieClass },
+        index.h("div", { style: radialStyle, class: "left-side half-circle" }),
+        index.h("div", { class: "right-side half-circle" })),
+      index.h("div", { class: "shadow" })));
+  }
+  else {
+    return (index.h("div", { class: componentClass },
+      index.h("div", { class: "progress-bar-percentage", style: valueStyle },
+        index.h("span", { style: labelStyle }, label))));
+  }
+};
+function createIconElement(props) {
+  if (!props.icon) {
+    return undefined;
+  }
+  if (props.icon.indexOf('.') > -1 ||
+    props.icon.indexOf('/') > -1 ||
+    props.icon.indexOf('\\') > -1) {
+    return (index.h("span", { class: "label kup-icon is-image" },
+      index.h("img", { src: props.icon })));
+  }
+  else {
+    let svg = `url('${index.getAssetPath(`./assets/svg/${props.icon}.svg`)}') no-repeat center`;
+    let iconStyle = {
+      mask: svg,
+      webkitMask: svg,
+    };
+    return index.h("span", { style: iconStyle, class: "label kup-icon" });
+  }
+}
+
+/*-------------------------------------------------*/
+/*                C o m p o n e n t                */
+/*-------------------------------------------------*/
+const FRadio = (props) => {
+  var _a;
+  const hasColumns = !!props.columns;
+  const radioList = [];
+  for (let i = 0; i < ((_a = props.data) === null || _a === void 0 ? void 0 : _a.length); i++) {
+    const data = props.data[i];
+    const classObj = {
+      radio: true,
+      'radio--checked': data.checked ? true : false,
+      'radio--disabled': props.disabled ? true : false,
+    };
+    radioList.push(index.h("div", { class: `form-field ${props.leadingLabel ? ' form-field--align-end' : ''}` },
+      index.h("div", { class: classObj },
+        index.h("input", { class: "radio__native-control", type: "radio", name: "radio-element", value: data.value, checked: data.checked, disabled: props.disabled, onBlur: props.onBlur, onChange: props.onChange
+            ? props.onChange.bind(props.onChange, i)
+            : null, onFocus: props.onFocus }),
+        index.h("div", { class: "radio__background" },
+          index.h("div", { class: "radio__outer-circle" }),
+          index.h("div", { class: "radio__inner-circle" }))),
+      index.h("label", { htmlFor: 'radio-element', onClick: props.onChange
+          ? props.onChange.bind(props.onChange, i)
+          : null }, data.label ? data.label : '')));
+  }
+  const styleObj = {
+    '--kup_radio_columns': hasColumns
+      ? `repeat(${props.columns}, 1fr)`
+      : '',
+  };
+  return (index.h("div", { class: `f-radio radio-wrapper ${hasColumns ? 'radio-wrapper-grid' : ''} ${props.danger ? 'kup-danger' : ''} ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}`, style: styleObj }, radioList));
+};
+
+/*-------------------------------------------------*/
+/*                C o m p o n e n t                */
+/*-------------------------------------------------*/
+const FRating = (props) => {
+  if (!props.maxValue) {
+    props.maxValue = 5;
+  }
+  return (index.h("div", { class: `f-rating ${props.disabled ? 'disabled' : ''} ${props.danger ? 'kup-danger' : ''} ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, buildStars(props)));
+};
+function buildStars(props) {
+  const stars = [];
+  for (let i = 1; i <= props.maxValue; i++) {
+    if (i <= props.value) {
+      stars.push(index.h("span", { class: "rating", onClick: props.onClick
+          ? props.onClick.bind(props.onClick, i)
+          : null }, "\u2605"));
+    }
+    else {
+      stars.push(index.h("span", { class: "rating", onClick: props.onClick
+          ? props.onClick.bind(props.onClick, i)
+          : null }, "\u2606"));
+    }
+  }
+  return stars;
+}
+
 const dom = document.documentElement;
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */
@@ -254,7 +413,14 @@ function setEditableCell(cellType, classObj, cell, column, props) {
       if (isAutoCentered(props)) {
         classObj[kupManager.FCellClasses.C_CENTERED] = true;
       }
-      return (index.h(fCheckbox.FCheckbox, Object.assign({}, cell.data, { onChange: (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.UPDATE) })));
+      if (cell.shape === kupManager.FCellShapes.INPUT_CHECKBOX) {
+        return (index.h("input", { checked: cell.value === 'on' || cell.value === '1'
+            ? true
+            : false, class: "input-checkbox", onChange: (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.UPDATE), type: "checkbox" }));
+      }
+      else {
+        return (index.h(fCheckbox.FCheckbox, Object.assign({}, cell.data, { onChange: (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.UPDATE) })));
+      }
     case kupManager.FCellTypes.CHIP:
       return (index.h("kup-chip", Object.assign({}, cell.data, { type: fChip.FChipType.INPUT, enableInput: true, "onKup-chip-change": (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.UPDATE) }),
         index.h("kup-text-field", Object.assign({ fullWidth: true, slot: "field" }, cell.slotData))));
@@ -373,7 +539,7 @@ function setKupCell(cellType, classObj, subcomponentProps, cell, row, column, pr
       if (isAutoCentered(props)) {
         classObj[kupManager.FCellClasses.C_CENTERED] = true;
       }
-      return (index.h("kup-button", Object.assign({ key: column.name + props.row.id }, subcomponentProps, { "onkup-button-click": (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.CLICK) })));
+      return (index.h(fButton.FButton, Object.assign({}, subcomponentProps, { onClick: (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.CLICK) })));
     case kupManager.FCellTypes.BUTTON_LIST:
       if (isAutoCentered(props)) {
         classObj[kupManager.FCellClasses.C_CENTERED] = true;
@@ -399,15 +565,15 @@ function setKupCell(cellType, classObj, subcomponentProps, cell, row, column, pr
       return (index.h("kup-gauge", Object.assign({ key: column.name + props.row.id, value: dom.ketchup.math.numberifySafe(cell.value), "width-component": "280px" }, subcomponentProps)));
     case kupManager.FCellTypes.KNOB:
     case kupManager.FCellTypes.PROGRESS_BAR:
-      return (index.h("kup-progress-bar", Object.assign({ key: column.name + props.row.id }, subcomponentProps)));
+      return subcomponentProps.customStyle ? (index.h("kup-progress-bar", Object.assign({ key: column.name + props.row.id }, subcomponentProps))) : (index.h(FProgressBar, Object.assign({}, subcomponentProps)));
     case kupManager.FCellTypes.RADIO:
       if (isAutoCentered(props)) {
         classObj[kupManager.FCellClasses.C_CENTERED] = true;
       }
       subcomponentProps['disabled'] = row.readOnly;
-      return (index.h("kup-radio", Object.assign({ key: column.name + props.row.id }, subcomponentProps)));
+      return index.h(FRadio, Object.assign({}, subcomponentProps));
     case kupManager.FCellTypes.RATING:
-      return (index.h("kup-rating", Object.assign({ key: column.name + props.row.id }, subcomponentProps, { disabled: true })));
+      return index.h(FRating, Object.assign({}, subcomponentProps, { disabled: true }));
   }
 }
 function cellEvent(e, props, cellType, cellEventName) {
@@ -480,6 +646,9 @@ function getValueFromEventTaget(e, cellType) {
   let value = isInputEvent
     ? e.target.value
     : e.detail.value;
+  if (cellType === kupManager.FCellTypes.CHECKBOX && isInputEvent) {
+    value = e.target.checked ? 'off' : 'on';
+  }
   if (cellType === kupManager.FCellTypes.NUMBER && isInputEvent) {
     value = dom.ketchup.math.formattedStringToNumberString(value, '');
   }
@@ -495,4 +664,7 @@ function isFullWidth(props) {
 }
 
 exports.FCell = FCell;
+exports.FProgressBar = FProgressBar;
+exports.FRadio = FRadio;
+exports.FRating = FRating;
 exports.FSwitch = FSwitch;

package/dist/cjs/{f-checkbox-48d7af02.js → f-checkbox-9d2635d9.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-c3d10561.js');
+const index = require('./index-d8e5eb5f.js');
 
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */

package/dist/cjs/{f-chip-3e504f3e.js → f-chip-beb7af58.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-const index = require('./index-c3d10561.js');
-const fImage = require('./f-image-270d39ae.js');
-const kupManager = require('./kup-manager-130bbd9d.js');
+const index = require('./index-d8e5eb5f.js');
+const fImage = require('./f-image-66a3c3c1.js');
+const kupManager = require('./kup-manager-7334c396.js');
 
 /**
  * Types of the f-chip component.

package/dist/cjs/{f-image-270d39ae.js → f-image-66a3c3c1.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const index = require('./index-c3d10561.js');
-const kupManager = require('./kup-manager-130bbd9d.js');
+const index = require('./index-d8e5eb5f.js');
+const kupManager = require('./kup-manager-7334c396.js');
 
 /**
  * The type of a CSS step in CSS-drawing mode.

package/dist/cjs/{f-paginator-utils-6d0c4678.js → f-paginator-utils-c475e07f.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-const kupManager = require('./kup-manager-130bbd9d.js');
-const index = require('./index-c3d10561.js');
-const fButton = require('./f-button-b2cfce1c.js');
+const kupManager = require('./kup-manager-7334c396.js');
+const index = require('./index-d8e5eb5f.js');
+const fButton = require('./f-button-9ccadd52.js');
 const fButtonDeclarations = require('./f-button-declarations-3fd791a8.js');
 
 /**
@@ -871,19 +871,19 @@ function updateGroupTotal(groupRow, totals, addedRow, distinctObj) {
     return;
   }
   keys.forEach((key) => {
-    const currentTotalValue = dom$2.ketchup.math.numberify(groupRow.group.totals[key] || 0);
     const cell = addedRow.cells[key];
     if (cell) {
-      let _isNumber = dom$2.ketchup.objects.isNumber(cell.obj);
+      const _isNumber = dom$2.ketchup.objects.isNumber(cell.obj);
       const totalMode = totals[key];
       switch (totalMode) {
         case kupManager.TotalMode.COUNT:
-          groupRow.group.totals[key] = currentTotalValue + 1;
+          let currentTotalValue = groupRow.group.totals[key] || 0;
+          groupRow.group.totals[key] = ++currentTotalValue;
           // updating parents
           let parent = groupRow.group.parent;
           while (parent != null) {
-            const currentParentCount = parent.group.totals[key] || 0;
-            parent.group.totals[key] = currentParentCount + 1;
+            let currentParentCount = parent.group.totals[key] || 0;
+            parent.group.totals[key] = ++currentParentCount;
             parent = parent.group.parent;
           }
           break;
@@ -941,8 +941,9 @@ function updateGroupTotal(groupRow, totals, addedRow, distinctObj) {
           break;
         case kupManager.TotalMode.SUM:
         case kupManager.TotalMode.AVERAGE:
-          if (_isNumber) {
+          if (_isNumber && cell.value) {
             const cellValue = dom$2.ketchup.math.numberify(dom$2.ketchup.math.numberifySafe(cell.value));
+            const currentTotalValue = groupRow.group.totals[key] || 0;
             groupRow.group.totals[key] =
               cellValue + currentTotalValue;
             // updating parents
@@ -957,11 +958,11 @@ function updateGroupTotal(groupRow, totals, addedRow, distinctObj) {
           break;
         // TODO DRY the MIN and MAX functions
         case kupManager.TotalMode.MIN:
-          if (_isNumber) {
-            const currentTotalValue = groupRow.group.totals[key];
+          if (_isNumber && cell.value) {
+            const currentMinValue = groupRow.group.totals[key];
             const cellValue = dom$2.ketchup.math.numberify(dom$2.ketchup.math.numberifySafe(cell.value));
-            if (currentTotalValue) {
-              groupRow.group.totals[key] = Math.min(currentTotalValue, cellValue);
+            if (currentMinValue) {
+              groupRow.group.totals[key] = Math.min(currentMinValue, cellValue);
             }
             else {
               // first round
@@ -981,22 +982,21 @@ function updateGroupTotal(groupRow, totals, addedRow, distinctObj) {
               parent = parent.group.parent;
             }
           }
-          else if (dom$2.ketchup.objects.isDate(cell.obj)) {
-            const momentValue = cell.obj
-              ? dom$2.ketchup.objects.parseDate(cell.obj)
-              : dom$2.ketchup.dates.toDayjs(cell.value);
-            if (dom$2.ketchup.dates.isValid(momentValue)) {
-              const cellValue = dom$2.ketchup.dates.toDate(momentValue);
-              const currentTotalValue = groupRow.group.totals[key];
-              if (currentTotalValue) {
+          else if (cell.value &&
+            dom$2.ketchup.objects.isDate(cell.obj)) {
+            const cellValue = dom$2.ketchup.dates.toDayjs(cell.value);
+            if (dom$2.ketchup.dates.isValid(cellValue)) {
+              const currentMinValue = groupRow.group.totals[key];
+              if (currentMinValue) {
                 let moments = [];
                 moments.push(cellValue);
-                moments.push(dom$2.ketchup.dates.format(currentTotalValue));
+                moments.push(dom$2.ketchup.dates.toDayjs(currentMinValue));
                 groupRow.group.totals[key] =
-                  dom$2.ketchup.dates.format(dom$2.ketchup.dates.min(moments));
+                  dom$2.ketchup.dates.format(dom$2.ketchup.dates.min(moments), kupManager.KupDatesFormats.ISO_DATE);
               }
               else {
-                groupRow.group.totals[key] = cellValue;
+                groupRow.group.totals[key] =
+                  dom$2.ketchup.dates.format(cellValue, kupManager.KupDatesFormats.ISO_DATE);
               }
               // updating parents
               let parent = groupRow.group.parent;
@@ -1005,13 +1005,14 @@ function updateGroupTotal(groupRow, totals, addedRow, distinctObj) {
                 if (currentParentMin) {
                   let moments = [];
                   moments.push(cellValue);
-                  moments.push(dom$2.ketchup.dates.format(currentParentMin));
+                  moments.push(dom$2.ketchup.dates.toDayjs(currentParentMin));
                   parent.group.totals[key] =
-                    dom$2.ketchup.dates.format(dom$2.ketchup.dates.min(moments));
+                    dom$2.ketchup.dates.format(dom$2.ketchup.dates.min(moments), kupManager.KupDatesFormats.ISO_DATE);
                 }
                 else {
                   // first round
-                  parent.group.totals[key] = cellValue;
+                  parent.group.totals[key] =
+                    dom$2.ketchup.dates.format(cellValue, kupManager.KupDatesFormats.ISO_DATE);
                 }
                 parent = parent.group.parent;
               }
@@ -1020,11 +1021,11 @@ function updateGroupTotal(groupRow, totals, addedRow, distinctObj) {
           break;
         // TODO DRY the MIN and MAX functions
         case kupManager.TotalMode.MAX:
-          if (_isNumber) {
-            const currentTotalValue = groupRow.group.totals[key];
+          if (_isNumber && cell.value) {
+            const currentMaxValue = groupRow.group.totals[key];
             const cellValue = dom$2.ketchup.math.numberify(dom$2.ketchup.math.numberifySafe(cell.value));
-            if (currentTotalValue) {
-              groupRow.group.totals[key] = Math.max(currentTotalValue, cellValue);
+            if (currentMaxValue) {
+              groupRow.group.totals[key] = Math.max(currentMaxValue, cellValue);
             }
             else {
               // first round
@@ -1044,37 +1045,37 @@ function updateGroupTotal(groupRow, totals, addedRow, distinctObj) {
               parent = parent.group.parent;
             }
           }
-          else if (dom$2.ketchup.objects.isDate(cell.obj)) {
-            const momentValue = cell.obj
-              ? dom$2.ketchup.objects.parseDate(cell.obj)
-              : dom$2.ketchup.dates.toDayjs(cell.value);
-            if (dom$2.ketchup.dates.isValid(momentValue)) {
-              const cellValue = dom$2.ketchup.dates.toDate(momentValue);
-              const currentTotalValue = groupRow.group.totals[key];
-              if (currentTotalValue) {
+          else if (cell.value &&
+            dom$2.ketchup.objects.isDate(cell.obj)) {
+            const cellValue = dom$2.ketchup.dates.toDayjs(cell.value);
+            if (dom$2.ketchup.dates.isValid(cellValue)) {
+              const currentMaxValue = groupRow.group.totals[key];
+              if (currentMaxValue) {
                 let moments = [];
                 moments.push(cellValue);
-                moments.push(dom$2.ketchup.dates.format(currentTotalValue));
+                moments.push(dom$2.ketchup.dates.toDayjs(currentMaxValue));
                 groupRow.group.totals[key] =
-                  dom$2.ketchup.dates.format(dom$2.ketchup.dates.max(moments));
+                  dom$2.ketchup.dates.format(dom$2.ketchup.dates.max(moments), kupManager.KupDatesFormats.ISO_DATE);
               }
               else {
-                groupRow.group.totals[key] = cellValue;
+                groupRow.group.totals[key] =
+                  dom$2.ketchup.dates.format(cellValue, kupManager.KupDatesFormats.ISO_DATE);
               }
               // updating parents
               let parent = groupRow.group.parent;
               while (parent != null) {
-                const currentParentMin = parent.group.totals[key];
-                if (currentParentMin) {
+                const currentParentMax = parent.group.totals[key];
+                if (currentParentMax) {
                   let moments = [];
                   moments.push(cellValue);
-                  moments.push(dom$2.ketchup.dates.format(currentParentMin));
+                  moments.push(dom$2.ketchup.dates.toDayjs(currentParentMax));
                   parent.group.totals[key] =
-                    dom$2.ketchup.dates.format(dom$2.ketchup.dates.max(moments));
+                    dom$2.ketchup.dates.format(dom$2.ketchup.dates.max(moments), kupManager.KupDatesFormats.ISO_DATE);
                 }
                 else {
                   // first round
-                  parent.group.totals[key] = cellValue;
+                  parent.group.totals[key] =
+                    dom$2.ketchup.dates.format(cellValue, kupManager.KupDatesFormats.ISO_DATE);
                 }
                 parent = parent.group.parent;
               }
@@ -1163,9 +1164,7 @@ function adjustGroupAverageOrFormula(row, type, toAdjustKeys, totals) {
   // adjust average/formulas
   toAdjustKeys.forEach((key) => {
     if (type == kupManager.TotalMode.AVERAGE) {
-      row.group.totals[key] =
-        dom$2.ketchup.math.numberify(row.group.totals[key]) /
-          numberOfLeaf;
+      row.group.totals[key] = row.group.totals[key] / numberOfLeaf;
     }
     if (type == kupManager.TotalMode.MATH) {
       let formula = totals[key].substring(kupManager.TotalMode.MATH.length);

package/dist/cjs/{f-text-field-bbcd2143.js → f-text-field-c74856ff.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const index = require('./index-c3d10561.js');
-const kupManager = require('./kup-manager-130bbd9d.js');
+const index = require('./index-d8e5eb5f.js');
+const kupManager = require('./kup-manager-7334c396.js');
 
 const dom = document.documentElement;
 /*-------------------------------------------------*/
@@ -57,7 +57,8 @@ function setContent(props) {
   let value = props.value;
   let inputType = (_a = props.inputType) !== null && _a !== void 0 ? _a : 'text';
   let persManageForNumberFormat = false;
-  if (props.inputType === 'number' && props.decimals && props.decimals > 0) {
+  if (props.inputType === 'number' &&
+    ((props.decimals && props.decimals > 0) || props.group)) {
     inputType = 'text';
     persManageForNumberFormat = true;
   }
@@ -101,7 +102,40 @@ function setContent(props) {
             group: props.group,
             integer: props.integers,
           };
-          e.target.value = formatValue(e.target.value, options, true);
+          if (props.min !== undefined &&
+            props.min !== null &&
+            props.min >
+              parseFloat(e.target.value)) {
+            e.target.value =
+              formatValue(props.min.toString(), options, true);
+          }
+          else if (props.max !== undefined &&
+            props.max !== null &&
+            props.max <
+              parseFloat(e.target.value)) {
+            e.target.value =
+              formatValue(props.max.toString(), options, true);
+          }
+          else {
+            e.target.value =
+              formatValue(e.target.value, options, true);
+          }
+        }
+        else {
+          if (props.min !== undefined &&
+            props.min !== null &&
+            props.min >
+              parseFloat(e.target.value)) {
+            e.target.value =
+              props.min.toString();
+          }
+          else if (props.max !== undefined &&
+            props.max !== null &&
+            props.max <
+              parseFloat(e.target.value)) {
+            e.target.value =
+              props.max.toString();
+          }
         }
         if (props.onChange) {
           props.onChange(e);