react-survey-builder 1.0.8 → 1.0.9

package/lib/form.js

@@ -62,7 +62,7 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
       return backButton || /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
         variant: "secondary",
         href: _this.props.backAction,
-        className: "btn-cancel me-2"
+        className: "btn-cancel"
       }, backName);
     });
     _this.answerData = _this._convert(props.answerData);
@@ -595,8 +595,8 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
         type: "hidden",
         value: this.props.task_id
       })), items, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "btn-toolbar"
-      }, !this.props.hideActions && this.props.backAction && this.handleRenderBack(), !this.props.hideActions && this.handleRenderSubmit()))));
+        className: this.props.buttonClassName ? this.props.buttonClassName : 'btn-toolbar'
+      }, !this.props.hideActions && this.handleRenderSubmit(), !this.props.hideActions && this.props.backAction && this.handleRenderBack()))));
     }
   }]);
   return ReactSurvey;

package/lib/language-provider/index.js

@@ -6,27 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.AppLanguages = void 0;
 var _enUs = _interopRequireDefault(require("./entries/en-us"));
-var _itIt = _interopRequireDefault(require("./entries/it-it"));
-var _viVn = _interopRequireDefault(require("./entries/vi-vn"));
 var AppLanguages = exports.AppLanguages = [{
-  languageId: 'vietnamese',
-  locale: 'vi',
-  name: 'Vietnamese',
-  icon: 'vn'
-}, {
   languageId: 'english',
   locale: 'en',
   name: 'English',
   icon: 'us'
-}, {
-  languageId: 'italian',
-  locale: 'it',
-  name: 'Italiano',
-  icon: 'it'
 }];
 var AppLocale = {
-  en: _enUs["default"],
-  vi: _viVn["default"],
-  it: _itIt["default"]
+  en: _enUs["default"]
 };
 var _default = exports["default"] = AppLocale;

package/lib/language-provider/locales/en-us.json

@@ -2,6 +2,7 @@
 	"display-label": "Display Label",
 	"choose-file": "Choose file",
 	"choose-file-type": "Choose file type",
+	"choose-label-location": "Choose Label Location",
 	"select-file-type": "Select file type",
 	"text-to-display": "Text to display",
 	"link-to": "Link to",

package/lib/survey-elements/index.js

@@ -212,6 +212,10 @@ var TextInput = /*#__PURE__*/function (_React$Component5) {
         props.defaultValue = this.props.defaultValue;
         props.ref = this.inputField;
       }
+      var labelLocation = 'ABOVE';
+      if (this.props.data.labelLocation) {
+        labelLocation = this.props.data.labelLocation;
+      }
       var baseClasses = 'SortableItem rfb-item';
       if (this.props.data.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
@@ -224,12 +228,15 @@ var TextInput = /*#__PURE__*/function (_React$Component5) {
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
         className: "form-group mb-3"
-      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+      }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
         id: props.name
       }, props)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
-        name: props.name,
         htmlFor: props.name
-      }))), props.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+      }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        htmlFor: props.name
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+        id: props.name
+      }, props))), props.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
         muted: true
       }, props.help) : null));
     }
@@ -260,6 +267,10 @@ var EmailInput = /*#__PURE__*/function (_React$Component6) {
         props.defaultValue = this.props.defaultValue;
         props.ref = this.inputField;
       }
+      var labelLocation = 'ABOVE';
+      if (this.props.data.labelLocation) {
+        labelLocation = this.props.data.labelLocation;
+      }
       var baseClasses = 'SortableItem rfb-item';
       if (this.props.data.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
@@ -272,11 +283,15 @@ var EmailInput = /*#__PURE__*/function (_React$Component6) {
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
         className: "form-group mb-3"
-      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+      }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
         id: props.name
       }, props)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: props.name
-      }))), props.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+      }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        htmlFor: props.name
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+        id: props.name
+      }, props))), props.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
         muted: true
       }, props.help) : null));
     }
@@ -317,6 +332,10 @@ var PhoneNumber = /*#__PURE__*/function (_React$Component7) {
         props.defaultValue = this.props.defaultValue;
         props.ref = this.inputField;
       }
+      var labelLocation = 'ABOVE';
+      if (this.props.data.labelLocation) {
+        labelLocation = this.props.data.labelLocation;
+      }
       var baseClasses = 'SortableItem rfb-item';
       if (this.props.data.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
@@ -329,13 +348,22 @@ var PhoneNumber = /*#__PURE__*/function (_React$Component7) {
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
         className: "form-group mb-3"
-      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+      }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
         id: props.name
       }, props, {
         onChange: this.handleChange,
         as: CustomPhoneInput
       })), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        name: props.name,
         htmlFor: props.name
+      }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        name: props.name,
+        htmlFor: props.name
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+        id: props.name
+      }, props, {
+        onChange: this.handleChange,
+        as: CustomPhoneInput
       }))), props.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
         muted: true
       }, props.help) : null));
@@ -369,6 +397,10 @@ var NumberInput = /*#__PURE__*/function (_React$Component8) {
       props.min = this.props.data.minValue;
       props.max = this.props.data.maxValue;
       props.step = this.props.data.step;
+      var labelLocation = 'ABOVE';
+      if (this.props.data.labelLocation) {
+        labelLocation = this.props.data.labelLocation;
+      }
       if (this.props.readOnly) {
         props.disabled = 'disabled';
       }
@@ -381,11 +413,17 @@ var NumberInput = /*#__PURE__*/function (_React$Component8) {
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
         className: "form-group mb-3"
-      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+      }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
         id: props.name
       }, props)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        name: props.name,
         htmlFor: props.name
-      }))), props.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+      }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        name: props.name,
+        htmlFor: props.name
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+        id: props.name
+      }, props))), props.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
         muted: true
       }, props.help) : null));
     }
@@ -417,6 +455,10 @@ var TextArea = /*#__PURE__*/function (_React$Component9) {
         props.defaultValue = this.props.defaultValue;
         props.ref = this.inputField;
       }
+      var labelLocation = 'ABOVE';
+      if (this.props.data.labelLocation) {
+        labelLocation = this.props.data.labelLocation;
+      }
       var baseClasses = 'SortableItem rfb-item';
       if (this.props.data.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
@@ -426,12 +468,19 @@ var TextArea = /*#__PURE__*/function (_React$Component9) {
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
         className: "form-group mb-3"
-      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+      }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
         as: "textarea",
         id: props.name
       }, props)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        name: props.name,
         htmlFor: props.name
-      }))), props.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+      }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        name: props.name,
+        htmlFor: props.name
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+        as: "textarea",
+        id: props.name
+      }, props))), props.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
         muted: true
       }, props.help) : null));
     }
@@ -460,6 +509,10 @@ var Dropdown = /*#__PURE__*/function (_React$Component10) {
         props.defaultValue = this.props.defaultValue;
         props.ref = this.inputField;
       }
+      var labelLocation = 'ABOVE';
+      if (this.props.data.labelLocation) {
+        labelLocation = this.props.data.labelLocation;
+      }
       if (this.props.readOnly) {
         props.disabled = 'disabled';
       }
@@ -472,7 +525,7 @@ var Dropdown = /*#__PURE__*/function (_React$Component10) {
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
         className: "form-group mb-3"
-      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Select, (0, _extends2["default"])({
+      }, labelLocation === "FLOATING" ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Select, (0, _extends2["default"])({
         id: props.name
       }, props), props.placeholder ? /*#__PURE__*/_react["default"].createElement("option", {
         value: ""
@@ -483,7 +536,21 @@ var Dropdown = /*#__PURE__*/function (_React$Component10) {
           key: thisKey
         }, option.text);
       })), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        name: props.name,
         htmlFor: props.name
+      }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        name: props.name,
+        htmlFor: props.name
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Select, (0, _extends2["default"])({
+        id: props.name
+      }, props), props.placeholder ? /*#__PURE__*/_react["default"].createElement("option", {
+        value: ""
+      }, props.placeholder) : null, this.props.data.options.map(function (option) {
+        var thisKey = "preview_".concat(option.key);
+        return /*#__PURE__*/_react["default"].createElement("option", {
+          value: option.value,
+          key: thisKey
+        }, option.text);
       }))), props.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
         muted: true
       }, props.help) : null));

package/lib/survey-elements-edit.js

@@ -72,10 +72,10 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
     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, '');
-      var this_element = this.state.element;
-      this_element[property] = html;
+      var thisElement = this.state.element;
+      thisElement[property] = html;
       this.setState({
-        element: this_element,
+        element: thisElement,
         dirty: true
       });
     }
@@ -130,19 +130,19 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
       if (this.state.dirty) {
         this.props.element.dirty = true;
       }
-      var this_checked = this.props.element.hasOwnProperty('required') ? this.props.element.required : false;
-      var this_default_checked = this.props.element.hasOwnProperty('defaultChecked') ? this.props.element.defaultChecked : false;
-      var this_read_only = this.props.element.hasOwnProperty('readOnly') ? this.props.element.readOnly : false;
-      var this_default_today = this.props.element.hasOwnProperty('defaultToday') ? this.props.element.defaultToday : false;
-      var this_show_time_select = this.props.element.hasOwnProperty('showTimeSelect') ? this.props.element.showTimeSelect : false;
-      var this_show_time_select_only = this.props.element.hasOwnProperty('showTimeSelectOnly') ? this.props.element.showTimeSelectOnly : false;
-      var this_show_time_input = this.props.element.hasOwnProperty('showTimeInput') ? this.props.element.showTimeInput : false;
-      var this_checked_inline = this.props.element.hasOwnProperty('inline') ? this.props.element.inline : false;
+      var thisChecked = this.props.element.hasOwnProperty('required') ? this.props.element.required : false;
+      var thisDefaultChecked = this.props.element.hasOwnProperty('defaultChecked') ? this.props.element.defaultChecked : false;
+      var thisReadOnly = this.props.element.hasOwnProperty('readOnly') ? this.props.element.readOnly : false;
+      var thisDefaultToday = this.props.element.hasOwnProperty('defaultToday') ? this.props.element.defaultToday : false;
+      var thisShowTimeSelect = this.props.element.hasOwnProperty('showTimeSelect') ? this.props.element.showTimeSelect : false;
+      var thisShowTimeSelectOnly = this.props.element.hasOwnProperty('showTimeSelectOnly') ? this.props.element.showTimeSelectOnly : false;
+      var thisShowTimeInput = this.props.element.hasOwnProperty('showTimeInput') ? this.props.element.showTimeInput : false;
+      var thisCheckedInline = this.props.element.hasOwnProperty('inline') ? this.props.element.inline : false;
       var this_checked_bold = this.props.element.hasOwnProperty('bold') ? this.props.element.bold : false;
-      var this_checked_italic = this.props.element.hasOwnProperty('italic') ? this.props.element.italic : false;
-      var this_checked_center = this.props.element.hasOwnProperty('center') ? this.props.element.center : false;
-      var this_checked_page_break = this.props.element.hasOwnProperty('pageBreakBefore') ? this.props.element.pageBreakBefore : false;
-      var this_checked_alternate_form = this.props.element.hasOwnProperty('alternateForm') ? this.props.element.alternateForm : false;
+      var thisCheckedItalic = this.props.element.hasOwnProperty('italic') ? this.props.element.italic : false;
+      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 _this$props$element = this.props.element,
         canHavePageBreakBefore = _this$props$element.canHavePageBreakBefore,
         canHaveAlternateForm = _this$props$element.canHaveAlternateForm,
@@ -150,9 +150,9 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
         canHaveOptionCorrect = _this$props$element.canHaveOptionCorrect,
         canHaveOptionValue = _this$props$element.canHaveOptionValue;
       var canHaveImageSize = this.state.element.element === 'Image' || this.state.element.element === 'Camera';
-      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({
+      var thisFiles = this.props.files.length ? this.props.files : [];
+      if (thisFiles.length < 1 || thisFiles.length > 0 && thisFiles[0].id !== '') {
+        thisFiles.unshift({
           id: '',
           file_name: ''
         });
@@ -192,11 +192,11 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
         defaultValue: this.props.element.filePath,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'filePath', 'value')
-      }, this_files.map(function (file) {
-        var this_key = "file_".concat(file.id);
+      }, thisFiles.map(function (file) {
+        var thisKey = "file_".concat(file.id);
         return /*#__PURE__*/_react["default"].createElement("option", {
           value: file.id,
-          key: this_key
+          key: thisKey
         }, file.file_name);
       }))), this.props.element.hasOwnProperty('href') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactTextareaAutosize["default"], {
         type: "text",
@@ -218,7 +218,7 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
           id: "required"
         }),
         type: "checkbox",
-        checked: this_checked,
+        checked: thisChecked,
         value: true,
         onChange: this.editElementProp.bind(this, 'required', 'checked')
       }), this.props.element.hasOwnProperty('readOnly') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, {
@@ -227,7 +227,7 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
           id: "read-only"
         }),
         type: "checkbox",
-        checked: this_read_only,
+        checked: thisReadOnly,
         value: true,
         onChange: this.editElementProp.bind(this, 'readOnly', 'checked')
       }), this.props.element.hasOwnProperty('defaultToday') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, {
@@ -236,7 +236,7 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
           id: "default-to-today"
         }),
         type: "checkbox",
-        checked: this_default_today,
+        checked: thisDefaultToday,
         value: true,
         onChange: this.editElementProp.bind(this, 'defaultToday', 'checked')
       }), ['Checkboxes', 'Checkbox'].indexOf(this.state.element.element) !== -1 && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, {
@@ -245,7 +245,7 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
           id: "default-checked"
         }),
         type: "checkbox",
-        checked: this_default_checked,
+        checked: thisDefaultChecked,
         value: true,
         onChange: this.editElementProp.bind(this, 'defaultChecked', 'checked')
       }), (this.state.element.element === 'RadioButtons' || this.state.element.element === 'Checkboxes') && canHaveDisplayHorizontal && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, {
@@ -254,7 +254,7 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
           id: "display-horizontal"
         }),
         type: "checkbox",
-        checked: this_checked_inline,
+        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"], {
@@ -281,7 +281,7 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
           id: "center"
         }),
         type: "checkbox",
-        checked: this_checked_center,
+        checked: thisCheckedCenter,
         value: true,
         onChange: this.editElementProp.bind(this, 'center', 'checked')
       })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Row, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
@@ -351,7 +351,7 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
           id: "page-break-before-element"
         }),
         type: "checkbox",
-        checked: this_checked_page_break,
+        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"], {
@@ -362,7 +362,7 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
           id: "display-on-alternate-signature-page"
         }),
         type: "checkbox",
-        checked: this_checked_alternate_form,
+        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", {
@@ -452,7 +452,7 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
           id: "italic"
         }),
         type: "checkbox",
-        checked: this_checked_italic,
+        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, {
@@ -475,7 +475,20 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
         defaultValue: this.props.element.customName,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'customName', 'value')
-      })), this.props.element.showHelp && /*#__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, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+        htmlFor: "labelLocation"
+      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+        id: "choose-label-location"
+      }), ":"), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Select, {
+        id: "labelLocation",
+        defaultValue: this.props.element.labelLocation,
+        onBlur: this.updateElement.bind(this),
+        onChange: this.editElementProp.bind(this, 'labelLocation', 'value')
+      }, /*#__PURE__*/_react["default"].createElement("option", {
+        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, {
         htmlFor: "help"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "help-label"

package/lib/toolbar.js

@@ -165,7 +165,8 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         showHelp: true,
         options: [],
         placeholder: 'Select One',
-        hideRequiredAlert: true
+        hideRequiredAlert: true,
+        showLabelLocationPicker: true
       }, {
         key: 'Tags',
         canHaveAnswer: true,
@@ -247,7 +248,8 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         placeholder: intl.formatMessage({
           id: 'place-holder-label'
         }),
-        hideRequiredAlert: true
+        hideRequiredAlert: true,
+        showLabelLocationPicker: true
       }, {
         key: 'EmailInput',
         canHaveAnswer: true,
@@ -265,7 +267,8 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         placeholder: intl.formatMessage({
           id: 'place-holder-email'
         }),
-        hideRequiredAlert: true
+        hideRequiredAlert: true,
+        showLabelLocationPicker: true
       }, {
         key: 'NumberInput',
         canHaveAnswer: true,
@@ -283,7 +286,8 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         step: 1,
         minValue: 0,
         maxValue: 5,
-        hideRequiredAlert: true
+        hideRequiredAlert: true,
+        showLabelLocationPicker: true
       }, {
         key: 'PhoneNumber',
         canHaveAnswer: true,
@@ -298,7 +302,8 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         showCustomName: true,
         showDescription: true,
         showHelp: true,
-        hideRequiredAlert: true
+        hideRequiredAlert: true,
+        showLabelLocationPicker: true
       }, {
         key: 'TextArea',
         canHaveAnswer: true,
@@ -313,7 +318,8 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         showCustomName: true,
         showDescription: true,
         showHelp: true,
-        hideRequiredAlert: true
+        hideRequiredAlert: true,
+        showLabelLocationPicker: true
       }, {
         key: 'FieldSet',
         canHaveAnswer: false,
@@ -555,6 +561,8 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
       }
       elementOptions.showCustomName = item.showCustomName;
       elementOptions.customName = item.customName;
+      elementOptions.showLabelLocationPicker = item.showLabelLocationPicker;
+      elementOptions.labelLocation = item.labelLocation;
       elementOptions.showHelp = item.showHelp;
       elementOptions.help = item.help;
       elementOptions.hideRequiredAlert = item.hideRequiredAlert;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-survey-builder",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "A complete survey builder for react.",
   "main": "lib/index.js",
   "types": "types/index.d.ts",

package/types/index.d.ts

@@ -28,6 +28,9 @@ type BaseElement = {
     | "Range"
     | "Camera";
   showDescription?: boolean;
+  showLabelLocationPicker?: boolean;
+  showHelp?: boolean;
+	hideRequiredAlert?: boolean;
   required: boolean;
   canHaveAlternateForm: boolean;
   canHaveDisplayHorizontal: boolean;
@@ -164,6 +167,9 @@ export interface SurveyGeneratorProps {
   // eslint-disable-next-line no-undef
   variables?: Record<any, any>;
   submitButton?: JSX.Element;
+  backButton?: JSX.Element;
+  buttons?: JSX.Element;
+  buttonClassName?: string;
 }
 
 export class ReactSurveyGenerator extends React.Component<SurveyGeneratorProps> {}

package/lib/language-provider/entries/it-it.js

@@ -1,16 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _itIt = _interopRequireDefault(require("../locales/it-it.json"));
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var ItLang = {
-  messages: _objectSpread({}, _itIt["default"]),
-  locale: 'it-IT'
-};
-var _default = exports["default"] = ItLang;

package/lib/language-provider/entries/vi-vn.js

@@ -1,16 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _viVn = _interopRequireDefault(require("../locales/vi-vn.json"));
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var VnLang = {
-  messages: _objectSpread({}, _viVn["default"]),
-  locale: 'vi-VN'
-};
-var _default = exports["default"] = VnLang;