ngx-modal-dialog - npm Package Compare versions

Comparing version 2.0.1 to 2.1.0

bundles/ngx-modal.umd.js

@@ -147,2 +147,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
         this.animateModalClass = '';
+        this.showOverlay = false;
         this._inProgress = false;
@@ -304,3 +305,3 @@ }
         styles: ["\n      @-moz-keyframes shake {\n        from, to                { transform: translate3d(0, 0, 0); }\n        10%, 30%, 50%, 70%, 90% { transform: translate3d(-2rem, 0, 0); }\n        20%, 40%, 60%, 80%      { transform: translate3d(2rem, 0, 0); }\n      }\n      @-webkit-keyframes shake {\n        from, to                { transform: translate3d(0, 0, 0); }\n        10%, 30%, 50%, 70%, 90% { transform: translate3d(-2rem, 0, 0); }\n        20%, 40%, 60%, 80%      { transform: translate3d(2rem, 0, 0); }\n      }\n      @keyframes shake {\n        from, to                { transform: translate3d(0, 0, 0); }\n        10%, 30%, 50%, 70%, 90% { transform: translate3d(-2rem, 0, 0); }\n        20%, 40%, 60%, 80%      { transform: translate3d(2rem, 0, 0); }\n      }\n\n      .ngx-modal {\n        display: flex;\n      }\n      .ngx-modal-shake {\n        backface-visibility: hidden;\n        -webkit-animation-duration: 0.5s;\n        -moz-animation-duration: 0.5s;\n        animation-duration: 0.5s;\n        -webkit-animation-fill-mode: both;\n        -moz-animation-fill-mode: both;\n        animation-fill-mode: both;\n        -webkit-animation-iteration-count: infinite;\n        -moz-animation-iteration-count: infinite;\n        animation-iteration-count: infinite;\n        -webkit-animation-name: shake;\n        -moz-animation-name: shake;\n        animation-name: shake;\n      }\n  "],
-        template: "\n    <div *ngIf=\"settings.overlayClass\" [ngClass]=\"[settings.overlayClass, animateOverlayClass]\"\n         (click)=\"(!actionButtons || !actionButtons.length) && close()\"></div>\n    <div [ngClass]=\"[settings.modalClass, animateModalClass]\">\n      <div [ngClass]=\"settings.modalDialogClass\">\n        <div [ngClass]=\"[ showAlert ? settings.alertClass : '', settings.contentClass]\">\n          <div [ngClass]=\"settings.headerClass\">\n            <h4 [ngClass]=\"settings.headerTitleClass\">{{title}}</h4>\n            <button (click)=\"close()\" *ngIf=\"!actionButtons || !actionButtons.length\" type=\"button\"\n                    [title]=\"settings.closeButtonTitle\"\n                    [ngClass]=\"settings.closeButtonClass\">\n            </button>\n          </div>\n          <div [ngClass]=\"settings.bodyClass\">\n            <i #modalDialogBody></i>\n          </div>\n          <div [ngClass]=\"settings.footerClass\" *ngIf=\"actionButtons && actionButtons.length\">\n            <button *ngFor=\"let button of actionButtons\" (click)=\"doAction(button.onAction)\"\n                    [ngClass]=\"button.buttonClass || settings.buttonClass\">{{button.text}}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  "
+        template: "\n    <div *ngIf=\"settings.overlayClass && showOverlay\" [ngClass]=\"[settings.overlayClass, animateOverlayClass]\"\n         (click)=\"close()\"></div> \n    <div [ngClass]=\"[settings.modalClass, animateModalClass]\">\n      <div [ngClass]=\"settings.modalDialogClass\">\n        <div [ngClass]=\"[ showAlert ? settings.alertClass : '', settings.contentClass]\">\n          <div [ngClass]=\"settings.headerClass\">\n            <h4 [ngClass]=\"settings.headerTitleClass\">{{title}}</h4>\n            <button (click)=\"close()\" *ngIf=\"!actionButtons || !actionButtons.length\" type=\"button\"\n                    [title]=\"settings.closeButtonTitle\"\n                    [ngClass]=\"settings.closeButtonClass\">\n            </button>\n          </div>\n          <div [ngClass]=\"settings.bodyClass\">\n            <i #modalDialogBody></i>\n          </div>\n          <div [ngClass]=\"settings.footerClass\" *ngIf=\"actionButtons && actionButtons.length\">\n            <button *ngFor=\"let button of actionButtons\" (click)=\"doAction(button.onAction)\"\n                    [ngClass]=\"button.buttonClass || settings.buttonClass\">{{button.text}}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  "
     }),
@@ -354,3 +355,5 @@ __metadata("design:paramtypes", [__WEBPACK_IMPORTED_MODULE_0__angular_core__["ComponentFactoryResolver"]])
         if (options === void 0) { options = {}; }
-        this.modalDialogInstanceService.closeAnyExistingModalDialog();
+        if (!options.placeOnTop) {
+            this.modalDialogInstanceService.closeAnyExistingModalDialog();
+        }
         var factory = this.componentFactoryResolver.resolveComponentFactory(__WEBPACK_IMPORTED_MODULE_1__modal_dialog_component__["a" /* ModalDialogComponent */]);
@@ -380,2 +383,6 @@ var componentRef = target.createComponent(factory);
     function ModalDialogInstanceService() {
+        /**
+         * Used to make sure there is exactly one instance of Modal Dialog
+         */
+        this.componentRefs = [];
     }
@@ -386,4 +393,8 @@ /**
     ModalDialogInstanceService.prototype.closeAnyExistingModalDialog = function () {
-        if (this.componentRef) {
-            this.componentRef.destroy();
+        // tslint:disable-next-line
+        console.log(1);
+        while (this.componentRefs.length) {
+            // tslint:disable-next-line
+            console.log(2);
+            this.componentRefs[this.componentRefs.length - 1].destroy();
         }
@@ -396,4 +407,18 @@ };
     ModalDialogInstanceService.prototype.saveExistingModalDialog = function (componentRef) {
-        this.componentRef = componentRef;
+        var _this = this;
+        // remove overlay from top element
+        this.setOverlayForTopDialog(false);
+        // add new component
+        this.componentRefs = this.componentRefs.concat([componentRef]);
+        componentRef.instance.showOverlay = true;
+        componentRef.onDestroy(function () {
+            _this.componentRefs.pop();
+            _this.setOverlayForTopDialog(true);
+        });
     };
+    ModalDialogInstanceService.prototype.setOverlayForTopDialog = function (value) {
+        if (this.componentRefs.length) {
+            this.componentRefs[this.componentRefs.length - 1].instance.showOverlay = value;
+        }
+    };
     return ModalDialogInstanceService;
@@ -455,3 +480,5 @@ }());
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__src_modal_dialog_module__ = __webpack_require__(6);
-/* harmony namespace reexport (by provided) */ __webpack_require__.d(__webpack_exports__, "ModalDialogModule", function() { return __WEBPACK_IMPORTED_MODULE_0__src_modal_dialog_module__["a"]; });
+/* harmony namespace reexport (by provided) */ __webpack_require__.d(__webpack_exports__, "MODAL_DIALOG_FORROOT_GUARD", function() { return __WEBPACK_IMPORTED_MODULE_0__src_modal_dialog_module__["a"]; });
+/* harmony namespace reexport (by provided) */ __webpack_require__.d(__webpack_exports__, "ModalDialogModule", function() { return __WEBPACK_IMPORTED_MODULE_0__src_modal_dialog_module__["b"]; });
+/* harmony namespace reexport (by provided) */ __webpack_require__.d(__webpack_exports__, "provideForRootGuard", function() { return __WEBPACK_IMPORTED_MODULE_0__src_modal_dialog_module__["c"]; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__src_modal_dialog_service__ = __webpack_require__(2);
@@ -474,3 +501,5 @@ /* harmony namespace reexport (by provided) */ __webpack_require__.d(__webpack_exports__, "ModalDialogService", function() { return __WEBPACK_IMPORTED_MODULE_1__src_modal_dialog_service__["a"]; });
 "use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ModalDialogModule; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return MODAL_DIALOG_FORROOT_GUARD; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return ModalDialogModule; });
+/* harmony export (immutable) */ __webpack_exports__["c"] = provideForRootGuard;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__modal_dialog_component__ = __webpack_require__(1);
@@ -498,2 +527,7 @@ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__modal_dialog_service__ = __webpack_require__(2);
 
+/**
+ * Guard to make sure we have single initialization of forRoot
+ * @type {InjectionToken<ModalDialogModule>}
+ */
+var MODAL_DIALOG_FORROOT_GUARD = new __WEBPACK_IMPORTED_MODULE_5__angular_core__["InjectionToken"]('MODAL_DIALOG_FORROOT_GUARD');
 var ModalDialogModule = ModalDialogModule_1 = (function () {
@@ -505,3 +539,10 @@ function ModalDialogModule() {
             ngModule: ModalDialogModule_1,
-            providers: [__WEBPACK_IMPORTED_MODULE_3__modal_dialog_instance_service__["a" /* ModalDialogInstanceService */]]
+            providers: [
+                {
+                    provide: MODAL_DIALOG_FORROOT_GUARD,
+                    useFactory: provideForRootGuard,
+                    deps: [[ModalDialogModule_1, new __WEBPACK_IMPORTED_MODULE_5__angular_core__["Optional"](), new __WEBPACK_IMPORTED_MODULE_5__angular_core__["SkipSelf"]()]]
+                },
+                __WEBPACK_IMPORTED_MODULE_3__modal_dialog_instance_service__["a" /* ModalDialogInstanceService */]
+            ]
         };
@@ -521,2 +562,12 @@ };
 
+/**
+ * @param dialogModule
+ * @returns {string}
+ */
+function provideForRootGuard(dialogModule) {
+    if (dialogModule) {
+        throw new Error("ModalDialogModule.forRoot() called twice.");
+    }
+    return 'guarded';
+}
 var ModalDialogModule_1;
@@ -523,0 +574,0 @@

package.json

 {
   "name": "ngx-modal-dialog",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Dynamic modal dialog for Angular",
@@ -5,0 +5,0 @@ "scripts": {

README.md

@@ -129,2 +129,3 @@ # ngx-modal-dialog
   data: T;
+  placeOnTop: boolean;
   settings: IModalDialogSettings;
@@ -153,2 +154,6 @@ closeDialogSubject: Subject<void>;
 
+- placeOnTop: `boolean`
+Flag stating whether opening the modal dialog should close all the other modal dialogs, or modal should be rendered on top of existing ones.
+
+
 - settings: `IModalDialogSettings`  
@@ -155,0 +160,0 @@ Additional settings for granular configuration of modal dialog. See [IModalDialogSettings](#imodaldialogsettings).

src/modal-dialog-instance.service.d.ts

@@ -7,3 +7,3 @@ import { ComponentRef } from '@angular/core';
      */
-    private componentRef;
+    private componentRefs;
     /**
@@ -18,2 +18,3 @@ * Closes existing modal dialog
     saveExistingModalDialog(componentRef: ComponentRef<ModalDialogComponent>): void;
+    setOverlayForTopDialog(value: boolean): void;
 }

src/modal-dialog-instance.service.js

 var ModalDialogInstanceService = (function () {
     function ModalDialogInstanceService() {
+        /**
+         * Used to make sure there is exactly one instance of Modal Dialog
+         */
+        this.componentRefs = [];
     }
@@ -8,4 +12,8 @@ /**
     ModalDialogInstanceService.prototype.closeAnyExistingModalDialog = function () {
-        if (this.componentRef) {
-            this.componentRef.destroy();
+        // tslint:disable-next-line
+        console.log(1);
+        while (this.componentRefs.length) {
+            // tslint:disable-next-line
+            console.log(2);
+            this.componentRefs[this.componentRefs.length - 1].destroy();
         }
@@ -18,6 +26,20 @@ };
     ModalDialogInstanceService.prototype.saveExistingModalDialog = function (componentRef) {
-        this.componentRef = componentRef;
+        var _this = this;
+        // remove overlay from top element
+        this.setOverlayForTopDialog(false);
+        // add new component
+        this.componentRefs = this.componentRefs.concat([componentRef]);
+        componentRef.instance.showOverlay = true;
+        componentRef.onDestroy(function () {
+            _this.componentRefs.pop();
+            _this.setOverlayForTopDialog(true);
+        });
     };
+    ModalDialogInstanceService.prototype.setOverlayForTopDialog = function (value) {
+        if (this.componentRefs.length) {
+            this.componentRefs[this.componentRefs.length - 1].instance.showOverlay = value;
+        }
+    };
     return ModalDialogInstanceService;
 }());
 export { ModalDialogInstanceService };

src/modal-dialog-instance.service.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"ModalDialogInstanceService":{"__symbolic":"class","members":{"closeAnyExistingModalDialog":[{"__symbolic":"method"}],"saveExistingModalDialog":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"ModalDialogInstanceService":{"__symbolic":"class","members":{"closeAnyExistingModalDialog":[{"__symbolic":"method"}],"saveExistingModalDialog":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"ModalDialogInstanceService":{"__symbolic":"class","members":{"closeAnyExistingModalDialog":[{"__symbolic":"method"}],"saveExistingModalDialog":[{"__symbolic":"method"}],"setOverlayForTopDialog":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"ModalDialogInstanceService":{"__symbolic":"class","members":{"closeAnyExistingModalDialog":[{"__symbolic":"method"}],"saveExistingModalDialog":[{"__symbolic":"method"}],"setOverlayForTopDialog":[{"__symbolic":"method"}]}}}}]

src/modal-dialog.component.d.ts

@@ -19,2 +19,3 @@ import { ComponentRef, ComponentFactoryResolver, ViewContainerRef, OnDestroy, OnInit } from '@angular/core';
     animateModalClass: string;
+    showOverlay: boolean;
     private _inProgress;
@@ -21,0 +22,0 @@ private _alertTimeout;

src/modal-dialog.component.js

@@ -39,2 +39,3 @@ import { Component, ComponentFactoryResolver, ViewContainerRef, ViewChild } from '@angular/core';
         this.animateModalClass = '';
+        this.showOverlay = false;
         this._inProgress = false;
@@ -193,3 +194,3 @@ }
                 styles: ["\n      @-moz-keyframes shake {\n        from, to                { transform: translate3d(0, 0, 0); }\n        10%, 30%, 50%, 70%, 90% { transform: translate3d(-2rem, 0, 0); }\n        20%, 40%, 60%, 80%      { transform: translate3d(2rem, 0, 0); }\n      }\n      @-webkit-keyframes shake {\n        from, to                { transform: translate3d(0, 0, 0); }\n        10%, 30%, 50%, 70%, 90% { transform: translate3d(-2rem, 0, 0); }\n        20%, 40%, 60%, 80%      { transform: translate3d(2rem, 0, 0); }\n      }\n      @keyframes shake {\n        from, to                { transform: translate3d(0, 0, 0); }\n        10%, 30%, 50%, 70%, 90% { transform: translate3d(-2rem, 0, 0); }\n        20%, 40%, 60%, 80%      { transform: translate3d(2rem, 0, 0); }\n      }\n\n      .ngx-modal {\n        display: flex;\n      }\n      .ngx-modal-shake {\n        backface-visibility: hidden;\n        -webkit-animation-duration: 0.5s;\n        -moz-animation-duration: 0.5s;\n        animation-duration: 0.5s;\n        -webkit-animation-fill-mode: both;\n        -moz-animation-fill-mode: both;\n        animation-fill-mode: both;\n        -webkit-animation-iteration-count: infinite;\n        -moz-animation-iteration-count: infinite;\n        animation-iteration-count: infinite;\n        -webkit-animation-name: shake;\n        -moz-animation-name: shake;\n        animation-name: shake;\n      }\n  "],
-                template: "\n    <div *ngIf=\"settings.overlayClass\" [ngClass]=\"[settings.overlayClass, animateOverlayClass]\"\n         (click)=\"(!actionButtons || !actionButtons.length) && close()\"></div>\n    <div [ngClass]=\"[settings.modalClass, animateModalClass]\">\n      <div [ngClass]=\"settings.modalDialogClass\">\n        <div [ngClass]=\"[ showAlert ? settings.alertClass : '', settings.contentClass]\">\n          <div [ngClass]=\"settings.headerClass\">\n            <h4 [ngClass]=\"settings.headerTitleClass\">{{title}}</h4>\n            <button (click)=\"close()\" *ngIf=\"!actionButtons || !actionButtons.length\" type=\"button\"\n                    [title]=\"settings.closeButtonTitle\"\n                    [ngClass]=\"settings.closeButtonClass\">\n            </button>\n          </div>\n          <div [ngClass]=\"settings.bodyClass\">\n            <i #modalDialogBody></i>\n          </div>\n          <div [ngClass]=\"settings.footerClass\" *ngIf=\"actionButtons && actionButtons.length\">\n            <button *ngFor=\"let button of actionButtons\" (click)=\"doAction(button.onAction)\"\n                    [ngClass]=\"button.buttonClass || settings.buttonClass\">{{button.text}}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  "
+                template: "\n    <div *ngIf=\"settings.overlayClass && showOverlay\" [ngClass]=\"[settings.overlayClass, animateOverlayClass]\"\n         (click)=\"close()\"></div> \n    <div [ngClass]=\"[settings.modalClass, animateModalClass]\">\n      <div [ngClass]=\"settings.modalDialogClass\">\n        <div [ngClass]=\"[ showAlert ? settings.alertClass : '', settings.contentClass]\">\n          <div [ngClass]=\"settings.headerClass\">\n            <h4 [ngClass]=\"settings.headerTitleClass\">{{title}}</h4>\n            <button (click)=\"close()\" *ngIf=\"!actionButtons || !actionButtons.length\" type=\"button\"\n                    [title]=\"settings.closeButtonTitle\"\n                    [ngClass]=\"settings.closeButtonClass\">\n            </button>\n          </div>\n          <div [ngClass]=\"settings.bodyClass\">\n            <i #modalDialogBody></i>\n          </div>\n          <div [ngClass]=\"settings.footerClass\" *ngIf=\"actionButtons && actionButtons.length\">\n            <button *ngFor=\"let button of actionButtons\" (click)=\"doAction(button.onAction)\"\n                    [ngClass]=\"button.buttonClass || settings.buttonClass\">{{button.text}}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  "
             },] },
@@ -196,0 +197,0 @@ ];

src/modal-dialog.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"ModalDialogComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"modal-dialog","styles":["\n      @-moz-keyframes shake {\n        from, to                { transform: translate3d(0, 0, 0); }\n        10%, 30%, 50%, 70%, 90% { transform: translate3d(-2rem, 0, 0); }\n        20%, 40%, 60%, 80%      { transform: translate3d(2rem, 0, 0); }\n      }\n      @-webkit-keyframes shake {\n        from, to                { transform: translate3d(0, 0, 0); }\n        10%, 30%, 50%, 70%, 90% { transform: translate3d(-2rem, 0, 0); }\n        20%, 40%, 60%, 80%      { transform: translate3d(2rem, 0, 0); }\n      }\n      @keyframes shake {\n        from, to                { transform: translate3d(0, 0, 0); }\n        10%, 30%, 50%, 70%, 90% { transform: translate3d(-2rem, 0, 0); }\n        20%, 40%, 60%, 80%      { transform: translate3d(2rem, 0, 0); }\n      }\n\n      .ngx-modal {\n        display: flex;\n      }\n      .ngx-modal-shake {\n        backface-visibility: hidden;\n        -webkit-animation-duration: 0.5s;\n        -moz-animation-duration: 0.5s;\n        animation-duration: 0.5s;\n        -webkit-animation-fill-mode: both;\n        -moz-animation-fill-mode: both;\n        animation-fill-mode: both;\n        -webkit-animation-iteration-count: infinite;\n        -moz-animation-iteration-count: infinite;\n        animation-iteration-count: infinite;\n        -webkit-animation-name: shake;\n        -moz-animation-name: shake;\n        animation-name: shake;\n      }\n  "],"template":"\n    <div *ngIf=\"settings.overlayClass\" [ngClass]=\"[settings.overlayClass, animateOverlayClass]\"\n         (click)=\"(!actionButtons || !actionButtons.length) && close()\"></div>\n    <div [ngClass]=\"[settings.modalClass, animateModalClass]\">\n      <div [ngClass]=\"settings.modalDialogClass\">\n        <div [ngClass]=\"[ showAlert ? settings.alertClass : '', settings.contentClass]\">\n          <div [ngClass]=\"settings.headerClass\">\n            <h4 [ngClass]=\"settings.headerTitleClass\">{{title}}</h4>\n            <button (click)=\"close()\" *ngIf=\"!actionButtons || !actionButtons.length\" type=\"button\"\n                    [title]=\"settings.closeButtonTitle\"\n                    [ngClass]=\"settings.closeButtonClass\">\n            </button>\n          </div>\n          <div [ngClass]=\"settings.bodyClass\">\n            <i #modalDialogBody></i>\n          </div>\n          <div [ngClass]=\"settings.footerClass\" *ngIf=\"actionButtons && actionButtons.length\">\n            <button *ngFor=\"let button of actionButtons\" (click)=\"doAction(button.onAction)\"\n                    [ngClass]=\"button.buttonClass || settings.buttonClass\">{{button.text}}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  "}]}],"members":{"dynamicComponentTarget":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["modalDialogBody",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"}]}],"dialogInit":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"doAction":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"_setOptions":[{"__symbolic":"method"}],"_closeIfSuccessful":[{"__symbolic":"method"}],"_finalizeAndDestroy":[{"__symbolic":"method"}],"_triggerAlert":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"ModalDialogComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"modal-dialog","styles":["\n      @-moz-keyframes shake {\n        from, to                { transform: translate3d(0, 0, 0); }\n        10%, 30%, 50%, 70%, 90% { transform: translate3d(-2rem, 0, 0); }\n        20%, 40%, 60%, 80%      { transform: translate3d(2rem, 0, 0); }\n      }\n      @-webkit-keyframes shake {\n        from, to                { transform: translate3d(0, 0, 0); }\n        10%, 30%, 50%, 70%, 90% { transform: translate3d(-2rem, 0, 0); }\n        20%, 40%, 60%, 80%      { transform: translate3d(2rem, 0, 0); }\n      }\n      @keyframes shake {\n        from, to                { transform: translate3d(0, 0, 0); }\n        10%, 30%, 50%, 70%, 90% { transform: translate3d(-2rem, 0, 0); }\n        20%, 40%, 60%, 80%      { transform: translate3d(2rem, 0, 0); }\n      }\n\n      .ngx-modal {\n        display: flex;\n      }\n      .ngx-modal-shake {\n        backface-visibility: hidden;\n        -webkit-animation-duration: 0.5s;\n        -moz-animation-duration: 0.5s;\n        animation-duration: 0.5s;\n        -webkit-animation-fill-mode: both;\n        -moz-animation-fill-mode: both;\n        animation-fill-mode: both;\n        -webkit-animation-iteration-count: infinite;\n        -moz-animation-iteration-count: infinite;\n        animation-iteration-count: infinite;\n        -webkit-animation-name: shake;\n        -moz-animation-name: shake;\n        animation-name: shake;\n      }\n  "],"template":"\n    <div *ngIf=\"settings.overlayClass\" [ngClass]=\"[settings.overlayClass, animateOverlayClass]\"\n         (click)=\"(!actionButtons || !actionButtons.length) && close()\"></div>\n    <div [ngClass]=\"[settings.modalClass, animateModalClass]\">\n      <div [ngClass]=\"settings.modalDialogClass\">\n        <div [ngClass]=\"[ showAlert ? settings.alertClass : '', settings.contentClass]\">\n          <div [ngClass]=\"settings.headerClass\">\n            <h4 [ngClass]=\"settings.headerTitleClass\">{{title}}</h4>\n            <button (click)=\"close()\" *ngIf=\"!actionButtons || !actionButtons.length\" type=\"button\"\n                    [title]=\"settings.closeButtonTitle\"\n                    [ngClass]=\"settings.closeButtonClass\">\n            </button>\n          </div>\n          <div [ngClass]=\"settings.bodyClass\">\n            <i #modalDialogBody></i>\n          </div>\n          <div [ngClass]=\"settings.footerClass\" *ngIf=\"actionButtons && actionButtons.length\">\n            <button *ngFor=\"let button of actionButtons\" (click)=\"doAction(button.onAction)\"\n                    [ngClass]=\"button.buttonClass || settings.buttonClass\">{{button.text}}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  "}]}],"members":{"dynamicComponentTarget":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["modalDialogBody",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"}]}],"dialogInit":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"doAction":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"_setOptions":[{"__symbolic":"method"}],"_closeIfSuccessful":[{"__symbolic":"method"}],"_finalizeAndDestroy":[{"__symbolic":"method"}],"_triggerAlert":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"ModalDialogComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"modal-dialog","styles":["\n      @-moz-keyframes shake {\n        from, to                { transform: translate3d(0, 0, 0); }\n        10%, 30%, 50%, 70%, 90% { transform: translate3d(-2rem, 0, 0); }\n        20%, 40%, 60%, 80%      { transform: translate3d(2rem, 0, 0); }\n      }\n      @-webkit-keyframes shake {\n        from, to                { transform: translate3d(0, 0, 0); }\n        10%, 30%, 50%, 70%, 90% { transform: translate3d(-2rem, 0, 0); }\n        20%, 40%, 60%, 80%      { transform: translate3d(2rem, 0, 0); }\n      }\n      @keyframes shake {\n        from, to                { transform: translate3d(0, 0, 0); }\n        10%, 30%, 50%, 70%, 90% { transform: translate3d(-2rem, 0, 0); }\n        20%, 40%, 60%, 80%      { transform: translate3d(2rem, 0, 0); }\n      }\n\n      .ngx-modal {\n        display: flex;\n      }\n      .ngx-modal-shake {\n        backface-visibility: hidden;\n        -webkit-animation-duration: 0.5s;\n        -moz-animation-duration: 0.5s;\n        animation-duration: 0.5s;\n        -webkit-animation-fill-mode: both;\n        -moz-animation-fill-mode: both;\n        animation-fill-mode: both;\n        -webkit-animation-iteration-count: infinite;\n        -moz-animation-iteration-count: infinite;\n        animation-iteration-count: infinite;\n        -webkit-animation-name: shake;\n        -moz-animation-name: shake;\n        animation-name: shake;\n      }\n  "],"template":"\n    <div *ngIf=\"settings.overlayClass && showOverlay\" [ngClass]=\"[settings.overlayClass, animateOverlayClass]\"\n         (click)=\"close()\"></div> \n    <div [ngClass]=\"[settings.modalClass, animateModalClass]\">\n      <div [ngClass]=\"settings.modalDialogClass\">\n        <div [ngClass]=\"[ showAlert ? settings.alertClass : '', settings.contentClass]\">\n          <div [ngClass]=\"settings.headerClass\">\n            <h4 [ngClass]=\"settings.headerTitleClass\">{{title}}</h4>\n            <button (click)=\"close()\" *ngIf=\"!actionButtons || !actionButtons.length\" type=\"button\"\n                    [title]=\"settings.closeButtonTitle\"\n                    [ngClass]=\"settings.closeButtonClass\">\n            </button>\n          </div>\n          <div [ngClass]=\"settings.bodyClass\">\n            <i #modalDialogBody></i>\n          </div>\n          <div [ngClass]=\"settings.footerClass\" *ngIf=\"actionButtons && actionButtons.length\">\n            <button *ngFor=\"let button of actionButtons\" (click)=\"doAction(button.onAction)\"\n                    [ngClass]=\"button.buttonClass || settings.buttonClass\">{{button.text}}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  "}]}],"members":{"dynamicComponentTarget":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["modalDialogBody",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"}]}],"dialogInit":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"doAction":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"_setOptions":[{"__symbolic":"method"}],"_closeIfSuccessful":[{"__symbolic":"method"}],"_finalizeAndDestroy":[{"__symbolic":"method"}],"_triggerAlert":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"ModalDialogComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"modal-dialog","styles":["\n      @-moz-keyframes shake {\n        from, to                { transform: translate3d(0, 0, 0); }\n        10%, 30%, 50%, 70%, 90% { transform: translate3d(-2rem, 0, 0); }\n        20%, 40%, 60%, 80%      { transform: translate3d(2rem, 0, 0); }\n      }\n      @-webkit-keyframes shake {\n        from, to                { transform: translate3d(0, 0, 0); }\n        10%, 30%, 50%, 70%, 90% { transform: translate3d(-2rem, 0, 0); }\n        20%, 40%, 60%, 80%      { transform: translate3d(2rem, 0, 0); }\n      }\n      @keyframes shake {\n        from, to                { transform: translate3d(0, 0, 0); }\n        10%, 30%, 50%, 70%, 90% { transform: translate3d(-2rem, 0, 0); }\n        20%, 40%, 60%, 80%      { transform: translate3d(2rem, 0, 0); }\n      }\n\n      .ngx-modal {\n        display: flex;\n      }\n      .ngx-modal-shake {\n        backface-visibility: hidden;\n        -webkit-animation-duration: 0.5s;\n        -moz-animation-duration: 0.5s;\n        animation-duration: 0.5s;\n        -webkit-animation-fill-mode: both;\n        -moz-animation-fill-mode: both;\n        animation-fill-mode: both;\n        -webkit-animation-iteration-count: infinite;\n        -moz-animation-iteration-count: infinite;\n        animation-iteration-count: infinite;\n        -webkit-animation-name: shake;\n        -moz-animation-name: shake;\n        animation-name: shake;\n      }\n  "],"template":"\n    <div *ngIf=\"settings.overlayClass && showOverlay\" [ngClass]=\"[settings.overlayClass, animateOverlayClass]\"\n         (click)=\"close()\"></div> \n    <div [ngClass]=\"[settings.modalClass, animateModalClass]\">\n      <div [ngClass]=\"settings.modalDialogClass\">\n        <div [ngClass]=\"[ showAlert ? settings.alertClass : '', settings.contentClass]\">\n          <div [ngClass]=\"settings.headerClass\">\n            <h4 [ngClass]=\"settings.headerTitleClass\">{{title}}</h4>\n            <button (click)=\"close()\" *ngIf=\"!actionButtons || !actionButtons.length\" type=\"button\"\n                    [title]=\"settings.closeButtonTitle\"\n                    [ngClass]=\"settings.closeButtonClass\">\n            </button>\n          </div>\n          <div [ngClass]=\"settings.bodyClass\">\n            <i #modalDialogBody></i>\n          </div>\n          <div [ngClass]=\"settings.footerClass\" *ngIf=\"actionButtons && actionButtons.length\">\n            <button *ngFor=\"let button of actionButtons\" (click)=\"doAction(button.onAction)\"\n                    [ngClass]=\"button.buttonClass || settings.buttonClass\">{{button.text}}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  "}]}],"members":{"dynamicComponentTarget":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["modalDialogBody",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"}]}],"dialogInit":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"doAction":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"_setOptions":[{"__symbolic":"method"}],"_closeIfSuccessful":[{"__symbolic":"method"}],"_finalizeAndDestroy":[{"__symbolic":"method"}],"_triggerAlert":[{"__symbolic":"method"}]}}}}]

src/modal-dialog.interface.d.ts

@@ -13,2 +13,3 @@ import { ComponentRef } from '@angular/core';
     data: T;
+    placeOnTop: boolean;
     settings: Partial<IModalDialogSettings>;
@@ -15,0 +16,0 @@ closeDialogSubject: Subject<void>;

src/modal-dialog.module.d.ts

@@ -1,4 +0,14 @@
-import { ModuleWithProviders } from '@angular/core';
+import { ModuleWithProviders, InjectionToken } from '@angular/core';
+/**
+ * Guard to make sure we have single initialization of forRoot
+ * @type {InjectionToken<ModalDialogModule>}
+ */
+export declare const MODAL_DIALOG_FORROOT_GUARD: InjectionToken<ModalDialogModule>;
 export declare class ModalDialogModule {
     static forRoot(): ModuleWithProviders;
 }
+/**
+ * @param dialogModule
+ * @returns {string}
+ */
+export declare function provideForRootGuard(dialogModule: ModalDialogModule): string;

src/modal-dialog.module.js

@@ -8,3 +8,8 @@ // components and directives
 import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
+import { NgModule, InjectionToken, SkipSelf, Optional } from '@angular/core';
+/**
+ * Guard to make sure we have single initialization of forRoot
+ * @type {InjectionToken<ModalDialogModule>}
+ */
+export var MODAL_DIALOG_FORROOT_GUARD = new InjectionToken('MODAL_DIALOG_FORROOT_GUARD');
 var ModalDialogModule = (function () {
@@ -16,3 +21,10 @@ function ModalDialogModule() {
             ngModule: ModalDialogModule,
-            providers: [ModalDialogInstanceService]
+            providers: [
+                {
+                    provide: MODAL_DIALOG_FORROOT_GUARD,
+                    useFactory: provideForRootGuard,
+                    deps: [[ModalDialogModule, new Optional(), new SkipSelf()]]
+                },
+                ModalDialogInstanceService
+            ]
         };
@@ -34,1 +46,11 @@ };
 ModalDialogModule.ctorParameters = function () { return []; };
+/**
+ * @param dialogModule
+ * @returns {string}
+ */
+export function provideForRootGuard(dialogModule) {
+    if (dialogModule) {
+        throw new Error("ModalDialogModule.forRoot() called twice.");
+    }
+    return 'guarded';
+}

src/modal-dialog.module.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"ModalDialogModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","module":"./modal-dialog.component","name":"ModalDialogComponent"},{"__symbolic":"reference","module":"./simple-modal.component","name":"SimpleModalComponent"}],"entryComponents":[{"__symbolic":"reference","module":"./modal-dialog.component","name":"ModalDialogComponent"},{"__symbolic":"reference","module":"./simple-modal.component","name":"SimpleModalComponent"}],"exports":[{"__symbolic":"reference","module":"./modal-dialog.component","name":"ModalDialogComponent"},{"__symbolic":"reference","module":"./simple-modal.component","name":"SimpleModalComponent"}],"providers":[{"__symbolic":"reference","module":"./modal-dialog.service","name":"ModalDialogService"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"ModalDialogModule"},"providers":[{"__symbolic":"reference","module":"./modal-dialog-instance.service","name":"ModalDialogInstanceService"}]}}}}}},{"__symbolic":"module","version":1,"metadata":{"ModalDialogModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","module":"./modal-dialog.component","name":"ModalDialogComponent"},{"__symbolic":"reference","module":"./simple-modal.component","name":"SimpleModalComponent"}],"entryComponents":[{"__symbolic":"reference","module":"./modal-dialog.component","name":"ModalDialogComponent"},{"__symbolic":"reference","module":"./simple-modal.component","name":"SimpleModalComponent"}],"exports":[{"__symbolic":"reference","module":"./modal-dialog.component","name":"ModalDialogComponent"},{"__symbolic":"reference","module":"./simple-modal.component","name":"SimpleModalComponent"}],"providers":[{"__symbolic":"reference","module":"./modal-dialog.service","name":"ModalDialogService"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"ModalDialogModule"},"providers":[{"__symbolic":"reference","module":"./modal-dialog-instance.service","name":"ModalDialogInstanceService"}]}}}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"MODAL_DIALOG_FORROOT_GUARD":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken"},"arguments":["MODAL_DIALOG_FORROOT_GUARD"]},"ModalDialogModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","module":"./modal-dialog.component","name":"ModalDialogComponent"},{"__symbolic":"reference","module":"./simple-modal.component","name":"SimpleModalComponent"}],"entryComponents":[{"__symbolic":"reference","module":"./modal-dialog.component","name":"ModalDialogComponent"},{"__symbolic":"reference","module":"./simple-modal.component","name":"SimpleModalComponent"}],"exports":[{"__symbolic":"reference","module":"./modal-dialog.component","name":"ModalDialogComponent"},{"__symbolic":"reference","module":"./simple-modal.component","name":"SimpleModalComponent"}],"providers":[{"__symbolic":"reference","module":"./modal-dialog.service","name":"ModalDialogService"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"ModalDialogModule"},"providers":[{"provide":{"__symbolic":"reference","name":"MODAL_DIALOG_FORROOT_GUARD"},"useFactory":{"__symbolic":"reference","name":"provideForRootGuard"},"deps":[[{"__symbolic":"reference","name":"ModalDialogModule"},{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf"}}]]},{"__symbolic":"reference","module":"./modal-dialog-instance.service","name":"ModalDialogInstanceService"}]}}}},"provideForRootGuard":{"__symbolic":"function"}}},{"__symbolic":"module","version":1,"metadata":{"MODAL_DIALOG_FORROOT_GUARD":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken"},"arguments":["MODAL_DIALOG_FORROOT_GUARD"]},"ModalDialogModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","module":"./modal-dialog.component","name":"ModalDialogComponent"},{"__symbolic":"reference","module":"./simple-modal.component","name":"SimpleModalComponent"}],"entryComponents":[{"__symbolic":"reference","module":"./modal-dialog.component","name":"ModalDialogComponent"},{"__symbolic":"reference","module":"./simple-modal.component","name":"SimpleModalComponent"}],"exports":[{"__symbolic":"reference","module":"./modal-dialog.component","name":"ModalDialogComponent"},{"__symbolic":"reference","module":"./simple-modal.component","name":"SimpleModalComponent"}],"providers":[{"__symbolic":"reference","module":"./modal-dialog.service","name":"ModalDialogService"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"ModalDialogModule"},"providers":[{"provide":{"__symbolic":"reference","name":"MODAL_DIALOG_FORROOT_GUARD"},"useFactory":{"__symbolic":"reference","name":"provideForRootGuard"},"deps":[[{"__symbolic":"reference","name":"ModalDialogModule"},{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf"}}]]},{"__symbolic":"reference","module":"./modal-dialog-instance.service","name":"ModalDialogInstanceService"}]}}}},"provideForRootGuard":{"__symbolic":"function"}}}]

src/modal-dialog.service.js

@@ -21,3 +21,5 @@ import { ComponentFactoryResolver, Inject } from '@angular/core';
         if (options === void 0) { options = {}; }
-        this.modalDialogInstanceService.closeAnyExistingModalDialog();
+        if (!options.placeOnTop) {
+            this.modalDialogInstanceService.closeAnyExistingModalDialog();
+        }
         var factory = this.componentFactoryResolver.resolveComponentFactory(ModalDialogComponent);
@@ -24,0 +26,0 @@ var componentRef = target.createComponent(factory);

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

112907

increased by8.34%

Lines of code

1098

increased by11.25%

Number of lines in readme file

270

increased by1.89%

No dependency changes