angular-custom-modal - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

angular-custom-modal.es5.js

@@ -1,2 +0,2 @@
-import { ChangeDetectorRef, Component, ContentChild, ElementRef, HostListener, NgModule } from '@angular/core';
+import { ChangeDetectorRef, Component, ContentChild, ElementRef, HostListener, Input, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -12,2 +12,3 @@ /* tslint:disable:component-selector */
         this.changeDetectorRef = changeDetectorRef;
+        this.closeOnOutsideClick = true;
         this.visible = false;
@@ -52,3 +53,3 @@ this.visibleAnimate = false;
     ModalComponent.prototype.onContainerClicked = function (event) {
-        if (((event.target)).classList.contains('modal') && this.isTopMost()) {
+        if (((event.target)).classList.contains('modal') && this.isTopMost() && this.closeOnOutsideClick) {
             this.close();
@@ -94,2 +95,3 @@ }
     'footer': [{ type: ContentChild, args: ['modalFooter',] },],
+    'closeOnOutsideClick': [{ type: Input },],
     'onContainerClicked': [{ type: HostListener, args: ['click', ['$event'],] },],
@@ -96,0 +98,0 @@ 'onKeyDownHandler': [{ type: HostListener, args: ['document:keydown', ['$event'],] },],

angular-custom-modal.js

@@ -1,2 +0,2 @@
-import { ChangeDetectorRef, Component, ContentChild, ElementRef, HostListener, NgModule } from '@angular/core';
+import { ChangeDetectorRef, Component, ContentChild, ElementRef, HostListener, Input, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -13,2 +13,3 @@
         this.changeDetectorRef = changeDetectorRef;
+        this.closeOnOutsideClick = true;
         this.visible = false;
@@ -51,3 +52,3 @@ this.visibleAnimate = false;
     onContainerClicked(event) {
-        if (((event.target)).classList.contains('modal') && this.isTopMost()) {
+        if (((event.target)).classList.contains('modal') && this.isTopMost() && this.closeOnOutsideClick) {
             this.close();
@@ -144,2 +145,3 @@ }
     'footer': [{ type: ContentChild, args: ['modalFooter',] },],
+    'closeOnOutsideClick': [{ type: Input },],
     'onContainerClicked': [{ type: HostListener, args: ['click', ['$event'],] },],
@@ -146,0 +148,0 @@ 'onKeyDownHandler': [{ type: HostListener, args: ['document:keydown', ['$event'],] },],

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      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"}
+{"__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"]}]}],"closeOnOutsideClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__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

@@ -16,2 +16,3 @@ (function (global, factory) {
         this.changeDetectorRef = changeDetectorRef;
+        this.closeOnOutsideClick = true;
         this.visible = false;
@@ -56,3 +57,3 @@ this.visibleAnimate = false;
     ModalComponent.prototype.onContainerClicked = function (event) {
-        if (((event.target)).classList.contains('modal') && this.isTopMost()) {
+        if (((event.target)).classList.contains('modal') && this.isTopMost() && this.closeOnOutsideClick) {
             this.close();
@@ -98,2 +99,3 @@ }
     'footer': [{ type: core.ContentChild, args: ['modalFooter',] },],
+    'closeOnOutsideClick': [{ type: core.Input },],
     'onContainerClicked': [{ type: core.HostListener, args: ['click', ['$event'],] },],
@@ -100,0 +102,0 @@ 'onKeyDownHandler': [{ type: core.HostListener, args: ['document:keydown', ['$event'],] },],

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

@@ -1,2 +0,2 @@
-!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})});
+!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.closeOnOutsideClick=!0,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.closeOnOutsideClick&&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"]}],closeOnOutsideClick:[{type:n.Input}],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

@@ -8,2 +8,3 @@ import { OnDestroy, ElementRef, TemplateRef, ChangeDetectorRef } from '@angular/core';
     footer: TemplateRef<any>;
+    closeOnOutsideClick: boolean;
     visible: boolean;
@@ -10,0 +11,0 @@ visibleAnimate: 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.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"}
+{"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.2.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

@@ -139,2 +139,16 @@ # Angular Custom Modal
 
+## API
+
+### ModalComponent
+
+| Name | Type | Description |
+| ----| ----- | ----------- |
+| header | @ContentChild('modalHeader'): TemplateRef<any> | Angular Template (`<ng-template>`) to use as header. |
+| body | @ContentChild('modalBody'): TemplateRef<any> | Angular Template (`ng-template`) to use as body. |
+| footer | @ContentChild('modalFooter'): TemplateRef<any> | Angular Template (`ng-template`) to use as footer. |
+| closeOnOutsideClick | @Input(): boolean = true | When set to `true` modal will close when a click is performed outside the modal container. |
+open | () => void | Opens the modal.
+| close | () => void | Closes the modal. |
+| isTopMost | () => boolean | Returns true is the modal is the top most modal, or false if it is underneath another modal. |
+
 ## Special thanks
@@ -141,0 +155,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

65848

increased by4.03%

Lines of code

463

increased by1.76%

Number of lines in readme file

159

increased by9.66%

No dependency changes