@goldenpine/react-form-builder2 0.20.3-build.2 → 0.20.3-build.21

package/lib/form-elements/component-label.js

@@ -13,17 +13,30 @@ var ComponentLabel = function ComponentLabel(props) {
   if (!labelText) {
     return null;
   }
+
+  // Since we use <div> to replace <span> in the label in form-elements-edit.jsx to support multiple-line labels,
+  // we need to ensure that the required label, *,  is inserted correctly.
+  // If it's simply appended the label string, it will show on a new line.
+  // The workaround is to insert it before the first closing </div> or </li> tag if it exists,
+  // so it appears at the end of the first line of the label.
+  var updatedLabel = labelText;
+  if (hasRequiredLabel) {
+    var insertSpan = '<span class="label-required" style="color:red;">*</span>';
+    var closingTagRegex = /<\/(div|li)>/i; // case-insensitive match for </div> or </li>
+
+    if (closingTagRegex.test(labelText)) {
+      updatedLabel = labelText.replace(closingTagRegex, "".concat(insertSpan, "</$1>"));
+    } else {
+      // Neither </div> nor </li> found — append at the end
+      updatedLabel = labelText + insertSpan;
+    }
+  }
   return /*#__PURE__*/_react["default"].createElement("label", {
     className: props.className || 'form-label'
   }, /*#__PURE__*/_react["default"].createElement("span", {
     dangerouslySetInnerHTML: {
-      __html: labelText
-    }
-  }), hasRequiredLabel && /*#__PURE__*/_react["default"].createElement("span", {
-    className: "label-required",
-    style: {
-      color: "red"
+      __html: updatedLabel
     }
-  }, "*"));
+  }));
 };
 var _default = exports["default"] = ComponentLabel;

package/lib/form-elements/custom-element.js

@@ -57,7 +57,7 @@ var CustomElement = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), bare ? /*#__PURE__*/_react["default"].createElement(Element, (0, _extends2["default"])({
         data: this.props.data
       }, this.props.data.props, props)) : /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({
         className: "form-label"
       }, this.props)), /*#__PURE__*/_react["default"].createElement(Element, (0, _extends2["default"])({

package/lib/form-elements/date-picker.js

@@ -80,7 +80,7 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
         className: baseClasses,
         style: _objectSpread({}, this.props.style)
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", null, readOnly && /*#__PURE__*/_react["default"].createElement("input", {
         type: "text",
         name: props.name,

package/lib/form-elements/index.js

@@ -19,7 +19,7 @@ var _fileSaver = require("file-saver");
 var _react = _interopRequireDefault(require("react"));
 var _reactSelect = _interopRequireDefault(require("react-select"));
 var _reactSignatureCanvas = _interopRequireDefault(require("react-signature-canvas"));
-var _reactBootstrapSlider = _interopRequireDefault(require("react-bootstrap-slider"));
+var _reactBootstrapSlider = _interopRequireDefault(require("@goldenpine/react-bootstrap-slider"));
 var _starRating = _interopRequireDefault(require("./star-rating"));
 var _datePicker = _interopRequireDefault(require("./date-picker"));
 var _componentHeader = _interopRequireDefault(require("./component-header"));
@@ -86,7 +86,7 @@ var Paragraph = /*#__PURE__*/function (_React$Component2) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("p", {
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
         className: classNames,
         dangerouslySetInnerHTML: {
           __html: _myxss["default"].process(this.props.data.content)
@@ -178,7 +178,7 @@ var TextInput = /*#__PURE__*/function (_React$Component5) {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("input", props)));
     }
   }]);
@@ -214,7 +214,7 @@ var EmailInput = /*#__PURE__*/function (_React$Component6) {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("input", props)));
     }
   }]);
@@ -250,7 +250,7 @@ var PhoneNumber = /*#__PURE__*/function (_React$Component7) {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("input", props)));
     }
   }]);
@@ -286,7 +286,7 @@ var NumberInput = /*#__PURE__*/function (_React$Component8) {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("input", props)));
     }
   }]);
@@ -321,7 +321,7 @@ var TextArea = /*#__PURE__*/function (_React$Component9) {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("textarea", props)));
     }
   }]);
@@ -356,7 +356,7 @@ var Dropdown = /*#__PURE__*/function (_React$Component0) {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("select", props, this.props.data.options.map(function (option) {
         var this_key = "preview_".concat(option.key);
         return /*#__PURE__*/_react["default"].createElement("option", {
@@ -421,7 +421,7 @@ var Signature = /*#__PURE__*/function (_React$Component1) {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.read_only === true || !!sourceDataURL ? /*#__PURE__*/_react["default"].createElement("img", {
         src: sourceDataURL
       }) : /*#__PURE__*/_react["default"].createElement(_reactSignatureCanvas["default"], pad_props), canClear && /*#__PURE__*/_react["default"].createElement("i", {
@@ -498,7 +498,7 @@ var Tags = /*#__PURE__*/function (_React$Component10) {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactSelect["default"], props)));
     }
   }]);
@@ -517,9 +517,9 @@ var Checkboxes = /*#__PURE__*/function (_React$Component11) {
     value: function render() {
       var _this0 = this;
       var self = this;
-      var classNames = 'custom-control custom-checkbox';
+      var classNames = 'form-check';
       if (this.props.data.inline) {
-        classNames += ' option-inline';
+        classNames += ' form-check-inline';
       }
       var baseClasses = 'SortableItem rfb-item';
       if (this.props.data.pageBreakBefore) {
@@ -529,7 +529,7 @@ var Checkboxes = /*#__PURE__*/function (_React$Component11) {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.data.options.map(function (option) {
         var this_key = "preview_".concat(option.key);
         var props = {};
@@ -547,14 +547,15 @@ var Checkboxes = /*#__PURE__*/function (_React$Component11) {
           key: this_key
         }, /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({
           id: "fid_".concat(this_key),
-          className: "custom-control-input",
+          className: "form-check-input",
           ref: function ref(c) {
             if (c && self.props.mutable) {
               self.options["child_ref_".concat(option.key)] = c;
             }
-          }
+          },
+          "data-required-checks": _this0.props.data.checkbox_required_checks ? _this0.props.data.checkbox_required_checks : '1'
         }, props)), /*#__PURE__*/_react["default"].createElement("label", {
-          className: "custom-control-label",
+          className: "form-check-label",
           htmlFor: "fid_".concat(this_key)
         }, option.text));
       })));
@@ -575,9 +576,9 @@ var RadioButtons = /*#__PURE__*/function (_React$Component12) {
     value: function render() {
       var _this10 = this;
       var self = this;
-      var classNames = 'custom-control custom-radio';
+      var classNames = 'form-check';
       if (this.props.data.inline) {
-        classNames += ' option-inline';
+        classNames += ' form-check-inline';
       }
       var baseClasses = 'SortableItem rfb-item';
       if (this.props.data.pageBreakBefore) {
@@ -587,7 +588,7 @@ var RadioButtons = /*#__PURE__*/function (_React$Component12) {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.data.options.map(function (option) {
         var this_key = "preview_".concat(option.key);
         var props = {};
@@ -605,14 +606,14 @@ var RadioButtons = /*#__PURE__*/function (_React$Component12) {
           key: this_key
         }, /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({
           id: "fid_".concat(this_key),
-          className: "custom-control-input",
+          className: "form-check-input",
           ref: function ref(c) {
             if (c && self.props.mutable) {
               self.options["child_ref_".concat(option.key)] = c;
             }
           }
         }, props)), /*#__PURE__*/_react["default"].createElement("label", {
-          className: "custom-control-label",
+          className: "form-check-label",
           htmlFor: "fid_".concat(this_key)
         }, option.text));
       })));
@@ -640,8 +641,11 @@ var Image = /*#__PURE__*/function (_React$Component13) {
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), this.props.data.src && /*#__PURE__*/_react["default"].createElement("img", {
         src: this.props.data.src,
-        width: this.props.data.width,
-        height: this.props.data.height
+        style: {
+          height: this.props.data.height,
+          width: this.props.data.width,
+          display: 'inline'
+        }
       }), !this.props.data.src && /*#__PURE__*/_react["default"].createElement("div", {
         className: "no-image"
       }, "No Image"));
@@ -677,7 +681,7 @@ var Rating = /*#__PURE__*/function (_React$Component14) {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement(_starRating["default"], props)));
     }
   }]);
@@ -699,7 +703,7 @@ var HyperLink = /*#__PURE__*/function (_React$Component15) {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: 'form-label'
       }, /*#__PURE__*/_react["default"].createElement("a", {
@@ -729,7 +733,7 @@ var Download = /*#__PURE__*/function (_React$Component16) {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("a", {
         href: "".concat(this.props.download_path, "?id=").concat(this.props.data.file_path)
       }, this.props.data.content)));
@@ -780,13 +784,29 @@ var Camera = /*#__PURE__*/function (_React$Component17) {
       }
       return imgProps;
     }
+
+    /* 
+      Originally Image/File upload elments don't count the heights of all visible controls which is layered on top of <input>,
+      which makes the element possibly overlaps on the next element on a narrow screen. 
+      It's caused by "position: absolue" of .image-upload-control.
+      The fix is to add inline style "position: relative" to the container div of .image-upload-control, and use <label> tag
+      and "for"/"id" to trigger to the file input dialog.
+    */
   }, {
     key: "render",
     value: function render() {
       var _this13 = this;
       var imageStyle = {
-        objectFit: 'scale-down',
-        objectPosition: this.props.data.center ? 'center' : 'left'
+        // 2025/11/11
+        // 'scale-down' looks to keep the original size of image on form-builder-generator.
+        // and sometimes the image is too small. Supposeing admin want to show the image in bigger size,
+        // so adjust it "contain" to make it bigger if possible. 
+        // "contain" is supposed to "Preserves the aspect ratio, and fits the image inside the container, without cutting"
+        objectFit: 'contain',
+        objectPosition: this.props.data.center ? 'center' : 'left',
+        // Move width and height from element style to inline style of image, to make it work the same way as 'Image' element.
+        width: this.props.data.width,
+        height: this.props.data.height
       };
       var baseClasses = 'SortableItem rfb-item';
       var name = this.props.data.field_name;
@@ -804,46 +824,103 @@ var Camera = /*#__PURE__*/function (_React$Component17) {
           sourceDataURL = "data:image/png;base64,".concat(this.props.defaultValue);
         }
       }
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        style: _objectSpread({}, this.props.style),
-        className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", (0, _extends2["default"])({
-        style: imageStyle,
-        src: sourceDataURL
-      }, this.getImageSizeProps(this.props.data)))) : /*#__PURE__*/_react["default"].createElement("div", {
-        className: "image-upload-container"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        style: fileInputStyle
-      }, /*#__PURE__*/_react["default"].createElement("input", {
-        name: name,
-        type: "file",
-        accept: "image/*",
-        capture: "camera",
-        className: "image-upload",
-        onChange: this.displayImage,
-        "data-clearlabel": this.props.data.label_after_photo_clear_icon,
-        disabled: this.props.read_only
-      }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "image-upload-control"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "btn btn-default"
-      }, /*#__PURE__*/_react["default"].createElement("i", {
-        className: "fas fa-camera"
-      }), " ", this.props.data.label_after_camera_icon), /*#__PURE__*/_react["default"].createElement("p", null, this.props.data.message_under_camera_icon))), this.state.img && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
-        onLoad: function onLoad() {
-          return URL.revokeObjectURL(_this13.state.previewImg);
-        },
-        src: this.state.previewImg,
-        height: "100",
-        className: "image-upload-preview"
-      }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "btn btn-image-clear",
-        onClick: this.clearImage
-      }, /*#__PURE__*/_react["default"].createElement("i", {
-        className: "fas fa-times"
-      }), " ", this.props.data.label_after_photo_clear_icon)))));
+      if (this.props.data.upload_layout === "standard") {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          style: _objectSpread({}, this.props.style),
+          className: baseClasses
+        }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "mb-3"
+        }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
+          style: imageStyle,
+          src: sourceDataURL
+          // {...this.getImageSizeProps(this.props.data)} // move width and height from element style to inline style of image, to make it work the same way as 'Image' element.
+        })) : /*#__PURE__*/_react["default"].createElement("div", {
+          className: "image-upload-container"
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          style: fileInputStyle
+        }, /*#__PURE__*/_react["default"].createElement("input", {
+          name: name,
+          type: "file",
+          accept: "image/*"
+          //capture="camera" // With this property, users on most mobiles can only take photo but no options to pick up a photo from gallery
+          ,
+          className: "image-upload visually-hidden",
+          onChange: this.displayImage,
+          "data-clearlabel": this.props.data.label_after_photo_clear_icon,
+          disabled: this.props.read_only,
+          id: name
+        }), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "image-upload-control",
+          style: {
+            position: 'relative'
+          }
+        }, /*#__PURE__*/_react["default"].createElement("label", {
+          className: "btn btn-outline-secondary",
+          htmlFor: name
+        }, /*#__PURE__*/_react["default"].createElement("i", {
+          className: "fas fa-camera"
+        }), " ", this.props.data.label_after_camera_icon), /*#__PURE__*/_react["default"].createElement("div", null, this.props.data.message_under_camera_icon))), this.state.img && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
+          onLoad: function onLoad() {
+            return URL.revokeObjectURL(_this13.state.previewImg);
+          },
+          src: this.state.previewImg,
+          height: "100",
+          className: "image-upload-preview"
+        }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "btn btn-image-clear",
+          onClick: this.clearImage
+        }, /*#__PURE__*/_react["default"].createElement("i", {
+          className: "fas fa-times"
+        }), " ", this.props.data.label_after_photo_clear_icon)))));
+      } else {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          style: _objectSpread({}, this.props.style),
+          className: baseClasses
+        }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "mb-3"
+        }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
+          style: imageStyle,
+          src: sourceDataURL
+        })) : /*#__PURE__*/_react["default"].createElement("div", {
+          className: "image-upload-container"
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          style: fileInputStyle,
+          className: "upload-card"
+        }, /*#__PURE__*/_react["default"].createElement("input", {
+          name: name,
+          type: "file",
+          accept: "image/*",
+          capture: "camera",
+          className: "visually-hidden",
+          onChange: this.displayImage,
+          id: name,
+          disabled: this.props.read_only
+        }), /*#__PURE__*/_react["default"].createElement("label", {
+          htmlFor: name,
+          className: "upload-card-content"
+        }, /*#__PURE__*/_react["default"].createElement("i", {
+          className: "fas fa-cloud-upload-alt upload-icon"
+        }), /*#__PURE__*/_react["default"].createElement("span", {
+          className: "upload-text"
+        }, this.props.data.message_under_camera_icon), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "btn-browse"
+        }, this.props.data.label_after_camera_icon))), this.state.img && /*#__PURE__*/_react["default"].createElement("div", {
+          className: "preview-container"
+        }, /*#__PURE__*/_react["default"].createElement("img", {
+          onLoad: function onLoad() {
+            return URL.revokeObjectURL(_this13.state.previewImg);
+          },
+          src: this.state.previewImg,
+          className: "image-upload-preview",
+          alt: "Preview",
+          height: "100"
+        }), /*#__PURE__*/_react["default"].createElement("button", {
+          className: "btn btn-image-clear",
+          onClick: this.clearImage
+        }, /*#__PURE__*/_react["default"].createElement("i", {
+          className: "fas fa-times"
+        }), " Remove Photo")))));
+      }
     }
   }]);
 }(_react["default"].Component);
@@ -934,9 +1011,9 @@ var FileUpload = /*#__PURE__*/function (_React$Component18) {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("button", {
-        className: "btn btn-default",
+        className: "btn btn-outline-secondary",
         onClick: this.saveFile
       }, /*#__PURE__*/_react["default"].createElement("i", {
         className: "fas fa-download"
@@ -948,17 +1025,22 @@ var FileUpload = /*#__PURE__*/function (_React$Component18) {
         name: name,
         type: "file",
         accept: this.props.data.fileType || '*',
-        className: "image-upload",
+        className: "image-upload visually-hidden",
         onChange: this.displayFileUpload,
         "data-clearlabel": this.props.data.label_after_file_clear_icon,
-        disabled: this.props.read_only
+        disabled: this.props.read_only,
+        id: name
       }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "image-upload-control"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "btn btn-default"
+        className: "image-upload-control",
+        style: {
+          position: 'relative'
+        }
+      }, /*#__PURE__*/_react["default"].createElement("label", {
+        className: "btn btn-outline-secondary",
+        htmlFor: name
       }, /*#__PURE__*/_react["default"].createElement("i", {
         className: "fas fa-file"
-      }), " ", this.props.data.label_after_file_icon), /*#__PURE__*/_react["default"].createElement("p", null, this.props.data.message_under_file_icon))), this.state.fileUpload && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+      }), " ", this.props.data.label_after_file_icon), /*#__PURE__*/_react["default"].createElement("div", null, this.props.data.message_under_file_icon))), this.state.fileUpload && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
         className: "file-upload-preview"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         style: {
@@ -1004,9 +1086,9 @@ var Range = /*#__PURE__*/function (_React$Component19) {
       var name = this.props.data.field_name;
       props.type = 'range';
       props.list = "tickmarks_".concat(name);
-      props.min = this.props.data.min_value;
-      props.max = this.props.data.max_value;
-      props.step = this.props.data.step;
+      props.min = Number(this.props.data.min_value);
+      props.max = Number(this.props.data.max_value);
+      props.step = Number(this.props.data.step) || 1;
       props.value = this.state.value;
       props.change = this.changeValue;
       if (this.props.mutable) {
@@ -1051,21 +1133,24 @@ var Range = /*#__PURE__*/function (_React$Component19) {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
         className: "range"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "clearfix"
       }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: "float-left"
+        className: "float-start"
       }, this.props.data.min_label), /*#__PURE__*/_react["default"].createElement("span", {
-        className: "float-right"
+        className: "float-end"
       }, this.props.data.max_label)), /*#__PURE__*/_react["default"].createElement(_reactBootstrapSlider["default"], props)), /*#__PURE__*/_react["default"].createElement("div", {
         className: "visible_marks"
       }, visible_marks), /*#__PURE__*/_react["default"].createElement("input", {
         name: name,
         value: this.state.value,
-        type: "hidden"
+        type: "hidden",
+        "data-min-value": props.min,
+        "data-max-value": props.max,
+        "data-step": props.step
       }), /*#__PURE__*/_react["default"].createElement("datalist", {
         id: props.list
       }, _datalist)));