@goldenpine/react-form-builder2 0.20.3-build.3 → 0.20.3-build.31

package/lib/form-elements-edit.js

@@ -10,6 +10,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _reactTextareaAutosize = _interopRequireDefault(require("react-textarea-autosize"));
 var _draftJs = require("draft-js");
@@ -34,6 +35,17 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
     var _this;
     (0, _classCallCheck2["default"])(this, FormElementsEdit);
     _this = _callSuper(this, FormElementsEdit, [props]);
+    // Instead of using editElementProp for the camera layout change, we have a separate handler to immediately update the element on change without waiting for blur, as it's a radio button and we want the change to be reflected immediately in the UI.
+    (0, _defineProperty2["default"])(_this, "handleUploadLayoutChange", function (e) {
+      var this_element = _this.state.element;
+      this_element["upload_layout"] = e.target["value"];
+      _this.setState({
+        element: this_element,
+        dirty: true
+      }, function () {
+        _this.updateElement();
+      });
+    });
     _this.state = {
       element: _this.props.element,
       data: _this.props.data,
@@ -122,9 +134,22 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         });
       }
     }
+  }, {
+    key: "validateImageSize",
+    value: function validateImageSize(e) {
+      var regex = /^$|^\d+(px|%)$/;
+      if (regex.test(e.target.value)) {
+        e.target.classList.remove("is-invalid");
+        e.target.classList.add("is-valid");
+      } else {
+        e.target.classList.remove("is-valid");
+        e.target.classList.add("is-invalid");
+      }
+    }
   }, {
     key: "render",
     value: function render() {
+      var _this$props$element$c;
       if (this.state.dirty) {
         this.props.element.dirty = true;
       }
@@ -147,6 +172,8 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         canHaveOptionCorrect = _this$props$element.canHaveOptionCorrect,
         canHaveOptionValue = _this$props$element.canHaveOptionValue;
       var canHaveImageSize = this.state.element.element === 'Image' || this.state.element.element === 'Camera';
+      var canHaveUploadLayout = this.state.element.element === 'Camera' || this.state.element.element === 'FileUpload';
+      var canHavePlaceholder = this.props.element.element === 'TextInput' || this.props.element.element === 'TextArea' || this.props.element.element === 'EmailInput' || this.props.element.element === 'NumberInput' || this.props.element.element === 'PhoneNumber';
       var this_files = this.props.files.length ? this.props.files : [];
       if (this_files.length < 1 || this_files.length > 0 && this_files[0].id !== '') {
         this_files.unshift({
@@ -164,12 +191,12 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
       return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
         className: "clearfix"
       }, /*#__PURE__*/_react["default"].createElement("h4", {
-        className: "float-left"
+        className: "float-start"
       }, this.props.element.text), /*#__PURE__*/_react["default"].createElement("i", {
-        className: "float-right fas fa-times dismiss-edit",
+        className: "float-end fas fa-times dismiss-edit",
         onClick: this.props.manualEditModeOff
       })), this.props.element.hasOwnProperty('content') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
@@ -181,7 +208,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         onEditorStateChange: this.onEditorStateChange.bind(this, 0, 'content'),
         stripPastedStyles: true
       })), this.props.element.hasOwnProperty('file_path') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label",
         htmlFor: "fileSelect"
@@ -200,7 +227,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
           key: this_key
         }, file.file_name);
       }))), this.props.element.hasOwnProperty('href') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_reactTextareaAutosize["default"], {
         type: "text",
         className: "form-control",
@@ -208,115 +235,164 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'href', 'value')
       })), this.props.element.hasOwnProperty('label') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__PURE__*/_react["default"].createElement("label", null, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+        className: "mb-3"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "d-flex justify-content-between align-items-center"
+      }, /*#__PURE__*/_react["default"].createElement("label", {
+        className: "mb-0"
+      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "display-label"
-      })), /*#__PURE__*/_react["default"].createElement(_reactDraftWysiwyg.Editor, {
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "form-check m-0"
+      }, /*#__PURE__*/_react["default"].createElement("input", {
+        id: "label-hidden",
+        className: "form-check-input",
+        type: "checkbox",
+        checked: this.props.element.labelHidden || false,
+        onChange: this.editElementProp.bind(this, 'labelHidden', 'checked')
+      }), /*#__PURE__*/_react["default"].createElement("label", {
+        className: "form-check-label",
+        htmlFor: "label-hidden"
+      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+        id: "label-hidden"
+      })))), /*#__PURE__*/_react["default"].createElement(_reactDraftWysiwyg.Editor, {
         toolbar: toolbar,
         defaultEditorState: editorState,
         onBlur: this.updateElement.bind(this),
         onEditorStateChange: this.onEditorStateChange.bind(this, 0, 'label'),
         stripPastedStyles: true
       }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "custom-control custom-checkbox"
+        className: "form-check"
       }, /*#__PURE__*/_react["default"].createElement("input", {
         id: "is-required",
-        className: "custom-control-input",
+        className: "form-check-input",
         type: "checkbox",
         checked: this_checked,
         value: true,
         onChange: this.editElementProp.bind(this, 'required', 'checked')
       }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "custom-control-label",
+        className: "form-check-label",
         htmlFor: "is-required"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "required"
-      }))), this.props.element.hasOwnProperty('readOnly') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "custom-control custom-checkbox"
+      }))), this_checked && this.state.element.element === 'Checkboxes' && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "d-flex align-items-center gap-2"
+      }, /*#__PURE__*/_react["default"].createElement("label", {
+        className: "form-label mb-0",
+        htmlFor: "checkbox-required-checks"
+      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+        id: "minimum-number-of-selections"
+      }), ":"), /*#__PURE__*/_react["default"].createElement("input", {
+        id: "checkbox-required-checks",
+        type: "number",
+        min: "1",
+        className: "form-control d-inline-block",
+        style: {
+          width: '8ch'
+        },
+        value: (_this$props$element$c = this.props.element.checkbox_required_checks) !== null && _this$props$element$c !== void 0 ? _this$props$element$c : '1',
+        onBlur: this.updateElement.bind(this),
+        onChange: this.editElementProp.bind(this, 'checkbox_required_checks', 'value')
+      })), this.props.element.hasOwnProperty('readOnly') && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "form-check"
       }, /*#__PURE__*/_react["default"].createElement("input", {
         id: "is-read-only",
-        className: "custom-control-input",
+        className: "form-check-input",
         type: "checkbox",
         checked: this_read_only,
         value: true,
         onChange: this.editElementProp.bind(this, 'readOnly', 'checked')
       }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "custom-control-label",
+        className: "form-check-label",
         htmlFor: "is-read-only"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "read-only"
       }))), this.props.element.hasOwnProperty('defaultToday') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "custom-control custom-checkbox"
+        className: "form-check"
       }, /*#__PURE__*/_react["default"].createElement("input", {
         id: "is-default-to-today",
-        className: "custom-control-input",
+        className: "form-check-input",
         type: "checkbox",
         checked: this_default_today,
         value: true,
         onChange: this.editElementProp.bind(this, 'defaultToday', 'checked')
       }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "custom-control-label",
+        className: "form-check-label",
         htmlFor: "is-default-to-today"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "default-to-today"
       }), "?")), this.props.element.hasOwnProperty('showTimeSelect') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "custom-control custom-checkbox"
+        className: "form-check"
       }, /*#__PURE__*/_react["default"].createElement("input", {
         id: "show-time-select",
-        className: "custom-control-input",
+        className: "form-check-input",
         type: "checkbox",
         checked: this_show_time_select,
         value: true,
         onChange: this.editElementProp.bind(this, 'showTimeSelect', 'checked')
       }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "custom-control-label",
+        className: "form-check-label",
         htmlFor: "show-time-select"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "show-time-select"
       }), "?")), this_show_time_select && this.props.element.hasOwnProperty('showTimeSelectOnly') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "custom-control custom-checkbox"
+        className: "form-check"
       }, /*#__PURE__*/_react["default"].createElement("input", {
         id: "show-time-select-only",
-        className: "custom-control-input",
+        className: "form-check-input",
         type: "checkbox",
         checked: this_show_time_select_only,
         value: true,
         onChange: this.editElementProp.bind(this, 'showTimeSelectOnly', 'checked')
       }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "custom-control-label",
+        className: "form-check-label",
         htmlFor: "show-time-select-only"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "show-time-select-only"
       }), "?")), this.props.element.hasOwnProperty('showTimeInput') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "custom-control custom-checkbox"
+        className: "form-check"
       }, /*#__PURE__*/_react["default"].createElement("input", {
         id: "show-time-input",
-        className: "custom-control-input",
+        className: "form-check-input",
         type: "checkbox",
         checked: this_show_time_input,
         value: true,
         onChange: this.editElementProp.bind(this, 'showTimeInput', 'checked')
       }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "custom-control-label",
+        className: "form-check-label",
         htmlFor: "show-time-input"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "show-time-input"
       }), "?")), (this.state.element.element === 'RadioButtons' || this.state.element.element === 'Checkboxes') && canHaveDisplayHorizontal && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "custom-control custom-checkbox"
+        className: "form-check"
       }, /*#__PURE__*/_react["default"].createElement("input", {
         id: "display-horizontal",
-        className: "custom-control-input",
+        className: "form-check-input",
         type: "checkbox",
         checked: this_checked_inline,
         value: true,
         onChange: this.editElementProp.bind(this, 'inline', 'checked')
       }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "custom-control-label",
+        className: "form-check-label",
         htmlFor: "display-horizontal"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "display-horizontal"
-      })))), this.props.element.hasOwnProperty('src') && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+      })))), canHavePlaceholder && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "mb-3"
+      }, /*#__PURE__*/_react["default"].createElement("label", {
+        className: "control-label",
+        htmlFor: "placeholderInput"
+      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+        id: "placeholder"
+      })), /*#__PURE__*/_react["default"].createElement("input", {
+        id: "placeholderInput",
+        type: "text",
+        className: "form-control",
+        defaultValue: this.props.element.placeholder,
+        onBlur: this.updateElement.bind(this),
+        onChange: this.editElementProp.bind(this, 'placeholder', 'value')
+      })), this.props.element.hasOwnProperty('src') && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label",
         htmlFor: "srcInput"
@@ -329,54 +405,46 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         defaultValue: this.props.element.src,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'src', 'value')
-      }))), canHaveImageSize && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+      }))), canHaveUploadLayout && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "mb-3"
+      }, /*#__PURE__*/_react["default"].createElement("label", {
+        className: "control-label bold"
+      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+        id: "upload-layout"
+      }), ":"), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "d-flex align-items-center gap-3"
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "custom-control custom-checkbox"
+        className: "form-check d-flex align-items-center"
       }, /*#__PURE__*/_react["default"].createElement("input", {
-        id: "do-center",
-        className: "custom-control-input",
-        type: "checkbox",
-        checked: this_checked_center,
-        value: true,
-        onChange: this.editElementProp.bind(this, 'center', 'checked')
+        className: "form-check-input",
+        type: "radio",
+        name: "uploadLayout",
+        id: "uploadLayoutStandard",
+        value: "standard",
+        checked: this.props.element.upload_layout === "standard",
+        onChange: this.handleUploadLayoutChange
       }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "custom-control-label",
-        htmlFor: "do-center"
-      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
-        id: "center"
-      }), "?"))), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "row"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "col-sm-3"
-      }, /*#__PURE__*/_react["default"].createElement("label", {
-        className: "control-label",
-        htmlFor: "elementWidth"
+        className: "form-check-label ms-2",
+        htmlFor: "uploadLayoutStandard"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
-        id: "width"
-      }), ":"), /*#__PURE__*/_react["default"].createElement("input", {
-        id: "elementWidth",
-        type: "text",
-        className: "form-control",
-        defaultValue: this.props.element.width,
-        onBlur: this.updateElement.bind(this),
-        onChange: this.editElementProp.bind(this, 'width', 'value')
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "col-sm-3"
-      }, /*#__PURE__*/_react["default"].createElement("label", {
-        className: "control-label",
-        htmlFor: "elementHeight"
+        id: "upload-layout-standard"
+      }))), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "form-check d-flex align-items-center"
+      }, /*#__PURE__*/_react["default"].createElement("input", {
+        className: "form-check-input",
+        type: "radio",
+        name: "uploadLayout",
+        id: "uploadLayoutDropZone",
+        value: "dropzone",
+        checked: this.props.element.upload_layout === "dropzone",
+        onChange: this.handleUploadLayoutChange
+      }), /*#__PURE__*/_react["default"].createElement("label", {
+        className: "form-check-label ms-2",
+        htmlFor: "uploadLayoutDropZone"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
-        id: "height"
-      }), ":"), /*#__PURE__*/_react["default"].createElement("input", {
-        id: "elementHeight",
-        type: "text",
-        className: "form-control",
-        defaultValue: this.props.element.height,
-        onBlur: this.updateElement.bind(this),
-        onChange: this.editElementProp.bind(this, 'height', 'value')
-      })))), this.state.element.element === 'Camera' && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        id: "upload-layout-dropzone"
+      })))))), this.state.element.element === 'Camera' && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label",
         htmlFor: "LabelAfterCameraIcon"
@@ -390,7 +458,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'label_after_camera_icon', 'value')
       })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label",
         htmlFor: "MessageUnderCameraIcon"
@@ -404,7 +472,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'message_under_camera_icon', 'value')
       })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label",
         htmlFor: "LabelAfterPhotoClearIcon"
@@ -417,8 +485,64 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         defaultValue: this.props.element.label_after_photo_clear_icon,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'label_after_photo_clear_icon', 'value')
-      }))), this.state.element.element === 'FileUpload' && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+      }))), canHaveImageSize && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "mb-3"
+      }, /*#__PURE__*/_react["default"].createElement("label", {
+        className: "control-label bold"
+      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+        id: "image-layout"
+      }), ":"), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "form-check"
+      }, /*#__PURE__*/_react["default"].createElement("input", {
+        id: "do-center",
+        className: "form-check-input",
+        type: "checkbox",
+        checked: this_checked_center,
+        value: true,
+        onChange: this.editElementProp.bind(this, 'center', 'checked')
+      }), /*#__PURE__*/_react["default"].createElement("label", {
+        className: "form-check-label",
+        htmlFor: "do-center"
+      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+        id: "center"
+      }), "?"))), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "row mb-3"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "col-sm-3"
+      }, /*#__PURE__*/_react["default"].createElement("label", {
+        className: "control-label",
+        htmlFor: "elementWidth"
+      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+        id: "width"
+      }), ":"), /*#__PURE__*/_react["default"].createElement("input", {
+        id: "elementWidth",
+        type: "text",
+        className: "form-control",
+        pattern: "^$|^\\d+(px|%)$",
+        onInput: this.validateImageSize,
+        defaultValue: this.props.element.width,
+        onBlur: this.updateElement.bind(this),
+        onChange: this.editElementProp.bind(this, 'width', 'value')
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "col-sm-3"
+      }, /*#__PURE__*/_react["default"].createElement("label", {
+        className: "control-label",
+        htmlFor: "elementHeight"
+      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+        id: "height"
+      }), ":"), /*#__PURE__*/_react["default"].createElement("input", {
+        id: "elementHeight",
+        type: "text",
+        className: "form-control",
+        pattern: "^$|^\\d+(px|%)$",
+        onInput: this.validateImageSize,
+        defaultValue: this.props.element.height,
+        onBlur: this.updateElement.bind(this),
+        onChange: this.editElementProp.bind(this, 'height', 'value')
+      })), /*#__PURE__*/_react["default"].createElement("small", {
+        className: "form-text text-muted"
+      }, "Use ", /*#__PURE__*/_react["default"].createElement("code", null, "px"), " or ", /*#__PURE__*/_react["default"].createElement("code", null, "%"), " (e.g. 200px, 100%)."))), this.state.element.element === 'FileUpload' && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label",
         htmlFor: "LabelAfterFileIcon"
@@ -432,7 +556,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'label_after_file_icon', 'value')
       })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label",
         htmlFor: "MessageUnderFileIcon"
@@ -446,7 +570,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'message_under_file_icon', 'value')
       })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label",
         htmlFor: "LabelAfterFileClearIcon"
@@ -460,7 +584,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'label_after_file_clear_icon', 'value')
       })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label",
         htmlFor: "fileType"
@@ -498,7 +622,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
           key: index
         }, file.typeName);
       })))), this.state.element.element === 'Signature' && this.props.element.readOnly ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label",
         htmlFor: "variableKey"
@@ -516,47 +640,47 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "variable-key-desc"
       }), ".")) : /*#__PURE__*/_react["default"].createElement("div", null), canHavePageBreakBefore && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "print-options"
       })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "custom-control custom-checkbox"
+        className: "form-check"
       }, /*#__PURE__*/_react["default"].createElement("input", {
         id: "page-break-before-element",
-        className: "custom-control-input",
+        className: "form-check-input",
         type: "checkbox",
         checked: this_checked_page_break,
         value: true,
         onChange: this.editElementProp.bind(this, 'pageBreakBefore', 'checked')
       }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "custom-control-label",
+        className: "form-check-label",
         htmlFor: "page-break-before-element"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "page-break-before-elements"
       }), "?"))), canHaveAlternateForm && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "alternate-signature-page"
       })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "custom-control custom-checkbox"
+        className: "form-check"
       }, /*#__PURE__*/_react["default"].createElement("input", {
         id: "display-on-alternate",
-        className: "custom-control-input",
+        className: "form-check-input",
         type: "checkbox",
         checked: this_checked_alternate_form,
         value: true,
         onChange: this.editElementProp.bind(this, 'alternateForm', 'checked')
       }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "custom-control-label",
+        className: "form-check-label",
         htmlFor: "display-on-alternate"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "display-on-alternate-signature-page"
       }), "?"))), this.props.element.hasOwnProperty('step') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "form-group-range"
       }, /*#__PURE__*/_react["default"].createElement("label", {
@@ -572,7 +696,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'step', 'value')
       }))), this.props.element.hasOwnProperty('min_value') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "form-group-range"
       }, /*#__PURE__*/_react["default"].createElement("label", {
@@ -594,7 +718,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'min_label', 'value')
       }))), this.props.element.hasOwnProperty('max_value') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "form-group-range"
       }, /*#__PURE__*/_react["default"].createElement("label", {
@@ -616,7 +740,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'max_label', 'value')
       }))), this.props.element.hasOwnProperty('default_value') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "form-group-range"
       }, /*#__PURE__*/_react["default"].createElement("label", {
@@ -632,41 +756,41 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'default_value', 'value')
       }))), this.props.element.hasOwnProperty('static') && this.props.element["static"] && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "text-style"
       })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "custom-control custom-checkbox"
+        className: "form-check"
       }, /*#__PURE__*/_react["default"].createElement("input", {
         id: "do-bold",
-        className: "custom-control-input",
+        className: "form-check-input",
         type: "checkbox",
         checked: this_checked_bold,
         value: true,
         onChange: this.editElementProp.bind(this, 'bold', 'checked')
       }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "custom-control-label",
+        className: "form-check-label",
         htmlFor: "do-bold"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "bold"
       }))), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "custom-control custom-checkbox"
+        className: "form-check"
       }, /*#__PURE__*/_react["default"].createElement("input", {
         id: "do-italic",
-        className: "custom-control-input",
+        className: "form-check-input",
         type: "checkbox",
         checked: this_checked_italic,
         value: true,
         onChange: this.editElementProp.bind(this, 'italic', 'checked')
       }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "custom-control-label",
+        className: "form-check-label",
         htmlFor: "do-italic"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "italic"
       })))), this.props.element.showDescription && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label",
         htmlFor: "questionDescription"
@@ -680,7 +804,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'description', 'value')
       })), this.props.showCorrectColumn && this.props.element.canHaveAnswer && !this.props.element.hasOwnProperty('options') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label",
         htmlFor: "correctAnswer"
@@ -694,7 +818,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'correct', 'value')
       })), this.props.element.canPopulateFromApi && this.props.element.hasOwnProperty('options') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+        className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement("label", {
         className: "control-label",
         htmlFor: "optionsApiUrl"