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

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

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),a=require("react-hook-form");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e);const l=t=>{var l,r,i;const{register:o,errors:d,setValue:u,trigger:m}=a.useFormContext(),[s,c]=e.useState({}),[f,p]=e.useState(!1);e.useEffect((()=>{const e=t.validation;c(e)}),[]);return n.default.createElement(n.default.Fragment,null,n.default.createElement("div",{className:"fg__checkbox-wrapper"},n.default.createElement("input",{id:t.id,type:"checkbox",className:"form-control "+(d[t.name]?"is-invalid ":" "),name:t.name,checked:f,onChange:e=>{},autoComplete:t.autocomplete?t.autocomplete:"off",ref:o(s)}),n.default.createElement("span",{className:"checkmark",onClick:()=>{u(t.name,!f),p(!f),m()}}),n.default.createElement("div",{className:"fg__checkbox-text",dangerouslySetInnerHTML:{__html:t.placeholder}})),n.default.createElement("div",{className:"invalid-feedback"},"required"==(null===(l=d[t.name])||void 0===l?void 0:l.type)?n.default.createElement(n.default.Fragment,null,""===(null===(r=d[t.name])||void 0===r?void 0:r.message)?n.default.createElement("span",null,"Il campo è richiesto"):n.default.createElement("span",null,null===(i=d[t.name])||void 0===i?void 0:i.message)):n.default.createElement(n.default.Fragment,null)))},r=t=>{var l,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}=a.useFormContext(),[M,z]=e.useState({}),[L,S]=e.useState(0),[N,q]=e.useState(0);return e.useEffect((()=>{const e=t.validation;if(t.validation.minLength&&(t.validation.minLength.value?S(parseInt(t.validation.minLength.value)):S(parseInt(t.validation.minLength))),t.validation.maxLength&&(t.validation.maxLength.value?q(parseInt(t.validation.maxLength.value)):q(parseInt(t.validation.maxLength))),void 0!==t.validation.equalTo&&t.validation.equalTo.value){const a=t.validation.equalTo.value;e.validate=e=>e===w(a)}z(Object.assign(Object.assign({},e),{pattern:/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/}))}),[]),e.useEffect((()=>{var e;"validate"==(null===(e=y[t.name])||void 0===e?void 0:e.type)&&t.validation.equalTo.value&&(k("repeatEmail",{type:"equalTo",message:"I due indirizzi email devono coincidere"}),G("validate"))}),[y]),n.default.createElement(n.default.Fragment,null,n.default.createElement("input",{id:t.id,type:"email",className:"form-control "+(y[t.name]?"is-invalid ":" "),placeholder:t.placeholder,name:t.name,autoComplete:t.autocomplete?t.autocomplete:"off",ref:F(M)}),n.default.createElement("div",{className:"invalid-feedback"},"required"==(null===(l=y[t.name])||void 0===l?void 0:l.type)?n.default.createElement(n.default.Fragment,null,""===(null===(r=y[t.name])||void 0===r?void 0:r.message)?n.default.createElement("span",null,"Il campo email è richiesto"):n.default.createElement("span",null,null===(i=y[t.name])||void 0===i?void 0:i.message)):n.default.createElement(n.default.Fragment,null),"minLength"==(null===(o=y[t.name])||void 0===o?void 0:o.type)?n.default.createElement(n.default.Fragment,null,""===(null===(d=y[t.name])||void 0===d?void 0:d.message)?n.default.createElement("span",null,"La lunghezza minima è ",L," caratteri"):n.default.createElement("span",null,null===(u=y[t.name])||void 0===u?void 0:u.message)):n.default.createElement(n.default.Fragment,null),"maxLength"==(null===(m=y[t.name])||void 0===m?void 0:m.type)?n.default.createElement(n.default.Fragment,null,""===(null===(s=y[t.name])||void 0===s?void 0:s.message)?n.default.createElement("span",null,"La lunghezza massima è ",N," caratteri"):n.default.createElement("span",null,null===(c=y[t.name])||void 0===c?void 0:c.message)):n.default.createElement(n.default.Fragment,null),"pattern"==(null===(f=y[t.name])||void 0===f?void 0:f.type)?n.default.createElement(n.default.Fragment,null,""===(null===(p=y[t.name])||void 0===p?void 0:p.message)?n.default.createElement("span",null,"Inserire un&aposindirizzo email valido"):n.default.createElement("span",null,null===(g=y[t.name])||void 0===g?void 0:g.message)):n.default.createElement(n.default.Fragment,null),"validate"==(null===(v=y[t.name])||void 0===v?void 0:v.type)?n.default.createElement(n.default.Fragment,null,""===(null===(h=y[t.name])||void 0===h?void 0:h.message)?n.default.createElement("span",null,"Rispettare le regole di validazione"):n.default.createElement("span",null,null===(b=y[t.name])||void 0===b?void 0:b.message)):n.default.createElement(n.default.Fragment,null),"equalTo"==(null===(E=y[t.name])||void 0===E?void 0:E.type)?n.default.createElement(n.default.Fragment,null,""===(null===(x=y[t.name])||void 0===x?void 0:x.message)?n.default.createElement("span",null,"I due campi devono essere uguali"):n.default.createElement("span",null,null===(_=y[t.name])||void 0===_?void 0:_.message)):n.default.createElement(n.default.Fragment,null)))},i=t=>{var l,r,i,o,d,u,m,s,c,f,p,g,v,h,b,E,x,_;const{register:F,errors:y,watch:w}=a.useFormContext(),[k,G]=e.useState({}),[M,z]=e.useState(0),[L,S]=e.useState(0);return e.useEffect((()=>{const e=t.validation;if(t.validation.minLength&&(t.validation.minLength.value?z(parseInt(t.validation.minLength.value)):z(parseInt(t.validation.minLength))),t.validation.maxLength&&(t.validation.maxLength.value?S(parseInt(t.validation.maxLength.value)):S(parseInt(t.validation.maxLength))),void 0!==t.validation.equalTo&&t.validation.equalTo.value){const a=t.validation.equalTo.value;e.validate=e=>e===w(a)}G(Object.assign({},e))}),[]),n.default.createElement(n.default.Fragment,null,n.default.createElement("input",{id:t.id,type:"password",className:"form-control "+(y[t.name]?"is-invalid ":" "),placeholder:t.placeholder,name:t.name,autoComplete:t.autocomplete?t.autocomplete:"off",ref:F(k)}),n.default.createElement("div",{className:"invalid-feedback"},"required"==(null===(l=y[t.name])||void 0===l?void 0:l.type)?n.default.createElement(n.default.Fragment,null,""===(null===(r=y[t.name])||void 0===r?void 0:r.message)?n.default.createElement("span",null,"Il campo password è richiesto"):n.default.createElement("span",null,null===(i=y[t.name])||void 0===i?void 0:i.message)):n.default.createElement(n.default.Fragment,null),"minLength"==(null===(o=y[t.name])||void 0===o?void 0:o.type)?n.default.createElement(n.default.Fragment,null,""===(null===(d=y[t.name])||void 0===d?void 0:d.message)?n.default.createElement("span",null,"La lunghezza minima è ",M," caratteri"):n.default.createElement("span",null,null===(u=y[t.name])||void 0===u?void 0:u.message)):n.default.createElement(n.default.Fragment,null),"maxLength"==(null===(m=y[t.name])||void 0===m?void 0:m.type)?n.default.createElement(n.default.Fragment,null,""===(null===(s=y[t.name])||void 0===s?void 0:s.message)?n.default.createElement("span",null,"La lunghezza massima è ",L," caratteri"):n.default.createElement("span",null,null===(c=y[t.name])||void 0===c?void 0:c.message)):n.default.createElement(n.default.Fragment,null),"pattern"==(null===(f=y[t.name])||void 0===f?void 0:f.type)?n.default.createElement(n.default.Fragment,null,""===(null===(p=y[t.name])||void 0===p?void 0:p.message)?n.default.createElement("span",null,"Rispettare le regole di formattazione"):n.default.createElement("span",null,null===(g=y[t.name])||void 0===g?void 0:g.message)):n.default.createElement(n.default.Fragment,null),"validate"==(null===(v=y[t.name])||void 0===v?void 0:v.type)?n.default.createElement(n.default.Fragment,null,""===(null===(h=y[t.name])||void 0===h?void 0:h.message)?n.default.createElement("span",null,"Rispettare le regole di validazione"):n.default.createElement("span",null,null===(b=y[t.name])||void 0===b?void 0:b.message)):n.default.createElement(n.default.Fragment,null),"equalTo"==(null===(E=y[t.name])||void 0===E?void 0:E.type)?n.default.createElement(n.default.Fragment,null,""===(null===(x=y[t.name])||void 0===x?void 0:x.message)?n.default.createElement("span",null,"I due campi devono essere uguali"):n.default.createElement("span",null,null===(_=y[t.name])||void 0===_?void 0:_.message)):n.default.createElement(n.default.Fragment,null)))},o=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}},d=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"}},u=t=>{var l,r,i,o,d;const{register:u,errors:m}=a.useFormContext(),[s,c]=e.useState({}),[f,p]=e.useState(!0),[g,v]=e.useState([]),[h,b]=e.useState("");return e.useEffect((()=>{let e=!1;t.validation.required.value&&(e=!0),!0===t.validation.required&&(e=!0),e&&c({validate:e=>!!e})}),[t.validation]),e.useEffect((()=>{var e,a;if(0===(null===(e=t.data)||void 0===e?void 0:e.length)&&!t.fetchDataFromUrl)return;if(t.data&&(null===(a=t.data)||void 0===a?void 0:a.length)>0&&!t.fetchDataFromUrl)return v(t.data),void p(!1);if(t.fetchDataFromUrl){(async()=>{const e=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:[]}}})(t.fetchDataFromUrl);return e.status&&(v(e.data),p(!1)),e})()}v(t.data);const n=(t.data,"CO");b(n)}),[t.data]),n.default.createElement(n.default.Fragment,null,n.default.createElement("div",{className:"fg__select-wrapper"},n.default.createElement("select",{id:t.id,className:"form-control fg__input-select "+(m[t.name]?"is-invalid ":" "),name:t.name,ref:u(s),autoComplete:t.autocomplete?t.autocomplete:"off",disabled:f,defaultValue:h},t.placeholder?n.default.createElement("option",{value:""},t.placeholder):n.default.createElement(n.default.Fragment,null),g.map(((e,a)=>n.default.createElement("option",{key:a,value:e.value,disabled:!!e.disabled},e.label)))),n.default.createElement("div",{className:"loader fg__input-select "+(f?"loader-active ":" ")},n.default.createElement("span",null))),n.default.createElement("div",{className:"invalid-feedback"},"validate"==(null===(l=m[t.name])||void 0===l?void 0:l.type)?n.default.createElement(n.default.Fragment,null,""===(null===(i=null===(r=null==t?void 0:t.validation)||void 0===r?void 0:r.required)||void 0===i?void 0:i.message)?n.default.createElement("span",null,"Selezionare un opzione"):n.default.createElement("span",null,null===(d=null===(o=null==t?void 0:t.validation)||void 0===o?void 0:o.required)||void 0===d?void 0:d.message)):n.default.createElement(n.default.Fragment,null)))},m=t=>{var l,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}=a.useFormContext(),[M,z]=e.useState({}),[L,S]=e.useState(0),[N,q]=e.useState(0);return e.useEffect((()=>{const e=t.validation;if(t.validation.minLength&&(t.validation.minLength.value?S(parseInt(t.validation.minLength.value)):S(parseInt(t.validation.minLength))),t.validation.maxLength&&(t.validation.maxLength.value?q(parseInt(t.validation.maxLength.value)):q(parseInt(t.validation.maxLength))),void 0!==t.validation.equalTo&&t.validation.equalTo.value){const a=t.validation.equalTo.value;e.validate=e=>e===w(a)}z(e)}),[]),e.useEffect((()=>{var e;"validate"==(null===(e=y[t.name])||void 0===e?void 0:e.type)&&t.validation.equalTo.value&&(k("repeatEmail",{type:"equalTo",message:"I due indirizzi email devono coincidere"}),G("validate"))}),[y]),n.default.createElement(n.default.Fragment,null,n.default.createElement("input",{id:t.id,type:"text",className:"form-control "+(y[t.name]?"is-invalid ":" "),placeholder:t.placeholder,name:t.name,autoComplete:t.autocomplete?t.autocomplete:"off",ref:F(M)}),n.default.createElement("div",{className:"invalid-feedback"},"required"==(null===(l=y[t.name])||void 0===l?void 0:l.type)?n.default.createElement(n.default.Fragment,null,""===(null===(r=y[t.name])||void 0===r?void 0:r.message)?n.default.createElement("span",null,"Il campo è richiesto"):n.default.createElement("span",null,null===(i=y[t.name])||void 0===i?void 0:i.message)):n.default.createElement(n.default.Fragment,null),"minLength"==(null===(o=y[t.name])||void 0===o?void 0:o.type)?n.default.createElement(n.default.Fragment,null,""===(null===(d=y[t.name])||void 0===d?void 0:d.message)?n.default.createElement("span",null,"La lunghezza minima è ",L," caratteri"):n.default.createElement("span",null,null===(u=y[t.name])||void 0===u?void 0:u.message)):n.default.createElement(n.default.Fragment,null),"maxLength"==(null===(m=y[t.name])||void 0===m?void 0:m.type)?n.default.createElement(n.default.Fragment,null,""===(null===(s=y[t.name])||void 0===s?void 0:s.message)?n.default.createElement("span",null,"La lunghezza massima è ",N," caratteri"):n.default.createElement("span",null,null===(c=y[t.name])||void 0===c?void 0:c.message)):n.default.createElement(n.default.Fragment,null),"pattern"==(null===(f=y[t.name])||void 0===f?void 0:f.type)?n.default.createElement(n.default.Fragment,null,""===(null===(p=y[t.name])||void 0===p?void 0:p.message)?n.default.createElement("span",null,"Rispettare le regole di formattazione"):n.default.createElement("span",null,null===(g=y[t.name])||void 0===g?void 0:g.message)):n.default.createElement(n.default.Fragment,null),"validate"==(null===(v=y[t.name])||void 0===v?void 0:v.type)?n.default.createElement(n.default.Fragment,null,""===(null===(h=y[t.name])||void 0===h?void 0:h.message)?n.default.createElement("span",null,"Rispettare le regole di validazione"):n.default.createElement("span",null,null===(b=y[t.name])||void 0===b?void 0:b.message)):n.default.createElement(n.default.Fragment,null),"equalTo"==(null===(E=y[t.name])||void 0===E?void 0:E.type)?n.default.createElement(n.default.Fragment,null,""===(null===(x=y[t.name])||void 0===x?void 0:x.message)?n.default.createElement("span",null,"I due campi devono essere uguali"):n.default.createElement("span",null,null===(_=y[t.name])||void 0===_?void 0:_.message)):n.default.createElement(n.default.Fragment,null)))},s=t=>{var l,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}=a.useFormContext(),[M,z]=e.useState({}),[L,S]=e.useState(0),[N,q]=e.useState(0);return e.useEffect((()=>{const e=t.validation;if(t.validation.minLength&&(t.validation.minLength.value?S(parseInt(t.validation.minLength.value)):S(parseInt(t.validation.minLength))),t.validation.maxLength&&(t.validation.maxLength.value?q(parseInt(t.validation.maxLength.value)):q(parseInt(t.validation.maxLength))),void 0!==t.validation.equalTo&&t.validation.equalTo.value){const a=t.validation.equalTo.value;e.validate=e=>e===w(a)}z(e)}),[]),e.useEffect((()=>{var e;"validate"==(null===(e=y[t.name])||void 0===e?void 0:e.type)&&t.validation.equalTo.value&&(k("repeatEmail",{type:"equalTo",message:"I due campi devono coincidere"}),G("validate"))}),[y]),n.default.createElement(n.default.Fragment,null,n.default.createElement("textarea",{id:t.id,className:"form-control "+(y[t.name]?"is-invalid ":" "),placeholder:t.placeholder,name:t.name,autoComplete:t.autocomplete?t.autocomplete:"off",ref:F(M)}),n.default.createElement("div",{className:"invalid-feedback"},"required"==(null===(l=y[t.name])||void 0===l?void 0:l.type)?n.default.createElement(n.default.Fragment,null,""===(null===(r=y[t.name])||void 0===r?void 0:r.message)?n.default.createElement("span",null,"Il campo è richiesto"):n.default.createElement("span",null,null===(i=y[t.name])||void 0===i?void 0:i.message)):n.default.createElement(n.default.Fragment,null),"minLength"==(null===(o=y[t.name])||void 0===o?void 0:o.type)?n.default.createElement(n.default.Fragment,null,""===(null===(d=y[t.name])||void 0===d?void 0:d.message)?n.default.createElement("span",null,"La lunghezza minima è ",L," caratteri"):n.default.createElement("span",null,null===(u=y[t.name])||void 0===u?void 0:u.message)):n.default.createElement(n.default.Fragment,null),"maxLength"==(null===(m=y[t.name])||void 0===m?void 0:m.type)?n.default.createElement(n.default.Fragment,null,""===(null===(s=y[t.name])||void 0===s?void 0:s.message)?n.default.createElement("span",null,"La lunghezza massima è ",N," caratteri"):n.default.createElement("span",null,null===(c=y[t.name])||void 0===c?void 0:c.message)):n.default.createElement(n.default.Fragment,null),"pattern"==(null===(f=y[t.name])||void 0===f?void 0:f.type)?n.default.createElement(n.default.Fragment,null,""===(null===(p=y[t.name])||void 0===p?void 0:p.message)?n.default.createElement("span",null,"Rispettare le regole di formattazione"):n.default.createElement("span",null,null===(g=y[t.name])||void 0===g?void 0:g.message)):n.default.createElement(n.default.Fragment,null),"validate"==(null===(v=y[t.name])||void 0===v?void 0:v.type)?n.default.createElement(n.default.Fragment,null,""===(null===(h=y[t.name])||void 0===h?void 0:h.message)?n.default.createElement("span",null,"Rispettare le regole di validazione"):n.default.createElement("span",null,null===(b=y[t.name])||void 0===b?void 0:b.message)):n.default.createElement(n.default.Fragment,null),"equalTo"==(null===(E=y[t.name])||void 0===E?void 0:E.type)?n.default.createElement(n.default.Fragment,null,""===(null===(x=y[t.name])||void 0===x?void 0:x.message)?n.default.createElement("span",null,"I due campi devono essere uguali"):n.default.createElement("span",null,null===(_=y[t.name])||void 0===_?void 0:_.message)):n.default.createElement(n.default.Fragment,null)))},c=a=>{const{fields:t}=a,[c,f]=e.useState(null);return e.useEffect((()=>{const e=[];let a=0,n=[];t.map(((l,r)=>{let i="";i=l.layout?l.layout:"1/2";const d=o(i);if(a+=d,n.push(l),r>0){const e=o(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)}),[]),n.default.createElement("div",{className:"fg__fields fg__body"},c&&c.map(((e,a)=>n.default.createElement("div",{className:"row",key:a},e.map(((e,a)=>{const t=d(e.layout);return n.default.createElement("div",{className:t,key:a},n.default.createElement("div",{className:"fg__fields-field"},n.default.createElement(n.default.Fragment,null,"text"==e.type?n.default.createElement(m,{name:e.name,id:e.id,placeholder:e.placeholder,validation:e.validation,autocomplete:e.autocomplete,label:e.label}):n.default.createElement(n.default.Fragment,null),"email"==e.type?n.default.createElement(n.default.Fragment,null,n.default.createElement("label",null,e.label),n.default.createElement(r,{name:e.name,id:e.id,placeholder:e.placeholder,validation:e.validation,autocomplete:e.autocomplete})):n.default.createElement(n.default.Fragment,null),"password"==e.type?n.default.createElement(n.default.Fragment,null,n.default.createElement("label",null,e.label),n.default.createElement(i,{name:e.name,id:e.id,placeholder:e.placeholder,validation:e.validation,autocomplete:e.autocomplete})):n.default.createElement(n.default.Fragment,null),"select"==e.type?n.default.createElement(n.default.Fragment,null,n.default.createElement("label",null,e.label),n.default.createElement(u,{name:e.name,id:e.id,placeholder:e.placeholder,validation:e.validation,autocomplete:e.autocomplete,data:e.data,fetchDataFromUrl:e.fetchDataFromUrl})):n.default.createElement(n.default.Fragment,null),"textarea"==e.type?n.default.createElement(n.default.Fragment,null,n.default.createElement("label",null,e.label),n.default.createElement(s,{name:e.name,id:e.id,placeholder:e.placeholder,validation:e.validation,autocomplete:e.autocomplete})):n.default.createElement(n.default.Fragment,null),"checkbox"==e.type?n.default.createElement(n.default.Fragment,null,n.default.createElement("label",null,e.label),n.default.createElement(l,{name:e.name,id:e.id,placeholder:e.placeholder,validation:e.validation,autocomplete:e.autocomplete})):n.default.createElement(n.default.Fragment,null))))}))))))},f=e=>{const{title:a,subTitle:t}=e;return""===a&&""===t?n.default.createElement(n.default.Fragment,null):""===a?n.default.createElement("div",{className:"row"},n.default.createElement("h3",{className:"fg__subtitle"},(l=t)?l.split("\n").map(((e,a)=>n.default.createElement("p",{key:a},e))):[n.default.createElement(n.default.Fragment,null)])):""===t?n.default.createElement("div",{className:"row"},n.default.createElement("h3",{className:"fg__title"},a)):n.default.createElement("header",null,n.default.createElement("h3",{className:"fg__title"},a),n.default.createElement("p",{className:"fg__subtitle"},t));var l},p=a=>{const[t,l]=e.useState(!0);e.useEffect((()=>{l(!0)}),[t]);const r=d((null==a?void 0:a.layout)?a.layout:"1/4"),i=(null==a?void 0:a.text)?a.text:"Invia",o=(null==a||a.class,a.class),u=(null==a?void 0:a.id)?a.id:"";return n.default.createElement("div",{className:"row"},n.default.createElement("div",{className:r},n.default.createElement("div",{className:"fg__button-submit-wrapper "+(t?"with-loader ":" ")},(null==a?void 0:a.dom)?n.default.createElement(n.default.Fragment,null):n.default.createElement("input",{type:"submit",id:u,className:o,value:i}),(null==a?void 0:a.dom)&&"input"==a.dom?n.default.createElement("input",{type:"submit",id:u,className:o,value:i}):n.default.createElement(n.default.Fragment,null),(null==a?void 0:a.dom)&&"button"==a.dom?n.default.createElement("button",{type:"submit",id:u,className:o},i):n.default.createElement(n.default.Fragment,null),0==(null==a?void 0:a.loading)?n.default.createElement(n.default.Fragment,null):n.default.createElement("div",{className:"loader "+(t?"loader-active ":" ")},n.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 g=t=>{const{form:l}=t,{submit:r,buttonSubmit:i}=l,o=a.useForm(),d=e.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 n.default.createElement(a.FormProvider,Object.assign({},o),n.default.createElement("div",{id:"MagicFormGenerator"},n.default.createElement("form",{onSubmit:o.handleSubmit(d),noValidate:!0},n.default.createElement(f,{title:l.title,subTitle:l.subTitle}),n.default.createElement(c,{fields:l.fields}),n.default.createElement(p,Object.assign({},i)))))};exports.MagicFormGenerator=g,exports.default=g;
//# sourceMappingURL=index.cjs.production.min.js.map