react-survey-builder 1.0.95 → 1.0.96

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/README.md +2 -0
  2. package/dist/bundle.js +8 -8
  3. package/dist/src_survey-elements-edit_jsx.bundle.js +1 -1
  4. package/lib/form-fields.js +19 -4
  5. package/lib/form-steps.js +19 -4
  6. package/lib/form.js +19 -4
  7. package/lib/index.js +3 -0
  8. package/lib/sortable-form-elements.js +2 -0
  9. package/lib/survey-elements/header-bar.js +1 -1
  10. package/lib/survey-elements/index.js +165 -70
  11. package/lib/survey-elements-edit.js +17 -2
  12. package/lib/toolbar.js +24 -1
  13. package/package.json +1 -1
  14. package/types/index.d.ts +2 -0
package/dist/src_survey-elements-edit_jsx.bundle.js CHANGED
@@ -25,7 +25,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
25
25
  \**************************************/
26
26
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
27
27
 
28
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_textarea_autosize__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! react-textarea-autosize */ \"./node_modules/react-textarea-autosize/dist/react-textarea-autosize.browser.development.esm.js\");\n/* harmony import */ var draft_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! draft-js */ \"./node_modules/draft-js/lib/Draft.js\");\n/* harmony import */ var draft_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(draft_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var draftjs_to_html__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! draftjs-to-html */ \"./node_modules/draftjs-to-html/lib/draftjs-to-html.js\");\n/* harmony import */ var draftjs_to_html__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(draftjs_to_html__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _dynamic_option_list__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./dynamic-option-list */ \"./src/dynamic-option-list.jsx\");\n/* harmony import */ var _stores_requests__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./stores/requests */ \"./src/stores/requests.js\");\n/* harmony import */ var react_icons_fa__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! react-icons/fa */ \"./node_modules/react-icons/fa/index.mjs\");\n/* harmony import */ var react_bootstrap__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! react-bootstrap */ \"./node_modules/react-bootstrap/esm/Form.js\");\n/* harmony import */ var react_bootstrap__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! react-bootstrap */ \"./node_modules/react-bootstrap/esm/Row.js\");\n/* harmony import */ var react_bootstrap__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! react-bootstrap */ \"./node_modules/react-bootstrap/esm/Col.js\");\n/* harmony import */ var react_bootstrap__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! react-bootstrap */ \"./node_modules/react-bootstrap/esm/Button.js\");\n/* harmony import */ var react_simple_wysiwyg__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react-simple-wysiwyg */ \"./node_modules/react-simple-wysiwyg/lib/index.es.mjs\");\n/* harmony import */ var _UUID__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./UUID */ \"./src/UUID.js\");\n/* harmony import */ var _UUID__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_UUID__WEBPACK_IMPORTED_MODULE_6__);\n/* harmony import */ var _utils_objectUtils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./utils/objectUtils */ \"./src/utils/objectUtils.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nvar _excluded = [\"containerProps\", \"onChange\", \"onBlur\", \"value\", \"name\"];\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\nfunction 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; }\nfunction _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) { _defineProperty(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; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }\n\n\n\n\n\n\n\n\n\n\n\nvar CustomWysiwygInput = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRef(function (_ref, ref) {\n var containerProps = _ref.containerProps,\n onChange = _ref.onChange,\n onBlur = _ref.onBlur,\n value = _ref.value,\n name = _ref.name,\n otherProps = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_simple_wysiwyg__WEBPACK_IMPORTED_MODULE_5__[\"default\"], _extends({}, otherProps, {\n onBlur: onBlur,\n value: value,\n name: name,\n onChange: onChange,\n containerProps: containerProps\n }));\n});\nvar SurveyElementsEdit = function SurveyElementsEdit(_ref2) {\n var _element$options;\n var element = _ref2.element,\n setElement = _ref2.setElement,\n _ref2$files = _ref2.files,\n files = _ref2$files === void 0 ? [] : _ref2$files,\n _ref2$showCorrectColu = _ref2.showCorrectColumn,\n showCorrectColumn = _ref2$showCorrectColu === void 0 ? false : _ref2$showCorrectColu,\n _ref2$showDescription = _ref2.showDescription,\n showDescription = _ref2$showDescription === void 0 ? false : _ref2$showDescription,\n manualEditModeOff = _ref2.manualEditModeOff,\n updateElement = _ref2.updateElement;\n var _React$useState = react__WEBPACK_IMPORTED_MODULE_0___default().useState(false),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n dirty = _React$useState2[0],\n setDirty = _React$useState2[1];\n var toggleRequired = function toggleRequired() {\n // const thisElement = isObjectNotEmpty(element) ? { ...element } : {};\n };\n var editElementProp = function editElementProp(elementProperty, targetProperty, e) {\n // elemProperty could be content or label\n // targProperty could be value or checked\n var thisElement = (0,_utils_objectUtils__WEBPACK_IMPORTED_MODULE_7__.isObjectNotEmpty)(element) ? _objectSpread({}, element) : {};\n thisElement[elementProperty] = e.target[targetProperty];\n setElement(thisElement);\n setDirty(true);\n if (targetProperty === 'checked') {\n onUpdateElement();\n }\n };\n var onEditorStateChange = function onEditorStateChange(index, property, editorContent) {\n var html = draftjs_to_html__WEBPACK_IMPORTED_MODULE_2___default()((0,draft_js__WEBPACK_IMPORTED_MODULE_1__.convertToRaw)(editorContent.getCurrentContent())).replace(/&nbsp;/g, ' ').replace(/(?:\\r\\n|\\r|\\n)/g, '');\n var thisElement = (0,_utils_objectUtils__WEBPACK_IMPORTED_MODULE_7__.isObjectNotEmpty)(element) ? _objectSpread({}, element) : {};\n thisElement[property] = html;\n setElement(thisElement);\n setDirty(true);\n };\n var onUpdateElement = function onUpdateElement() {\n var thisElement = (0,_utils_objectUtils__WEBPACK_IMPORTED_MODULE_7__.isObjectNotEmpty)(element) ? _objectSpread({}, element) : {};\n // to prevent ajax calls with no change\n if (dirty) {\n updateElement(thisElement);\n setDirty(false);\n }\n };\n var convertFromHTML = function convertFromHTML(content) {\n var newContent = (0,draft_js__WEBPACK_IMPORTED_MODULE_1__.convertFromHTML)(content);\n if (!newContent.contentBlocks || !newContent.contentBlocks.length) {\n // to prevent crash when no contents in editor\n return draft_js__WEBPACK_IMPORTED_MODULE_1__.EditorState.createEmpty();\n }\n var contentState = draft_js__WEBPACK_IMPORTED_MODULE_1__.ContentState.createFromBlockArray(newContent);\n return draft_js__WEBPACK_IMPORTED_MODULE_1__.EditorState.createWithContent(contentState);\n };\n var addOptions = function addOptions() {\n var optionsApiUrl = document.getElementById('optionsApiUrl').value;\n if (optionsApiUrl) {\n (0,_stores_requests__WEBPACK_IMPORTED_MODULE_4__.get)(optionsApiUrl).then(function (data) {\n var options = [];\n data.forEach(function (dataOption) {\n // eslint-disable-next-line no-param-reassign\n dataOption.key = _UUID__WEBPACK_IMPORTED_MODULE_6___default().uuid();\n options.push(dataOption);\n });\n var thisElement = (0,_utils_objectUtils__WEBPACK_IMPORTED_MODULE_7__.isObjectNotEmpty)(element) ? _objectSpread({}, element) : {};\n thisElement.options = options;\n setElement(thisElement);\n setDirty(true);\n });\n }\n };\n\n // React.useEffect(() => {\n // \tif (dirty) {\n // \t\tconst thisElement = isObjectNotEmpty(element) ? { ...element, dirty: true } : { dirty: true };\n\n // \t\tupdateElement(thisElement);\n // \t}\n // }, [dirty, element]);\n\n var thisRequiredChecked = element.hasOwnProperty('required') ? element.required : false;\n var thisDefaultChecked = element.hasOwnProperty('defaultChecked') ? element.defaultChecked : false;\n var thisReadOnly = element.hasOwnProperty('readOnly') ? element.readOnly : false;\n var thisDefaultToday = element.hasOwnProperty('defaultToday') ? element.defaultToday : false;\n var thisCheckedInline = element.hasOwnProperty('inline') ? element.inline : false;\n var thisCheckedBold = element.hasOwnProperty('bold') ? element.bold : false;\n var thisCheckedItalic = element.hasOwnProperty('italic') ? element.italic : false;\n var thisCheckedCenter = element.hasOwnProperty('center') ? element.center : false;\n var thisCheckedPageBreak = element.hasOwnProperty('pageBreakBefore') ? element.pageBreakBefore : false;\n var thisCheckedAlternateForm = element.hasOwnProperty('alternateForm') ? element.alternateForm : false;\n var thisCheckedHideLabel = element.hasOwnProperty('hideLabel') ? element.hideLabel : false;\n var thisCheckedConditional = element.hasOwnProperty('conditional') ? element.conditional : false;\n var canHaveAnswer = ['NumberInput', 'EmailInput', 'TextInput', 'PhoneNumber', 'TextArea', 'DatePicker', 'Dropdown', 'Tags', 'Checkboxes', 'Checkbox', 'RadioButtons', 'Rating', 'Range'].indexOf(element.element) !== -1;\n var canHaveOptionValue = ['Dropdown', 'Tags', 'Checkboxes', 'RadioButtons'].indexOf(element.element) !== -1;\n var canHaveOptionCorrect = canHaveAnswer && canHaveOptionValue;\n var thisFiles = (0,_utils_objectUtils__WEBPACK_IMPORTED_MODULE_7__.isListNotEmpty)(files) ? _toConsumableArray(files) : [];\n if (thisFiles.length < 1 || thisFiles.length > 0 && thisFiles[0].id !== '') {\n thisFiles.unshift({\n id: '',\n file_name: ''\n });\n }\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"clearfix\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"h4\", {\n className: \"float-start\"\n }, element.text), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_icons_fa__WEBPACK_IMPORTED_MODULE_8__.FaTimes, {\n className: \"float-end dismiss-edit\",\n onClick: manualEditModeOff\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"clearfix\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\"\n }, \"Field Id: \", element.fieldName)), element.hasOwnProperty('content') && (element.element === 'Header' || element.element === 'Label' || element.element === 'Paragraph' || element.element === 'ContentBody') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\"\n }, \"Text to display:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n type: \"text\",\n id: \"content\",\n name: \"content\",\n as: CustomWysiwygInput,\n value: element.content,\n defaultValue: element.content,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('content', 'value', e);\n },\n containerProps: {\n style: {\n height: '200px',\n width: '100%',\n resize: 'vertical'\n }\n }\n })), element.hasOwnProperty('filePath') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"fileSelect\"\n }, \"Choose file:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Select, {\n id: \"fileSelect\",\n defaultValue: element.filePath,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('filePath', 'value', e);\n }\n }, thisFiles.map(function (file) {\n var thisKey = \"file_\".concat(file.id);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"option\", {\n value: file.id,\n key: thisKey\n }, file.file_name);\n }))), element.hasOwnProperty('href') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"href\"\n }, \"Link to:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n id: \"href\",\n type: \"text\",\n defaultValue: element.href,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('href', 'value', e);\n }\n })), element.hasOwnProperty('label') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\"\n }, \"Display Label:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n type: \"text\",\n id: \"label\",\n name: \"label\",\n as: CustomWysiwygInput,\n value: element.label,\n defaultValue: element.label,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('label', 'value', e);\n },\n containerProps: {\n style: {\n height: '200px',\n width: '100%',\n resize: 'vertical'\n }\n }\n })), (element.hasOwnProperty('required') || element.hasOwnProperty('readOnly') || element.hasOwnProperty('defaultToday') || ['Checkboxes', 'Checkbox'].indexOf(element.element) !== -1 || (element.element === 'RadioButtons' || element.element === 'Checkboxes') && element.hasOwnProperty('inline')) && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\"\n }, \"Field Properties:\"), element.hasOwnProperty('required') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Check, {\n id: \"is-required\",\n label: \"Required\",\n type: \"checkbox\",\n checked: thisRequiredChecked,\n onBlur: onUpdateElement,\n value: true,\n onChange: function onChange(e) {\n editElementProp('required', 'checked', e);\n }\n }), element.hasOwnProperty('readOnly') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Check, {\n id: \"is-read-only\",\n label: \"Read Only\",\n type: \"checkbox\",\n checked: thisReadOnly,\n value: true,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('readOnly', 'checked', e);\n }\n }), element.hasOwnProperty('defaultToday') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Check, {\n id: \"is-default-to-today\",\n label: \"Default to Today\",\n type: \"checkbox\",\n checked: thisDefaultToday,\n value: true,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('defaultToday', 'checked', e);\n }\n }), ['Checkboxes', 'Checkbox'].indexOf(element.element) !== -1 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Check, {\n id: \"default-checked\",\n label: \"Default Checked\",\n type: \"checkbox\",\n checked: thisDefaultChecked,\n value: true,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('defaultChecked', 'checked', e);\n }\n }), (element.element === 'RadioButtons' || element.element === 'Checkboxes') && element.hasOwnProperty('inline') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Check, {\n id: \"display-horizontal\",\n label: \"Display Horizontal\",\n type: \"checkbox\",\n checked: thisCheckedInline,\n value: true,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('inline', 'checked', e);\n }\n })), element.element === 'Checkbox' && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\"\n }, \"Checkbox Label Text:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n type: \"text\",\n id: \"boxLabel\",\n name: \"boxLabel\",\n as: CustomWysiwygInput,\n value: element.boxLabel,\n defaultValue: element.boxLabel,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('boxLabel', 'value', e);\n },\n containerProps: {\n style: {\n height: '200px',\n width: '100%',\n resize: 'vertical'\n }\n }\n })), element.hasOwnProperty('src') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"srcInput\"\n }, \"Link to:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n id: \"srcInput\",\n type: \"text\",\n defaultValue: element.src,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('src', 'value', e);\n }\n })), (element.element === 'Image' || element.element === 'Camera') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_10__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_11__[\"default\"], {\n sm: 3\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"do-center\"\n }, \"Alignment:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Check, {\n id: \"do-center\",\n label: \"Center\",\n type: \"checkbox\",\n checked: thisCheckedCenter,\n value: true,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('center', 'checked', e);\n }\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_11__[\"default\"], {\n sm: 3\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"elementWidth\"\n }, \"Width:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n id: \"elementWidth\",\n type: \"number\",\n defaultValue: element.width,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('width', 'value', e);\n }\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_11__[\"default\"], {\n sm: 3\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"elementHeight\"\n }, \"Height:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n id: \"elementHeight\",\n type: \"number\",\n defaultValue: element.height,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('height', 'value', e);\n }\n })))), element.element === 'FileUpload' && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"fileType\"\n }, \"Choose file type:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Select, {\n id: \"fileType\",\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('fileType', 'value', e);\n }\n }, [{\n type: 'image, application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.presentation, video/mp4,video/x-m4v,video/*',\n typeName: 'All File Type'\n }, {\n type: 'image',\n typeName: 'Image'\n }, {\n type: 'application/pdf',\n typeName: 'PDF'\n }, {\n type: 'application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document',\n typeName: 'Word'\n }, {\n type: 'application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',\n typeName: 'Excel'\n }, {\n type: 'application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.presentation',\n typeName: 'Powerpoint'\n }, {\n type: 'video/mp4,video/x-m4v,video/*',\n typeName: 'Videos'\n }].map(function (file, index) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"option\", {\n value: file.type,\n key: index\n }, file.typeName);\n }))), element.hasOwnProperty('pageBreakBefore') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\"\n }, \"Print options:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Check, {\n id: \"page-break-before-element\",\n label: \"Page Break Before Element\",\n type: \"checkbox\",\n checked: thisCheckedPageBreak,\n value: true,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('pageBreakBefore', 'checked', e);\n }\n })), element.hasOwnProperty('alternateForm') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\"\n }, \"Alternate/Signature Page:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Check, {\n id: \"display-on-alternate\",\n label: \"Display on alternate/signature Page\",\n type: \"checkbox\",\n checked: thisCheckedAlternateForm,\n value: true,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('alternateForm', 'checked', e);\n }\n })), element.hasOwnProperty('step') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"form-group-range\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"rangeStep\"\n }, \"Step:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n id: \"rangeStep\",\n type: \"number\",\n defaultValue: element.step,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('step', 'value', e);\n }\n }))), element.hasOwnProperty('minValue') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"form-group-range\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"rangeMin\"\n }, \"Min:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n id: \"rangeMin\",\n type: \"number\",\n defaultValue: element.minValue,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('minValue', 'value', e);\n }\n }))), element.hasOwnProperty('minLabel') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"form-group-range\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"rangeMin\"\n }, \"Minimum Value Label:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n type: \"text\",\n defaultValue: element.minLabel,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('minLabel', 'value', e);\n }\n }))), element.hasOwnProperty('maxValue') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"form-group-range\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"rangeMax\"\n }, \"Max:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n id: \"rangeMax\",\n type: \"number\",\n defaultValue: element.maxValue,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('maxValue', 'value', e);\n }\n }))), element.hasOwnProperty('maxLabel') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"form-group-range\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"rangeMax\"\n }, \"Maximum Value Label:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n type: \"text\",\n defaultValue: element.maxLabel,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('maxLabel', 'value', e);\n }\n }))), element.hasOwnProperty('defaultValue') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"form-group-range\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"defaultSelected\"\n }, \"Default Selected:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n id: \"defaultSelected\",\n type: \"number\",\n defaultValue: element.defaultValue,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('defaultValue', 'value', e);\n }\n }))), element.hasOwnProperty('static') && element[\"static\"] && element.hasOwnProperty('bold') && element.hasOwnProperty('italic') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\"\n }, \"Text Style:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Check, {\n id: \"do-bold\",\n inline: true,\n label: \"Bold\",\n type: \"checkbox\",\n checked: thisCheckedBold,\n value: true,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('bold', 'checked', e);\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Check, {\n id: \"do-italic\",\n inline: true,\n label: \"Italic\",\n type: \"checkbox\",\n checked: thisCheckedItalic,\n value: true,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('italic', 'checked', e);\n }\n })), element.hasOwnProperty('placeholder') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"placeholder\"\n }, \"Placeholder:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n type: \"text\",\n id: \"placeholder\",\n defaultValue: element.placeholder,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('placeholder', 'value', e);\n }\n })), element.hasOwnProperty('customName') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"customName\"\n }, \"A Name To Give This Input That Will Show Up In Data Retrieval:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n type: \"text\",\n id: \"customName\",\n defaultValue: element.customName,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('customName', 'value', e);\n }\n })), element.hasOwnProperty('labelLocation') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"labelLocation\"\n }, \"Choose Label Location:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Select, {\n id: \"labelLocation\",\n defaultValue: element.labelLocation,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('labelLocation', 'value', e);\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"option\", {\n value: \"ABOVE\"\n }, \"Above Form Field\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"option\", {\n value: \"FLOATING\"\n }, \"Floating Inside Form Field\"))), element.hasOwnProperty('hideLabel') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\"\n }, \"Hide Label:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Check, {\n id: \"hide-label\",\n label: \"Hide Label\",\n type: \"checkbox\",\n checked: thisCheckedHideLabel,\n value: true,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('hideLabel', 'checked', e);\n }\n })), element.hasOwnProperty('rows') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"form-group-range\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"rows\"\n }, \"Rows:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n id: \"rows\",\n type: \"number\",\n defaultValue: element.rows,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('rows', 'value', e);\n }\n }))), element.hasOwnProperty('conditional') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\"\n }, \"Step is Conditional and Display is Dependent on Answers to another Survey Block:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Check, {\n id: \"conditional\",\n label: \"Conditional\",\n type: \"checkbox\",\n checked: thisCheckedConditional,\n value: true,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('conditional', 'checked', e);\n }\n })), element.hasOwnProperty('conditionalFieldName') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"conditionalFieldName\"\n }, \"Field Name for the Dependent Survey Block:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n type: \"text\",\n id: \"conditionalFieldName\",\n defaultValue: element.conditionalFieldName,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('conditionalFieldName', 'value', e);\n }\n })), element.hasOwnProperty('conditionalFieldValue') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"conditionalFieldValue\"\n }, \"Value(s) for Survey Block to Display the Conditional Step:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n type: \"text\",\n id: \"conditionalFieldValue\",\n defaultValue: element.conditionalFieldValue,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('conditionalFieldValue', 'value', e);\n }\n })), element.hasOwnProperty('help') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"help\"\n }, \"Help instructions/details that will show up beneath the input field:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_textarea_autosize__WEBPACK_IMPORTED_MODULE_12__[\"default\"], {\n type: \"text\",\n className: \"form-control\",\n id: \"help\",\n defaultValue: element.help,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('help', 'value', e);\n }\n })), (showDescription && !element[\"static\"] || element.hasOwnProperty('description')) && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"description\"\n }, \"Description:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_textarea_autosize__WEBPACK_IMPORTED_MODULE_12__[\"default\"], {\n type: \"text\",\n className: \"form-control\",\n id: \"description\",\n defaultValue: element.description,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('description', 'value', e);\n }\n })), showCorrectColumn && canHaveAnswer && !element.hasOwnProperty('options') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"correct\"\n }, \"Correct Answer:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n id: \"correct\",\n type: \"text\",\n defaultValue: element.correct,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('correct', 'value', e);\n }\n })), element.canPopulateFromApi && element.hasOwnProperty('options') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"optionsApiUrl\"\n }, \"Populate Options from API:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_10__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_11__[\"default\"], {\n sm: 6\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n style: {\n width: '100%'\n },\n type: \"text\",\n id: \"optionsApiUrl\",\n placeholder: \"http://localhost:8080/api/optionsdata\"\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_11__[\"default\"], {\n sm: 6\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_13__[\"default\"], {\n variant: \"success\",\n onClick: addOptions\n }, \"Populate\")))), element.hasOwnProperty('options') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_dynamic_option_list__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n showCorrectColumn: showCorrectColumn,\n canHaveOptionCorrect: canHaveOptionCorrect,\n canHaveOptionValue: canHaveOptionValue,\n updateElement: updateElement,\n element: element,\n setElement: setElement,\n dirty: dirty,\n setDirty: setDirty,\n key: element === null || element === void 0 || (_element$options = element.options) === null || _element$options === void 0 ? void 0 : _element$options.length\n }));\n};\nSurveyElementsEdit.defaultProps = {\n className: 'edit-element-fields'\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SurveyElementsEdit);\n\n//# sourceURL=webpack://react-survey-builder/./src/survey-elements-edit.jsx?");
28
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_textarea_autosize__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! react-textarea-autosize */ \"./node_modules/react-textarea-autosize/dist/react-textarea-autosize.browser.development.esm.js\");\n/* harmony import */ var draft_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! draft-js */ \"./node_modules/draft-js/lib/Draft.js\");\n/* harmony import */ var draft_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(draft_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var draftjs_to_html__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! draftjs-to-html */ \"./node_modules/draftjs-to-html/lib/draftjs-to-html.js\");\n/* harmony import */ var draftjs_to_html__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(draftjs_to_html__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _dynamic_option_list__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./dynamic-option-list */ \"./src/dynamic-option-list.jsx\");\n/* harmony import */ var _stores_requests__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./stores/requests */ \"./src/stores/requests.js\");\n/* harmony import */ var react_icons_fa__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! react-icons/fa */ \"./node_modules/react-icons/fa/index.mjs\");\n/* harmony import */ var react_bootstrap__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! react-bootstrap */ \"./node_modules/react-bootstrap/esm/Form.js\");\n/* harmony import */ var react_bootstrap__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! react-bootstrap */ \"./node_modules/react-bootstrap/esm/Row.js\");\n/* harmony import */ var react_bootstrap__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! react-bootstrap */ \"./node_modules/react-bootstrap/esm/Col.js\");\n/* harmony import */ var react_bootstrap__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! react-bootstrap */ \"./node_modules/react-bootstrap/esm/Button.js\");\n/* harmony import */ var react_simple_wysiwyg__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react-simple-wysiwyg */ \"./node_modules/react-simple-wysiwyg/lib/index.es.mjs\");\n/* harmony import */ var _UUID__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./UUID */ \"./src/UUID.js\");\n/* harmony import */ var _UUID__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_UUID__WEBPACK_IMPORTED_MODULE_6__);\n/* harmony import */ var _utils_objectUtils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./utils/objectUtils */ \"./src/utils/objectUtils.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nvar _excluded = [\"containerProps\", \"onChange\", \"onBlur\", \"value\", \"name\"];\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\nfunction 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; }\nfunction _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) { _defineProperty(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; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }\n\n\n\n\n\n\n\n\n\n\n\nvar CustomWysiwygInput = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRef(function (_ref, ref) {\n var containerProps = _ref.containerProps,\n onChange = _ref.onChange,\n onBlur = _ref.onBlur,\n value = _ref.value,\n name = _ref.name,\n otherProps = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_simple_wysiwyg__WEBPACK_IMPORTED_MODULE_5__[\"default\"], _extends({}, otherProps, {\n onBlur: onBlur,\n value: value,\n name: name,\n onChange: onChange,\n containerProps: containerProps\n }));\n});\nvar SurveyElementsEdit = function SurveyElementsEdit(_ref2) {\n var _element$options;\n var element = _ref2.element,\n setElement = _ref2.setElement,\n _ref2$files = _ref2.files,\n files = _ref2$files === void 0 ? [] : _ref2$files,\n _ref2$showCorrectColu = _ref2.showCorrectColumn,\n showCorrectColumn = _ref2$showCorrectColu === void 0 ? false : _ref2$showCorrectColu,\n _ref2$showDescription = _ref2.showDescription,\n showDescription = _ref2$showDescription === void 0 ? false : _ref2$showDescription,\n manualEditModeOff = _ref2.manualEditModeOff,\n updateElement = _ref2.updateElement;\n var _React$useState = react__WEBPACK_IMPORTED_MODULE_0___default().useState(false),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n dirty = _React$useState2[0],\n setDirty = _React$useState2[1];\n var toggleRequired = function toggleRequired() {\n // const thisElement = isObjectNotEmpty(element) ? { ...element } : {};\n };\n var editElementProp = function editElementProp(elementProperty, targetProperty, e) {\n // elemProperty could be content or label\n // targProperty could be value or checked\n var thisElement = (0,_utils_objectUtils__WEBPACK_IMPORTED_MODULE_7__.isObjectNotEmpty)(element) ? _objectSpread({}, element) : {};\n thisElement[elementProperty] = e.target[targetProperty];\n setElement(thisElement);\n setDirty(true);\n if (targetProperty === 'checked') {\n onUpdateElement();\n }\n };\n var onEditorStateChange = function onEditorStateChange(index, property, editorContent) {\n var html = draftjs_to_html__WEBPACK_IMPORTED_MODULE_2___default()((0,draft_js__WEBPACK_IMPORTED_MODULE_1__.convertToRaw)(editorContent.getCurrentContent())).replace(/&nbsp;/g, ' ').replace(/(?:\\r\\n|\\r|\\n)/g, '');\n var thisElement = (0,_utils_objectUtils__WEBPACK_IMPORTED_MODULE_7__.isObjectNotEmpty)(element) ? _objectSpread({}, element) : {};\n thisElement[property] = html;\n setElement(thisElement);\n setDirty(true);\n };\n var onUpdateElement = function onUpdateElement() {\n var thisElement = (0,_utils_objectUtils__WEBPACK_IMPORTED_MODULE_7__.isObjectNotEmpty)(element) ? _objectSpread({}, element) : {};\n // to prevent ajax calls with no change\n if (dirty) {\n updateElement(thisElement);\n setDirty(false);\n }\n };\n var convertFromHTML = function convertFromHTML(content) {\n var newContent = (0,draft_js__WEBPACK_IMPORTED_MODULE_1__.convertFromHTML)(content);\n if (!newContent.contentBlocks || !newContent.contentBlocks.length) {\n // to prevent crash when no contents in editor\n return draft_js__WEBPACK_IMPORTED_MODULE_1__.EditorState.createEmpty();\n }\n var contentState = draft_js__WEBPACK_IMPORTED_MODULE_1__.ContentState.createFromBlockArray(newContent);\n return draft_js__WEBPACK_IMPORTED_MODULE_1__.EditorState.createWithContent(contentState);\n };\n var addOptions = function addOptions() {\n var optionsApiUrl = document.getElementById('optionsApiUrl').value;\n if (optionsApiUrl) {\n (0,_stores_requests__WEBPACK_IMPORTED_MODULE_4__.get)(optionsApiUrl).then(function (data) {\n var options = [];\n data.forEach(function (dataOption) {\n // eslint-disable-next-line no-param-reassign\n dataOption.key = _UUID__WEBPACK_IMPORTED_MODULE_6___default().uuid();\n options.push(dataOption);\n });\n var thisElement = (0,_utils_objectUtils__WEBPACK_IMPORTED_MODULE_7__.isObjectNotEmpty)(element) ? _objectSpread({}, element) : {};\n thisElement.options = options;\n setElement(thisElement);\n setDirty(true);\n });\n }\n };\n\n // React.useEffect(() => {\n // \tif (dirty) {\n // \t\tconst thisElement = isObjectNotEmpty(element) ? { ...element, dirty: true } : { dirty: true };\n\n // \t\tupdateElement(thisElement);\n // \t}\n // }, [dirty, element]);\n\n var thisRequiredChecked = element.hasOwnProperty('required') ? element.required : false;\n var thisDefaultChecked = element.hasOwnProperty('defaultChecked') ? element.defaultChecked : false;\n var thisReadOnly = element.hasOwnProperty('readOnly') ? element.readOnly : false;\n var thisDefaultToday = element.hasOwnProperty('defaultToday') ? element.defaultToday : false;\n var thisCheckedInline = element.hasOwnProperty('inline') ? element.inline : false;\n var thisCheckedBold = element.hasOwnProperty('bold') ? element.bold : false;\n var thisCheckedItalic = element.hasOwnProperty('italic') ? element.italic : false;\n var thisCheckedCenter = element.hasOwnProperty('center') ? element.center : false;\n var thisCheckedPageBreak = element.hasOwnProperty('pageBreakBefore') ? element.pageBreakBefore : false;\n var thisCheckedAlternateForm = element.hasOwnProperty('alternateForm') ? element.alternateForm : false;\n var thisCheckedHideLabel = element.hasOwnProperty('hideLabel') ? element.hideLabel : false;\n var thisCheckedConditional = element.hasOwnProperty('conditional') ? element.conditional : false;\n var thisCheckedHideNextStepButton = element.hasOwnProperty('hideNextStepButton') ? element.hideNextStepButton : false;\n var canHaveAnswer = ['NumberInput', 'EmailInput', 'TextInput', 'PhoneNumber', 'TextArea', 'DatePicker', 'Dropdown', 'Tags', 'Checkboxes', 'Checkbox', 'ButtonList', 'Rating', 'Range'].indexOf(element.element) !== -1;\n var canHaveOptionValue = ['Dropdown', 'Tags', 'Checkboxes', 'RadioButtons', 'ButtonList'].indexOf(element.element) !== -1;\n var canHaveOptionCorrect = canHaveAnswer && canHaveOptionValue;\n var thisFiles = (0,_utils_objectUtils__WEBPACK_IMPORTED_MODULE_7__.isListNotEmpty)(files) ? _toConsumableArray(files) : [];\n if (thisFiles.length < 1 || thisFiles.length > 0 && thisFiles[0].id !== '') {\n thisFiles.unshift({\n id: '',\n file_name: ''\n });\n }\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"clearfix\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"h4\", {\n className: \"float-start\"\n }, element.text), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_icons_fa__WEBPACK_IMPORTED_MODULE_8__.FaTimes, {\n className: \"float-end dismiss-edit\",\n onClick: manualEditModeOff\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"clearfix\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\"\n }, \"Field Id: \", element.fieldName)), element.hasOwnProperty('content') && (element.element === 'Header' || element.element === 'Label' || element.element === 'Paragraph' || element.element === 'ContentBody') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\"\n }, \"Text to display:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n type: \"text\",\n id: \"content\",\n name: \"content\",\n as: CustomWysiwygInput,\n value: element.content,\n defaultValue: element.content,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('content', 'value', e);\n },\n containerProps: {\n style: {\n height: '200px',\n width: '100%',\n resize: 'vertical'\n }\n }\n })), element.hasOwnProperty('filePath') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"fileSelect\"\n }, \"Choose file:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Select, {\n id: \"fileSelect\",\n defaultValue: element.filePath,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('filePath', 'value', e);\n }\n }, thisFiles.map(function (file) {\n var thisKey = \"file_\".concat(file.id);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"option\", {\n value: file.id,\n key: thisKey\n }, file.file_name);\n }))), element.hasOwnProperty('href') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"href\"\n }, \"Link to:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n id: \"href\",\n type: \"text\",\n defaultValue: element.href,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('href', 'value', e);\n }\n })), element.hasOwnProperty('label') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\"\n }, \"Display Label:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n type: \"text\",\n id: \"label\",\n name: \"label\",\n as: CustomWysiwygInput,\n value: element.label,\n defaultValue: element.label,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('label', 'value', e);\n },\n containerProps: {\n style: {\n height: '200px',\n width: '100%',\n resize: 'vertical'\n }\n }\n })), (element.hasOwnProperty('required') || element.hasOwnProperty('readOnly') || element.hasOwnProperty('defaultToday') || ['Checkboxes', 'Checkbox'].indexOf(element.element) !== -1 || (element.element === 'RadioButtons' || element.element === 'Checkboxes') && element.hasOwnProperty('inline')) && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\"\n }, \"Field Properties:\"), element.hasOwnProperty('required') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Check, {\n id: \"is-required\",\n label: \"Required\",\n type: \"checkbox\",\n checked: thisRequiredChecked,\n onBlur: onUpdateElement,\n value: true,\n onChange: function onChange(e) {\n editElementProp('required', 'checked', e);\n }\n }), element.hasOwnProperty('readOnly') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Check, {\n id: \"is-read-only\",\n label: \"Read Only\",\n type: \"checkbox\",\n checked: thisReadOnly,\n value: true,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('readOnly', 'checked', e);\n }\n }), element.hasOwnProperty('defaultToday') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Check, {\n id: \"is-default-to-today\",\n label: \"Default to Today\",\n type: \"checkbox\",\n checked: thisDefaultToday,\n value: true,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('defaultToday', 'checked', e);\n }\n }), ['Checkboxes', 'Checkbox'].indexOf(element.element) !== -1 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Check, {\n id: \"default-checked\",\n label: \"Default Checked\",\n type: \"checkbox\",\n checked: thisDefaultChecked,\n value: true,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('defaultChecked', 'checked', e);\n }\n }), (element.element === 'RadioButtons' || element.element === 'Checkboxes') && element.hasOwnProperty('inline') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Check, {\n id: \"display-horizontal\",\n label: \"Display Horizontal\",\n type: \"checkbox\",\n checked: thisCheckedInline,\n value: true,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('inline', 'checked', e);\n }\n })), element.element === 'Checkbox' && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\"\n }, \"Checkbox Label Text:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n type: \"text\",\n id: \"boxLabel\",\n name: \"boxLabel\",\n as: CustomWysiwygInput,\n value: element.boxLabel,\n defaultValue: element.boxLabel,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('boxLabel', 'value', e);\n },\n containerProps: {\n style: {\n height: '200px',\n width: '100%',\n resize: 'vertical'\n }\n }\n })), element.hasOwnProperty('src') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"srcInput\"\n }, \"Link to:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n id: \"srcInput\",\n type: \"text\",\n defaultValue: element.src,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('src', 'value', e);\n }\n })), (element.element === 'Image' || element.element === 'Camera') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_10__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_11__[\"default\"], {\n sm: 3\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"do-center\"\n }, \"Alignment:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Check, {\n id: \"do-center\",\n label: \"Center\",\n type: \"checkbox\",\n checked: thisCheckedCenter,\n value: true,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('center', 'checked', e);\n }\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_11__[\"default\"], {\n sm: 3\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"elementWidth\"\n }, \"Width:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n id: \"elementWidth\",\n type: \"number\",\n defaultValue: element.width,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('width', 'value', e);\n }\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_11__[\"default\"], {\n sm: 3\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"elementHeight\"\n }, \"Height:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n id: \"elementHeight\",\n type: \"number\",\n defaultValue: element.height,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('height', 'value', e);\n }\n })))), element.element === 'FileUpload' && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"fileType\"\n }, \"Choose file type:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Select, {\n id: \"fileType\",\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('fileType', 'value', e);\n }\n }, [{\n type: 'image, application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.presentation, video/mp4,video/x-m4v,video/*',\n typeName: 'All File Type'\n }, {\n type: 'image',\n typeName: 'Image'\n }, {\n type: 'application/pdf',\n typeName: 'PDF'\n }, {\n type: 'application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document',\n typeName: 'Word'\n }, {\n type: 'application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',\n typeName: 'Excel'\n }, {\n type: 'application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.presentation',\n typeName: 'Powerpoint'\n }, {\n type: 'video/mp4,video/x-m4v,video/*',\n typeName: 'Videos'\n }].map(function (file, index) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"option\", {\n value: file.type,\n key: index\n }, file.typeName);\n }))), element.hasOwnProperty('pageBreakBefore') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\"\n }, \"Print options:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Check, {\n id: \"page-break-before-element\",\n label: \"Page Break Before Element\",\n type: \"checkbox\",\n checked: thisCheckedPageBreak,\n value: true,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('pageBreakBefore', 'checked', e);\n }\n })), element.hasOwnProperty('alternateForm') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\"\n }, \"Alternate/Signature Page:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Check, {\n id: \"display-on-alternate\",\n label: \"Display on alternate/signature Page\",\n type: \"checkbox\",\n checked: thisCheckedAlternateForm,\n value: true,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('alternateForm', 'checked', e);\n }\n })), element.hasOwnProperty('step') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"form-group-range\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"rangeStep\"\n }, \"Step:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n id: \"rangeStep\",\n type: \"number\",\n defaultValue: element.step,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('step', 'value', e);\n }\n }))), element.hasOwnProperty('minValue') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"form-group-range\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"rangeMin\"\n }, \"Min:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n id: \"rangeMin\",\n type: \"number\",\n defaultValue: element.minValue,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('minValue', 'value', e);\n }\n }))), element.hasOwnProperty('minLabel') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"form-group-range\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"rangeMin\"\n }, \"Minimum Value Label:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n type: \"text\",\n defaultValue: element.minLabel,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('minLabel', 'value', e);\n }\n }))), element.hasOwnProperty('maxValue') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"form-group-range\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"rangeMax\"\n }, \"Max:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n id: \"rangeMax\",\n type: \"number\",\n defaultValue: element.maxValue,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('maxValue', 'value', e);\n }\n }))), element.hasOwnProperty('maxLabel') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"form-group-range\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"rangeMax\"\n }, \"Maximum Value Label:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n type: \"text\",\n defaultValue: element.maxLabel,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('maxLabel', 'value', e);\n }\n }))), element.hasOwnProperty('defaultValue') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"form-group-range\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"defaultSelected\"\n }, \"Default Selected:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n id: \"defaultSelected\",\n type: \"number\",\n defaultValue: element.defaultValue,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('defaultValue', 'value', e);\n }\n }))), element.hasOwnProperty('static') && element[\"static\"] && element.hasOwnProperty('bold') && element.hasOwnProperty('italic') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\"\n }, \"Text Style:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Check, {\n id: \"do-bold\",\n inline: true,\n label: \"Bold\",\n type: \"checkbox\",\n checked: thisCheckedBold,\n value: true,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('bold', 'checked', e);\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Check, {\n id: \"do-italic\",\n inline: true,\n label: \"Italic\",\n type: \"checkbox\",\n checked: thisCheckedItalic,\n value: true,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('italic', 'checked', e);\n }\n })), element.hasOwnProperty('placeholder') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"placeholder\"\n }, \"Placeholder:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n type: \"text\",\n id: \"placeholder\",\n defaultValue: element.placeholder,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('placeholder', 'value', e);\n }\n })), element.hasOwnProperty('customName') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"customName\"\n }, \"A Name To Give This Input That Will Show Up In Data Retrieval:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n type: \"text\",\n id: \"customName\",\n defaultValue: element.customName,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('customName', 'value', e);\n }\n })), element.hasOwnProperty('labelLocation') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"labelLocation\"\n }, \"Choose Label Location:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Select, {\n id: \"labelLocation\",\n defaultValue: element.labelLocation,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('labelLocation', 'value', e);\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"option\", {\n value: \"ABOVE\"\n }, \"Above Form Field\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"option\", {\n value: \"FLOATING\"\n }, \"Floating Inside Form Field\"))), element.hasOwnProperty('hideLabel') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\"\n }, \"Hide Label:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Check, {\n id: \"hide-label\",\n label: \"Hide Label\",\n type: \"checkbox\",\n checked: thisCheckedHideLabel,\n value: true,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('hideLabel', 'checked', e);\n }\n })), element.hasOwnProperty('rows') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"form-group-range\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"rows\"\n }, \"Rows:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n id: \"rows\",\n type: \"number\",\n defaultValue: element.rows,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('rows', 'value', e);\n }\n }))), element.hasOwnProperty('conditional') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\"\n }, \"Step is Conditional and Display is Dependent on Answers to another Survey Block:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Check, {\n id: \"conditional\",\n label: \"Conditional\",\n type: \"checkbox\",\n checked: thisCheckedConditional,\n value: true,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('conditional', 'checked', e);\n }\n })), element.hasOwnProperty('conditionalFieldName') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"conditionalFieldName\"\n }, \"Field Name for the Dependent Survey Block:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n type: \"text\",\n id: \"conditionalFieldName\",\n defaultValue: element.conditionalFieldName,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('conditionalFieldName', 'value', e);\n }\n })), element.hasOwnProperty('conditionalFieldValue') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"conditionalFieldValue\"\n }, \"Value(s) for Survey Block to Display the Conditional Step:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n type: \"text\",\n id: \"conditionalFieldValue\",\n defaultValue: element.conditionalFieldValue,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('conditionalFieldValue', 'value', e);\n }\n })), element.hasOwnProperty('hideNextStepButton') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\"\n }, \"Hide the Next Step/Submit Button for this Step (typically set true when the step has a Button List component):\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Check, {\n id: \"hideNextStepButton\",\n label: \"Hide the Next Step/Submit Button for this Step\",\n type: \"checkbox\",\n checked: thisCheckedHideNextStepButton,\n value: true,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('hideNextStepButton', 'checked', e);\n }\n })), element.hasOwnProperty('help') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"help\"\n }, \"Help instructions/details that will show up beneath the input field:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_textarea_autosize__WEBPACK_IMPORTED_MODULE_12__[\"default\"], {\n type: \"text\",\n className: \"form-control\",\n id: \"help\",\n defaultValue: element.help,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('help', 'value', e);\n }\n })), (showDescription && !element[\"static\"] || element.hasOwnProperty('description')) && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"description\"\n }, \"Description:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_textarea_autosize__WEBPACK_IMPORTED_MODULE_12__[\"default\"], {\n type: \"text\",\n className: \"form-control\",\n id: \"description\",\n defaultValue: element.description,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('description', 'value', e);\n }\n })), showCorrectColumn && canHaveAnswer && !element.hasOwnProperty('options') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"correct\"\n }, \"Correct Answer:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n id: \"correct\",\n type: \"text\",\n defaultValue: element.correct,\n onBlur: onUpdateElement,\n onChange: function onChange(e) {\n editElementProp('correct', 'value', e);\n }\n })), element.canPopulateFromApi && element.hasOwnProperty('options') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Group, {\n className: \"form-group mb-5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Label, {\n className: \"fw-bold\",\n htmlFor: \"optionsApiUrl\"\n }, \"Populate Options from API:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_10__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_11__[\"default\"], {\n sm: 6\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_9__[\"default\"].Control, {\n style: {\n width: '100%'\n },\n type: \"text\",\n id: \"optionsApiUrl\",\n placeholder: \"http://localhost:8080/api/optionsdata\"\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_11__[\"default\"], {\n sm: 6\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_13__[\"default\"], {\n variant: \"success\",\n onClick: addOptions\n }, \"Populate\")))), element.hasOwnProperty('options') && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_dynamic_option_list__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n showCorrectColumn: showCorrectColumn,\n canHaveOptionCorrect: canHaveOptionCorrect,\n canHaveOptionValue: canHaveOptionValue,\n updateElement: updateElement,\n element: element,\n setElement: setElement,\n dirty: dirty,\n setDirty: setDirty,\n key: element === null || element === void 0 || (_element$options = element.options) === null || _element$options === void 0 ? void 0 : _element$options.length\n }));\n};\nSurveyElementsEdit.defaultProps = {\n className: 'edit-element-fields'\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SurveyElementsEdit);\n\n//# sourceURL=webpack://react-survey-builder/./src/survey-elements-edit.jsx?");
29
29
 
30
30
  /***/ })
31
31
 
package/lib/form-fields.js CHANGED
@@ -37,6 +37,7 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
37
37
  answers = _ref.answers,
38
38
  onSubmit = _ref.onSubmit,
39
39
  onChange = _ref.onChange,
40
+ onSelect = _ref.onSelect,
40
41
  items = _ref.items,
41
42
  _ref$submitButton = _ref.submitButton,
42
43
  submitButton = _ref$submitButton === void 0 ? false : _ref$submitButton,
@@ -251,6 +252,16 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
251
252
  }
252
253
  setFormAnswers($data);
253
254
  };
255
+ var handleSelect = function handleSelect(event) {
256
+ // Call submit function on select
257
+ var $data = _collectFormData(items, (methods === null || methods === void 0 ? void 0 : methods.getValues()) || []);
258
+ // console.log('handleSelect', $data);
259
+
260
+ if (onSelect) {
261
+ onSelect($data);
262
+ }
263
+ setFormAnswers($data);
264
+ };
254
265
  var validateForm = function validateForm() {
255
266
  var hasErrors = false;
256
267
  var dataItems = items;
@@ -343,7 +354,9 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
343
354
  onBlur: onBlur,
344
355
  onChange: function onChange(e) {
345
356
  _onChange(e);
346
- handleChange(e);
357
+ if (item.element !== 'ButtonList') {
358
+ handleChange(e);
359
+ }
347
360
  },
348
361
  value: value,
349
362
  name: name,
@@ -352,10 +365,11 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
352
365
  },
353
366
  isInvalid: invalid,
354
367
  item: item,
355
- className: item.element === 'RadioButtons' || item.element === 'Checkbox' ? checkboxButtonClassName !== null && checkboxButtonClassName !== void 0 ? checkboxButtonClassName : null : null,
356
- checkboxButtonClassName: item.element === 'RadioButtons' || item.element === 'Checkbox' ? checkboxButtonClassName !== null && checkboxButtonClassName !== void 0 ? checkboxButtonClassName : null : null,
368
+ className: item.element === 'RadioButtons' || item.element === 'ButtonList' || item.element === 'Checkbox' ? checkboxButtonClassName !== null && checkboxButtonClassName !== void 0 ? checkboxButtonClassName : null : null,
369
+ checkboxButtonClassName: item.element === 'RadioButtons' || item.element === 'ButtonList' || item.element === 'Checkbox' ? checkboxButtonClassName !== null && checkboxButtonClassName !== void 0 ? checkboxButtonClassName : null : null,
357
370
  labelClassName: labelClassName,
358
- helpClassName: helpClassName
371
+ helpClassName: helpClassName,
372
+ onSelect: item.element === 'ButtonList' ? handleSelect : undefined
359
373
  });
360
374
  }
361
375
  });
@@ -474,6 +488,7 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
474
488
  item.helpClassName = helpClassName;
475
489
  switch (item.element) {
476
490
  case 'RadioButtons':
491
+ case 'ButtonList':
477
492
  case 'Range':
478
493
  case 'Checkbox':
479
494
  return getInputElement(item);
package/lib/form-steps.js CHANGED
@@ -37,6 +37,7 @@ var ReactSurveyFormSteps = function ReactSurveyFormSteps(_ref) {
37
37
  answers = _ref.answers,
38
38
  onSubmit = _ref.onSubmit,
39
39
  onChange = _ref.onChange,
40
+ onSelect = _ref.onSelect,
40
41
  items = _ref.items,
41
42
  activeStep = _ref.activeStep,
42
43
  _ref$submitButton = _ref.submitButton,
@@ -253,6 +254,16 @@ var ReactSurveyFormSteps = function ReactSurveyFormSteps(_ref) {
253
254
  }
254
255
  setFormAnswers($data);
255
256
  };
257
+ var handleSelect = function handleSelect(event) {
258
+ // Call submit function on select
259
+ var $data = _collectFormData(items, (methods === null || methods === void 0 ? void 0 : methods.getValues()) || []);
260
+ // console.log('handleSelect', $data);
261
+
262
+ if (onSelect) {
263
+ onSelect($data);
264
+ }
265
+ setFormAnswers($data);
266
+ };
256
267
  var validateForm = function validateForm() {
257
268
  var hasErrors = false;
258
269
  var $dataItems = _toConsumableArray(items);
@@ -345,7 +356,9 @@ var ReactSurveyFormSteps = function ReactSurveyFormSteps(_ref) {
345
356
  onBlur: onBlur,
346
357
  onChange: function onChange(e) {
347
358
  _onChange(e);
348
- handleChange(e);
359
+ if (item.element !== 'ButtonList') {
360
+ handleChange(e);
361
+ }
349
362
  },
350
363
  value: value,
351
364
  name: name,
@@ -354,10 +367,11 @@ var ReactSurveyFormSteps = function ReactSurveyFormSteps(_ref) {
354
367
  },
355
368
  isInvalid: invalid,
356
369
  item: item,
357
- className: item.element === 'RadioButtons' || item.element === 'Checkbox' ? checkboxButtonClassName !== null && checkboxButtonClassName !== void 0 ? checkboxButtonClassName : null : null,
358
- checkboxButtonClassName: item.element === 'RadioButtons' || item.element === 'Checkbox' ? checkboxButtonClassName !== null && checkboxButtonClassName !== void 0 ? checkboxButtonClassName : null : null,
370
+ className: item.element === 'RadioButtons' || item.element === 'ButtonList' || item.element === 'Checkbox' ? checkboxButtonClassName !== null && checkboxButtonClassName !== void 0 ? checkboxButtonClassName : null : null,
371
+ checkboxButtonClassName: item.element === 'RadioButtons' || item.element === 'ButtonList' || item.element === 'Checkbox' ? checkboxButtonClassName !== null && checkboxButtonClassName !== void 0 ? checkboxButtonClassName : null : null,
359
372
  labelClassName: labelClassName,
360
- helpClassName: helpClassName
373
+ helpClassName: helpClassName,
374
+ onSelect: item.element === 'ButtonList' ? handleSelect : undefined
361
375
  });
362
376
  }
363
377
  });
@@ -476,6 +490,7 @@ var ReactSurveyFormSteps = function ReactSurveyFormSteps(_ref) {
476
490
  item.helpClassName = helpClassName;
477
491
  switch (item.element) {
478
492
  case 'RadioButtons':
493
+ case 'ButtonList':
479
494
  case 'Range':
480
495
  case 'Checkbox':
481
496
  return getInputElement(item);
package/lib/form.js CHANGED
@@ -37,6 +37,7 @@ var ReactSurvey = function ReactSurvey(_ref) {
37
37
  answers = _ref.answers,
38
38
  onSubmit = _ref.onSubmit,
39
39
  onChange = _ref.onChange,
40
+ onSelect = _ref.onSelect,
40
41
  items = _ref.items,
41
42
  _ref$submitButton = _ref.submitButton,
42
43
  submitButton = _ref$submitButton === void 0 ? false : _ref$submitButton,
@@ -261,6 +262,16 @@ var ReactSurvey = function ReactSurvey(_ref) {
261
262
  }
262
263
  setFormAnswers($data);
263
264
  };
265
+ var handleSelect = function handleSelect(event) {
266
+ // Call submit function on select
267
+ var $data = _collectFormData(items, (methods === null || methods === void 0 ? void 0 : methods.getValues()) || []);
268
+ // console.log('handleSelect', $data);
269
+
270
+ if (onSelect) {
271
+ onSelect($data);
272
+ }
273
+ setFormAnswers($data);
274
+ };
264
275
  var validateForm = function validateForm() {
265
276
  var hasErrors = false;
266
277
  var dataItems = items;
@@ -354,7 +365,9 @@ var ReactSurvey = function ReactSurvey(_ref) {
354
365
  onBlur: onBlur,
355
366
  onChange: function onChange(e) {
356
367
  _onChange(e);
357
- handleChange(e);
368
+ if (item.element !== 'ButtonList') {
369
+ handleChange(e);
370
+ }
358
371
  },
359
372
  value: value,
360
373
  name: name,
@@ -363,10 +376,11 @@ var ReactSurvey = function ReactSurvey(_ref) {
363
376
  },
364
377
  isInvalid: invalid,
365
378
  item: item,
366
- className: item.element === 'RadioButtons' || item.element === 'Checkbox' ? checkboxButtonClassName !== null && checkboxButtonClassName !== void 0 ? checkboxButtonClassName : null : null,
367
- checkboxButtonClassName: item.element === 'RadioButtons' || item.element === 'Checkbox' ? checkboxButtonClassName !== null && checkboxButtonClassName !== void 0 ? checkboxButtonClassName : null : null,
379
+ className: item.element === 'RadioButtons' || item.element === 'ButtonList' || item.element === 'Checkbox' ? checkboxButtonClassName !== null && checkboxButtonClassName !== void 0 ? checkboxButtonClassName : null : null,
380
+ checkboxButtonClassName: item.element === 'RadioButtons' || item.element === 'ButtonList' || item.element === 'Checkbox' ? checkboxButtonClassName !== null && checkboxButtonClassName !== void 0 ? checkboxButtonClassName : null : null,
368
381
  labelClassName: labelClassName,
369
- helpClassName: helpClassName
382
+ helpClassName: helpClassName,
383
+ onSelect: item.element === 'ButtonList' ? handleSelect : undefined
370
384
  });
371
385
  }
372
386
  });
@@ -485,6 +499,7 @@ var ReactSurvey = function ReactSurvey(_ref) {
485
499
  item.helpClassName = helpClassName;
486
500
  switch (item.element) {
487
501
  case 'RadioButtons':
502
+ case 'ButtonList':
488
503
  case 'Range':
489
504
  case 'Checkbox':
490
505
  return getInputElement(item);
package/lib/index.js CHANGED
@@ -145,6 +145,9 @@ var cleanUpSurveyItems = function cleanUpSurveyItems() {
145
145
  if (item.conditionalFieldValue !== undefined && item.conditionalFieldValue !== null) {
146
146
  dataItem.conditionalFieldValue = item.conditionalFieldValue;
147
147
  }
148
+ if (item.hideNextStepButton !== undefined && item.hideNextStepButton !== null) {
149
+ dataItem.hideNextStepButton = item.hideNextStepButton;
150
+ }
148
151
  if (item.groupName !== undefined && item.groupName !== null) {
149
152
  dataItem.groupName = item.groupName;
150
153
  }
package/lib/sortable-form-elements.js CHANGED
@@ -19,6 +19,7 @@ var Header = BaseSurveyElements.Header,
19
19
  Checkboxes = BaseSurveyElements.Checkboxes,
20
20
  DatePicker = BaseSurveyElements.DatePicker,
21
21
  RadioButtons = BaseSurveyElements.RadioButtons,
22
+ ButtonList = BaseSurveyElements.ButtonList,
22
23
  Image = BaseSurveyElements.Image,
23
24
  Rating = BaseSurveyElements.Rating,
24
25
  Tags = BaseSurveyElements.Tags,
@@ -46,6 +47,7 @@ SortableFormElements.Checkboxes = SortableElement(Checkboxes);
46
47
  SortableFormElements.Checkbox = SortableElement(Checkbox);
47
48
  SortableFormElements.DatePicker = SortableElement(DatePicker);
48
49
  SortableFormElements.RadioButtons = SortableElement(RadioButtons);
50
+ SortableFormElements.ButtonList = SortableElement(ButtonList);
49
51
  SortableFormElements.Image = SortableElement(Image);
50
52
  SortableFormElements.Rating = SortableElement(Rating);
51
53
  SortableFormElements.Tags = SortableElement(Tags);
package/lib/survey-elements/header-bar.js CHANGED
@@ -14,7 +14,7 @@ var HeaderBar = function HeaderBar(_ref) {
14
14
  className: "d-flex toolbar-header align-items-center justify-content-between p-2"
15
15
  }, /*#__PURE__*/React.createElement(Badge, {
16
16
  bg: "secondary"
17
- }, item.text, isStep ? ' ' + (Number(index) + 1) : '', isStep && (item === null || item === void 0 ? void 0 : item.conditional) === true ? ' (Conditional)' : ''), /*#__PURE__*/React.createElement("div", {
17
+ }, item.text, isStep ? ' ' + (Number(index) + 1) + ': ' + item.label : '', isStep && (item === null || item === void 0 ? void 0 : item.conditional) === true ? ' (Conditional)' : ''), /*#__PURE__*/React.createElement("div", {
18
18
  className: "toolbar-header-buttons"
19
19
  }, item.element !== 'LineBreak' && /*#__PURE__*/React.createElement(Button, {
20
20
  variant: "default",