@coolon/angular-ui-powerups 0.0.61 → 0.0.62

package/bundles/coolon-angular-ui-powerups.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@coolon/pectin'), require('@angular/cdk/portal'), require('@coolon/typescript-utilities'), require('@angular/material/dialog'), require('@angular/material/icon'), require('@angular/material/list'), require('@angular/material/tooltip'), require('@angular/router'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('lodash'), require('@angular/animations'), require('resize-observer-polyfill')) :
-    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material', '@angular/material/tabs', '@angular/platform-browser/animations', '@coolon/pectin', '@angular/cdk/portal', '@coolon/typescript-utilities', '@angular/material/dialog', '@angular/material/icon', '@angular/material/list', '@angular/material/tooltip', '@angular/router', '@typescript-plus/fast-memoize-decorator/dist/src', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', 'lodash', '@angular/animations', 'resize-observer-polyfill'], factory) :
-    (global = global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material, global.ng.material.tabs, global.ng.platformBrowser.animations, global.pectin, global.ng.cdk.portal, global.typescriptUtilities, global.ng.material.dialog, global.ng.material.icon, global.ng.material.list, global.ng.material.tooltip, global.ng.router, global.src, global.fastMemoizeDecorator, null, global.___default, global.ng.animations, global.ResizeObserver));
-}(this, function (exports, common, core, forms, material, tabs, animations, pectin, portal, typescriptUtilities, dialog, icon, list, tooltip, router, src, fastMemoizeDecorator, reflectMetadata, ___default, animations$1, ResizeObserver) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@coolon/pectin'), require('@angular/cdk/portal'), require('@coolon/typescript-utilities'), require('@angular/material/dialog'), require('@angular/router'), require('@angular/material/icon'), require('@angular/material/list'), require('@angular/material/tooltip'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('lodash'), require('@angular/animations'), require('resize-observer-polyfill')) :
+    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material', '@angular/material/tabs', '@angular/platform-browser/animations', '@coolon/pectin', '@angular/cdk/portal', '@coolon/typescript-utilities', '@angular/material/dialog', '@angular/router', '@angular/material/icon', '@angular/material/list', '@angular/material/tooltip', '@typescript-plus/fast-memoize-decorator/dist/src', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', 'lodash', '@angular/animations', 'resize-observer-polyfill'], factory) :
+    (global = global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material, global.ng.material.tabs, global.ng.platformBrowser.animations, global.pectin, global.ng.cdk.portal, global.typescriptUtilities, global.ng.material.dialog, global.ng.router, global.ng.material.icon, global.ng.material.list, global.ng.material.tooltip, global.src, global.fastMemoizeDecorator, null, global.___default, global.ng.animations, global.ResizeObserver));
+}(this, function (exports, common, core, forms, material, tabs, animations, pectin, portal, typescriptUtilities, dialog, router, icon, list, tooltip, src, fastMemoizeDecorator, reflectMetadata, ___default, animations$1, ResizeObserver) { 'use strict';
 
     var ___default__default = 'default' in ___default ? ___default['default'] : ___default;
     ResizeObserver = ResizeObserver && ResizeObserver.hasOwnProperty('default') ? ResizeObserver['default'] : ResizeObserver;
@@ -980,20 +980,46 @@
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    /** @type {?} */
-    var INTERACTION_CONTEXT = new core.InjectionToken('InteractionContext');
     /**
      * @abstract
      */
     var   /**
      * @abstract
      */
-    InteractionContext = /** @class */ (function () {
+    InteractionContext = /** @class */ (function (_super) {
+        __extends(InteractionContext, _super);
         function InteractionContext() {
+            return _super.call(this) || this;
         }
+        /**
+         * Returns true if an activity is currently running.
+         */
+        /**
+         * Returns true if an activity is currently running.
+         * @return {?}
+         */
+        InteractionContext.prototype.isActive = /**
+         * Returns true if an activity is currently running.
+         * @return {?}
+         */
+        function () {
+            return this.activityList.length > 0;
+        };
         return InteractionContext;
-    }());
+    }(pectin.GarbageCollector));
     if (false) {
+        /**
+         * Returns the activity that is currently active.
+         * This model is only updated in the next tick after the view has been updated.
+         * @type {?}
+         */
+        InteractionContext.prototype.currentActivity;
+        /**
+         * Returns the current list of activities that are in progress.
+         * This model is only updated in the next tick after the view has been updated.
+         * @type {?}
+         */
+        InteractionContext.prototype.activityList;
         /**
          * @abstract
          * @template D, R, E
@@ -1045,6 +1071,16 @@
          * @return {?}
          */
         Activity.prototype.initialise = function (activityContext) { };
+        /**
+         * @param {?} result
+         * @return {?}
+         */
+        Activity.prototype.done = function (result) { };
+        /**
+         * @param {?} e
+         * @return {?}
+         */
+        Activity.prototype.cancel = function (e) { };
     }
 
     /**
@@ -1059,7 +1095,7 @@
      * <activity-view [activityClass]="...", [activityData]="..." (done)=".." (cancel)="..."></activity-view>
      * @template D, R, E
      */
-    exports.ɵv = /** @class */ (function () {
+    var ActivityOutletComponent = /** @class */ (function () {
         function ActivityOutletComponent(componentFactoryResolver, viewContainerRef, injector) {
             this.componentFactoryResolver = componentFactoryResolver;
             this.viewContainerRef = viewContainerRef;
@@ -1111,6 +1147,16 @@
             this.activityComponentRef = this.viewContainerRef.createComponent(componentFactory, 0, injector);
             this.activityComponentRef.instance.initialise(activityContext);
         };
+        Object.defineProperty(ActivityOutletComponent.prototype, "component", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this.activityComponentRef.instance;
+            },
+            enumerable: true,
+            configurable: true
+        });
         /**
          * @param {?} alert
          * @return {?}
@@ -1197,105 +1243,29 @@
     }());
     if (false) {
         /** @type {?} */
-        exports.ɵv.prototype.interactionContext;
+        ActivityOutletComponent.prototype.interactionContext;
         /**
          * @type {?}
          * @private
          */
-        exports.ɵv.prototype.activityComponentRef;
+        ActivityOutletComponent.prototype.activityComponentRef;
         /**
          * @type {?}
          * @private
          */
-        exports.ɵv.prototype.componentFactoryResolver;
+        ActivityOutletComponent.prototype.componentFactoryResolver;
         /**
          * @type {?}
          * @private
          */
-        exports.ɵv.prototype.viewContainerRef;
+        ActivityOutletComponent.prototype.viewContainerRef;
         /**
          * @type {?}
          * @private
          */
-        exports.ɵv.prototype.injector;
+        ActivityOutletComponent.prototype.injector;
         /* Skipping unhandled member: ;*/
     }
-    (function (ActivityOutletComponent) {
-        /**
-         * @template D, R, E
-         */
-        var /**
-         * @template D, R, E
-         */
-        OutletInteractionContext = /** @class */ (function () {
-            function OutletInteractionContext(context) {
-                this.context = context;
-            }
-            /**
-             * @param {?} alert
-             * @return {?}
-             */
-            OutletInteractionContext.prototype.alert = /**
-             * @param {?} alert
-             * @return {?}
-             */
-            function (alert) {
-                return pectin.lang.notImplemented();
-            };
-            /**
-             * @param {?} confirm
-             * @return {?}
-             */
-            OutletInteractionContext.prototype.confirm = /**
-             * @param {?} confirm
-             * @return {?}
-             */
-            function (confirm) {
-                return pectin.lang.notImplemented();
-            };
-            /**
-             * @template D1, R1, E1
-             * @param {?} confirm
-             * @param {?} activityType
-             * @param {?=} data
-             * @return {?}
-             */
-            OutletInteractionContext.prototype.confirmThen = /**
-             * @template D1, R1, E1
-             * @param {?} confirm
-             * @param {?} activityType
-             * @param {?=} data
-             * @return {?}
-             */
-            function (confirm, activityType, data) {
-                return pectin.lang.notImplemented();
-            };
-            /**
-             * @template D1, R1, E1
-             * @param {?} activityType
-             * @param {?=} data
-             * @return {?}
-             */
-            OutletInteractionContext.prototype.startActivity = /**
-             * @template D1, R1, E1
-             * @param {?} activityType
-             * @param {?=} data
-             * @return {?}
-             */
-            function (activityType, data) {
-                return pectin.lang.notImplemented();
-            };
-            return OutletInteractionContext;
-        }());
-        ActivityOutletComponent.OutletInteractionContext = OutletInteractionContext;
-        if (false) {
-            /**
-             * @type {?}
-             * @private
-             */
-            OutletInteractionContext.prototype.context;
-        }
-    })(exports.ɵv || (exports.ɵv = {}));
 
     /**
      * @fileoverview added by tsickle
@@ -1600,8 +1570,28 @@
             _this.activityOutletTabs = new pectin.MutableListModel();
             _this.obsoleteTabs = [];
             _this.finished = false;
+            _this._activityList = new pectin.MutableListModel();
             return _this;
         }
+        /**
+         * @return {?}
+         */
+        ActivityContainerComponent.prototype.isActive = /**
+         * @return {?}
+         */
+        function () {
+            return this.parentInteractionContext.isActive();
+        };
+        Object.defineProperty(ActivityContainerComponent.prototype, "activityList", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this._activityList.readonly;
+            },
+            enumerable: true,
+            configurable: true
+        });
         /**
          * @return {?}
          */
@@ -1619,11 +1609,50 @@
         function () {
             var _this = this;
             var observe = pectin.Dsl.disposeWith(this).observe;
+            this._activityList.value = this.outlets.toArray().map((/**
+             * @param {?} c
+             * @return {?}
+             */
+            function (c) { return c.component; }));
+            observe.valuesFrom(this.outlets.changes).subscribe((/**
+             * @param {?} change
+             * @return {?}
+             */
+            function (change) {
+                _this.safelyUpdateActivityList(change.map((/**
+                 * @param {?} c
+                 * @return {?}
+                 */
+                function (c) { return c.component; })));
+            }));
             observe.valuesFrom(this.tabs.animationDone).subscribe((/**
              * @return {?}
              */
             function () { return _this.onAnimationFinished(); }));
         };
+        /**
+         * Update in the next tick to avoid changing state in the current change detection cycle.
+         * @param activities
+         */
+        /**
+         * Update in the next tick to avoid changing state in the current change detection cycle.
+         * @private
+         * @param {?} activities
+         * @return {?}
+         */
+        ActivityContainerComponent.prototype.safelyUpdateActivityList = /**
+         * Update in the next tick to avoid changing state in the current change detection cycle.
+         * @private
+         * @param {?} activities
+         * @return {?}
+         */
+        function (activities) {
+            var _this = this;
+            setTimeout((/**
+             * @return {?}
+             */
+            function () { return _this._activityList.value = activities; }));
+        };
         /**
          * @template D, R, E
          * @param {?} initialContext
@@ -1808,7 +1837,7 @@
             parentInteractionContext: [{ type: core.Input }],
             initialActivityOutletContext: [{ type: core.Input }],
             tabs: [{ type: core.ViewChild, args: ['tabs', { static: true },] }],
-            outlets: [{ type: core.ViewChildren, args: [exports.ɵv,] }]
+            outlets: [{ type: core.ViewChildren, args: [ActivityOutletComponent,] }]
         };
         return ActivityContainerComponent;
     }(DisposableComponent));
@@ -1818,6 +1847,8 @@
         /** @type {?} */
         exports.ɵu.prototype.initialActivityOutletContext;
         /** @type {?} */
+        exports.ɵu.prototype.currentActivity;
+        /** @type {?} */
         exports.ɵu.prototype.tabs;
         /** @type {?} */
         exports.ɵu.prototype.outlets;
@@ -1833,6 +1864,11 @@
          * @private
          */
         exports.ɵu.prototype.finished;
+        /**
+         * @type {?}
+         * @private
+         */
+        exports.ɵu.prototype._activityList;
     }
     (function (ActivityContainerComponent) {
         /**
@@ -1861,14 +1897,60 @@
     var DIALOG_INTERACTION_SERVICE_DEFAULTS = new core.InjectionToken('DIALOG_INTERACTION_SERVICE_DEFAULTS');
     var DialogInteractionService = /** @class */ (function (_super) {
         __extends(DialogInteractionService, _super);
-        function DialogInteractionService(dialogService, dialogServiceDefaults, matDialogDefaultConfig) {
+        function DialogInteractionService(dialogService, router, dialogServiceDefaults, matDialogDefaultConfig) {
             var _this = _super.call(this) || this;
             _this.dialogService = dialogService;
+            _this.router = router;
             _this.dialogServiceDefaults = dialogServiceDefaults;
             _this.matDialogDefaultConfig = matDialogDefaultConfig;
+            _this._activityList = new pectin.DelegatingListModel();
+            _this._active = false;
             typescriptUtilities.assert.notNil(dialogService);
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, observe = _a.observe;
+            _this.currentActivity = chain(_this.activityList).last();
             return _this;
+            // observe.valuesFrom(this.router.events)
+            //   .tap((event:RouterEvent) => {
+            //     const nav = router.getCurrentNavigation();
+            //     console.log({
+            //       previousUrl: nav.previousNavigation && nav.previousNavigation.finalUrl,
+            //       initialUrl: nav.initialUrl,
+            //       finalUrl: nav.finalUrl,
+            //     });
+            //
+            //   })
+            //   .filter(event => event instanceof NavigationStart)
+            //   .subscribe((event: NavigationStart) => {
+            //     console.log(event.navigationTrigger);
+            //     if (event.navigationTrigger === 'popstate' && this.isActive()) {
+            //       const prev = router.getCurrentNavigation().previousNavigation.finalUrl;
+            //       // this.router.navigateByUrl(prev.toString(), {
+            //       //   replaceUrl: true,
+            //       //   skipLocationChange: false
+            //       // });
+            //       // this.cancelActivity();
+            //     }
+            //   });
         }
+        /**
+         * @return {?}
+         */
+        DialogInteractionService.prototype.cancelActivity = /**
+         * @return {?}
+         */
+        function () {
+            this.currentActivity.value.cancel(null);
+        };
+        Object.defineProperty(DialogInteractionService.prototype, "activityList", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this._activityList.readonly;
+            },
+            enumerable: true,
+            configurable: true
+        });
         /**
          * @template D, R, E
          * @param {?} activityType
@@ -1903,8 +1985,18 @@
         function (activityType, data, disableClose) {
             var _this = this;
             if (disableClose === void 0) { disableClose = true; }
+            if (this.isActive()) {
+                pectin.lang.illegalState("Activity already in progress: " + this.activityList.value.map((/**
+                 * @param {?} a
+                 * @return {?}
+                 */
+                function (a) { return a.constructor.name; })).join(', '));
+            }
+            this._active = true;
             /** @type {?} */
-            var config = __assign({ autoFocus: false, hasBackdrop: true }, this.matDialogDefaultConfig, this.dialogServiceDefaults, {
+            var self = this;
+            /** @type {?} */
+            var config = __assign({ autoFocus: false, hasBackdrop: true, closeOnNavigation: false }, this.matDialogDefaultConfig, this.dialogServiceDefaults, {
                 data: data,
                 disableClose: disableClose,
                 panelClass: 'dialog-interaction-service'
@@ -1920,6 +2012,7 @@
                 /** @type {?} */
                 var activityContainer = matDialogRef.componentInstance;
                 activityContainer.parentInteractionContext = _this;
+                self.safelyUpdateActivityListDelegate(activityContainer.activityList);
                 activityContainer.initialise({
                     activityClass: activityType,
                     activityData: data,
@@ -1943,8 +2036,35 @@
                     }
                 });
                 matDialogRef.updateSize();
+            })).finally((/**
+             * @return {?}
+             */
+            function () {
+                self.safelyUpdateActivityListDelegate(null);
+                self._active = false;
             }));
         };
+        /**
+         * Updates teh delegate on the next tick to avoid modifying state during the current change detection cycle.
+         * @param delegate
+         */
+        /**
+         * Updates teh delegate on the next tick to avoid modifying state during the current change detection cycle.
+         * @param {?} delegate
+         * @return {?}
+         */
+        DialogInteractionService.prototype.safelyUpdateActivityListDelegate = /**
+         * Updates teh delegate on the next tick to avoid modifying state during the current change detection cycle.
+         * @param {?} delegate
+         * @return {?}
+         */
+        function (delegate) {
+            var _this = this;
+            setTimeout((/**
+             * @return {?}
+             */
+            function () { return _this._activityList.setDelegate(delegate); }));
+        };
         /**
          * @param {?} alert
          * @return {?}
@@ -1996,18 +2116,36 @@
         /** @nocollapse */
         DialogInteractionService.ctorParameters = function () { return [
             { type: material.MatDialog },
+            { type: router.Router },
             { type: dialog.MatDialogConfig, decorators: [{ type: core.Optional }, { type: core.Inject, args: [DIALOG_INTERACTION_SERVICE_DEFAULTS,] }] },
             { type: dialog.MatDialogConfig, decorators: [{ type: core.Optional }, { type: core.Inject, args: [dialog.MAT_DIALOG_DEFAULT_OPTIONS,] }] }
         ]; };
-        /** @nocollapse */ DialogInteractionService.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function DialogInteractionService_Factory() { return new DialogInteractionService(core.ɵɵinject(dialog.MatDialog), core.ɵɵinject(DIALOG_INTERACTION_SERVICE_DEFAULTS, 8), core.ɵɵinject(dialog.MAT_DIALOG_DEFAULT_OPTIONS, 8)); }, token: DialogInteractionService, providedIn: "root" });
+        /** @nocollapse */ DialogInteractionService.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function DialogInteractionService_Factory() { return new DialogInteractionService(core.ɵɵinject(dialog.MatDialog), core.ɵɵinject(router.Router), core.ɵɵinject(DIALOG_INTERACTION_SERVICE_DEFAULTS, 8), core.ɵɵinject(dialog.MAT_DIALOG_DEFAULT_OPTIONS, 8)); }, token: DialogInteractionService, providedIn: "root" });
         return DialogInteractionService;
     }(InteractionContext));
     if (false) {
+        /** @type {?} */
+        DialogInteractionService.prototype.currentActivity;
+        /**
+         * @type {?}
+         * @private
+         */
+        DialogInteractionService.prototype._activityList;
+        /**
+         * @type {?}
+         * @private
+         */
+        DialogInteractionService.prototype._active;
         /**
          * @type {?}
          * @private
          */
         DialogInteractionService.prototype.dialogService;
+        /**
+         * @type {?}
+         * @private
+         */
+        DialogInteractionService.prototype.router;
         /** @type {?} */
         DialogInteractionService.prototype.dialogServiceDefaults;
         /** @type {?} */
@@ -2035,11 +2173,11 @@
                             ConfirmationDialogComponent,
                             exports.ɵba,
                             AlertDialogComponent,
-                            exports.ɵv
+                            ActivityOutletComponent
                         ],
                         exports: [
                             exports.ɵu,
-                            exports.ɵv,
+                            ActivityOutletComponent,
                         ],
                         entryComponents: [
                             exports.ɵu,
@@ -4488,6 +4626,65 @@
         ActivityOutletContext.prototype.onCancel;
     }
 
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var CloseInteractionGuard = /** @class */ (function () {
+        function CloseInteractionGuard(router, injector, interactionContext) {
+            this.router = router;
+            this.injector = injector;
+            this.interactionContext = interactionContext;
+        }
+        /**
+         * @param {?} component
+         * @param {?} currentRoute
+         * @param {?} currentState
+         * @param {?=} nextState
+         * @return {?}
+         */
+        CloseInteractionGuard.prototype.canDeactivate = /**
+         * @param {?} component
+         * @param {?} currentRoute
+         * @param {?} currentState
+         * @param {?=} nextState
+         * @return {?}
+         */
+        function (component, currentRoute, currentState, nextState) {
+            return !this.interactionContext.isActive();
+        };
+        CloseInteractionGuard.decorators = [
+            { type: core.Injectable, args: [{
+                        providedIn: 'root'
+                    },] }
+        ];
+        /** @nocollapse */
+        CloseInteractionGuard.ctorParameters = function () { return [
+            { type: router.Router },
+            { type: core.Injector },
+            { type: InteractionContext }
+        ]; };
+        /** @nocollapse */ CloseInteractionGuard.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function CloseInteractionGuard_Factory() { return new CloseInteractionGuard(core.ɵɵinject(router.Router), core.ɵɵinject(core.INJECTOR), core.ɵɵinject(InteractionContext)); }, token: CloseInteractionGuard, providedIn: "root" });
+        return CloseInteractionGuard;
+    }());
+    if (false) {
+        /**
+         * @type {?}
+         * @private
+         */
+        CloseInteractionGuard.prototype.router;
+        /**
+         * @type {?}
+         * @private
+         */
+        CloseInteractionGuard.prototype.injector;
+        /**
+         * @type {?}
+         * @private
+         */
+        CloseInteractionGuard.prototype.interactionContext;
+    }
+
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -4589,9 +4786,33 @@
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     var LeavePlaceGuard = /** @class */ (function () {
-        function LeavePlaceGuard(router, injector) {
-            this.router = router;
+        function LeavePlaceGuard(router$1, injector, interactionContext, location) {
+            this.router = router$1;
             this.injector = injector;
+            this.interactionContext = interactionContext;
+            this.location = location;
+            // TODO: should probably replace this with a RouteTracker thingy.
+            this._alreadyAccepted = [];
+            console.log('***** Created new guard ******');
+            /** @type {?} */
+            var self = this;
+            this.router.events.subscribe((/**
+             * @param {?} event
+             * @return {?}
+             */
+            function (event) {
+                // NavigationStart -> .... -> NavigationCancel === redirect (so don't ask again)
+                // NavigationStart -> .... -> NavigationEnd === navigated (so ask next time)
+                // NavigationStart -> .... -> NavigationError === canceled (guard cancelled so ask next time)
+                if (event instanceof router.NavigationEnd) {
+                    console.log("navigation ended");
+                    self._alreadyAccepted = [];
+                }
+                if (event instanceof router.NavigationError) {
+                    console.log("navigation errored");
+                    self._alreadyAccepted = [];
+                }
+            }));
         }
         /**
          * @param {?} component
@@ -4608,27 +4829,90 @@
          * @return {?}
          */
         function (component, currentRoute, currentState, nextState) {
-            // HACK: this will break with child routes...
+            var _this = this;
             /** @type {?} */
-            var path = "/" + component.placeDefinition.path;
-            // let thisTree = this.router.parseUrl(currentState.url);
-            // let nextTree = this.router.parseUrl(nextState.url);
-            // console.log({
-            //   placePath: path,
-            //   currentRoute: currentRoute.toString(),
-            //   currentStateUrl: currentState.url,
-            //   nextStateUrl: nextState.url,
-            //   currentStateUrlTree: thisTree.root.children[PRIMARY_OUTLET].segments,
-            //   nextStateUrlTree: nextTree.root.children[PRIMARY_OUTLET].segments
-            // });
-            // nextState is the full path...
-            if (!nextState.url.startsWith(path)) {
-                return component.canDeactivate();
+            var placeDefinitionPath = "/" + component.placeDefinition.path;
+            console.log('canDeactivate', {
+                staticPath: placeDefinitionPath,
+                currentStateUrl: currentState.url,
+                nextStateUrl: nextState.url,
+                alreadyDeclined: this._alreadyAccepted
+            });
+            // Example of the above when navigating to a different child route.
+            // canDeactivate {staticPath: "/hero-details",
+            //    currentStateUrl: "/route-parameters/-1;dv=A;dl=a,b,c;rdv=A;rdl=a,b,c/hero-details",
+            //    nextStateUrl: "/route-parameters/-1;dv=A;dl=a,b,c;rdv=A;rdl=a,b,c/hero-stats"
+            // }
+            // Example clicking on router tab of the parent component (de-activates the parent due to route param changes)
+            // canDeactivate {
+            //    staticPath: "/hero-stats",
+            //    currentStateUrl: "/route-parameters/-1;dv=A;dl=a,b,c;rdv=A;rdl=a,b,c/hero-stats",
+            //    nextStateUrl: "/route-parameters/"
+            // }
+            // canDeactivate {
+            //    staticPath: "/route-parameters",
+            //    currentStateUrl: "/route-parameters/-1;dv=A;dl=a,b,c;rdv=A;rdl=a,b,c/hero-stats",
+            //    nextStateUrl: "/route-parameters/"
+            // }
+            // logger.class.js:54 ParameterSnapshot.sanitise -> {idModel: -1, pv: undefined, pl: Array(0), dv: undefined, dl: Array(0), …}
+            // parameter-snapshot.ts:20 {name: "idModel", mine: -1, theirs: null}
+            // place-router.ts:28 redirect path (3) ["route-parameters", "-1", {…}]
+            // canDeactivate {
+            //    staticPath: "/hero-stats",
+            //    currentStateUrl: "/route-parameters/-1;dv=A;dl=a,b,c;rdv=A;rdl=a,b,c/hero-stats",
+            //    nextStateUrl: "/route-parameters/-1"
+            // }
+            // canDeactivate {
+            //    staticPath: "/route-parameters",
+            //    currentStateUrl: "/route-parameters/-1;dv=A;dl=a,b,c;rdv=A;rdl=a,b,c/hero-stats",
+            //    nextStateUrl: "/route-parameters/-1"
+            // }
+            // logger.class.js:54 ParameterSnapshot.sanitise -> {idModel: -1, pv: undefined, pl: Array(0), dv: "A", dl: Array(3), …}
+            // parameter-snapshot.ts:20 {name: "dv", mine: "A", theirs: undefined}
+            // place-router.ts:28 redirect path (3) ["route-parameters", "-1", {…}]
+            // canDeactivate {
+            //    staticPath: "/hero-stats",
+            //    currentStateUrl: "/route-parameters/-1;dv=A;dl=a,b,c;rdv=A;rdl=a,b,c/hero-stats",
+            //    nextStateUrl: "/route-parameters/-1;dv=A;dl=a,b,c;rdv=A;rdl=a,b,c"
+            // }
+            // HACK: this will break with child routes...
+            if (this.alreadyAccepted(component)) {
+                return true;
             }
             else {
+                if (!nextState.url.startsWith(placeDefinitionPath)) {
+                    /** @type {?} */
+                    var self_1 = this;
+                    return Promise.resolve(component.canDeactivate()).then((/**
+                     * @param {?} canLeave
+                     * @return {?}
+                     */
+                    function (canLeave) {
+                        if (!canLeave) {
+                            // Angular doesn't preserve the url when a guard cancels the back button.
+                            // See https://github.com/angular/angular/issues/13586#issuecomment-432795720
+                            _this.location.go(currentState.url);
+                        }
+                        else {
+                            self_1._alreadyAccepted.push(component);
+                        }
+                        return canLeave;
+                    }));
+                }
                 return true;
             }
         };
+        /**
+         * @param {?} placeComponent
+         * @return {?}
+         */
+        LeavePlaceGuard.prototype.alreadyAccepted = /**
+         * @param {?} placeComponent
+         * @return {?}
+         */
+        function (placeComponent) {
+            return this._alreadyAccepted.includes(placeComponent);
+        };
         LeavePlaceGuard.decorators = [
             { type: core.Injectable, args: [{
                         providedIn: 'root'
@@ -4637,12 +4921,25 @@
         /** @nocollapse */
         LeavePlaceGuard.ctorParameters = function () { return [
             { type: router.Router },
-            { type: core.Injector }
+            { type: core.Injector },
+            { type: InteractionContext },
+            { type: common.Location }
         ]; };
-        /** @nocollapse */ LeavePlaceGuard.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function LeavePlaceGuard_Factory() { return new LeavePlaceGuard(core.ɵɵinject(router.Router), core.ɵɵinject(core.INJECTOR)); }, token: LeavePlaceGuard, providedIn: "root" });
+        /** @nocollapse */ LeavePlaceGuard.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function LeavePlaceGuard_Factory() { return new LeavePlaceGuard(core.ɵɵinject(router.Router), core.ɵɵinject(core.INJECTOR), core.ɵɵinject(InteractionContext), core.ɵɵinject(common.Location)); }, token: LeavePlaceGuard, providedIn: "root" });
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [exports.PlaceComponent]),
+            __metadata("design:returntype", Boolean)
+        ], LeavePlaceGuard.prototype, "alreadyAccepted", null);
         return LeavePlaceGuard;
     }());
     if (false) {
+        /**
+         * @type {?}
+         * @private
+         */
+        LeavePlaceGuard.prototype._alreadyAccepted;
         /**
          * @type {?}
          * @private
@@ -4653,6 +4950,10 @@
          * @private
          */
         LeavePlaceGuard.prototype.injector;
+        /** @type {?} */
+        LeavePlaceGuard.prototype.interactionContext;
+        /** @type {?} */
+        LeavePlaceGuard.prototype.location;
     }
 
     /**
@@ -4946,10 +5247,11 @@
     exports.AbstractInputComponent = AbstractInputComponent;
     exports.AbstractPlaceNavigationComponent = AbstractPlaceNavigationComponent;
     exports.ActivityContainerComponent = exports.ɵu;
-    exports.ActivityOutletComponent = exports.ɵv;
+    exports.ActivityOutletComponent = ActivityOutletComponent;
     exports.AlertDialogComponent = AlertDialogComponent;
     exports.AngularUiPowerupsModule = AngularUiPowerupsModule;
     exports.BusyOverlayComponent = BusyOverlayComponent;
+    exports.CloseInteractionGuard = CloseInteractionGuard;
     exports.CommandDirective = CommandDirective;
     exports.ConfirmThenDialogComponent = exports.ɵba;
     exports.ConfirmationDialogComponent = ConfirmationDialogComponent;
@@ -4960,7 +5262,6 @@
     exports.DisposableComponent = DisposableComponent;
     exports.EmptyStateComponent = EmptyStateComponent;
     exports.FocusBindingDirective = FocusBindingDirective;
-    exports.INTERACTION_CONTEXT = INTERACTION_CONTEXT;
     exports.InteractionContext = InteractionContext;
     exports.InteractionModule = InteractionModule;
     exports.LEFT_RIGHT_PLACE_ANIMATION = LEFT_RIGHT_PLACE_ANIMATION;
@@ -5010,6 +5311,7 @@
     exports.ɵr = AbstractPlaceNavigationComponent;
     exports.ɵs = ListPlaceNavComponent;
     exports.ɵt = InteractionModule;
+    exports.ɵv = ActivityOutletComponent;
     exports.ɵw = ConfirmationDialogComponent;
     exports.ɵx = AbstractActivity;
     exports.ɵy = ACTIVITY_DATA;