@egodesign/form 1.4.2 → 1.4.4

package/README.md

@@ -1,15 +1,32 @@
 # EgoForm
-A Javascript class to fully validate and send forms.
+Lightweight, dependency-free JavaScript library for comprehensive form validation and submission. Customize validation rules with ease and seamlessly integrate into any vanilla project.
 </br></br>
 
 ![NPM Version](https://img.shields.io/npm/v/@egodesign/form)
 ![NPM Downloads](https://img.shields.io/npm/dm/@egodesign/form)
 
+### Main features:
 
+- Comprehensive Validation: Supports various data types, custom validations, and minimum/maximum length checks.
+- Customization: Control class names and error messages to match your design.
+- Flexible Submission: Choose between fetch, get, or post methods for form submission.
+- Event Handling: Respond to validation errors, form submission events, and successful/failed responses.
 
 
 ## Usage:
-Import the **`EgoForm`** class into your file and then create as many instances as needed.
+
+1. Download or install it using the most popular PMs:
+
+```
+npm install @egodesign/form
+````
+or
+```
+yarn add @egodesign/form
+```
+<br>
+
+2. Import the **`EgoForm`** class into your file and create as many instances as needed.
 ```js
 import EgoForm from '@egodesign/form';
 
@@ -127,6 +144,7 @@ const myForm = new EgoForm({
 | *requiredField* | `--required` | Use this class to mark required fields. |
 | *requiredIfFilledField* | `--required-if-filled` | Use this class to mark those fields that should be validated only when filled. For example, an email field that is not required but should be a valid email if filled. |
 | *validateOnBlur* | `--validate-onblur` | Use this class to mark those fields that should be validated when the control is blurred. |
+| *validateOnInput* | `--validate-oninput` | Use this class to mark those fields that should be validated in real time as the control gets new input. |
 | *fieldHasError* | `--has-error` | This class is added to the fields that has errors after validation and removed when the field is focused. |
 | *controlHasError* | - | You can set this class to be added to the controls that has errors. Works similar to *fieldHasError*. |
 | *hiddenErrorMessage* | `--hidden` | This class is removed from the error messages when it's parent field has errors and added back when the field is focused. |

package/dist/js/egodesign.form.cjs.min.js

@@ -1 +1 @@
-"use strict";const e=({element:e,enter:t,time:i,displayType:s,callback:r})=>{e.style.opacity=t?0:1,t&&(e.style.display=s||"block");let a=+new Date;!function s(){e.style.opacity=t?+e.style.opacity+(new Date-a)/(i||200):+e.style.opacity-(new Date-a)/(i||200),a=+new Date,t&&+e.style.opacity<1||!t&&+e.style.opacity>0?window.requestAnimationFrame&&requestAnimationFrame(s)||setTimeout(s,16):(t||(e.style.display="none"),r&&"function"==typeof r&&r())}()},t=({element:e,className:t})=>{if(!e)return!1;for(;e&&!e.classList.contains(t);)e=!!e.parentElement&&e.parentElement;return e},i={default:{empty:"Campo requerido.",invalid:"Campo nó válido.",minLength:"Debe tener al menos [[var]] caracteres.",maxLength:"Debe tener como máximo [[var]] caracteres."},email:{empty:"El email es requerido.",invalid:"El email no es válido."},message:{empty:"El mensaje es requerido."},password:{empty:"Ingrese una contraseña."},password_repeat:{empty:"Debe repetir la contraseña.",unequal:"Las contraseñas no coindicen."},cuil:{empty:"Campo requerido.",min:"El número debe tener exactamente 11 dígitos.",invalid:"El número ingresado no es válido."},url:{empty:"Campo requerido.",invalid:"URL no válida."},file:{empty:"Campo requerido",min_size:"El tamaño mínimo es [[var]]",max_size:"El tamaño máximo es [[var]]"}};class s{constructor({customValidations:e,classes:t,customValidationMessages:s}){this.customValidations=e,this.validationMessages={...i,...s}||i,this.classes=t}validateField(e){const t=e.dataset.type,i=["radio","checkbox"].includes(t),s=e.classList.contains(this.classes.requiredField),r=e.classList.contains(this.classes.requiredIfFilledField),a=e.querySelector(".form__error"),o=e.querySelector(".form__control"),l=i?e.querySelector(".form__control:checked"):null,n=o?o.getAttribute("name"):"",u=Object.keys(this.customValidations),d=e.dataset.minLength?parseInt(e.dataset.minLength):null,c=e.dataset.maxLength?parseInt(e.dataset.maxLength):null;if(o||this.throwError("control not found."),n||this.throwError("control name not found."),s&&!o.value)return a&&(a.innerText=this.validationMessages[n]?this.validationMessages[n].empty:this.validationMessages.default.empty),this.displayFieldError(o,e,a),!1;if(o.value){if(d&&o.value.length<d)return a&&(a.innerText=this.validationMessages.default.minLength.replace("[[var]]",d)),this.displayFieldError(o,e,a),!1;if(c&&o.value.length>c)return a&&(a.innerText=this.validationMessages.default.maxLength.replace("[[var]]",c)),this.displayFieldError(o,e,a),!1}if(i&&!l){if(!r)return this.displayFieldError(o,e,a),a&&(a.innerText=this.validationMessages[n]?this.validationMessages[n].empty:this.validationMessages.default.empty),!1}else{switch(t){case"email":if(o.value&&!this.isValidEmail(o.value))return a&&(a.innerText=this.validationMessages.email.invalid),this.displayFieldError(o,e,a),!1;break;case"password_repeat":{const t=document.getElementById("password");if(t&&o.value!=t.value)return a&&(a.innerText=this.validationMessages.password_repeat.unequal),this.displayFieldError(o,e,a),!1;break}case"cuil":case"cuit":if(o.value&&!this.isValidCuitCuil(o.value))return a&&(a.innerText=this.validationMessages.cuil.invalid),this.displayFieldError(o,e,a),!1;break;case"url":if(o.value&&!this.isValidUrl(o.value))return a&&(a.innerText=this.validationMessages.url.invalid),this.displayFieldError(o,e,a),!1;break;case"money":const t=o.dataset.currency?o.dataset.currency:"$";if(""==o.value||o.value==t)return a&&(a.innerText=this.validationMessages.default.empty),this.displayFieldError(o,e,a),!1;break;case"single-checkbox":if(!o.checked)return this.displayFieldError(o,e,a),a&&(a.innerText=this.validationMessages[n]?this.validationMessages[n].empty:this.validationMessages.default.empty),!1}for(const i of u)if(t===i)for(const i of this.customValidations[t])if(!i.condition(o.value))return a&&(a.innerText=i.message||""),this.displayFieldError(o,e,a),!1}return!0}isValidEmail(e){return/(?!.*\.{2})^([a-z\d!#$%&'*+\-/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([\t]*\r\n)?[\t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([\t]*\r\n)?[\t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i.test(e.toLowerCase())}isValidCuitCuil(e){const t=[5,4,3,2,7,6,5,4,3,2];let i=e.toString().replace(/[^0-9]/g,"").split("");if(11!=i.length)return!1;i=i.map((e=>parseInt(e)));const s=parseInt(i.pop());let r=11-i.reduce(((e,i,s)=>e+i*t[s]),0)%11;return 10==r&&(r=9),11==r&&(r=0),r==s}isValidUrl(e){return!!new RegExp("^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_.~+=-]*)?(\\#[-a-z\\d_]*)?$","i").test(e)}isValidFileSize(e){let t=null;const i=e.querySelector(".form__control"),s=parseFloat(e.dataset.minSize),r=parseFloat(e.dataset.maxSize),a=e.querySelector(".form__error"),o=i.files[0].name,l=i.files[0].size,n=parseFloat(i.files.length?(l/1048576).toFixed(1):0);n>r||!l?(i.value="",e.classList.remove("--has-file"),i.setAttribute("aria-invalid","true"),e.classList.add(this.classes.fieldHasError)):o?(this.hasFile=!0,e.classList.add("--has-file")):(this.hasFile=!1,e.classList.remove("--has-file")),l?n<s?t=this.validationMessages.file.min_size.replace("[[var]]",s+" MB"):n>r&&(t=this.validationMessages.file.max_size.replace("[[var]]",r+" MB")):t=this.validationMessages.file.empty,t&&(a.innerText=t,this.displayFieldError(i,e,a))}displayFieldError(e,t,i){e.setAttribute("aria-invalid","true"),t.classList.add(this.classes.fieldHasError),this.classes.controlHasError&&e.classList.add(this.classes.controlHasError),i&&i.classList.remove(this.classes.hiddenErrorMessage)}clearControlError(e){e.setAttribute("aria-invalid","false"),this.classes.controlHasError&&e.classList.remove(this.classes.controlHasError);const i=t({element:e,className:"form__field"}),s=i.querySelector(".form__error");i.classList.remove(this.classes.fieldHasError),s&&(s.innerText="",s.classList.add(this.classes.hiddenErrorMessage))}realTimeValidations(e){e.querySelectorAll('.form__field[data-type="file"]').forEach((e=>{const t=e.querySelector(".form__control");t?.addEventListener("change",(t=>{t.stopPropagation(),this.isValidFileSize(e)}))}))}throwError(e){throw new Error(`EgoForm Error: ${e}`)}}module.exports=class{constructor({element:e,classes:t,submitType:i,submitDataFormat:r,requestHeaders:a,fieldGroups:o,serializerIgnoreList:l,customValidations:n,customValidationMessages:u,onStepChange:d,onValidationError:c,onSubmitStart:h,onSubmitEnd:m,onSuccess:f,onError:p,onBeforeSubmit:F,resetOnSuccess:g,scrollOnError:v,preventSubmit:y,debug:E}){this.form=e,this.submitType=i||"fetch",this.submitDataFormat=r||"formData",this.requestHeaders=a||{},this.actionUrl=this.form.getAttribute("action"),this.submitMethod=this.form.getAttribute("method")||"POST",this.submitBtn=this.form.querySelector('button[type="submit"]')||null,this.classes={requiredField:"--required",requiredIfFilledField:"--required-if-filled",fieldHasError:"--has-error",controlHasError:!1,hiddenErrorMessage:"--hidden",formSubmittingState:"--submitting",buttonSubmittingState:"--loading",clearFieldError:"--clear-error",validateOnBlur:"--validate-onblur",...t},this.isValid=!0,this.validator=new s({customValidations:n||{},classes:this.classes,customValidationMessages:u||null}),this.onValidationError=c??!1,this.onStepChange=d??!1,this.onSubmitStart=h??!1,this.onSubmitEnd=m??!1,this.onSuccess=f??!1,this.onError=p??!1,this.onBeforeSubmit=F??!1,this.fieldGroups=o??!1,this.hasFile=!1,this.serializerIgnoreList=l||[],this.resetOnSuccess=g??!0,this.scrollOnError=v??!0,this.currentStep=this.form.querySelector(".form__step")?parseInt(this.form.querySelector(".form__step.--active").dataset.step):0,this.currentStepOptional=!1,this.stepChanging=!1,this.preventSubmit=y??!1,this.debug=E??!1,this.declareHandlers(),this.debug&&this.showLog("initialized!")}submit(){this.preventSubmit||this.resumeSubmit()}resumeSubmit(){this.debug&&this.showLog(`submitting using ${this.submitType}!`),this.submittingForm(!0),this.isValid=!0;const e=[];if(this.form.querySelectorAll(".form__field").forEach((t=>{this.validator.validateField(t)||(e.push(t.querySelector(".form__control")?.name),this.isValid=!1)})),this.isValid)this.debug?(this.showLog("the form was submitted!"),this.showLog(this.serializeData(),"data"),setTimeout((()=>{this.submittingForm(!1)}),1e3)):"fetch"==this.submitType?fetch(this.actionUrl,{method:this.submitMethod,headers:"json"===this.submitDataFormat?{"Content-Type":"application/json",...this.requestHeaders}:{...this.requestHeaders},body:"json"===this.submitDataFormat?JSON.stringify(this.serializeData()):this.serializeData(!0)}).then((e=>{200===e.status||201===e.status?(this.resetOnSuccess&&this.reset(),"function"==typeof this.onSuccess&&this.onSuccess(e)):"function"==typeof this.onError&&this.onError(e)})).catch((e=>{"function"==typeof this.onError&&this.onError(e)})).finally((()=>{this.submittingForm(!1)})):this.form.submit();else{if(this.submittingForm(!1),"function"==typeof this.onValidationError&&this.onValidationError(e),this.debug&&this.showLog(`this fields have failed validation: ${e.toString().replace(/,/g,", ")}.`),this.scrollOnError){const e=this.form.querySelector(`.form__field.${this.classes.fieldHasError}`);(e=>{const t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)})(e)||e.scrollIntoView({behavior:"smooth"})}this.debug&&this.showLog("there are invalid fields.")}}submittingForm(e){let t=document.getElementsByTagName("body").item(0);e?(this.form.classList.add(this.classes.formSubmittingState),this.submitBtn.classList.add(this.classes.buttonSubmittingState),t.classList.add("--block"),"function"==typeof this.onSubmitStart&&this.onSubmitStart()):(this.form.classList.remove(this.classes.formSubmittingState),this.submitBtn.classList.remove(this.classes.buttonSubmittingState),t.classList.remove("--block"),"function"==typeof this.onSubmitEnd&&this.onSubmitEnd())}serializeData(e=!1){const t=new FormData(this.form),i={};for(const e of t)if(!this.serializerIgnoreList.includes(e[0])){if(e[1]instanceof File&&!e[1].size&&!e[1].name)continue;i[e[0]]=e[1]}if(this.fieldGroups)for(const e in this.fieldGroups)if(Object.hasOwnProperty.call(this.fieldGroups,e)){let s=[{}];for(const r of this.fieldGroups[e])s[0][r]=t.get(r),delete i[r];i[e]=s}return e?t:i}reset(){this.form.reset(),this.form.querySelectorAll(".form__field").forEach((e=>e.classList.remove("--filled",`${this.classes.fieldHasError}`))),this.form.querySelectorAll(".form__control").forEach((e=>e.setAttribute("aria-invalid","false"))),this.currentStep&&this.changeStep(1)}changeStep(t){if(!this.stepChanging){const i=this.currentStepOptional?this.currentStep+"b":this.currentStep,s=this.form.querySelector('[data-step="'+i+'"]'),r=s.querySelectorAll(`.${this.classes.requiredField}`),a="next"===t?this.currentStep+1:"prev"!==t||this.currentStepOptional?"optional"===t?this.currentStep+"b":this.currentStep:this.currentStep-1,o=this.form.querySelector('[data-step="'+a+'"]');(this.currentStep!==a||this.currentStepOptional)&&(this.stepChanging=!0,this.isValid=!0,setTimeout((()=>{!r||"next"!==t&&"optional"!==t||r.forEach((e=>{this.validator.validateField(e)||(this.isValid=!1)})),s&&o&&this.isValid?e({element:s,enter:!1,time:200,displayType:"flex",callback:()=>{s.classList.remove("--active"),e({element:o,enter:!0,time:200,displayType:"flex",callback:()=>{o.classList.add("--active"),this.stepChanging=!1,this.currentStepOptional="optional"===t,this.currentStep=parseInt(a),"function"==typeof this.onStepChange&&this.onStepChange(i,a)}})}}):this.stepChanging=!1}),50))}}nextStep(){this.changeStep("next")}optionalStep(){this.changeStep("optional")}prevStep(){this.changeStep("prev")}isControlFilled(e){let t=e.parentElement;""!==e.value?t.classList.add("--filled"):t.classList.remove("--filled")}filterNumber(e,t=[]){const i=t.join(""),s=new RegExp("[^"+i+"0-9]","g");return e.toString().replace(s,"")}filterFormattedQuantity(e,t=".",i=",",s){const r=i?e.toString().split(i):[e],a=r[0].replace(/\B(?=(\d{3})+(?!\d))/g,t);let o="";return o=s>0&&r[1]&&r[1].length?a+i+r[1].slice(0,s):a,o}filterMoneyAmount(e,t="$",i=".",s=",",r){if(!e||e==t)return"";let a=this.filterNumber(e,[s||""]);return a=this.filterFormattedQuantity(a,i,s,r),`${t} ${a}`}filterPhoneNumber(e){return e.replace(/[^\d+\-() ]*/g,"")}togglePasswordVisibility(e){this.debug&&this.showLog("Password visibility toggled!");const t=e.parentElement.querySelector(".form__control");if(t){const i="password"===t.getAttribute("type")?"text":"password";t.setAttribute("type",i),e.classList.toggle("--hide")}}declareHandlers(){const e=this;if(!this.submitBtn)throw new Error(`There's no submit button in this form "${this.form.id}".`);this.submitBtn.addEventListener("click",(function(t){t.preventDefault(),"function"==typeof e.onBeforeSubmit&&e.onBeforeSubmit(),e.submit()})),this.validator.realTimeValidations(this.form),e.form.querySelectorAll(`.form__field.${e.classes.validateOnBlur}`).forEach((e=>{console.log("ONBLUR",e),e.querySelector(".form__control").addEventListener("blur",(()=>{this.validator.validateField(e)||(this.isValid=!1)}))})),this.form.querySelectorAll(".form__next-step").forEach((t=>{t.addEventListener("click",e.nextStep.bind(e))})),this.form.querySelectorAll(".form__optional-step").forEach((t=>{t.addEventListener("click",e.optionalStep.bind(e))})),this.form.querySelectorAll(".form__prev-step").forEach((t=>{t.addEventListener("click",e.prevStep.bind(e))})),this.form.querySelectorAll(".form__control").forEach((e=>{this.isControlFilled(e),e.addEventListener("keyup",(()=>{this.isControlFilled(e)})),e.addEventListener("change",(()=>{this.isControlFilled(e)}))})),this.form.querySelectorAll(".form__control").forEach((e=>{e.addEventListener("focus",(()=>{this.validator.clearControlError(e)}))})),this.form.querySelectorAll("."+this.classes.clearFieldError).forEach((i=>{i.addEventListener("click",(()=>{const s=t({element:i,className:"form__field"});e.validator.clearControlError(s.querySelector(".form__control"))}))})),this.form.querySelectorAll(".form__field.--number input").forEach((e=>{const i=this,s=t({element:e,className:"form__field"}),r=s&&s.dataset.thousandsSeparator?s.dataset.thousandsSeparator:null,a=s&&s.dataset.decimalSeparator?s.dataset.decimalSeparator:"",o=s&&s.dataset.decimals?s.dataset.decimals:"";function l(){e.value=i.filterNumber(e.value,[a])}e.addEventListener("focus",l),e.addEventListener("input",l),e.addEventListener("paste",l),e.addEventListener("blur",(()=>{e.value=r?i.filterFormattedQuantity(e.value,r,a,parseInt(o)):i.filterNumber(e.value)}))})),this.form.querySelectorAll(".form__field.--money-amount input").forEach((e=>{const i=this,s=t({element:e,className:"form__field"}),r=s&&s.dataset.currency?s.dataset.currency:"$",a=s&&s.dataset.thousandsSeparator?s.dataset.thousandsSeparator:".",o=s&&s.dataset.decimalSeparator?s.dataset.decimalSeparator:"",l=s&&s.dataset.decimals?s.dataset.decimals:"";function n(){e.value=i.filterNumber(e.value,[o])}e.addEventListener("focus",n),e.addEventListener("input",n),e.addEventListener("paste",n),e.addEventListener("blur",(()=>{e.value=this.filterMoneyAmount(e.value,r,a,o,parseInt(l))}))})),this.form.querySelectorAll(".form__field.--phone input").forEach((e=>{e.addEventListener("input",(()=>{e.value=this.filterPhoneNumber(e.value)})),e.addEventListener("paste",(()=>{e.value=this.filterPhoneNumber(e.value)}))})),this.form.querySelectorAll(".form__toggle-password-visibility").forEach((e=>{e.addEventListener("click",this.togglePasswordVisibility(e))}))}showLog(e,t="log"){"log"==t?console.log("::EgoForm:: "+e):"data"==t&&(console.log("::EgoForm:: DATA"),console.table(e))}};
+"use strict";const t=({element:t,enter:e,time:s,displayType:i,callback:r})=>{t.style.opacity=e?0:1,e&&(t.style.display=i||"block");let a=+new Date;!function i(){t.style.opacity=e?+t.style.opacity+(new Date-a)/(s||200):+t.style.opacity-(new Date-a)/(s||200),a=+new Date,e&&+t.style.opacity<1||!e&&+t.style.opacity>0?window.requestAnimationFrame&&requestAnimationFrame(i)||setTimeout(i,16):(e||(t.style.display="none"),r&&"function"==typeof r&&r())}()},e=({element:t,className:e})=>{if(!t)return!1;for(;t&&!t.classList.contains(e);)t=!!t.parentElement&&t.parentElement;return t};function s(t,e="log"){"log"==e?console.log("::EgoForm:: "+t):"data"==e&&(console.log("::EgoForm:: DATA"),console.table(t))}const i={default:{empty:"Campo requerido.",invalid:"Campo nó válido.",minLength:"Debe tener al menos [[var]] caracteres.",maxLength:"Debe tener como máximo [[var]] caracteres."},email:{empty:"El email es requerido.",invalid:"El email no es válido."},message:{empty:"El mensaje es requerido."},password:{empty:"Ingrese una contraseña."},password_repeat:{empty:"Debe repetir la contraseña.",unequal:"Las contraseñas no coindicen."},cuil:{empty:"Campo requerido.",min:"El número debe tener exactamente 11 dígitos.",invalid:"El número ingresado no es válido."},url:{empty:"Campo requerido.",invalid:"URL no válida."},file:{empty:"Campo requerido",min_size:"El tamaño mínimo es [[var]]",max_size:"El tamaño máximo es [[var]]"}};class r{constructor({customValidations:t,classes:e,customValidationMessages:s,debug:r}){this.customValidations=t,this.validationMessages={...i,...s}||i,this.classes=e,this.debug=r}validateField(t){const e=t.dataset.type,i=["radio","checkbox"].includes(e),r=t.classList.contains(this.classes.requiredField),a=t.classList.contains(this.classes.requiredIfFilledField),o=t.querySelector(".form__error"),l=t.querySelector(".form__control"),n=i?t.querySelector(".form__control:checked"):null,u=l?l.getAttribute("name"):"",d=Object.keys(this.customValidations),c=t.dataset.minLength?parseInt(t.dataset.minLength):null,h=t.dataset.maxLength?parseInt(t.dataset.maxLength):null;if(l||this.throwError("control not found."),u||this.throwError("control name not found."),this.debug&&s(`validating field "${u}"`),r&&!l.value)return o&&(o.textContent=this.validationMessages[u]?this.validationMessages[u].empty:this.validationMessages.default.empty),this.displayFieldError(l,t,o),!1;if(l.value){if(c&&l.value.length<c)return o&&(o.textContent=this.validationMessages.default.minLength.replace("[[var]]",c)),this.displayFieldError(l,t,o),!1;if(h&&l.value.length>h)return o&&(o.textContent=this.validationMessages.default.maxLength.replace("[[var]]",h)),this.displayFieldError(l,t,o),!1}if(i&&!n){if(!a)return this.displayFieldError(l,t,o),o&&(o.textContent=this.validationMessages[u]?this.validationMessages[u].empty:this.validationMessages.default.empty),!1}else{switch(e){case"email":if(l.value&&!this.isValidEmail(l.value))return o&&(o.textContent=this.validationMessages.email.invalid),this.displayFieldError(l,t,o),!1;break;case"password_repeat":{const e=document.getElementById("password");if(e&&l.value!=e.value)return o&&(o.textContent=this.validationMessages.password_repeat.unequal),this.displayFieldError(l,t,o),!1;break}case"cuil":case"cuit":if(l.value&&!this.isValidCuitCuil(l.value))return o&&(o.textContent=this.validationMessages.cuil.invalid),this.displayFieldError(l,t,o),!1;break;case"url":if(l.value&&!this.isValidUrl(l.value))return o&&(o.textContent=this.validationMessages.url.invalid),this.displayFieldError(l,t,o),!1;break;case"money":const e=l.dataset.currency?l.dataset.currency:"$";if(""==l.value||l.value==e)return o&&(o.textContent=this.validationMessages.default.empty),this.displayFieldError(l,t,o),!1;break;case"single-checkbox":if(!l.checked)return this.displayFieldError(l,t,o),o&&(o.textContent=this.validationMessages[u]?this.validationMessages[u].empty:this.validationMessages.default.empty),!1}for(const s of d)if(e===s)for(const s of this.customValidations[e])if(!s.condition(l.value))return o&&(o.textContent=s.message||""),this.displayFieldError(l,t,o),!1}return!0}isValidEmail(t){return/(?!.*\.{2})^([a-z\d!#$%&'*+\-/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([\t]*\r\n)?[\t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([\t]*\r\n)?[\t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i.test(t.toLowerCase())}isValidCuitCuil(t){const e=[5,4,3,2,7,6,5,4,3,2];let s=t.toString().replace(/[^0-9]/g,"").split("");if(11!=s.length)return!1;s=s.map((t=>parseInt(t)));const i=parseInt(s.pop());let r=11-s.reduce(((t,s,i)=>t+s*e[i]),0)%11;return 10==r&&(r=9),11==r&&(r=0),r==i}isValidUrl(t){return!!new RegExp("^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_.~+=-]*)?(\\#[-a-z\\d_]*)?$","i").test(t)}isValidFileSize(t){let e=null;const s=t.querySelector(".form__control"),i=parseFloat(t.dataset.minSize),r=parseFloat(t.dataset.maxSize),a=t.querySelector(".form__error"),o=s.files[0].name,l=s.files[0].size,n=parseFloat(s.files.length?(l/1048576).toFixed(1):0);n>r||!l?(s.value="",t.classList.remove("--has-file"),s.setAttribute("aria-invalid","true"),t.classList.add(this.classes.fieldHasError)):o?(this.hasFile=!0,t.classList.add("--has-file")):(this.hasFile=!1,t.classList.remove("--has-file")),l?n<i?e=this.validationMessages.file.min_size.replace("[[var]]",i+" MB"):n>r&&(e=this.validationMessages.file.max_size.replace("[[var]]",r+" MB")):e=this.validationMessages.file.empty,e&&(a.textContent=e,this.displayFieldError(s,t,a))}displayFieldError(t,e,s){t.setAttribute("aria-invalid","true"),e.classList.add(this.classes.fieldHasError),this.classes.controlHasError&&t.classList.add(this.classes.controlHasError),s&&s.classList.remove(this.classes.hiddenErrorMessage)}clearControlError(t){t.setAttribute("aria-invalid","false"),this.classes.controlHasError&&t.classList.remove(this.classes.controlHasError);const s=e({element:t,className:"form__field"}),i=s.querySelector(".form__error");s.classList.remove(this.classes.fieldHasError),i&&(i.textContent="",i.classList.add(this.classes.hiddenErrorMessage))}realTimeValidations(t){t.querySelectorAll('.form__field[data-type="file"]').forEach((t=>{const e=t.querySelector(".form__control");e?.addEventListener("change",(e=>{e.stopPropagation(),this.isValidFileSize(t)}))}))}throwError(t){throw new Error(`EgoForm Error: ${t}`)}}module.exports=class{constructor({element:t,classes:e,submitType:i,submitDataFormat:a,requestHeaders:o,fieldGroups:l,serializerIgnoreList:n,customValidations:u,customValidationMessages:d,onStepChange:c,onValidationError:h,onSubmitStart:m,onSubmitEnd:f,onSuccess:p,onError:F,onBeforeSubmit:v,resetOnSuccess:g,resetLoaderOnSuccess:y,scrollOnError:E,preventSubmit:S,debug:b}){this.form=t,this.submitType=i||"fetch",this.submitDataFormat=a||"formData",this.requestHeaders=o||{},this.actionUrl=this.form.getAttribute("action"),this.submitMethod=this.form.getAttribute("method")||"POST",this.submitBtn=this.form.querySelector('button[type="submit"]')||null,this.classes={requiredField:"--required",requiredIfFilledField:"--required-if-filled",fieldHasError:"--has-error",controlHasError:!1,hiddenErrorMessage:"--hidden",formSubmittingState:"--submitting",buttonSubmittingState:"--loading",clearFieldError:"--clear-error",validateOnBlur:"--validate-onblur",validateOnInput:"--validate-oninput",...e},this.isValid=!0,this.validator=new r({customValidations:u||{},classes:this.classes,customValidationMessages:d||null,debug:b}),this.onValidationError=h??!1,this.onStepChange=c??!1,this.onSubmitStart=m??!1,this.onSubmitEnd=f??!1,this.onSuccess=p??!1,this.onError=F??!1,this.onBeforeSubmit=v??!1,this.fieldGroups=l??!1,this.hasFile=!1,this.serializerIgnoreList=n||[],this.resetOnSuccess=g??!0,this.resetLoaderOnSuccess=y??!0,this.scrollOnError=E??!0,this.currentStep=this.form.querySelector(".form__step")?parseInt(this.form.querySelector(".form__step.--active").dataset.step):0,this.currentStepOptional=!1,this.stepChanging=!1,this.preventSubmit=S??!1,this.debug=b??!1,this.declareHandlers(),this.debug&&s("initialized!")}submit(){this.preventSubmit||this.resumeSubmit()}resumeSubmit(){this.debug&&s(`submitting using ${this.submitType}!`),this.submittingForm(!0),this.isValid=!0;const t=[];if(this.form.querySelectorAll(".form__field").forEach((e=>{this.validator.validateField(e)||(t.push(e.querySelector(".form__control")?.name),this.isValid=!1)})),this.isValid)this.debug?(s("the form was submitted!"),s(this.serializeData(),"data"),setTimeout((()=>{this.submittingForm(!1)}),1e3)):"fetch"==this.submitType?fetch(this.actionUrl,{method:this.submitMethod,headers:"json"===this.submitDataFormat?{"Content-Type":"application/json",...this.requestHeaders}:{...this.requestHeaders},body:"json"===this.submitDataFormat?JSON.stringify(this.serializeData()):this.serializeData(!0)}).then((t=>{200===t.status||201===t.status?(this.resetOnSuccess&&this.reset(),"function"==typeof this.onSuccess&&this.onSuccess(t)):"function"==typeof this.onError&&this.onError(t)})).catch((t=>{"function"==typeof this.onError&&this.onError(t)})).finally((()=>{this.submittingForm(!1)})):this.form.submit();else if(this.submittingForm(!1),"function"==typeof this.onValidationError&&this.onValidationError(t),this.debug&&s(`this fields have failed validation: ${t.toString().replace(/,/g,", ")}.`),this.scrollOnError){const t=this.form.querySelector(`.form__field.${this.classes.fieldHasError}`);(t=>{const e=t.getBoundingClientRect();return e.top>=0&&e.left>=0&&e.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&e.right<=(window.innerWidth||document.documentElement.clientWidth)})(t)||t.scrollIntoView({behavior:"smooth"})}}submittingForm(t){let e=document.getElementsByTagName("body").item(0);t?(this.form.classList.add(this.classes.formSubmittingState),this.submitBtn.classList.add(this.classes.buttonSubmittingState),e.classList.add("--block"),"function"==typeof this.onSubmitStart&&this.onSubmitStart()):(this.resetLoaderOnSuccess&&(this.form.classList.remove(this.classes.formSubmittingState),this.submitBtn.classList.remove(this.classes.buttonSubmittingState),e.classList.remove("--block")),"function"==typeof this.onSubmitEnd&&this.onSubmitEnd())}serializeData(t=!1){const e=new FormData(this.form),s={};for(const t of e)if(!this.serializerIgnoreList.includes(t[0])){if(t[1]instanceof File&&!t[1].size&&!t[1].name)continue;s[t[0]]=t[1]}if(this.fieldGroups)for(const t in this.fieldGroups)if(Object.hasOwnProperty.call(this.fieldGroups,t)){let i=[{}];for(const r of this.fieldGroups[t])i[0][r]=e.get(r),delete s[r];s[t]=i}return t?e:s}reset(){this.form.reset(),this.form.querySelectorAll(".form__field").forEach((t=>t.classList.remove("--filled",`${this.classes.fieldHasError}`))),this.form.querySelectorAll(".form__control").forEach((t=>t.setAttribute("aria-invalid","false"))),this.currentStep&&this.changeStep(1)}changeStep(e){if(!this.stepChanging){const s=this.currentStepOptional?this.currentStep+"b":this.currentStep,i=this.form.querySelector('[data-step="'+s+'"]'),r=i.querySelectorAll(`.${this.classes.requiredField}`),a="next"===e?this.currentStep+1:"prev"!==e||this.currentStepOptional?"optional"===e?this.currentStep+"b":this.currentStep:this.currentStep-1,o=this.form.querySelector('[data-step="'+a+'"]');(this.currentStep!==a||this.currentStepOptional)&&(this.stepChanging=!0,this.isValid=!0,setTimeout((()=>{!r||"next"!==e&&"optional"!==e||r.forEach((t=>{this.validator.validateField(t)||(this.isValid=!1)})),i&&o&&this.isValid?t({element:i,enter:!1,time:200,displayType:"flex",callback:()=>{i.classList.remove("--active"),t({element:o,enter:!0,time:200,displayType:"flex",callback:()=>{o.classList.add("--active"),this.stepChanging=!1,this.currentStepOptional="optional"===e,this.currentStep=parseInt(a),"function"==typeof this.onStepChange&&this.onStepChange(s,a)}})}}):this.stepChanging=!1}),50))}}nextStep(){this.changeStep("next")}optionalStep(){this.changeStep("optional")}prevStep(){this.changeStep("prev")}isControlFilled(t){let e=t.parentElement;""!==t.value?e.classList.add("--filled"):e.classList.remove("--filled")}filterNumber(t,e=[]){const s=e.join(""),i=new RegExp("[^"+s+"0-9]","g");return t.toString().replace(i,"")}filterFormattedQuantity(t,e=".",s=",",i){const r=s?t.toString().split(s):[t],a=r[0].replace(/\B(?=(\d{3})+(?!\d))/g,e);let o="";return o=i>0&&r[1]&&r[1].length?a+s+r[1].slice(0,i):a,o}filterMoneyAmount(t,e="$",s=".",i=",",r){if(!t||t==e)return"";let a=this.filterNumber(t,[i||""]);return a=this.filterFormattedQuantity(a,s,i,r),`${e} ${a}`}filterPhoneNumber(t){return t.replace(/[^\d+\-() ]*/g,"")}togglePasswordVisibility(t){this.debug&&s("Password visibility toggled!");const e=t.parentElement.querySelector(".form__control");if(e){const s="password"===e.getAttribute("type")?"text":"password";e.setAttribute("type",s),t.classList.toggle("--hide")}}declareHandlers(){const t=this;if(!this.submitBtn)throw new Error(`There's no submit button in this form "${this.form.id}".`);this.submitBtn.addEventListener("click",(function(e){e.preventDefault(),"function"==typeof t.onBeforeSubmit&&t.onBeforeSubmit(),t.submit()})),this.validator.realTimeValidations(this.form),this.form.querySelectorAll(`.form__field.${this.classes.validateOnBlur}`).forEach((t=>{t.querySelector(".form__control").addEventListener("blur",(()=>{this.validator.validateField(t)||(this.isValid=!1)}))})),this.form.querySelectorAll(`.form__field.${this.classes.validateOnInput}`).forEach((t=>{const e=t.querySelector(".form__control");e.addEventListener("input",(()=>{this.validator.validateField(t)&&this.validator.clearControlError(e)}))})),this.form.querySelectorAll(".form__next-step").forEach((e=>{e.addEventListener("click",t.nextStep.bind(t))})),this.form.querySelectorAll(".form__optional-step").forEach((e=>{e.addEventListener("click",t.optionalStep.bind(t))})),this.form.querySelectorAll(".form__prev-step").forEach((e=>{e.addEventListener("click",t.prevStep.bind(t))})),this.form.querySelectorAll(".form__control").forEach((t=>{this.isControlFilled(t),t.addEventListener("keyup",(()=>{this.isControlFilled(t)})),t.addEventListener("change",(()=>{this.isControlFilled(t)}))})),this.form.querySelectorAll(".form__control").forEach((t=>{t.addEventListener("focus",(()=>{this.validator.clearControlError(t)}))})),this.form.querySelectorAll("."+this.classes.clearFieldError).forEach((s=>{s.addEventListener("click",(()=>{const i=e({element:s,className:"form__field"});t.validator.clearControlError(i.querySelector(".form__control"))}))})),this.form.querySelectorAll(".form__field.--number input").forEach((t=>{const s=this,i=e({element:t,className:"form__field"}),r=i&&i.dataset.thousandsSeparator?i.dataset.thousandsSeparator:null,a=i&&i.dataset.decimalSeparator?i.dataset.decimalSeparator:"",o=i&&i.dataset.decimals?i.dataset.decimals:"";function l(){t.value=s.filterNumber(t.value,[a])}t.addEventListener("focus",l),t.addEventListener("input",l),t.addEventListener("paste",l),t.addEventListener("blur",(()=>{t.value=r?s.filterFormattedQuantity(t.value,r,a,parseInt(o)):s.filterNumber(t.value)}))})),this.form.querySelectorAll(".form__field.--money-amount input").forEach((t=>{const s=this,i=e({element:t,className:"form__field"}),r=i&&i.dataset.currency?i.dataset.currency:"$",a=i&&i.dataset.thousandsSeparator?i.dataset.thousandsSeparator:".",o=i&&i.dataset.decimalSeparator?i.dataset.decimalSeparator:"",l=i&&i.dataset.decimals?i.dataset.decimals:"";function n(){t.value=s.filterNumber(t.value,[o])}t.addEventListener("focus",n),t.addEventListener("input",n),t.addEventListener("paste",n),t.addEventListener("blur",(()=>{t.value=this.filterMoneyAmount(t.value,r,a,o,parseInt(l))}))})),this.form.querySelectorAll(".form__field.--phone input").forEach((t=>{t.addEventListener("input",(()=>{t.value=this.filterPhoneNumber(t.value)})),t.addEventListener("paste",(()=>{t.value=this.filterPhoneNumber(t.value)}))})),this.form.querySelectorAll(".form__toggle-password-visibility").forEach((t=>{t.addEventListener("click",this.togglePasswordVisibility(t))}))}};

package/dist/js/egodesign.form.esm.min.js

@@ -1 +1 @@
-const e=({element:e,enter:t,time:i,displayType:s,callback:r})=>{e.style.opacity=t?0:1,t&&(e.style.display=s||"block");let a=+new Date;!function s(){e.style.opacity=t?+e.style.opacity+(new Date-a)/(i||200):+e.style.opacity-(new Date-a)/(i||200),a=+new Date,t&&+e.style.opacity<1||!t&&+e.style.opacity>0?window.requestAnimationFrame&&requestAnimationFrame(s)||setTimeout(s,16):(t||(e.style.display="none"),r&&"function"==typeof r&&r())}()},t=({element:e,className:t})=>{if(!e)return!1;for(;e&&!e.classList.contains(t);)e=!!e.parentElement&&e.parentElement;return e},i={default:{empty:"Campo requerido.",invalid:"Campo nó válido.",minLength:"Debe tener al menos [[var]] caracteres.",maxLength:"Debe tener como máximo [[var]] caracteres."},email:{empty:"El email es requerido.",invalid:"El email no es válido."},message:{empty:"El mensaje es requerido."},password:{empty:"Ingrese una contraseña."},password_repeat:{empty:"Debe repetir la contraseña.",unequal:"Las contraseñas no coindicen."},cuil:{empty:"Campo requerido.",min:"El número debe tener exactamente 11 dígitos.",invalid:"El número ingresado no es válido."},url:{empty:"Campo requerido.",invalid:"URL no válida."},file:{empty:"Campo requerido",min_size:"El tamaño mínimo es [[var]]",max_size:"El tamaño máximo es [[var]]"}};class s{constructor({customValidations:e,classes:t,customValidationMessages:s}){this.customValidations=e,this.validationMessages={...i,...s}||i,this.classes=t}validateField(e){const t=e.dataset.type,i=["radio","checkbox"].includes(t),s=e.classList.contains(this.classes.requiredField),r=e.classList.contains(this.classes.requiredIfFilledField),a=e.querySelector(".form__error"),o=e.querySelector(".form__control"),l=i?e.querySelector(".form__control:checked"):null,n=o?o.getAttribute("name"):"",u=Object.keys(this.customValidations),d=e.dataset.minLength?parseInt(e.dataset.minLength):null,c=e.dataset.maxLength?parseInt(e.dataset.maxLength):null;if(o||this.throwError("control not found."),n||this.throwError("control name not found."),s&&!o.value)return a&&(a.innerText=this.validationMessages[n]?this.validationMessages[n].empty:this.validationMessages.default.empty),this.displayFieldError(o,e,a),!1;if(o.value){if(d&&o.value.length<d)return a&&(a.innerText=this.validationMessages.default.minLength.replace("[[var]]",d)),this.displayFieldError(o,e,a),!1;if(c&&o.value.length>c)return a&&(a.innerText=this.validationMessages.default.maxLength.replace("[[var]]",c)),this.displayFieldError(o,e,a),!1}if(i&&!l){if(!r)return this.displayFieldError(o,e,a),a&&(a.innerText=this.validationMessages[n]?this.validationMessages[n].empty:this.validationMessages.default.empty),!1}else{switch(t){case"email":if(o.value&&!this.isValidEmail(o.value))return a&&(a.innerText=this.validationMessages.email.invalid),this.displayFieldError(o,e,a),!1;break;case"password_repeat":{const t=document.getElementById("password");if(t&&o.value!=t.value)return a&&(a.innerText=this.validationMessages.password_repeat.unequal),this.displayFieldError(o,e,a),!1;break}case"cuil":case"cuit":if(o.value&&!this.isValidCuitCuil(o.value))return a&&(a.innerText=this.validationMessages.cuil.invalid),this.displayFieldError(o,e,a),!1;break;case"url":if(o.value&&!this.isValidUrl(o.value))return a&&(a.innerText=this.validationMessages.url.invalid),this.displayFieldError(o,e,a),!1;break;case"money":const t=o.dataset.currency?o.dataset.currency:"$";if(""==o.value||o.value==t)return a&&(a.innerText=this.validationMessages.default.empty),this.displayFieldError(o,e,a),!1;break;case"single-checkbox":if(!o.checked)return this.displayFieldError(o,e,a),a&&(a.innerText=this.validationMessages[n]?this.validationMessages[n].empty:this.validationMessages.default.empty),!1}for(const i of u)if(t===i)for(const i of this.customValidations[t])if(!i.condition(o.value))return a&&(a.innerText=i.message||""),this.displayFieldError(o,e,a),!1}return!0}isValidEmail(e){return/(?!.*\.{2})^([a-z\d!#$%&'*+\-/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([\t]*\r\n)?[\t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([\t]*\r\n)?[\t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i.test(e.toLowerCase())}isValidCuitCuil(e){const t=[5,4,3,2,7,6,5,4,3,2];let i=e.toString().replace(/[^0-9]/g,"").split("");if(11!=i.length)return!1;i=i.map((e=>parseInt(e)));const s=parseInt(i.pop());let r=11-i.reduce(((e,i,s)=>e+i*t[s]),0)%11;return 10==r&&(r=9),11==r&&(r=0),r==s}isValidUrl(e){return!!new RegExp("^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_.~+=-]*)?(\\#[-a-z\\d_]*)?$","i").test(e)}isValidFileSize(e){let t=null;const i=e.querySelector(".form__control"),s=parseFloat(e.dataset.minSize),r=parseFloat(e.dataset.maxSize),a=e.querySelector(".form__error"),o=i.files[0].name,l=i.files[0].size,n=parseFloat(i.files.length?(l/1048576).toFixed(1):0);n>r||!l?(i.value="",e.classList.remove("--has-file"),i.setAttribute("aria-invalid","true"),e.classList.add(this.classes.fieldHasError)):o?(this.hasFile=!0,e.classList.add("--has-file")):(this.hasFile=!1,e.classList.remove("--has-file")),l?n<s?t=this.validationMessages.file.min_size.replace("[[var]]",s+" MB"):n>r&&(t=this.validationMessages.file.max_size.replace("[[var]]",r+" MB")):t=this.validationMessages.file.empty,t&&(a.innerText=t,this.displayFieldError(i,e,a))}displayFieldError(e,t,i){e.setAttribute("aria-invalid","true"),t.classList.add(this.classes.fieldHasError),this.classes.controlHasError&&e.classList.add(this.classes.controlHasError),i&&i.classList.remove(this.classes.hiddenErrorMessage)}clearControlError(e){e.setAttribute("aria-invalid","false"),this.classes.controlHasError&&e.classList.remove(this.classes.controlHasError);const i=t({element:e,className:"form__field"}),s=i.querySelector(".form__error");i.classList.remove(this.classes.fieldHasError),s&&(s.innerText="",s.classList.add(this.classes.hiddenErrorMessage))}realTimeValidations(e){e.querySelectorAll('.form__field[data-type="file"]').forEach((e=>{const t=e.querySelector(".form__control");t?.addEventListener("change",(t=>{t.stopPropagation(),this.isValidFileSize(e)}))}))}throwError(e){throw new Error(`EgoForm Error: ${e}`)}}class r{constructor({element:e,classes:t,submitType:i,submitDataFormat:r,requestHeaders:a,fieldGroups:o,serializerIgnoreList:l,customValidations:n,customValidationMessages:u,onStepChange:d,onValidationError:c,onSubmitStart:h,onSubmitEnd:m,onSuccess:f,onError:p,onBeforeSubmit:F,resetOnSuccess:g,scrollOnError:v,preventSubmit:y,debug:E}){this.form=e,this.submitType=i||"fetch",this.submitDataFormat=r||"formData",this.requestHeaders=a||{},this.actionUrl=this.form.getAttribute("action"),this.submitMethod=this.form.getAttribute("method")||"POST",this.submitBtn=this.form.querySelector('button[type="submit"]')||null,this.classes={requiredField:"--required",requiredIfFilledField:"--required-if-filled",fieldHasError:"--has-error",controlHasError:!1,hiddenErrorMessage:"--hidden",formSubmittingState:"--submitting",buttonSubmittingState:"--loading",clearFieldError:"--clear-error",validateOnBlur:"--validate-onblur",...t},this.isValid=!0,this.validator=new s({customValidations:n||{},classes:this.classes,customValidationMessages:u||null}),this.onValidationError=c??!1,this.onStepChange=d??!1,this.onSubmitStart=h??!1,this.onSubmitEnd=m??!1,this.onSuccess=f??!1,this.onError=p??!1,this.onBeforeSubmit=F??!1,this.fieldGroups=o??!1,this.hasFile=!1,this.serializerIgnoreList=l||[],this.resetOnSuccess=g??!0,this.scrollOnError=v??!0,this.currentStep=this.form.querySelector(".form__step")?parseInt(this.form.querySelector(".form__step.--active").dataset.step):0,this.currentStepOptional=!1,this.stepChanging=!1,this.preventSubmit=y??!1,this.debug=E??!1,this.declareHandlers(),this.debug&&this.showLog("initialized!")}submit(){this.preventSubmit||this.resumeSubmit()}resumeSubmit(){this.debug&&this.showLog(`submitting using ${this.submitType}!`),this.submittingForm(!0),this.isValid=!0;const e=[];if(this.form.querySelectorAll(".form__field").forEach((t=>{this.validator.validateField(t)||(e.push(t.querySelector(".form__control")?.name),this.isValid=!1)})),this.isValid)this.debug?(this.showLog("the form was submitted!"),this.showLog(this.serializeData(),"data"),setTimeout((()=>{this.submittingForm(!1)}),1e3)):"fetch"==this.submitType?fetch(this.actionUrl,{method:this.submitMethod,headers:"json"===this.submitDataFormat?{"Content-Type":"application/json",...this.requestHeaders}:{...this.requestHeaders},body:"json"===this.submitDataFormat?JSON.stringify(this.serializeData()):this.serializeData(!0)}).then((e=>{200===e.status||201===e.status?(this.resetOnSuccess&&this.reset(),"function"==typeof this.onSuccess&&this.onSuccess(e)):"function"==typeof this.onError&&this.onError(e)})).catch((e=>{"function"==typeof this.onError&&this.onError(e)})).finally((()=>{this.submittingForm(!1)})):this.form.submit();else{if(this.submittingForm(!1),"function"==typeof this.onValidationError&&this.onValidationError(e),this.debug&&this.showLog(`this fields have failed validation: ${e.toString().replace(/,/g,", ")}.`),this.scrollOnError){const e=this.form.querySelector(`.form__field.${this.classes.fieldHasError}`);(e=>{const t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)})(e)||e.scrollIntoView({behavior:"smooth"})}this.debug&&this.showLog("there are invalid fields.")}}submittingForm(e){let t=document.getElementsByTagName("body").item(0);e?(this.form.classList.add(this.classes.formSubmittingState),this.submitBtn.classList.add(this.classes.buttonSubmittingState),t.classList.add("--block"),"function"==typeof this.onSubmitStart&&this.onSubmitStart()):(this.form.classList.remove(this.classes.formSubmittingState),this.submitBtn.classList.remove(this.classes.buttonSubmittingState),t.classList.remove("--block"),"function"==typeof this.onSubmitEnd&&this.onSubmitEnd())}serializeData(e=!1){const t=new FormData(this.form),i={};for(const e of t)if(!this.serializerIgnoreList.includes(e[0])){if(e[1]instanceof File&&!e[1].size&&!e[1].name)continue;i[e[0]]=e[1]}if(this.fieldGroups)for(const e in this.fieldGroups)if(Object.hasOwnProperty.call(this.fieldGroups,e)){let s=[{}];for(const r of this.fieldGroups[e])s[0][r]=t.get(r),delete i[r];i[e]=s}return e?t:i}reset(){this.form.reset(),this.form.querySelectorAll(".form__field").forEach((e=>e.classList.remove("--filled",`${this.classes.fieldHasError}`))),this.form.querySelectorAll(".form__control").forEach((e=>e.setAttribute("aria-invalid","false"))),this.currentStep&&this.changeStep(1)}changeStep(t){if(!this.stepChanging){const i=this.currentStepOptional?this.currentStep+"b":this.currentStep,s=this.form.querySelector('[data-step="'+i+'"]'),r=s.querySelectorAll(`.${this.classes.requiredField}`),a="next"===t?this.currentStep+1:"prev"!==t||this.currentStepOptional?"optional"===t?this.currentStep+"b":this.currentStep:this.currentStep-1,o=this.form.querySelector('[data-step="'+a+'"]');(this.currentStep!==a||this.currentStepOptional)&&(this.stepChanging=!0,this.isValid=!0,setTimeout((()=>{!r||"next"!==t&&"optional"!==t||r.forEach((e=>{this.validator.validateField(e)||(this.isValid=!1)})),s&&o&&this.isValid?e({element:s,enter:!1,time:200,displayType:"flex",callback:()=>{s.classList.remove("--active"),e({element:o,enter:!0,time:200,displayType:"flex",callback:()=>{o.classList.add("--active"),this.stepChanging=!1,this.currentStepOptional="optional"===t,this.currentStep=parseInt(a),"function"==typeof this.onStepChange&&this.onStepChange(i,a)}})}}):this.stepChanging=!1}),50))}}nextStep(){this.changeStep("next")}optionalStep(){this.changeStep("optional")}prevStep(){this.changeStep("prev")}isControlFilled(e){let t=e.parentElement;""!==e.value?t.classList.add("--filled"):t.classList.remove("--filled")}filterNumber(e,t=[]){const i=t.join(""),s=new RegExp("[^"+i+"0-9]","g");return e.toString().replace(s,"")}filterFormattedQuantity(e,t=".",i=",",s){const r=i?e.toString().split(i):[e],a=r[0].replace(/\B(?=(\d{3})+(?!\d))/g,t);let o="";return o=s>0&&r[1]&&r[1].length?a+i+r[1].slice(0,s):a,o}filterMoneyAmount(e,t="$",i=".",s=",",r){if(!e||e==t)return"";let a=this.filterNumber(e,[s||""]);return a=this.filterFormattedQuantity(a,i,s,r),`${t} ${a}`}filterPhoneNumber(e){return e.replace(/[^\d+\-() ]*/g,"")}togglePasswordVisibility(e){this.debug&&this.showLog("Password visibility toggled!");const t=e.parentElement.querySelector(".form__control");if(t){const i="password"===t.getAttribute("type")?"text":"password";t.setAttribute("type",i),e.classList.toggle("--hide")}}declareHandlers(){const e=this;if(!this.submitBtn)throw new Error(`There's no submit button in this form "${this.form.id}".`);this.submitBtn.addEventListener("click",(function(t){t.preventDefault(),"function"==typeof e.onBeforeSubmit&&e.onBeforeSubmit(),e.submit()})),this.validator.realTimeValidations(this.form),e.form.querySelectorAll(`.form__field.${e.classes.validateOnBlur}`).forEach((e=>{console.log("ONBLUR",e),e.querySelector(".form__control").addEventListener("blur",(()=>{this.validator.validateField(e)||(this.isValid=!1)}))})),this.form.querySelectorAll(".form__next-step").forEach((t=>{t.addEventListener("click",e.nextStep.bind(e))})),this.form.querySelectorAll(".form__optional-step").forEach((t=>{t.addEventListener("click",e.optionalStep.bind(e))})),this.form.querySelectorAll(".form__prev-step").forEach((t=>{t.addEventListener("click",e.prevStep.bind(e))})),this.form.querySelectorAll(".form__control").forEach((e=>{this.isControlFilled(e),e.addEventListener("keyup",(()=>{this.isControlFilled(e)})),e.addEventListener("change",(()=>{this.isControlFilled(e)}))})),this.form.querySelectorAll(".form__control").forEach((e=>{e.addEventListener("focus",(()=>{this.validator.clearControlError(e)}))})),this.form.querySelectorAll("."+this.classes.clearFieldError).forEach((i=>{i.addEventListener("click",(()=>{const s=t({element:i,className:"form__field"});e.validator.clearControlError(s.querySelector(".form__control"))}))})),this.form.querySelectorAll(".form__field.--number input").forEach((e=>{const i=this,s=t({element:e,className:"form__field"}),r=s&&s.dataset.thousandsSeparator?s.dataset.thousandsSeparator:null,a=s&&s.dataset.decimalSeparator?s.dataset.decimalSeparator:"",o=s&&s.dataset.decimals?s.dataset.decimals:"";function l(){e.value=i.filterNumber(e.value,[a])}e.addEventListener("focus",l),e.addEventListener("input",l),e.addEventListener("paste",l),e.addEventListener("blur",(()=>{e.value=r?i.filterFormattedQuantity(e.value,r,a,parseInt(o)):i.filterNumber(e.value)}))})),this.form.querySelectorAll(".form__field.--money-amount input").forEach((e=>{const i=this,s=t({element:e,className:"form__field"}),r=s&&s.dataset.currency?s.dataset.currency:"$",a=s&&s.dataset.thousandsSeparator?s.dataset.thousandsSeparator:".",o=s&&s.dataset.decimalSeparator?s.dataset.decimalSeparator:"",l=s&&s.dataset.decimals?s.dataset.decimals:"";function n(){e.value=i.filterNumber(e.value,[o])}e.addEventListener("focus",n),e.addEventListener("input",n),e.addEventListener("paste",n),e.addEventListener("blur",(()=>{e.value=this.filterMoneyAmount(e.value,r,a,o,parseInt(l))}))})),this.form.querySelectorAll(".form__field.--phone input").forEach((e=>{e.addEventListener("input",(()=>{e.value=this.filterPhoneNumber(e.value)})),e.addEventListener("paste",(()=>{e.value=this.filterPhoneNumber(e.value)}))})),this.form.querySelectorAll(".form__toggle-password-visibility").forEach((e=>{e.addEventListener("click",this.togglePasswordVisibility(e))}))}showLog(e,t="log"){"log"==t?console.log("::EgoForm:: "+e):"data"==t&&(console.log("::EgoForm:: DATA"),console.table(e))}}export{r as default};
+const t=({element:t,enter:e,time:s,displayType:i,callback:r})=>{t.style.opacity=e?0:1,e&&(t.style.display=i||"block");let a=+new Date;!function i(){t.style.opacity=e?+t.style.opacity+(new Date-a)/(s||200):+t.style.opacity-(new Date-a)/(s||200),a=+new Date,e&&+t.style.opacity<1||!e&&+t.style.opacity>0?window.requestAnimationFrame&&requestAnimationFrame(i)||setTimeout(i,16):(e||(t.style.display="none"),r&&"function"==typeof r&&r())}()},e=({element:t,className:e})=>{if(!t)return!1;for(;t&&!t.classList.contains(e);)t=!!t.parentElement&&t.parentElement;return t};function s(t,e="log"){"log"==e?console.log("::EgoForm:: "+t):"data"==e&&(console.log("::EgoForm:: DATA"),console.table(t))}const i={default:{empty:"Campo requerido.",invalid:"Campo nó válido.",minLength:"Debe tener al menos [[var]] caracteres.",maxLength:"Debe tener como máximo [[var]] caracteres."},email:{empty:"El email es requerido.",invalid:"El email no es válido."},message:{empty:"El mensaje es requerido."},password:{empty:"Ingrese una contraseña."},password_repeat:{empty:"Debe repetir la contraseña.",unequal:"Las contraseñas no coindicen."},cuil:{empty:"Campo requerido.",min:"El número debe tener exactamente 11 dígitos.",invalid:"El número ingresado no es válido."},url:{empty:"Campo requerido.",invalid:"URL no válida."},file:{empty:"Campo requerido",min_size:"El tamaño mínimo es [[var]]",max_size:"El tamaño máximo es [[var]]"}};class r{constructor({customValidations:t,classes:e,customValidationMessages:s,debug:r}){this.customValidations=t,this.validationMessages={...i,...s}||i,this.classes=e,this.debug=r}validateField(t){const e=t.dataset.type,i=["radio","checkbox"].includes(e),r=t.classList.contains(this.classes.requiredField),a=t.classList.contains(this.classes.requiredIfFilledField),o=t.querySelector(".form__error"),l=t.querySelector(".form__control"),n=i?t.querySelector(".form__control:checked"):null,u=l?l.getAttribute("name"):"",d=Object.keys(this.customValidations),c=t.dataset.minLength?parseInt(t.dataset.minLength):null,h=t.dataset.maxLength?parseInt(t.dataset.maxLength):null;if(l||this.throwError("control not found."),u||this.throwError("control name not found."),this.debug&&s(`validating field "${u}"`),r&&!l.value)return o&&(o.textContent=this.validationMessages[u]?this.validationMessages[u].empty:this.validationMessages.default.empty),this.displayFieldError(l,t,o),!1;if(l.value){if(c&&l.value.length<c)return o&&(o.textContent=this.validationMessages.default.minLength.replace("[[var]]",c)),this.displayFieldError(l,t,o),!1;if(h&&l.value.length>h)return o&&(o.textContent=this.validationMessages.default.maxLength.replace("[[var]]",h)),this.displayFieldError(l,t,o),!1}if(i&&!n){if(!a)return this.displayFieldError(l,t,o),o&&(o.textContent=this.validationMessages[u]?this.validationMessages[u].empty:this.validationMessages.default.empty),!1}else{switch(e){case"email":if(l.value&&!this.isValidEmail(l.value))return o&&(o.textContent=this.validationMessages.email.invalid),this.displayFieldError(l,t,o),!1;break;case"password_repeat":{const e=document.getElementById("password");if(e&&l.value!=e.value)return o&&(o.textContent=this.validationMessages.password_repeat.unequal),this.displayFieldError(l,t,o),!1;break}case"cuil":case"cuit":if(l.value&&!this.isValidCuitCuil(l.value))return o&&(o.textContent=this.validationMessages.cuil.invalid),this.displayFieldError(l,t,o),!1;break;case"url":if(l.value&&!this.isValidUrl(l.value))return o&&(o.textContent=this.validationMessages.url.invalid),this.displayFieldError(l,t,o),!1;break;case"money":const e=l.dataset.currency?l.dataset.currency:"$";if(""==l.value||l.value==e)return o&&(o.textContent=this.validationMessages.default.empty),this.displayFieldError(l,t,o),!1;break;case"single-checkbox":if(!l.checked)return this.displayFieldError(l,t,o),o&&(o.textContent=this.validationMessages[u]?this.validationMessages[u].empty:this.validationMessages.default.empty),!1}for(const s of d)if(e===s)for(const s of this.customValidations[e])if(!s.condition(l.value))return o&&(o.textContent=s.message||""),this.displayFieldError(l,t,o),!1}return!0}isValidEmail(t){return/(?!.*\.{2})^([a-z\d!#$%&'*+\-/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([\t]*\r\n)?[\t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([\t]*\r\n)?[\t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i.test(t.toLowerCase())}isValidCuitCuil(t){const e=[5,4,3,2,7,6,5,4,3,2];let s=t.toString().replace(/[^0-9]/g,"").split("");if(11!=s.length)return!1;s=s.map((t=>parseInt(t)));const i=parseInt(s.pop());let r=11-s.reduce(((t,s,i)=>t+s*e[i]),0)%11;return 10==r&&(r=9),11==r&&(r=0),r==i}isValidUrl(t){return!!new RegExp("^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_.~+=-]*)?(\\#[-a-z\\d_]*)?$","i").test(t)}isValidFileSize(t){let e=null;const s=t.querySelector(".form__control"),i=parseFloat(t.dataset.minSize),r=parseFloat(t.dataset.maxSize),a=t.querySelector(".form__error"),o=s.files[0].name,l=s.files[0].size,n=parseFloat(s.files.length?(l/1048576).toFixed(1):0);n>r||!l?(s.value="",t.classList.remove("--has-file"),s.setAttribute("aria-invalid","true"),t.classList.add(this.classes.fieldHasError)):o?(this.hasFile=!0,t.classList.add("--has-file")):(this.hasFile=!1,t.classList.remove("--has-file")),l?n<i?e=this.validationMessages.file.min_size.replace("[[var]]",i+" MB"):n>r&&(e=this.validationMessages.file.max_size.replace("[[var]]",r+" MB")):e=this.validationMessages.file.empty,e&&(a.textContent=e,this.displayFieldError(s,t,a))}displayFieldError(t,e,s){t.setAttribute("aria-invalid","true"),e.classList.add(this.classes.fieldHasError),this.classes.controlHasError&&t.classList.add(this.classes.controlHasError),s&&s.classList.remove(this.classes.hiddenErrorMessage)}clearControlError(t){t.setAttribute("aria-invalid","false"),this.classes.controlHasError&&t.classList.remove(this.classes.controlHasError);const s=e({element:t,className:"form__field"}),i=s.querySelector(".form__error");s.classList.remove(this.classes.fieldHasError),i&&(i.textContent="",i.classList.add(this.classes.hiddenErrorMessage))}realTimeValidations(t){t.querySelectorAll('.form__field[data-type="file"]').forEach((t=>{const e=t.querySelector(".form__control");e?.addEventListener("change",(e=>{e.stopPropagation(),this.isValidFileSize(t)}))}))}throwError(t){throw new Error(`EgoForm Error: ${t}`)}}class a{constructor({element:t,classes:e,submitType:i,submitDataFormat:a,requestHeaders:o,fieldGroups:l,serializerIgnoreList:n,customValidations:u,customValidationMessages:d,onStepChange:c,onValidationError:h,onSubmitStart:m,onSubmitEnd:f,onSuccess:p,onError:F,onBeforeSubmit:v,resetOnSuccess:g,resetLoaderOnSuccess:y,scrollOnError:E,preventSubmit:S,debug:b}){this.form=t,this.submitType=i||"fetch",this.submitDataFormat=a||"formData",this.requestHeaders=o||{},this.actionUrl=this.form.getAttribute("action"),this.submitMethod=this.form.getAttribute("method")||"POST",this.submitBtn=this.form.querySelector('button[type="submit"]')||null,this.classes={requiredField:"--required",requiredIfFilledField:"--required-if-filled",fieldHasError:"--has-error",controlHasError:!1,hiddenErrorMessage:"--hidden",formSubmittingState:"--submitting",buttonSubmittingState:"--loading",clearFieldError:"--clear-error",validateOnBlur:"--validate-onblur",validateOnInput:"--validate-oninput",...e},this.isValid=!0,this.validator=new r({customValidations:u||{},classes:this.classes,customValidationMessages:d||null,debug:b}),this.onValidationError=h??!1,this.onStepChange=c??!1,this.onSubmitStart=m??!1,this.onSubmitEnd=f??!1,this.onSuccess=p??!1,this.onError=F??!1,this.onBeforeSubmit=v??!1,this.fieldGroups=l??!1,this.hasFile=!1,this.serializerIgnoreList=n||[],this.resetOnSuccess=g??!0,this.resetLoaderOnSuccess=y??!0,this.scrollOnError=E??!0,this.currentStep=this.form.querySelector(".form__step")?parseInt(this.form.querySelector(".form__step.--active").dataset.step):0,this.currentStepOptional=!1,this.stepChanging=!1,this.preventSubmit=S??!1,this.debug=b??!1,this.declareHandlers(),this.debug&&s("initialized!")}submit(){this.preventSubmit||this.resumeSubmit()}resumeSubmit(){this.debug&&s(`submitting using ${this.submitType}!`),this.submittingForm(!0),this.isValid=!0;const t=[];if(this.form.querySelectorAll(".form__field").forEach((e=>{this.validator.validateField(e)||(t.push(e.querySelector(".form__control")?.name),this.isValid=!1)})),this.isValid)this.debug?(s("the form was submitted!"),s(this.serializeData(),"data"),setTimeout((()=>{this.submittingForm(!1)}),1e3)):"fetch"==this.submitType?fetch(this.actionUrl,{method:this.submitMethod,headers:"json"===this.submitDataFormat?{"Content-Type":"application/json",...this.requestHeaders}:{...this.requestHeaders},body:"json"===this.submitDataFormat?JSON.stringify(this.serializeData()):this.serializeData(!0)}).then((t=>{200===t.status||201===t.status?(this.resetOnSuccess&&this.reset(),"function"==typeof this.onSuccess&&this.onSuccess(t)):"function"==typeof this.onError&&this.onError(t)})).catch((t=>{"function"==typeof this.onError&&this.onError(t)})).finally((()=>{this.submittingForm(!1)})):this.form.submit();else if(this.submittingForm(!1),"function"==typeof this.onValidationError&&this.onValidationError(t),this.debug&&s(`this fields have failed validation: ${t.toString().replace(/,/g,", ")}.`),this.scrollOnError){const t=this.form.querySelector(`.form__field.${this.classes.fieldHasError}`);(t=>{const e=t.getBoundingClientRect();return e.top>=0&&e.left>=0&&e.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&e.right<=(window.innerWidth||document.documentElement.clientWidth)})(t)||t.scrollIntoView({behavior:"smooth"})}}submittingForm(t){let e=document.getElementsByTagName("body").item(0);t?(this.form.classList.add(this.classes.formSubmittingState),this.submitBtn.classList.add(this.classes.buttonSubmittingState),e.classList.add("--block"),"function"==typeof this.onSubmitStart&&this.onSubmitStart()):(this.resetLoaderOnSuccess&&(this.form.classList.remove(this.classes.formSubmittingState),this.submitBtn.classList.remove(this.classes.buttonSubmittingState),e.classList.remove("--block")),"function"==typeof this.onSubmitEnd&&this.onSubmitEnd())}serializeData(t=!1){const e=new FormData(this.form),s={};for(const t of e)if(!this.serializerIgnoreList.includes(t[0])){if(t[1]instanceof File&&!t[1].size&&!t[1].name)continue;s[t[0]]=t[1]}if(this.fieldGroups)for(const t in this.fieldGroups)if(Object.hasOwnProperty.call(this.fieldGroups,t)){let i=[{}];for(const r of this.fieldGroups[t])i[0][r]=e.get(r),delete s[r];s[t]=i}return t?e:s}reset(){this.form.reset(),this.form.querySelectorAll(".form__field").forEach((t=>t.classList.remove("--filled",`${this.classes.fieldHasError}`))),this.form.querySelectorAll(".form__control").forEach((t=>t.setAttribute("aria-invalid","false"))),this.currentStep&&this.changeStep(1)}changeStep(e){if(!this.stepChanging){const s=this.currentStepOptional?this.currentStep+"b":this.currentStep,i=this.form.querySelector('[data-step="'+s+'"]'),r=i.querySelectorAll(`.${this.classes.requiredField}`),a="next"===e?this.currentStep+1:"prev"!==e||this.currentStepOptional?"optional"===e?this.currentStep+"b":this.currentStep:this.currentStep-1,o=this.form.querySelector('[data-step="'+a+'"]');(this.currentStep!==a||this.currentStepOptional)&&(this.stepChanging=!0,this.isValid=!0,setTimeout((()=>{!r||"next"!==e&&"optional"!==e||r.forEach((t=>{this.validator.validateField(t)||(this.isValid=!1)})),i&&o&&this.isValid?t({element:i,enter:!1,time:200,displayType:"flex",callback:()=>{i.classList.remove("--active"),t({element:o,enter:!0,time:200,displayType:"flex",callback:()=>{o.classList.add("--active"),this.stepChanging=!1,this.currentStepOptional="optional"===e,this.currentStep=parseInt(a),"function"==typeof this.onStepChange&&this.onStepChange(s,a)}})}}):this.stepChanging=!1}),50))}}nextStep(){this.changeStep("next")}optionalStep(){this.changeStep("optional")}prevStep(){this.changeStep("prev")}isControlFilled(t){let e=t.parentElement;""!==t.value?e.classList.add("--filled"):e.classList.remove("--filled")}filterNumber(t,e=[]){const s=e.join(""),i=new RegExp("[^"+s+"0-9]","g");return t.toString().replace(i,"")}filterFormattedQuantity(t,e=".",s=",",i){const r=s?t.toString().split(s):[t],a=r[0].replace(/\B(?=(\d{3})+(?!\d))/g,e);let o="";return o=i>0&&r[1]&&r[1].length?a+s+r[1].slice(0,i):a,o}filterMoneyAmount(t,e="$",s=".",i=",",r){if(!t||t==e)return"";let a=this.filterNumber(t,[i||""]);return a=this.filterFormattedQuantity(a,s,i,r),`${e} ${a}`}filterPhoneNumber(t){return t.replace(/[^\d+\-() ]*/g,"")}togglePasswordVisibility(t){this.debug&&s("Password visibility toggled!");const e=t.parentElement.querySelector(".form__control");if(e){const s="password"===e.getAttribute("type")?"text":"password";e.setAttribute("type",s),t.classList.toggle("--hide")}}declareHandlers(){const t=this;if(!this.submitBtn)throw new Error(`There's no submit button in this form "${this.form.id}".`);this.submitBtn.addEventListener("click",(function(e){e.preventDefault(),"function"==typeof t.onBeforeSubmit&&t.onBeforeSubmit(),t.submit()})),this.validator.realTimeValidations(this.form),this.form.querySelectorAll(`.form__field.${this.classes.validateOnBlur}`).forEach((t=>{t.querySelector(".form__control").addEventListener("blur",(()=>{this.validator.validateField(t)||(this.isValid=!1)}))})),this.form.querySelectorAll(`.form__field.${this.classes.validateOnInput}`).forEach((t=>{const e=t.querySelector(".form__control");e.addEventListener("input",(()=>{this.validator.validateField(t)&&this.validator.clearControlError(e)}))})),this.form.querySelectorAll(".form__next-step").forEach((e=>{e.addEventListener("click",t.nextStep.bind(t))})),this.form.querySelectorAll(".form__optional-step").forEach((e=>{e.addEventListener("click",t.optionalStep.bind(t))})),this.form.querySelectorAll(".form__prev-step").forEach((e=>{e.addEventListener("click",t.prevStep.bind(t))})),this.form.querySelectorAll(".form__control").forEach((t=>{this.isControlFilled(t),t.addEventListener("keyup",(()=>{this.isControlFilled(t)})),t.addEventListener("change",(()=>{this.isControlFilled(t)}))})),this.form.querySelectorAll(".form__control").forEach((t=>{t.addEventListener("focus",(()=>{this.validator.clearControlError(t)}))})),this.form.querySelectorAll("."+this.classes.clearFieldError).forEach((s=>{s.addEventListener("click",(()=>{const i=e({element:s,className:"form__field"});t.validator.clearControlError(i.querySelector(".form__control"))}))})),this.form.querySelectorAll(".form__field.--number input").forEach((t=>{const s=this,i=e({element:t,className:"form__field"}),r=i&&i.dataset.thousandsSeparator?i.dataset.thousandsSeparator:null,a=i&&i.dataset.decimalSeparator?i.dataset.decimalSeparator:"",o=i&&i.dataset.decimals?i.dataset.decimals:"";function l(){t.value=s.filterNumber(t.value,[a])}t.addEventListener("focus",l),t.addEventListener("input",l),t.addEventListener("paste",l),t.addEventListener("blur",(()=>{t.value=r?s.filterFormattedQuantity(t.value,r,a,parseInt(o)):s.filterNumber(t.value)}))})),this.form.querySelectorAll(".form__field.--money-amount input").forEach((t=>{const s=this,i=e({element:t,className:"form__field"}),r=i&&i.dataset.currency?i.dataset.currency:"$",a=i&&i.dataset.thousandsSeparator?i.dataset.thousandsSeparator:".",o=i&&i.dataset.decimalSeparator?i.dataset.decimalSeparator:"",l=i&&i.dataset.decimals?i.dataset.decimals:"";function n(){t.value=s.filterNumber(t.value,[o])}t.addEventListener("focus",n),t.addEventListener("input",n),t.addEventListener("paste",n),t.addEventListener("blur",(()=>{t.value=this.filterMoneyAmount(t.value,r,a,o,parseInt(l))}))})),this.form.querySelectorAll(".form__field.--phone input").forEach((t=>{t.addEventListener("input",(()=>{t.value=this.filterPhoneNumber(t.value)})),t.addEventListener("paste",(()=>{t.value=this.filterPhoneNumber(t.value)}))})),this.form.querySelectorAll(".form__toggle-password-visibility").forEach((t=>{t.addEventListener("click",this.togglePasswordVisibility(t))}))}}export{a as default};

package/dist/js/egodesign.form.umd.min.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):((e="undefined"!=typeof globalThis?globalThis:e||self).egodesign=e.egodesign||{},e.egodesign.form=t())}(this,(function(){"use strict";const e=({element:e,enter:t,time:i,displayType:s,callback:r})=>{e.style.opacity=t?0:1,t&&(e.style.display=s||"block");let a=+new Date;!function s(){e.style.opacity=t?+e.style.opacity+(new Date-a)/(i||200):+e.style.opacity-(new Date-a)/(i||200),a=+new Date,t&&+e.style.opacity<1||!t&&+e.style.opacity>0?window.requestAnimationFrame&&requestAnimationFrame(s)||setTimeout(s,16):(t||(e.style.display="none"),r&&"function"==typeof r&&r())}()},t=({element:e,className:t})=>{if(!e)return!1;for(;e&&!e.classList.contains(t);)e=!!e.parentElement&&e.parentElement;return e},i={default:{empty:"Campo requerido.",invalid:"Campo nó válido.",minLength:"Debe tener al menos [[var]] caracteres.",maxLength:"Debe tener como máximo [[var]] caracteres."},email:{empty:"El email es requerido.",invalid:"El email no es válido."},message:{empty:"El mensaje es requerido."},password:{empty:"Ingrese una contraseña."},password_repeat:{empty:"Debe repetir la contraseña.",unequal:"Las contraseñas no coindicen."},cuil:{empty:"Campo requerido.",min:"El número debe tener exactamente 11 dígitos.",invalid:"El número ingresado no es válido."},url:{empty:"Campo requerido.",invalid:"URL no válida."},file:{empty:"Campo requerido",min_size:"El tamaño mínimo es [[var]]",max_size:"El tamaño máximo es [[var]]"}};class s{constructor({customValidations:e,classes:t,customValidationMessages:s}){this.customValidations=e,this.validationMessages={...i,...s}||i,this.classes=t}validateField(e){const t=e.dataset.type,i=["radio","checkbox"].includes(t),s=e.classList.contains(this.classes.requiredField),r=e.classList.contains(this.classes.requiredIfFilledField),a=e.querySelector(".form__error"),o=e.querySelector(".form__control"),l=i?e.querySelector(".form__control:checked"):null,n=o?o.getAttribute("name"):"",u=Object.keys(this.customValidations),d=e.dataset.minLength?parseInt(e.dataset.minLength):null,c=e.dataset.maxLength?parseInt(e.dataset.maxLength):null;if(o||this.throwError("control not found."),n||this.throwError("control name not found."),s&&!o.value)return a&&(a.innerText=this.validationMessages[n]?this.validationMessages[n].empty:this.validationMessages.default.empty),this.displayFieldError(o,e,a),!1;if(o.value){if(d&&o.value.length<d)return a&&(a.innerText=this.validationMessages.default.minLength.replace("[[var]]",d)),this.displayFieldError(o,e,a),!1;if(c&&o.value.length>c)return a&&(a.innerText=this.validationMessages.default.maxLength.replace("[[var]]",c)),this.displayFieldError(o,e,a),!1}if(i&&!l){if(!r)return this.displayFieldError(o,e,a),a&&(a.innerText=this.validationMessages[n]?this.validationMessages[n].empty:this.validationMessages.default.empty),!1}else{switch(t){case"email":if(o.value&&!this.isValidEmail(o.value))return a&&(a.innerText=this.validationMessages.email.invalid),this.displayFieldError(o,e,a),!1;break;case"password_repeat":{const t=document.getElementById("password");if(t&&o.value!=t.value)return a&&(a.innerText=this.validationMessages.password_repeat.unequal),this.displayFieldError(o,e,a),!1;break}case"cuil":case"cuit":if(o.value&&!this.isValidCuitCuil(o.value))return a&&(a.innerText=this.validationMessages.cuil.invalid),this.displayFieldError(o,e,a),!1;break;case"url":if(o.value&&!this.isValidUrl(o.value))return a&&(a.innerText=this.validationMessages.url.invalid),this.displayFieldError(o,e,a),!1;break;case"money":const t=o.dataset.currency?o.dataset.currency:"$";if(""==o.value||o.value==t)return a&&(a.innerText=this.validationMessages.default.empty),this.displayFieldError(o,e,a),!1;break;case"single-checkbox":if(!o.checked)return this.displayFieldError(o,e,a),a&&(a.innerText=this.validationMessages[n]?this.validationMessages[n].empty:this.validationMessages.default.empty),!1}for(const i of u)if(t===i)for(const i of this.customValidations[t])if(!i.condition(o.value))return a&&(a.innerText=i.message||""),this.displayFieldError(o,e,a),!1}return!0}isValidEmail(e){return/(?!.*\.{2})^([a-z\d!#$%&'*+\-/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([\t]*\r\n)?[\t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([\t]*\r\n)?[\t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i.test(e.toLowerCase())}isValidCuitCuil(e){const t=[5,4,3,2,7,6,5,4,3,2];let i=e.toString().replace(/[^0-9]/g,"").split("");if(11!=i.length)return!1;i=i.map((e=>parseInt(e)));const s=parseInt(i.pop());let r=11-i.reduce(((e,i,s)=>e+i*t[s]),0)%11;return 10==r&&(r=9),11==r&&(r=0),r==s}isValidUrl(e){return!!new RegExp("^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_.~+=-]*)?(\\#[-a-z\\d_]*)?$","i").test(e)}isValidFileSize(e){let t=null;const i=e.querySelector(".form__control"),s=parseFloat(e.dataset.minSize),r=parseFloat(e.dataset.maxSize),a=e.querySelector(".form__error"),o=i.files[0].name,l=i.files[0].size,n=parseFloat(i.files.length?(l/1048576).toFixed(1):0);n>r||!l?(i.value="",e.classList.remove("--has-file"),i.setAttribute("aria-invalid","true"),e.classList.add(this.classes.fieldHasError)):o?(this.hasFile=!0,e.classList.add("--has-file")):(this.hasFile=!1,e.classList.remove("--has-file")),l?n<s?t=this.validationMessages.file.min_size.replace("[[var]]",s+" MB"):n>r&&(t=this.validationMessages.file.max_size.replace("[[var]]",r+" MB")):t=this.validationMessages.file.empty,t&&(a.innerText=t,this.displayFieldError(i,e,a))}displayFieldError(e,t,i){e.setAttribute("aria-invalid","true"),t.classList.add(this.classes.fieldHasError),this.classes.controlHasError&&e.classList.add(this.classes.controlHasError),i&&i.classList.remove(this.classes.hiddenErrorMessage)}clearControlError(e){e.setAttribute("aria-invalid","false"),this.classes.controlHasError&&e.classList.remove(this.classes.controlHasError);const i=t({element:e,className:"form__field"}),s=i.querySelector(".form__error");i.classList.remove(this.classes.fieldHasError),s&&(s.innerText="",s.classList.add(this.classes.hiddenErrorMessage))}realTimeValidations(e){e.querySelectorAll('.form__field[data-type="file"]').forEach((e=>{const t=e.querySelector(".form__control");t?.addEventListener("change",(t=>{t.stopPropagation(),this.isValidFileSize(e)}))}))}throwError(e){throw new Error(`EgoForm Error: ${e}`)}}return class{constructor({element:e,classes:t,submitType:i,submitDataFormat:r,requestHeaders:a,fieldGroups:o,serializerIgnoreList:l,customValidations:n,customValidationMessages:u,onStepChange:d,onValidationError:c,onSubmitStart:h,onSubmitEnd:m,onSuccess:f,onError:p,onBeforeSubmit:F,resetOnSuccess:g,scrollOnError:v,preventSubmit:y,debug:E}){this.form=e,this.submitType=i||"fetch",this.submitDataFormat=r||"formData",this.requestHeaders=a||{},this.actionUrl=this.form.getAttribute("action"),this.submitMethod=this.form.getAttribute("method")||"POST",this.submitBtn=this.form.querySelector('button[type="submit"]')||null,this.classes={requiredField:"--required",requiredIfFilledField:"--required-if-filled",fieldHasError:"--has-error",controlHasError:!1,hiddenErrorMessage:"--hidden",formSubmittingState:"--submitting",buttonSubmittingState:"--loading",clearFieldError:"--clear-error",validateOnBlur:"--validate-onblur",...t},this.isValid=!0,this.validator=new s({customValidations:n||{},classes:this.classes,customValidationMessages:u||null}),this.onValidationError=c??!1,this.onStepChange=d??!1,this.onSubmitStart=h??!1,this.onSubmitEnd=m??!1,this.onSuccess=f??!1,this.onError=p??!1,this.onBeforeSubmit=F??!1,this.fieldGroups=o??!1,this.hasFile=!1,this.serializerIgnoreList=l||[],this.resetOnSuccess=g??!0,this.scrollOnError=v??!0,this.currentStep=this.form.querySelector(".form__step")?parseInt(this.form.querySelector(".form__step.--active").dataset.step):0,this.currentStepOptional=!1,this.stepChanging=!1,this.preventSubmit=y??!1,this.debug=E??!1,this.declareHandlers(),this.debug&&this.showLog("initialized!")}submit(){this.preventSubmit||this.resumeSubmit()}resumeSubmit(){this.debug&&this.showLog(`submitting using ${this.submitType}!`),this.submittingForm(!0),this.isValid=!0;const e=[];if(this.form.querySelectorAll(".form__field").forEach((t=>{this.validator.validateField(t)||(e.push(t.querySelector(".form__control")?.name),this.isValid=!1)})),this.isValid)this.debug?(this.showLog("the form was submitted!"),this.showLog(this.serializeData(),"data"),setTimeout((()=>{this.submittingForm(!1)}),1e3)):"fetch"==this.submitType?fetch(this.actionUrl,{method:this.submitMethod,headers:"json"===this.submitDataFormat?{"Content-Type":"application/json",...this.requestHeaders}:{...this.requestHeaders},body:"json"===this.submitDataFormat?JSON.stringify(this.serializeData()):this.serializeData(!0)}).then((e=>{200===e.status||201===e.status?(this.resetOnSuccess&&this.reset(),"function"==typeof this.onSuccess&&this.onSuccess(e)):"function"==typeof this.onError&&this.onError(e)})).catch((e=>{"function"==typeof this.onError&&this.onError(e)})).finally((()=>{this.submittingForm(!1)})):this.form.submit();else{if(this.submittingForm(!1),"function"==typeof this.onValidationError&&this.onValidationError(e),this.debug&&this.showLog(`this fields have failed validation: ${e.toString().replace(/,/g,", ")}.`),this.scrollOnError){const e=this.form.querySelector(`.form__field.${this.classes.fieldHasError}`);(e=>{const t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)})(e)||e.scrollIntoView({behavior:"smooth"})}this.debug&&this.showLog("there are invalid fields.")}}submittingForm(e){let t=document.getElementsByTagName("body").item(0);e?(this.form.classList.add(this.classes.formSubmittingState),this.submitBtn.classList.add(this.classes.buttonSubmittingState),t.classList.add("--block"),"function"==typeof this.onSubmitStart&&this.onSubmitStart()):(this.form.classList.remove(this.classes.formSubmittingState),this.submitBtn.classList.remove(this.classes.buttonSubmittingState),t.classList.remove("--block"),"function"==typeof this.onSubmitEnd&&this.onSubmitEnd())}serializeData(e=!1){const t=new FormData(this.form),i={};for(const e of t)if(!this.serializerIgnoreList.includes(e[0])){if(e[1]instanceof File&&!e[1].size&&!e[1].name)continue;i[e[0]]=e[1]}if(this.fieldGroups)for(const e in this.fieldGroups)if(Object.hasOwnProperty.call(this.fieldGroups,e)){let s=[{}];for(const r of this.fieldGroups[e])s[0][r]=t.get(r),delete i[r];i[e]=s}return e?t:i}reset(){this.form.reset(),this.form.querySelectorAll(".form__field").forEach((e=>e.classList.remove("--filled",`${this.classes.fieldHasError}`))),this.form.querySelectorAll(".form__control").forEach((e=>e.setAttribute("aria-invalid","false"))),this.currentStep&&this.changeStep(1)}changeStep(t){if(!this.stepChanging){const i=this.currentStepOptional?this.currentStep+"b":this.currentStep,s=this.form.querySelector('[data-step="'+i+'"]'),r=s.querySelectorAll(`.${this.classes.requiredField}`),a="next"===t?this.currentStep+1:"prev"!==t||this.currentStepOptional?"optional"===t?this.currentStep+"b":this.currentStep:this.currentStep-1,o=this.form.querySelector('[data-step="'+a+'"]');(this.currentStep!==a||this.currentStepOptional)&&(this.stepChanging=!0,this.isValid=!0,setTimeout((()=>{!r||"next"!==t&&"optional"!==t||r.forEach((e=>{this.validator.validateField(e)||(this.isValid=!1)})),s&&o&&this.isValid?e({element:s,enter:!1,time:200,displayType:"flex",callback:()=>{s.classList.remove("--active"),e({element:o,enter:!0,time:200,displayType:"flex",callback:()=>{o.classList.add("--active"),this.stepChanging=!1,this.currentStepOptional="optional"===t,this.currentStep=parseInt(a),"function"==typeof this.onStepChange&&this.onStepChange(i,a)}})}}):this.stepChanging=!1}),50))}}nextStep(){this.changeStep("next")}optionalStep(){this.changeStep("optional")}prevStep(){this.changeStep("prev")}isControlFilled(e){let t=e.parentElement;""!==e.value?t.classList.add("--filled"):t.classList.remove("--filled")}filterNumber(e,t=[]){const i=t.join(""),s=new RegExp("[^"+i+"0-9]","g");return e.toString().replace(s,"")}filterFormattedQuantity(e,t=".",i=",",s){const r=i?e.toString().split(i):[e],a=r[0].replace(/\B(?=(\d{3})+(?!\d))/g,t);let o="";return o=s>0&&r[1]&&r[1].length?a+i+r[1].slice(0,s):a,o}filterMoneyAmount(e,t="$",i=".",s=",",r){if(!e||e==t)return"";let a=this.filterNumber(e,[s||""]);return a=this.filterFormattedQuantity(a,i,s,r),`${t} ${a}`}filterPhoneNumber(e){return e.replace(/[^\d+\-() ]*/g,"")}togglePasswordVisibility(e){this.debug&&this.showLog("Password visibility toggled!");const t=e.parentElement.querySelector(".form__control");if(t){const i="password"===t.getAttribute("type")?"text":"password";t.setAttribute("type",i),e.classList.toggle("--hide")}}declareHandlers(){const e=this;if(!this.submitBtn)throw new Error(`There's no submit button in this form "${this.form.id}".`);this.submitBtn.addEventListener("click",(function(t){t.preventDefault(),"function"==typeof e.onBeforeSubmit&&e.onBeforeSubmit(),e.submit()})),this.validator.realTimeValidations(this.form),e.form.querySelectorAll(`.form__field.${e.classes.validateOnBlur}`).forEach((e=>{console.log("ONBLUR",e),e.querySelector(".form__control").addEventListener("blur",(()=>{this.validator.validateField(e)||(this.isValid=!1)}))})),this.form.querySelectorAll(".form__next-step").forEach((t=>{t.addEventListener("click",e.nextStep.bind(e))})),this.form.querySelectorAll(".form__optional-step").forEach((t=>{t.addEventListener("click",e.optionalStep.bind(e))})),this.form.querySelectorAll(".form__prev-step").forEach((t=>{t.addEventListener("click",e.prevStep.bind(e))})),this.form.querySelectorAll(".form__control").forEach((e=>{this.isControlFilled(e),e.addEventListener("keyup",(()=>{this.isControlFilled(e)})),e.addEventListener("change",(()=>{this.isControlFilled(e)}))})),this.form.querySelectorAll(".form__control").forEach((e=>{e.addEventListener("focus",(()=>{this.validator.clearControlError(e)}))})),this.form.querySelectorAll("."+this.classes.clearFieldError).forEach((i=>{i.addEventListener("click",(()=>{const s=t({element:i,className:"form__field"});e.validator.clearControlError(s.querySelector(".form__control"))}))})),this.form.querySelectorAll(".form__field.--number input").forEach((e=>{const i=this,s=t({element:e,className:"form__field"}),r=s&&s.dataset.thousandsSeparator?s.dataset.thousandsSeparator:null,a=s&&s.dataset.decimalSeparator?s.dataset.decimalSeparator:"",o=s&&s.dataset.decimals?s.dataset.decimals:"";function l(){e.value=i.filterNumber(e.value,[a])}e.addEventListener("focus",l),e.addEventListener("input",l),e.addEventListener("paste",l),e.addEventListener("blur",(()=>{e.value=r?i.filterFormattedQuantity(e.value,r,a,parseInt(o)):i.filterNumber(e.value)}))})),this.form.querySelectorAll(".form__field.--money-amount input").forEach((e=>{const i=this,s=t({element:e,className:"form__field"}),r=s&&s.dataset.currency?s.dataset.currency:"$",a=s&&s.dataset.thousandsSeparator?s.dataset.thousandsSeparator:".",o=s&&s.dataset.decimalSeparator?s.dataset.decimalSeparator:"",l=s&&s.dataset.decimals?s.dataset.decimals:"";function n(){e.value=i.filterNumber(e.value,[o])}e.addEventListener("focus",n),e.addEventListener("input",n),e.addEventListener("paste",n),e.addEventListener("blur",(()=>{e.value=this.filterMoneyAmount(e.value,r,a,o,parseInt(l))}))})),this.form.querySelectorAll(".form__field.--phone input").forEach((e=>{e.addEventListener("input",(()=>{e.value=this.filterPhoneNumber(e.value)})),e.addEventListener("paste",(()=>{e.value=this.filterPhoneNumber(e.value)}))})),this.form.querySelectorAll(".form__toggle-password-visibility").forEach((e=>{e.addEventListener("click",this.togglePasswordVisibility(e))}))}showLog(e,t="log"){"log"==t?console.log("::EgoForm:: "+e):"data"==t&&(console.log("::EgoForm:: DATA"),console.table(e))}}}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):((e="undefined"!=typeof globalThis?globalThis:e||self).egodesign=e.egodesign||{},e.egodesign.form=t())}(this,(function(){"use strict";const e=({element:e,enter:t,time:i,displayType:s,callback:r})=>{e.style.opacity=t?0:1,t&&(e.style.display=s||"block");let a=+new Date;!function s(){e.style.opacity=t?+e.style.opacity+(new Date-a)/(i||200):+e.style.opacity-(new Date-a)/(i||200),a=+new Date,t&&+e.style.opacity<1||!t&&+e.style.opacity>0?window.requestAnimationFrame&&requestAnimationFrame(s)||setTimeout(s,16):(t||(e.style.display="none"),r&&"function"==typeof r&&r())}()},t=({element:e,className:t})=>{if(!e)return!1;for(;e&&!e.classList.contains(t);)e=!!e.parentElement&&e.parentElement;return e};function i(e,t="log"){"log"==t?console.log("::EgoForm:: "+e):"data"==t&&(console.log("::EgoForm:: DATA"),console.table(e))}const s={default:{empty:"Campo requerido.",invalid:"Campo nó válido.",minLength:"Debe tener al menos [[var]] caracteres.",maxLength:"Debe tener como máximo [[var]] caracteres."},email:{empty:"El email es requerido.",invalid:"El email no es válido."},message:{empty:"El mensaje es requerido."},password:{empty:"Ingrese una contraseña."},password_repeat:{empty:"Debe repetir la contraseña.",unequal:"Las contraseñas no coindicen."},cuil:{empty:"Campo requerido.",min:"El número debe tener exactamente 11 dígitos.",invalid:"El número ingresado no es válido."},url:{empty:"Campo requerido.",invalid:"URL no válida."},file:{empty:"Campo requerido",min_size:"El tamaño mínimo es [[var]]",max_size:"El tamaño máximo es [[var]]"}};class r{constructor({customValidations:e,classes:t,customValidationMessages:i,debug:r}){this.customValidations=e,this.validationMessages={...s,...i}||s,this.classes=t,this.debug=r}validateField(e){const t=e.dataset.type,s=["radio","checkbox"].includes(t),r=e.classList.contains(this.classes.requiredField),a=e.classList.contains(this.classes.requiredIfFilledField),o=e.querySelector(".form__error"),l=e.querySelector(".form__control"),n=s?e.querySelector(".form__control:checked"):null,d=l?l.getAttribute("name"):"",u=Object.keys(this.customValidations),c=e.dataset.minLength?parseInt(e.dataset.minLength):null,h=e.dataset.maxLength?parseInt(e.dataset.maxLength):null;if(l||this.throwError("control not found."),d||this.throwError("control name not found."),this.debug&&i(`validating field "${d}"`),r&&!l.value)return o&&(o.textContent=this.validationMessages[d]?this.validationMessages[d].empty:this.validationMessages.default.empty),this.displayFieldError(l,e,o),!1;if(l.value){if(c&&l.value.length<c)return o&&(o.textContent=this.validationMessages.default.minLength.replace("[[var]]",c)),this.displayFieldError(l,e,o),!1;if(h&&l.value.length>h)return o&&(o.textContent=this.validationMessages.default.maxLength.replace("[[var]]",h)),this.displayFieldError(l,e,o),!1}if(s&&!n){if(!a)return this.displayFieldError(l,e,o),o&&(o.textContent=this.validationMessages[d]?this.validationMessages[d].empty:this.validationMessages.default.empty),!1}else{switch(t){case"email":if(l.value&&!this.isValidEmail(l.value))return o&&(o.textContent=this.validationMessages.email.invalid),this.displayFieldError(l,e,o),!1;break;case"password_repeat":{const t=document.getElementById("password");if(t&&l.value!=t.value)return o&&(o.textContent=this.validationMessages.password_repeat.unequal),this.displayFieldError(l,e,o),!1;break}case"cuil":case"cuit":if(l.value&&!this.isValidCuitCuil(l.value))return o&&(o.textContent=this.validationMessages.cuil.invalid),this.displayFieldError(l,e,o),!1;break;case"url":if(l.value&&!this.isValidUrl(l.value))return o&&(o.textContent=this.validationMessages.url.invalid),this.displayFieldError(l,e,o),!1;break;case"money":const t=l.dataset.currency?l.dataset.currency:"$";if(""==l.value||l.value==t)return o&&(o.textContent=this.validationMessages.default.empty),this.displayFieldError(l,e,o),!1;break;case"single-checkbox":if(!l.checked)return this.displayFieldError(l,e,o),o&&(o.textContent=this.validationMessages[d]?this.validationMessages[d].empty:this.validationMessages.default.empty),!1}for(const i of u)if(t===i)for(const i of this.customValidations[t])if(!i.condition(l.value))return o&&(o.textContent=i.message||""),this.displayFieldError(l,e,o),!1}return!0}isValidEmail(e){return/(?!.*\.{2})^([a-z\d!#$%&'*+\-/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([\t]*\r\n)?[\t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([\t]*\r\n)?[\t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i.test(e.toLowerCase())}isValidCuitCuil(e){const t=[5,4,3,2,7,6,5,4,3,2];let i=e.toString().replace(/[^0-9]/g,"").split("");if(11!=i.length)return!1;i=i.map((e=>parseInt(e)));const s=parseInt(i.pop());let r=11-i.reduce(((e,i,s)=>e+i*t[s]),0)%11;return 10==r&&(r=9),11==r&&(r=0),r==s}isValidUrl(e){return!!new RegExp("^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_.~+=-]*)?(\\#[-a-z\\d_]*)?$","i").test(e)}isValidFileSize(e){let t=null;const i=e.querySelector(".form__control"),s=parseFloat(e.dataset.minSize),r=parseFloat(e.dataset.maxSize),a=e.querySelector(".form__error"),o=i.files[0].name,l=i.files[0].size,n=parseFloat(i.files.length?(l/1048576).toFixed(1):0);n>r||!l?(i.value="",e.classList.remove("--has-file"),i.setAttribute("aria-invalid","true"),e.classList.add(this.classes.fieldHasError)):o?(this.hasFile=!0,e.classList.add("--has-file")):(this.hasFile=!1,e.classList.remove("--has-file")),l?n<s?t=this.validationMessages.file.min_size.replace("[[var]]",s+" MB"):n>r&&(t=this.validationMessages.file.max_size.replace("[[var]]",r+" MB")):t=this.validationMessages.file.empty,t&&(a.textContent=t,this.displayFieldError(i,e,a))}displayFieldError(e,t,i){e.setAttribute("aria-invalid","true"),t.classList.add(this.classes.fieldHasError),this.classes.controlHasError&&e.classList.add(this.classes.controlHasError),i&&i.classList.remove(this.classes.hiddenErrorMessage)}clearControlError(e){e.setAttribute("aria-invalid","false"),this.classes.controlHasError&&e.classList.remove(this.classes.controlHasError);const i=t({element:e,className:"form__field"}),s=i.querySelector(".form__error");i.classList.remove(this.classes.fieldHasError),s&&(s.textContent="",s.classList.add(this.classes.hiddenErrorMessage))}realTimeValidations(e){e.querySelectorAll('.form__field[data-type="file"]').forEach((e=>{const t=e.querySelector(".form__control");t?.addEventListener("change",(t=>{t.stopPropagation(),this.isValidFileSize(e)}))}))}throwError(e){throw new Error(`EgoForm Error: ${e}`)}}return class{constructor({element:e,classes:t,submitType:s,submitDataFormat:a,requestHeaders:o,fieldGroups:l,serializerIgnoreList:n,customValidations:d,customValidationMessages:u,onStepChange:c,onValidationError:h,onSubmitStart:m,onSubmitEnd:f,onSuccess:p,onError:F,onBeforeSubmit:g,resetOnSuccess:v,resetLoaderOnSuccess:y,scrollOnError:E,preventSubmit:b,debug:S}){this.form=e,this.submitType=s||"fetch",this.submitDataFormat=a||"formData",this.requestHeaders=o||{},this.actionUrl=this.form.getAttribute("action"),this.submitMethod=this.form.getAttribute("method")||"POST",this.submitBtn=this.form.querySelector('button[type="submit"]')||null,this.classes={requiredField:"--required",requiredIfFilledField:"--required-if-filled",fieldHasError:"--has-error",controlHasError:!1,hiddenErrorMessage:"--hidden",formSubmittingState:"--submitting",buttonSubmittingState:"--loading",clearFieldError:"--clear-error",validateOnBlur:"--validate-onblur",validateOnInput:"--validate-oninput",...t},this.isValid=!0,this.validator=new r({customValidations:d||{},classes:this.classes,customValidationMessages:u||null,debug:S}),this.onValidationError=h??!1,this.onStepChange=c??!1,this.onSubmitStart=m??!1,this.onSubmitEnd=f??!1,this.onSuccess=p??!1,this.onError=F??!1,this.onBeforeSubmit=g??!1,this.fieldGroups=l??!1,this.hasFile=!1,this.serializerIgnoreList=n||[],this.resetOnSuccess=v??!0,this.resetLoaderOnSuccess=y??!0,this.scrollOnError=E??!0,this.currentStep=this.form.querySelector(".form__step")?parseInt(this.form.querySelector(".form__step.--active").dataset.step):0,this.currentStepOptional=!1,this.stepChanging=!1,this.preventSubmit=b??!1,this.debug=S??!1,this.declareHandlers(),this.debug&&i("initialized!")}submit(){this.preventSubmit||this.resumeSubmit()}resumeSubmit(){this.debug&&i(`submitting using ${this.submitType}!`),this.submittingForm(!0),this.isValid=!0;const e=[];if(this.form.querySelectorAll(".form__field").forEach((t=>{this.validator.validateField(t)||(e.push(t.querySelector(".form__control")?.name),this.isValid=!1)})),this.isValid)this.debug?(i("the form was submitted!"),i(this.serializeData(),"data"),setTimeout((()=>{this.submittingForm(!1)}),1e3)):"fetch"==this.submitType?fetch(this.actionUrl,{method:this.submitMethod,headers:"json"===this.submitDataFormat?{"Content-Type":"application/json",...this.requestHeaders}:{...this.requestHeaders},body:"json"===this.submitDataFormat?JSON.stringify(this.serializeData()):this.serializeData(!0)}).then((e=>{200===e.status||201===e.status?(this.resetOnSuccess&&this.reset(),"function"==typeof this.onSuccess&&this.onSuccess(e)):"function"==typeof this.onError&&this.onError(e)})).catch((e=>{"function"==typeof this.onError&&this.onError(e)})).finally((()=>{this.submittingForm(!1)})):this.form.submit();else if(this.submittingForm(!1),"function"==typeof this.onValidationError&&this.onValidationError(e),this.debug&&i(`this fields have failed validation: ${e.toString().replace(/,/g,", ")}.`),this.scrollOnError){const e=this.form.querySelector(`.form__field.${this.classes.fieldHasError}`);(e=>{const t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)})(e)||e.scrollIntoView({behavior:"smooth"})}}submittingForm(e){let t=document.getElementsByTagName("body").item(0);e?(this.form.classList.add(this.classes.formSubmittingState),this.submitBtn.classList.add(this.classes.buttonSubmittingState),t.classList.add("--block"),"function"==typeof this.onSubmitStart&&this.onSubmitStart()):(this.resetLoaderOnSuccess&&(this.form.classList.remove(this.classes.formSubmittingState),this.submitBtn.classList.remove(this.classes.buttonSubmittingState),t.classList.remove("--block")),"function"==typeof this.onSubmitEnd&&this.onSubmitEnd())}serializeData(e=!1){const t=new FormData(this.form),i={};for(const e of t)if(!this.serializerIgnoreList.includes(e[0])){if(e[1]instanceof File&&!e[1].size&&!e[1].name)continue;i[e[0]]=e[1]}if(this.fieldGroups)for(const e in this.fieldGroups)if(Object.hasOwnProperty.call(this.fieldGroups,e)){let s=[{}];for(const r of this.fieldGroups[e])s[0][r]=t.get(r),delete i[r];i[e]=s}return e?t:i}reset(){this.form.reset(),this.form.querySelectorAll(".form__field").forEach((e=>e.classList.remove("--filled",`${this.classes.fieldHasError}`))),this.form.querySelectorAll(".form__control").forEach((e=>e.setAttribute("aria-invalid","false"))),this.currentStep&&this.changeStep(1)}changeStep(t){if(!this.stepChanging){const i=this.currentStepOptional?this.currentStep+"b":this.currentStep,s=this.form.querySelector('[data-step="'+i+'"]'),r=s.querySelectorAll(`.${this.classes.requiredField}`),a="next"===t?this.currentStep+1:"prev"!==t||this.currentStepOptional?"optional"===t?this.currentStep+"b":this.currentStep:this.currentStep-1,o=this.form.querySelector('[data-step="'+a+'"]');(this.currentStep!==a||this.currentStepOptional)&&(this.stepChanging=!0,this.isValid=!0,setTimeout((()=>{!r||"next"!==t&&"optional"!==t||r.forEach((e=>{this.validator.validateField(e)||(this.isValid=!1)})),s&&o&&this.isValid?e({element:s,enter:!1,time:200,displayType:"flex",callback:()=>{s.classList.remove("--active"),e({element:o,enter:!0,time:200,displayType:"flex",callback:()=>{o.classList.add("--active"),this.stepChanging=!1,this.currentStepOptional="optional"===t,this.currentStep=parseInt(a),"function"==typeof this.onStepChange&&this.onStepChange(i,a)}})}}):this.stepChanging=!1}),50))}}nextStep(){this.changeStep("next")}optionalStep(){this.changeStep("optional")}prevStep(){this.changeStep("prev")}isControlFilled(e){let t=e.parentElement;""!==e.value?t.classList.add("--filled"):t.classList.remove("--filled")}filterNumber(e,t=[]){const i=t.join(""),s=new RegExp("[^"+i+"0-9]","g");return e.toString().replace(s,"")}filterFormattedQuantity(e,t=".",i=",",s){const r=i?e.toString().split(i):[e],a=r[0].replace(/\B(?=(\d{3})+(?!\d))/g,t);let o="";return o=s>0&&r[1]&&r[1].length?a+i+r[1].slice(0,s):a,o}filterMoneyAmount(e,t="$",i=".",s=",",r){if(!e||e==t)return"";let a=this.filterNumber(e,[s||""]);return a=this.filterFormattedQuantity(a,i,s,r),`${t} ${a}`}filterPhoneNumber(e){return e.replace(/[^\d+\-() ]*/g,"")}togglePasswordVisibility(e){this.debug&&i("Password visibility toggled!");const t=e.parentElement.querySelector(".form__control");if(t){const i="password"===t.getAttribute("type")?"text":"password";t.setAttribute("type",i),e.classList.toggle("--hide")}}declareHandlers(){const e=this;if(!this.submitBtn)throw new Error(`There's no submit button in this form "${this.form.id}".`);this.submitBtn.addEventListener("click",(function(t){t.preventDefault(),"function"==typeof e.onBeforeSubmit&&e.onBeforeSubmit(),e.submit()})),this.validator.realTimeValidations(this.form),this.form.querySelectorAll(`.form__field.${this.classes.validateOnBlur}`).forEach((e=>{e.querySelector(".form__control").addEventListener("blur",(()=>{this.validator.validateField(e)||(this.isValid=!1)}))})),this.form.querySelectorAll(`.form__field.${this.classes.validateOnInput}`).forEach((e=>{const t=e.querySelector(".form__control");t.addEventListener("input",(()=>{this.validator.validateField(e)&&this.validator.clearControlError(t)}))})),this.form.querySelectorAll(".form__next-step").forEach((t=>{t.addEventListener("click",e.nextStep.bind(e))})),this.form.querySelectorAll(".form__optional-step").forEach((t=>{t.addEventListener("click",e.optionalStep.bind(e))})),this.form.querySelectorAll(".form__prev-step").forEach((t=>{t.addEventListener("click",e.prevStep.bind(e))})),this.form.querySelectorAll(".form__control").forEach((e=>{this.isControlFilled(e),e.addEventListener("keyup",(()=>{this.isControlFilled(e)})),e.addEventListener("change",(()=>{this.isControlFilled(e)}))})),this.form.querySelectorAll(".form__control").forEach((e=>{e.addEventListener("focus",(()=>{this.validator.clearControlError(e)}))})),this.form.querySelectorAll("."+this.classes.clearFieldError).forEach((i=>{i.addEventListener("click",(()=>{const s=t({element:i,className:"form__field"});e.validator.clearControlError(s.querySelector(".form__control"))}))})),this.form.querySelectorAll(".form__field.--number input").forEach((e=>{const i=this,s=t({element:e,className:"form__field"}),r=s&&s.dataset.thousandsSeparator?s.dataset.thousandsSeparator:null,a=s&&s.dataset.decimalSeparator?s.dataset.decimalSeparator:"",o=s&&s.dataset.decimals?s.dataset.decimals:"";function l(){e.value=i.filterNumber(e.value,[a])}e.addEventListener("focus",l),e.addEventListener("input",l),e.addEventListener("paste",l),e.addEventListener("blur",(()=>{e.value=r?i.filterFormattedQuantity(e.value,r,a,parseInt(o)):i.filterNumber(e.value)}))})),this.form.querySelectorAll(".form__field.--money-amount input").forEach((e=>{const i=this,s=t({element:e,className:"form__field"}),r=s&&s.dataset.currency?s.dataset.currency:"$",a=s&&s.dataset.thousandsSeparator?s.dataset.thousandsSeparator:".",o=s&&s.dataset.decimalSeparator?s.dataset.decimalSeparator:"",l=s&&s.dataset.decimals?s.dataset.decimals:"";function n(){e.value=i.filterNumber(e.value,[o])}e.addEventListener("focus",n),e.addEventListener("input",n),e.addEventListener("paste",n),e.addEventListener("blur",(()=>{e.value=this.filterMoneyAmount(e.value,r,a,o,parseInt(l))}))})),this.form.querySelectorAll(".form__field.--phone input").forEach((e=>{e.addEventListener("input",(()=>{e.value=this.filterPhoneNumber(e.value)})),e.addEventListener("paste",(()=>{e.value=this.filterPhoneNumber(e.value)}))})),this.form.querySelectorAll(".form__toggle-password-visibility").forEach((e=>{e.addEventListener("click",this.togglePasswordVisibility(e))}))}}}));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@egodesign/form",
-    "version": "1.4.2",
+    "version": "1.4.4",
     "description": "JS Form component",
     "module": "dist/js/egodesign.form.esm.min.js",
     "browser": "dist/js/egodesign.form.umd.min.js",
@@ -38,4 +38,4 @@
     "files": [
         "dist"
     ]
-}
+}