angular-custom-modal - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

angular-custom-modal.es5.js

@@ -1,6 +0,12 @@
-import { Component, ContentChild, NgModule } from '@angular/core';
+import { ChangeDetectorRef, Component, ContentChild, ElementRef, HostListener, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 /* tslint:disable:component-selector */
 var ModalComponent = (function () {
-    function ModalComponent() {
+    /**
+     * @param {?} elementRef
+     * @param {?} changeDetectorRef
+     */
+    function ModalComponent(elementRef, changeDetectorRef) {
+        this.elementRef = elementRef;
+        this.changeDetectorRef = changeDetectorRef;
         this.visible = false;
@@ -22,5 +28,7 @@ this.visibleAnimate = false;
         var _this = this;
-        document.body.style.overflow = 'hidden';
+        document.body.classList.add('modal-open');
         this.visible = true;
-        setTimeout(function () { return _this.visibleAnimate = true; }, 200);
+        setTimeout(function () {
+            _this.visibleAnimate = true;
+        });
     };
@@ -32,5 +40,8 @@ /**
         var _this = this;
-        document.body.style.overflow = 'auto';
+        document.body.classList.remove('modal-open');
         this.visibleAnimate = false;
-        setTimeout(function () { return _this.visible = false; }, 100);
+        setTimeout(function () {
+            _this.visible = false;
+            _this.changeDetectorRef.markForCheck();
+        }, 200);
     };
@@ -42,6 +53,23 @@ /**
     ModalComponent.prototype.onContainerClicked = function (event) {
-        if (((event.target)).classList.contains('modal')) {
+        if (((event.target)).classList.contains('modal') && this.isTopMost()) {
             this.close();
         }
     };
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    ModalComponent.prototype.onKeyDownHandler = function (event) {
+        // If ESC key and TOP MOST modal, close it.
+        if (event.key === 'Escape' && this.isTopMost()) {
+            this.close();
+        }
+    };
+    /**
+     * Returns true if this modal is the top most modal.
+     * @return {?}
+     */
+    ModalComponent.prototype.isTopMost = function () {
+        return !this.elementRef.nativeElement.querySelector(':scope modal > .modal');
+    };
     return ModalComponent;
@@ -52,4 +80,4 @@ }());
                 selector: 'modal',
-                template: "\n    <div\n      (click)=\"onContainerClicked($event)\"\n      class=\"modal fade\"\n      tabindex=\"-1\"\n      [ngClass]=\"{'in': visibleAnimate}\"\n      [ngStyle]=\"{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}\"\n      *ngIf=\"visible\">\n      <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n          <div class=\"modal-header\">\n            <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n            <button class=\"close\" data-dismiss=\"modal\" type=\"button\" aria-label=\"Close\" (click)=\"close()\">\u00D7</button>\n          </div>\n          <div class=\"modal-body\">\n            <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n          </div>\n          <div class=\"modal-footer\">\n            <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n  ",
-                styles: ["\n    /deep/ .modal {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      min-height: 100%;\n      background-color: rgba(0, 0, 0, 0.15); }\n\n    /deep/ .modal-dialog {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      -webkit-transform: translate(-50%, -50%);\n              transform: translate(-50%, -50%); }\n  "],
+                template: "\n    <div \n      class=\"modal fade\"\n      role=\"dialog\"\n      tabindex=\"-1\"\n      [class.in]=\"visibleAnimate\"\n      *ngIf=\"visible\">\n      <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n          <div class=\"modal-header\">\n            <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n            <button class=\"close\" data-dismiss=\"modal\" type=\"button\" aria-label=\"Close\" (click)=\"close()\">\u00D7</button>\n          </div>\n          <div class=\"modal-body\">\n            <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n          </div>\n          <div class=\"modal-footer\">\n            <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n  ",
+                styles: ["\n    /**\n     * A more specific selector overwrites bootstrap display properties, but they still enable users\n     * to overwite them on their apps.\n     */\n    /deep/ modal .modal {\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-flex: 1;\n          -ms-flex: 1;\n              flex: 1;\n      -webkit-box-align: center;\n          -ms-flex-align: center;\n              align-items: center;\n      -webkit-box-pack: center;\n          -ms-flex-pack: center;\n              justify-content: center; }\n\n    /deep/ .modal {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      min-height: 100%;\n      background-color: rgba(0, 0, 0, 0.15);\n      z-index: 42; }\n\n    /deep/ .modal.in {\n      opacity: 1; }\n  "],
             },] },
@@ -60,3 +88,6 @@ ];
  */
-ModalComponent.ctorParameters = function () { return []; };
+ModalComponent.ctorParameters = function () { return [
+    { type: ElementRef, },
+    { type: ChangeDetectorRef, },
+]; };
 ModalComponent.propDecorators = {
@@ -66,2 +97,4 @@ 'header': [{ type: ContentChild, args: ['modalHeader',] },],
     'footer': [{ type: ContentChild, args: ['modalFooter',] },],
+    'onContainerClicked': [{ type: HostListener, args: ['click', ['$event'],] },],
+    'onKeyDownHandler': [{ type: HostListener, args: ['document:keydown', ['$event'],] },],
 };
@@ -68,0 +101,0 @@ var ModalModule = (function () {

angular-custom-modal.js

@@ -1,2 +0,2 @@
-import { Component, ContentChild, NgModule } from '@angular/core';
+import { ChangeDetectorRef, Component, ContentChild, ElementRef, HostListener, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -6,3 +6,9 @@
 class ModalComponent {
-    constructor() {
+    /**
+     * @param {?} elementRef
+     * @param {?} changeDetectorRef
+     */
+    constructor(elementRef, changeDetectorRef) {
+        this.elementRef = elementRef;
+        this.changeDetectorRef = changeDetectorRef;
         this.visible = false;
@@ -23,5 +29,7 @@ this.visibleAnimate = false;
     open() {
-        document.body.style.overflow = 'hidden';
+        document.body.classList.add('modal-open');
         this.visible = true;
-        setTimeout(() => this.visibleAnimate = true, 200);
+        setTimeout(() => {
+            this.visibleAnimate = true;
+        });
     }
@@ -32,5 +40,8 @@ /**
     close() {
-        document.body.style.overflow = 'auto';
+        document.body.classList.remove('modal-open');
         this.visibleAnimate = false;
-        setTimeout(() => this.visible = false, 100);
+        setTimeout(() => {
+            this.visible = false;
+            this.changeDetectorRef.markForCheck();
+        }, 200);
     }
@@ -42,6 +53,23 @@ /**
     onContainerClicked(event) {
-        if (((event.target)).classList.contains('modal')) {
+        if (((event.target)).classList.contains('modal') && this.isTopMost()) {
             this.close();
         }
     }
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    onKeyDownHandler(event) {
+        // If ESC key and TOP MOST modal, close it.
+        if (event.key === 'Escape' && this.isTopMost()) {
+            this.close();
+        }
+    }
+    /**
+     * Returns true if this modal is the top most modal.
+     * @return {?}
+     */
+    isTopMost() {
+        return !this.elementRef.nativeElement.querySelector(':scope modal > .modal');
+    }
 }
@@ -52,8 +80,7 @@ ModalComponent.decorators = [
                 template: `
-    <div
-      (click)="onContainerClicked($event)"
+    <div 
       class="modal fade"
+      role="dialog"
       tabindex="-1"
-      [ngClass]="{'in': visibleAnimate}"
-      [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}"
+      [class.in]="visibleAnimate"
       *ngIf="visible">
@@ -77,2 +104,20 @@ <div class="modal-dialog">
                 styles: [`
+    /**
+     * A more specific selector overwrites bootstrap display properties, but they still enable users
+     * to overwite them on their apps.
+     */
+    /deep/ modal .modal {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-flex: 1;
+          -ms-flex: 1;
+              flex: 1;
+      -webkit-box-align: center;
+          -ms-flex-align: center;
+              align-items: center;
+      -webkit-box-pack: center;
+          -ms-flex-pack: center;
+              justify-content: center; }
+
     /deep/ .modal {
@@ -84,10 +129,7 @@ position: fixed;
       min-height: 100%;
-      background-color: rgba(0, 0, 0, 0.15); }
+      background-color: rgba(0, 0, 0, 0.15);
+      z-index: 42; }
 
-    /deep/ .modal-dialog {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      -webkit-transform: translate(-50%, -50%);
-              transform: translate(-50%, -50%); }
+    /deep/ .modal.in {
+      opacity: 1; }
   `],
@@ -99,3 +141,6 @@ },] },
  */
-ModalComponent.ctorParameters = () => [];
+ModalComponent.ctorParameters = () => [
+    { type: ElementRef, },
+    { type: ChangeDetectorRef, },
+];
 ModalComponent.propDecorators = {
@@ -105,2 +150,4 @@ 'header': [{ type: ContentChild, args: ['modalHeader',] },],
     'footer': [{ type: ContentChild, args: ['modalFooter',] },],
+    'onContainerClicked': [{ type: HostListener, args: ['click', ['$event'],] },],
+    'onKeyDownHandler': [{ type: HostListener, args: ['document:keydown', ['$event'],] },],
 };
@@ -107,0 +154,0 @@

angular-custom-modal.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":3,"metadata":{"ModalComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"modal","template":"\n    <div\n      (click)=\"onContainerClicked($event)\"\n      class=\"modal fade\"\n      tabindex=\"-1\"\n      [ngClass]=\"{'in': visibleAnimate}\"\n      [ngStyle]=\"{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}\"\n      *ngIf=\"visible\">\n      <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n          <div class=\"modal-header\">\n            <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n            <button class=\"close\" data-dismiss=\"modal\" type=\"button\" aria-label=\"Close\" (click)=\"close()\">×</button>\n          </div>\n          <div class=\"modal-body\">\n            <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n          </div>\n          <div class=\"modal-footer\">\n            <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n  ","styles":["\n    /deep/ .modal {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      min-height: 100%;\n      background-color: rgba(0, 0, 0, 0.15); }\n\n    /deep/ .modal-dialog {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      -webkit-transform: translate(-50%, -50%);\n              transform: translate(-50%, -50%); }\n  "]}]}],"members":{"header":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["modalHeader"]}]}],"body":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["modalBody"]}]}],"footer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["modalFooter"]}]}],"ngOnDestroy":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"onContainerClicked":[{"__symbolic":"method"}]}},"ModalModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"exports":[{"__symbolic":"reference","name":"ModalComponent"}],"declarations":[{"__symbolic":"reference","name":"ModalComponent"}],"providers":[]}]}],"members":{}}},"origins":{"ModalComponent":"./modal.component","ModalModule":"./modal.module"},"importAs":"angular-custom-modal"}
+{"__symbolic":"module","version":3,"metadata":{"ModalComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"modal","template":"\n    <div \n      class=\"modal fade\"\n      role=\"dialog\"\n      tabindex=\"-1\"\n      [class.in]=\"visibleAnimate\"\n      *ngIf=\"visible\">\n      <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n          <div class=\"modal-header\">\n            <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n            <button class=\"close\" data-dismiss=\"modal\" type=\"button\" aria-label=\"Close\" (click)=\"close()\">×</button>\n          </div>\n          <div class=\"modal-body\">\n            <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n          </div>\n          <div class=\"modal-footer\">\n            <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n  ","styles":["\n    /**\n     * A more specific selector overwrites bootstrap display properties, but they still enable users\n     * to overwite them on their apps.\n     */\n    /deep/ modal .modal {\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-flex: 1;\n          -ms-flex: 1;\n              flex: 1;\n      -webkit-box-align: center;\n          -ms-flex-align: center;\n              align-items: center;\n      -webkit-box-pack: center;\n          -ms-flex-pack: center;\n              justify-content: center; }\n\n    /deep/ .modal {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      min-height: 100%;\n      background-color: rgba(0, 0, 0, 0.15);\n      z-index: 42; }\n\n    /deep/ .modal.in {\n      opacity: 1; }\n  "]}]}],"members":{"header":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["modalHeader"]}]}],"body":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["modalBody"]}]}],"footer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["modalFooter"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngOnDestroy":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"onContainerClicked":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["click",["$event"]]}]}],"onKeyDownHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:keydown",["$event"]]}]}],"isTopMost":[{"__symbolic":"method"}]}},"ModalModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"exports":[{"__symbolic":"reference","name":"ModalComponent"}],"declarations":[{"__symbolic":"reference","name":"ModalComponent"}],"providers":[]}]}],"members":{}}},"origins":{"ModalComponent":"./modal.component","ModalModule":"./modal.module"},"importAs":"angular-custom-modal"}

bundles/angular-custom-modal.umd.js

@@ -9,3 +9,9 @@ (function (global, factory) {
 var ModalComponent = (function () {
-    function ModalComponent() {
+    /**
+     * @param {?} elementRef
+     * @param {?} changeDetectorRef
+     */
+    function ModalComponent(elementRef, changeDetectorRef) {
+        this.elementRef = elementRef;
+        this.changeDetectorRef = changeDetectorRef;
         this.visible = false;
@@ -27,5 +33,7 @@ this.visibleAnimate = false;
         var _this = this;
-        document.body.style.overflow = 'hidden';
+        document.body.classList.add('modal-open');
         this.visible = true;
-        setTimeout(function () { return _this.visibleAnimate = true; }, 200);
+        setTimeout(function () {
+            _this.visibleAnimate = true;
+        });
     };
@@ -37,5 +45,8 @@ /**
         var _this = this;
-        document.body.style.overflow = 'auto';
+        document.body.classList.remove('modal-open');
         this.visibleAnimate = false;
-        setTimeout(function () { return _this.visible = false; }, 100);
+        setTimeout(function () {
+            _this.visible = false;
+            _this.changeDetectorRef.markForCheck();
+        }, 200);
     };
@@ -47,6 +58,23 @@ /**
     ModalComponent.prototype.onContainerClicked = function (event) {
-        if (((event.target)).classList.contains('modal')) {
+        if (((event.target)).classList.contains('modal') && this.isTopMost()) {
             this.close();
         }
     };
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    ModalComponent.prototype.onKeyDownHandler = function (event) {
+        // If ESC key and TOP MOST modal, close it.
+        if (event.key === 'Escape' && this.isTopMost()) {
+            this.close();
+        }
+    };
+    /**
+     * Returns true if this modal is the top most modal.
+     * @return {?}
+     */
+    ModalComponent.prototype.isTopMost = function () {
+        return !this.elementRef.nativeElement.querySelector(':scope modal > .modal');
+    };
     return ModalComponent;
@@ -57,4 +85,4 @@ }());
                 selector: 'modal',
-                template: "\n    <div\n      (click)=\"onContainerClicked($event)\"\n      class=\"modal fade\"\n      tabindex=\"-1\"\n      [ngClass]=\"{'in': visibleAnimate}\"\n      [ngStyle]=\"{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}\"\n      *ngIf=\"visible\">\n      <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n          <div class=\"modal-header\">\n            <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n            <button class=\"close\" data-dismiss=\"modal\" type=\"button\" aria-label=\"Close\" (click)=\"close()\">\u00D7</button>\n          </div>\n          <div class=\"modal-body\">\n            <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n          </div>\n          <div class=\"modal-footer\">\n            <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n  ",
-                styles: ["\n    /deep/ .modal {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      min-height: 100%;\n      background-color: rgba(0, 0, 0, 0.15); }\n\n    /deep/ .modal-dialog {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      -webkit-transform: translate(-50%, -50%);\n              transform: translate(-50%, -50%); }\n  "],
+                template: "\n    <div \n      class=\"modal fade\"\n      role=\"dialog\"\n      tabindex=\"-1\"\n      [class.in]=\"visibleAnimate\"\n      *ngIf=\"visible\">\n      <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n          <div class=\"modal-header\">\n            <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n            <button class=\"close\" data-dismiss=\"modal\" type=\"button\" aria-label=\"Close\" (click)=\"close()\">\u00D7</button>\n          </div>\n          <div class=\"modal-body\">\n            <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n          </div>\n          <div class=\"modal-footer\">\n            <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n  ",
+                styles: ["\n    /**\n     * A more specific selector overwrites bootstrap display properties, but they still enable users\n     * to overwite them on their apps.\n     */\n    /deep/ modal .modal {\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-flex: 1;\n          -ms-flex: 1;\n              flex: 1;\n      -webkit-box-align: center;\n          -ms-flex-align: center;\n              align-items: center;\n      -webkit-box-pack: center;\n          -ms-flex-pack: center;\n              justify-content: center; }\n\n    /deep/ .modal {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      min-height: 100%;\n      background-color: rgba(0, 0, 0, 0.15);\n      z-index: 42; }\n\n    /deep/ .modal.in {\n      opacity: 1; }\n  "],
             },] },
@@ -65,3 +93,6 @@ ];
  */
-ModalComponent.ctorParameters = function () { return []; };
+ModalComponent.ctorParameters = function () { return [
+    { type: core.ElementRef, },
+    { type: core.ChangeDetectorRef, },
+]; };
 ModalComponent.propDecorators = {
@@ -71,2 +102,4 @@ 'header': [{ type: core.ContentChild, args: ['modalHeader',] },],
     'footer': [{ type: core.ContentChild, args: ['modalFooter',] },],
+    'onContainerClicked': [{ type: core.HostListener, args: ['click', ['$event'],] },],
+    'onKeyDownHandler': [{ type: core.HostListener, args: ['document:keydown', ['$event'],] },],
 };
@@ -73,0 +106,0 @@ var ModalModule = (function () {

bundles/angular-custom-modal.umd.min.js

@@ -1,2 +0,2 @@
-!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common"],e):e(n["angular-custom-modal"]={},n.ng.core,n.ng.common)}(this,function(n,e,o){"use strict";var t=function(){function n(){this.visible=!1,this.visibleAnimate=!1}return n.prototype.ngOnDestroy=function(){this.close()},n.prototype.open=function(){var n=this;document.body.style.overflow="hidden",this.visible=!0,setTimeout(function(){return n.visibleAnimate=!0},200)},n.prototype.close=function(){var n=this;document.body.style.overflow="auto",this.visibleAnimate=!1,setTimeout(function(){return n.visible=!1},100)},n.prototype.onContainerClicked=function(n){n.target.classList.contains("modal")&&this.close()},n}();t.decorators=[{type:e.Component,args:[{selector:"modal",template:'\n    <div\n      (click)="onContainerClicked($event)"\n      class="modal fade"\n      tabindex="-1"\n      [ngClass]="{\'in\': visibleAnimate}"\n      [ngStyle]="{\'display\': visible ? \'block\' : \'none\', \'opacity\': visibleAnimate ? 1 : 0}"\n      *ngIf="visible">\n      <div class="modal-dialog">\n        <div class="modal-content">\n          <div class="modal-header">\n            <ng-container *ngTemplateOutlet="header"></ng-container>\n            <button class="close" data-dismiss="modal" type="button" aria-label="Close" (click)="close()">×</button>\n          </div>\n          <div class="modal-body">\n            <ng-container *ngTemplateOutlet="body"></ng-container>\n          </div>\n          <div class="modal-footer">\n            <ng-container *ngTemplateOutlet="footer"></ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n  ',styles:["\n    /deep/ .modal {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      min-height: 100%;\n      background-color: rgba(0, 0, 0, 0.15); }\n\n    /deep/ .modal-dialog {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      -webkit-transform: translate(-50%, -50%);\n              transform: translate(-50%, -50%); }\n  "]}]}],t.ctorParameters=function(){return[]},t.propDecorators={header:[{type:e.ContentChild,args:["modalHeader"]}],body:[{type:e.ContentChild,args:["modalBody"]}],footer:[{type:e.ContentChild,args:["modalFooter"]}]};var i=function(){return function(){}}();i.decorators=[{type:e.NgModule,args:[{imports:[o.CommonModule],exports:[t],declarations:[t],providers:[]}]}],i.ctorParameters=function(){return[]},n.ModalComponent=t,n.ModalModule=i,Object.defineProperty(n,"__esModule",{value:!0})});
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common"],n):n(e["angular-custom-modal"]={},e.ng.core,e.ng.common)}(this,function(e,n,t){"use strict";var o=function(){function e(e,n){this.elementRef=e,this.changeDetectorRef=n,this.visible=!1,this.visibleAnimate=!1}return e.prototype.ngOnDestroy=function(){this.close()},e.prototype.open=function(){var e=this;document.body.classList.add("modal-open"),this.visible=!0,setTimeout(function(){e.visibleAnimate=!0})},e.prototype.close=function(){var e=this;document.body.classList.remove("modal-open"),this.visibleAnimate=!1,setTimeout(function(){e.visible=!1,e.changeDetectorRef.markForCheck()},200)},e.prototype.onContainerClicked=function(e){e.target.classList.contains("modal")&&this.isTopMost()&&this.close()},e.prototype.onKeyDownHandler=function(e){"Escape"===e.key&&this.isTopMost()&&this.close()},e.prototype.isTopMost=function(){return!this.elementRef.nativeElement.querySelector(":scope modal > .modal")},e}();o.decorators=[{type:n.Component,args:[{selector:"modal",template:'\n    <div \n      class="modal fade"\n      role="dialog"\n      tabindex="-1"\n      [class.in]="visibleAnimate"\n      *ngIf="visible">\n      <div class="modal-dialog">\n        <div class="modal-content">\n          <div class="modal-header">\n            <ng-container *ngTemplateOutlet="header"></ng-container>\n            <button class="close" data-dismiss="modal" type="button" aria-label="Close" (click)="close()">×</button>\n          </div>\n          <div class="modal-body">\n            <ng-container *ngTemplateOutlet="body"></ng-container>\n          </div>\n          <div class="modal-footer">\n            <ng-container *ngTemplateOutlet="footer"></ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n  ',styles:["\n    /**\n     * A more specific selector overwrites bootstrap display properties, but they still enable users\n     * to overwite them on their apps.\n     */\n    /deep/ modal .modal {\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-flex: 1;\n          -ms-flex: 1;\n              flex: 1;\n      -webkit-box-align: center;\n          -ms-flex-align: center;\n              align-items: center;\n      -webkit-box-pack: center;\n          -ms-flex-pack: center;\n              justify-content: center; }\n\n    /deep/ .modal {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      min-height: 100%;\n      background-color: rgba(0, 0, 0, 0.15);\n      z-index: 42; }\n\n    /deep/ .modal.in {\n      opacity: 1; }\n  "]}]}],o.ctorParameters=function(){return[{type:n.ElementRef},{type:n.ChangeDetectorRef}]},o.propDecorators={header:[{type:n.ContentChild,args:["modalHeader"]}],body:[{type:n.ContentChild,args:["modalBody"]}],footer:[{type:n.ContentChild,args:["modalFooter"]}],onContainerClicked:[{type:n.HostListener,args:["click",["$event"]]}],onKeyDownHandler:[{type:n.HostListener,args:["document:keydown",["$event"]]}]};var i=function(){return function(){}}();i.decorators=[{type:n.NgModule,args:[{imports:[t.CommonModule],exports:[o],declarations:[o],providers:[]}]}],i.ctorParameters=function(){return[]},e.ModalComponent=o,e.ModalModule=i,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=angular-custom-modal.umd.min.js.map

modal.component.d.ts

@@ -1,3 +0,5 @@
-import { OnDestroy, TemplateRef } from '@angular/core';
+import { OnDestroy, ElementRef, TemplateRef, ChangeDetectorRef } from '@angular/core';
 export declare class ModalComponent implements OnDestroy {
+    private elementRef;
+    private changeDetectorRef;
     header: TemplateRef<any>;
@@ -8,2 +10,3 @@ body: TemplateRef<any>;
     visibleAnimate: boolean;
+    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef);
     ngOnDestroy(): void;
@@ -13,2 +16,7 @@ open(): void;
     onContainerClicked(event: MouseEvent): void;
+    onKeyDownHandler(event: KeyboardEvent): void;
+    /**
+     * Returns true if this modal is the top most modal.
+     */
+    isTopMost(): boolean;
 }

package.json

@@ -1,1 +0,1 @@
-{"name":"angular-custom-modal","description":"Angular2+ Modal / Dialog (with inner component support).","author":{"name":"Gerard Rovira Sánchez","email":"[e-mail]","url":"zurfyx.com"},"version":"1.0.0","license":"MIT","scripts":{"start":"ng serve","build":"ng-packagr -p ng-package.json","build-ghpages":"ng build --base-href \"https://zurfyx.github.io/angular-custom-modal/\" --output-path \"dist-ghpages\"","test":"npm run lint && ng test --watch false","test-watch":"ng test","e2e":"ng e2e","lint":"ng lint"},"repository":{"type":"git","url":"git+https://github.com/zurfyx/angular-custom-modal.git"},"bugs":{"url":"https://github.com/zurfyx/angular-custom-modal/issues"},"homepage":"https://github.com/zurfyx/angular-custom-modal#readme","keywords":["modal","dialog","angular","typescript"],"private":false,"dependencies":{},"devDependencies":{"@angular/animations":"^4.2.4","@angular/cli":"1.4.9","@angular/common":"^4.2.4","@angular/compiler":"^4.2.4","@angular/compiler-cli":"^4.2.4","@angular/core":"^4.2.4","@angular/forms":"^4.2.4","@angular/http":"^4.2.4","@angular/language-service":"^4.2.4","@angular/platform-browser":"^4.2.4","@angular/platform-browser-dynamic":"^4.2.4","@angular/router":"^4.2.4","@types/jasmine":"~2.5.53","@types/jasminewd2":"~2.0.2","@types/node":"~6.0.60","codelyzer":"~3.2.0","core-js":"^2.4.1","jasmine-core":"~2.6.2","jasmine-spec-reporter":"~4.1.0","karma":"~1.7.0","karma-chrome-launcher":"~2.1.1","karma-cli":"~1.0.1","karma-coverage-istanbul-reporter":"^1.2.1","karma-jasmine":"~1.1.0","karma-jasmine-html-reporter":"^0.2.2","ng-packagr":"^1.5.0-rc.1","protractor":"~5.1.2","rxjs":"^5.4.2","ts-node":"~3.2.0","tslint":"~5.7.0","typescript":"~2.3.3","zone.js":"^0.8.14"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"main":"bundles/angular-custom-modal.umd.js","module":"angular-custom-modal.es5.js","es2015":"angular-custom-modal.js","typings":"angular-custom-modal.d.ts","metadata":"angular-custom-modal.metadata.json"}
+{"name":"angular-custom-modal","description":"Angular2+ Modal / Dialog (with inner component support).","author":{"name":"Gerard Rovira Sánchez","email":"[e-mail]","url":"zurfyx.com"},"version":"1.1.0","license":"MIT","main":"bundles/angular-custom-modal.umd.js","scripts":{"start":"ng serve","build":"ng-packagr -p ng-package.json","build-ghpages":"ng build --base-href \"https://zurfyx.github.io/angular-custom-modal/\" --output-path \"dist-ghpages\"","test":"npm run lint && ng test --watch false","test-watch":"ng test","e2e":"ng e2e","lint":"ng lint"},"repository":{"type":"git","url":"git+https://github.com/zurfyx/angular-custom-modal.git"},"bugs":{"url":"https://github.com/zurfyx/angular-custom-modal/issues"},"homepage":"https://github.com/zurfyx/angular-custom-modal#readme","keywords":["modal","dialog","angular","typescript"],"private":false,"dependencies":{},"devDependencies":{"@angular/animations":"^4.2.4","@angular/cli":"1.4.9","@angular/common":"^4.2.4","@angular/compiler":"^4.2.4","@angular/compiler-cli":"^4.2.4","@angular/core":"^4.2.4","@angular/forms":"^4.2.4","@angular/http":"^4.2.4","@angular/language-service":"^4.2.4","@angular/platform-browser":"^4.2.4","@angular/platform-browser-dynamic":"^4.2.4","@angular/router":"^4.2.4","@types/jasmine":"~2.5.53","@types/jasminewd2":"~2.0.2","@types/node":"~6.0.60","codelyzer":"~3.2.0","core-js":"^2.4.1","jasmine-core":"~2.6.2","jasmine-spec-reporter":"~4.1.0","karma":"~1.7.0","karma-chrome-launcher":"~2.1.1","karma-cli":"~1.0.1","karma-coverage-istanbul-reporter":"^1.2.1","karma-jasmine":"~1.1.0","karma-jasmine-html-reporter":"^0.2.2","ng-packagr":"^1.5.0-rc.1","protractor":"~5.1.2","rxjs":"^5.4.2","ts-node":"~3.2.0","tslint":"~5.7.0","typescript":"~2.3.3","zone.js":"^0.8.14"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"module":"angular-custom-modal.es5.js","es2015":"angular-custom-modal.js","typings":"angular-custom-modal.d.ts","metadata":"angular-custom-modal.metadata.json"}

README.md

@@ -22,9 +22,16 @@ # Angular Custom Modal
 
+Core:
+
 - Light: no CSS / JS frameworks attached
-- Bootstrap CSS compatible
+- [Bootstrap 3 & 4 CSS compatible](#bootstrap)
 - Custom modal header, body and header
-- Modal stacking support
+- [Modal stacking support](#nested-modal)
 - Lazy inner component initialization, and `ngOnDestroy`(ed) when modal is closed
-- Parent scrolling disabled when modal is visible
 
+Minor:
+
+- Optional CSS animations
+- Optional parent scrolling when modal is visible
+- Escape or button to close modal
+
 ## Usage
@@ -89,2 +96,20 @@
 
+### Nested Modal
+
+app.component.html
+
+```
+<modal #nestedModal>
+  <ng-template #modalHeader><h2>Nested modal</h2></ng-template>
+  <ng-template #modalBody>
+    Nested modals can be created by simply adding a &lt;modal&gt; inside a &lt;modal&gt;
+    ...
+    <button (click)="nestedModalX.open()">Open nested modal</button>
+    <modal #nestedModalX>
+      <ng-template #modalBody>This is the nested modal content.</ng-template>
+    </modal>
+  </ng-template>
+</modal>
+```
+
 See [example source code](https://github.com/zurfyx/angular-custom-modal/tree/master/example/app) for more information.
@@ -104,9 +129,14 @@
 
-## TODO
+## Styles
 
-- [ ] Modal header/body/footer as a component or directive (not sure if feasable)
-- [ ] Optional styles
-- [ ] Optional scrolling when modal is active
-- [ ] Optional visibility
+The library carries the minimum generic styles. Beautifying it is up to you.
 
+### Default styles
+
+You can find the demo copy-paste styles in [modal.css](https://github.com/zurfyx/angular-custom-modal/blob/master/example/app/modal.css).
+
+### Bootstrap
+
+Bootstrap users require no additional CSS other than the Bootstrap library (either version 3 or 4).
+
 ## Special thanks
@@ -113,0 +143,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

63297

increased by32.2%

Lines of code

455

increased by37.46%

Number of lines in readme file

145

increased by26.09%

No dependency changes