@ciri/ngx-popup/bundles/ciri-ngx-popup.umd.min.js

An angular popup component that can customize animation.

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/forms"),require("@angular/animations"),require("rxjs"),require("rxjs/operators"),require("@angular/common")):"function"==typeof define&&define.amd?define("@ciri/ngx-popup",["exports","@angular/core","@angular/forms","@angular/animations","rxjs","rxjs/operators","@angular/common"],e):e(((t=t||self).ciri=t.ciri||{},t.ciri["ngx-popup"]={}),t.ng.core,t.ng.forms,t.ng.animations,t.rxjs,t.rxjs.operators,t.ng.common)}(this,(function(t,e,n,i,o,r,a){"use strict";var s=function(){function t(t){this.builder=t}return t.prototype.makeAnimation=function(t,e){var n=this;return new o.Observable((function(i){var o=n.builder.build(e).create(t);return o.play(),o.onDone((function(){i.next(),i.complete()})),function(){o.destroy()}}))},t.decorators=[{type:e.Injectable,args:[{providedIn:"root"}]}],t.ctorParameters=function(){return[{type:i.AnimationBuilder}]},t.ngInjectableDef=e.ɵɵdefineInjectable({factory:function(){return new t(e.ɵɵinject(i.AnimationBuilder))},token:t,providedIn:"root"}),t}();var p=function(){function t(t,n){this.animation=t,this.cdr=n,this.opacity=.5,this.clickOverlay=new e.EventEmitter,this.afterClose=new e.EventEmitter,this._visible=!1,this.destroy$=new o.Subject}return Object.defineProperty(t.prototype,"visible",{get:function(){return this._visible},set:function(t){var e=this;this.animationSub&&this.animationSub.unsubscribe(),t?(this._visible=!0,this.cdr.detectChanges(),this.animationSub=this.makeAnimation("enter").pipe(r.takeUntil(this.destroy$)).subscribe((function(){}))):this.animationSub=this.makeAnimation("leave").pipe(r.takeUntil(this.destroy$)).subscribe((function(){e._visible=!1,e.cdr.detectChanges(),e.afterClose.emit()}))},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"styles",{get:function(){return{"z-index":this.zIndex,background:"rgba(0, 0, 0, "+this.opacity+")"}},enumerable:!0,configurable:!0}),t.prototype.ngOnInit=function(){},t.prototype.ngOnDestroy=function(){this.destroy$.next(),this.destroy$.complete()},t.prototype.onClick=function(){this.clickOverlay.emit()},t.prototype.makeAnimation=function(t){var e="enter"===t,n=this.container.nativeElement,o=e?[i.style({opacity:0}),i.animate(".3s ease",i.style({opacity:1}))]:[i.style({opacity:1}),i.animate(".3s ease",i.style({opacity:0}))];return this.animation.makeAnimation(n,o)},t.decorators=[{type:e.Component,args:[{selector:"popup-overlay",template:'<div\n  class="overlay"\n  #container\n  [hidden]="!visible"\n  [ngStyle]="styles"\n  (click)="onClick()"\n></div>\n',encapsulation:e.ViewEncapsulation.None,changeDetection:e.ChangeDetectionStrategy.OnPush,styles:[".overlay{position:fixed;top:0;right:0;bottom:0;left:0}"]}]}],t.ctorParameters=function(){return[{type:s},{type:e.ChangeDetectorRef}]},t.propDecorators={zIndex:[{type:e.Input}],opacity:[{type:e.Input}],visible:[{type:e.Input}],clickOverlay:[{type:e.Output}],afterClose:[{type:e.Output}],container:[{type:e.ViewChild,args:["container",{static:!1}]}]},t}();var c=function(){function t(t,e,n,i){this.appRef=t,this.cfr=e,this.injector=n,this.document=i}return t.prototype.open=function(t){var e=Object.assign(this.getDefaultOptions(),t),n=e.opacity,i=e.zIndex,o=e.getContainer,r=this.cfr.resolveComponentFactory(p).create(this.injector);this.appRef.attachView(r.hostView);var a=r.location.nativeElement,s=o();s.insertBefore(a,s.firstChild);var c=r.instance;return c.opacity=n,c.zIndex=i,c.visible=!0,this.setListener(r,e),function(){c.visible=!1}},t.prototype.getDefaultOptions=function(){return{opacity:.5,getContainer:function(){return document.body}}},t.prototype.setListener=function(t,e){var n=t.instance,i=new o.Subscription,r=e.onClick;i.add(n.afterClose.subscribe((function(){t.destroy()}))),r&&i.add(n.clickOverlay.subscribe((function(){r()}))),t.onDestroy((function(){i.unsubscribe()}))},t.decorators=[{type:e.Injectable,args:[{providedIn:"root"}]}],t.ctorParameters=function(){return[{type:e.ApplicationRef},{type:e.ComponentFactoryResolver},{type:e.Injector},{type:Document,decorators:[{type:e.Inject,args:[a.DOCUMENT]}]}]},t.ngInjectableDef=e.ɵɵdefineInjectable({factory:function(){return new t(e.ɵɵinject(e.ApplicationRef),e.ɵɵinject(e.ComponentFactoryResolver),e.ɵɵinject(e.INJECTOR),e.ɵɵinject(a.DOCUMENT))},token:t,providedIn:"root"}),t}();var l=9999;var u={center:"center",top:"top",right:"right",bottom:"bottom",left:"left"},y=function(){function t(t,n,i,r,a){this.hostElRef=t,this.cdr=n,this.renderer=i,this.overlayHelper=r,this.animation=a,this.position=u.center,this.animations={},this.overlay=!0,this.overlayOpacity=.5,this.closeOnClickOverlay=!0,this.zIndex=l++,this.externalClass={},this.clickOverlay=new e.EventEmitter,this.beforeOpen=new e.EventEmitter,this.afterOpen=new e.EventEmitter,this.beforeClose=new e.EventEmitter,this.afterClose=new e.EventEmitter,this.destroy$=new o.Subject,this.dirty=!1,this.leaving=!1}return Object.defineProperty(t.prototype,"el",{get:function(){return this.container.nativeElement},enumerable:!0,configurable:!0}),t.prototype.ngOnDestroy=function(){this.destroy$.next(),this.destroy$.complete()},t.prototype.registerOnChange=function(t){this.onChange=t},t.prototype.registerOnTouched=function(t){},t.prototype.writeValue=function(t){null!==t&&(this.dirty||t)&&(this.animationSub&&this.animationSub.unsubscribe(),t?this.open():this.close(),this.onChange(t),this.dirty=!0)},t.prototype.open=function(){var t=this;this.renderer.setStyle(this.el,"opacity",0),this.visible=!0,this.cdr.markForCheck(),this.beforeOpen.emit(),this.leaving=!1,setTimeout((function(){t.renderer.removeStyle(t.el,"opacity"),t.overlay&&t.openOverlay(),t.animationSub=t.makeAnimation("enter").pipe(r.takeUntil(t.destroy$)).subscribe((function(){t.afterOpen.emit()}))}),0)},t.prototype.close=function(){var t=this;this.beforeClose.emit(),this.leaving=!0,this.overlay&&this.closeOverlay(),this.animationSub=this.makeAnimation("leave").pipe(r.takeUntil(this.destroy$)).subscribe((function(){t.visible=!1,t.cdr.detectChanges(),t.afterClose.emit(),t.leaving=!1}))},t.prototype.openOverlay=function(){var t=this;this.closeOverlay=this.overlayHelper.open({opacity:this.overlayOpacity,zIndex:this.zIndex,getContainer:function(){return t.hostElRef.nativeElement},onClick:function(){t.clickOverlay.emit(),t.closeOnClickOverlay&&t.visible&&!t.leaving&&t.writeValue(!1)}})},t.prototype.makeAnimation=function(t){var e=this.container.nativeElement,n="leave"===t?this.getLeaveAnimation():this.getEnterAnimation();return this.animation.makeAnimation(e,n)},t.prototype.getEnterAnimation=function(){var t;return this.animations.enter||(t={},t[u.center]=[i.style({opacity:0}),i.animate(".3s ease",i.style({opacity:1}))],t[u.top]=[i.style({transform:"translate3d(0, -100%, 0)"}),i.animate(".3s ease",i.style({transform:"translate3d(0, 0, 0)"}))],t[u.right]=[i.style({transform:"translate3d(100%, 0, 0)"}),i.animate(".3s ease",i.style({transform:"translate3d(0, 0, 0)"}))],t[u.bottom]=[i.style({transform:"translate3d(0, 100%, 0)"}),i.animate(".3s ease",i.style({transform:"translate3d(0, 0, 0)"}))],t[u.left]=[i.style({transform:"translate3d(-100%, 0, 0)"}),i.animate(".3s ease",i.style({transform:"translate3d(0, 0, 0)"}))],t)[this.position]},t.prototype.getLeaveAnimation=function(){var t;return this.animations.leave||(t={},t[u.center]=[i.style({opacity:1}),i.animate(".3s ease",i.style({opacity:0}))],t[u.top]=[i.style({transform:"translate3d(0, 0, 0)"}),i.animate(".3s ease",i.style({transform:"translate3d(0, -100%, 0)"}))],t[u.right]=[i.style({transform:"translate3d(0, 0, 0)"}),i.animate(".3s ease",i.style({transform:"translate3d(100%, 0, 0)"}))],t[u.bottom]=[i.style({transform:"translate3d(0, 0, 0)"}),i.animate(".3s ease",i.style({transform:"translate3d(0, 100%, 0)"}))],t[u.left]=[i.style({transform:"translate3d(0, 0, 0)"}),i.animate(".3s ease",i.style({transform:"translate3d(-100%, 0, 0)"}))],t)[this.position]},t.decorators=[{type:e.Component,args:[{selector:"ngx-popup",template:'<div class="ngx-popup-wrapper is-{{ position }}" [hidden]="!visible" [style.zIndex]="zIndex">\n  <div class="ngx-popup" #container [ngClass]="externalClass">\n    <ng-content></ng-content>\n  </div>\n</div>\n',encapsulation:e.ViewEncapsulation.None,changeDetection:e.ChangeDetectionStrategy.OnPush,providers:[{provide:n.NG_VALUE_ACCESSOR,useExisting:e.forwardRef((function(){return t})),multi:!0}],styles:[".ngx-popup-wrapper{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;pointer-events:none}.ngx-popup-wrapper[hidden]{display:none}.ngx-popup-wrapper .ngx-popup{pointer-events:auto}.ngx-popup-wrapper.is-center{align-items:center;justify-content:center}.ngx-popup-wrapper.is-top{align-items:flex-start;justify-content:center}.ngx-popup-wrapper.is-top .ngx-popup{width:100%}.ngx-popup-wrapper.is-right{align-items:center;justify-content:flex-end}.ngx-popup-wrapper.is-right .ngx-popup{height:100%}.ngx-popup-wrapper.is-bottom{align-items:flex-end;justify-content:center}.ngx-popup-wrapper.is-bottom .ngx-popup{width:100%}.ngx-popup-wrapper.is-left{align-items:center;justify-content:flex-start}.ngx-popup-wrapper.is-left .ngx-popup{height:100%}"]}]}],t.ctorParameters=function(){return[{type:e.ElementRef},{type:e.ChangeDetectorRef},{type:e.Renderer2},{type:c},{type:s}]},t.propDecorators={position:[{type:e.Input}],animations:[{type:e.Input}],overlay:[{type:e.Input}],overlayOpacity:[{type:e.Input}],closeOnClickOverlay:[{type:e.Input}],zIndex:[{type:e.Input}],externalClass:[{type:e.Input}],clickOverlay:[{type:e.Output}],beforeOpen:[{type:e.Output}],afterOpen:[{type:e.Output}],beforeClose:[{type:e.Output}],afterClose:[{type:e.Output}],container:[{type:e.ViewChild,args:["container",{static:!1}]}]},t}();var f=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{declarations:[p,y],imports:[a.CommonModule,n.FormsModule],exports:[a.CommonModule,n.FormsModule,y],entryComponents:[p]}]}],t}();t.PopupComponent=y,t.PopupModule=f,t.Position=u,t.ɵa=c,t.ɵb=s,t.ɵc=p,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=ciri-ngx-popup.umd.min.js.map