@arudovwen/react-form-builder
Version:
A complete form builder for react.
1 lines • 57 kB
JavaScript
"use strict";(self.webpackChunkReactFormBuilder=self.webpackChunkReactFormBuilder||[]).push([[613],{5613:(e,t,l)=>{l.r(t),l.d(t,{default:()=>K});var a=l(4467),n=l(4012),s=l.n(n),o=l(9385),r=l(5143),i=l(9987),m=l.n(i),c=l(3754),p=l(1083),d=l(9386),u=l.n(d),h=l(7654),E=l.n(h);class b extends s().Component{constructor(e){super(e),this.state={element:e.element,dirty:!1},this.editValue=this.editValue.bind(this),this.editText=this.editText.bind(this),this.editKey=this.editKey.bind(this),this.editCorrect=this.editCorrect.bind(this),this.updateElement=this.updateElement.bind(this)}editValue(e,t){const l=this.state.element;l.options[e].value=t.target.value,this.setState({element:l,dirty:!0})}editText(e,t){const l=this.state.element;l.options[e].text=t.target.value,this.setState({element:l,dirty:!0})}editKey(e,t){const l=this.state.element;l.options[e].key=t.target.value,this.setState({element:l,dirty:!0})}editCorrect(e,t){const l=this.state.element;l.options[e].correct=t.target.checked,this.setState({element:l,dirty:!0})}updateElement(){this.props.updateElement.call(this.props.preview,this.state.element),this.setState({dirty:!1})}addOption(){const e=this.state.element,t=e.element.toLowerCase();e.options.push({value:"",text:"",key:"",correct:!1,id:`${t}_option_${E().uuid()}`}),this.props.updateElement.call(this.props.preview,e)}removeOption(e){const t=this.state.element;t.options.splice(e,1),this.props.updateElement.call(this.props.preview,t)}render(){return s().createElement("div",{className:"w-full"},this.state.element.options.map((e,t)=>s().createElement("div",{key:e.id,className:"flex gap-2 mb-2"},s().createElement("div",{className:"w-1/4"},s().createElement("input",{className:"w-full px-2 py-1 border border-gray-300 rounded",type:"text",value:e.text||"",onChange:e=>this.editText(t,e),placeholder:"Enter text"})),s().createElement("div",{className:"w-1/4"},s().createElement("input",{className:"w-full px-2 py-1 border border-gray-300 rounded",type:"text",value:e.value||"",onChange:e=>this.editValue(t,e),placeholder:"Enter value"})),s().createElement("div",{className:"w-1/4"},s().createElement("input",{className:"w-full px-2 py-1 border border-gray-300 rounded",type:"text",value:e.key||"",onChange:e=>this.editKey(t,e),placeholder:"Enter key"})),s().createElement("div",{className:"flex items-center"},s().createElement("input",{type:"checkbox",checked:!!e.correct,onChange:e=>this.editCorrect(t,e)})),s().createElement("div",null,s().createElement("button",{type:"button",className:"px-2 py-1 text-white bg-red-500 rounded",onClick:()=>this.removeOption(t)},"✕")))),s().createElement("div",{className:"mt-2"},s().createElement("button",{type:"button",className:"px-3 py-1 text-white bg-blue-500 rounded",onClick:()=>this.addOption()},"+ Add Option")),this.state.dirty&&s().createElement("div",{className:"mt-2"},s().createElement("button",{type:"button",className:"px-3 py-1 text-white bg-green-500 rounded",onClick:this.updateElement},"Save Changes")))}}var y=l(968),g=l(1317),v=l(8886);const f=()=>s().createElement("blockquote",null,s().createElement("ul",null,s().createElement("li",{className:"text-13"},"API URL example format: https://example.com/validation/{value}"),s().createElement("li",{className:"text-13"},"Response example format:",s().createElement("pre",{className:"bg-white p-2 rounded-md"},s().createElement("code",null,s().createElement("span",null,"{"," ")," ",s().createElement("br",null),s().createElement("span",null,' "data":{')," ",s().createElement("br",null),s().createElement("span",null,' "status": true,')," ",s().createElement("br",null),s().createElement("span",null,' "description": JOHN DOE,')," ",s().createElement("br",null),s().createElement("span",null," }"),s().createElement("br",null),s().createElement("span",null," }"))))));var N=l(5004);function x({value:e=[],onChange:t,onGetValue:l}){const[a,o]=(0,n.useState)(e?.length>0?e:[{value:""}]);return(0,n.useEffect)(()=>{e?.length>0&&JSON.stringify(e)!==JSON.stringify(a)&&o(e)},[e]),(0,n.useEffect)(()=>{l&&l(JSON.stringify({values:a}))},[l,a]),s().createElement("div",{style:{maxWidth:"250px"}},s().createElement("div",{className:"overflow-hidden border border-gray-200 rounded-lg"},s().createElement("div",{className:"grid text-sm font-bold border-b border-gray-100 bg-gray-50"},s().createElement("div",{className:"px-2 py-2"},s().createElement("span",{className:""},"Add Denominations"))),a.map((e,l)=>s().createElement("div",{key:e.key||l,className:"grid text-sm border-b border-gray-100"},s().createElement("div",{className:"flex items-center px-2 py-1 gap-x-4"},s().createElement("span",{className:"flex-1"},s().createElement(N.Ay,{id:"input-example",className:"w-full px-3 py-1 border border-gray-100 rounded outline-none",decimalsLimit:6,defaultValue:e.value,onValueChange:e=>function(e,l){const n=[...a];n[l]={...n[l],value:e},o(n),t&&t(n)}(e,l),allowNegativeValue:!1})),s().createElement("button",{onClick:()=>function(e){const l=a.filter((t,l)=>l!==e);o(l),t&&t(l)}(l),className:"px-2 text-red-500 hover:text-red-700",type:"button","aria-label":"Remove row"},"×"))))),s().createElement("div",{className:"flex justify-end mt-1"},s().createElement("button",{type:"button",onClick:function(){const e=[...a,{value:""}];o(e),t&&t(e)},className:"font-semibold !text-blue-700 font-bold text-sm rounded outline-0 focus:outline-0"},"+ Add")))}const w=({initialFields:e=[],onChange:t})=>{const[l,a]=(0,n.useState)(e),o=(e,t,n)=>{const s=[...l];s[e][t]=n,a(s)};return(0,n.useEffect)(()=>{t(l)},[l]),s().createElement(s().Fragment,null,s().createElement("div",{className:"mb-6"},l.map((e,t)=>s().createElement("div",{key:t,className:"flex gap-x-[10px] mb-2"},s().createElement("input",{placeholder:"Enter Key",value:e.key,onChange:e=>o(t,"key",e.target.value),className:"input-style"}),s().createElement("input",{placeholder:"Enter Label",value:e.label,onChange:e=>o(t,"label",e.target.value),className:"input-style"}),s().createElement("select",{onChange:e=>o(t,"type",e.target.value),className:"input-style"},s().createElement("option",{value:"text"},"Text"),s().createElement("option",{value:"number"},"Number"),s().createElement("option",{value:"date"},"Date")),s().createElement("button",{type:"button",onClick:()=>(e=>{a(l.filter((t,l)=>l!==e))})(t),className:"ml-1 text-xs outline-none"},"Remove"))),s().createElement("button",{type:"button",className:"text-xs outline-none",onClick:()=>{a([...l,{key:"",label:"",value:"",type:"text"}])}},"Add Field")),s().createElement("pre",{style:{fontSize:"8px"},className:"text-[8px]"},JSON.stringify(l,null,2)))};var C=l(7190),k=l.n(C),P=l(3959);const F=({setValue:e,name:t})=>{const[l,a]=(0,n.useState)("");return s().createElement("div",{className:""},s().createElement("div",{className:"relative"},s().createElement("input",{type:"file",accept:".csv,.xlsx,.xls",onChange:l=>{const n=l.target.files[0];if(!n)return;a(n.name);const s=new FileReader;n.name.endsWith(".csv")?(s.onload=l=>{const a=l?.target.result,n=k().parse(a,{header:!0});e(t,n.data)},s.readAsText(n)):(n.name.endsWith(".xlsx")||n.name.endsWith(".xls"))&&(s.onload=l=>{const a=new Uint8Array(l.target.result),n=P.LF(a,{type:"array"}),s=n.SheetNames[0],o=n.Sheets[s],r=P.Wp.sheet_to_json(o);e(t,r)},s.readAsArrayBuffer(n))},className:"mb-2 input-control file:bg-gray-600 file:text-white file:text-sm file:rounded file:border-gray-600 file:outline-none file-style input-style "}),l&&s().createElement("p",{className:"mb-2 text-[10px] text-gray-600"},"Uploaded: ",l)),s().createElement("a",{href:"https://res.cloudinary.com/arudovwen-me/raw/upload/v1754861915/Options_sheet_wnyr4o.xlsx",download:!0,className:"mt-1 text-sm text-white text-primary font-weight-medium"},"Download template"))};class O extends s().Component{constructor(e){super(e),(0,a.A)(this,"updateOption",(e,t,l)=>{this.setState(a=>{const n={...a.element};return n.options||(n.options=[]),n.options[e]={...n.options[e],[t]:l},{element:n,dirty:!0}})}),(0,a.A)(this,"editCorrectValue",(e,t)=>{this.updateOption(e,"correct",t.target.checked)}),(0,a.A)(this,"addOption",()=>{this.setState(e=>{const t={...e.element};t.options||(t.options=[]);const l=t.element?.toLowerCase?.()||"unknown";return t.options.push({value:"",text:"",key:"",correct:!1,id:`${l}_option_${E().uuid()}`}),this.props.updateElement&&this.props.updateElement.call(this.props.preview,t),{element:t}})}),(0,a.A)(this,"removeOption",e=>{this.setState(t=>{const l={...t.element};return Array.isArray(l.options)&&l.options.splice(e,1),{element:l,dirty:!0}})}),this.state={element:e.element||{options:[]},dirty:!1}}render(){const e=this.state.element?.options||[];return s().createElement("div",{className:"p-4 bg-white border rounded"},s().createElement("div",{className:"grid grid-cols-5 gap-2 pb-2 mb-2 font-semibold border-b"},s().createElement("div",null,"Text"),s().createElement("div",null,"Value"),s().createElement("div",null,"Key"),s().createElement("div",null,"Correct"),s().createElement("div",null,"Actions")),e.map((e,t)=>s().createElement("div",{key:e.id||t,className:"grid items-center grid-cols-5 gap-2 mb-2"},s().createElement("input",{className:"input-style",type:"text",value:e.text||"",onChange:e=>this.updateOption(t,"text",e.target.value),placeholder:"Enter text"}),s().createElement("input",{className:"input-style",type:"text",value:e.value||"",onChange:e=>this.updateOption(t,"value",e.target.value),placeholder:"Enter value"}),s().createElement("input",{className:"input-style",type:"text",value:e.key||"",onChange:e=>this.updateOption(t,"key",e.target.value),placeholder:"Enter key"}),s().createElement("input",{type:"checkbox",checked:e.correct||!1,onChange:e=>this.editCorrectValue(t,e),className:"w-5 h-5"}),s().createElement("button",{type:"button",className:"px-3 py-1 text-white bg-red-500 rounded hover:bg-red-600",onClick:()=>this.removeOption(t)},"Remove"))),s().createElement("button",{type:"button",className:"px-4 py-2 mt-3 text-white bg-blue-500 rounded hover:bg-blue-600",onClick:this.addOption},"Add Option"))}}const S=O,A=({initialFields:e,onChange:t})=>{const[l,a]=(0,n.useState)(e||""),[o,r]=(0,n.useState)(!1);return s().createElement("div",{className:"mb-6"},s().createElement("div",{className:"flex gap-x-[10px] mb-2 items-center"},s().createElement("input",{placeholder:"Load from URL",value:l,onChange:e=>a(e.target.value),className:"input-style"}),s().createElement("button",{type:"button",onClick:async()=>{if(l){r(!0);try{const{data:e}=await(0,y.J)(l);t&&t(e)}catch(e){console.error("Failed to load data:",e)}finally{r(!1)}}},disabled:o,className:"button-style "+(o?"bg-gray-400 cursor-not-allowed":"bg-gray-600")},o?"Loading...":"Load")))},D=()=>s().createElement("blockquote",{style:{fontSize:"11px",marginBottom:"8px"},className:"p-2 space-y-2 text-sm text-gray-700 bg-gray-100 rounded-md"},s().createElement("ul",{className:"space-y-1 list-disc list-inside"},s().createElement("li",null,s().createElement("strong",null,"Method:")," ",s().createElement("code",null,"GET")),s().createElement("li",{style:{fontSize:"11px"}},s().createElement("strong",null,"Response format:"),s().createElement("pre",{className:"p-2 mt-1 overflow-auto text-xs bg-white rounded-md"},s().createElement("code",null,'{\n "data": [\n { "text": "Option 1", "value": "1", "key": "" },\n { "text": "Option 2", "value": "2", "key": "" }\n ]\n}')))));var M=l(4778),T=l(3966),B=l(3794),V=l(9158);function L({value:e=[],onChange:t,options:l}){const[a,o]=(0,n.useState)(e);(0,n.useEffect)(()=>{t&&t(a)},[a]);const r=l.filter(e=>!a.some(t=>t.id===e.id));return s().createElement("div",{className:"space-y-2"},s().createElement(M.WF,{value:a,onChange:o,multiple:!0},s().createElement("div",{className:"relative mt-1"},s().createElement(M.WF.Button,{className:"relative w-full py-2 pl-3 pr-10 text-sm text-left bg-white border border-gray-300 rounded shadow-sm cursor-default focus:outline-none"},s().createElement("span",{className:"block truncate"},a.length>0?a.map(e=>e?.label).join(", "):"Select options"),s().createElement("span",{className:"absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"},s().createElement(T.A,{className:"w-4 h-4 text-gray-400"}))),s().createElement(M.WF.Options,{className:"absolute z-10 w-full py-1 mt-1 overflow-auto text-base bg-white border border-gray-200 rounded shadow max-h-60 focus:outline-none sm:text-sm"},r.length>0?r.map(e=>s().createElement(M.WF.Option,{key:e.id,value:e,className:({active:e})=>"relative cursor-pointer select-none py-2 pl-4 pr-4 "+(e?"bg-blue-100 text-blue-900":"text-gray-900")},({selected:t})=>s().createElement(s().Fragment,null,s().createElement("span",{className:"block truncate "+(t?"font-medium":"font-normal")},e.label),t?s().createElement("span",{className:"absolute inset-y-0 left-0 flex items-center pl-3 text-blue-600"},s().createElement(B.A,{className:"w-4 h-4","aria-hidden":"true"})):null))):s().createElement("div",{className:"px-4 py-2 text-gray-500"},"No option selected")))),a.length>0&&s().createElement("div",{className:"flex flex-wrap gap-2 mt-[6px]"},a.map(e=>s().createElement("span",{key:e.id,className:"flex items-center px-2 py-1 text-xs bg-gray-100 border rounded-full"},e.label,s().createElement("button",{type:"button",onClick:()=>{return t=e.id,void o(e=>e.filter(e=>e.id!==t));var t},className:"ml-1 text-gray-500 hover:text-gray-700"},s().createElement(V.A,{className:"w-3 h-3"}))))))}function _({value:e=[],onChange:t,onGetUrl:l}){const[a,o]=(0,n.useState)(e.length>0?e:[{id:Date.now(),field:"",headerName:"",type:"text",editable:!0,validate:!1}]),[r,i]=(0,n.useState)(""),m=(e,l,n)=>{const s=a.map((t,a)=>a===e?{...t,[l]:n}:t);o(s),t&&t(s)};return(0,n.useEffect)(()=>{l(r)},[r]),s().createElement("div",{className:"space-y-2"},a.map((e,l)=>s().createElement("div",{key:e.id},s().createElement("div",{className:"flex items-center gap-x-4"},s().createElement("div",{className:"flex-1"},s().createElement("select",{value:e.type,onChange:e=>m(l,"type",e.target.value),className:"w-full px-2 py-1 text-sm border rounded focus:outline-none"},s().createElement("option",{value:"text"},"Text"),s().createElement("option",{value:"number"},"Number"),s().createElement("option",{value:"checkbox"},"Checkbox"))),s().createElement("div",{className:"flex-1"},s().createElement("input",{type:"text",value:e.field,onChange:e=>m(l,"field",e.target.value),placeholder:"Field key",className:"w-full px-2 py-1 text-sm border rounded outline-none ine-none focus:outline-none"})),s().createElement("div",{className:"flex-1"},s().createElement("input",{type:"text",value:e.headerName,onChange:e=>m(l,"headerName",e.target.value),placeholder:"Header name",className:"w-full px-2 py-1 text-sm border rounded outline-none focus:outline-none"})),s().createElement("label",{className:"flex items-center mb-0 gap-x-2"},s().createElement("input",{type:"checkbox",checked:e.validate,onChange:e=>m(l,"validate",e.target.checked)}),"Validate"),s().createElement("button",{type:"button",disabled:1===a.length,onClick:()=>(e=>{const l=a.filter((t,l)=>l!==e);o(l),t&&t(l)})(l),className:"text-xs text-red-500 focus:outline-none hover:opacity-80 disabled:opacity-40 disabled:cursor-not-allowed"},"Remove")),e.validate&&s().createElement("div",{className:"mt-1"},s().createElement("input",{placeholder:"Provide validation api url",className:"w-full px-2 py-1 text-sm border rounded outline-none focus:outline-none",type:"text",value:r,onChange:e=>i(e.target.value)})))),s().createElement("div",null,s().createElement("button",{type:"button",onClick:()=>{const e=[...a,{id:Date.now()+Math.random(),field:"",headerName:"",type:"text",editable:!0,validate:!1}];o(e),t&&t(e)},className:"flex items-center mt-2 text-xs font-medium text-gray-700 focuse:outline-none gap-x-1"},"Add column")))}function I({value:e=[],onChange:t,options:l=[]}){const[a,o]=(0,n.useState)(e);(0,n.useEffect)(()=>{if(t){const e=a.map(e=>({...e,fieldType:e.fieldType||"text",operator:e.operator||"equals",value:e.value??""}));t(e)}},[a]);const r=l.filter(e=>!a.some(t=>t.id===e.id)),i=(e,t,l)=>{o(a=>a.map((a,n)=>n===e?{...a,[t]:l}:a))};return s().createElement("div",{className:"space-y-2"},s().createElement(M.WF,{value:a,onChange:o,multiple:!0},s().createElement("div",{className:"relative mt-1"},s().createElement(M.WF.Button,{className:"relative w-full py-2 pl-3 pr-10 text-sm text-left bg-white border border-gray-300 rounded shadow-sm cursor-default focus:outline-none"},s().createElement("span",{className:"block truncate"},a.length>0?a.map(e=>e.label).join(", "):"Select options"),s().createElement("span",{className:"absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"},s().createElement(T.A,{className:"w-4 h-4 text-gray-400"}))),s().createElement(M.WF.Options,{className:"absolute z-10 w-full py-1 mt-1 overflow-auto text-base bg-white border border-gray-200 rounded shadow max-h-60 focus:outline-none sm:text-sm"},r.length>0?r.map(e=>s().createElement(M.WF.Option,{key:e.id,value:e,className:({active:e})=>"relative cursor-pointer select-none py-2 pl-4 pr-4 "+(e?"bg-blue-100 text-blue-900":"text-gray-900")},({selected:t})=>s().createElement(s().Fragment,null,s().createElement("span",{className:"block truncate "+(t?"font-medium":"font-normal")},e.label),t&&s().createElement("span",{className:"absolute inset-y-0 left-0 flex items-center pl-3 text-blue-600"},s().createElement(B.A,{className:"w-4 h-4","aria-hidden":"true"}))))):s().createElement("div",{className:"px-4 py-2 text-gray-500"},"No option selected")))),a.length>0&&s().createElement("div",{className:"grid items-center grid-cols-1 gap-2 mt-1"},a.map((e,t)=>s().createElement("div",{key:e.id,className:"flex items-center gap-1 px-2 py-1 text-sm bg-gray-100 border rounded-lg outline-none hover:outline-none focus:outline-none"},s().createElement("input",{type:"text",value:e.label,readOnly:!0,className:"flex-1 px-1 py-1 text-xs border rounded"}),s().createElement("select",{value:e.fieldType,onChange:e=>i(t,"fieldType",e.target.value),className:"flex-1 px-1 py-1 text-xs border rounded outline-none hover:outline-none focus:outline-none"},s().createElement("option",{value:"text"},"Text"),s().createElement("option",{value:"number"},"Number"),s().createElement("option",{value:"boolean"},"Boolean")),s().createElement("select",{value:e.operator,onChange:e=>i(t,"operator",e.target.value),className:"flex-1 px-2 py-1 text-xs border rounded outline-none focus:ring-1 focus:ring-blue-300"},s().createElement("option",{value:"equals"},"Equals"),s().createElement("option",{value:"not_equals"},"Not equals"),"number"===e.fieldType&&s().createElement("option",{value:"greater"},"Greater than"),"number"===e.fieldType&&s().createElement("option",{value:"less"},"Less than"),s().createElement("option",{value:"contains"},"Contains"),s().createElement("option",{value:"not_contains"},"Does not contain")),"boolean"!==e.fieldType?s().createElement("input",{type:e.fieldType,value:e.value||"",onChange:e=>i(t,"value",e.target.value),className:"flex-1 px-1 py-1 text-xs border rounded outline-none hover:outline-none focus:outline-none",placeholder:"Value"}):s().createElement("div",{className:"flex items-center justify-center flex-1 px-1 py-1 text-xs bg-white border rounded outline-none gap-x-4 hover:outline-none focus:outline-none"},s().createElement("label",{className:"flex items-center !mb-0 gap-x-2"},s().createElement("input",{type:"radio",name:`boolean-${t}`,checked:!0===e.value,onChange:()=>i(t,"value",!0)}),"True"),s().createElement("label",{className:"flex items-center gap-x-2 !mb-0"},s().createElement("input",{type:"radio",name:`boolean-${t}`,checked:!1===e.value,onChange:()=>i(t,"value",!1)}),"False")),s().createElement("button",{type:"button",onClick:()=>{return t=e.id,void o(e=>e.filter(e=>e.id!==t));var t},className:"text-gray-500 hover:text-gray-700"},s().createElement(V.A,{className:"w-3 h-3"}))))))}const z=["+","-","*","/"];function U({mappedFields:e=[],isEditing:t=!1,onChangeCalculationFields:l,calculationFields:a=[]}){const[o,r]=(0,n.useState)([]);(0,n.useEffect)(()=>{r(t=>{const l=t.length?t.filter(e=>!e.isMapped):a.filter(e=>!e.isMapped);return[...e.map((e,l)=>{const n=t.find(t=>t.field_name===e.field_name&&t.isMapped)||a.find(t=>t.field_name===e.field_name&&t.isMapped);return{field_name:e.field_name,label:e.label||`Field ${l+1}`,value:n?.value||"",operation:n?.operation||(0===l?"":"+"),isMapped:!0}}),...l]})},[e]),(0,n.useEffect)(()=>{l&&l(o)},[o]);const i=(0,n.useCallback)((e,t)=>{r(l=>{const a=[...l];return a[e]={...a[e],...t},a})},[]);return s().createElement("div",{className:"max-w-sm p-3 bg-white rounded"},s().createElement("div",{className:"space-y-3"},o.map((e,l)=>s().createElement("div",{key:l,className:"flex items-center gap-2"},t&&!e.isMapped?s().createElement("input",{type:"text",value:e.label,onChange:e=>((e,t)=>{i(e,{label:t})})(l,e.target.value),className:" border outline-none focus:outline-none rounded w-[120px] text- p-2"}):s().createElement("span",{className:"text-xs font-medium capitalize"},e.label),s().createElement("div",{className:"flex items-center flex-1 gap-2"},0!==l&&s().createElement("select",{value:e.operation,onChange:e=>((e,t)=>{i(e,{operation:t})})(l,e.target.value),className:"p-1 text-xl border rounded min-w-16"},z.map(e=>s().createElement("option",{key:`op-${l}-${e}`,value:e},e))),s().createElement(N.Ay,{value:e.value,onValueChange:e=>((e,t)=>{i(e,{value:t})})(l,e),className:`w-full p-2 text-xs outline-none focus:outline-none ${e.isMapped?"bg-gray-100":"bg-white"} text-gray-700 border rounded`,placeholder:`${e.isMapped?e.label:"Enter"} value`,readOnly:e.isMapped,decimalsLimit:6}),t&&!e.isMapped&&s().createElement("button",{onClick:()=>(e=>{r(t=>t.filter((t,l)=>l!==e))})(l),className:"px-2 py-1 text-xs text-white bg-red-500 rounded hover:bg-red-600",title:"Remove field"},"✕")))),t&&s().createElement("div",{className:"flex justify-end"},s().createElement("button",{type:"button",onClick:()=>{r(e=>[...e,{label:`Custom Field ${e.length+1}`,value:"",operation:0===e.length?"":"+",isMapped:!1}])},className:"px-3 py-1 mt-2 text-sm text-white bg-blue-500 rounded hover:bg-blue-600"},"+ Add Input"))))}const R=window?.localStorage.getItem("token")||"";function H({detail:e={},onValueChange:t=()=>{},apiUrl:l}){const a=p.A.create({baseURL:`${l}/workflows/api/v1`,headers:{Authorization:`Bearer ${R}`}}),[o,r]=(0,n.useState)(!1),[i,m]=(0,n.useState)([]),[c,d]=(0,n.useState)([]),[u,h]=(0,n.useState)([]),[E,b]=(0,n.useState)(e.storageSettingId||""),[y,g]=(0,n.useState)(e.containerName||""),[v,f]=(0,n.useState)(e.folderName||"");return(0,n.useEffect)(()=>{(async()=>{try{r(!0);const{data:e}=await a.get("/Settings/get-all?activitySettingType=azure");m(e?.results||[])}finally{r(!1)}})()},[]),(0,n.useEffect)(()=>{d([]),h([]),E&&(async e=>{if(e)try{r(!0);const{data:t}=await a.get(`/Azure/get-containers/${e}`);d(t?.data||[])}finally{r(!1)}})(E),t({storageSettingId:E,containerName:"",folderName:""})},[E]),(0,n.useEffect)(()=>{h([]),E&&y&&(async(e,t)=>{if(e&&t)try{r(!0);const{data:l}=await a.get(`/Azure/get-folders/${e}/${t}`);h(l?.data||[])}finally{r(!1)}})(E,y),t({storageSettingId:E,containerName:y,folderName:""})},[y]),(0,n.useEffect)(()=>{t({storageSettingId:E,containerName:y,folderName:v})},[v]),s().createElement("div",{className:"max-w-[500px] py-4 space-y-5"},s().createElement("h2",{className:"text-lg font-semibold"},"Azure File Settings"),s().createElement("div",{className:"space-y-1"},s().createElement("label",{className:"text-sm"},"Storage Setting"),s().createElement("select",{className:"w-full p-2 border rounded",value:E,onChange:e=>{b(e.target.value),g(""),f("")}},s().createElement("option",{value:""},"Select storage setting"),i.map(e=>s().createElement("option",{key:e.id,value:e.id},e.name)))),E&&s().createElement("div",{className:"space-y-1"},s().createElement("label",{className:"text-sm"},"Container"),s().createElement("select",{className:"w-full p-2 border rounded",value:y,onChange:e=>{g(e.target.value),f("")}},s().createElement("option",{value:""},"Select a container"),c.map(e=>s().createElement("option",{key:e.text,value:e.value},e.text)))),y&&s().createElement("div",{className:"space-y-1"},s().createElement("label",{className:"text-sm"},"Folder"),s().createElement("select",{className:"w-full p-2 border rounded",value:v,onChange:e=>f(e.target.value)},s().createElement("option",{value:""},"Select a folder"),u.map(e=>s().createElement("option",{key:e.text,value:e.value},e.text)))),o&&s().createElement("div",{className:"text-sm text-gray-500"},"Loading..."),s().createElement("div",{className:"p-3 mt-4 space-y-1 text-sm border rounded bg-gray-50"},s().createElement("div",null,"Setting: ",E),s().createElement("div",null,"Container: ",y),s().createElement("div",null,"Folder: ",v)))}const $={options:["inline","list","textAlign","fontSize","link","history"],inline:{inDropdown:!1,className:void 0,options:["bold","italic","underline","superscript","subscript"]}},W=[{label:"Day/Month/Year",format:"dd/MM/yyyy"},{label:"Month/Day/Year",format:"MM/dd/yyyy"},{label:"ISO (Year-Month-Day)",format:"yyyy-MM-dd"},{label:"Full Month Day, Year",format:"MMMM d, yyyy"},{label:"Abbreviated Month Day, Year",format:"MMM d, yyyy"},{label:"Day. Month. Year (Dots)",format:"dd.MM.yyyy"},{label:"Day Month Name Year",format:"dd MMMM yyyy"},{label:"Weekday, Month Day, Year",format:"EEEE, MMMM d, yyyy"},{label:"Short Weekday, Month Day, Year",format:"EEE, MMM d, yyyy"},{label:"Day-Month-Year",format:"dd-MM-yyyy"},{label:"Day-Month-Year",format:"dd-MMM-yyyy"}],q=new Date;class K extends s().Component{constructor(e){super(e),(0,a.A)(this,"getDocuments",async()=>{try{const e=window.localStorage.getItem("token"),t=window.localStorage.getItem("userData"),l=t?JSON.parse(t):null,a=window.localStorage.getItem("LoginInfo"),n=a?JSON.parse(a):null;this.setState({fileLoading:!0});const s={Page:1,Page_Size:15,count:1e5,documentType:0,organizationId:l?.id,documentTabs:2},o={headers:{Authorization:`Bearer ${e}`}};if(!e)return;const r=`${this.props.apiBaseUrl}/documents/v1/documentmanagement/get-documents-inbox?email=${n?.email}`,i=await p.A.post(r,s,o);200===i.status&&this.setState({documents:i.data.results?.map(e=>({label:e?.title,value:e?.documentMainId}))})}finally{this.setState({fileLoading:!1})}}),(0,a.A)(this,"updateJsonElement",()=>{const e=JSON.stringify(this.state.element);this.state.dirty&&(this.props.updateElement.call(this.props.preview,e),this.setState({dirty:!1}))}),this.state={element:this.props.element,data:this.props.data,dirty:!1,fileLoading:!1,documents:[],multiFieldOptions:this.props.formData.filter(e=>e.id!==this.props.element.id)},this.getDocuments=this.getDocuments.bind(this)}toggleRequired(){}editElementProp(e,t,l){const a=this.state.element;l&&l.target?a[e]=l.target[t]:a[t]=l,this.setState({element:a,dirty:!0},()=>{"checked"===t&&this.updateElement()})}onEditorStateChange(e,t,l){const a=m()((0,r.convertToRaw)(l.getCurrentContent())).replace(/<p>/g,"").replace(/<\/p>/g,"").replace(/ /g," ").replace(/(?:\r\n|\r|\n)/g," "),n=this.state.element;n[t]=a,this.setState({element:n,dirty:!0})}updateElement(){const e=this.state.element;this.state.dirty&&(this.props.updateElement.call(this.props.preview,e),this.setState({dirty:!1}))}convertFromHTML(e){const t=(0,r.convertFromHTML)(e);if(!t.contentBlocks||!t.contentBlocks.length)return r.EditorState.createEmpty();const l=r.ContentState.createFromBlockArray(t);return r.EditorState.createWithContent(l)}addOptions(){const e=document.getElementById("optionsApiUrl").value;e&&(0,y.J)(e).then(e=>{this.props.element.options=[];const{options:t}=this.props.element;(e.data||e)?.forEach(e=>{e.id=E().uuid(),t.push(e)});const l=this.state.element;this.setState({element:l,dirty:!0})})}addOptionsFromSheet(e){const{options:t}=this.props.element;e.forEach(e=>{e.id=E().uuid(),t.push(e)});const l=this.state.element;this.setState({element:l,dirty:!0})}componentDidMount(){this.getDocuments()}render(){this.state.dirty&&(this.props.element.dirty=!0);const e=!!this.props.element.hasOwnProperty("required")&&this.props.element.required,t=!!this.props.element.hasOwnProperty("isReadOnly")&&this.props.element.isReadOnly,l=!!this.props.element.hasOwnProperty("defaultToday")&&this.props.element.defaultToday,a=!!this.props.element.hasOwnProperty("showTimeSelect")&&this.props.element.showTimeSelect,n=!!this.props.element.hasOwnProperty("showTimeSelectOnly")&&this.props.element.showTimeSelectOnly,r=!!this.props.element.hasOwnProperty("showTimeInput")&&this.props.element.showTimeInput,i=!!this.props.element.hasOwnProperty("hidePastDate")&&this.props.element.hidePastDate,m=!!this.props.element.hasOwnProperty("hideFutureDate")&&this.props.element.hideFutureDate,p=!!this.props.element.hasOwnProperty("inline")&&this.props.element.inline,d=!!this.props.element.hasOwnProperty("bold")&&this.props.element.bold,h=!!this.props.element.hasOwnProperty("italic")&&this.props.element.italic,E=!!this.props.element.hasOwnProperty("center")&&this.props.element.center,y=!!this.props.element.hasOwnProperty("togglePassword")&&this.props.element.togglePassword,N=!!this.props.element.hasOwnProperty("toggleNegative")&&this.props.element.toggleNegative,C=!!this.props.element.hasOwnProperty("toggleVisibility")&&this.props.element.toggleVisibility,k=!!this.props.element.hasOwnProperty("isCascade")&&this.props.element.isCascade,{canHavePageBreakBefore:P,canHaveDisplayHorizontal:O,canHaveOptionCorrect:M,canHaveOptionValue:T}=this.props.element,B="Image"===this.state.element.element||"Camera"===this.state.element.element,V=this.props.files.length?this.props.files:[];let z;return(V.length<1||V.length>0&&""!==V[0].id)&&V.unshift({id:"",file_name:""}),this.props.element.hasOwnProperty("content")&&(z=this.convertFromHTML(this.props.element.content)),this.props.element.hasOwnProperty("label")&&(z=this.convertFromHTML(this.props.element.label)),s().createElement("div",null,s().createElement("div",{className:"clearfix"},s().createElement("h4",{className:"float-left"},this.props.element.text),s().createElement("i",{className:"float-right fas fa-times dismiss-edit",onClick:this.props.manualEditModeOff})),this.props.element.hasOwnProperty("content")&&s().createElement("div",{className:"form-group"},s().createElement("label",{className:"control-label"},s().createElement(v.A,{id:"text-to-display"}),":"),s().createElement(c.Editor,{toolbar:$,defaultEditorState:z,onBlur:this.updateElement.bind(this),onEditorStateChange:this.onEditorStateChange.bind(this,0,"content"),stripPastedStyles:!0})),this.props.element.hasOwnProperty("file_path")&&s().createElement("div",{className:"form-group"},s().createElement("label",{className:"control-label",htmlFor:"fileSelect"},s().createElement(v.A,{id:"choose-file"}),":"),s().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")},V.map(e=>{const t=`file_${e.id}`;return s().createElement("option",{value:e.id,key:t},e.file_name)}))),this.props.element.hasOwnProperty("href")&&s().createElement("div",{className:"form-group"},s().createElement(o.A,{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")&&s().createElement("div",{className:"form-group"},s().createElement("label",null,s().createElement(v.A,{id:"display-label"})),s().createElement(c.Editor,{toolbar:$,defaultEditorState:z,onBlur:this.updateElement.bind(this),onEditorStateChange:this.onEditorStateChange.bind(this,0,"label"),stripPastedStyles:!0,height:100}),s().createElement("br",null),s().createElement("div",{className:"custom-control custom-checkbox"},s().createElement("input",{id:"is-required",className:"custom-control-input",type:"checkbox",checked:e,value:!0,onChange:this.editElementProp.bind(this,"required","checked")}),s().createElement("label",{className:"custom-control-label",htmlFor:"is-required"},s().createElement(v.A,{id:"required"}))),this.props.element.hasOwnProperty("isReadOnly")&&s().createElement("div",{className:"custom-control custom-checkbox"},s().createElement("input",{id:"read-only",className:"custom-control-input",type:"checkbox",checked:t,value:!0,onChange:this.editElementProp.bind(this,"isReadOnly","checked")}),s().createElement("label",{className:"custom-control-label",htmlFor:"read-only"},s().createElement(v.A,{id:"read-only"}))),this.props.element.hasOwnProperty("defaultToday")&&s().createElement("div",{className:"custom-control custom-checkbox"},s().createElement("input",{id:"is-default-to-today",className:"custom-control-input",type:"checkbox",checked:l,value:!0,onChange:this.editElementProp.bind(this,"defaultToday","checked")}),s().createElement("label",{className:"custom-control-label",htmlFor:"is-default-to-today"},s().createElement(v.A,{id:"default-to-today"}),"?")),this.props.element.hasOwnProperty("showTimeSelect")&&s().createElement("div",{className:"custom-control custom-checkbox"},s().createElement("input",{id:"show-time-select",className:"custom-control-input",type:"checkbox",checked:a,value:!0,onChange:this.editElementProp.bind(this,"showTimeSelect","checked")}),s().createElement("label",{className:"custom-control-label",htmlFor:"show-time-select"},s().createElement(v.A,{id:"show-time-select"}),"?")),a&&this.props.element.hasOwnProperty("showTimeSelectOnly")&&s().createElement("div",{className:"custom-control custom-checkbox"},s().createElement("input",{id:"show-time-select-only",className:"custom-control-input",type:"checkbox",checked:n,value:!0,onChange:this.editElementProp.bind(this,"showTimeSelectOnly","checked")}),s().createElement("label",{className:"custom-control-label",htmlFor:"show-time-select-only"},s().createElement(v.A,{id:"show-time-select-only"}),"?")),this.props.element.hasOwnProperty("showTimeInput")&&s().createElement("div",{className:"custom-control custom-checkbox"},s().createElement("input",{id:"show-time-input",className:"custom-control-input",type:"checkbox",checked:r,value:!0,onChange:this.editElementProp.bind(this,"showTimeInput","checked")}),s().createElement("label",{className:"custom-control-label",htmlFor:"show-time-input"},s().createElement(v.A,{id:"show-time-input"}),"?")),this.props.element.hasOwnProperty("hidePastDate")&&s().createElement("div",{className:"custom-control custom-checkbox"},s().createElement("input",{id:"hidePastDate",className:"custom-control-input",type:"checkbox",checked:i,value:!0,onChange:this.editElementProp.bind(this,"hidePastDate","checked")}),s().createElement("label",{className:"custom-control-label",htmlFor:"hidePastDate"},"Hide Past date")),this.props.element.hasOwnProperty("hideFutureDate")&&s().createElement("div",{className:"custom-control custom-checkbox"},s().createElement("input",{id:"hideFutureDate",className:"custom-control-input",type:"checkbox",checked:m,value:!0,onChange:this.editElementProp.bind(this,"hideFutureDate","checked")}),s().createElement("label",{className:"custom-control-label",htmlFor:"hideFutureDate"},"Hide Future date")),("RadioButtons"===this.state.element.element||"Checkboxes"===this.state.element.element)&&O&&s().createElement("div",{className:"custom-control custom-checkbox"},s().createElement("input",{id:"display-horizontal",className:"custom-control-input",type:"checkbox",checked:p,value:!0,onChange:this.editElementProp.bind(this,"inline","checked")}),s().createElement("label",{className:"custom-control-label",htmlFor:"display-horizontal"},s().createElement(v.A,{id:"display-horizontal"})))),this.props.element.hasOwnProperty("src")&&s().createElement("div",null,s().createElement("div",{className:"form-group"},s().createElement("label",{className:"control-label",htmlFor:"srcInput"},s().createElement(v.A,{id:"link-to"}),":"),s().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")}))),B&&s().createElement("div",null,s().createElement("div",{className:"form-group"},s().createElement("div",{className:"custom-control custom-checkbox"},s().createElement("input",{id:"do-center",className:"custom-control-input",type:"checkbox",checked:E,value:!0,onChange:this.editElementProp.bind(this,"center","checked")}),s().createElement("label",{className:"custom-control-label",htmlFor:"do-center"},s().createElement(v.A,{id:"center"}),"?"))),s().createElement("div",{className:"row"},s().createElement("div",{className:"col-sm-3"},s().createElement("label",{className:"control-label",htmlFor:"elementWidth"},s().createElement(v.A,{id:"width"}),":"),s().createElement("input",{id:"elementWidth",type:"text",className:"form-control",defaultValue:this.props.element.width,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"width","value")})),s().createElement("div",{className:"col-sm-3"},s().createElement("label",{className:"control-label",htmlFor:"elementHeight"},s().createElement(v.A,{id:"height"}),":"),s().createElement("input",{id:"elementHeight",type:"text",className:"form-control",defaultValue:this.props.element.height,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"height","value")})))),("FileUpload"===this.state.element.element||"MultiFileUpload"===this.state.element.element||"AzureFileUpload"===this.state.element.element)&&s().createElement("div",null,s().createElement("div",{className:" mb-4"},s().createElement("label",{className:"control-label",htmlFor:"fileSize"},"Max File Size"),s().createElement("div",{className:"flex border border-gray-300 rounded-lg overflow-hidden max-w-[150px]"},s().createElement("input",{id:"maxFileSize",type:"number",min:0,className:"px-3.5 py-1.5 outline-none flex-1 text-sm min-w-0",defaultValue:this.props.element.maxFileSize,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"maxFileSize","value")}),s().createElement("span",{className:"bg-gray-100 px-3.5 py-1.5 flex items-center justify-center text-sm font-medium"},"MB"))),s().createElement("div",{className:"form-group"},s().createElement("label",{className:"control-label",htmlFor:"fileType"},s().createElement(v.A,{id:"choose-file-type"}),":"),s().createElement("select",{id:"fileType",className:"form-control",onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"fileType","value"),value:this.props.element.fileType},g.a.map((e,t)=>s().createElement("option",{value:e.type,key:t},e.typeName)))),"FileUpload"===this.state.element.element&&s().createElement("div",{className:"form-group"},s().createElement("label",{className:"control-label",htmlFor:"fileType"},"File Result"),s().createElement("select",{id:"fileResult",className:"form-control",onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"fileResult","value"),value:this.props.element.fileResult},s().createElement("option",{value:null,disabled:!0},"Select"),s().createElement("option",{value:"url"},"Url String"),s().createElement("option",{value:"base64"},"Base64 String"))),"AzureFileUpload"===this.state.element.element&&s().createElement("div",null,s().createElement(H,{apiUrl:this.props.apiBaseUrl,detail:this.props.element.azureSettings||{},onValueChange:e=>{this.editElementProp(this,"azureSettings",e)}}))),"Signature"===this.state.element.element&&this.props.element.readOnly?s().createElement("div",{className:"form-group"},s().createElement("label",{className:"control-label",htmlFor:"variableKey"},s().createElement(v.A,{id:"variable-key"}),":"),s().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")}),s().createElement("p",{className:"help-block"},s().createElement(v.A,{id:"variable-key-desc"}),".")):s().createElement("div",null),this.props.element.hasOwnProperty("step")&&s().createElement("div",{className:"form-group"},s().createElement("div",{className:"form-group-range"},s().createElement("label",{className:"control-label",htmlFor:"rangeStep"},s().createElement(v.A,{id:"step"})),s().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")&&s().createElement("div",{className:"form-group"},s().createElement("div",{className:"form-group-range"},s().createElement("label",{className:"control-label",htmlFor:"rangeMin"},s().createElement(v.A,{id:"min"})),s().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")}),s().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")&&s().createElement("div",{className:"form-group"},s().createElement("div",{className:"form-group-range"},s().createElement("label",{className:"control-label",htmlFor:"rangeMax"},s().createElement(v.A,{id:"max"})),s().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")}),s().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")}))),s().createElement("div",{className:"grid grid-cols-2 date_range gap-x-3"},this.props.element.hasOwnProperty("canHaveMinLength")&&s().createElement("div",{className:"form-group"},s().createElement("div",{className:"form-group-range"},s().createElement("label",{className:"control-label text-13",htmlFor:"minLength"},"Min Length"),s().createElement("input",{type:"number",style:{width:"100%"},className:"!w-full form-control text-sm",defaultValue:this.props.element.minLength,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"minLength","value")}))),this.props.element.hasOwnProperty("canHaveMaxLength")&&s().createElement("div",{className:"form-group"},s().createElement("div",{className:"form-group-range"},s().createElement("label",{className:"control-label text-13",htmlFor:"maxLength"},"Max Length"),s().createElement("input",{type:"number",style:{width:"100%"},className:"!w-full form-control text-sm",defaultValue:this.props.element.maxLength,min:this.props.element.minLength,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"maxLength","value")})))),this.props.element.hasOwnProperty("canTogglePassword")&&s().createElement("div",{className:"form-group"},s().createElement("div",{className:"custom-control custom-checkbox"},s().createElement("input",{id:"toggle-password",className:"custom-control-input",type:"checkbox",checked:y,value:!0,onChange:this.editElementProp.bind(this,"togglePassword","checked")}),s().createElement("label",{className:"custom-control-label",htmlFor:"toggle-password"},"Can Toggle Password"))),this.props.element.hasOwnProperty("canToggleNegative")&&s().createElement("div",{className:"form-group"},s().createElement("div",{className:"custom-control custom-checkbox"},s().createElement("input",{id:"toggle-negative",className:"custom-control-input",type:"checkbox",checked:N,value:!0,onChange:this.editElementProp.bind(this,"toggleNegative","checked")}),s().createElement("label",{className:"custom-control-label",htmlFor:"toggle-negative"},"Can Allow Negative"))),this.props.element.hasOwnProperty("canMapFields")&&s().createElement("div",{className:"mb-2 "},s().createElement("div",{className:"form-group"},s().createElement("label",{className:"control-label text-13",htmlFor:"documentId"},"Select Mapped Fields"),s().createElement(L,{element:this.props.element,options:this.state.multiFieldOptions,value:this.props.element.mappedFields||[],onChange:e=>{this.editElementProp(this,"mappedFields",e)}})),s().createElement("div",null,this.props.element.hasOwnProperty("haveArithmetic")&&s().createElement("div",null,s().createElement(U,{mappedFields:this.props.element.mappedFields||[],calculationFields:this.props.element.calculationFields||[],onChangeCalculationFields:e=>{this.editElementProp(this,"calculationFields",e)},isEditing:!0})))),this.props.element.hasOwnProperty("canToggleField")&&s().createElement("div",{className:""},s().createElement("div",{className:"mt-2 mb-3 custom-control custom-checkbox"},s().createElement("input",{id:"toggle-field-visibility",className:"custom-control-input",type:"checkbox",checked:C,onChange:this.editElementProp.bind(this,"toggleVisibility","checked")}),s().createElement("label",{className:"custom-control-label",htmlFor:"toggle-field-visibility"},"Toggle Field Visibility")),C&&s().createElement("div",{className:"form-group"},s().createElement("label",{className:"control-label text-13",htmlFor:"toggeIds"},"Dependent Fields/Values"),s().createElement(I,{element:this.props.element,options:this.state.multiFieldOptions,value:this.props.element.visibilityFields||[],onChange:e=>{this.editElementProp(this,"visibilityFields",e)}}))),this.props.element.hasOwnProperty("canUseCascade")&&s().createElement("div",{className:""},s().createElement("div",{className:"mt-2 mb-3 custom-control custom-checkbox"},s().createElement("input",{id:"is-cascade",className:"custom-control-input",type:"checkbox",checked:k,onChange:this.editElementProp.bind(this,"isCascade","checked")}),s().createElement("label",{className:"custom-control-label",htmlFor:"is-cascade"},"Use Cascade")),k&&s().createElement("div",{className:"form-group"},s().createElement("label",{className:"control-label text-13",htmlFor:"toggeIds"},"Dependent Field"),s().createElement("select",{className:"form-control",value:this.props.element.method,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"dependentField","value")},s().createElement("option",{value:""},"Select field"),this.state.multiFieldOptions.map((e,t)=>s().createElement("option",{key:t,value:e.field_name},e.label))))),this.props.element.hasOwnProperty("canMakeApiValidation")&&s().createElement("div",{className:""},s().createElement("div",{className:"mb-4"},s().createElement(f,null)),s().createElement("div",{className:"form-group"},s().createElement("label",{className:"control-label text-13",htmlFor:"url"},"Api Url"),s().createElement("input",{type:"text",className:"form-control",defaultValue:this.props.element.url,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"url","value")})),s().createElement("div",{className:"form-group"},s().createElement("label",{className:"control-label text-13",htmlFor:"url"},"File Retrieval Api Url (optional)"),s().createElement("input",{type:"text",className:"form-control",defaultValue:this.props.element.fileUrl,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"fileUrl","value")})),s().createElement("div",{className:"form-group"},s().createElement("label",{className:"control-label text-13",htmlFor:"method"},"Method"),s().createElement("select",{className:"form-control",defaultValue:this.props.element.method,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"method","value")},s().createElement("option",{value:"get"},"GET"),s().createElement("option",{value:"post"},"POST"))),s().createElement("div",{className:"form-group"},s().createElement("label",{className:"control-label text-13",htmlFor:"apiKey"},s().createElement("span",null," ","Authorization Key"," ",s().createElement("span",{className:"text-muted"},"(Optional)"))),s().createElement("input",{type:"text",className:"form-control",defaultValue:this.props.element.apiKey,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"apiKey","value")}))),this.props.element.hasOwnProperty("canSelectDocuments")&&s().createElement("div",{className:""},s().createElement("div",{className:"form-group"},s().createElement("label",{className:"control-label text-13",htmlFor:"documentId"},"Choose a document"),s().createElement("select",{id:"documentId",className:"form-control",value:this.props.element.documentId,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"documentId","value")},s().createElement("option",{value:null},this.state.fileLoading?"Fetching documents...":"Select document"),this.state.documents?.map(e=>s().createElement("option",{key:e.value,value:JSON.stringify(e)},e.label))))),this.props.element.hasOwnProperty("minDate")||this.props.element.hasOwnProperty("maxDate")?s().createElement("div",{className:"form-group"},(!this.props.element.hidePastDate||!this.props.element.hideFutureDate)&&s().createElement("label",{className:"control-label text-13"},"Date Range "),s().createElement("div",{className:"grid grid-cols-2 date_range gap-x-3"},!this.props.element.hidePastDate&&s().createElement("div",null," ",s().createElement(u(),{onChange:e=>{this.editElementProp(this,"minDate",e)},name:"minDate",selected:this.props.element.minDate,className:"form-control",isClearable:!0,placeholderText:"Min Date Value"})),!this.props.element.hideFutureDate&&s().createElement("div",null," ",s().createElement(u(),{onChange:e=>{this.editElementProp(this,"maxDate",e)},name:"maxDate",selected:this.props.element.maxDate,minDate:this.props.element.hidePastDate?q:this.props.element.minDate,className:"form-control",isClearable:!0,placeholderText:"Max Date Value"})))):null,this.props.element.hasOwnProperty("canSelectDateFormat")&&s().createElement("div",{className:""},s().createElement("div",{className:"form-group"},s().createElement("label",{className:"control-label text-13"},"Choose a date format"),s().createElement("select",{id:"dateFormat",className:"form-control",value:this.props.element.documentId,onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"dateFormat","value")},W?.map(e=>s().createElement("option",{key:e.format,value:e.format},e.label," (",e.format,")"))))),this.props.element.hasOwnProperty("canHaveDenonimator")&&s().createElement("div",{className:""},s().createElement("div",{className:"form-group"},s().createElement(x,{value:this.props.element.denominators||[],onChange:e=>{this.editElementProp(this,"denominators",e)}}))),this.props.element.hasOwnProperty("canHaveDynamicInputOptions")&&s().createElement("div",{className:""},s().createElement("div",{className:"form-group"},s().createElement("label",{className:"control-label text-13",htmlFor:"dynamicInputOptions"},"Add Inputs Key/Label"),s().createElement(w,{initialFields:this.props.element.dynamicInputOptions,onChange:e=>{this.editElementProp(this,"dynamicInputOptions",e)}})))," ",this.props.element.hasOwnProperty("canHaveDataColumns")&&s().createElement("div",{className:""},s().createElement("div",{className:"form-group"},s().createElement("label",{className:"control-label text-13",htmlFor:"dynamicInputOptions"},"Add Data Columns"),s().createElement(_,{value:this.props.element.dataColumns,onChange:e=>{this.editElementProp(this,"dataColumns",e)},onGetUrl:e=>{this.editElementProp(this,"url",e)}})))," ",this.props.element.hasOwnProperty("canHandleMultiOptions")&&s().createElement("div",{className:""},s().createElement("div",{className:"form-group"},s().createElement("label",{className:"control-label text-13",htmlFor:"firstLabel"},"First DropDown Detail"),s().createElement("input",{id:"firstLabel",className:"input-style",defaultValue:this.props.element.firstLabel,placeholder:"Enter First label",onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"firstLabel","value")}),s().createElement("div",{className:"mt-1"},s().createElement(A,{onChange:e=>{this.editElementProp(this,"firstDropdownOptions",e)}})),s().createElement(S,{hideKey:!0,initialFields:this.props.element.firstDropdownOptions,onChange:e=>{this.editElementProp(this,"firstDropdownOptions",e)}})),s().createElement("div",{className:"form-group"},s().createElement("label",{className:"control-label text-13",htmlFor:"secondLabel"},"Second DropDown Detail"),s().createElement("input",{id:"secondLabel",className:"input-style",defaultValue:this.props.element.secondLabel,placeholder:"Enter Second label",onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"secondLabel","value")}),s().createElement("div",{className:"mt-1"},s().createElement(A,{onChange:e=>{this.editElementProp(this,"secondDropdownOptions",e)}})),s().createElement(S,{initialFields:this.props.element.secondDropdownOptions,onChange:e=>{this.editElementProp(this,"secondDropdownOptions",e)}}))),this.props.element.hasOwnProperty("default_value")&&s().createElement("div",{className:"form-group"},s().createElement("div",{className:"form-group-range"},s().createElement("label",{className:"control-label",htmlFor:"defaultSelected"},s().createElement(v.A,{id:"default-selected"})),s().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&&s().createElement("div",{className:"form-group"},s().createElement("label",{className:"control-label"},s().createElement(v.A,{id:"text-style"})),s().createElement("div",{className:"custom-control custom-checkbox"},s().createElement("input",{id:"do-bold",className:"custom-control-input",type:"checkbox",checked:d,value:!0,onChange:this.editElementProp.bind(this,"bold","checked")}),s().createElement("label",{className:"custom-control-label",htmlFor:"do-bold"},s().createElement(v.A,{id:"bold"}))),s().createElement("div",{className:"custom-control custom-checkbox"},s().createElement("input",{id:"do-italic",className:"custom-control-input",type:"checkbox",checked:h,value:!0,onChange:this.editElementProp.bind(this,"italic","checked")}),s().createElement("label",{className:"custom-control-label",htmlFor:"do-italic"},s().createElement(v.A,{id:"italic"})))),this.props.element.showDescription&&s().createElement("div",{className:"form-group"},s().createElement("label",{className:"control-label",htmlFor:"questionDescription"},s().createElement(v.A,{id:"description"})),s().createElement(o.A,{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")&&s().createElement("div",{className:"form-group"},s().createElement("label",{className:"control-label",htmlFor:"correctAnswer"},s().createElement(v.A,{id:"correct-answer"})),s().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")&&s().createElement("div",{className:"form-group"},s().createElement("label",{className:"control-label",htmlFor:"optionsApiUrl"},s().createElement(v.A,{id:"populate-options-from-api"})),s().createElement(D,null),s().createElement("div",{className:"row"},s().createElement("div",{className:"col-sm-8"},s().createElement("input",{className:"input-style",style:{width:"100%"},type:"text",id:"optionsApiUrl",onBlur:this.updateElement.bind(this),onChange:this.editElementProp.bind(this,"optionsApiUrl","value"),placeholder:"http://localhost:8080/api/optionsdata"})),s().createElement("div",{className:"col-sm-4"},s().createElement("button",{onClick:this.addOptions.bind(this),className:"button-style"},s().createElement(v.A,{id:"populate"}))))),this.props.element.canPopulateFromApi&&this.props.element.hasOwnProperty("options")&&s().createElement("div",{className:"form-group"},s().createElement("label",{className:"control-label",htmlFor:"optionsApiUrl"},"Populate from sheet (csv, xlsx)"),s().createElement("div",{className:"row"},s().createElement("div",{className:"col-sm-6"},s().createElement(F,{name:"options",setValue:(e,t)=>{this.addOptionsFromSheet(t)}})))),this.props.element.hasOwnProperty("options")&&s().createElement(b,{showCorrectColumn:this.props.showCorrectColumn,canHaveOptionCorrect:M,canHaveOptionValue:T,data:this.props.preview.state.data,updateElement:this.props.updateElement,preview:this.props.preview,element:this.props.element,key:this.props.element.options.length}))}}K.defaultProps={className:"edit-element-fields"}}}]);