react-survey-builder 1.0.16 → 1.0.18

package/lib/survey-elements/myxss.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.myContentXSS = exports["default"] = void 0;
 var _xss = _interopRequireDefault(require("xss"));
 var myxss = new _xss["default"].FilterXSS({
   whiteList: {
@@ -26,4 +26,71 @@ var myxss = new _xss["default"].FilterXSS({
     ins: []
   }
 });
+var myContentXSS = exports.myContentXSS = new _xss["default"].FilterXSS({
+  whiteList: {
+    a: ['href', 'title', 'target', 'style', 'class'],
+    abbr: ["title"],
+    address: [],
+    area: ["shape", "coords", "href", "alt"],
+    article: [],
+    aside: [],
+    b: [],
+    big: [],
+    blockquote: ["cite"],
+    br: [],
+    caption: [],
+    center: [],
+    cite: [],
+    code: [],
+    col: ["align", "valign", "span", "width"],
+    colgroup: ["align", "valign", "span", "width"],
+    dd: [],
+    del: ["datetime"],
+    details: ["open"],
+    div: ['style', 'class'],
+    dl: ['style', 'class'],
+    dt: ['style', 'class'],
+    em: [],
+    figcaption: [],
+    figure: [],
+    font: ["color", "size", "face"],
+    footer: [],
+    h1: ['style', 'class'],
+    h2: ['style', 'class'],
+    h3: ['style', 'class'],
+    h4: ['style', 'class'],
+    h5: ['style', 'class'],
+    h6: ['style', 'class'],
+    header: [],
+    hr: [],
+    i: [],
+    img: ["src", "alt", "title", "width", "height", "loading"],
+    ins: ["datetime"],
+    li: ['style', 'class'],
+    mark: [],
+    nav: [],
+    ol: ['style', 'class'],
+    p: ['style', 'class'],
+    pre: [],
+    s: [],
+    section: [],
+    small: [],
+    span: ['style', 'class'],
+    strike: [],
+    strong: [],
+    sub: [],
+    summary: [],
+    sup: [],
+    table: ["width", "border", "align", "valign"],
+    tbody: ["align", "valign"],
+    td: ["width", "rowspan", "colspan", "align", "valign"],
+    tfoot: ["align", "valign"],
+    th: ["width", "rowspan", "colspan", "align", "valign"],
+    thead: ["align", "valign"],
+    tr: ["rowspan", "align", "valign"],
+    tt: [],
+    u: [],
+    ul: ['style', 'class']
+  }
+});
 var _default = exports["default"] = myxss;

package/lib/survey-elements-edit.js

@@ -23,7 +23,23 @@ var _fa = require("react-icons/fa");
 var _reactBootstrap = require("react-bootstrap");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-var toolbar = {
+var bodyToolbar = {
+  options: ['inline', 'blockType', 'list', 'textAlign', 'fontSize', 'link', 'remove', 'history'],
+  inline: {
+    inDropdown: false,
+    className: undefined,
+    options: ['bold', 'italic', 'underline', 'strikethrough', 'monospace', 'superscript', 'subscript']
+  }
+};
+var headerToolbar = {
+  options: ['inline', 'list', 'textAlign', 'fontSize', 'link', 'history'],
+  inline: {
+    inDropdown: false,
+    className: undefined,
+    options: ['bold', 'italic', 'underline', 'superscript', 'subscript']
+  }
+};
+var labelToolbar = {
   options: ['inline', 'list', 'textAlign', 'fontSize', 'link', 'history'],
   inline: {
     inDropdown: false,
@@ -40,7 +56,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;
@@ -71,7 +87,8 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
     key: "onEditorStateChange",
     value: function onEditorStateChange(index, property, editorContent) {
       // const html = draftToHtml(convertToRaw(editorContent.getCurrentContent())).replace(/<p>/g, '<div>').replace(/<\/p>/g, '</div>');
-      var html = (0, _draftjsToHtml["default"])((0, _draftJs.convertToRaw)(editorContent.getCurrentContent())).replace(/<p>/g, '').replace(/<\/p>/g, '').replace(/&nbsp;/g, ' ').replace(/(?:\r\n|\r|\n)/g, '');
+      // const html = draftToHtml(convertToRaw(editorContent.getCurrentContent())).replace(/<p>/g, '').replace(/<\/p>/g, '').replace(/&nbsp;/g, ' ').replace(/(?:\r\n|\r|\n)/g, '');
+      var html = (0, _draftjsToHtml["default"])((0, _draftJs.convertToRaw)(editorContent.getCurrentContent())).replace(/&nbsp;/g, ' ').replace(/(?:\r\n|\r|\n)/g, '');
       var thisElement = this.state.element;
       thisElement[property] = html;
       this.setState({
@@ -143,12 +160,15 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
       var thisCheckedCenter = this.props.element.hasOwnProperty('center') ? this.props.element.center : false;
       var thisCheckedPageBreak = this.props.element.hasOwnProperty('pageBreakBefore') ? this.props.element.pageBreakBefore : false;
       var thisCheckedAlternateForm = this.props.element.hasOwnProperty('alternateForm') ? this.props.element.alternateForm : false;
+      var thisCheckedHideLabel = this.props.element.hasOwnProperty('hideLabel') ? this.props.element.hideLabel : false;
       var _this$props$element = this.props.element,
         canHavePageBreakBefore = _this$props$element.canHavePageBreakBefore,
         canHaveAlternateForm = _this$props$element.canHaveAlternateForm,
         canHaveDisplayHorizontal = _this$props$element.canHaveDisplayHorizontal,
         canHaveOptionCorrect = _this$props$element.canHaveOptionCorrect,
-        canHaveOptionValue = _this$props$element.canHaveOptionValue;
+        canHaveOptionValue = _this$props$element.canHaveOptionValue,
+        _this$props$element$c = _this$props$element.canHideLabel,
+        canHideLabel = _this$props$element$c === void 0 ? false : _this$props$element$c;
       var canHaveImageSize = this.state.element.element === 'Image' || this.state.element.element === 'Camera';
       var thisFiles = this.props.files.length ? this.props.files : [];
       if (thisFiles.length < 1 || thisFiles.length > 0 && thisFiles[0].id !== '') {
@@ -175,15 +195,58 @@ 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') && this.state.element.element === 'Header' && /*#__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,
+        toolbar: headerToolbar,
+        defaultEditorState: editorState,
+        onBlur: this.updateElement.bind(this),
+        onEditorStateChange: this.onEditorStateChange.bind(this, 0, 'content'),
+        stripPastedStyles: true
+      })), this.props.element.hasOwnProperty('content') && this.state.element.element === '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: "text-to-display"
+      }), ":"), /*#__PURE__*/_react["default"].createElement(_reactDraftWysiwyg.Editor, {
+        toolbar: labelToolbar,
         defaultEditorState: editorState,
         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('content') && this.state.element.element === 'Paragraph' && /*#__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: labelToolbar,
+        defaultEditorState: editorState,
+        onBlur: this.updateElement.bind(this),
+        onEditorStateChange: this.onEditorStateChange.bind(this, 0, 'content'),
+        stripPastedStyles: true
+      })), this.props.element.hasOwnProperty('content') && this.state.element.element === 'ContentBody' && /*#__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: bodyToolbar,
+        defaultEditorState: editorState,
+        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, {
+        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 +261,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, {
-        toolbar: toolbar,
+      }), ":"), /*#__PURE__*/_react["default"].createElement(_reactDraftWysiwyg.Editor, {
+        toolbar: labelToolbar,
         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 +333,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 +345,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 +358,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 +374,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 +437,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 +452,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 +467,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"] && this.props.element.hasOwnProperty('bold') && this.props.element.hasOwnProperty('italic') && /*#__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 +573,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 +581,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 +623,66 @@ 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"))), canHideLabel && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-5"
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+        className: "fw-bold"
+      }, "Hide Label:"), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, {
+        id: "hide-label",
+        label: "Hide Label",
+        type: "checkbox",
+        checked: thisCheckedHideLabel,
+        value: true,
+        onChange: this.editElementProp.bind(this, 'hideLabel', 'checked')
+      })), 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 +702,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,