@coolon/angular-ui-powerups 0.0.63 → 0.0.66

package/fesm5/coolon-angular-ui-powerups.js

@@ -5,18 +5,19 @@ import { MatDialog, MatButtonModule, MatDialogModule, MatTabsModule, MatProgress
 import { MatTabsModule as MatTabsModule$1 } from '@angular/material/tabs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { __extends, __decorate, __metadata, __assign, __awaiter, __generator } from 'tslib';
-import { GarbageCollector, DelegatingFormValueModel, UseDelegate, ValueModel, ListModel, StoreInListModel, assert, UnaryCommand, lang, Dsl, Logger, DelegatingValueModel, MutableListModel, DelegatingListModel, StoreInValueModel, Binding, MutableValueModel, Guard, OptionsHelper, ValueHolder, Trace } from '@coolon/pectin';
+import { GarbageCollector, DelegatingFormValueModel, UseDelegate, ValueModel, ListModel, StoreInListModel, assert, UnaryCommand, lang, Dsl, Logger, DelegatingValueModel, MutableStream, MutableListModel, DelegatingListModel, StoreInValueModel, Binding, MutableValueModel, Guard as Guard$1, OptionsHelper, ValueHolder } from '@coolon/pectin';
 import { PortalModule } from '@angular/cdk/portal';
+import ___default, { last, isNil } from 'lodash';
 import { assert as assert$1, Klass, Opts } from '@coolon/typescript-utilities';
 import { MatDialogConfig, MAT_DIALOG_DEFAULT_OPTIONS, MatDialog as MatDialog$1 } from '@angular/material/dialog';
-import { Router, RouterModule, NavigationEnd, NavigationError } from '@angular/router';
+import { v1 } from 'uuid';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { Router, NavigationStart, NavigationEnd, NavigationError, RouterModule } from '@angular/router';
 import { Memoize as Memoize$1 } from '@typescript-plus/fast-memoize-decorator/dist/src';
 import { Memoize } from '@typescript-plus/fast-memoize-decorator';
 import 'reflect-metadata';
-import ___default, { isNil } from 'lodash';
 import { style, query, group, animate, trigger, transition } from '@angular/animations';
 import ResizeObserver from 'resize-observer-polyfill';
 
@@ -807,15 +808,25 @@ InteractionContext = /** @class */ (function (_super) {
     function InteractionContext() {
         return _super.call(this) || this;
     }
+    Object.defineProperty(InteractionContext.prototype, "currentActivity", {
+        /**
+         * Returns the activity that is currently active.
+         * This model is only updated in the next tick after the view has been updated.
+         */
+        get: /**
+         * Returns the activity that is currently active.
+         * This model is only updated in the next tick after the view has been updated.
+         * @return {?}
+         */
+        function () {
+            return last(this.activityList.value);
+        },
+        enumerable: true,
+        configurable: true
+    });
     return InteractionContext;
 }(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.
@@ -867,29 +878,124 @@ if (false) {
 /** @type {?} */
 var ACTIVITY_DATA = new InjectionToken('InteractionActivityData');
 /**
- * @record
+ * @abstract
  * @template D, R, E
  */
-function Activity() { }
-if (false) {
-    /** @type {?} */
-    Activity.prototype.busy;
+var  /**
+ * @abstract
+ * @template D, R, E
+ */
+Activity = /** @class */ (function (_super) {
+    __extends(Activity, _super);
+    function Activity() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this._busyModel = new DelegatingValueModel().withDefault(false);
+        return _this;
+    }
     /**
      * @param {?} activityContext
      * @return {?}
      */
-    Activity.prototype.initialise = function (activityContext) { };
+    Activity.prototype.initialise = /**
+     * @param {?} activityContext
+     * @return {?}
+     */
+    function (activityContext) {
+        assert$1.isNil(this._activityContext);
+        this._activityContext = activityContext;
+    };
     /**
-     * @param {?} result
+     * @param {?=} result
+     * @return {?}
+     */
+    Activity.prototype.done = /**
+     * @param {?=} result
      * @return {?}
      */
-    Activity.prototype.done = function (result) { };
+    function (result) {
+        return this._activityContext.onDone(result);
+    };
     /**
-     * @param {?} e
+     * @param {?=} error
+     * @return {?}
+     */
+    Activity.prototype.cancel = /**
+     * @param {?=} error
      * @return {?}
      */
-    Activity.prototype.cancel = function (e) { };
+    function (error) {
+        this._activityContext.onCancel(error);
+    };
+    // @Trace()
+    // @Trace()
+    /**
+     * @return {?}
+     */
+    Activity.prototype.onActivityReady = 
+    // @Trace()
+    /**
+     * @return {?}
+     */
+    function () {
+    };
+    Object.defineProperty(Activity.prototype, "busy", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._busyModel.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @param {?} busyModel
+     * @return {?}
+     */
+    Activity.prototype.busyWhile = /**
+     * @param {?} busyModel
+     * @return {?}
+     */
+    function (busyModel) {
+        this._busyModel.setDelegate(busyModel);
+    };
+    /**
+     * @return {?}
+     */
+    Activity.prototype.isBusy = /**
+     * @return {?}
+     */
+    function () {
+        return this._busyModel.value;
+    };
+    return Activity;
+}(GarbageCollector));
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    Activity.prototype._busyModel;
+    /**
+     * @type {?}
+     * @private
+     */
+    Activity.prototype._activityContext;
 }
+(function (Activity) {
+    /**
+     * @record
+     * @template R, E
+     */
+    function Callbacks() { }
+    Activity.Callbacks = Callbacks;
+    if (false) {
+        /** @type {?} */
+        Callbacks.prototype.onDone;
+        /** @type {?} */
+        Callbacks.prototype.onCancel;
+    }
+})(Activity || (Activity = {}));
 
 /**
  * @fileoverview added by tsickle
@@ -910,11 +1016,19 @@ var ActivityOutletComponent = /** @class */ (function () {
         this.injector = injector;
     }
     Object.defineProperty(ActivityOutletComponent.prototype, "activityContext", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._activityContext;
+        },
         set: /**
          * @param {?} activityContext
          * @return {?}
          */
         function (activityContext) {
+            assert.isNil(this._activityContext);
+            this._activityContext = activityContext;
             this.loadActivity(activityContext);
         },
         enumerable: true,
@@ -943,7 +1057,7 @@ var ActivityOutletComponent = /** @class */ (function () {
             providers: [
                 {
                     provide: InteractionContext,
-                    useValue: this
+                    useValue: this.interactionContext
                 },
                 { provide: ACTIVITY_DATA, useValue: activityContext.activityData }
             ],
@@ -954,6 +1068,9 @@ var ActivityOutletComponent = /** @class */ (function () {
         this.viewContainerRef.clear();
         this.activityComponentRef = this.viewContainerRef.createComponent(componentFactory, 0, injector);
         this.activityComponentRef.instance.initialise(activityContext);
+        if (this.activityContext.componentReady) {
+            this.activityContext.componentReady(this.component);
+        }
     };
     Object.defineProperty(ActivityOutletComponent.prototype, "component", {
         get: /**
@@ -965,71 +1082,6 @@ var ActivityOutletComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    /**
-     * @param {?} alert
-     * @return {?}
-     */
-    ActivityOutletComponent.prototype.alert = /**
-     * @param {?} alert
-     * @return {?}
-     */
-    function (alert) {
-        return this.interactionContext.alert(alert);
-    };
-    /**
-     * @param {?} confirm
-     * @return {?}
-     */
-    ActivityOutletComponent.prototype.confirm = /**
-     * @param {?} confirm
-     * @return {?}
-     */
-    function (confirm) {
-        return this.interactionContext.confirm(confirm);
-    };
-    /**
-     * @template D1, R1, E1
-     * @param {?} confirm
-     * @param {?} activityType
-     * @param {?=} data
-     * @return {?}
-     */
-    ActivityOutletComponent.prototype.confirmThen = /**
-     * @template D1, R1, E1
-     * @param {?} confirm
-     * @param {?} activityType
-     * @param {?=} data
-     * @return {?}
-     */
-    function (confirm, activityType, data) {
-        return this.interactionContext.confirmThen(confirm, activityType, data);
-    };
-    /**
-     * @template D1, R1, E1
-     * @param {?} activityType
-     * @param {?=} data
-     * @return {?}
-     */
-    ActivityOutletComponent.prototype.startActivity = /**
-     * @template D1, R1, E1
-     * @param {?} activityType
-     * @param {?=} data
-     * @return {?}
-     */
-    function (activityType, data) {
-        return this.interactionContext.startActivity(activityType, data);
-    };
-    /**
-     * @return {?}
-     */
-    ActivityOutletComponent.prototype.notifyReady = /**
-     * @return {?}
-     */
-    function () {
-        if (this.activityComponentRef.instance['onActivityReady']) {
-            this.activityComponentRef.instance['onActivityReady']();
-        }
-    };
     ActivityOutletComponent.decorators = [
         { type: Component, args: [{
                     selector: 'angular-ui-powerups-activity-outlet',
@@ -1052,6 +1104,11 @@ var ActivityOutletComponent = /** @class */ (function () {
 if (false) {
     /** @type {?} */
     ActivityOutletComponent.prototype.interactionContext;
+    /**
+     * @type {?}
+     * @private
+     */
+    ActivityOutletComponent.prototype._activityContext;
     /**
      * @type {?}
      * @private
@@ -1080,108 +1137,22 @@ if (false) {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
+ * Deprecated. You can now extend the Activity class directly.
+ * @abstract
  * @template D, R, E
  */
 var  /**
+ * Deprecated. You can now extend the Activity class directly.
+ * @abstract
  * @template D, R, E
  */
 AbstractActivity = /** @class */ (function (_super) {
     __extends(AbstractActivity, _super);
     function AbstractActivity() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this._busyModel = new DelegatingValueModel().withDefault(false);
-        return _this;
+        return _super !== null && _super.apply(this, arguments) || this;
     }
-    /**
-     * @param {?} activityContext
-     * @return {?}
-     */
-    AbstractActivity.prototype.initialise = /**
-     * @param {?} activityContext
-     * @return {?}
-     */
-    function (activityContext) {
-        assert$1.isNil(this.activityContext);
-        this.activityContext = activityContext;
-    };
-    /**
-     * @param {?=} result
-     * @return {?}
-     */
-    AbstractActivity.prototype.done = /**
-     * @param {?=} result
-     * @return {?}
-     */
-    function (result) {
-        return this.activityContext.onDone(result);
-    };
-    /**
-     * @param {?=} error
-     * @return {?}
-     */
-    AbstractActivity.prototype.cancel = /**
-     * @param {?=} error
-     * @return {?}
-     */
-    function (error) {
-        this.activityContext.onCancel(error);
-    };
-    // @Trace()
-    // @Trace()
-    /**
-     * @return {?}
-     */
-    AbstractActivity.prototype.onActivityReady = 
-    // @Trace()
-    /**
-     * @return {?}
-     */
-    function () {
-    };
-    Object.defineProperty(AbstractActivity.prototype, "busy", {
-        get: /**
-         * @return {?}
-         */
-        function () {
-            return this._busyModel.readonly;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * @param {?} busyModel
-     * @return {?}
-     */
-    AbstractActivity.prototype.busyWhile = /**
-     * @param {?} busyModel
-     * @return {?}
-     */
-    function (busyModel) {
-        this._busyModel.setDelegate(busyModel);
-    };
-    /**
-     * @return {?}
-     */
-    AbstractActivity.prototype.isBusy = /**
-     * @return {?}
-     */
-    function () {
-        return this._busyModel.value;
-    };
     return AbstractActivity;
-}(DisposableComponent));
-if (false) {
-    /**
-     * @type {?}
-     * @private
-     */
-    AbstractActivity.prototype._busyModel;
-    /**
-     * @type {?}
-     * @private
-     */
-    AbstractActivity.prototype.activityContext;
-}
+}(Activity));
 
 /**
  * @fileoverview added by tsickle
@@ -1371,16 +1342,174 @@ if (false) {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
+/**
+ * Note: this class is mutable and is stored in a list model.  This is normally a big no no but
+ *  we're manually deriving other models from the list after view state changes.  I.e. we not
+ *  using pectin chains on any of the mutable fields.
+ * @template D, R, E
+ */
+var /**
+ * Note: this class is mutable and is stored in a list model.  This is normally a big no no but
+ *  we're manually deriving other models from the list after view state changes.  I.e. we not
+ *  using pectin chains on any of the mutable fields.
+ * @template D, R, E
+ */
+TabContext = /** @class */ (function () {
+    function TabContext(activityData, activityClass, interactionContext, activityCallbacks) {
+        this.activityData = activityData;
+        this.activityClass = activityClass;
+        this.interactionContext = interactionContext;
+        this.activityCallbacks = activityCallbacks;
+        this._complete = false;
+    }
+    /**
+     * @return {?}
+     */
+    TabContext.prototype.isComponentRealised = /**
+     * @return {?}
+     */
+    function () {
+        return !!this._component;
+    };
+    /**
+     * @return {?}
+     */
+    TabContext.prototype.isComplete = /**
+     * @return {?}
+     */
+    function () {
+        return this._complete;
+    };
+    /**
+     * @param {?} component
+     * @return {?}
+     */
+    TabContext.prototype.componentReady = /**
+     * @param {?} component
+     * @return {?}
+     */
+    function (component) {
+        assert.isNil(this._component);
+        this._component = component;
+    };
+    Object.defineProperty(TabContext.prototype, "component", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._component;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    // @Trace()
+    // @Trace()
+    /**
+     * @param {?} result
+     * @return {?}
+     */
+    TabContext.prototype.onDone = 
+    // @Trace()
+    /**
+     * @param {?} result
+     * @return {?}
+     */
+    function (result) {
+        this._complete = true;
+        this.activityCallbacks.onDone(result);
+    };
+    // @Trace()
+    // @Trace()
+    /**
+     * @param {?} error
+     * @return {?}
+     */
+    TabContext.prototype.onCancel = 
+    // @Trace()
+    /**
+     * @param {?} error
+     * @return {?}
+     */
+    function (error) {
+        this._complete = true;
+        this.activityCallbacks.onCancel(error);
+    };
+    return TabContext;
+}());
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    TabContext.prototype._complete;
+    /**
+     * @type {?}
+     * @private
+     */
+    TabContext.prototype._component;
+    /** @type {?} */
+    TabContext.prototype.activityData;
+    /** @type {?} */
+    TabContext.prototype.activityClass;
+    /** @type {?} */
+    TabContext.prototype.interactionContext;
+    /** @type {?} */
+    TabContext.prototype.activityCallbacks;
+}
+/**
+ * @template D, R, E
+ */
 var ActivityContainerComponent = /** @class */ (function (_super) {
     __extends(ActivityContainerComponent, _super);
     function ActivityContainerComponent() {
         var _this = _super.call(this) || this;
-        _this.activityOutletTabs = new MutableListModel();
-        _this.obsoleteTabs = [];
+        _this.activityFinishedEvents = new MutableStream();
+        _this.activityTabs = new MutableListModel();
         _this.finished = false;
         _this._activityList = new MutableListModel();
+        var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+        chain(_this.activityFinishedEvents).throttle(50).subscribe((/**
+         * @return {?}
+         */
+        function () { return _this.onActivityFinished(); }));
         return _this;
     }
+    Object.defineProperty(ActivityContainerComponent.prototype, "initialActivityOutletContext", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this.activityTabs.length > 0 ? this.activityTabs.value[0] : null;
+        },
+        set: /**
+         * @param {?} initialContext
+         * @return {?}
+         */
+        function (initialContext) {
+            var _this = this;
+            assert.isNil(this.initialActivityOutletContext);
+            this.activityTabs.push(new TabContext(initialContext.activityData, initialContext.activityClass, this, {
+                onDone: (/**
+                 * @param {?} result
+                 * @return {?}
+                 */
+                function (result) {
+                    _this.finished = true;
+                    return initialContext.onDone(result);
+                }),
+                onCancel: (/**
+                 * @param {?} error
+                 * @return {?}
+                 */
+                function (error) {
+                    _this.finished = true;
+                    return initialContext.onCancel(error);
+                })
+            }));
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * @return {?}
      */
@@ -1416,94 +1545,28 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
      */
     function () {
         var _this = this;
-        var observe = Dsl.disposeWith(this).observe;
-        this._activityList.value = this.outlets.toArray().map((/**
-         * @param {?} c
+        var _a = Dsl.disposeWith(this), chain = _a.chain, observe = _a.observe;
+        observe.valuesFrom(this.outlets.changes).subscribe((/**
          * @return {?}
          */
-        function (c) { return c.component; }));
-        observe.valuesFrom(this.outlets.changes).subscribe((/**
-         * @param {?} change
+        function () { return setTimeout((/**
          * @return {?}
          */
-        function (change) {
-            _this.safelyUpdateActivityList(change.map((/**
-             * @param {?} c
-             * @return {?}
-             */
-            function (c) { return c.component; })));
-        }));
+        function () { return _this.updateActivityList(); })); }));
         observe.valuesFrom(this.tabs.animationDone).subscribe((/**
          * @return {?}
          */
         function () { return _this.onAnimationFinished(); }));
+        this.updateActivityList();
     };
     /**
-     * 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
-     * @return {?}
-     */
-    ActivityContainerComponent.prototype.initialise = /**
-     * @template D, R, E
-     * @param {?} initialContext
-     * @return {?}
-     */
-    function (initialContext) {
-        /** @type {?} */
-        var self = this;
-        this.initialActivityOutletContext = {
-            activityClass: initialContext.activityClass,
-            activityData: initialContext.activityData,
-            onDone: (/**
-             * @param {?} result
-             * @return {?}
-             */
-            function (result) {
-                self.finished = true;
-                return initialContext.onDone(result);
-            }),
-            onCancel: (/**
-             * @param {?} error
-             * @return {?}
-             */
-            function (error) {
-                self.finished = true;
-                return initialContext.onCancel(error);
-            }),
-            interactionContext: this
-        };
-    };
-    /**
-     * @template D, R, E
+     * @template D1, R1, E1
      * @param {?} activityType
      * @param {?=} data
      * @return {?}
      */
     ActivityContainerComponent.prototype.startActivity = /**
-     * @template D, R, E
+     * @template D1, R1, E1
      * @param {?} activityType
      * @param {?=} data
      * @return {?}
@@ -1519,41 +1582,26 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
          */
         function (resolve, reject) {
             /** @type {?} */
-            var context = {
-                interactionContext: self,
-                activityClass: activityType,
-                activityData: data,
+            var context = new TabContext(data, activityType, self, {
                 onDone: (/**
                  * @param {?} result
                  * @return {?}
                  */
                 function (result) {
-                    self.obsoleteTabs.push(context);
-                    // animating on the next tick gives chained done's a chance to
-                    // finished before we start an animations
                     resolve(result);
-                    setTimeout((/**
-                     * @return {?}
-                     */
-                    function () { return self.animateTabs(); }));
+                    self.activityFinishedEvents.publish({});
                 }),
                 onCancel: (/**
                  * @param {?} error
                  * @return {?}
                  */
                 function (error) {
-                    self.obsoleteTabs.push(context);
-                    // finished before we start an animations
                     reject(error);
-                    // animating on the next tick gives chained done's a chance to complete before we animate
-                    setTimeout((/**
-                     * @return {?}
-                     */
-                    function () { return self.animateTabs(); }));
+                    self.activityFinishedEvents.publish({});
                 })
-            };
-            self.activityOutletTabs.push(context);
-            self.tabs.selectedIndex = _this.activityOutletTabs.length;
+            });
+            self.activityTabs.push(context);
+            self.tabs.selectedIndex = _this.activityTabs.length;
         }));
     };
     /**
@@ -1579,63 +1627,151 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
         return this.startActivity(ConfirmationDialogComponent, confirm);
     };
     /**
-     * @template D, R, E
-     * @param {?} confirm
-     * @param {?} activityType
-     * @param {?=} data
+     * @template D1, R1, E1
+     * @param {?} confirm
+     * @param {?} activityType
+     * @param {?=} data
+     * @return {?}
+     */
+    ActivityContainerComponent.prototype.confirmThen = /**
+     * @template D1, R1, E1
+     * @param {?} confirm
+     * @param {?} activityType
+     * @param {?=} data
+     * @return {?}
+     */
+    function (confirm, activityType, data) {
+        return this.startActivity(ConfirmThenDialogComponent, {
+            confirm: confirm,
+            activityType: activityType,
+            data: data
+        });
+    };
+    // @Trace()
+    // @Trace()
+    /**
+     * @private
+     * @return {?}
+     */
+    ActivityContainerComponent.prototype.onActivityFinished = 
+    // @Trace()
+    /**
+     * @private
+     * @return {?}
+     */
+    function () {
+        // don't do anything if job already queued up.
+        if (!this.finished) {
+            if (this.synchroniseSelectedTabIndex()) {
+                this.cleanupStaleActivities();
+            }
+            this.updateActivityList();
+        }
+    };
+    // @Trace()
+    // @Trace()
+    /**
+     * @private
+     * @return {?}
+     */
+    ActivityContainerComponent.prototype.cleanupStaleActivities = 
+    // @Trace()
+    /**
+     * @private
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        // clean up old tabs
+        if (this.tabs.selectedIndex < this.activityTabs.length - 1) {
+            this.activityTabs.runInTransaction((/**
+             * @param {?} draft
+             * @return {?}
+             */
+            function (draft) {
+                draft.value = draft.value.slice(0, 1 + _this.tabs.selectedIndex);
+            }));
+        }
+    };
+    /**
+     * Synchronises the selected tab index.  Returns true if there was no change to the selected index.
+     */
+    // @Trace()
+    /**
+     * Synchronises the selected tab index.  Returns true if there was no change to the selected index.
+     * @private
+     * @return {?}
+     */
+    // @Trace()
+    ActivityContainerComponent.prototype.synchroniseSelectedTabIndex = /**
+     * Synchronises the selected tab index.  Returns true if there was no change to the selected index.
+     * @private
+     * @return {?}
+     */
+    // @Trace()
+    function () {
+        /** @type {?} */
+        var previousIndex = this.tabs.selectedIndex;
+        /** @type {?} */
+        var newIndex = this.activityTabs.query().findIndex((/**
+         * @param {?} t
+         * @return {?}
+         */
+        function (t) { return t.isComplete(); })) - 1;
+        this.tabs.selectedIndex = newIndex;
+        return previousIndex === newIndex;
+    };
+    // @Trace()
+    // @Trace()
+    /**
+     * @private
      * @return {?}
      */
-    ActivityContainerComponent.prototype.confirmThen = /**
-     * @template D, R, E
-     * @param {?} confirm
-     * @param {?} activityType
-     * @param {?=} data
+    ActivityContainerComponent.prototype.onAnimationFinished = 
+    // @Trace()
+    /**
+     * @private
      * @return {?}
      */
-    function (confirm, activityType, data) {
-        return this.startActivity(ConfirmThenDialogComponent, {
-            confirm: confirm,
-            activityType: activityType,
-            data: data
-        });
+    function () {
+        this.getSelectedOutlet().component.onActivityReady();
+        this.cleanupStaleActivities();
+        this.updateActivityList();
     };
     /**
      * @private
      * @return {?}
      */
-    ActivityContainerComponent.prototype.onAnimationFinished = /**
+    ActivityContainerComponent.prototype.updateActivityList = /**
      * @private
      * @return {?}
      */
     function () {
-        var _this = this;
-        this.activityOutletTabs.value = this.activityOutletTabs.value.filter((/**
-         * @param {?} tab
+        this._activityList.value = this.activityTabs.value.filter((/**
+         * @param {?} t
          * @return {?}
          */
-        function (tab) {
-            return !_this.obsoleteTabs.includes(tab);
-        }));
-        this.obsoleteTabs = [];
-        this.outlets.toArray()[this.tabs.selectedIndex].notifyReady();
+        function (t) { return !t.isComplete() && t.isComponentRealised(); })).map((/**
+         * @param {?} t
+         * @return {?}
+         */
+        function (t) { return t.component; }));
     };
     /**
      * @private
      * @return {?}
      */
-    ActivityContainerComponent.prototype.animateTabs = /**
+    ActivityContainerComponent.prototype.getSelectedOutlet = /**
      * @private
      * @return {?}
      */
     function () {
-        if (!this.finished) {
-            this.tabs.selectedIndex = this.activityOutletTabs.length - this.obsoleteTabs.length;
-        }
+        return this.outlets.toArray()[this.tabs.selectedIndex];
     };
     ActivityContainerComponent.decorators = [
         { type: Component, args: [{
                     selector: 'angular-ui-powerups-activity-container',
-                    template: "<mat-tab-group #tabs no-tab-header [dynamicHeight]=\"true\">\n  <mat-tab>\n    <angular-ui-powerups-activity-outlet [interactionContext]=\"this\"\n                                         [activityContext]=\"initialActivityOutletContext\"></angular-ui-powerups-activity-outlet>\n  </mat-tab>\n  <mat-tab *ngFor=\"let tab of activityOutletTabs.value\">\n    <angular-ui-powerups-activity-outlet [interactionContext]=\"this\"\n                                         [activityContext]=\"tab\"></angular-ui-powerups-activity-outlet>\n  </mat-tab>\n</mat-tab-group>\n",
+                    template: "<mat-tab-group #tabs no-tab-header [dynamicHeight]=\"true\">\n  <mat-tab *ngFor=\"let tab of activityTabs.value\">\n    <angular-ui-powerups-activity-outlet [interactionContext]=\"this\"\n                                         [activityContext]=\"tab\"></angular-ui-powerups-activity-outlet>\n  </mat-tab>\n</mat-tab-group>\n",
                     styles: [":host{display:block}"]
                 }] }
     ];
@@ -1648,25 +1784,21 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
         outlets: [{ type: ViewChildren, args: [ActivityOutletComponent,] }]
     };
     return ActivityContainerComponent;
-}(DisposableComponent));
+}(InteractionContext));
 if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    ActivityContainerComponent.prototype.activityFinishedEvents;
     /** @type {?} */
     ActivityContainerComponent.prototype.parentInteractionContext;
     /** @type {?} */
-    ActivityContainerComponent.prototype.initialActivityOutletContext;
-    /** @type {?} */
-    ActivityContainerComponent.prototype.currentActivity;
-    /** @type {?} */
     ActivityContainerComponent.prototype.tabs;
     /** @type {?} */
     ActivityContainerComponent.prototype.outlets;
     /** @type {?} */
-    ActivityContainerComponent.prototype.activityOutletTabs;
-    /**
-     * @type {?}
-     * @private
-     */
-    ActivityContainerComponent.prototype.obsoleteTabs;
+    ActivityContainerComponent.prototype.activityTabs;
     /**
      * @type {?}
      * @private
@@ -1678,24 +1810,6 @@ if (false) {
      */
     ActivityContainerComponent.prototype._activityList;
 }
-(function (ActivityContainerComponent) {
-    /**
-     * @record
-     * @template D, R, E
-     */
-    function ActivityContext() { }
-    ActivityContainerComponent.ActivityContext = ActivityContext;
-    if (false) {
-        /** @type {?} */
-        ActivityContext.prototype.activityClass;
-        /** @type {?} */
-        ActivityContext.prototype.activityData;
-        /** @type {?} */
-        ActivityContext.prototype.onDone;
-        /** @type {?} */
-        ActivityContext.prototype.onCancel;
-    }
-})(ActivityContainerComponent || (ActivityContainerComponent = {}));
 
 /**
  * @fileoverview added by tsickle
@@ -1703,19 +1817,68 @@ if (false) {
  */
 /** @type {?} */
 var DIALOG_INTERACTION_SERVICE_DEFAULTS = new InjectionToken('DIALOG_INTERACTION_SERVICE_DEFAULTS');
+var Guard = /** @class */ (function (_super) {
+    __extends(Guard, _super);
+    function Guard() {
+        return _super.call(this, { initialValue: false }) || this;
+    }
+    Object.defineProperty(Guard.prototype, "value", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this.store.read();
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @template R
+     * @param {?} fun
+     * @return {?}
+     */
+    Guard.prototype.whileTrue = /**
+     * @template R
+     * @param {?} fun
+     * @return {?}
+     */
+    function (fun) {
+        this.startTransaction().commit(true);
+        try {
+            return fun();
+        }
+        finally {
+            this.startTransaction().commit(false);
+        }
+    };
+    /**
+     * @template R
+     * @param {?} fun
+     * @param {?=} defaultValue
+     * @return {?}
+     */
+    Guard.prototype.runIfFalse = /**
+     * @template R
+     * @param {?} fun
+     * @param {?=} defaultValue
+     * @return {?}
+     */
+    function (fun, defaultValue) {
+        if (defaultValue === void 0) { defaultValue = null; }
+        return !this.value ? fun() : defaultValue;
+    };
+    return Guard;
+}(ValueModel));
 var DialogInteractionService = /** @class */ (function (_super) {
     __extends(DialogInteractionService, _super);
-    function DialogInteractionService(dialogService, router, dialogServiceDefaults, matDialogDefaultConfig) {
+    function DialogInteractionService(dialogService, dialogServiceDefaults, matDialogDefaultConfig) {
         var _this = _super.call(this) || this;
         _this.dialogService = dialogService;
-        _this.router = router;
         _this.dialogServiceDefaults = dialogServiceDefaults;
         _this.matDialogDefaultConfig = matDialogDefaultConfig;
         _this._activityList = new DelegatingListModel();
-        _this._active = false;
+        _this.startingGuard = new Guard();
         assert$1.notNil(dialogService);
-        var _a = Dsl.disposeWith(_this), chain = _a.chain, observe = _a.observe;
-        _this.currentActivity = chain(_this.activityList).last();
         return _this;
     }
     /**
@@ -1725,7 +1888,7 @@ var DialogInteractionService = /** @class */ (function (_super) {
      * @return {?}
      */
     function () {
-        return this._active;
+        return !!this.currentActivityId;
     };
     /**
      * @return {?}
@@ -1734,7 +1897,7 @@ var DialogInteractionService = /** @class */ (function (_super) {
      * @return {?}
      */
     function () {
-        this.currentActivity.value.cancel(null);
+        this.currentActivity.cancel(null);
     };
     Object.defineProperty(DialogInteractionService.prototype, "activityList", {
         get: /**
@@ -1787,56 +1950,59 @@ var DialogInteractionService = /** @class */ (function (_super) {
              */
             function (a) { return a.constructor.name; })).join(', '));
         }
-        this._active = true;
-        /** @type {?} */
-        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'
-        });
-        /** @type {?} */
-        var matDialogRef = (/** @type {?} */ (this.dialogService.open(ActivityContainerComponent, config)));
-        return new Promise((/**
-         * @param {?} resolve
-         * @param {?} reject
+        return this.startingGuard.whileTrue((/**
          * @return {?}
          */
-        function (resolve, reject) {
+        function () {
+            _this.currentActivityId = v1();
             /** @type {?} */
-            var activityContainer = matDialogRef.componentInstance;
-            activityContainer.parentInteractionContext = _this;
-            self.safelyUpdateActivityListDelegate(activityContainer.activityList);
-            activityContainer.initialise({
-                activityClass: activityType,
-                activityData: data,
-                onDone: /**
-                 * @param {?} result
-                 * @return {?}
-                 */
-                function (result) {
-                    // TODO: should I be calling resolve after close?
-                    resolve(result);
-                    matDialogRef.close(result);
-                },
-                onCancel: /**
-                 * @param {?} error
-                 * @return {?}
-                 */
-                function (error) {
-                    // TODO: should I be calling reject after close?
-                    reject(error);
-                    matDialogRef.close(error);
-                }
+            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'
             });
-            matDialogRef.updateSize();
-        })).finally((/**
-         * @return {?}
-         */
-        function () {
-            self.safelyUpdateActivityListDelegate(null);
-            self._active = false;
+            /** @type {?} */
+            var matDialogRef = (/** @type {?} */ (_this.dialogService.open(ActivityContainerComponent, config)));
+            return new Promise((/**
+             * @param {?} resolve
+             * @param {?} reject
+             * @return {?}
+             */
+            function (resolve, reject) {
+                /** @type {?} */
+                var activityContainer = matDialogRef.componentInstance;
+                activityContainer.parentInteractionContext = _this;
+                self.safelyUpdateActivityListDelegate(activityContainer.activityList);
+                activityContainer.initialActivityOutletContext = {
+                    activityClass: activityType,
+                    activityData: data,
+                    onDone: /**
+                     * @param {?} result
+                     * @return {?}
+                     */
+                    function (result) {
+                        resolve(result);
+                        matDialogRef.close(result);
+                    },
+                    onCancel: /**
+                     * @param {?} error
+                     * @return {?}
+                     */
+                    function (error) {
+                        reject(error);
+                        matDialogRef.close(error);
+                    }
+                };
+                matDialogRef.updateSize();
+            })).finally((/**
+             * @return {?}
+             */
+            function () {
+                _this.currentActivityId = null;
+                self.safelyUpdateActivityListDelegate(null);
+            }));
         }));
     };
     /**
@@ -1911,16 +2077,13 @@ var DialogInteractionService = /** @class */ (function (_super) {
     /** @nocollapse */
     DialogInteractionService.ctorParameters = function () { return [
         { type: MatDialog },
-        { type: Router },
         { type: MatDialogConfig, decorators: [{ type: Optional }, { type: Inject, args: [DIALOG_INTERACTION_SERVICE_DEFAULTS,] }] },
         { type: MatDialogConfig, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DIALOG_DEFAULT_OPTIONS,] }] }
     ]; };
-    /** @nocollapse */ DialogInteractionService.ngInjectableDef = ɵɵdefineInjectable({ factory: function DialogInteractionService_Factory() { return new DialogInteractionService(ɵɵinject(MatDialog$1), ɵɵinject(Router), ɵɵinject(DIALOG_INTERACTION_SERVICE_DEFAULTS, 8), ɵɵinject(MAT_DIALOG_DEFAULT_OPTIONS, 8)); }, token: DialogInteractionService, providedIn: "root" });
+    /** @nocollapse */ DialogInteractionService.ngInjectableDef = ɵɵdefineInjectable({ factory: function DialogInteractionService_Factory() { return new DialogInteractionService(ɵɵinject(MatDialog$1), ɵɵinject(DIALOG_INTERACTION_SERVICE_DEFAULTS, 8), ɵɵinject(MAT_DIALOG_DEFAULT_OPTIONS, 8)); }, token: DialogInteractionService, providedIn: "root" });
     return DialogInteractionService;
 }(InteractionContext));
 if (false) {
-    /** @type {?} */
-    DialogInteractionService.prototype.currentActivity;
     /**
      * @type {?}
      * @private
@@ -1930,17 +2093,17 @@ if (false) {
      * @type {?}
      * @private
      */
-    DialogInteractionService.prototype._active;
+    DialogInteractionService.prototype.startingGuard;
     /**
      * @type {?}
      * @private
      */
-    DialogInteractionService.prototype.dialogService;
+    DialogInteractionService.prototype.currentActivityId;
     /**
      * @type {?}
      * @private
      */
-    DialogInteractionService.prototype.router;
+    DialogInteractionService.prototype.dialogService;
     /** @type {?} */
     DialogInteractionService.prototype.dialogServiceDefaults;
     /** @type {?} */
@@ -2530,10 +2693,92 @@ if (false) {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
+var NavigationSession = /** @class */ (function () {
+    function NavigationSession(isPopState, initialUrl) {
+        this.isPopState = isPopState;
+        this.initialUrl = initialUrl;
+        this._alreadyAccepted = [];
+        console.log('NavigationSession', { isPopState: isPopState, initialUrl: initialUrl });
+    }
+    /**
+     * @param {?} placeComponent
+     * @return {?}
+     */
+    NavigationSession.prototype.alreadyAccepted = /**
+     * @param {?} placeComponent
+     * @return {?}
+     */
+    function (placeComponent) {
+        return this._alreadyAccepted.includes(placeComponent);
+    };
+    /**
+     * @param {?} component
+     * @return {?}
+     */
+    NavigationSession.prototype.rememberAcceptanceOf = /**
+     * @param {?} component
+     * @return {?}
+     */
+    function (component) {
+        this._alreadyAccepted.push(component);
+    };
+    return NavigationSession;
+}());
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    NavigationSession.prototype._alreadyAccepted;
+    /** @type {?} */
+    NavigationSession.prototype.isPopState;
+    /** @type {?} */
+    NavigationSession.prototype.initialUrl;
+}
 var PlaceRouter = /** @class */ (function () {
-    function PlaceRouter(router) {
+    function PlaceRouter(router, angularLocation) {
+        var _this = this;
         this.router = router;
+        this._navigationSession = new MutableValueModel();
+        angularLocation.onUrlChange((/**
+         * @param {?} url
+         * @return {?}
+         */
+        function (url) {
+            console.log("### " + url);
+        }));
+        this.router.events.subscribe((/**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
+            // console.log(`${event.constructor.name}`, location.pathname, angularLocation.getState());
+            // 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 NavigationStart && !_this.navigationSession) {
+                _this._navigationSession.value = new NavigationSession(event.navigationTrigger === 'popstate', _this.router.routerState.snapshot.url);
+            }
+            if (event instanceof NavigationEnd) {
+                console.log('navigation ended');
+                _this._navigationSession.value = null;
+            }
+            if (event instanceof NavigationError) {
+                console.log('navigation errored');
+                _this._navigationSession.value = null;
+            }
+        }));
     }
+    Object.defineProperty(PlaceRouter.prototype, "navigationSession", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._navigationSession.value;
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * @param {?} activatedRoute
      * @param {?} previous
@@ -2576,7 +2821,6 @@ var PlaceRouter = /** @class */ (function () {
         var commands = (weHaveARouteId) ?
             [urlSegments[0].path, sanitised.getFormattedRouteId(), sanitised.getFormattedParameters()] :
             [urlSegments[0].path, sanitised.getFormattedParameters()];
-        console.log("redirect path", commands);
         return this.router.createUrlTree(commands);
     };
     /**
@@ -2620,12 +2864,18 @@ var PlaceRouter = /** @class */ (function () {
     ];
     /** @nocollapse */
     PlaceRouter.ctorParameters = function () { return [
-        { type: Router }
+        { type: Router },
+        { type: Location }
     ]; };
-    /** @nocollapse */ PlaceRouter.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(ɵɵinject(Router)); }, token: PlaceRouter, providedIn: "root" });
+    /** @nocollapse */ PlaceRouter.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(ɵɵinject(Router), ɵɵinject(Location)); }, token: PlaceRouter, providedIn: "root" });
     return PlaceRouter;
 }());
 if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceRouter.prototype._navigationSession;
     /**
      * @type {?}
      * @private
@@ -3705,8 +3955,8 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
         _this.placeHistory = placeHistory;
         _this.animate = true;
         _this._activePlace = new MutableValueModel();
-        _this._incomingRouteChange = new Guard();
-        _this._inOutletUpdate = new Guard();
+        _this._incomingRouteChange = new Guard$1();
+        _this._inOutletUpdate = new Guard$1();
         _this._activatedRouteModel = new MutableValueModel();
         _this._placeDefinition = new MutableValueModel();
         _this._resolvedParameters = new MutableValueModel();
@@ -4409,16 +4659,15 @@ function Result() { }
  */
 function ActivityOutletContext() { }
 if (false) {
-    /** @type {?} */
-    ActivityOutletContext.prototype.interactionContext;
     /** @type {?} */
     ActivityOutletContext.prototype.activityClass;
     /** @type {?} */
     ActivityOutletContext.prototype.activityData;
-    /** @type {?} */
-    ActivityOutletContext.prototype.onDone;
-    /** @type {?} */
-    ActivityOutletContext.prototype.onCancel;
+    /**
+     * @param {?} component
+     * @return {?}
+     */
+    ActivityOutletContext.prototype.componentReady = function (component) { };
 }
 
 /**
@@ -4581,33 +4830,12 @@ if (false) {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var LeavePlaceGuard = /** @class */ (function () {
-    function LeavePlaceGuard(router, injector, interactionContext, location) {
+    function LeavePlaceGuard(router, injector, placeRouter, interactionContext, angularLocation) {
         this.router = router;
         this.injector = injector;
+        this.placeRouter = placeRouter;
         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 NavigationEnd) {
-                console.log('navigation ended');
-                self._alreadyAccepted = [];
-            }
-            if (event instanceof NavigationError) {
-                console.log('navigation errored');
-                self._alreadyAccepted = [];
-            }
-        }));
+        this.angularLocation = angularLocation;
     }
     /**
      * @param {?} component
@@ -4624,105 +4852,45 @@ var LeavePlaceGuard = /** @class */ (function () {
      * @return {?}
      */
     function (component, currentRoute, currentState, nextState) {
-        var _this = this;
-        /** @type {?} */
-        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);
-                        return false;
-                    }
-                    else {
-                        if (_this.interactionContext.isActive()) {
-                            _this.interactionContext.currentActivity.value.cancel(null);
-                            return false;
+        return __awaiter(this, void 0, void 0, function () {
+            var placeDefinitionPath, self_1, canLeave;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        placeDefinitionPath = "/" + component.placeDefinition.path;
+                        if (!this.placeRouter.navigationSession.alreadyAccepted(component)) return [3 /*break*/, 1];
+                        return [2 /*return*/, true];
+                    case 1:
+                        if (!!nextState.url.startsWith(placeDefinitionPath)) return [3 /*break*/, 3];
+                        self_1 = this;
+                        return [4 /*yield*/, component.canDeactivate()];
+                    case 2:
+                        canLeave = _a.sent();
+                        // component is happy to leave but we need to check if it's left an interaction
+                        // open.  If so we close and stay where we are.
+                        if (canLeave && this.interactionContext.isActive()) {
+                            canLeave = false;
+                            console.log("cancelling", { activity: this.interactionContext.currentActivity });
+                            this.interactionContext.currentActivity.cancel(null);
+                        }
+                        // If we're still leaving then remember it since angular will call this method multiple
+                        // times if any route parameters are changed along the way.
+                        if (canLeave) {
+                            self_1.placeRouter.navigationSession.rememberAcceptanceOf(component);
                         }
                         else {
-                            return true;
+                            // Angular doesn't preserve the url when a guard cancels the back button.
+                            // See https://github.com/angular/angular/issues/13586#issuecomment-432795720
+                            if (this.placeRouter.navigationSession.isPopState) {
+                                console.log('cancelled during popstate');
+                                this.angularLocation.go(this.placeRouter.navigationSession.initialUrl);
+                            }
                         }
-                    }
-                })).then((/**
-                 * @param {?} canDeactivate
-                 * @return {?}
-                 */
-                function (canDeactivate) {
-                    if (canDeactivate) {
-                        self_1._alreadyAccepted.push(component);
-                    }
-                    return canDeactivate;
-                }));
-            }
-            return true;
-        }
-    };
-    /**
-     * @param {?} placeComponent
-     * @return {?}
-     */
-    LeavePlaceGuard.prototype.alreadyAccepted = /**
-     * @param {?} placeComponent
-     * @return {?}
-     */
-    function (placeComponent) {
-        return this._alreadyAccepted.includes(placeComponent);
+                        return [2 /*return*/, canLeave];
+                    case 3: return [2 /*return*/, true];
+                }
+            });
+        });
     };
     LeavePlaceGuard.decorators = [
         { type: Injectable, args: [{
@@ -4733,16 +4901,11 @@ var LeavePlaceGuard = /** @class */ (function () {
     LeavePlaceGuard.ctorParameters = function () { return [
         { type: Router },
         { type: Injector },
+        { type: PlaceRouter },
         { type: InteractionContext },
         { type: Location }
     ]; };
-    /** @nocollapse */ LeavePlaceGuard.ngInjectableDef = ɵɵdefineInjectable({ factory: function LeavePlaceGuard_Factory() { return new LeavePlaceGuard(ɵɵinject(Router), ɵɵinject(INJECTOR), ɵɵinject(InteractionContext), ɵɵinject(Location)); }, token: LeavePlaceGuard, providedIn: "root" });
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [PlaceComponent]),
-        __metadata("design:returntype", Boolean)
-    ], LeavePlaceGuard.prototype, "alreadyAccepted", null);
+    /** @nocollapse */ LeavePlaceGuard.ngInjectableDef = ɵɵdefineInjectable({ factory: function LeavePlaceGuard_Factory() { return new LeavePlaceGuard(ɵɵinject(Router), ɵɵinject(INJECTOR), ɵɵinject(PlaceRouter), ɵɵinject(InteractionContext), ɵɵinject(Location)); }, token: LeavePlaceGuard, providedIn: "root" });
     return LeavePlaceGuard;
 }());
 if (false) {
@@ -4750,21 +4913,21 @@ if (false) {
      * @type {?}
      * @private
      */
-    LeavePlaceGuard.prototype._alreadyAccepted;
+    LeavePlaceGuard.prototype.router;
     /**
      * @type {?}
      * @private
      */
-    LeavePlaceGuard.prototype.router;
+    LeavePlaceGuard.prototype.injector;
     /**
      * @type {?}
      * @private
      */
-    LeavePlaceGuard.prototype.injector;
+    LeavePlaceGuard.prototype.placeRouter;
     /** @type {?} */
     LeavePlaceGuard.prototype.interactionContext;
     /** @type {?} */
-    LeavePlaceGuard.prototype.location;
+    LeavePlaceGuard.prototype.angularLocation;
 }
 
 /**
@@ -5073,5 +5236,5 @@ var ParameterType;
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { ACTIVITY_DATA, AbstractActivity, AbstractInputComponent, AbstractPlaceNavigationComponent, ActivityContainerComponent, ActivityOutletComponent, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CloseInteractionGuard, CommandDirective, ConfirmThenDialogComponent, ConfirmationDialogComponent, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DialogInteractionService, Dimension, DisposableComponent, EmptyStateComponent, FocusBindingDirective, InteractionContext, InteractionModule, LEFT_RIGHT_PLACE_ANIMATION, LeavePlaceGuard, ListPlaceNavComponent, NumberInputComponent, ParameterDefinition, ParameterSnapshot, ParameterType, PasswordInputComponent, Place, PlaceComponent, PlaceDefinition, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouteGuard, PlaceRouter, Point, ROUTE_PARAMETER_LIST_KEY, ResizeAwareComponent, RouteId, RouteParameter, RouteParameterList, RouteParameterValue, SelectInputComponent, StringInputComponent, TabbedPlaceNavigationComponent, leftRightPlaceAnimation, slideDownAndUpAnimation, CommandDirective as ɵa, FocusBindingDirective as ɵb, ConfirmThenDialogComponent as ɵba, InteractionContext as ɵbb, AlertDialogComponent as ɵbc, DIALOG_INTERACTION_SERVICE_DEFAULTS as ɵbe, DialogInteractionService as ɵbf, DisposableComponent as ɵc, NumberInputComponent as ɵd, AbstractInputComponent as ɵe, StringInputComponent as ɵf, PasswordInputComponent as ɵg, SelectInputComponent as ɵh, PlaceModule as ɵi, EmptyStateComponent as ɵj, BusyOverlayComponent as ɵk, PlaceOutletComponent as ɵl, leftRightPlaceAnimation as ɵm, LEFT_RIGHT_PLACE_ANIMATION as ɵn, PlaceRouter as ɵo, PlaceHistory as ɵp, TabbedPlaceNavigationComponent as ɵq, AbstractPlaceNavigationComponent as ɵr, ListPlaceNavComponent as ɵs, InteractionModule as ɵt, ActivityContainerComponent as ɵu, ActivityOutletComponent as ɵv, ConfirmationDialogComponent as ɵw, AbstractActivity as ɵx, ACTIVITY_DATA as ɵy };
+export { ACTIVITY_DATA, AbstractActivity, AbstractInputComponent, AbstractPlaceNavigationComponent, Activity, ActivityContainerComponent, ActivityOutletComponent, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CloseInteractionGuard, CommandDirective, ConfirmThenDialogComponent, ConfirmationDialogComponent, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DialogInteractionService, Dimension, DisposableComponent, EmptyStateComponent, FocusBindingDirective, InteractionContext, InteractionModule, LEFT_RIGHT_PLACE_ANIMATION, LeavePlaceGuard, ListPlaceNavComponent, NumberInputComponent, ParameterDefinition, ParameterSnapshot, ParameterType, PasswordInputComponent, Place, PlaceComponent, PlaceDefinition, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouteGuard, PlaceRouter, Point, ROUTE_PARAMETER_LIST_KEY, ResizeAwareComponent, RouteId, RouteParameter, RouteParameterList, RouteParameterValue, SelectInputComponent, StringInputComponent, TabbedPlaceNavigationComponent, leftRightPlaceAnimation, slideDownAndUpAnimation, CommandDirective as ɵa, FocusBindingDirective as ɵb, Activity as ɵba, ConfirmThenDialogComponent as ɵbc, AlertDialogComponent as ɵbd, DIALOG_INTERACTION_SERVICE_DEFAULTS as ɵbf, DialogInteractionService as ɵbg, DisposableComponent as ɵc, NumberInputComponent as ɵd, AbstractInputComponent as ɵe, StringInputComponent as ɵf, PasswordInputComponent as ɵg, SelectInputComponent as ɵh, PlaceModule as ɵi, EmptyStateComponent as ɵj, BusyOverlayComponent as ɵk, PlaceOutletComponent as ɵl, leftRightPlaceAnimation as ɵm, LEFT_RIGHT_PLACE_ANIMATION as ɵn, PlaceRouter as ɵo, PlaceHistory as ɵp, TabbedPlaceNavigationComponent as ɵq, AbstractPlaceNavigationComponent as ɵr, ListPlaceNavComponent as ɵs, InteractionModule as ɵt, ActivityContainerComponent as ɵu, InteractionContext as ɵv, ActivityOutletComponent as ɵw, ConfirmationDialogComponent as ɵx, AbstractActivity as ɵy, ACTIVITY_DATA as ɵz };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map