ngx-form-validator-super/bundles/ngx-form-validator-super.umd.min.js

A super flexible and time saving Validation logic handeling directive for Angular Reactive forms.

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/forms")):"function"==typeof define&&define.amd?define("ngx-form-validator-super",["exports","@angular/core","@angular/forms"],e):e((t=t||self)["ngx-form-validator-super"]={},t.ng.core,t.ng.forms)}(this,(function(t,e,o){"use strict";var n=function(){function t(){}return t.prototype.ngOnInit=function(){},t}();n.decorators=[{type:e.Component,args:[{selector:"lib-ngx-form-validator",template:"\n    <p>\n      ngx-form-validator works!\n    </p>\n  "}]}],n.ctorParameters=function(){return[]};Object.create;function r(t,e){var o="function"==typeof Symbol&&t[Symbol.iterator];if(!o)return t;var n,r,i=o.call(t),l=[];try{for(;(void 0===e||e-- >0)&&!(n=i.next()).done;)l.push(n.value)}catch(t){r={error:t}}finally{try{n&&!n.done&&(o=i.return)&&o.call(i)}finally{if(r)throw r.error}}return l}function i(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(r(arguments[e]));return t}Object.create;var l=function(){function t(){this.IsConsoleShow=!1,this.pos1=0,this.pos2=0,this.pos3=0,this.pos4=0}return t.prototype.updateControlStatus=function(t,e){var o=this;this.Control=t,this.AllControls=e;var n=document.getElementById("__XConsl");if(this.IsConsoleShow){n||((n=document.createElement("div")).style.position="fixed",n.id="__XConsl",n.style.top="20px",n.style.zIndex="999",n.style.minHeight="350px",n.style.width="350px",n.style.overflow="auto",n.style.maxHeight="90vh",n.style.right="30px",n.style.padding="0px",n.style.fontSize="13px",n.style.border="1px solid #dfdfdf",n.style.backgroundColor="#fff",n.style.boxShadow="0px 2px 3px #00000022",document.getElementsByTagName("body")[0].append(n)),n.style.display="block";var r="";setTimeout((function(){o.Control.form.controls;r+="<div id=\"_ngx-super-ff\" style='background-color:#707070;font-family:arial ;text-align:center;color:#fff;padding:4px;'>Form Valid : "+o.Control.form.valid+" </div>",r+='<table style="width:100%;margin:4px;" class="_ng-super-panel">',r+="<tr>",r+="<th>Control</th><th>Validation</th><th>Value</th>",r+="</tr>",o.AllControls.forEach((function(t){r+='<tr>\n                      <td style="text-align:center;font-falimy:arial; border:1px solid #efefef;padding:2px'+(t.errors?';border-left:4px solid #DA4667;color:#000;"':";border-left:4px solid #5EFF00;color:#555;")+'"> '+t.name+" </td>  <td>  "+JSON.stringify(t.errors)+'</td>\n                      <td style="min-width:100px;">  '+t.value+" </span>\n                   </tr>\n        "})),r+="</table>",n.innerHTML=r}),200)}else n&&(n.style.display="none")},t.prototype.dragElement=function(t){document.getElementById("_ngx-super-ff")?document.getElementById("_ngx-super-ff").onmousedown=this.dragMouseDown:t.onmousedown=this.dragMouseDown},t.prototype.dragMouseDown=function(t){(t=t||window.event).preventDefault(),this.pos3=t.clientX,this.pos4=t.clientY,document.onmouseup=this.closeDragElement,document.onmousemove=this.elementDrag},t.prototype.elementDrag=function(t){(t=t||window.event).preventDefault(),this.pos1=this.pos3-t.clientX,this.pos2=this.pos4-t.clientY,this.pos3=t.clientX,this.pos4=t.clientY,t.style.top=t.offsetTop-this.pos2+"px",t.style.left=t.offsetLeft-this.pos1+"px"},t.prototype.closeDragElement=function(){document.onmouseup=null,document.onmousemove=null},t}();l.ɵprov=e.ɵɵdefineInjectable({factory:function(){return new l},token:l,providedIn:"root"}),l.decorators=[{type:e.Injectable,args:[{providedIn:"root"}]}],l.ctorParameters=function(){return[]};var a=function(){function t(t){this.panelLogic=t,this.ValidationLabels={}}return t.prototype.GetAllControls=function(t){var e=[];for(var n in t)t[n]instanceof o.FormControl&&(t[n].name=n,e.push(t[n]),t[n].nativeElement?document.body.contains(t[n].nativeElement)?t[n].updateValueAndValidity({emitEvent:!1}):(t[n].setValue(null),t[n].errors=null,t[n].status="VALID"):(t[n].errors=null,t[n].status="VALID")),t[n]instanceof o.FormArray&&(e=i(e,this.GetAllControls(t[n].controls))),t[n]instanceof o.FormGroup&&(e=i(e,this.GetAllControls(t[n].controls)));return e},t.prototype.ValidateControls=function(t){var e=this;try{var o=this.GetAllControls(this.formControl.form.controls),n=[],r=-1,i=!1;return t&&(r=o.findIndex((function(e){return e.nativeElement&&e.nativeElement.isSameNode(t)})),n=o.map((function(t,e){return e!=r?e:-1})).filter((function(t){return-1!=t}))),this.errorControl=null,o.forEach((function(o,l){if(o.nativeElement&&(!n.includes(l)&&"checkbox"==o.nativeElement.type||r>-1&&(!n.includes(l)||l==r)||-1==r&&"checkbox"!=o.nativeElement.type)){if(e.AddRemoveErrorMsg(!1,"",o.nativeElement),!t||l==r)for(var a in o.errors){var s={};s[a]=o.errors[a],i=!0,e.setErrorControl(o.nativeElement),e.AddRemoveErrorMsg(!0,s,o.nativeElement)}n.push(l)}})),i||(this.formControl.form.status="VALID"),this.panelLogic.updateControlStatus(this.formControl,o),this.errorControl&&!t&&this.scrollTo(this.errorControl.ele),i}catch(t){console.error(t)}},t.prototype.setErrorControl=function(t){var e=t.getBoundingClientRect().y;this.errorControl?this.errorControl.y>e&&(this.errorControl={ele:t,y:e}):this.errorControl={ele:t,y:e}},t.prototype.scrollTo=function(t){if(t){t.scrollIntoView({behavior:"smooth",block:"center",inline:"nearest"});var e=null,o=function(){e=setTimeout((function(){t.focus(),window.onscroll=null}),100)};o(),window.onscroll=function(){e&&(clearTimeout(e),e=null),o()}}},t.prototype.GetValidationType=function(t){if(!t.attributes.validationHint)return 1;t.attributes.validationHint.value;return"borderOnly"?2:1},t.prototype.GetValidationContainer=function(t){return t.attributes.validationContainerId&&document.getElementById(t.attributes.validationContainerId.value)||null},t.prototype.AddRemoveErrorMsg=function(t,e,o){if(o&&o.parentElement){var n=this.GetValidationContainer(o),r=this.GetValidationType(o),i=[],l=e?Object.keys(e)[0]:null,a=e?e[l]:null;o.classList.remove("_BrdrError"),n?n.childNodes.length>0&&(i=n.childNodes):i=o.parentElement.childNodes,2==r&&(o.classList.remove("_BrdrError"),n&&n.classList.remove("_BrdrError"));for(var s=0;s<i.length;s++)i[s].classList&&i[s].classList.contains("_ErX")&&i[s].remove();if(t){var c=document.createElement("div");if(2==r)return void(n?n.classList.add("_BrdrError"):o.classList.add("_BrdrError"));o.classList.add("_BrdrError"),c.classList.add("_ErX"),this.GetErrorMsg(l,(function(t){t&&(a.hasOwnProperty("requiredLength")||a.hasOwnProperty("max"))&&(t=t.replace("_",a.requiredLength||a.max)),c.innerHTML=' <small  class="ngx-validation-label " >'+t+"</small>",n?n.childNodes.lenght>0?n.children[n.children.length-1].insertAdjacentElement("beforeend",c):n.appendChild(c):o.parentElement.insertAdjacentElement("beforeend",c)}))}}},t.prototype.GetErrorMsg=function(t,e){e(this.ValidationLabels[t])},t.prototype.TogglePanel=function(){this.panelLogic.IsConsoleShow=!this.panelLogic.IsConsoleShow,this.panelLogic.updateControlStatus(this.formControl,this.GetAllControls(this.formControl.form.controls))},t}();a.ɵprov=e.ɵɵdefineInjectable({factory:function(){return new a(e.ɵɵinject(l))},token:a,providedIn:"root"}),a.decorators=[{type:e.Injectable,args:[{providedIn:"root"}]}],a.ctorParameters=function(){return[{type:l}]};var s=function(){function t(t,e,o){var n=this;this.controlContainer=t,this.ValidatorLogic=e,this.ele=o,this.btnClickHandler=function(t){t.preventDefault(),n.CallValidation(t.target)},this.SetMutationOserver()}return t.prototype.ngOnInit=function(){},t.prototype.SetMutationOserver=function(){var t=this;this.ele&&new MutationObserver((function(e){var o=t.GetSubmitButtons();o&&o.length>0&&o.forEach((function(e){t.OnSubmitBtnClick(e)}))})).observe(this.ele.nativeElement,{childList:!0,subtree:!0,attributes:!0})},t.prototype.GetSubmitButtons=function(){if(this.ele)return this.ele.nativeElement.querySelectorAll("button[type=submit]")},t.prototype.OnSubmitBtnClick=function(t){t.removeEventListener("click",this.btnClickHandler),t.addEventListener("click",this.btnClickHandler)},t.prototype.CallValidation=function(t){this.ValidatorLogic.formControl=this.controlContainer,this.ValidatorLogic.ValidateControls(null)||(t.removeEventListener("click",this.btnClickHandler),t.click())},t.prototype.change=function(t){this.ValidatorLogic.formControl=this.controlContainer,t.srcElement.attributes.formcontrolname&&this.ValidatorLogic.ValidateControls(t.srcElement)},t.prototype.submit=function(t){return!1},t.prototype.openPanel=function(){this.ValidatorLogic.formControl=this.controlContainer,this.ValidatorLogic.TogglePanel()},t}();s.decorators=[{type:e.Directive,args:[{selector:"[ngxValidator]"}]}],s.ctorParameters=function(){return[{type:o.ControlContainer},{type:a},{type:e.ElementRef}]},s.propDecorators={change:[{type:e.HostListener,args:["change",["$event"]]}],submit:[{type:e.HostListener,args:["submit",["$event"]]}],openPanel:[{type:e.HostListener,args:["document:keydown.shift.f8",["$event"]]}]};var c=function(){function t(t,e,o){this.el=t,this.control=e,this.model=o,this.appendNativeElement()}return t.prototype.onChange=function(t){this.appendNativeElement()},t.prototype.ngAfterViewInit=function(){this.appendNativeElement()},t.prototype.appendNativeElement=function(){this.model?this.model.control.nativeElement=this.el.nativeElement:this.control.control&&(this.control.control.nativeElement=this.el.nativeElement)},t}();c.decorators=[{type:e.Directive,args:[{selector:"[ngModel], [formControl], [formControlName]"}]}],c.ctorParameters=function(){return[{type:e.ElementRef},{type:o.NgControl},{type:o.NgModel,decorators:[{type:e.Optional}]}]},c.propDecorators={validationContainerId:[{type:e.Input,args:["validationContainerId"]}],onChange:[{type:e.HostListener,args:["change",["$event"]]}]};var d=function(){function t(t){this.ValidatorLogic=t}return t.prototype.setValidationMsg=function(t){this.ValidatorLogic.ValidationLabels=t},t.prototype.appendValidationMsg=function(t){this.ValidatorLogic.ValidationLabels=Object.assign({},t)},t.prototype.clearValidationMsg=function(){this.ValidatorLogic.ValidationLabels={}},t}();d.ɵprov=e.ɵɵdefineInjectable({factory:function(){return new d(e.ɵɵinject(a))},token:d,providedIn:"root"}),d.decorators=[{type:e.Injectable,args:[{providedIn:"root"}]}],d.ctorParameters=function(){return[{type:a}]};var u=function(){function t(){}return t.prototype.ngOnInit=function(){},t}();u.decorators=[{type:e.Component,args:[{selector:"lib-test",template:"<p>test works!</p>\n",styles:[""]}]}],u.ctorParameters=function(){return[]};var p=function(){function t(){}return t.forRoot=function(){return{ngModule:t,providers:[d]}},t}();p.decorators=[{type:e.NgModule,args:[{declarations:[n,s,c,u],imports:[],exports:[n,s,c],providers:[a,d]}]}],t.NGXFormValidator=s,t.NativeElementInjectorDirective=c,t.NgxFormValidatorComponent=n,t.NgxFormValidatorModule=p,t.NgxValidatorLabelService=d,t.ɵa=a,t.ɵb=l,t.ɵc=u,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=ngx-form-validator-super.umd.min.js.map