ngx-simple-modal/bundles/ngx-simple-modal.umd.min.js

A simple unopinionated framework to implement simple modal based behaviour in angular (v2+) projects.

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/common"),require("@angular/core"),require("rxjs"),require("rxjs/operators")):"function"==typeof define&&define.amd?define("ngx-simple-modal",["exports","@angular/common","@angular/core","rxjs","rxjs/operators"],t):t((e=e||self)["ngx-simple-modal"]={},e.ng.common,e.ng.core,e.rxjs,e.rxjs.operators)}(this,(function(e,t,n,o,r){"use strict";
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation.

    Permission to use, copy, modify, and/or distribute this software for any
    purpose with or without fee is hereby granted.

    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
    PERFORMANCE OF THIS SOFTWARE.
    ***************************************************************************** */var i=function(){return(i=Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e}).apply(this,arguments)};function a(e,t,n,o){var r,i=arguments.length,a=i<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(i<3?r(a):i>3?r(t,n,a):r(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}function s(e,t){return function(n,o){t(n,o,e)}}function l(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var o,r,i=n.call(e),a=[];try{for(;(void 0===t||t-- >0)&&!(o=i.next()).done;)a.push(o.value)}catch(e){r={error:e}}finally{try{o&&!o.done&&(n=i.return)&&n.call(i)}finally{if(r)throw r.error}}return a}function c(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(l(arguments[t]));return e}var p=new n.InjectionToken("default-simple-modal.config"),d={closeOnEscape:!1,closeOnClickOutside:!1,bodyClass:"modal-open",wrapperDefaultClasses:"modal fade-anim",wrapperClass:"in",draggableClass:"draggable",animationDuration:300,autoFocus:!1,draggable:!1},u=function(){function e(e){this.resolver=e,this.modalClasses="modal fade-anim"}return e.prototype.addComponent=function(e){var t=this.resolver.resolveComponentFactory(e),o=n.ReflectiveInjector.fromResolvedProviders([],this.viewContainer.injector),r=t.create(o);return this.viewContainer.insert(r.hostView),this.content=r.instance,this.content.wrapper=this.wrapper,{ref:r,component:this.content}},e.prototype.onClickOutsideModalContent=function(e){var t=this.wrapper.nativeElement;this.clickOutsideCallback=function(n){n.target===t&&e()},t.addEventListener("click",this.clickOutsideCallback,!1)},e.prototype.ngOnDestroy=function(){this.clickOutsideCallback&&(this.wrapper.nativeElement.removeEventListener("click",this.clickOutsideCallback,!1),this.clickOutsideCallback=null)},e.ctorParameters=function(){return[{type:n.ComponentFactoryResolver}]},a([n.ViewChild("viewContainer",{read:n.ViewContainerRef,static:!0})],e.prototype,"viewContainer",void 0),a([n.ViewChild("wrapper",{read:n.ElementRef,static:!0})],e.prototype,"wrapper",void 0),e=a([n.Component({selector:"simple-modal-wrapper",template:'\n    <div #wrapper [ngClass]="modalClasses" [ngStyle]="{ display: \'block\' }" role="dialog">\n      <ng-template #viewContainer></ng-template>\n    </div>\n  '})],e)}(),f=function(){function e(e,t,r){this.host=e,this.zone=t,this.renderer=r,this.dragEnabled=!1,this.dragged=new n.EventEmitter,this.delta={x:0,y:0},this.offset={x:0,y:0},this.enabled=!0,this.destroy$=new o.Subject}return Object.defineProperty(e.prototype,"dialogDragOffset",{set:function(e){this.reset(e)},enumerable:!0,configurable:!0}),e.prototype.ngAfterViewInit=function(){this.enabled&&this.init()},e.prototype.ngOnChanges=function(){!this.enabled&&this.dragEnabled&&this.dragTarget&&(this.enabled=!0,this.handle?this.renderer.setStyle(this.handle,"cursor","move"):this.enabled&&this.init()),this.dragEnabled||(this.enabled=!1,this.handle&&this.renderer.setStyle(this.handle,"cursor",""))},e.prototype.ngOnDestroy=function(){this.destroy$.next()},e.prototype.reset=function(e){var t={x:0,y:0};this.offset=i({},t,e),this.delta=i({},t),this.translate()},e.prototype.setupEvents=function(){var e=this;this.zone.runOutsideAngular((function(){var t=o.fromEvent(e.handle,"mousedown"),n=o.fromEvent(document,"mousemove"),i=o.fromEvent(document,"mouseup");t.pipe(r.filter((function(){return e.enabled})),r.map((function(e){return{startX:e.clientX,startY:e.clientY}})),r.switchMap((function(t){var o=t.startX,a=t.startY;return n.pipe(r.map((function(t){t.preventDefault(),e.delta={x:t.clientX-o,y:t.clientY-a}})),r.takeUntil(i))})),r.takeUntil(e.destroy$)).subscribe((function(){0===e.delta.x&&0===e.delta.y||e.translate()})),i.pipe(r.filter((function(){return e.enabled})),r.filter((function(){return 0!==e.delta.x||0!==e.delta.y})),r.takeUntil(e.destroy$)).subscribe((function(){e.offset.x+=e.delta.x,e.offset.y+=e.delta.y,e.dragged.emit(e.offset),e.delta={x:0,y:0}}))}))},e.prototype.translate=function(){var e=this;this.target&&this.zone.runOutsideAngular((function(){requestAnimationFrame((function(){var t="translate("+(e.offset.x+e.delta.x)+"px, "+(e.offset.y+e.delta.y)+"px)";e.renderer.setStyle(e.target,"transform",t)}))}))},e.prototype.init=function(){if(!this.dragTarget)throw new Error("You need to specify the drag target");this.handle=this.dragHandle instanceof Element?this.dragHandle:"string"==typeof this.dragHandle&&this.dragHandle?document.querySelector(this.dragHandle):this.host.nativeElement,this.handle&&this.enabled&&this.renderer.addClass(this.handle,"handle"),this.target=this.dragTarget instanceof HTMLElement?this.dragTarget:document.querySelector(this.dragTarget),this.setupEvents(),this.translate()},e.ctorParameters=function(){return[{type:n.ElementRef},{type:n.NgZone},{type:n.Renderer2}]},a([n.Input()],e.prototype,"dragHandle",void 0),a([n.Input()],e.prototype,"dragTarget",void 0),a([n.Input()],e.prototype,"dragEnabled",void 0),a([n.Input()],e.prototype,"dialogDragOffset",null),a([n.Output()],e.prototype,"dragged",void 0),e=a([n.Directive({selector:"[dialogDraggable]"})],e)}(),h=function(){function e(e,t,n,o){this.resolver=e,this.renderer=t,this.ngZone=n,this.defaultSimpleModalOptions=o,this.modals=[],this.previousActiveElement=null}return e.prototype.addModal=function(e,t,n){var r=this;if(!this.viewContainer)return o.of(null);var i=this.resolver.resolveComponentFactory(u),a=this.viewContainer.createComponent(i).instance,s=a.addComponent(e),l=s.ref,c=s.component;return c.options=n=Object.assign({},this.defaultSimpleModalOptions,n),a.modalClasses=n.wrapperDefaultClasses,this.modals.push(c),this.wait().then((function(){r.toggleWrapperClass(a.wrapper,n.wrapperClass),r.toggleBodyClass(n.bodyClass),n.draggable&&r.setDraggable(l,n),r.wait(n.animationDuration).then((function(){r.autoFocusFirstElement(c.wrapper,n.autoFocus),c.markAsReady()}))})),c.onClosing((function(e){return r.removeModal(e)})),this.configureCloseOnClickOutside(a),c.mapDataObject(t),c.setupObserver()},e.prototype.removeModal=function(e){var t=this,n=e.options;return this.toggleWrapperClass(e.wrapper,n.wrapperClass),this.wait(n.animationDuration).then((function(){t.removeModalFromArray(e),t.toggleBodyClass(n.bodyClass),t.restorePreviousFocus()}))},e.prototype.removeAllModals=function(){var e=this;return Promise.all(this.modals.map((function(t){return e.removeModal(t)})))},e.prototype.toggleBodyClass=function(e){var t,n;if(e){var o=document.getElementsByTagName("body")[0],r=e.split(" ");this.modals.length?(n=o.classList).add.apply(n,c(r)):(t=o.classList).remove.apply(t,c(r))}},e.prototype.configureCloseOnClickOutside=function(e){e.onClickOutsideModalContent((function(){e.content.options.closeOnClickOutside&&e.content.close()}))},e.prototype.autoFocusFirstElement=function(e,t){if(t){var n=e.nativeElement.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');n&&n.length&&(this.previousActiveElement=document.activeElement,n[0].focus())}},e.prototype.restorePreviousFocus=function(){this.previousActiveElement&&(this.previousActiveElement.focus(),this.previousActiveElement=null)},e.prototype.toggleWrapperClass=function(e,t){var n=e.nativeElement.classList,o=t.split(" ");-1!==n.toString().indexOf(t)?n.remove.apply(n,c(o)):n.add.apply(n,c(o))},e.prototype.setDraggable=function(e,t){var n=new f(e.location,this.ngZone,this.renderer);n.dragTarget=e.location.nativeElement,n.dragHandle=e.instance.handle?e.instance.handle.nativeElement:void 0,n.ngAfterViewInit(),e.location.nativeElement.classList.add(t.draggableClass)},e.prototype.wait=function(e){return void 0===e&&(e=0),new Promise((function(t,n){setTimeout((function(){return t()}),e)}))},e.prototype.removeModalFromArray=function(e){var t=this.modals.indexOf(e);t>-1&&(this.viewContainer.remove(t),this.modals.splice(t,1))},e.ctorParameters=function(){return[{type:n.ComponentFactoryResolver},{type:n.Renderer2},{type:n.NgZone},{type:void 0,decorators:[{type:n.Inject,args:[p]}]}]},a([n.ViewChild("viewContainer",{read:n.ViewContainerRef,static:!0})],e.prototype,"viewContainer",void 0),e=a([n.Component({selector:"simple-modal-holder",template:"<ng-template #viewContainer></ng-template>"}),s(3,n.Inject(p))],e)}(),m=function(){this.container=null},v=function(){function e(e,t,n,o){this.resolver=e,this.applicationRef=t,this.injector=n,o&&(this.container=o.container)}return e.prototype.addModal=function(e,t,n){return this.modalHolderComponent||(this.modalHolderComponent=this.createSimpleModalHolder()),this.modalHolderComponent.addModal(e,t,n)},e.prototype.removeModal=function(e){return this.modalHolderComponent?this.modalHolderComponent.removeModal(e):Promise.resolve({})},e.prototype.removeAll=function(){return this.modalHolderComponent?this.modalHolderComponent.removeAllModals():Promise.resolve({})},Object.defineProperty(e.prototype,"container",{get:function(){if("string"==typeof this._container&&(this._container=document.getElementById(this._container)),!this._container&&this.applicationRef.components.length){var e=this.applicationRef.components[0];this.container=e.hostView.rootNodes[0]}return this._container&&"string"!=typeof this._container||(this._container=document.getElementsByTagName("body")[0]),this._container},set:function(e){this._container=e},enumerable:!0,configurable:!0}),e.prototype.createSimpleModalHolder=function(){var e=this,t=this.resolver.resolveComponentFactory(h).create(this.injector),n=t.hostView.rootNodes[0];return this.applicationRef.attachView(t.hostView),t.onDestroy((function(){e.applicationRef.detachView(t.hostView)})),this.container.appendChild(n),t.instance},e.ctorParameters=function(){return[{type:n.ComponentFactoryResolver},{type:n.ApplicationRef},{type:n.Injector},{type:m,decorators:[{type:n.Optional}]}]},e=a([n.Injectable(),s(3,n.Optional())],e)}();function y(e,t,n,o){return new v(e,t,n,o)}var g=d,C=function(){function e(){}var o;return o=e,e.forRoot=function(e,t){return{ngModule:o,providers:[{provide:m,useValue:e},{provide:v,useFactory:y,deps:[n.ComponentFactoryResolver,n.ApplicationRef,n.Injector,m]},{provide:p,useValue:t||d}]}},e=o=a([n.NgModule({declarations:[h,u,f],providers:[v,{provide:p,useValue:g}],imports:[t.CommonModule],entryComponents:[h,u]})],e)}(),b=function(){function e(){this._ready$=new o.BehaviorSubject(!1),this.closerCallback=function(){return Promise.resolve()}}return e.prototype.mapDataObject=function(e){e=e||{};for(var t=Object.keys(e),n=0,o=t.length;n<o;n++){var r=t[n];e[r]&&this[r]&&"object"==typeof e[r]&&"object"==typeof this[r]?Object.assign(this[r],e[r]):this[r]=e[r]}},e.prototype.setupObserver=function(){var e=this;return o.Observable.create((function(t){return e.observer=t,function(){e.close()}}))},e.prototype.onClosing=function(e){this.closerCallback=e},e.prototype.close=function(){var e=this;return this.closerCallback(this).then((function(t){return e.observer&&(e.observer.next(e.result),e.observer.complete()),t}))},e.prototype.onKeydownHandler=function(e){this.options&&this.options.closeOnEscape&&this.close()},Object.defineProperty(e.prototype,"ready$",{get:function(){return this._ready$.asObservable()},enumerable:!0,configurable:!0}),e.prototype.markAsReady=function(){this._ready$.next(!0)},a([n.HostListener("document:keydown.escape",["$event"])],e.prototype,"onKeydownHandler",null),e}();e.DefaultSimpleModalOptionConfig=p,e.DraggableDirective=f,e.SimpleModalComponent=b,e.SimpleModalModule=C,e.SimpleModalService=v,e.SimpleModalServiceConfig=m,e.defaultSimpleModalOptions=d,e.ɵa=h,e.ɵb=u,e.ɵc=y,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ngx-simple-modal.umd.min.js.map