react-magic-form/dist/index.umd.production.min.js

Boilerplate for Resact with Typescript with rollup.js (not webpack)

!function(e,a){"object"==typeof exports&&"undefined"!=typeof module?a(exports,require("react"),require("react-hook-form")):"function"==typeof define&&define.amd?define(["exports","react","react-hook-form"],a):a((e="undefined"!=typeof globalThis?globalThis:e||self).ReactMagicForm={},e.React,e.reactHookForm)}(this,(function(e,a,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=n(a);const r=e=>{var n,r,i;const{register:o,errors:d,setValue:u,trigger:m}=t.useFormContext(),[s,c]=a.useState({}),[f,p]=a.useState(!1);a.useEffect((()=>{const a=e.validation;c(a)}),[]);return l.default.createElement(l.default.Fragment,null,l.default.createElement("div",{className:"fg__checkbox-wrapper"},l.default.createElement("input",{id:e.id,type:"checkbox",className:"form-control "+(d[e.name]?"is-invalid ":" "),name:e.name,checked:f,onChange:e=>{},autoComplete:e.autocomplete?e.autocomplete:"off",ref:o(s)}),l.default.createElement("span",{className:"checkmark",onClick:()=>{u(e.name,!f),p(!f),m()}}),l.default.createElement("div",{className:"fg__checkbox-text",dangerouslySetInnerHTML:{__html:e.placeholder}})),l.default.createElement("div",{className:"invalid-feedback"},"required"==(null===(n=d[e.name])||void 0===n?void 0:n.type)?l.default.createElement(l.default.Fragment,null,""===(null===(r=d[e.name])||void 0===r?void 0:r.message)?l.default.createElement("span",null,"Il campo è richiesto"):l.default.createElement("span",null,null===(i=d[e.name])||void 0===i?void 0:i.message)):l.default.createElement(l.default.Fragment,null)))},i=e=>{var n,r,i,o,d,u,m,s,c,f,p,g,v,h,b,E,x,_;const{register:F,errors:y,watch:w,setError:k,clearErrors:G}=t.useFormContext(),[M,z]=a.useState({}),[L,S]=a.useState(0),[N,q]=a.useState(0);return a.useEffect((()=>{const a=e.validation;if(e.validation.minLength&&(e.validation.minLength.value?S(parseInt(e.validation.minLength.value)):S(parseInt(e.validation.minLength))),e.validation.maxLength&&(e.validation.maxLength.value?q(parseInt(e.validation.maxLength.value)):q(parseInt(e.validation.maxLength))),void 0!==e.validation.equalTo&&e.validation.equalTo.value){const t=e.validation.equalTo.value;a.validate=e=>e===w(t)}z(Object.assign(Object.assign({},a),{pattern:/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/}))}),[]),a.useEffect((()=>{var a;"validate"==(null===(a=y[e.name])||void 0===a?void 0:a.type)&&e.validation.equalTo.value&&(k("repeatEmail",{type:"equalTo",message:"I due indirizzi email devono coincidere"}),G("validate"))}),[y]),l.default.createElement(l.default.Fragment,null,l.default.createElement("input",{id:e.id,type:"email",className:"form-control "+(y[e.name]?"is-invalid ":" "),placeholder:e.placeholder,name:e.name,autoComplete:e.autocomplete?e.autocomplete:"off",ref:F(M)}),l.default.createElement("div",{className:"invalid-feedback"},"required"==(null===(n=y[e.name])||void 0===n?void 0:n.type)?l.default.createElement(l.default.Fragment,null,""===(null===(r=y[e.name])||void 0===r?void 0:r.message)?l.default.createElement("span",null,"Il campo email è richiesto"):l.default.createElement("span",null,null===(i=y[e.name])||void 0===i?void 0:i.message)):l.default.createElement(l.default.Fragment,null),"minLength"==(null===(o=y[e.name])||void 0===o?void 0:o.type)?l.default.createElement(l.default.Fragment,null,""===(null===(d=y[e.name])||void 0===d?void 0:d.message)?l.default.createElement("span",null,"La lunghezza minima è ",L," caratteri"):l.default.createElement("span",null,null===(u=y[e.name])||void 0===u?void 0:u.message)):l.default.createElement(l.default.Fragment,null),"maxLength"==(null===(m=y[e.name])||void 0===m?void 0:m.type)?l.default.createElement(l.default.Fragment,null,""===(null===(s=y[e.name])||void 0===s?void 0:s.message)?l.default.createElement("span",null,"La lunghezza massima è ",N," caratteri"):l.default.createElement("span",null,null===(c=y[e.name])||void 0===c?void 0:c.message)):l.default.createElement(l.default.Fragment,null),"pattern"==(null===(f=y[e.name])||void 0===f?void 0:f.type)?l.default.createElement(l.default.Fragment,null,""===(null===(p=y[e.name])||void 0===p?void 0:p.message)?l.default.createElement("span",null,"Inserire un&aposindirizzo email valido"):l.default.createElement("span",null,null===(g=y[e.name])||void 0===g?void 0:g.message)):l.default.createElement(l.default.Fragment,null),"validate"==(null===(v=y[e.name])||void 0===v?void 0:v.type)?l.default.createElement(l.default.Fragment,null,""===(null===(h=y[e.name])||void 0===h?void 0:h.message)?l.default.createElement("span",null,"Rispettare le regole di validazione"):l.default.createElement("span",null,null===(b=y[e.name])||void 0===b?void 0:b.message)):l.default.createElement(l.default.Fragment,null),"equalTo"==(null===(E=y[e.name])||void 0===E?void 0:E.type)?l.default.createElement(l.default.Fragment,null,""===(null===(x=y[e.name])||void 0===x?void 0:x.message)?l.default.createElement("span",null,"I due campi devono essere uguali"):l.default.createElement("span",null,null===(_=y[e.name])||void 0===_?void 0:_.message)):l.default.createElement(l.default.Fragment,null)))},o=e=>{var n,r,i,o,d,u,m,s,c,f,p,g,v,h,b,E,x,_;const{register:F,errors:y,watch:w}=t.useFormContext(),[k,G]=a.useState({}),[M,z]=a.useState(0),[L,S]=a.useState(0);return a.useEffect((()=>{const a=e.validation;if(e.validation.minLength&&(e.validation.minLength.value?z(parseInt(e.validation.minLength.value)):z(parseInt(e.validation.minLength))),e.validation.maxLength&&(e.validation.maxLength.value?S(parseInt(e.validation.maxLength.value)):S(parseInt(e.validation.maxLength))),void 0!==e.validation.equalTo&&e.validation.equalTo.value){const t=e.validation.equalTo.value;a.validate=e=>e===w(t)}G(Object.assign({},a))}),[]),l.default.createElement(l.default.Fragment,null,l.default.createElement("input",{id:e.id,type:"password",className:"form-control "+(y[e.name]?"is-invalid ":" "),placeholder:e.placeholder,name:e.name,autoComplete:e.autocomplete?e.autocomplete:"off",ref:F(k)}),l.default.createElement("div",{className:"invalid-feedback"},"required"==(null===(n=y[e.name])||void 0===n?void 0:n.type)?l.default.createElement(l.default.Fragment,null,""===(null===(r=y[e.name])||void 0===r?void 0:r.message)?l.default.createElement("span",null,"Il campo password è richiesto"):l.default.createElement("span",null,null===(i=y[e.name])||void 0===i?void 0:i.message)):l.default.createElement(l.default.Fragment,null),"minLength"==(null===(o=y[e.name])||void 0===o?void 0:o.type)?l.default.createElement(l.default.Fragment,null,""===(null===(d=y[e.name])||void 0===d?void 0:d.message)?l.default.createElement("span",null,"La lunghezza minima è ",M," caratteri"):l.default.createElement("span",null,null===(u=y[e.name])||void 0===u?void 0:u.message)):l.default.createElement(l.default.Fragment,null),"maxLength"==(null===(m=y[e.name])||void 0===m?void 0:m.type)?l.default.createElement(l.default.Fragment,null,""===(null===(s=y[e.name])||void 0===s?void 0:s.message)?l.default.createElement("span",null,"La lunghezza massima è ",L," caratteri"):l.default.createElement("span",null,null===(c=y[e.name])||void 0===c?void 0:c.message)):l.default.createElement(l.default.Fragment,null),"pattern"==(null===(f=y[e.name])||void 0===f?void 0:f.type)?l.default.createElement(l.default.Fragment,null,""===(null===(p=y[e.name])||void 0===p?void 0:p.message)?l.default.createElement("span",null,"Rispettare le regole di formattazione"):l.default.createElement("span",null,null===(g=y[e.name])||void 0===g?void 0:g.message)):l.default.createElement(l.default.Fragment,null),"validate"==(null===(v=y[e.name])||void 0===v?void 0:v.type)?l.default.createElement(l.default.Fragment,null,""===(null===(h=y[e.name])||void 0===h?void 0:h.message)?l.default.createElement("span",null,"Rispettare le regole di validazione"):l.default.createElement("span",null,null===(b=y[e.name])||void 0===b?void 0:b.message)):l.default.createElement(l.default.Fragment,null),"equalTo"==(null===(E=y[e.name])||void 0===E?void 0:E.type)?l.default.createElement(l.default.Fragment,null,""===(null===(x=y[e.name])||void 0===x?void 0:x.message)?l.default.createElement("span",null,"I due campi devono essere uguali"):l.default.createElement("span",null,null===(_=y[e.name])||void 0===_?void 0:_.message)):l.default.createElement(l.default.Fragment,null)))},d=e=>{switch(e){case"1":return 1;case"1/2":return.5;case"1/3":return.33;case"1/4":return.25;default:return 1}},u=e=>{switch(e){case"1":return"fg__col-full";case"1/2":return"fg__col-half";case"1/3":return"fg__col-third";case"1/4":return"fg__col-fourth";default:return"fg__col-full"}},m=e=>{var n,r,i,o,d;const{register:u,errors:m}=t.useFormContext(),[s,c]=a.useState({}),[f,p]=a.useState(!0),[g,v]=a.useState([]),[h,b]=a.useState("");return a.useEffect((()=>{let a=!1;e.validation.required.value&&(a=!0),!0===e.validation.required&&(a=!0),a&&c({validate:e=>!!e})}),[e.validation]),a.useEffect((()=>{var a,t;if(0===(null===(a=e.data)||void 0===a?void 0:a.length)&&!e.fetchDataFromUrl)return;if(e.data&&(null===(t=e.data)||void 0===t?void 0:t.length)>0&&!e.fetchDataFromUrl)return v(e.data),void p(!1);if(e.fetchDataFromUrl){(async()=>{const a=await(async e=>{const a={};try{const t=await fetch(e,a);return{status:!0,data:await t.json()}}catch(e){return{status:!1,data:[]}}})(e.fetchDataFromUrl);return a.status&&(v(a.data),p(!1)),a})()}v(e.data);const n=(e.data,"CO");b(n)}),[e.data]),l.default.createElement(l.default.Fragment,null,l.default.createElement("div",{className:"fg__select-wrapper"},l.default.createElement("select",{id:e.id,className:"form-control fg__input-select "+(m[e.name]?"is-invalid ":" "),name:e.name,ref:u(s),autoComplete:e.autocomplete?e.autocomplete:"off",disabled:f,defaultValue:h},e.placeholder?l.default.createElement("option",{value:""},e.placeholder):l.default.createElement(l.default.Fragment,null),g.map(((e,a)=>l.default.createElement("option",{key:a,value:e.value,disabled:!!e.disabled},e.label)))),l.default.createElement("div",{className:"loader fg__input-select "+(f?"loader-active ":" ")},l.default.createElement("span",null))),l.default.createElement("div",{className:"invalid-feedback"},"validate"==(null===(n=m[e.name])||void 0===n?void 0:n.type)?l.default.createElement(l.default.Fragment,null,""===(null===(i=null===(r=null==e?void 0:e.validation)||void 0===r?void 0:r.required)||void 0===i?void 0:i.message)?l.default.createElement("span",null,"Selezionare un opzione"):l.default.createElement("span",null,null===(d=null===(o=null==e?void 0:e.validation)||void 0===o?void 0:o.required)||void 0===d?void 0:d.message)):l.default.createElement(l.default.Fragment,null)))},s=e=>{var n,r,i,o,d,u,m,s,c,f,p,g,v,h,b,E,x,_;const{register:F,errors:y,watch:w,setError:k,clearErrors:G}=t.useFormContext(),[M,z]=a.useState({}),[L,S]=a.useState(0),[N,q]=a.useState(0);return a.useEffect((()=>{const a=e.validation;if(e.validation.minLength&&(e.validation.minLength.value?S(parseInt(e.validation.minLength.value)):S(parseInt(e.validation.minLength))),e.validation.maxLength&&(e.validation.maxLength.value?q(parseInt(e.validation.maxLength.value)):q(parseInt(e.validation.maxLength))),void 0!==e.validation.equalTo&&e.validation.equalTo.value){const t=e.validation.equalTo.value;a.validate=e=>e===w(t)}z(a)}),[]),a.useEffect((()=>{var a;"validate"==(null===(a=y[e.name])||void 0===a?void 0:a.type)&&e.validation.equalTo.value&&(k("repeatEmail",{type:"equalTo",message:"I due indirizzi email devono coincidere"}),G("validate"))}),[y]),l.default.createElement(l.default.Fragment,null,l.default.createElement("input",{id:e.id,type:"text",className:"form-control "+(y[e.name]?"is-invalid ":" "),placeholder:e.placeholder,name:e.name,autoComplete:e.autocomplete?e.autocomplete:"off",ref:F(M)}),l.default.createElement("div",{className:"invalid-feedback"},"required"==(null===(n=y[e.name])||void 0===n?void 0:n.type)?l.default.createElement(l.default.Fragment,null,""===(null===(r=y[e.name])||void 0===r?void 0:r.message)?l.default.createElement("span",null,"Il campo è richiesto"):l.default.createElement("span",null,null===(i=y[e.name])||void 0===i?void 0:i.message)):l.default.createElement(l.default.Fragment,null),"minLength"==(null===(o=y[e.name])||void 0===o?void 0:o.type)?l.default.createElement(l.default.Fragment,null,""===(null===(d=y[e.name])||void 0===d?void 0:d.message)?l.default.createElement("span",null,"La lunghezza minima è ",L," caratteri"):l.default.createElement("span",null,null===(u=y[e.name])||void 0===u?void 0:u.message)):l.default.createElement(l.default.Fragment,null),"maxLength"==(null===(m=y[e.name])||void 0===m?void 0:m.type)?l.default.createElement(l.default.Fragment,null,""===(null===(s=y[e.name])||void 0===s?void 0:s.message)?l.default.createElement("span",null,"La lunghezza massima è ",N," caratteri"):l.default.createElement("span",null,null===(c=y[e.name])||void 0===c?void 0:c.message)):l.default.createElement(l.default.Fragment,null),"pattern"==(null===(f=y[e.name])||void 0===f?void 0:f.type)?l.default.createElement(l.default.Fragment,null,""===(null===(p=y[e.name])||void 0===p?void 0:p.message)?l.default.createElement("span",null,"Rispettare le regole di formattazione"):l.default.createElement("span",null,null===(g=y[e.name])||void 0===g?void 0:g.message)):l.default.createElement(l.default.Fragment,null),"validate"==(null===(v=y[e.name])||void 0===v?void 0:v.type)?l.default.createElement(l.default.Fragment,null,""===(null===(h=y[e.name])||void 0===h?void 0:h.message)?l.default.createElement("span",null,"Rispettare le regole di validazione"):l.default.createElement("span",null,null===(b=y[e.name])||void 0===b?void 0:b.message)):l.default.createElement(l.default.Fragment,null),"equalTo"==(null===(E=y[e.name])||void 0===E?void 0:E.type)?l.default.createElement(l.default.Fragment,null,""===(null===(x=y[e.name])||void 0===x?void 0:x.message)?l.default.createElement("span",null,"I due campi devono essere uguali"):l.default.createElement("span",null,null===(_=y[e.name])||void 0===_?void 0:_.message)):l.default.createElement(l.default.Fragment,null)))},c=e=>{var n,r,i,o,d,u,m,s,c,f,p,g,v,h,b,E,x,_;const{register:F,errors:y,watch:w,setError:k,clearErrors:G}=t.useFormContext(),[M,z]=a.useState({}),[L,S]=a.useState(0),[N,q]=a.useState(0);return a.useEffect((()=>{const a=e.validation;if(e.validation.minLength&&(e.validation.minLength.value?S(parseInt(e.validation.minLength.value)):S(parseInt(e.validation.minLength))),e.validation.maxLength&&(e.validation.maxLength.value?q(parseInt(e.validation.maxLength.value)):q(parseInt(e.validation.maxLength))),void 0!==e.validation.equalTo&&e.validation.equalTo.value){const t=e.validation.equalTo.value;a.validate=e=>e===w(t)}z(a)}),[]),a.useEffect((()=>{var a;"validate"==(null===(a=y[e.name])||void 0===a?void 0:a.type)&&e.validation.equalTo.value&&(k("repeatEmail",{type:"equalTo",message:"I due campi devono coincidere"}),G("validate"))}),[y]),l.default.createElement(l.default.Fragment,null,l.default.createElement("textarea",{id:e.id,className:"form-control "+(y[e.name]?"is-invalid ":" "),placeholder:e.placeholder,name:e.name,autoComplete:e.autocomplete?e.autocomplete:"off",ref:F(M)}),l.default.createElement("div",{className:"invalid-feedback"},"required"==(null===(n=y[e.name])||void 0===n?void 0:n.type)?l.default.createElement(l.default.Fragment,null,""===(null===(r=y[e.name])||void 0===r?void 0:r.message)?l.default.createElement("span",null,"Il campo è richiesto"):l.default.createElement("span",null,null===(i=y[e.name])||void 0===i?void 0:i.message)):l.default.createElement(l.default.Fragment,null),"minLength"==(null===(o=y[e.name])||void 0===o?void 0:o.type)?l.default.createElement(l.default.Fragment,null,""===(null===(d=y[e.name])||void 0===d?void 0:d.message)?l.default.createElement("span",null,"La lunghezza minima è ",L," caratteri"):l.default.createElement("span",null,null===(u=y[e.name])||void 0===u?void 0:u.message)):l.default.createElement(l.default.Fragment,null),"maxLength"==(null===(m=y[e.name])||void 0===m?void 0:m.type)?l.default.createElement(l.default.Fragment,null,""===(null===(s=y[e.name])||void 0===s?void 0:s.message)?l.default.createElement("span",null,"La lunghezza massima è ",N," caratteri"):l.default.createElement("span",null,null===(c=y[e.name])||void 0===c?void 0:c.message)):l.default.createElement(l.default.Fragment,null),"pattern"==(null===(f=y[e.name])||void 0===f?void 0:f.type)?l.default.createElement(l.default.Fragment,null,""===(null===(p=y[e.name])||void 0===p?void 0:p.message)?l.default.createElement("span",null,"Rispettare le regole di formattazione"):l.default.createElement("span",null,null===(g=y[e.name])||void 0===g?void 0:g.message)):l.default.createElement(l.default.Fragment,null),"validate"==(null===(v=y[e.name])||void 0===v?void 0:v.type)?l.default.createElement(l.default.Fragment,null,""===(null===(h=y[e.name])||void 0===h?void 0:h.message)?l.default.createElement("span",null,"Rispettare le regole di validazione"):l.default.createElement("span",null,null===(b=y[e.name])||void 0===b?void 0:b.message)):l.default.createElement(l.default.Fragment,null),"equalTo"==(null===(E=y[e.name])||void 0===E?void 0:E.type)?l.default.createElement(l.default.Fragment,null,""===(null===(x=y[e.name])||void 0===x?void 0:x.message)?l.default.createElement("span",null,"I due campi devono essere uguali"):l.default.createElement("span",null,null===(_=y[e.name])||void 0===_?void 0:_.message)):l.default.createElement(l.default.Fragment,null)))},f=e=>{const{fields:t}=e,[n,f]=a.useState(null);return a.useEffect((()=>{const e=[];let a=0,n=[];t.map(((l,r)=>{let i="";i=l.layout?l.layout:"1/2";const o=d(i);if(a+=o,n.push(l),r>0){const e=d(t[r-1].layout);a<1&&a+e>1&&(a+=1)}a>=1&&(e.push(n),n=[],a=0),r===t.length-1&&e.push(n)})),f(e)}),[]),l.default.createElement("div",{className:"fg__fields fg__body"},n&&n.map(((e,a)=>l.default.createElement("div",{className:"row",key:a},e.map(((e,a)=>{const t=u(e.layout);return l.default.createElement("div",{className:t,key:a},l.default.createElement("div",{className:"fg__fields-field"},l.default.createElement(l.default.Fragment,null,"text"==e.type?l.default.createElement(s,{name:e.name,id:e.id,placeholder:e.placeholder,validation:e.validation,autocomplete:e.autocomplete,label:e.label}):l.default.createElement(l.default.Fragment,null),"email"==e.type?l.default.createElement(l.default.Fragment,null,l.default.createElement("label",null,e.label),l.default.createElement(i,{name:e.name,id:e.id,placeholder:e.placeholder,validation:e.validation,autocomplete:e.autocomplete})):l.default.createElement(l.default.Fragment,null),"password"==e.type?l.default.createElement(l.default.Fragment,null,l.default.createElement("label",null,e.label),l.default.createElement(o,{name:e.name,id:e.id,placeholder:e.placeholder,validation:e.validation,autocomplete:e.autocomplete})):l.default.createElement(l.default.Fragment,null),"select"==e.type?l.default.createElement(l.default.Fragment,null,l.default.createElement("label",null,e.label),l.default.createElement(m,{name:e.name,id:e.id,placeholder:e.placeholder,validation:e.validation,autocomplete:e.autocomplete,data:e.data,fetchDataFromUrl:e.fetchDataFromUrl})):l.default.createElement(l.default.Fragment,null),"textarea"==e.type?l.default.createElement(l.default.Fragment,null,l.default.createElement("label",null,e.label),l.default.createElement(c,{name:e.name,id:e.id,placeholder:e.placeholder,validation:e.validation,autocomplete:e.autocomplete})):l.default.createElement(l.default.Fragment,null),"checkbox"==e.type?l.default.createElement(l.default.Fragment,null,l.default.createElement("label",null,e.label),l.default.createElement(r,{name:e.name,id:e.id,placeholder:e.placeholder,validation:e.validation,autocomplete:e.autocomplete})):l.default.createElement(l.default.Fragment,null))))}))))))},p=e=>{const{title:a,subTitle:t}=e;return""===a&&""===t?l.default.createElement(l.default.Fragment,null):""===a?l.default.createElement("div",{className:"row"},l.default.createElement("h3",{className:"fg__subtitle"},(n=t)?n.split("\n").map(((e,a)=>l.default.createElement("p",{key:a},e))):[l.default.createElement(l.default.Fragment,null)])):""===t?l.default.createElement("div",{className:"row"},l.default.createElement("h3",{className:"fg__title"},a)):l.default.createElement("header",null,l.default.createElement("h3",{className:"fg__title"},a),l.default.createElement("p",{className:"fg__subtitle"},t));var n},g=e=>{const[t,n]=a.useState(!0);a.useEffect((()=>{n(!0)}),[t]);const r=u((null==e?void 0:e.layout)?e.layout:"1/4"),i=(null==e?void 0:e.text)?e.text:"Invia",o=(null==e||e.class,e.class),d=(null==e?void 0:e.id)?e.id:"";return l.default.createElement("div",{className:"row"},l.default.createElement("div",{className:r},l.default.createElement("div",{className:"fg__button-submit-wrapper "+(t?"with-loader ":" ")},(null==e?void 0:e.dom)?l.default.createElement(l.default.Fragment,null):l.default.createElement("input",{type:"submit",id:d,className:o,value:i}),(null==e?void 0:e.dom)&&"input"==e.dom?l.default.createElement("input",{type:"submit",id:d,className:o,value:i}):l.default.createElement(l.default.Fragment,null),(null==e?void 0:e.dom)&&"button"==e.dom?l.default.createElement("button",{type:"submit",id:d,className:o},i):l.default.createElement(l.default.Fragment,null),0==(null==e?void 0:e.loading)?l.default.createElement(l.default.Fragment,null):l.default.createElement("div",{className:"loader "+(t?"loader-active ":" ")},l.default.createElement("span",null)))))};!function(e,a){void 0===a&&(a={});var t=a.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===t&&n.firstChild?n.insertBefore(l,n.firstChild):n.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}('/**\r\n * Generate bootstrap container\r\n *\r\n * version -  0.1.0\r\n * @todo - implementarlo come mixins (studiare bootsrtrap\r\n */\n/**\r\n * Generate section style for dev\r\n *\r\n * version -  0.1.0\r\n */\n/**\r\n * Generate background color helper classes\r\n *\r\n * version -  0.1.0\r\n */\nbody {\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, \'Segoe UI\', \'Roboto\', \'Oxygen\',\r \'Ubuntu\', \'Cantarell\', \'Fira Sans\', \'Droid Sans\', \'Helvetica Neue\',\r sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale; }\n\n.repo-link {\n  color: #9017ff;\n  font-weight: 700;\n  font-size: 22px;\n  text-decoration: none !important; }\n\n.debug {\n  border: 1px solid red; }\n\n#navigation {\n  background: #eee; }\n  #navigation ul {\n    display: flex;\n    list-style-type: none;\n    margin-top: 0px !important;\n    margin-bottom: 0px !important;\n    padding-left: 0px; }\n    #navigation ul li {\n      padding: 10px;\n      margin: 0 30px 0 0; }\n      #navigation ul li a {\n        text-decoration: none;\n        color: #222;\n        text-transform: uppercase;\n        font-weight: 700;\n        opacity: 1; }\n        #navigation ul li a:hover {\n          opacity: 0.7; }\n\n.container {\n  width: 100%;\n  padding-right: 15px;\n  padding-left: 15px;\n  margin-right: auto;\n  margin-left: auto; }\n\n@media (min-width: 768px) {\n  .container {\n    max-width: 720px; } }\n\n@media (min-width: 992px) {\n  .container {\n    max-width: 960px; } }\n\n@media (min-width: 1200px) {\n  .container {\n    max-width: 1140px; } }\n\n@media (min-width: 1400px) {\n  .container {\n    max-width: 1400px; } }\n\n.section {\n  padding: 40px 0px; }\n  .section:nth-of-type(even) {\n    background: #eee; }\n\n.bg-white {\n  background: #fff;\n  background-color: #fff; }\n\n.bg-light {\n  background: #f9f9f9;\n  background-color: #f9f9f9; }\n\n/**\r\n * SASS styles for React Form Generator module\r\n *\r\n * @vesion 0.1.0\r\n * @author Stefano Gagliardi <stefano.gagliardi@sitisrl.it>\r\n */\n/**\r\n * Form Generator configuration style file.\r\n * Ovveride in your style var\r\n */\n#MagicFormGenerator header {\n  text-align: center; }\n\n#MagicFormGenerator .fg__body {\n  margin-top: 40px; }\n  #MagicFormGenerator .fg__body .fg__select-wrapper {\n    position: relative; }\n\n#MagicFormGenerator .row {\n  display: -webkit-flex;\n  display: flex;\n  -webkit-flex-wrap: wrap;\n  flex-wrap: wrap;\n  margin-right: -15px;\n  margin-left: -15px; }\n  #MagicFormGenerator .row .fg__col-full,\n  #MagicFormGenerator .row .fg__col-half,\n  #MagicFormGenerator .row .fg__col-third,\n  #MagicFormGenerator .row .fg__col-fourth {\n    position: relative;\n    width: 100%;\n    min-height: 1px;\n    padding-right: 15px;\n    padding-left: 15px; }\n  #MagicFormGenerator .row .fg__col-full {\n    display: inline-block;\n    width: 100%;\n    padding-left: 15px;\n    padding-right: 15px; }\n  #MagicFormGenerator .row .fg__col-half {\n    display: inline-block;\n    width: 50%;\n    padding-left: 15px;\n    padding-right: 15px; }\n  #MagicFormGenerator .row .fg__col-third {\n    display: inline-block;\n    width: 33.3333333333%;\n    padding-left: 15px;\n    padding-right: 15px; }\n  #MagicFormGenerator .row .fg__col-fourth {\n    display: inline-block;\n    width: 25%;\n    padding-left: 15px;\n    padding-right: 15px; }\n\n#MagicFormGenerator .fg__fields .fg__fields-field {\n  flex-grow: 1;\n  padding: 10px 0px; }\n  #MagicFormGenerator .fg__fields .fg__fields-field label {\n    display: block;\n    font-weight: 600;\n    margin-bottom: 10px; }\n  #MagicFormGenerator .fg__fields .fg__fields-field .invalid-feedback > span {\n    display: block;\n    font-size: 12px;\n    margin-top: 5px;\n    color: crimson; }\n\n#MagicFormGenerator .fg__fields input[type="text"],\n#MagicFormGenerator .fg__fields input[type="email"],\n#MagicFormGenerator .fg__fields input[type="password"],\n#MagicFormGenerator .fg__fields select {\n  position: relative;\n  margin-bottom: 0;\n  display: block;\n  width: 100%;\n  padding: 10px 0px 10px 10px;\n  font-size: 1rem;\n  line-height: 1.5;\n  color: #495057;\n  background-color: #fff;\n  background-clip: padding-box;\n  border: 1px solid #ced4da;\n  border-radius: 0.25rem;\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  z-index: 2; }\n  #MagicFormGenerator .fg__fields input[type="text"].is-invalid,\n  #MagicFormGenerator .fg__fields input[type="email"].is-invalid,\n  #MagicFormGenerator .fg__fields input[type="password"].is-invalid,\n  #MagicFormGenerator .fg__fields select.is-invalid {\n    border: 1px solid crimson; }\n    #MagicFormGenerator .fg__fields input[type="text"].is-invalid:focus,\n    #MagicFormGenerator .fg__fields input[type="email"].is-invalid:focus,\n    #MagicFormGenerator .fg__fields input[type="password"].is-invalid:focus,\n    #MagicFormGenerator .fg__fields select.is-invalid:focus {\n      outline: none;\n      box-shadow: 0px 0px 6px rgba(237, 20, 61, 0.65); }\n  #MagicFormGenerator .fg__fields input[type="text"]:focus,\n  #MagicFormGenerator .fg__fields input[type="email"]:focus,\n  #MagicFormGenerator .fg__fields input[type="password"]:focus,\n  #MagicFormGenerator .fg__fields select:focus {\n    outline: none; }\n\n#MagicFormGenerator .fg__fields textarea {\n  display: block;\n  width: 100%;\n  padding: 0.375rem 0.75rem;\n  font-size: 1rem;\n  line-height: 1.5;\n  color: #495057;\n  background-color: #fff;\n  background-clip: padding-box;\n  border: 1px solid #ced4da;\n  border-radius: 0.25rem;\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  overflow: auto;\n  resize: vertical;\n  z-index: 2; }\n  #MagicFormGenerator .fg__fields textarea.is-invalid {\n    border: 1px solid crimson; }\n    #MagicFormGenerator .fg__fields textarea.is-invalid:focus {\n      outline: none;\n      box-shadow: 0px 0px 6px rgba(237, 20, 61, 0.65); }\n  #MagicFormGenerator .fg__fields textarea:focus {\n    outline: none; }\n\n#MagicFormGenerator .fg__fields .fg__checkbox-wrapper {\n  position: relative;\n  /* Hide the browser\'s default checkbox */\n  /* Create a custom checkbox */\n  /* On mouse-over, add a grey background color */\n  /* When the checkbox is checked, add a blue background */\n  /* Create the checkmark/indicator (hidden when not checked) */\n  /* Show the checkmark when checked */\n  /* Style the checkmark/indicator */ }\n  #MagicFormGenerator .fg__fields .fg__checkbox-wrapper input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n    height: 0;\n    width: 0; }\n  #MagicFormGenerator .fg__fields .fg__checkbox-wrapper .checkmark {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 25px;\n    width: 25px;\n    background-color: #eee; }\n  #MagicFormGenerator .fg__fields .fg__checkbox-wrapper:hover input ~ .checkmark {\n    background-color: #ccc; }\n  #MagicFormGenerator .fg__fields .fg__checkbox-wrapper input:checked ~ .checkmark {\n    background-color: #2563EB; }\n  #MagicFormGenerator .fg__fields .fg__checkbox-wrapper .checkmark:after {\n    content: "";\n    position: absolute;\n    display: none; }\n  #MagicFormGenerator .fg__fields .fg__checkbox-wrapper input:checked ~ .checkmark:after {\n    display: block; }\n  #MagicFormGenerator .fg__fields .fg__checkbox-wrapper .checkmark:after {\n    left: 11px;\n    top: 7px;\n    width: 5px;\n    height: 10px;\n    border: solid white;\n    border-width: 0 3px 3px 0;\n    -webkit-transform: rotate(45deg);\n    -ms-transform: rotate(45deg);\n    transform: rotate(45deg); }\n\n#MagicFormGenerator .fg__fields .fg__checkbox-text {\n  padding-left: 45px; }\n\n#MagicFormGenerator .fg__button-submit-wrapper {\n  display: flex;\n  position: relative;\n  width: fit-content; }\n  #MagicFormGenerator .fg__button-submit-wrapper .fg__button-submit {\n    border-radius: 2px;\n    background-color: #DC2626;\n    border-color: #DC2626;\n    color: #fff;\n    -webkit-transition: 0.3s;\n    -moz-transition: 0.3s;\n    -ms-transition: 0.3s;\n    -o-transition: 0.3s;\n    transition: 0.3s;\n    -webkit-box-shadow: 0 2px 2px 0 rgba(156, 39, 176, 0.14), 0 3px 1px -2px rgba(156, 39, 176, 0.2), 0 1px 5px 0 rgba(156, 39, 176, 0.12);\n    -moz-box-shadow: 0 2px 2px 0 rgba(156, 39, 176, 0.14), 0 3px 1px -2px rgba(156, 39, 176, 0.2), 0 1px 5px 0 rgba(156, 39, 176, 0.12);\n    box-shadow: 0 2px 2px 0 rgba(156, 39, 176, 0.14), 0 3px 1px -2px rgba(156, 39, 176, 0.2), 0 1px 5px 0 rgba(156, 39, 176, 0.12);\n    position: relative;\n    display: block;\n    margin: 0px 0px;\n    padding: 0.375rem 0.75rem;\n    font-size: 0.8rem;\n    line-height: 1.5;\n    font-weight: 300;\n    letter-spacing: 0.5px;\n    text-transform: uppercase;\n    text-decoration: none;\n    border: 1 px solid #666;\n    border-radius: 0px;\n    white-space: nowrap;\n    vertical-align: middle;\n    overflow: hidden;\n    outline: 0;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    border: inherit !important;\n    opacity: 1;\n    cursor: pointer; }\n    #MagicFormGenerator .fg__button-submit-wrapper .fg__button-submit:hover {\n      background-color: #DC2626;\n      border-color: #DC2626;\n      opacity: 0.8;\n      color: #fff; }\n    #MagicFormGenerator .fg__button-submit-wrapper .fg__button-submit:focus, #MagicFormGenerator .fg__button-submit-wrapper .fg__button-submit:active, #MagicFormGenerator .fg__button-submit-wrapper .fg__button-submit:hover {\n      border: inherit !important; }\n  #MagicFormGenerator .fg__button-submit-wrapper.with-loader .fg__button-submit {\n    color: #DC2626; }\n  #MagicFormGenerator .fg__button-submit-wrapper .loader {\n    left: calc(50% - 22px / 2);\n    top: calc(50% - 22px   / 2);\n    position: absolute;\n    width: 22px;\n    height: 22px; }\n    #MagicFormGenerator .fg__button-submit-wrapper .loader span, #MagicFormGenerator .fg__button-submit-wrapper .loader span::after, #MagicFormGenerator .fg__button-submit-wrapper .loader span::before {\n      width: 22px;\n      height: 22px; }\n\n#MagicFormGenerator .fg__fields .loader {\n  position: absolute;\n  top: 5px;\n  left: calc(50% - 45px / 2);\n  z-index: 5;\n  display: none; }\n  #MagicFormGenerator .fg__fields .loader.loader-active {\n    display: block; }\n\n#MagicFormGenerator .fg__fields select:disabled {\n  background: rgba(0, 0, 0, 0.5); }\n\n/**\r\n * Input loader spinnig overlay\r\n */\n#MagicFormGenerator {\n  /* Loader 2 */ }\n  #MagicFormGenerator .loader {\n    display: block;\n    height: 32px;\n    width: 32px;\n    -webkit-animation: loader-1 3s linear infinite;\n    animation: loader-1 3s linear infinite; }\n\n@-webkit-keyframes loader-1 {\n  0% {\n    -webkit-transform: rotate(0deg); }\n  100% {\n    -webkit-transform: rotate(360deg); } }\n\n@keyframes loader-1 {\n  0% {\n    transform: rotate(0deg); }\n  100% {\n    transform: rotate(360deg); } }\n  #MagicFormGenerator .loader span {\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    right: 0;\n    margin: auto;\n    height: 32px;\n    width: 32px;\n    clip: rect(16px, 32px, 32px, 0);\n    -webkit-animation: loader-2 1.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;\n    animation: loader-2 1.5s cubic-bezier(0.77, 0, 0.175, 1) infinite; }\n\n@-webkit-keyframes loader-2 {\n  0% {\n    -webkit-transform: rotate(0deg); }\n  100% {\n    -webkit-transform: rotate(360deg); } }\n\n@keyframes loader-2 {\n  0% {\n    transform: rotate(0deg); }\n  100% {\n    transform: rotate(360deg); } }\n  #MagicFormGenerator .loader span::before {\n    content: "";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    right: 0;\n    margin: auto;\n    height: 32px;\n    width: 32px;\n    border: 3px solid transparent;\n    border-top: 3px solid white;\n    border-radius: 50%;\n    -webkit-animation: loader-3 1.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;\n    animation: loader-3 1.5s cubic-bezier(0.77, 0, 0.175, 1) infinite; }\n\n@-webkit-keyframes loader-3 {\n  0% {\n    -webkit-transform: rotate(0deg); }\n  100% {\n    -webkit-transform: rotate(360deg); } }\n\n@keyframes loader-3 {\n  0% {\n    transform: rotate(0deg); }\n  100% {\n    transform: rotate(360deg); } }\n  #MagicFormGenerator .loader span::after {\n    content: "";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    right: 0;\n    margin: auto;\n    height: 32px;\n    width: 32px;\n    border: 3px solid rgba(255, 255, 255, 0.7);\n    border-radius: 50%; }\n\n*,\n::after,\n::before {\n  box-sizing: border-box; }\n\n#MagicFormGenerator a {\n  color: #DC2626;\n  opacity: 1;\n  text-decoration: none; }\n  #MagicFormGenerator a:hover {\n    opacity: .8; }\n');const v=e=>{const{form:n}=e,{submit:r,buttonSubmit:i}=n,o=t.useForm(),d=a.useCallback((async e=>{const a=r.onSubmit?r.onSubmit(e):e;r.backend&&await(async(e,a,t)=>{const n=new URLSearchParams(t);let l={};l="GET"==a?{method:a}:{method:a,body:t};try{const a=await fetch(e+"?"+n,l);return{status:!0,data:await a.json()}}catch(e){return{status:!1,data:[]}}})(r.endpoint,r.method,a)}),[]);return l.default.createElement(t.FormProvider,Object.assign({},o),l.default.createElement("div",{id:"MagicFormGenerator"},l.default.createElement("form",{onSubmit:o.handleSubmit(d),noValidate:!0},l.default.createElement(p,{title:n.title,subTitle:n.subTitle}),l.default.createElement(f,{fields:n.fields}),l.default.createElement(g,Object.assign({},i)))))};e.MagicFormGenerator=v,e.default=v,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=index.umd.production.min.js.map