ngx-bootstrap 5.6.1 → 6.2.0

package/modal/fesm5/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';
@@ -8,6 +8,9 @@ import { __values } from 'tslib';
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
+/**
+ * @template T
+ */
 var BsModalRef = /** @class */ (function () {
     function BsModalRef() {
         /**
@@ -25,6 +28,11 @@ var BsModalRef = /** @class */ (function () {
     return BsModalRef;
 }());
 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 {?}
@@ -40,6 +48,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,6 +80,9 @@ if (false) {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
+/**
+ * @template T
+ */
 var ModalOptions = /** @class */ (function () {
     function ModalOptions() {
     }
@@ -71,6 +92,11 @@ var ModalOptions = /** @class */ (function () {
     return ModalOptions;
 }());
 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.
@@ -137,6 +163,8 @@ var modalConfigDefaults = {
     initialState: {}
 };
 /** @type {?} */
+var MODAL_CONFIG_DEFAULT_OVERRIDE = new InjectionToken('override-default-config');
+/** @type {?} */
 var CLASS_NAME = {
     SCROLLBAR_MEASURER: 'modal-scrollbar-measure',
     BACKDROP: 'modal-backdrop',
@@ -161,7 +189,8 @@ var TRANSITION_DURATIONS = {
 /** @type {?} */
 var DISMISS_REASONS = {
     BACKRDOP: 'backdrop-click',
-    ESC: 'esc'
+    ESC: 'esc',
+    BACK: 'browser-back-navigation-clicked'
 };
 
 /**
@@ -238,6 +267,16 @@ var ModalContainerComponent = /** @class */ (function () {
         this.bsModalService.setDismissReason(DISMISS_REASONS.BACKRDOP);
         this.hide();
     };
+    /**
+     * @return {?}
+     */
+    ModalContainerComponent.prototype.onPopState = /**
+     * @return {?}
+     */
+    function () {
+        this.bsModalService.setDismissReason(DISMISS_REASONS.BACK);
+        this.hide();
+    };
     /**
      * @param {?} event
      * @return {?}
@@ -294,7 +333,7 @@ var ModalContainerComponent = /** @class */ (function () {
                 _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);
     };
@@ -321,6 +360,7 @@ var ModalContainerComponent = /** @class */ (function () {
     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'],] }]
     };
     return ModalContainerComponent;
@@ -476,7 +516,7 @@ var BACKDROP_TRANSITION_DURATION = 150;
  * Mark any code with directive to show it's content in modal
  */
 var ModalDirective = /** @class */ (function () {
-    function ModalDirective(_element, _viewContainerRef, _renderer, clf) {
+    function ModalDirective(_element, _viewContainerRef, _renderer, clf, modalDefaultOption) {
         this._element = _element;
         this._renderer = _renderer;
         /**
@@ -507,6 +547,7 @@ var ModalDirective = /** @class */ (function () {
         this.isNested = false;
         this.clickStartedInContent = false;
         this._backdrop = clf.createLoader(_element, _viewContainerRef, _renderer);
+        this._config = modalDefaultOption || modalConfigDefaults;
     }
     Object.defineProperty(ModalDirective.prototype, "config", {
         get: /**
@@ -729,7 +770,7 @@ var ModalDirective = /** @class */ (function () {
      * @return {?}
      */
     function (config) {
-        return Object.assign({}, modalConfigDefaults, config);
+        return Object.assign({}, this._config, config);
     };
     /**
      *  Show dialog
@@ -1075,7 +1116,8 @@ var ModalDirective = /** @class */ (function () {
         { 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 }],
@@ -1115,7 +1157,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 {?}
      */
@@ -1192,10 +1234,9 @@ if (false) {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var BsModalService = /** @class */ (function () {
-    function BsModalService(rendererFactory, clf) {
+    function BsModalService(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
@@ -1208,56 +1249,65 @@ var BsModalService = /** @class */ (function () {
         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 */
-    // tslint:disable-next-line:no-any
     /**
      * Shows a modal
+     * @template T
      * @param {?} content
      * @param {?=} config
      * @return {?}
      */
-    // tslint:disable-next-line:no-any
     BsModalService.prototype.show = /**
      * Shows a modal
+     * @template T
      * @param {?} content
      * @param {?=} config
      * @return {?}
      */
+    function (
     // tslint:disable-next-line:no-any
-    function (content, config) {
+    content, config) {
         this.modalsCount++;
         this._createLoaders();
-        this.config = Object.assign({}, modalConfigDefaults, config);
+        /** @type {?} */
+        var 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 {?}
      */
     BsModalService.prototype.hide = /**
-     * @param {?} level
+     * @param {?=} id
      * @return {?}
      */
-    function (level) {
+    function (id) {
         var _this = this;
-        if (this.modalsCount === 1) {
+        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 {?}
          */
         function () {
-            _this._hideModal(level);
-            _this.removeLoaders(level);
+            _this._hideModal(id);
+            _this.removeLoaders(id);
         }), this.config.animated ? TRANSITION_DURATIONS.BACKDROP : 0);
     };
     /**
@@ -1315,20 +1365,20 @@ var BsModalService = /** @class */ (function () {
      */
     function (content) {
         var e_1, _a;
-        var _this = this;
+        var _b;
         /** @type {?} */
         var modalLoader = this.loaders[this.loaders.length - 1];
         if (this.config && this.config.providers) {
             try {
-                for (var _b = __values(this.config.providers), _c = _b.next(); !_c.done; _c = _b.next()) {
-                    var provider = _c.value;
+                for (var _c = __values(this.config.providers), _d = _c.next(); !_d.done; _d = _c.next()) {
+                    var provider = _d.value;
                     modalLoader.provide(provider);
                 }
             }
             catch (e_1_1) { e_1 = { error: e_1_1 }; }
             finally {
                 try {
-                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                    if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
                 }
                 finally { if (e_1) throw e_1.error; }
             }
@@ -1340,21 +1390,11 @@ var BsModalService = /** @class */ (function () {
             .provide({ provide: ModalOptions, useValue: this.config })
             .provide({ provide: BsModalRef, useValue: bsModalRef })
             .attach(ModalContainerComponent)
-            .to('body')
-            .show({ content: content, isAnimated: this.config.animated, initialState: this.config.initialState, bsModalService: this });
-        modalContainerRef.instance.level = this.getModalsCount();
+            .to('body');
         bsModalRef.hide = (/**
          * @return {?}
          */
-        function () {
-            /** @type {?} */
-            var duration = _this.config.animated ? TRANSITION_DURATIONS.MODAL : 0;
-            setTimeout((/**
-             * @return {?}
-             */
-            function () { return modalContainerRef.instance.hide(); }), duration);
-        });
-        bsModalRef.content = modalLoader.getInnerComponent() || null;
+        function () { return modalContainerRef.instance.hide(); });
         bsModalRef.setClass = (/**
          * @param {?} newClass
          * @return {?}
@@ -1362,21 +1402,54 @@ var BsModalService = /** @class */ (function () {
         function (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: 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 = (_b = modalContainerRef.instance.config) === null || _b === void 0 ? void 0 : _b.id;
         return bsModalRef;
     };
     /**
-     * @param {?} level
+     * @param {?=} id
      * @return {?}
      */
     BsModalService.prototype._hideModal = /**
-     * @param {?} level
+     * @param {?=} id
      * @return {?}
      */
-    function (level) {
-        /** @type {?} */
-        var modalLoader = this.loaders[level - 1];
-        if (modalLoader) {
-            modalLoader.hide();
+    function (id) {
+        if (id != null) {
+            /** @type {?} */
+            var indexToRemove = this.loaders.findIndex((/**
+             * @param {?} loader
+             * @return {?}
+             */
+            function (loader) { return loader.instance.config.id === id; }));
+            /** @type {?} */
+            var modalLoader = this.loaders[indexToRemove];
+            if (modalLoader) {
+                modalLoader.hide(id);
+            }
+        }
+        else {
+            this.loaders.forEach((/**
+             * @param {?} loader
+             * @return {?}
+             */
+            function (loader) {
+                loader.hide(loader.instance.config.id);
+            }));
         }
     };
     /**
@@ -1406,6 +1479,7 @@ var BsModalService = /** @class */ (function () {
      * @return {?}
      */
     function () {
+        this._renderer.removeClass(document.body, CLASS_NAME.OPEN);
         this._backdropLoader.hide();
         this.backdropRef = null;
     };
@@ -1495,24 +1569,37 @@ var BsModalService = /** @class */ (function () {
     };
     /**
      * @private
-     * @param {?} level
+     * @param {?=} id
      * @return {?}
      */
     BsModalService.prototype.removeLoaders = /**
      * @private
-     * @param {?} level
+     * @param {?=} id
      * @return {?}
      */
-    function (level) {
-        this.loaders.splice(level - 1, 1);
-        this.loaders.forEach((/**
-         * @param {?} loader
-         * @param {?} i
-         * @return {?}
-         */
-        function (loader, i) {
-            loader.instance.level = i + 1;
-        }));
+    function (id) {
+        if (id != null) {
+            /** @type {?} */
+            var indexToRemove = this.loaders.findIndex((/**
+             * @param {?} loader
+             * @return {?}
+             */
+            function (loader) { return loader.instance.config.id === id; }));
+            if (indexToRemove >= 0) {
+                this.loaders.splice(indexToRemove, 1);
+                this.loaders.forEach((/**
+                 * @param {?} loader
+                 * @param {?} i
+                 * @return {?}
+                 */
+                function (loader, i) {
+                    loader.instance.level = i + 1;
+                }));
+            }
+        }
+        else {
+            this.loaders.splice(0, this.loaders.length);
+        }
     };
     // tslint:disable-next-line:no-any
     // tslint:disable-next-line:no-any
@@ -1533,10 +1620,11 @@ var BsModalService = /** @class */ (function () {
     function (from, to) {
         var _this = this;
         from.subscribe((/**
+         * @param {?} data
          * @return {?}
          */
-        function () {
-            to.emit(_this.lastDismissReason);
+        function (data) {
+            to.emit(_this.lastDismissReason || data);
         }));
     };
     BsModalService.decorators = [
@@ -1545,7 +1633,8 @@ var BsModalService = /** @class */ (function () {
     /** @nocollapse */
     BsModalService.ctorParameters = function () { return [
         { type: RendererFactory2 },
-        { type: ComponentLoaderFactory }
+        { type: ComponentLoaderFactory },
+        { type: ModalOptions, decorators: [{ type: Optional }, { type: Inject, args: [MODAL_CONFIG_DEFAULT_OVERRIDE,] }] }
     ]; };
     return BsModalService;
 }());
@@ -1610,6 +1699,11 @@ if (false) {
      * @private
      */
     BsModalService.prototype.clf;
+    /**
+     * @type {?}
+     * @private
+     */
+    BsModalService.prototype.modalDefaultOption;
 }
 
 /**
@@ -1667,5 +1761,5 @@ var ModalModule = /** @class */ (function () {
  * @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