npm - @goldenpine/react-form-builder2 - Versions diffs - 0.20.3-build.22 → 0.20.3-build.23 - Mend

@goldenpine/react-form-builder2 0.20.3-build.22 → 0.20.3-build.23

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 (6) hide show

package/dist/845.app.js +1 -1
package/dist/app.js +1 -1
package/lib/form-elements/index.js +70 -17
package/lib/form-elements-edit.js +3 -2
package/lib/toolbar.js +2 -0
package/package.json +1 -1

package/dist/845.app.js CHANGED Viewed

	@@ -1 +1 @@
1	- "use strict";(self.webpackChunkReactFormBuilder=self.webpackChunkReactFormBuilder\|\|[]).push([[845],{845:(e,t,a)=>{a.r(t),a.d(t,{default:()=>H});var l=a(3029),n=a(2901),r=a(6822),i=a(3954),o=a(5361),s=a(4467),c=a(4012),m=a.n(c),p=a(8168),d=a(8587),h=a(7003),u=function(e,t){"function"!=typeof e?e.current=t:e(t)},E={"min-height":"0","max-height":"none",height:"0",visibility:"hidden",overflow:"hidden",position:"absolute","z-index":"-1000",top:"0",right:"0",display:"block"},b=function(e){Object.keys(E).forEach(function(t){e.style.setProperty(t,E[t],"important")})},f=null,v=function(e,t){var a=e.scrollHeight;return"border-box"===t.sizingStyle.boxSizing?a+t.borderSize:a-t.paddingSize},y=function(){},g=["borderBottomWidth","borderLeftWidth","borderRightWidth","borderTopWidth","boxSizing","fontFamily","fontSize","fontStyle","fontWeight","letterSpacing","lineHeight","paddingBottom","paddingLeft","paddingRight","paddingTop","tabSize","textIndent","textRendering","textTransform","width","wordBreak","wordSpacing","scrollbarGutter"],N=!!document.documentElement.currentStyle;function k(e,t,a){var l,n,r=(l=a,n=m().useRef(l),(0,h.A)(function(){n.current=l}),n);c.useLayoutEffect(function(){var a=function(e){return r.current(e)};if(e)return e.addEventListener(t,a),function(){return e.removeEventListener(t,a)}},[])}var w=["cacheMeasurements","maxRows","minRows","onChange","onHeightChange"],x=function(e,t){var a,l=e.cacheMeasurements,n=e.maxRows,r=e.minRows,i=e.onChange,o=void 0===i?y:i,s=e.onHeightChange,h=void 0===s?y:s,E=(0,d.A)(e,w),x=void 0!==E.value,C=c.useRef(null),A=function(e,t){var a=m().useRef();return m().useCallback(function(l){e.current=l,a.current&&u(a.current,null),a.current=t,t&&u(t,l)},[t])}(C,t),P=c.useRef(0),_=c.useRef(),O=function(){var e=C.current,t=l&&_.current?_.current:function(e){var t=window.getComputedStyle(e);if(null===t)return null;var a,l=(a=t,g.reduce(function(e,t){return e[t]=a[t],e},{})),n=l.boxSizing;return""===n?null:(N&&"border-box"===n&&(l.width=parseFloat(l.width)+parseFloat(l.borderRightWidth)+parseFloat(l.borderLeftWidth)+parseFloat(l.paddingRight)+parseFloat(l.paddingLeft)+"px"),{sizingStyle:l,paddingSize:parseFloat(l.paddingBottom)+parseFloat(l.paddingTop),borderSize:parseFloat(l.borderBottomWidth)+parseFloat(l.borderTopWidth)})}(e);if(t){_.current=t;var a=function(e,t,a,l){void 0===a&&(a=1),void 0===l&&(l=1/0),f\|\|((f=document.createElement("textarea")).setAttribute("tabindex","-1"),f.setAttribute("aria-hidden","true"),b(f)),null===f.parentNode&&document.body.appendChild(f);var n=e.paddingSize,r=e.borderSize,i=e.sizingStyle,o=i.boxSizing;Object.keys(i).forEach(function(e){var t=e;f.style[t]=i[t]}),b(f),f.value=t;var s=v(f,e);f.value=t,s=v(f,e),f.value="x";var c=f.scrollHeight-n,m=ca;"border-box"===o&&(m=m+n+r),s=Math.max(m,s);var p=cl;return"border-box"===o&&(p=p+n+r),[s=Math.min(p,s),c]}(t,e.value\|\|e.placeholder\|\|"x",r,n),i=a[0],o=a[1];P.current!==i&&(P.current=i,e.style.setProperty("height",i+"px","important"),h(i,{rowHeight:o}))}};return c.useLayoutEffect(O),function(e,t){k(document.body,"reset",function(a){e.current.form===a.target&&t()})}(C,function(){if(!x){var e=C.current.value;requestAnimationFrame(function(){var t=C.current;t&&e!==t.value&&O()})}}),k(window,"resize",O),a=O,k(document.fonts,"loadingdone",a),c.createElement("textarea",(0,p.A)({},E,{onChange:function(e){x\|\|O(),o(e)},ref:A}))},C=c.forwardRef(x),A=a(5143),P=a(9987),_=a.n(P),O=a(3754),F=a(7654),S=a.n(F),B=a(8886);function L(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(L=function(){return!!e})()}var V=function(e){function t(e){var a,n,o,s;return(0,l.A)(this,t),n=this,o=t,s=[e],o=(0,i.A)(o),(a=(0,r.A)(n,L()?Reflect.construct(o,s\|\|[],(0,i.A)(n).constructor):o.apply(n,s))).state={element:a.props.element,data:a.props.data,dirty:!1},a}return(0,o.A)(t,e),(0,n.A)(t,[{key:"_setValue",value:function(e){return e.replace(/[^A-Z0-9]+/gi,"_").toLowerCase()}},{key:"editOption",value:function(e,t){var a=this.state.element,l=a.options[e].value!==this._setValue(a.options[e].text)?a.options[e].value:this._setValue(t.target.value);a.options[e].text=t.target.value,a.options[e].value=l,this.setState({element:a,dirty:!0})}},{key:"editValue",value:function(e,t){var a=this.state.element,l=""===t.target.value?this._setValue(a.options[e].text):t.target.value;a.options[e].value=l,this.setState({element:a,dirty:!0})}},{key:"editOptionCorrect",value:function(e,t){var a=this.state.element;a.options[e].hasOwnProperty("correct")?delete a.options[e].correct:a.options[e].correct=!0,this.setState({element:a}),this.props.updateElement.call(this.props.preview,a)}},{key:"updateOption",value:function(){var e=this.state.element;this.state.dirty&&(this.props.updateElement.call(this.props.preview,e),this.setState({dirty:!1}))}},{key:"addOption",value:function(e){var t=this.state.element,a=t.element.toLowerCase();t.options.splice(e+1,0,{value:"",text:"",key:"".concat(a,"_option_").concat(S().uuid())}),this.props.updateElement.call(this.props.preview,t)}},{key:"removeOption",value:function(e){var t=this.state.element;t.options.splice(e,1),this.props.updateElement.call(this.props.preview,t)}},{key:"render",value:function(){var e=this;return this.state.dirty&&(this.state.element.dirty=!0),m().createElement("div",{className:"dynamic-option-list"},m().createElement("ul",null,m().createElement("li",null,m().createElement("div",{className:"row"},m().createElement("div",{className:"col-sm-6"},m().createElement("b",null,m().createElement(B.A,{id:"options"}))),this.props.canHaveOptionValue&&m().createElement("div",{className:"col-sm-2"},m().createElement("b",null,m().createElement(B.A,{id:"value"}))),this.props.canHaveOptionValue&&this.props.canHaveOptionCorrect&&m().createElement("div",{className:"col-sm-4"},m().createElement("b",null,m().createElement(B.A,{id:"correct"}))))),this.props.element.options.map(function(t,a){var l="edit_".concat(t.key),n=t.value!==e._setValue(t.text)?t.value:"";return m().createElement("li",{className:"clearfix",key:l},m().createElement("div",{className:"row"},m().createElement("div",{className:"col-sm-6"},m().createElement("input",{tabIndex:a+1,className:"form-control",style:{width:"100%"},type:"text",name:"text_".concat(a),placeholder:"Option text",value:t.text,onBlur:e.updateOption.bind(e),onChange:e.editOption.bind(e,a)})),e.props.canHaveOptionValue&&m().createElement("div",{className:"col-sm-2"},m().createElement("input",{className:"form-control",type:"text",name:"value_".concat(a),value:n,onChange:e.editValue.bind(e,a)})),e.props.canHaveOptionValue&&e.props.canHaveOptionCorrect&&m().createElement("div",{className:"col-sm-1"},m().createElement("input",{className:"form-control",type:"checkbox",value:"1",onChange:e.editOptionCorrect.bind(e,a),checked:t.hasOwnProperty("correct")})),m().createElement("div",{className:"col-sm-3"},m().createElement("div",{className:"dynamic-options-actions-buttons"},m().createElement("button",{onClick:e.addOption.bind(e,a),className:"btn btn-success"},m().createElement("i",{className:"fas fa-plus-circle"})),a>0&&m().createElement("button",{onClick:e.removeOption.bind(e,a),className:"btn btn-danger"},m().createElement("i",{className:"fas fa-minus-circle"}))))))})))}}])}(m().Component),T=a(968);function z(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(z=function(){return!!e})()}var I={options:["inline","list","textAlign","fontSize","link","history"],inline:{inDropdown:!1,className:void 0,options:["bold","italic","underline","superscript","subscript"]}},H=function(e){function t(e){var a,n,o,c;return(0,l.A)(this,t),n=this,o=t,c=[e],o=(0,i.A)(o),a=(0,r.A)(n,z()?Reflect.construct(o,c\|\|[],(0,i.A)(n).constructor):o.apply(n,c)),(0,s.A)(a,"handleUploadLayoutChange",function(e){var t=a.state.element;t.upload_layout=e.target.value,a.setState({element:t,dirty:!0},function(){a.updateElement()})}),a.state={element:a.props.element,data:a.props.data,dirty:!1},a}return(0,o.A)(t,e),(0,n.A)(t,[{key:"toggleRequired",value:function(){}},{key:"editElementProp",value:function(e,t,a){var l=this,n=this.state.element;n[e]=a.target[t],this.setState({element:n,dirty:!0},function(){"checked"===t&&l.updateElement()})}},{key:"onEditorStateChange",value:function(e,t,a){var l=_()((0,A.convertToRaw)(a.getCurrentContent())).replace(/<p>/g,"<div>").replace(/<\/p>/g,"</div>"),n=this.state.element;n[t]=l,this.setState({element:n,dirty:!0})}},{key:"updateElement",value:function(){var e=this.state.element;this.state.dirty&&(this.props.updateElement.call(this.props.preview,e),this.setState({dirty:!1}))}},{key:"convertFromHTML",value:function(e){var t=(0,A.convertFromHTML)(e);if(!t.contentBlocks\|\|!t.contentBlocks.length)return A.EditorState.createEmpty();var a=A.ContentState.createFromBlockArray(t);return A.EditorState.createWithContent(a)}},{key:"addOptions",value:function(){var e=this,t=document.getElementById("optionsApiUrl").value;t&&(0,T.J)(t).then(function(t){e.props.element.options=[];var a=e.props.element.options;t.forEach(function(e){e.key=S().uuid(),a.push(e)});var l=e.state.element;e.setState({element:l,dirty:!0})})}},{key:"validateImageSize",value:function(e){/^$\|^\d+(px\|%)$/.test(e.target.value)?(e.target.classList.remove("is-invalid"),e.target.classList.add("is-valid")):(e.target.classList.remove("is-valid"),e.target.classList.add("is-invalid"))}},{key:"render",value:function(){var e;this.state.dirty&&(this.props.element.dirty=!0);var t,a=!!this.props.element.hasOwnProperty("required")&&this.props.element.required,l=!!this.props.element.hasOwnProperty("readOnly")&&this.props.element.readOnly,n=!!this.props.element.hasOwnProperty("defaultToday")&&this.props.element.defaultToday,r=!!this.props.element.hasOwnProperty("showTimeSelect")&&this.props.element.showTimeSelect,i=!!this.props.element.hasOwnProperty("showTimeSelectOnly")&&this.props.element.showTimeSelectOnly,o=!!this.props.element.hasOwnProperty("showTimeInput")&&this.props.element.showTimeInput,s=!!this.props.element.hasOwnProperty("inline")&&this.props.element.inline,c=!!this.props.element.hasOwnProperty("bold")&&this.props.element.bold,p=!!this.props.element.hasOwnProperty("italic")&&this.props.element.italic,d=!!this.props.element.hasOwnProperty("center")&&this.props.element.center,h=!!this.props.element.hasOwnProperty("pageBreakBefore")&&this.props.element.pageBreakBefore,u=!!this.props.element.hasOwnProperty("alternateForm")&&this.props.element.alternateForm,E=this.props.element,b=E.canHavePageBreakBefore,f=E.canHaveAlternateForm,v=E.canHaveDisplayHorizontal,y=E.canHaveOptionCorrect,g=E.canHaveOptionValue,N="Image"===this.state.element.element\|\|"Camera"===this.state.element.element,k=this.props.files.length?this.props.files:[];return(k.length<1\|\|k.length>0&&""!==k[0].id)&&k.unshift({id:"",file_name:""}),this.props.element.hasOwnProperty("content")&&(t=this.convertFromHTML(this.props.element.content)),this.props.element.hasOwnProperty("label")&&(t=this.convertFromHTML(this.props.element.label)),m().createElement("div",null,m().createElement("div",{className:"clearfix"},m().createElement("h4",{className:"float-start"},this.props.element.text),m().createElement("i",{className:"float-end fas fa-times dismiss-edit",onClick:this.props.manualEditModeOff})),this.props.element.hasOwnProperty("content")&&m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label"},m().createElement(B.A,{id:"text-to-display"}),":"),m().createElement(O.Editor,{toolbar:I,defaultEditorState:t,onBlur:this.updateElement.bind(this),onEditorStateChange:this.onEditorStateChange.bind(this,0,"content"),stripPastedStyles:!0})),this.props.element.hasOwnProperty("file_path")&&m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label",htmlFor:"fileSelect"},m().createElement(B.A,{id:"choose-file"}),":"),m().createElement("select",{id:"fileSelect",className:"form-control",defaultValue:this.props.element.file_path,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"file_path","value")},k.map(function(e){var t="file_".concat(e.id);return m().createElement("option",{value:e.id,key:t},e.file_name)}))),this.props.element.hasOwnProperty("href")&&m().createElement("div",{className:"mb-3"},m().createElement(C,{type:"text",className:"form-control",defaultValue:this.props.element.href,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"href","value")})),this.props.element.hasOwnProperty("label")&&m().createElement("div",{className:"mb-3"},m().createElement("label",null,m().createElement(B.A,{id:"display-label"})),m().createElement(O.Editor,{toolbar:I,defaultEditorState:t,onBlur:this.updateElement.bind(this),onEditorStateChange:this.onEditorStateChange.bind(this,0,"label"),stripPastedStyles:!0}),m().createElement("br",null),m().createElement("div",{className:"form-check"},m().createElement("input",{id:"is-required",className:"form-check-input",type:"checkbox",checked:a,value:!0,onChange:this.editElementProp.bind(this,"required","checked")}),m().createElement("label",{className:"form-check-label",htmlFor:"is-required"},m().createElement(B.A,{id:"required"}))),a&&"Checkboxes"===this.state.element.element&&m().createElement("div",{className:"d-flex align-items-center gap-2"},m().createElement("label",{className:"form-label mb-0",htmlFor:"checkbox-required-checks"},m().createElement(B.A,{id:"minimum-number-of-selections"}),":"),m().createElement("input",{id:"checkbox-required-checks",type:"number",min:"1",className:"form-control d-inline-block",style:{width:"8ch"},value:null!==(e=this.props.element.checkbox_required_checks)&&void 0!==e?e:"1",onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"checkbox_required_checks","value")})),this.props.element.hasOwnProperty("readOnly")&&m().createElement("div",{className:"form-check"},m().createElement("input",{id:"is-read-only",className:"form-check-input",type:"checkbox",checked:l,value:!0,onChange:this.editElementProp.bind(this,"readOnly","checked")}),m().createElement("label",{className:"form-check-label",htmlFor:"is-read-only"},m().createElement(B.A,{id:"read-only"}))),this.props.element.hasOwnProperty("defaultToday")&&m().createElement("div",{className:"form-check"},m().createElement("input",{id:"is-default-to-today",className:"form-check-input",type:"checkbox",checked:n,value:!0,onChange:this.editElementProp.bind(this,"defaultToday","checked")}),m().createElement("label",{className:"form-check-label",htmlFor:"is-default-to-today"},m().createElement(B.A,{id:"default-to-today"}),"?")),this.props.element.hasOwnProperty("showTimeSelect")&&m().createElement("div",{className:"form-check"},m().createElement("input",{id:"show-time-select",className:"form-check-input",type:"checkbox",checked:r,value:!0,onChange:this.editElementProp.bind(this,"showTimeSelect","checked")}),m().createElement("label",{className:"form-check-label",htmlFor:"show-time-select"},m().createElement(B.A,{id:"show-time-select"}),"?")),r&&this.props.element.hasOwnProperty("showTimeSelectOnly")&&m().createElement("div",{className:"form-check"},m().createElement("input",{id:"show-time-select-only",className:"form-check-input",type:"checkbox",checked:i,value:!0,onChange:this.editElementProp.bind(this,"showTimeSelectOnly","checked")}),m().createElement("label",{className:"form-check-label",htmlFor:"show-time-select-only"},m().createElement(B.A,{id:"show-time-select-only"}),"?")),this.props.element.hasOwnProperty("showTimeInput")&&m().createElement("div",{className:"form-check"},m().createElement("input",{id:"show-time-input",className:"form-check-input",type:"checkbox",checked:o,value:!0,onChange:this.editElementProp.bind(this,"showTimeInput","checked")}),m().createElement("label",{className:"form-check-label",htmlFor:"show-time-input"},m().createElement(B.A,{id:"show-time-input"}),"?")),("RadioButtons"===this.state.element.element\|\|"Checkboxes"===this.state.element.element)&&v&&m().createElement("div",{className:"form-check"},m().createElement("input",{id:"display-horizontal",className:"form-check-input",type:"checkbox",checked:s,value:!0,onChange:this.editElementProp.bind(this,"inline","checked")}),m().createElement("label",{className:"form-check-label",htmlFor:"display-horizontal"},m().createElement(B.A,{id:"display-horizontal"})))),this.props.element.hasOwnProperty("src")&&m().createElement("div",null,m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label",htmlFor:"srcInput"},m().createElement(B.A,{id:"link-to"}),":"),m().createElement("input",{id:"srcInput",type:"text",className:"form-control",defaultValue:this.props.element.src,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"src","value")}))),"Camera"===this.state.element.element&&m().createElement("div",null,m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label bold"},m().createElement(B.A,{id:"upload-layout"}),":"),m().createElement("div",{className:"d-flex align-items-center gap-3"},m().createElement("div",{className:"form-check d-flex align-items-center"},m().createElement("input",{className:"form-check-input",type:"radio",name:"uploadLayout",id:"uploadLayoutStandard",value:"standard",checked:"standard"===this.props.element.upload_layout,onChange:this.handleUploadLayoutChange}),m().createElement("label",{className:"form-check-label ms-2",htmlFor:"uploadLayoutStandard"},m().createElement(B.A,{id:"upload-layout-standard"}))),m().createElement("div",{className:"form-check d-flex align-items-center"},m().createElement("input",{className:"form-check-input",type:"radio",name:"uploadLayout",id:"uploadLayoutDropZone",value:"dropzone",checked:"dropzone"===this.props.element.upload_layout,onChange:this.handleUploadLayoutChange}),m().createElement("label",{className:"form-check-label ms-2",htmlFor:"uploadLayoutDropZone"},m().createElement(B.A,{id:"upload-layout-dropzone"}))))),m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label",htmlFor:"LabelAfterCameraIcon"},m().createElement(B.A,{id:"display-label-after-camera-icon"}),":"),m().createElement("input",{id:"LabelAfterCameraIcon",type:"text",className:"form-control",defaultValue:this.props.element.label_after_camera_icon,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"label_after_camera_icon","value")})),m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label",htmlFor:"MessageUnderCameraIcon"},m().createElement(B.A,{id:"display-message-under-camera-icon"}),":"),m().createElement("input",{id:"MessageUnderCameraIcon",type:"text",className:"form-control",defaultValue:this.props.element.message_under_camera_icon,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"message_under_camera_icon","value")})),m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label",htmlFor:"LabelAfterPhotoClearIcon"},m().createElement(B.A,{id:"display-label-after-photo-clear-icon"}),":"),m().createElement("input",{id:"LabelAfterPhotoClearIcon",type:"text",className:"form-control",defaultValue:this.props.element.label_after_photo_clear_icon,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"label_after_photo_clear_icon","value")}))),N&&m().createElement("div",null,m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label bold"},m().createElement(B.A,{id:"image-layout"}),":"),m().createElement("div",{className:"form-check"},m().createElement("input",{id:"do-center",className:"form-check-input",type:"checkbox",checked:d,value:!0,onChange:this.editElementProp.bind(this,"center","checked")}),m().createElement("label",{className:"form-check-label",htmlFor:"do-center"},m().createElement(B.A,{id:"center"}),"?"))),m().createElement("div",{className:"row mb-3"},m().createElement("div",{className:"col-sm-3"},m().createElement("label",{className:"control-label",htmlFor:"elementWidth"},m().createElement(B.A,{id:"width"}),":"),m().createElement("input",{id:"elementWidth",type:"text",className:"form-control",pattern:"^$\|^\\d+(px\|%)$",onInput:this.validateImageSize,defaultValue:this.props.element.width,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"width","value")})),m().createElement("div",{className:"col-sm-3"},m().createElement("label",{className:"control-label",htmlFor:"elementHeight"},m().createElement(B.A,{id:"height"}),":"),m().createElement("input",{id:"elementHeight",type:"text",className:"form-control",pattern:"^$\|^\\d+(px\|%)$",onInput:this.validateImageSize,defaultValue:this.props.element.height,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"height","value")})),m().createElement("small",{className:"form-text text-muted"},"Use ",m().createElement("code",null,"px")," or ",m().createElement("code",null,"%")," (e.g. 200px, 100%)."))),"FileUpload"===this.state.element.element&&m().createElement("div",null,m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label",htmlFor:"LabelAfterFileIcon"},m().createElement(B.A,{id:"display-label-after-file-icon"}),":"),m().createElement("input",{id:"LabelAfterFileIcon",type:"text",className:"form-control",defaultValue:this.props.element.label_after_file_icon,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"label_after_file_icon","value")})),m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label",htmlFor:"MessageUnderFileIcon"},m().createElement(B.A,{id:"display-message-under-file-icon"}),":"),m().createElement("input",{id:"MessageUnderFileIcon",type:"text",className:"form-control",defaultValue:this.props.element.message_under_file_icon,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"message_under_file_icon","value")})),m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label",htmlFor:"LabelAfterFileClearIcon"},m().createElement(B.A,{id:"display-label-after-file-clear-icon"}),":"),m().createElement("input",{id:"LabelAfterFileClearIcon",type:"text",className:"form-control",defaultValue:this.props.element.label_after_file_clear_icon,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"label_after_file_clear_icon","value")})),m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label",htmlFor:"fileType"},m().createElement(B.A,{id:"choose-file-type"}),":"),m().createElement("select",{id:"fileType",className:"form-control",onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"fileType","value")},[{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/",typeName:"All File Type"},{type:"image",typeName:"Image"},{type:"application/pdf",typeName:"PDF"},{type:"application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document",typeName:"Word"},{type:"application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",typeName:"Excel"},{type:"application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.presentation",typeName:"Powerpoint"},{type:"video/mp4,video/x-m4v,video/",typeName:"Videos"}].map(function(e,t){return m().createElement("option",{value:e.type,key:t},e.typeName)})))),"Signature"===this.state.element.element&&this.props.element.readOnly?m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label",htmlFor:"variableKey"},m().createElement(B.A,{id:"variable-key"}),":"),m().createElement("input",{id:"variableKey",type:"text",className:"form-control",defaultValue:this.props.element.variableKey,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"variableKey","value")}),m().createElement("p",{className:"help-block"},m().createElement(B.A,{id:"variable-key-desc"}),".")):m().createElement("div",null),b&&m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label"},m().createElement(B.A,{id:"print-options"})),m().createElement("div",{className:"form-check"},m().createElement("input",{id:"page-break-before-element",className:"form-check-input",type:"checkbox",checked:h,value:!0,onChange:this.editElementProp.bind(this,"pageBreakBefore","checked")}),m().createElement("label",{className:"form-check-label",htmlFor:"page-break-before-element"},m().createElement(B.A,{id:"page-break-before-elements"}),"?"))),f&&m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label"},m().createElement(B.A,{id:"alternate-signature-page"})),m().createElement("div",{className:"form-check"},m().createElement("input",{id:"display-on-alternate",className:"form-check-input",type:"checkbox",checked:u,value:!0,onChange:this.editElementProp.bind(this,"alternateForm","checked")}),m().createElement("label",{className:"form-check-label",htmlFor:"display-on-alternate"},m().createElement(B.A,{id:"display-on-alternate-signature-page"}),"?"))),this.props.element.hasOwnProperty("step")&&m().createElement("div",{className:"mb-3"},m().createElement("div",{className:"form-group-range"},m().createElement("label",{className:"control-label",htmlFor:"rangeStep"},m().createElement(B.A,{id:"step"})),m().createElement("input",{id:"rangeStep",type:"number",className:"form-control",defaultValue:this.props.element.step,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"step","value")}))),this.props.element.hasOwnProperty("min_value")&&m().createElement("div",{className:"mb-3"},m().createElement("div",{className:"form-group-range"},m().createElement("label",{className:"control-label",htmlFor:"rangeMin"},m().createElement(B.A,{id:"min"})),m().createElement("input",{id:"rangeMin",type:"number",className:"form-control",defaultValue:this.props.element.min_value,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"min_value","value")}),m().createElement("input",{type:"text",className:"form-control",defaultValue:this.props.element.min_label,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"min_label","value")}))),this.props.element.hasOwnProperty("max_value")&&m().createElement("div",{className:"mb-3"},m().createElement("div",{className:"form-group-range"},m().createElement("label",{className:"control-label",htmlFor:"rangeMax"},m().createElement(B.A,{id:"max"})),m().createElement("input",{id:"rangeMax",type:"number",className:"form-control",defaultValue:this.props.element.max_value,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"max_value","value")}),m().createElement("input",{type:"text",className:"form-control",defaultValue:this.props.element.max_label,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"max_label","value")}))),this.props.element.hasOwnProperty("default_value")&&m().createElement("div",{className:"mb-3"},m().createElement("div",{className:"form-group-range"},m().createElement("label",{className:"control-label",htmlFor:"defaultSelected"},m().createElement(B.A,{id:"default-selected"})),m().createElement("input",{id:"defaultSelected",type:"number",className:"form-control",defaultValue:this.props.element.default_value,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"default_value","value")}))),this.props.element.hasOwnProperty("static")&&this.props.element.static&&m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label"},m().createElement(B.A,{id:"text-style"})),m().createElement("div",{className:"form-check"},m().createElement("input",{id:"do-bold",className:"form-check-input",type:"checkbox",checked:c,value:!0,onChange:this.editElementProp.bind(this,"bold","checked")}),m().createElement("label",{className:"form-check-label",htmlFor:"do-bold"},m().createElement(B.A,{id:"bold"}))),m().createElement("div",{className:"form-check"},m().createElement("input",{id:"do-italic",className:"form-check-input",type:"checkbox",checked:p,value:!0,onChange:this.editElementProp.bind(this,"italic","checked")}),m().createElement("label",{className:"form-check-label",htmlFor:"do-italic"},m().createElement(B.A,{id:"italic"})))),this.props.element.showDescription&&m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label",htmlFor:"questionDescription"},m().createElement(B.A,{id:"description"})),m().createElement(C,{type:"text",className:"form-control",id:"questionDescription",defaultValue:this.props.element.description,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"description","value")})),this.props.showCorrectColumn&&this.props.element.canHaveAnswer&&!this.props.element.hasOwnProperty("options")&&m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label",htmlFor:"correctAnswer"},m().createElement(B.A,{id:"correct-answer"})),m().createElement("input",{id:"correctAnswer",type:"text",className:"form-control",defaultValue:this.props.element.correct,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"correct","value")})),this.props.element.canPopulateFromApi&&this.props.element.hasOwnProperty("options")&&m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label",htmlFor:"optionsApiUrl"},m().createElement(B.A,{id:"populate-options-from-api"})),m().createElement("div",{className:"row"},m().createElement("div",{className:"col-sm-6"},m().createElement("input",{className:"form-control",style:{width:"100%"},type:"text",id:"optionsApiUrl",placeholder:"http://localhost:8080/api/optionsdata"})),m().createElement("div",{className:"col-sm-6"},m().createElement("button",{onClick:this.addOptions.bind(this),className:"btn btn-success"},m().createElement(B.A,{id:"populate"}))))),this.props.element.hasOwnProperty("options")&&m().createElement(V,{showCorrectColumn:this.props.showCorrectColumn,canHaveOptionCorrect:y,canHaveOptionValue:g,data:this.props.preview.state.data,updateElement:this.props.updateElement,preview:this.props.preview,element:this.props.element,key:this.props.element.options.length}))}}])}(m().Component);H.defaultProps={className:"edit-element-fields"}}}]);
1	+ "use strict";(self.webpackChunkReactFormBuilder=self.webpackChunkReactFormBuilder\|\|[]).push([[845],{845:(e,t,a)=>{a.r(t),a.d(t,{default:()=>H});var l=a(3029),n=a(2901),r=a(6822),i=a(3954),o=a(5361),s=a(4467),c=a(4012),m=a.n(c),p=a(8168),d=a(8587),h=a(7003),u=function(e,t){"function"!=typeof e?e.current=t:e(t)},E={"min-height":"0","max-height":"none",height:"0",visibility:"hidden",overflow:"hidden",position:"absolute","z-index":"-1000",top:"0",right:"0",display:"block"},b=function(e){Object.keys(E).forEach(function(t){e.style.setProperty(t,E[t],"important")})},f=null,v=function(e,t){var a=e.scrollHeight;return"border-box"===t.sizingStyle.boxSizing?a+t.borderSize:a-t.paddingSize},y=function(){},g=["borderBottomWidth","borderLeftWidth","borderRightWidth","borderTopWidth","boxSizing","fontFamily","fontSize","fontStyle","fontWeight","letterSpacing","lineHeight","paddingBottom","paddingLeft","paddingRight","paddingTop","tabSize","textIndent","textRendering","textTransform","width","wordBreak","wordSpacing","scrollbarGutter"],N=!!document.documentElement.currentStyle;function k(e,t,a){var l,n,r=(l=a,n=m().useRef(l),(0,h.A)(function(){n.current=l}),n);c.useLayoutEffect(function(){var a=function(e){return r.current(e)};if(e)return e.addEventListener(t,a),function(){return e.removeEventListener(t,a)}},[])}var w=["cacheMeasurements","maxRows","minRows","onChange","onHeightChange"],x=function(e,t){var a,l=e.cacheMeasurements,n=e.maxRows,r=e.minRows,i=e.onChange,o=void 0===i?y:i,s=e.onHeightChange,h=void 0===s?y:s,E=(0,d.A)(e,w),x=void 0!==E.value,C=c.useRef(null),A=function(e,t){var a=m().useRef();return m().useCallback(function(l){e.current=l,a.current&&u(a.current,null),a.current=t,t&&u(t,l)},[t])}(C,t),P=c.useRef(0),_=c.useRef(),O=function(){var e=C.current,t=l&&_.current?_.current:function(e){var t=window.getComputedStyle(e);if(null===t)return null;var a,l=(a=t,g.reduce(function(e,t){return e[t]=a[t],e},{})),n=l.boxSizing;return""===n?null:(N&&"border-box"===n&&(l.width=parseFloat(l.width)+parseFloat(l.borderRightWidth)+parseFloat(l.borderLeftWidth)+parseFloat(l.paddingRight)+parseFloat(l.paddingLeft)+"px"),{sizingStyle:l,paddingSize:parseFloat(l.paddingBottom)+parseFloat(l.paddingTop),borderSize:parseFloat(l.borderBottomWidth)+parseFloat(l.borderTopWidth)})}(e);if(t){_.current=t;var a=function(e,t,a,l){void 0===a&&(a=1),void 0===l&&(l=1/0),f\|\|((f=document.createElement("textarea")).setAttribute("tabindex","-1"),f.setAttribute("aria-hidden","true"),b(f)),null===f.parentNode&&document.body.appendChild(f);var n=e.paddingSize,r=e.borderSize,i=e.sizingStyle,o=i.boxSizing;Object.keys(i).forEach(function(e){var t=e;f.style[t]=i[t]}),b(f),f.value=t;var s=v(f,e);f.value=t,s=v(f,e),f.value="x";var c=f.scrollHeight-n,m=ca;"border-box"===o&&(m=m+n+r),s=Math.max(m,s);var p=cl;return"border-box"===o&&(p=p+n+r),[s=Math.min(p,s),c]}(t,e.value\|\|e.placeholder\|\|"x",r,n),i=a[0],o=a[1];P.current!==i&&(P.current=i,e.style.setProperty("height",i+"px","important"),h(i,{rowHeight:o}))}};return c.useLayoutEffect(O),function(e,t){k(document.body,"reset",function(a){e.current.form===a.target&&t()})}(C,function(){if(!x){var e=C.current.value;requestAnimationFrame(function(){var t=C.current;t&&e!==t.value&&O()})}}),k(window,"resize",O),a=O,k(document.fonts,"loadingdone",a),c.createElement("textarea",(0,p.A)({},E,{onChange:function(e){x\|\|O(),o(e)},ref:A}))},C=c.forwardRef(x),A=a(5143),P=a(9987),_=a.n(P),O=a(3754),F=a(7654),S=a.n(F),B=a(8886);function L(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(L=function(){return!!e})()}var V=function(e){function t(e){var a,n,o,s;return(0,l.A)(this,t),n=this,o=t,s=[e],o=(0,i.A)(o),(a=(0,r.A)(n,L()?Reflect.construct(o,s\|\|[],(0,i.A)(n).constructor):o.apply(n,s))).state={element:a.props.element,data:a.props.data,dirty:!1},a}return(0,o.A)(t,e),(0,n.A)(t,[{key:"_setValue",value:function(e){return e.replace(/[^A-Z0-9]+/gi,"_").toLowerCase()}},{key:"editOption",value:function(e,t){var a=this.state.element,l=a.options[e].value!==this._setValue(a.options[e].text)?a.options[e].value:this._setValue(t.target.value);a.options[e].text=t.target.value,a.options[e].value=l,this.setState({element:a,dirty:!0})}},{key:"editValue",value:function(e,t){var a=this.state.element,l=""===t.target.value?this._setValue(a.options[e].text):t.target.value;a.options[e].value=l,this.setState({element:a,dirty:!0})}},{key:"editOptionCorrect",value:function(e,t){var a=this.state.element;a.options[e].hasOwnProperty("correct")?delete a.options[e].correct:a.options[e].correct=!0,this.setState({element:a}),this.props.updateElement.call(this.props.preview,a)}},{key:"updateOption",value:function(){var e=this.state.element;this.state.dirty&&(this.props.updateElement.call(this.props.preview,e),this.setState({dirty:!1}))}},{key:"addOption",value:function(e){var t=this.state.element,a=t.element.toLowerCase();t.options.splice(e+1,0,{value:"",text:"",key:"".concat(a,"_option_").concat(S().uuid())}),this.props.updateElement.call(this.props.preview,t)}},{key:"removeOption",value:function(e){var t=this.state.element;t.options.splice(e,1),this.props.updateElement.call(this.props.preview,t)}},{key:"render",value:function(){var e=this;return this.state.dirty&&(this.state.element.dirty=!0),m().createElement("div",{className:"dynamic-option-list"},m().createElement("ul",null,m().createElement("li",null,m().createElement("div",{className:"row"},m().createElement("div",{className:"col-sm-6"},m().createElement("b",null,m().createElement(B.A,{id:"options"}))),this.props.canHaveOptionValue&&m().createElement("div",{className:"col-sm-2"},m().createElement("b",null,m().createElement(B.A,{id:"value"}))),this.props.canHaveOptionValue&&this.props.canHaveOptionCorrect&&m().createElement("div",{className:"col-sm-4"},m().createElement("b",null,m().createElement(B.A,{id:"correct"}))))),this.props.element.options.map(function(t,a){var l="edit_".concat(t.key),n=t.value!==e._setValue(t.text)?t.value:"";return m().createElement("li",{className:"clearfix",key:l},m().createElement("div",{className:"row"},m().createElement("div",{className:"col-sm-6"},m().createElement("input",{tabIndex:a+1,className:"form-control",style:{width:"100%"},type:"text",name:"text_".concat(a),placeholder:"Option text",value:t.text,onBlur:e.updateOption.bind(e),onChange:e.editOption.bind(e,a)})),e.props.canHaveOptionValue&&m().createElement("div",{className:"col-sm-2"},m().createElement("input",{className:"form-control",type:"text",name:"value_".concat(a),value:n,onChange:e.editValue.bind(e,a)})),e.props.canHaveOptionValue&&e.props.canHaveOptionCorrect&&m().createElement("div",{className:"col-sm-1"},m().createElement("input",{className:"form-control",type:"checkbox",value:"1",onChange:e.editOptionCorrect.bind(e,a),checked:t.hasOwnProperty("correct")})),m().createElement("div",{className:"col-sm-3"},m().createElement("div",{className:"dynamic-options-actions-buttons"},m().createElement("button",{onClick:e.addOption.bind(e,a),className:"btn btn-success"},m().createElement("i",{className:"fas fa-plus-circle"})),a>0&&m().createElement("button",{onClick:e.removeOption.bind(e,a),className:"btn btn-danger"},m().createElement("i",{className:"fas fa-minus-circle"}))))))})))}}])}(m().Component),T=a(968);function z(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(z=function(){return!!e})()}var I={options:["inline","list","textAlign","fontSize","link","history"],inline:{inDropdown:!1,className:void 0,options:["bold","italic","underline","superscript","subscript"]}},H=function(e){function t(e){var a,n,o,c;return(0,l.A)(this,t),n=this,o=t,c=[e],o=(0,i.A)(o),a=(0,r.A)(n,z()?Reflect.construct(o,c\|\|[],(0,i.A)(n).constructor):o.apply(n,c)),(0,s.A)(a,"handleUploadLayoutChange",function(e){var t=a.state.element;t.upload_layout=e.target.value,a.setState({element:t,dirty:!0},function(){a.updateElement()})}),a.state={element:a.props.element,data:a.props.data,dirty:!1},a}return(0,o.A)(t,e),(0,n.A)(t,[{key:"toggleRequired",value:function(){}},{key:"editElementProp",value:function(e,t,a){var l=this,n=this.state.element;n[e]=a.target[t],this.setState({element:n,dirty:!0},function(){"checked"===t&&l.updateElement()})}},{key:"onEditorStateChange",value:function(e,t,a){var l=_()((0,A.convertToRaw)(a.getCurrentContent())).replace(/<p>/g,"<div>").replace(/<\/p>/g,"</div>"),n=this.state.element;n[t]=l,this.setState({element:n,dirty:!0})}},{key:"updateElement",value:function(){var e=this.state.element;this.state.dirty&&(this.props.updateElement.call(this.props.preview,e),this.setState({dirty:!1}))}},{key:"convertFromHTML",value:function(e){var t=(0,A.convertFromHTML)(e);if(!t.contentBlocks\|\|!t.contentBlocks.length)return A.EditorState.createEmpty();var a=A.ContentState.createFromBlockArray(t);return A.EditorState.createWithContent(a)}},{key:"addOptions",value:function(){var e=this,t=document.getElementById("optionsApiUrl").value;t&&(0,T.J)(t).then(function(t){e.props.element.options=[];var a=e.props.element.options;t.forEach(function(e){e.key=S().uuid(),a.push(e)});var l=e.state.element;e.setState({element:l,dirty:!0})})}},{key:"validateImageSize",value:function(e){/^$\|^\d+(px\|%)$/.test(e.target.value)?(e.target.classList.remove("is-invalid"),e.target.classList.add("is-valid")):(e.target.classList.remove("is-valid"),e.target.classList.add("is-invalid"))}},{key:"render",value:function(){var e;this.state.dirty&&(this.props.element.dirty=!0);var t,a=!!this.props.element.hasOwnProperty("required")&&this.props.element.required,l=!!this.props.element.hasOwnProperty("readOnly")&&this.props.element.readOnly,n=!!this.props.element.hasOwnProperty("defaultToday")&&this.props.element.defaultToday,r=!!this.props.element.hasOwnProperty("showTimeSelect")&&this.props.element.showTimeSelect,i=!!this.props.element.hasOwnProperty("showTimeSelectOnly")&&this.props.element.showTimeSelectOnly,o=!!this.props.element.hasOwnProperty("showTimeInput")&&this.props.element.showTimeInput,s=!!this.props.element.hasOwnProperty("inline")&&this.props.element.inline,c=!!this.props.element.hasOwnProperty("bold")&&this.props.element.bold,p=!!this.props.element.hasOwnProperty("italic")&&this.props.element.italic,d=!!this.props.element.hasOwnProperty("center")&&this.props.element.center,h=!!this.props.element.hasOwnProperty("pageBreakBefore")&&this.props.element.pageBreakBefore,u=!!this.props.element.hasOwnProperty("alternateForm")&&this.props.element.alternateForm,E=this.props.element,b=E.canHavePageBreakBefore,f=E.canHaveAlternateForm,v=E.canHaveDisplayHorizontal,y=E.canHaveOptionCorrect,g=E.canHaveOptionValue,N="Image"===this.state.element.element\|\|"Camera"===this.state.element.element,k="Camera"===this.state.element.element\|\|"FileUpload"===this.state.element.element,w=this.props.files.length?this.props.files:[];return(w.length<1\|\|w.length>0&&""!==w[0].id)&&w.unshift({id:"",file_name:""}),this.props.element.hasOwnProperty("content")&&(t=this.convertFromHTML(this.props.element.content)),this.props.element.hasOwnProperty("label")&&(t=this.convertFromHTML(this.props.element.label)),m().createElement("div",null,m().createElement("div",{className:"clearfix"},m().createElement("h4",{className:"float-start"},this.props.element.text),m().createElement("i",{className:"float-end fas fa-times dismiss-edit",onClick:this.props.manualEditModeOff})),this.props.element.hasOwnProperty("content")&&m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label"},m().createElement(B.A,{id:"text-to-display"}),":"),m().createElement(O.Editor,{toolbar:I,defaultEditorState:t,onBlur:this.updateElement.bind(this),onEditorStateChange:this.onEditorStateChange.bind(this,0,"content"),stripPastedStyles:!0})),this.props.element.hasOwnProperty("file_path")&&m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label",htmlFor:"fileSelect"},m().createElement(B.A,{id:"choose-file"}),":"),m().createElement("select",{id:"fileSelect",className:"form-control",defaultValue:this.props.element.file_path,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"file_path","value")},w.map(function(e){var t="file_".concat(e.id);return m().createElement("option",{value:e.id,key:t},e.file_name)}))),this.props.element.hasOwnProperty("href")&&m().createElement("div",{className:"mb-3"},m().createElement(C,{type:"text",className:"form-control",defaultValue:this.props.element.href,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"href","value")})),this.props.element.hasOwnProperty("label")&&m().createElement("div",{className:"mb-3"},m().createElement("label",null,m().createElement(B.A,{id:"display-label"})),m().createElement(O.Editor,{toolbar:I,defaultEditorState:t,onBlur:this.updateElement.bind(this),onEditorStateChange:this.onEditorStateChange.bind(this,0,"label"),stripPastedStyles:!0}),m().createElement("br",null),m().createElement("div",{className:"form-check"},m().createElement("input",{id:"is-required",className:"form-check-input",type:"checkbox",checked:a,value:!0,onChange:this.editElementProp.bind(this,"required","checked")}),m().createElement("label",{className:"form-check-label",htmlFor:"is-required"},m().createElement(B.A,{id:"required"}))),a&&"Checkboxes"===this.state.element.element&&m().createElement("div",{className:"d-flex align-items-center gap-2"},m().createElement("label",{className:"form-label mb-0",htmlFor:"checkbox-required-checks"},m().createElement(B.A,{id:"minimum-number-of-selections"}),":"),m().createElement("input",{id:"checkbox-required-checks",type:"number",min:"1",className:"form-control d-inline-block",style:{width:"8ch"},value:null!==(e=this.props.element.checkbox_required_checks)&&void 0!==e?e:"1",onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"checkbox_required_checks","value")})),this.props.element.hasOwnProperty("readOnly")&&m().createElement("div",{className:"form-check"},m().createElement("input",{id:"is-read-only",className:"form-check-input",type:"checkbox",checked:l,value:!0,onChange:this.editElementProp.bind(this,"readOnly","checked")}),m().createElement("label",{className:"form-check-label",htmlFor:"is-read-only"},m().createElement(B.A,{id:"read-only"}))),this.props.element.hasOwnProperty("defaultToday")&&m().createElement("div",{className:"form-check"},m().createElement("input",{id:"is-default-to-today",className:"form-check-input",type:"checkbox",checked:n,value:!0,onChange:this.editElementProp.bind(this,"defaultToday","checked")}),m().createElement("label",{className:"form-check-label",htmlFor:"is-default-to-today"},m().createElement(B.A,{id:"default-to-today"}),"?")),this.props.element.hasOwnProperty("showTimeSelect")&&m().createElement("div",{className:"form-check"},m().createElement("input",{id:"show-time-select",className:"form-check-input",type:"checkbox",checked:r,value:!0,onChange:this.editElementProp.bind(this,"showTimeSelect","checked")}),m().createElement("label",{className:"form-check-label",htmlFor:"show-time-select"},m().createElement(B.A,{id:"show-time-select"}),"?")),r&&this.props.element.hasOwnProperty("showTimeSelectOnly")&&m().createElement("div",{className:"form-check"},m().createElement("input",{id:"show-time-select-only",className:"form-check-input",type:"checkbox",checked:i,value:!0,onChange:this.editElementProp.bind(this,"showTimeSelectOnly","checked")}),m().createElement("label",{className:"form-check-label",htmlFor:"show-time-select-only"},m().createElement(B.A,{id:"show-time-select-only"}),"?")),this.props.element.hasOwnProperty("showTimeInput")&&m().createElement("div",{className:"form-check"},m().createElement("input",{id:"show-time-input",className:"form-check-input",type:"checkbox",checked:o,value:!0,onChange:this.editElementProp.bind(this,"showTimeInput","checked")}),m().createElement("label",{className:"form-check-label",htmlFor:"show-time-input"},m().createElement(B.A,{id:"show-time-input"}),"?")),("RadioButtons"===this.state.element.element\|\|"Checkboxes"===this.state.element.element)&&v&&m().createElement("div",{className:"form-check"},m().createElement("input",{id:"display-horizontal",className:"form-check-input",type:"checkbox",checked:s,value:!0,onChange:this.editElementProp.bind(this,"inline","checked")}),m().createElement("label",{className:"form-check-label",htmlFor:"display-horizontal"},m().createElement(B.A,{id:"display-horizontal"})))),this.props.element.hasOwnProperty("src")&&m().createElement("div",null,m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label",htmlFor:"srcInput"},m().createElement(B.A,{id:"link-to"}),":"),m().createElement("input",{id:"srcInput",type:"text",className:"form-control",defaultValue:this.props.element.src,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"src","value")}))),k&&m().createElement("div",null,m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label bold"},m().createElement(B.A,{id:"upload-layout"}),":"),m().createElement("div",{className:"d-flex align-items-center gap-3"},m().createElement("div",{className:"form-check d-flex align-items-center"},m().createElement("input",{className:"form-check-input",type:"radio",name:"uploadLayout",id:"uploadLayoutStandard",value:"standard",checked:"standard"===this.props.element.upload_layout,onChange:this.handleUploadLayoutChange}),m().createElement("label",{className:"form-check-label ms-2",htmlFor:"uploadLayoutStandard"},m().createElement(B.A,{id:"upload-layout-standard"}))),m().createElement("div",{className:"form-check d-flex align-items-center"},m().createElement("input",{className:"form-check-input",type:"radio",name:"uploadLayout",id:"uploadLayoutDropZone",value:"dropzone",checked:"dropzone"===this.props.element.upload_layout,onChange:this.handleUploadLayoutChange}),m().createElement("label",{className:"form-check-label ms-2",htmlFor:"uploadLayoutDropZone"},m().createElement(B.A,{id:"upload-layout-dropzone"})))))),"Camera"===this.state.element.element&&m().createElement("div",null,m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label",htmlFor:"LabelAfterCameraIcon"},m().createElement(B.A,{id:"display-label-after-camera-icon"}),":"),m().createElement("input",{id:"LabelAfterCameraIcon",type:"text",className:"form-control",defaultValue:this.props.element.label_after_camera_icon,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"label_after_camera_icon","value")})),m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label",htmlFor:"MessageUnderCameraIcon"},m().createElement(B.A,{id:"display-message-under-camera-icon"}),":"),m().createElement("input",{id:"MessageUnderCameraIcon",type:"text",className:"form-control",defaultValue:this.props.element.message_under_camera_icon,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"message_under_camera_icon","value")})),m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label",htmlFor:"LabelAfterPhotoClearIcon"},m().createElement(B.A,{id:"display-label-after-photo-clear-icon"}),":"),m().createElement("input",{id:"LabelAfterPhotoClearIcon",type:"text",className:"form-control",defaultValue:this.props.element.label_after_photo_clear_icon,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"label_after_photo_clear_icon","value")}))),N&&m().createElement("div",null,m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label bold"},m().createElement(B.A,{id:"image-layout"}),":"),m().createElement("div",{className:"form-check"},m().createElement("input",{id:"do-center",className:"form-check-input",type:"checkbox",checked:d,value:!0,onChange:this.editElementProp.bind(this,"center","checked")}),m().createElement("label",{className:"form-check-label",htmlFor:"do-center"},m().createElement(B.A,{id:"center"}),"?"))),m().createElement("div",{className:"row mb-3"},m().createElement("div",{className:"col-sm-3"},m().createElement("label",{className:"control-label",htmlFor:"elementWidth"},m().createElement(B.A,{id:"width"}),":"),m().createElement("input",{id:"elementWidth",type:"text",className:"form-control",pattern:"^$\|^\\d+(px\|%)$",onInput:this.validateImageSize,defaultValue:this.props.element.width,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"width","value")})),m().createElement("div",{className:"col-sm-3"},m().createElement("label",{className:"control-label",htmlFor:"elementHeight"},m().createElement(B.A,{id:"height"}),":"),m().createElement("input",{id:"elementHeight",type:"text",className:"form-control",pattern:"^$\|^\\d+(px\|%)$",onInput:this.validateImageSize,defaultValue:this.props.element.height,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"height","value")})),m().createElement("small",{className:"form-text text-muted"},"Use ",m().createElement("code",null,"px")," or ",m().createElement("code",null,"%")," (e.g. 200px, 100%)."))),"FileUpload"===this.state.element.element&&m().createElement("div",null,m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label",htmlFor:"LabelAfterFileIcon"},m().createElement(B.A,{id:"display-label-after-file-icon"}),":"),m().createElement("input",{id:"LabelAfterFileIcon",type:"text",className:"form-control",defaultValue:this.props.element.label_after_file_icon,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"label_after_file_icon","value")})),m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label",htmlFor:"MessageUnderFileIcon"},m().createElement(B.A,{id:"display-message-under-file-icon"}),":"),m().createElement("input",{id:"MessageUnderFileIcon",type:"text",className:"form-control",defaultValue:this.props.element.message_under_file_icon,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"message_under_file_icon","value")})),m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label",htmlFor:"LabelAfterFileClearIcon"},m().createElement(B.A,{id:"display-label-after-file-clear-icon"}),":"),m().createElement("input",{id:"LabelAfterFileClearIcon",type:"text",className:"form-control",defaultValue:this.props.element.label_after_file_clear_icon,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"label_after_file_clear_icon","value")})),m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label",htmlFor:"fileType"},m().createElement(B.A,{id:"choose-file-type"}),":"),m().createElement("select",{id:"fileType",className:"form-control",onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"fileType","value")},[{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/",typeName:"All File Type"},{type:"image",typeName:"Image"},{type:"application/pdf",typeName:"PDF"},{type:"application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document",typeName:"Word"},{type:"application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",typeName:"Excel"},{type:"application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.presentation",typeName:"Powerpoint"},{type:"video/mp4,video/x-m4v,video/",typeName:"Videos"}].map(function(e,t){return m().createElement("option",{value:e.type,key:t},e.typeName)})))),"Signature"===this.state.element.element&&this.props.element.readOnly?m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label",htmlFor:"variableKey"},m().createElement(B.A,{id:"variable-key"}),":"),m().createElement("input",{id:"variableKey",type:"text",className:"form-control",defaultValue:this.props.element.variableKey,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"variableKey","value")}),m().createElement("p",{className:"help-block"},m().createElement(B.A,{id:"variable-key-desc"}),".")):m().createElement("div",null),b&&m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label"},m().createElement(B.A,{id:"print-options"})),m().createElement("div",{className:"form-check"},m().createElement("input",{id:"page-break-before-element",className:"form-check-input",type:"checkbox",checked:h,value:!0,onChange:this.editElementProp.bind(this,"pageBreakBefore","checked")}),m().createElement("label",{className:"form-check-label",htmlFor:"page-break-before-element"},m().createElement(B.A,{id:"page-break-before-elements"}),"?"))),f&&m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label"},m().createElement(B.A,{id:"alternate-signature-page"})),m().createElement("div",{className:"form-check"},m().createElement("input",{id:"display-on-alternate",className:"form-check-input",type:"checkbox",checked:u,value:!0,onChange:this.editElementProp.bind(this,"alternateForm","checked")}),m().createElement("label",{className:"form-check-label",htmlFor:"display-on-alternate"},m().createElement(B.A,{id:"display-on-alternate-signature-page"}),"?"))),this.props.element.hasOwnProperty("step")&&m().createElement("div",{className:"mb-3"},m().createElement("div",{className:"form-group-range"},m().createElement("label",{className:"control-label",htmlFor:"rangeStep"},m().createElement(B.A,{id:"step"})),m().createElement("input",{id:"rangeStep",type:"number",className:"form-control",defaultValue:this.props.element.step,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"step","value")}))),this.props.element.hasOwnProperty("min_value")&&m().createElement("div",{className:"mb-3"},m().createElement("div",{className:"form-group-range"},m().createElement("label",{className:"control-label",htmlFor:"rangeMin"},m().createElement(B.A,{id:"min"})),m().createElement("input",{id:"rangeMin",type:"number",className:"form-control",defaultValue:this.props.element.min_value,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"min_value","value")}),m().createElement("input",{type:"text",className:"form-control",defaultValue:this.props.element.min_label,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"min_label","value")}))),this.props.element.hasOwnProperty("max_value")&&m().createElement("div",{className:"mb-3"},m().createElement("div",{className:"form-group-range"},m().createElement("label",{className:"control-label",htmlFor:"rangeMax"},m().createElement(B.A,{id:"max"})),m().createElement("input",{id:"rangeMax",type:"number",className:"form-control",defaultValue:this.props.element.max_value,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"max_value","value")}),m().createElement("input",{type:"text",className:"form-control",defaultValue:this.props.element.max_label,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"max_label","value")}))),this.props.element.hasOwnProperty("default_value")&&m().createElement("div",{className:"mb-3"},m().createElement("div",{className:"form-group-range"},m().createElement("label",{className:"control-label",htmlFor:"defaultSelected"},m().createElement(B.A,{id:"default-selected"})),m().createElement("input",{id:"defaultSelected",type:"number",className:"form-control",defaultValue:this.props.element.default_value,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"default_value","value")}))),this.props.element.hasOwnProperty("static")&&this.props.element.static&&m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label"},m().createElement(B.A,{id:"text-style"})),m().createElement("div",{className:"form-check"},m().createElement("input",{id:"do-bold",className:"form-check-input",type:"checkbox",checked:c,value:!0,onChange:this.editElementProp.bind(this,"bold","checked")}),m().createElement("label",{className:"form-check-label",htmlFor:"do-bold"},m().createElement(B.A,{id:"bold"}))),m().createElement("div",{className:"form-check"},m().createElement("input",{id:"do-italic",className:"form-check-input",type:"checkbox",checked:p,value:!0,onChange:this.editElementProp.bind(this,"italic","checked")}),m().createElement("label",{className:"form-check-label",htmlFor:"do-italic"},m().createElement(B.A,{id:"italic"})))),this.props.element.showDescription&&m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label",htmlFor:"questionDescription"},m().createElement(B.A,{id:"description"})),m().createElement(C,{type:"text",className:"form-control",id:"questionDescription",defaultValue:this.props.element.description,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"description","value")})),this.props.showCorrectColumn&&this.props.element.canHaveAnswer&&!this.props.element.hasOwnProperty("options")&&m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label",htmlFor:"correctAnswer"},m().createElement(B.A,{id:"correct-answer"})),m().createElement("input",{id:"correctAnswer",type:"text",className:"form-control",defaultValue:this.props.element.correct,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"correct","value")})),this.props.element.canPopulateFromApi&&this.props.element.hasOwnProperty("options")&&m().createElement("div",{className:"mb-3"},m().createElement("label",{className:"control-label",htmlFor:"optionsApiUrl"},m().createElement(B.A,{id:"populate-options-from-api"})),m().createElement("div",{className:"row"},m().createElement("div",{className:"col-sm-6"},m().createElement("input",{className:"form-control",style:{width:"100%"},type:"text",id:"optionsApiUrl",placeholder:"http://localhost:8080/api/optionsdata"})),m().createElement("div",{className:"col-sm-6"},m().createElement("button",{onClick:this.addOptions.bind(this),className:"btn btn-success"},m().createElement(B.A,{id:"populate"}))))),this.props.element.hasOwnProperty("options")&&m().createElement(V,{showCorrectColumn:this.props.showCorrectColumn,canHaveOptionCorrect:y,canHaveOptionValue:g,data:this.props.preview.state.data,updateElement:this.props.updateElement,preview:this.props.preview,element:this.props.element,key:this.props.element.options.length}))}}])}(m().Component);H.defaultProps={className:"edit-element-fields"}}}]);