UNPKG

mdds-angular-composite

Version:

Augular Composite that compose multiple componennt to be a single page

2 lines 6.21 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/router"),require("@angular/core"),require("@angular/common"),require("@angular/forms"),require("@angular/common/http")):"function"==typeof define&&define.amd?define("mdds-angular-composite",["exports","@angular/router","@angular/core","@angular/common","@angular/forms","@angular/common/http"],t):t(e["mdds-angular-composite"]={},e.ng.router,e.ng.core,e.ng.common,e.ng.forms,e.ng.common.http)}(this,function(e,t,n,o,r,i){"use strict";function d(e){var t="function"==typeof Symbol&&e[Symbol.iterator],n=0;return t?t.call(e):{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}}}function f(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var o,r,i=n.call(e),s=[];try{for(;(void 0===t||0<t--)&&!(o=i.next()).done;)s.push(o.value)}catch(a){r={error:a}}finally{try{o&&!o.done&&(n=i["return"])&&n.call(i)}finally{if(r)throw r.error}}return s}var s=(a.decorators=[{type:n.Directive,args:[{selector:"[composite-directive]"}]}],a.ctorParameters=function(){return[{type:n.ViewContainerRef}]},a);function a(e){this.viewContainerRef=e}var c=(p.decorators=[{type:n.Directive,args:[{selector:"[composite-submit-directive]"}]}],p.ctorParameters=function(){return[{type:n.ViewContainerRef}]},p);function p(e){this.viewContainerRef=e}var l=(m.prototype.ngOnInit=function(){this.steps?this.totalSteps=this.steps.length:console.warn("No steps defined for CompositeComponent.")},m.prototype.ngAfterViewInit=function(){var e=this;this.compositeDirectives?(setTimeout(function(){e.loadAllSteps()},10),this.componentEvents.emit({stepIndex:undefined,message:{type:"ngAfterViewInit"}})):console.warn("No composite directive for CompositeComponent.")},m.prototype.reloadStep=function(n,e){var o=this,t=this.compositeDirectives.toArray()[n],r=e.stepTitle,i=e.stepComponent,s=e.mandatory,a=e.preSelectedId,c=e.searchObj,p=e.disableActionButtions;if(i){var l=t.viewContainerRef;l.clear();var m=this.componentFactoryResolver.resolveComponentFactory(i),u=l.createComponent(m).instance;(this.stepCompIns[n]=u).inputData={stepTitle:r,preSelectedId:a,mandatory:s},u.searchObj=c,u.disableActionButtions=p,0===n&&u.setFocus(),u.eventEmitter.subscribe(function(e){if(e){var t={stepIndex:n,message:e};o.componentEvents.emit(t)}})}},m.prototype.loadAllSteps=function(){for(var e=0;e<this.compositeDirectives.length;e++)this.stepCompIns[e]||this.stepConfigs[e]&&this.reloadStep(e,this.stepConfigs[e])},m.prototype.allActionsReady=function(){var e,t,n=!0;try{for(var o=d(this.stepConfigs.entries()),r=o.next();!r.done;r=o.next()){var i=f(r.value,2),s=i[0],a=i[1];if(this.errorMessages[s]=!1,a.mandatory){var c=this.stepCompIns[s];if(!c)return!1;if("selection"===c.actionType){if(0===c.getSelectedItems().length)return n=!(this.errorMessages[s]=!0)}else if("term"===c.actionType&&!c.isTermChecked())return!(this.errorMessages[s]=!0)}}}catch(p){e={error:p}}finally{try{r&&!r.done&&(t=o["return"])&&t.call(o)}finally{if(e)throw e.error}}return n},m.prototype.onSubmit=function(){var e,t,n=this;if(this.submitting=!0,this.allActionsReady()){var o=this.compositeSubmitDirective.viewContainerRef;if(o.clear(),!this.submitCompRef){var r=this.componentFactoryResolver.resolveComponentFactory(this.submit.compoment);this.submitCompRef=o.createComponent(r)}var i=this.submitCompRef.instance,s={},a=function(e,t){var n=c.stepCompIns[e],o=void 0;"selection"===n.actionType?0===(o=n.getSelectedItems()).length?o=undefined:i.arrayFields.some(function(e){return e[0]===t.submitFieldName})||(o=o[0]):"term"===n.actionType&&(o=n.isTermChecked()),s[t.submitFieldName]=o},c=this;try{for(var p=d(this.stepConfigs.entries()),l=p.next();!l.done;l=p.next()){var m=f(l.value,2);a(m[0],m[1])}}catch(u){e={error:u}}finally{try{l&&!l.done&&(t=p["return"])&&t.call(p)}finally{if(e)throw e.error}}i.id=undefined,i.embeddedView=!0,i.initData=s,i.ngOnInit(),i.onSubmit(),i.done.subscribe(function(e){e&&n.router.navigateByUrl(n.submit.succeedUrl)})}},m.prototype.onCancel=function(){this.router.navigateByUrl(this.submit.cancelUrl)},m.decorators=[{type:n.Component,args:[{selector:"app-composite",template:'<div>\n <h3 class="mt-3">Class Enrollment:</h3>\n\n <div *ngFor="let step of steps; index as idx;">\n <h4 class="mt-3">{{idx + 1}}. {{step.stepName}}</h4>\n <ng-template composite-directive></ng-template>\n <div class="error-message" *ngIf="errorMessages[idx]">{{step.errorMessage}}</div>\n </div>\n\n <div class="action-buttons-center mt-3">\n <button class="btn btn-success" \n (click)="onSubmit()">Submit</button>\n <button class="btn btn-outline-success" \n type="button" (click)="onCancel()">Cancel</button>\n \n <div *ngIf="submitting && !allActionsReady()" class="error-message">Please check and fix all errors before submitting.</div>\n </div>\n\n <div style="display: none;">\n <ng-template composite-submit-directive></ng-template>\n </div>\n</div>',styles:[".action-buttons-center{width:100%;float:right;text-align:center;margin-bottom:1.25rem}.action-buttons-center .btn{display:inline-block;margin-left:2.5rem}.error-message{color:#dc3545;margin-top:1rem;font-style:italic}"]}]}],m.ctorParameters=function(){return[{type:n.ComponentFactoryResolver},{type:t.Router}]},m.propDecorators={steps:[{type:n.Input}],stepConfigs:[{type:n.Input}],title:[{type:n.Input}],submit:[{type:n.Input}],componentEvents:[{type:n.Output}],compositeDirectives:[{type:n.ViewChildren,args:[s]}],compositeSubmitDirective:[{type:n.ViewChild,args:[c]}]},m);function m(e,t){this.componentFactoryResolver=e,this.router=t,this.totalSteps=0,this.stepCompRef=[],this.stepCompIns=[],this.stepCompEmitter=[],this.errorMessages=[],this.submitting=!1,this.componentEvents=new n.EventEmitter}var u=(v.decorators=[{type:n.NgModule,args:[{imports:[o.CommonModule,r.FormsModule,r.ReactiveFormsModule,i.HttpClientModule],declarations:[l,s,c],exports:[l],providers:[]}]}],v);function v(){}e.CompositeComponent=l,e.CompositeModule=u,e.ɵa=s,e.ɵb=c,Object.defineProperty(e,"__esModule",{value:!0})}); //# sourceMappingURL=mdds-angular-composite.umd.min.js.map