ngx-bootstrap 5.6.1 → 6.2.0

package/modal/fesm2015/ngx-bootstrap-modal.js

@@ -1,4 +1,4 @@
-import { Injectable, Component, ElementRef, Renderer2, HostListener, EventEmitter, Directive, ViewContainerRef, Input, Output, RendererFactory2, NgModule } from '@angular/core';
+import { Injectable, InjectionToken, Component, ElementRef, Renderer2, HostListener, EventEmitter, Directive, ViewContainerRef, Optional, Inject, Input, Output, RendererFactory2, NgModule } from '@angular/core';
 import { isBs3, Utils, document as document$1, window as window$1 } from 'ngx-bootstrap/utils';
 import { ComponentLoaderFactory } from 'ngx-bootstrap/component-loader';
 import { PositioningService } from 'ngx-bootstrap/positioning';
@@ -7,6 +7,10 @@ import { PositioningService } from 'ngx-bootstrap/positioning';
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
+/**
+ * @template T
+ */
+// tslint:disable-next-line:no-any
 class BsModalRef {
     constructor() {
         /**
@@ -23,6 +27,11 @@ BsModalRef.decorators = [
     { type: Injectable }
 ];
 if (false) {
+    /**
+     *  Allow user to ID for the modal. Otherwise, a unique number will be given
+     * @type {?}
+     */
+    BsModalRef.prototype.id;
     /**
      * Reference to a component inside the modal. Null if modal's been created with TemplateRef
      * @type {?}
@@ -38,6 +47,16 @@ if (false) {
      * @type {?}
      */
     BsModalRef.prototype.setClass;
+    /**
+     * Event that is fired when the modal behind the ref starts hiding
+     * @type {?}
+     */
+    BsModalRef.prototype.onHide;
+    /**
+     * Event that is fired when the modal behind the ref finishes hiding
+     * @type {?}
+     */
+    BsModalRef.prototype.onHidden;
 }
 
 /**
@@ -62,12 +81,20 @@ if (false) {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
+/**
+ * @template T
+ */
 class ModalOptions {
 }
 ModalOptions.decorators = [
     { type: Injectable }
 ];
 if (false) {
+    /**
+     *  Allow user to ID for the modal. Otherwise, a unique number will be given
+     * @type {?}
+     */
+    ModalOptions.prototype.id;
     /**
      *  Includes a modal-backdrop element. Alternatively,
      *  specify static for a backdrop which doesn't close the modal on click.
@@ -134,6 +161,8 @@ const modalConfigDefaults = {
     initialState: {}
 };
 /** @type {?} */
+const MODAL_CONFIG_DEFAULT_OVERRIDE = new InjectionToken('override-default-config');
+/** @type {?} */
 const CLASS_NAME = {
     SCROLLBAR_MEASURER: 'modal-scrollbar-measure',
     BACKDROP: 'modal-backdrop',
@@ -158,7 +187,8 @@ const TRANSITION_DURATIONS = {
 /** @type {?} */
 const DISMISS_REASONS = {
     BACKRDOP: 'backdrop-click',
-    ESC: 'esc'
+    ESC: 'esc',
+    BACK: 'browser-back-navigation-clicked'
 };
 
 /**
@@ -228,6 +258,13 @@ class ModalContainerComponent {
         this.bsModalService.setDismissReason(DISMISS_REASONS.BACKRDOP);
         this.hide();
     }
+    /**
+     * @return {?}
+     */
+    onPopState() {
+        this.bsModalService.setDismissReason(DISMISS_REASONS.BACK);
+        this.hide();
+    }
     /**
      * @param {?} event
      * @return {?}
@@ -273,7 +310,7 @@ class ModalContainerComponent {
                 this.bsModalService.getModalsCount() === 1) {
                 this._renderer.removeClass(document.body, CLASS_NAME.OPEN);
             }
-            this.bsModalService.hide(this.level);
+            this.bsModalService.hide(this.config.id);
             this.isModalHiding = false;
         }), this.isAnimated ? TRANSITION_DURATIONS.MODAL : 0);
     }
@@ -307,6 +344,7 @@ ModalContainerComponent.ctorParameters = () => [
 ModalContainerComponent.propDecorators = {
     onClickStarted: [{ type: HostListener, args: ['mousedown', ['$event'],] }],
     onClickStop: [{ type: HostListener, args: ['mouseup', ['$event'],] }],
+    onPopState: [{ type: HostListener, args: ['window:popstate',] }],
     onEsc: [{ type: HostListener, args: ['window:keydown.esc', ['$event'],] }]
 };
 if (false) {
@@ -457,8 +495,9 @@ class ModalDirective {
      * @param {?} _viewContainerRef
      * @param {?} _renderer
      * @param {?} clf
+     * @param {?} modalDefaultOption
      */
-    constructor(_element, _viewContainerRef, _renderer, clf) {
+    constructor(_element, _viewContainerRef, _renderer, clf, modalDefaultOption) {
         this._element = _element;
         this._renderer = _renderer;
         /**
@@ -489,6 +528,7 @@ class ModalDirective {
         this.isNested = false;
         this.clickStartedInContent = false;
         this._backdrop = clf.createLoader(_element, _viewContainerRef, _renderer);
+        this._config = modalDefaultOption || modalConfigDefaults;
     }
     /**
      * allows to set modal configuration via element property
@@ -653,7 +693,7 @@ class ModalDirective {
      * @return {?}
      */
     getConfig(config) {
-        return Object.assign({}, modalConfigDefaults, config);
+        return Object.assign({}, this._config, config);
     }
     /**
      *  Show dialog
@@ -886,7 +926,8 @@ ModalDirective.ctorParameters = () => [
     { type: ElementRef },
     { type: ViewContainerRef },
     { type: Renderer2 },
-    { type: ComponentLoaderFactory }
+    { type: ComponentLoaderFactory },
+    { type: ModalOptions, decorators: [{ type: Optional }, { type: Inject, args: [MODAL_CONFIG_DEFAULT_OVERRIDE,] }] }
 ];
 ModalDirective.propDecorators = {
     config: [{ type: Input }],
@@ -924,7 +965,7 @@ if (false) {
     ModalDirective.prototype.onHidden;
     /**
      * This field contains last dismiss reason.
-     * Possible values: `backdrop-click`, `esc` and `null`
+     * Possible values: `backdrop-click`, `esc` and `id: number`
      * (if modal was closed by direct call of `.hide()`).
      * @type {?}
      */
@@ -1004,11 +1045,11 @@ class BsModalService {
     /**
      * @param {?} rendererFactory
      * @param {?} clf
+     * @param {?} modalDefaultOption
      */
-    constructor(rendererFactory, clf) {
+    constructor(rendererFactory, clf, modalDefaultOption) {
         this.clf = clf;
-        // constructor props
-        this.config = modalConfigDefaults;
+        this.modalDefaultOption = modalDefaultOption;
         // tslint:disable-next-line:no-any
         this.onShow = new EventEmitter();
         // tslint:disable-next-line:no-any
@@ -1021,42 +1062,52 @@ class BsModalService {
         this.originalBodyPadding = 0;
         this.scrollbarWidth = 0;
         this.modalsCount = 0;
-        this.lastDismissReason = '';
+        this.lastDismissReason = null;
         this.loaders = [];
         this._backdropLoader = this.clf.createLoader(null, null, null);
         this._renderer = rendererFactory.createRenderer(null, null);
+        this.config = modalDefaultOption ?
+            (Object.assign({}, modalConfigDefaults, modalDefaultOption)) :
+            modalConfigDefaults;
     }
     /**
      * Shows a modal
+     * @template T
      * @param {?} content
      * @param {?=} config
      * @return {?}
      */
+    show(
     // tslint:disable-next-line:no-any
-    show(content, config) {
+    content, config) {
         this.modalsCount++;
         this._createLoaders();
-        this.config = Object.assign({}, modalConfigDefaults, config);
+        /** @type {?} */
+        const id = (config === null || config === void 0 ? void 0 : config.id) || (new Date()).getUTCMilliseconds();
+        this.config = this.modalDefaultOption ?
+            Object.assign({}, modalConfigDefaults, this.modalDefaultOption, config) :
+            Object.assign({}, modalConfigDefaults, config);
+        this.config.id = id;
         this._showBackdrop();
         this.lastDismissReason = null;
         return this._showModal(content);
     }
     /**
-     * @param {?} level
+     * @param {?=} id
      * @return {?}
      */
-    hide(level) {
-        if (this.modalsCount === 1) {
+    hide(id) {
+        if (this.modalsCount === 1 || id == null) {
             this._hideBackdrop();
             this.resetScrollbar();
         }
-        this.modalsCount = this.modalsCount >= 1 ? this.modalsCount - 1 : 0;
+        this.modalsCount = this.modalsCount >= 1 && id != null ? this.modalsCount - 1 : 0;
         setTimeout((/**
          * @return {?}
          */
         () => {
-            this._hideModal(level);
-            this.removeLoaders(level);
+            this._hideModal(id);
+            this.removeLoaders(id);
         }), this.config.animated ? TRANSITION_DURATIONS.BACKDROP : 0);
     }
     /**
@@ -1099,6 +1150,7 @@ class BsModalService {
      * @return {?}
      */
     _showModal(content) {
+        var _a;
         /** @type {?} */
         const modalLoader = this.loaders[this.loaders.length - 1];
         if (this.config && this.config.providers) {
@@ -1113,21 +1165,11 @@ class BsModalService {
             .provide({ provide: ModalOptions, useValue: this.config })
             .provide({ provide: BsModalRef, useValue: bsModalRef })
             .attach(ModalContainerComponent)
-            .to('body')
-            .show({ content, isAnimated: this.config.animated, initialState: this.config.initialState, bsModalService: this });
-        modalContainerRef.instance.level = this.getModalsCount();
+            .to('body');
         bsModalRef.hide = (/**
          * @return {?}
          */
-        () => {
-            /** @type {?} */
-            const duration = this.config.animated ? TRANSITION_DURATIONS.MODAL : 0;
-            setTimeout((/**
-             * @return {?}
-             */
-            () => modalContainerRef.instance.hide()), duration);
-        });
-        bsModalRef.content = modalLoader.getInnerComponent() || null;
+        () => modalContainerRef.instance.hide());
         bsModalRef.setClass = (/**
          * @param {?} newClass
          * @return {?}
@@ -1135,17 +1177,50 @@ class BsModalService {
         (newClass) => {
             modalContainerRef.instance.config.class = newClass;
         });
+        bsModalRef.onHidden = new EventEmitter();
+        bsModalRef.onHide = new EventEmitter();
+        this.copyEvent(modalLoader.onBeforeHide, bsModalRef.onHide);
+        this.copyEvent(modalLoader.onHidden, bsModalRef.onHidden);
+        // call 'show' method after assign setClass in bsModalRef.
+        // it makes modal component's bsModalRef available to call setClass method
+        modalContainerRef.show({
+            content,
+            isAnimated: this.config.animated,
+            initialState: this.config.initialState,
+            bsModalService: this,
+            id: this.config.id
+        });
+        modalContainerRef.instance.level = this.getModalsCount();
+        bsModalRef.content = modalLoader.getInnerComponent() || null;
+        bsModalRef.id = (_a = modalContainerRef.instance.config) === null || _a === void 0 ? void 0 : _a.id;
         return bsModalRef;
     }
     /**
-     * @param {?} level
+     * @param {?=} id
      * @return {?}
      */
-    _hideModal(level) {
-        /** @type {?} */
-        const modalLoader = this.loaders[level - 1];
-        if (modalLoader) {
-            modalLoader.hide();
+    _hideModal(id) {
+        if (id != null) {
+            /** @type {?} */
+            const indexToRemove = this.loaders.findIndex((/**
+             * @param {?} loader
+             * @return {?}
+             */
+            loader => loader.instance.config.id === id));
+            /** @type {?} */
+            const modalLoader = this.loaders[indexToRemove];
+            if (modalLoader) {
+                modalLoader.hide(id);
+            }
+        }
+        else {
+            this.loaders.forEach((/**
+             * @param {?} loader
+             * @return {?}
+             */
+            (loader) => {
+                loader.hide(loader.instance.config.id);
+            }));
         }
     }
     /**
@@ -1165,6 +1240,7 @@ class BsModalService {
      * @return {?}
      */
     removeBackdrop() {
+        this._renderer.removeClass(document.body, CLASS_NAME.OPEN);
         this._backdropLoader.hide();
         this.backdropRef = null;
     }
@@ -1229,19 +1305,32 @@ class BsModalService {
     }
     /**
      * @private
-     * @param {?} level
+     * @param {?=} id
      * @return {?}
      */
-    removeLoaders(level) {
-        this.loaders.splice(level - 1, 1);
-        this.loaders.forEach((/**
-         * @param {?} loader
-         * @param {?} i
-         * @return {?}
-         */
-        (loader, i) => {
-            loader.instance.level = i + 1;
-        }));
+    removeLoaders(id) {
+        if (id != null) {
+            /** @type {?} */
+            const indexToRemove = this.loaders.findIndex((/**
+             * @param {?} loader
+             * @return {?}
+             */
+            loader => loader.instance.config.id === id));
+            if (indexToRemove >= 0) {
+                this.loaders.splice(indexToRemove, 1);
+                this.loaders.forEach((/**
+                 * @param {?} loader
+                 * @param {?} i
+                 * @return {?}
+                 */
+                (loader, i) => {
+                    loader.instance.level = i + 1;
+                }));
+            }
+        }
+        else {
+            this.loaders.splice(0, this.loaders.length);
+        }
     }
     // tslint:disable-next-line:no-any
     /**
@@ -1252,10 +1341,11 @@ class BsModalService {
      */
     copyEvent(from, to) {
         from.subscribe((/**
+         * @param {?} data
          * @return {?}
          */
-        () => {
-            to.emit(this.lastDismissReason);
+        (data) => {
+            to.emit(this.lastDismissReason || data);
         }));
     }
 }
@@ -1265,7 +1355,8 @@ BsModalService.decorators = [
 /** @nocollapse */
 BsModalService.ctorParameters = () => [
     { type: RendererFactory2 },
-    { type: ComponentLoaderFactory }
+    { type: ComponentLoaderFactory },
+    { type: ModalOptions, decorators: [{ type: Optional }, { type: Inject, args: [MODAL_CONFIG_DEFAULT_OVERRIDE,] }] }
 ];
 if (false) {
     /** @type {?} */
@@ -1328,6 +1419,11 @@ if (false) {
      * @private
      */
     BsModalService.prototype.clf;
+    /**
+     * @type {?}
+     * @private
+     */
+    BsModalService.prototype.modalDefaultOption;
 }
 
 /**
@@ -1376,5 +1472,5 @@ ModalModule.decorators = [
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { BsModalRef, BsModalService, ModalBackdropComponent, ModalBackdropOptions, ModalContainerComponent, ModalDirective, ModalModule, ModalOptions, CLASS_NAME as ɵa };
+export { BsModalRef, BsModalService, MODAL_CONFIG_DEFAULT_OVERRIDE, ModalBackdropComponent, ModalBackdropOptions, ModalContainerComponent, ModalDirective, ModalModule, ModalOptions, CLASS_NAME as ɵa };
 //# sourceMappingURL=ngx-bootstrap-modal.js.map