react-survey-builder 1.0.15 → 1.0.17

package/lib/survey-elements-edit.js

@@ -40,7 +40,7 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
     _this = _super.call(this, props);
     _this.state = {
       element: _this.props.element,
-      data: _this.props.data,
+      item: _this.props.item,
       dirty: false
     };
     return _this;
@@ -175,7 +175,11 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
       }, this.props.element.text), /*#__PURE__*/_react["default"].createElement(_fa.FaTimes, {
         className: "float-end dismiss-edit",
         onClick: this.props.manualEditModeOff
-      })), this.props.element.hasOwnProperty('content') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, null, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+      })), this.props.element.hasOwnProperty('content') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-5"
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+        className: "fw-bold"
+      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "text-to-display"
       }), ":"), /*#__PURE__*/_react["default"].createElement(_reactDraftWysiwyg.Editor, {
         toolbar: toolbar,
@@ -183,7 +187,10 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
         onBlur: this.updateElement.bind(this),
         onEditorStateChange: this.onEditorStateChange.bind(this, 0, 'content'),
         stripPastedStyles: true
-      })), this.props.element.hasOwnProperty('filePath') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+      })), this.props.element.hasOwnProperty('filePath') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-5"
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+        className: "fw-bold",
         htmlFor: "fileSelect"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "choose-file"
@@ -198,21 +205,34 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
           value: file.id,
           key: thisKey
         }, file.file_name);
-      }))), this.props.element.hasOwnProperty('href') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactTextareaAutosize["default"], {
+      }))), this.props.element.hasOwnProperty('href') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-5"
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+        className: "fw-bold",
+        htmlFor: "href"
+      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+        id: "link-to"
+      }), ":"), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
+        id: "href",
         type: "text",
-        className: "form-control",
         defaultValue: this.props.element.href,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'href', 'value')
-      })), this.props.element.hasOwnProperty('label') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, null, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+      })), this.props.element.hasOwnProperty('label') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-5"
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+        className: "fw-bold"
+      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "display-label"
-      })), /*#__PURE__*/_react["default"].createElement(_reactDraftWysiwyg.Editor, {
+      }), ":"), /*#__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(_reactBootstrap.Form.Check, {
+      }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+        className: "fw-bold"
+      }, "Field Properties:"), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, {
         id: "is-required",
         label: /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
           id: "required"
@@ -257,7 +277,11 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
         checked: thisCheckedInline,
         value: true,
         onChange: this.editElementProp.bind(this, 'inline', 'checked')
-      })), this.state.element.element === 'Checkbox' && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, null, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+      })), this.state.element.element === 'Checkbox' && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-5"
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+        className: "fw-bold"
+      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "checkbox-label-text"
       }), ":"), /*#__PURE__*/_react["default"].createElement(_reactDraftWysiwyg.Editor, {
         toolbar: toolbar,
@@ -265,7 +289,10 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
         onBlur: this.updateElement.bind(this),
         onEditorStateChange: this.onEditorStateChange.bind(this, 0, 'boxLabel'),
         stripPastedStyles: true
-      })), this.props.element.hasOwnProperty('src') && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+      })), this.props.element.hasOwnProperty('src') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-5"
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+        className: "fw-bold",
         htmlFor: "srcInput"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "link-to"
@@ -275,7 +302,14 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
         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(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, {
+      })), canHaveImageSize && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-5"
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Row, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
+        sm: 3
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+        className: "fw-bold",
+        htmlFor: "do-center"
+      }, "Alignment:"), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, {
         id: "do-center",
         label: /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
           id: "center"
@@ -284,32 +318,36 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
         checked: thisCheckedCenter,
         value: true,
         onChange: this.editElementProp.bind(this, 'center', 'checked')
-      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Row, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
         sm: 3
       }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+        className: "fw-bold",
         htmlFor: "elementWidth"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "width"
       }), ":"), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
         id: "elementWidth",
-        type: "text",
+        type: "number",
         defaultValue: this.props.element.width,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'width', 'value')
       })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
         sm: 3
       }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+        className: "fw-bold",
         htmlFor: "elementHeight"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "height"
       }), ":"), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
         id: "elementHeight",
-        type: "text",
+        type: "number",
         defaultValue: this.props.element.height,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'height', 'value')
-      })))), this.state.element.element === 'FileUpload' && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
-        className: "control-label",
+      })))), this.state.element.element === 'FileUpload' && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-5"
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+        className: "fw-bold",
         htmlFor: "fileType"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "choose-file-type"
@@ -343,9 +381,13 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
           value: file.type,
           key: index
         }, file.typeName);
-      })))), canHavePageBreakBefore && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, null, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+      }))), canHavePageBreakBefore && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-5"
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+        className: "fw-bold"
+      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "print-options"
-      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, {
+      }), ":"), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, {
         id: "page-break-before-element",
         label: /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
           id: "page-break-before-element"
@@ -354,9 +396,13 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
         checked: thisCheckedPageBreak,
         value: true,
         onChange: this.editElementProp.bind(this, 'pageBreakBefore', 'checked')
-      })), canHaveAlternateForm && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, null, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+      })), canHaveAlternateForm && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-5"
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+        className: "fw-bold"
+      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "alternate-signature-page"
-      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, {
+      }), ":"), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, {
         id: "display-on-alternate",
         label: /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
           id: "display-on-alternate-signature-page"
@@ -365,80 +411,103 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
         checked: thisCheckedAlternateForm,
         value: true,
         onChange: this.editElementProp.bind(this, 'alternateForm', 'checked')
-      })), this.props.element.hasOwnProperty('step') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement("div", {
+      })), this.props.element.hasOwnProperty('step') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-5"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "form-group-range"
       }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+        className: "fw-bold",
         htmlFor: "rangeStep"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "step"
-      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
+      }), ":"), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
         id: "rangeStep",
         type: "number",
         defaultValue: this.props.element.step,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'step', 'value')
-      }))), this.props.element.hasOwnProperty('minValue') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement("div", {
+      }))), this.props.element.hasOwnProperty('minValue') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-5"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "form-group-range"
       }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+        className: "fw-bold",
         htmlFor: "rangeMin"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "min"
-      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
+      }), ":"), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
         id: "rangeMin",
         type: "number",
         defaultValue: this.props.element.minValue,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'minValue', 'value')
-      }))), this.props.element.hasOwnProperty('minLabel') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement("div", {
+      }))), this.props.element.hasOwnProperty('minLabel') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-5"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "form-group-range"
       }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+        className: "fw-bold",
         htmlFor: "rangeMin"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "min-label"
-      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
+      }), ":"), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
         type: "text",
         defaultValue: this.props.element.minLabel,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'minLabel', 'value')
-      }))), this.props.element.hasOwnProperty('maxValue') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement("div", {
+      }))), this.props.element.hasOwnProperty('maxValue') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-5"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "form-group-range"
       }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+        className: "fw-bold",
         htmlFor: "rangeMax"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "max"
-      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
+      }), ":"), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
         id: "rangeMax",
         type: "number",
         defaultValue: this.props.element.maxValue,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'maxValue', 'value')
-      }))), this.props.element.hasOwnProperty('maxLabel') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement("div", {
+      }))), this.props.element.hasOwnProperty('maxLabel') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-5"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "form-group-range"
       }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+        className: "fw-bold",
         htmlFor: "rangeMax"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "max-label"
-      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
+      }), ":"), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
         type: "text",
         defaultValue: this.props.element.maxLabel,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'maxLabel', 'value')
-      }))), this.props.element.hasOwnProperty('defaultValue') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement("div", {
+      }))), this.props.element.hasOwnProperty('defaultValue') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-5"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "form-group-range"
       }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+        className: "fw-bold",
         htmlFor: "defaultSelected"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "default-selected"
-      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
+      }), ":"), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
         id: "defaultSelected",
         type: "number",
         defaultValue: this.props.element.defaultValue,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'defaultValue', 'value')
-      }))), this.props.element.hasOwnProperty('static') && this.props.element["static"] && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, null, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+      }))), this.props.element.hasOwnProperty('static') && this.props.element["static"] && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-5"
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+        className: "fw-bold"
+      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "text-style"
-      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, {
+      }), ":"), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, {
         id: "do-bold",
+        inline: true,
         label: /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
           id: "bold"
         }),
@@ -448,6 +517,7 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
         onChange: this.editElementProp.bind(this, 'bold', 'checked')
       }), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, {
         id: "do-italic",
+        inline: true,
         label: /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
           id: "italic"
         }),
@@ -455,27 +525,36 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
         checked: thisCheckedItalic,
         value: true,
         onChange: this.editElementProp.bind(this, 'italic', 'checked')
-      })), this.props.element.showPlaceholder && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+      })), this.props.element.showPlaceholder && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-5"
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+        className: "fw-bold",
         htmlFor: "placeholder"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "place-holder-text-label"
-      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
+      }), ":"), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
         type: "text",
         id: "placeholder",
         defaultValue: this.props.element.placeholder,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'placeholder', 'value')
-      })), this.props.element.showCustomName && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+      })), this.props.element.showCustomName && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-5"
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+        className: "fw-bold",
         htmlFor: "customName"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "custom-name-label"
-      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
+      }), ":"), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
         type: "text",
         id: "customName",
         defaultValue: this.props.element.customName,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'customName', 'value')
-      })), this.props.element.showLabelLocationPicker && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+      })), this.props.element.showLabelLocationPicker && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-5"
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+        className: "fw-bold",
         htmlFor: "labelLocation"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "choose-label-location"
@@ -488,43 +567,55 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
         value: "ABOVE"
       }, "Above Form Field"), /*#__PURE__*/_react["default"].createElement("option", {
         value: "FLOATING"
-      }, "Floating Inside Form Field"))), this.props.element.showHelp && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+      }, "Floating Inside Form Field"))), this.props.element.showHelp && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-5"
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+        className: "fw-bold",
         htmlFor: "help"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "help-label"
-      })), /*#__PURE__*/_react["default"].createElement(_reactTextareaAutosize["default"], {
+      }), ":"), /*#__PURE__*/_react["default"].createElement(_reactTextareaAutosize["default"], {
         type: "text",
         className: "form-control",
         id: "help",
         defaultValue: this.props.element.help,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'help', 'value')
-      })), this.props.element.showDescription && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+      })), this.props.element.showDescription && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-5"
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+        className: "fw-bold",
         htmlFor: "questionDescription"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "description"
-      })), /*#__PURE__*/_react["default"].createElement(_reactTextareaAutosize["default"], {
+      }), ":"), /*#__PURE__*/_react["default"].createElement(_reactTextareaAutosize["default"], {
         type: "text",
         className: "form-control",
         id: "questionDescription",
         defaultValue: this.props.element.description,
         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(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+      })), this.props.showCorrectColumn && this.props.element.canHaveAnswer && !this.props.element.hasOwnProperty('options') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-5"
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+        className: "fw-bold",
         htmlFor: "correctAnswer"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "correct-answer"
-      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
+      }), ":"), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
         id: "correctAnswer",
         type: "text",
         defaultValue: this.props.element.correct,
         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(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+      })), this.props.element.canPopulateFromApi && this.props.element.hasOwnProperty('options') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-5"
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+        className: "fw-bold",
         htmlFor: "optionsApiUrl"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "populate-options-from-api"
-      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Row, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
+      }), ":"), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Row, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
         sm: 6
       }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
         style: {
@@ -544,7 +635,7 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
         showCorrectColumn: this.props.showCorrectColumn,
         canHaveOptionCorrect: canHaveOptionCorrect,
         canHaveOptionValue: canHaveOptionValue,
-        data: this.props.preview.state.data,
+        item: this.props.preview.state.item,
         updateElement: this.props.updateElement,
         preview: this.props.preview,
         element: this.props.element,

package/lib/toolbar-draggable-item.js

@@ -23,7 +23,7 @@ var cardSource = {
     return {
       id: _UUID["default"].uuid(),
       index: -1,
-      data: props.data,
+      item: props.item,
       onCreate: props.onCreate
     };
   }
@@ -40,13 +40,13 @@ var ToolbarItem = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this$props = this.props,
         connectDragSource = _this$props.connectDragSource,
-        data = _this$props.data,
+        item = _this$props.item,
         onClick = _this$props.onClick;
-      var IconComponent = data.icon;
+      var IconComponent = item.icon;
       if (!connectDragSource) return null;
       return connectDragSource( /*#__PURE__*/_react["default"].createElement("li", {
         onClick: onClick
-      }, /*#__PURE__*/_react["default"].createElement(IconComponent, null), data.name));
+      }, /*#__PURE__*/_react["default"].createElement(IconComponent, null), item.name));
     }
   }]);
   return ToolbarItem;

package/lib/toolbar.js

@@ -84,7 +84,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
     _this = _super.call(this, props);
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderItem", function (item) {
       return /*#__PURE__*/_react["default"].createElement(_toolbarDraggableItem["default"], {
-        data: item,
+        item: item,
         key: item.key,
         onClick: _this._onClick.bind((0, _assertThisInitialized2["default"])(_this), item),
         onCreate: _this.create
@@ -165,7 +165,8 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         options: [],
         placeholder: 'Select One',
         hideRequiredAlert: true,
-        showLabelLocationPicker: true
+        showLabelLocationPicker: true,
+        answerType: 'ARRAY'
       }, {
         key: 'Tags',
         canHaveAnswer: true,
@@ -183,7 +184,8 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         options: [],
         placeholder: 'Select...',
         hideRequiredAlert: true,
-        showLabelLocationPicker: true
+        showLabelLocationPicker: true,
+        answerType: 'ARRAY'
       }, {
         key: 'Checkboxes',
         canHaveAnswer: true,
@@ -199,7 +201,8 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         showDescription: true,
         showHelp: true,
         options: [],
-        hideRequiredAlert: true
+        hideRequiredAlert: true,
+        answerType: 'ARRAY'
       }, {
         key: 'Checkbox',
         canHaveAnswer: true,
@@ -215,7 +218,8 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         showDescription: true,
         showHelp: true,
         boxLabel: 'Agree To Rules & Regs',
-        hideRequiredAlert: true
+        hideRequiredAlert: true,
+        answerType: 'BOOLEAN'
       }, {
         key: 'RadioButtons',
         canHaveAnswer: true,
@@ -231,7 +235,8 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         showDescription: true,
         showHelp: true,
         options: [],
-        hideRequiredAlert: true
+        hideRequiredAlert: true,
+        answerType: 'STRING'
       }, {
         key: 'TextInput',
         canHaveAnswer: true,
@@ -250,7 +255,8 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'place-holder-label'
         }),
         hideRequiredAlert: true,
-        showLabelLocationPicker: true
+        showLabelLocationPicker: true,
+        answerType: 'STRING'
       }, {
         key: 'EmailInput',
         canHaveAnswer: true,
@@ -269,7 +275,8 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'place-holder-email'
         }),
         hideRequiredAlert: true,
-        showLabelLocationPicker: true
+        showLabelLocationPicker: true,
+        answerType: 'STRING'
       }, {
         key: 'PhoneNumber',
         canHaveAnswer: true,
@@ -285,7 +292,8 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         showDescription: true,
         showHelp: true,
         hideRequiredAlert: true,
-        showLabelLocationPicker: true
+        showLabelLocationPicker: true,
+        answerType: 'STRING'
       }, {
         key: 'DatePicker',
         canDefaultToday: true,
@@ -307,7 +315,8 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         showDescription: true,
         showHelp: true,
         hideRequiredAlert: true,
-        showLabelLocationPicker: true
+        showLabelLocationPicker: true,
+        answerType: 'STRING'
       }, {
         key: 'TextArea',
         canHaveAnswer: true,
@@ -323,7 +332,8 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         showDescription: true,
         showHelp: true,
         hideRequiredAlert: true,
-        showLabelLocationPicker: true
+        showLabelLocationPicker: true,
+        answerType: 'STRING'
       }, {
         key: 'NumberInput',
         canHaveAnswer: true,
@@ -342,7 +352,8 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         minValue: 0,
         maxValue: 5,
         hideRequiredAlert: true,
-        showLabelLocationPicker: true
+        showLabelLocationPicker: true,
+        answerType: 'NUMBER'
       }, {
         key: 'Rating',
         canHaveAnswer: true,
@@ -356,7 +367,8 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         fieldName: 'rating_',
         showCustomName: true,
         showDescription: true,
-        showHelp: true
+        showHelp: true,
+        answerType: 'NUMBER'
       }, {
         key: 'Range',
         name: intl.formatMessage({
@@ -380,7 +392,8 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         showCustomName: true,
         showDescription: true,
         showHelp: true,
-        hideRequiredAlert: true
+        hideRequiredAlert: true,
+        answerType: 'NUMBER'
       }, {
         key: 'Signature',
         canReadOnly: true,
@@ -395,7 +408,8 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         showCustomName: true,
         showDescription: true,
         showHelp: true,
-        hideRequiredAlert: true
+        hideRequiredAlert: true,
+        answerType: 'IMAGE'
       }, {
         key: 'Camera',
         name: intl.formatMessage({
@@ -405,7 +419,8 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         label: intl.formatMessage({
           id: 'place-holder-label'
         }),
-        fieldName: 'camera_'
+        fieldName: 'camera_',
+        answerType: 'IMAGE'
       }, {
         key: 'FileUpload',
         name: intl.formatMessage({
@@ -415,7 +430,8 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         label: intl.formatMessage({
           id: 'place-holder-label'
         }),
-        fieldName: 'file_upload_'
+        fieldName: 'file_upload_',
+        answerType: 'FILE'
       }, {
         key: 'FieldSet',
         canHaveAnswer: false,