@coolon/angular-ui-powerups 0.0.98 → 0.0.102

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('@angular/router'), require('lodash'), require('@coolon/typescript-utilities'), require('@angular/material/dialog'), 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('@angular/animations'), require('resize-observer-polyfill'), require('rxjs')) :
-    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', '@angular/router', 'lodash', '@coolon/typescript-utilities', '@angular/material/dialog', '@angular/material/icon', '@angular/material/list', '@angular/material/tooltip', '@typescript-plus/fast-memoize-decorator/dist/src', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations', 'resize-observer-polyfill', 'rxjs'], 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.ng.router, global.___default, global.typescriptUtilities, global.ng.material.dialog, global.ng.material.icon, global.ng.material.list, global.ng.material.tooltip, global.src, global.fastMemoizeDecorator, null, global.ng.animations, global.ResizeObserver, global.rxjs));
-}(this, function (exports, common, core, forms, material, tabs, animations, pectin, portal, router, ___default, typescriptUtilities, dialog, icon, list, tooltip, src, fastMemoizeDecorator, reflectMetadata, animations$1, ResizeObserver, rxjs) { '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('@angular/router'), require('@coolon/typescript-utilities'), 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'), require('@angular/material/dialog'), require('rxjs')) :
+    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', '@angular/router', '@coolon/typescript-utilities', '@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', '@angular/material/dialog', 'rxjs'], 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.ng.router, global.typescriptUtilities, global.ng.material.icon, global.ng.material.list, global.ng.material.tooltip, global.src, global.fastMemoizeDecorator, null, global.___default, global.ng.animations, global.ResizeObserver, global.ng.material.dialog, global.rxjs));
+}(this, function (exports, common, core, forms, material, tabs, animations, pectin, portal, router, typescriptUtilities, icon, list, tooltip, src, fastMemoizeDecorator, reflectMetadata, ___default, animations$1, ResizeObserver, dialog, rxjs) { 'use strict';
 
     var ___default__default = 'default' in ___default ? ___default['default'] : ___default;
     ResizeObserver = ResizeObserver && ResizeObserver.hasOwnProperty('default') ? ResizeObserver['default'] : ResizeObserver;
@@ -1105,7 +1105,7 @@
      * @abstract
      * @template D, R, E
      */
-    exports.ɵbh = /** @class */ (function (_super) {
+    exports.ɵbi = /** @class */ (function (_super) {
         __extends(Activity, _super);
         function Activity() {
             var _this = _super !== null && _super.apply(this, arguments) || this;
@@ -1195,12 +1195,12 @@
          * @type {?}
          * @private
          */
-        exports.ɵbh.prototype._busyModel;
+        exports.ɵbi.prototype._busyModel;
         /**
          * @type {?}
          * @private
          */
-        exports.ɵbh.prototype._activityContext;
+        exports.ɵbi.prototype._activityContext;
     }
     (function (Activity) {
         /**
@@ -1215,7 +1215,7 @@
             /** @type {?} */
             Callbacks.prototype.onCancel;
         }
-    })(exports.ɵbh || (exports.ɵbh = {}));
+    })(exports.ɵbi || (exports.ɵbi = {}));
 
     /**
      * @fileoverview added by tsickle
@@ -1237,7 +1237,7 @@
             return _super !== null && _super.apply(this, arguments) || this;
         }
         return AbstractActivity;
-    }(exports.ɵbh));
+    }(exports.ɵbi));
 
     /**
      * @fileoverview added by tsickle
@@ -1283,15 +1283,10 @@
     /**
      * @abstract
      */
-      /**
-     * @abstract
-     */
-    exports.ɵbc = /** @class */ (function (_super) {
+    var InteractionContext = /** @class */ (function (_super) {
         __extends(InteractionContext, _super);
         function InteractionContext() {
-            var _this = _super !== null && _super.apply(this, arguments) || this;
-            _this.activityListeners = new pectin.EventListenerList();
-            return _this;
+            return _super !== null && _super.apply(this, arguments) || this;
         }
         /**
          * Returns true if an activity is currently running.
@@ -1308,65 +1303,115 @@
             return this.active.value;
         };
         /**
-         * @param {?} listener
          * @return {?}
          */
-        InteractionContext.prototype.addActivityListener = /**
-         * @param {?} listener
+        InteractionContext.prototype.dispose = /**
          * @return {?}
          */
-        function (listener) {
-            return this.activityListeners.add(listener);
+        function () {
+            // TODO: think about auto cancelling any outstanding activity on dispose.
+            //       See NavigationState.Navigating for a use-case.
+            pectin.assert.isFalsey(this.isActive());
+            _super.prototype.dispose.call(this);
         };
         /**
-         * @protected
+         * Cancels the current activity and returns true the context is no longer active, false if
+         * there is still another activity running.
+         */
+        /**
+         * Cancels the current activity and returns true the context is no longer active, false if
+         * there is still another activity running.
          * @return {?}
          */
-        InteractionContext.prototype.notifyActivityStarted = /**
-         * @protected
+        InteractionContext.prototype.cancelCurrentActivity = /**
+         * Cancels the current activity and returns true the context is no longer active, false if
+         * there is still another activity running.
          * @return {?}
          */
         function () {
-            this.activityListeners.fire((/**
-             * @param {?} l
-             * @return {?}
-             */
-            function (l) { return l.onActivityStarted(); }));
+            return __awaiter(this, void 0, void 0, function () {
+                var when, activity;
+                var _this = this;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            when = pectin.Dsl.disposeWith(this).when;
+                            return [4 /*yield*/, this.getCurrentActivity()];
+                        case 1:
+                            activity = _a.sent();
+                            return [2 /*return*/, new Promise((/**
+                                 * @param {?} resolve
+                                 * @return {?}
+                                 */
+                                function (resolve) {
+                                    when.valueOf(_this.activeActivity)
+                                        .changes((/**
+                                     * @param {?} nextActivity
+                                     * @return {?}
+                                     */
+                                    function (nextActivity) {
+                                        resolve(!nextActivity);
+                                    }), { once: true });
+                                    activity.cancel();
+                                }))];
+                    }
+                });
+            });
         };
         /**
-         * @protected
          * @return {?}
          */
-        InteractionContext.prototype.notifyActivityFinished = /**
-         * @protected
+        InteractionContext.prototype.abort = /**
          * @return {?}
          */
         function () {
-            this.activityListeners.fire((/**
-             * @param {?} l
-             * @return {?}
-             */
-            function (l) { return l.onActivityFinished(); }));
+            return __awaiter(this, void 0, void 0, function () {
+                var count;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            pectin.assert.isTruthy(this.isActive());
+                            count = 1;
+                            return [4 /*yield*/, this.cancelCurrentActivity()];
+                        case 1:
+                            _a.sent();
+                            console.log("aborted -> " + count++);
+                            _a.label = 2;
+                        case 2:
+                            if (!this.isActive()) return [3 /*break*/, 4];
+                            return [4 /*yield*/, this.cancelCurrentActivity()];
+                        case 3:
+                            _a.sent();
+                            console.log("aborted -> " + count++);
+                            return [3 /*break*/, 2];
+                        case 4: return [2 /*return*/];
+                    }
+                });
+            });
         };
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", Promise)
+        ], InteractionContext.prototype, "abort", null);
         return InteractionContext;
     }(pectin.GarbageCollector));
     if (false) {
-        /**
-         * @type {?}
-         * @private
-         */
-        exports.ɵbc.prototype.activityListeners;
         /** @type {?} */
-        exports.ɵbc.prototype.activityList;
+        InteractionContext.prototype.active;
         /** @type {?} */
-        exports.ɵbc.prototype.active;
+        InteractionContext.prototype.activityList;
+        /** @type {?} */
+        InteractionContext.prototype.activeActivity;
         /**
          * Returns the activity that is currently active.
          * This model is only updated in the next tick after the view has been updated.
          * @abstract
+         * @protected
          * @return {?}
          */
-        exports.ɵbc.prototype.getCurrentActivity = function () { };
+        InteractionContext.prototype.getCurrentActivity = function () { };
         /**
          * @abstract
          * @template D, R, E
@@ -1374,25 +1419,25 @@
          * @param {?=} data
          * @return {?}
          */
-        exports.ɵbc.prototype.startActivity = function (activityType, data) { };
+        InteractionContext.prototype.startActivity = function (activityType, data) { };
         /**
          * @abstract
          * @param {?} alert
          * @return {?}
          */
-        exports.ɵbc.prototype.alert = function (alert) { };
+        InteractionContext.prototype.alert = function (alert) { };
         /**
          * @abstract
          * @param {?} confirm
          * @return {?}
          */
-        exports.ɵbc.prototype.confirm = function (confirm) { };
+        InteractionContext.prototype.confirm = function (confirm) { };
         /**
          * @abstract
          * @param {?} confirm
          * @return {?}
          */
-        exports.ɵbc.prototype.confirmOrReject = function (confirm) { };
+        InteractionContext.prototype.confirmOrReject = function (confirm) { };
         /**
          * Presents the confirmation to the user and runs the activity only if the user confirms.
          * @abstract
@@ -1402,25 +1447,8 @@
          * @param {?=} data the activity data.
          * @return {?}
          */
-        exports.ɵbc.prototype.confirmThen = function (confirm, activityType, data) { };
+        InteractionContext.prototype.confirmThen = function (confirm, activityType, data) { };
     }
-    (function (InteractionContext) {
-        /**
-         * @record
-         */
-        function Listener() { }
-        InteractionContext.Listener = Listener;
-        if (false) {
-            /**
-             * @return {?}
-             */
-            Listener.prototype.onActivityStarted = function () { };
-            /**
-             * @return {?}
-             */
-            Listener.prototype.onActivityFinished = function () { };
-        }
-    })(exports.ɵbc || (exports.ɵbc = {}));
 
     /**
      * @fileoverview added by tsickle
@@ -1429,7 +1457,7 @@
     /**
      * @template D, R, E
      */
-    exports.ɵbj = /** @class */ (function (_super) {
+    exports.ɵbk = /** @class */ (function (_super) {
         __extends(ConfirmThenDialogComponent, _super);
         function ConfirmThenDialogComponent(config, interactionContext) {
             var _this = _super.call(this) || this;
@@ -1495,15 +1523,15 @@
         /** @nocollapse */
         ConfirmThenDialogComponent.ctorParameters = function () { return [
             { type: undefined, decorators: [{ type: core.Inject, args: [ACTIVITY_DATA,] }] },
-            { type: exports.ɵbc }
+            { type: InteractionContext }
         ]; };
         return ConfirmThenDialogComponent;
     }(AbstractActivity));
     if (false) {
         /** @type {?} */
-        exports.ɵbj.prototype.config;
+        exports.ɵbk.prototype.config;
         /** @type {?} */
-        exports.ɵbj.prototype.interactionContext;
+        exports.ɵbk.prototype.interactionContext;
     }
     (function (ConfirmThenDialogComponent) {
         /**
@@ -1520,7 +1548,7 @@
             /** @type {?} */
             Data.prototype.data;
         }
-    })(exports.ɵbj || (exports.ɵbj = {}));
+    })(exports.ɵbk || (exports.ɵbk = {}));
 
     /**
      * @fileoverview added by tsickle
@@ -1589,13 +1617,14 @@
              */
             _this._activityListDelegate = new pectin.DelegatingListModel();
             var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-            when.listOf(_this.activityList).becomesPopulated((/**
-             * @param {?} activities
+            _this._currentActivity = chain(_this.activityList).last();
+            when.valueOf(_this._currentActivity).becomesTruthy((/**
+             * @param {?} activity
              * @return {?}
              */
-            function (activities) {
+            function (activity) {
                 if (_this.deferredGetCurrentActivity) {
-                    _this.deferredGetCurrentActivity.resolve(___default.last(activities));
+                    _this.deferredGetCurrentActivity.resolve(activity);
                     _this.deferredGetCurrentActivity = null;
                 }
             }));
@@ -1624,6 +1653,16 @@
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(InteractionContextBase.prototype, "activeActivity", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this._currentActivity;
+            },
+            enumerable: true,
+            configurable: true
+        });
         /**
          * Returns the activity that is currently active.
          * This model is only updated in the next tick after the view has been updated.
@@ -1650,12 +1689,14 @@
                             return [2 /*return*/, this.deferredGetCurrentActivity.promise];
                         }
                         else {
-                            if (this.activityList.length < 1) {
+                            if (!this._currentActivity.value) {
+                                // we'be been asked before we've got any activities, create a deferred promise
+                                // that we resolve when the list populates.
                                 this.deferredGetCurrentActivity = pectin.Deferred.defer();
                                 return [2 /*return*/, this.deferredGetCurrentActivity.promise];
                             }
                             else {
-                                return [2 /*return*/, ___default.last(this.activityList.value)];
+                                return [2 /*return*/, this._currentActivity.value];
                             }
                         }
                     }
@@ -1736,14 +1777,14 @@
          * @return {?}
          */
         function (confirm, activityType, data) {
-            return this._startActivity(exports.ɵbj, {
+            return this._startActivity(exports.ɵbk, {
                 confirm: confirm,
                 activityType: activityType,
                 data: data
             }, true);
         };
         return InteractionContextBase;
-    }(exports.ɵbc));
+    }(InteractionContext));
     if (false) {
         /**
          * Returns the current list of activities that are in progress.
@@ -1757,6 +1798,11 @@
          * @private
          */
         InteractionContextBase.prototype.deferredGetCurrentActivity;
+        /**
+         * @type {?}
+         * @private
+         */
+        InteractionContextBase.prototype._currentActivity;
         /**
          * @abstract
          * @protected
@@ -1828,7 +1874,7 @@
             var injector = core.Injector.create({
                 providers: [
                     {
-                        provide: exports.ɵbc,
+                        provide: InteractionContext,
                         useValue: this.interactionContext
                     },
                     { provide: ACTIVITY_DATA, useValue: activityContext.activityData }
@@ -2000,6 +2046,15 @@
             this._complete = true;
             this.activityCallbacks.onCancel(error);
         };
+        /**
+         * @return {?}
+         */
+        TabContext.prototype.dispose = /**
+         * @return {?}
+         */
+        function () {
+            this.component.dispose();
+        };
         return TabContext;
     }());
     if (false) {
@@ -2089,20 +2144,10 @@
             enumerable: true,
             configurable: true
         });
-        // get isFinished() {
-        //   return !this._initialActivityOutletContext;
-        // }
-        // get isFinished() {
-        //   return !this._initialActivityOutletContext;
-        // }
         /**
          * @return {?}
          */
-        ActivityContainerComponent.prototype.ngOnInit = 
-        // get isFinished() {
-        //   return !this._initialActivityOutletContext;
-        // }
-        /**
+        ActivityContainerComponent.prototype.ngOnInit = /**
          * @return {?}
          */
         function () {
@@ -2184,6 +2229,7 @@
          * @return {?}
          */
         function () {
+            this.updateActivityList();
             this._initialActivityOutletContext.value = null;
             this.initialActivityOutletContextEvent.emit(null);
         };
@@ -2216,14 +2262,24 @@
          * @return {?}
          */
         function () {
-            var _this = this;
             if (this.tabs.selectedIndex < this.activityTabs.length - 1) {
+                /** @type {?} */
+                var tabs = this.activityTabs.value;
+                /** @type {?} */
+                var remainingActivities_1 = tabs.slice(0, 1 + this.tabs.selectedIndex);
+                /** @type {?} */
+                var finishedActivityTabs = tabs.slice(1 + this.tabs.selectedIndex);
+                finishedActivityTabs.forEach((/**
+                 * @param {?} a
+                 * @return {?}
+                 */
+                function (a) { return a.dispose(); }));
                 this.activityTabs.runInTransaction((/**
                  * @param {?} draft
                  * @return {?}
                  */
                 function (draft) {
-                    draft.value = draft.value.slice(0, 1 + _this.tabs.selectedIndex);
+                    draft.value = remainingActivities_1;
                 }));
             }
         };
@@ -2355,206 +2411,357 @@
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     /**
-     * @template D, R, E
+     * @abstract
      */
-    var InplaceInteractionContextComponent = /** @class */ (function (_super) {
-        __extends(InplaceInteractionContextComponent, _super);
-        function InplaceInteractionContextComponent() {
-            var _this = _super.call(this) || this;
-            _this._active = new pectin.MutableValueModel(false);
-            return _this;
+    var   /**
+     * @abstract
+     */
+    ModalInteractionContextFactory = /** @class */ (function () {
+        function ModalInteractionContextFactory() {
         }
+        return ModalInteractionContextFactory;
+    }());
+    if (false) {
         /**
+         * @abstract
          * @return {?}
          */
-        InplaceInteractionContextComponent.prototype.ngAfterViewInit = /**
+        ModalInteractionContextFactory.prototype.createInteractionContext = function () { };
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /** @type {?} */
+    var inplaceMonitorCount = 0;
+    exports.ɵv = /** @class */ (function () {
+        function InteractionService(modelInteractionContextFactory) {
+            this.modelInteractionContextFactory = modelInteractionContextFactory;
+            this.garbage = new pectin.GarbageCollector();
+            this.exclusiveContext = new pectin.MutableValueModel();
+            this._activeModalInteractionContextModel = new pectin.MutableValueModel();
+            this._activeInlineInteractionContextModel = new pectin.MutableValueModel();
+            var _a = pectin.Dsl.disposeWith(this.garbage), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            this._activeInteractionContext = chain(this._activeModalInteractionContextModel)
+                .otherwise(this._activeInlineInteractionContextModel)
+                .pluck('interactionContext');
+            this.active = chain(this._activeInteractionContext).isNotNil();
+            this.modelInteractionActive = chain(this._activeModalInteractionContextModel).isNotNil();
+            this.inlineInteractionActive = chain(this._activeInlineInteractionContextModel).isNotNil();
+            // TODO: chain.concat(listOrValueModels) would be nice.
+            this.activeInteractionContextIds = chain(new pectin.MutableListModel())
+                .append(this._activeInlineInteractionContextModel)
+                .append(this._activeModalInteractionContextModel)
+                .rejectNil()
+                .pluck('id');
+        }
+        /**
+         * @return {?}
+         */
+        InteractionService.prototype.isActive = /**
          * @return {?}
          */
         function () {
-            this.setActivityList(this.interactionContext.activityList);
+            return this.active.value;
         };
-        Object.defineProperty(InplaceInteractionContextComponent.prototype, "active", {
-            get: /**
-             * @return {?}
-             */
-            function () {
-                return this._active.readonly;
-            },
-            enumerable: true,
-            configurable: true
-        });
         /**
-         * @protected
-         * @template D1, R1, E1
-         * @param {?} activityType
-         * @param {?=} data
          * @return {?}
          */
-        InplaceInteractionContextComponent.prototype._startActivity = /**
-         * @protected
-         * @template D1, R1, E1
-         * @param {?} activityType
-         * @param {?=} data
+        InteractionService.prototype.isModalActive = /**
          * @return {?}
          */
-        function (activityType, data) {
-            var _this = this;
-            this._active.value = true;
+        function () {
+            return this.modelInteractionActive.value;
+        };
+        /**
+         * @param {?} disposable
+         * @return {?}
+         */
+        InteractionService.prototype.createModalInteractionContextFor = /**
+         * @param {?} disposable
+         * @return {?}
+         */
+        function (disposable) {
+            /** @type {?} */
+            var context = this.modelInteractionContextFactory.createInteractionContext();
+            disposable.registerDisposable(new InteractionService.Monitor('modal', context, this._activeModalInteractionContextModel, this.exclusiveContext));
+            return context;
+        };
+        /**
+         * @param {?} interactionContext
+         * @return {?}
+         */
+        InteractionService.prototype._registerInplaceInteractionContext = /**
+         * @param {?} interactionContext
+         * @return {?}
+         */
+        function (interactionContext) {
+            interactionContext.registerDisposable(new InteractionService.Monitor("ip" + ++inplaceMonitorCount, interactionContext, this._activeInlineInteractionContextModel, this.exclusiveContext));
+        };
+        // @Trace()
+        // @Trace()
+        /**
+         * @return {?}
+         */
+        InteractionService.prototype.getActiveContext = 
+        // @Trace()
+        /**
+         * @return {?}
+         */
+        function () {
+            typescriptUtilities.assert.isTruthy(this.isActive());
+            return this._activeInteractionContext.value;
+        };
+        /**
+         * Creates an interaction context that will prevent any other contexts from starting an
+         * activity until it is disposed.  This is intended for use by the router for passing
+         * to PlaceComponent.canDeactivate(interactionContext).  This ensures components don't
+         * try and interact in a way that we can't track and synchronise with the browser back
+         * button.
+         */
+        /**
+         * Creates an interaction context that will prevent any other contexts from starting an
+         * activity until it is disposed.  This is intended for use by the router for passing
+         * to PlaceComponent.canDeactivate(interactionContext).  This ensures components don't
+         * try and interact in a way that we can't track and synchronise with the browser back
+         * button.
+         * @return {?}
+         */
+        InteractionService.prototype._createExclusiveModalInteractionContext = /**
+         * Creates an interaction context that will prevent any other contexts from starting an
+         * activity until it is disposed.  This is intended for use by the router for passing
+         * to PlaceComponent.canDeactivate(interactionContext).  This ensures components don't
+         * try and interact in a way that we can't track and synchronise with the browser back
+         * button.
+         * @return {?}
+         */
+        function () {
+            this.exclusiveContext.value = this.modelInteractionContextFactory.createInteractionContext();
             /** @type {?} */
             var self = this;
-            return new Promise((/**
-             * @param {?} resolve
-             * @param {?} reject
-             * @return {?}
-             */
-            function (resolve, reject) {
-                _this.interactionContext.initialActivityOutletContext = {
-                    activityClass: activityType,
-                    activityData: data,
-                    onDone: /**
-                     * @param {?} result
-                     * @return {?}
-                     */
-                    function (result) {
-                        self._active.value = false;
-                        resolve(result);
-                    },
-                    onCancel: /**
-                     * @param {?} error
-                     * @return {?}
-                     */
-                    function (error) {
-                        self._active.value = false;
-                        reject(error);
-                    }
-                };
-            }));
+            this.exclusiveContext.value.registerDisposable({
+                dispose: /**
+                 * @return {?}
+                 */
+                function () {
+                    self.exclusiveContext.value = null;
+                }
+            });
+            return this.exclusiveContext.value;
         };
-        InplaceInteractionContextComponent.decorators = [
-            { type: core.Component, args: [{
-                        selector: 'aup-inplace-interaction-context',
-                        template: "<mat-tab-group no-tab-header [selectedIndex]=\"isActive() ? 1 : 0\" full-height-tabs [dynamicHeight]=\"false\">\n  <mat-tab>\n    <ng-content></ng-content>\n  </mat-tab>\n  <mat-tab>\n    <aup-activity-container #activityContainer\n                            [(initialActivityOutletContext)]=\"initialActivityContext\"\n                            [dynamicHeight]=\"false\"></aup-activity-container>\n  </mat-tab>\n</mat-tab-group>\n\n",
-                        styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}"]
-                    }] }
+        InteractionService.decorators = [
+            { type: core.Injectable, args: [{
+                        providedIn: 'root'
+                    },] }
         ];
         /** @nocollapse */
-        InplaceInteractionContextComponent.ctorParameters = function () { return []; };
-        InplaceInteractionContextComponent.propDecorators = {
-            interactionContext: [{ type: core.ViewChild, args: ['activityContainer', { static: true },] }]
-        };
-        return InplaceInteractionContextComponent;
-    }(InteractionContextBase));
+        InteractionService.ctorParameters = function () { return [
+            { type: ModalInteractionContextFactory }
+        ]; };
+        /** @nocollapse */ InteractionService.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function InteractionService_Factory() { return new InteractionService(core.ɵɵinject(ModalInteractionContextFactory)); }, token: InteractionService, providedIn: "root" });
+        return InteractionService;
+    }());
     if (false) {
+        /**
+         * @type {?}
+         * @private
+         */
+        exports.ɵv.prototype.garbage;
         /** @type {?} */
-        InplaceInteractionContextComponent.prototype.interactionContext;
-        /** @type {?} */
-        InplaceInteractionContextComponent.prototype.initialActivityContext;
+        exports.ɵv.prototype.active;
         /**
          * @type {?}
          * @private
          */
-        InplaceInteractionContextComponent.prototype._active;
+        exports.ɵv.prototype.exclusiveContext;
+        /**
+         * @type {?}
+         * @private
+         */
+        exports.ɵv.prototype._activeModalInteractionContextModel;
+        /**
+         * @type {?}
+         * @private
+         */
+        exports.ɵv.prototype._activeInlineInteractionContextModel;
+        /**
+         * @type {?}
+         * @private
+         */
+        exports.ɵv.prototype._activeInteractionContext;
+        /** @type {?} */
+        exports.ɵv.prototype.activeInteractionContextIds;
+        /** @type {?} */
+        exports.ɵv.prototype.modelInteractionActive;
+        /** @type {?} */
+        exports.ɵv.prototype.inlineInteractionActive;
+        /** @type {?} */
+        exports.ɵv.prototype.modelInteractionContextFactory;
     }
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var InteractionOutletComponent = /** @class */ (function () {
-        function InteractionOutletComponent() {
+    (function (InteractionService) {
+        /**
+         * @record
+         */
+        function Callback() { }
+        InteractionService.Callback = Callback;
+        if (false) {
+            /**
+             * @param {?} monitor
+             * @return {?}
+             */
+            Callback.prototype.onStarted = function (monitor) { };
+            /**
+             * @param {?} monitor
+             * @return {?}
+             */
+            Callback.prototype.onFinished = function (monitor) { };
         }
-        InteractionOutletComponent.decorators = [
-            { type: core.Component, args: [{
-                        selector: 'aup-interaction-outlet',
-                        template: "<router-outlet name=\"interaction-context\"></router-outlet>\n",
-                        styles: [":host{display:block}"]
-                    }] }
-        ];
-        /** @nocollapse */
-        InteractionOutletComponent.ctorParameters = function () { return []; };
-        return InteractionOutletComponent;
-    }());
+        var Monitor = /** @class */ (function (_super) {
+            __extends(Monitor, _super);
+            function Monitor(id, interactionContext, currentActiveMonitor, exclusiveContext) {
+                var _this = _super.call(this) || this;
+                _this.id = id;
+                _this.interactionContext = interactionContext;
+                _this.currentActiveMonitor = currentActiveMonitor;
+                _this.exclusiveContext = exclusiveContext;
+                var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+                when.valueOf(interactionContext.active).becomesTruthy((/**
+                 * @return {?}
+                 */
+                function () { return _this.onStarted(); }));
+                when.valueOf(interactionContext.active).becomesFalsey((/**
+                 * @return {?}
+                 */
+                function () { return _this.onFinished(); }));
+                interactionContext.registerDisposable(_this);
+                return _this;
+            }
+            /**
+             * @protected
+             * @return {?}
+             */
+            Monitor.prototype.onStarted = /**
+             * @protected
+             * @return {?}
+             */
+            function () {
+                this.assertCanStart();
+                this.currentActiveMonitor.value = this;
+            };
+            /**
+             * @private
+             * @return {?}
+             */
+            Monitor.prototype.assertCanStart = /**
+             * @private
+             * @return {?}
+             */
+            function () {
+                typescriptUtilities.assert.isFalsey(this.currentActiveMonitor.value);
+                if (this.exclusiveContext.value && this.interactionContext !== this.exclusiveContext.value) {
+                    pectin.lang.illegalState('Interaction started while exclusive lock active.  This is usually because you using a different context during place.canDeactivate(interactionContext)');
+                }
+            };
+            /**
+             * @protected
+             * @return {?}
+             */
+            Monitor.prototype.onFinished = /**
+             * @protected
+             * @return {?}
+             */
+            function () {
+                this.assertCurrentlyActive();
+                this.currentActiveMonitor.value = null;
+            };
+            /**
+             * @private
+             * @return {?}
+             */
+            Monitor.prototype.assertCurrentlyActive = /**
+             * @private
+             * @return {?}
+             */
+            function () {
+                typescriptUtilities.assert.isTruthy(this.currentActiveMonitor.value === this);
+            };
+            return Monitor;
+        }(pectin.GarbageCollector));
+        InteractionService.Monitor = Monitor;
+        if (false) {
+            /** @type {?} */
+            Monitor.prototype.id;
+            /** @type {?} */
+            Monitor.prototype.interactionContext;
+            /** @type {?} */
+            Monitor.prototype.currentActiveMonitor;
+            /** @type {?} */
+            Monitor.prototype.exclusiveContext;
+        }
+    })(exports.ɵv || (exports.ɵv = {}));
 
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    var DialogInteractionContext = /** @class */ (function (_super) {
-        __extends(DialogInteractionContext, _super);
-        function DialogInteractionContext(dialogService, config) {
+    /**
+     * @template D, R, E
+     */
+    var InplaceInteractionContextComponent = /** @class */ (function (_super) {
+        __extends(InplaceInteractionContextComponent, _super);
+        function InplaceInteractionContextComponent(interactionService) {
             var _this = _super.call(this) || this;
-            _this.dialogService = dialogService;
-            _this.config = config;
-            _this._activeModel = new pectin.MutableValueModel(false);
-            typescriptUtilities.assert.notNil(dialogService);
-            _this.onDispose((/**
-             * @return {?}
-             */
-            function () {
-                if (_this.isActive()) {
-                    pectin.lang.illegalState('Dispose called while active.');
-                }
-            }));
+            _this.interactionService = interactionService;
+            _this._active = new pectin.MutableValueModel(false);
+            _this.interactionService._registerInplaceInteractionContext(_this);
             return _this;
         }
-        Object.defineProperty(DialogInteractionContext.prototype, "active", {
+        /**
+         * @return {?}
+         */
+        InplaceInteractionContextComponent.prototype.ngAfterViewInit = /**
+         * @return {?}
+         */
+        function () {
+            this.setActivityList(this.interactionContext.activityList);
+        };
+        Object.defineProperty(InplaceInteractionContextComponent.prototype, "active", {
             get: /**
              * @return {?}
              */
             function () {
-                return this._activeModel.readonly;
+                return this._active.readonly;
             },
             enumerable: true,
             configurable: true
         });
         /**
          * @protected
-         * @template D, R, E
+         * @template D1, R1, E1
          * @param {?} activityType
-         * @param {?} data
-         * @param {?=} disableClose
+         * @param {?=} data
          * @return {?}
          */
-        DialogInteractionContext.prototype._startActivity = /**
+        InplaceInteractionContextComponent.prototype._startActivity = /**
          * @protected
-         * @template D, R, E
+         * @template D1, R1, E1
          * @param {?} activityType
-         * @param {?} data
-         * @param {?=} disableClose
+         * @param {?=} data
          * @return {?}
          */
-        function (activityType, data, disableClose) {
+        function (activityType, data) {
             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._activeModel.value = true;
-            this.notifyActivityStarted();
-            /** @type {?} */
-            var config = __assign({}, this.config, {
-                data: data,
-                disableClose: disableClose,
-                panelClass: 'dialog-interaction-service'
-            });
+            this._active.value = true;
             /** @type {?} */
             var self = this;
-            /** @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;
-                self.safelyUpdateActivityListDelegate(activityContainer.activityList);
-                activityContainer.initialActivityOutletContext = {
+                _this.interactionContext.initialActivityOutletContext = {
                     activityClass: activityType,
                     activityData: data,
                     onDone: /**
@@ -2562,411 +2769,69 @@
                      * @return {?}
                      */
                     function (result) {
+                        self._active.value = false;
                         resolve(result);
-                        matDialogRef.close(true); // return true to let the after close listener know we've already handled it.
                     },
                     onCancel: /**
                      * @param {?} error
                      * @return {?}
                      */
                     function (error) {
+                        self._active.value = false;
                         reject(error);
-                        matDialogRef.close(true); // return true to let the after close listener know we've already handled it.
                     }
                 };
-                // we need to check if our onDone/onCancel methods above we called or if we were
-                // closed by the user clicking the backdrop.  If the later then we need to reject
-                // our promise.
-                matDialogRef.afterClosed().subscribe((/**
-                 * @param {?} promiseAlreadyFinished
-                 * @return {?}
-                 */
-                function (promiseAlreadyFinished) {
-                    if (!promiseAlreadyFinished) {
-                        reject('auto-closed');
-                    }
-                }));
-                matDialogRef.updateSize();
-                matDialogRef.afterOpened().subscribe((/**
-                 * @param {?} promiseAlreadyFinished
-                 * @return {?}
-                 */
-                function (promiseAlreadyFinished) {
-                    matDialogRef.updateSize();
-                }));
-            })).finally((/**
-             * @return {?}
-             */
-            function () {
-                _this._activeModel.value = false;
-                _this.notifyActivityFinished();
-                self.safelyUpdateActivityListDelegate(null);
-            }));
-        };
-        /**
-         * 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 {?}
-         */
-        DialogInteractionContext.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.setActivityList(delegate); }));
-        };
-        DialogInteractionContext.decorators = [
-            { type: core.Injectable, args: [{
-                        providedIn: 'root'
-                    },] }
-        ];
-        /** @nocollapse */
-        DialogInteractionContext.ctorParameters = function () { return [
-            { type: material.MatDialog },
-            { type: dialog.MatDialogConfig }
-        ]; };
-        /** @nocollapse */ DialogInteractionContext.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function DialogInteractionContext_Factory() { return new DialogInteractionContext(core.ɵɵinject(dialog.MatDialog), core.ɵɵinject(dialog.MatDialogConfig)); }, token: DialogInteractionContext, providedIn: "root" });
-        return DialogInteractionContext;
-    }(InteractionContextBase));
-    if (false) {
-        /**
-         * @type {?}
-         * @private
-         */
-        DialogInteractionContext.prototype._activeModel;
-        /**
-         * @type {?}
-         * @private
-         */
-        DialogInteractionContext.prototype.dialogService;
-        /** @type {?} */
-        DialogInteractionContext.prototype.config;
-    }
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    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;
-    }(pectin.ValueModel));
-    /**
-     * @abstract
-     */
-    var   /**
-     * @abstract
-     */
-    ModalInteractionService = /** @class */ (function (_super) {
-        __extends(ModalInteractionService, _super);
-        function ModalInteractionService() {
-            var _this = _super.call(this) || this;
-            _this._activityListeners = new pectin.EventListenerList();
-            return _this;
-        }
-        /**
-         * @return {?}
-         */
-        ModalInteractionService.prototype.isActive = /**
-         * @return {?}
-         */
-        function () {
-            return this.active.value;
-        };
-        /**
-         * @param {?} listener
-         * @return {?}
-         */
-        ModalInteractionService.prototype.addActivityListener = /**
-         * @param {?} listener
-         * @return {?}
-         */
-        function (listener) {
-            return this._activityListeners.add(listener);
-        };
-        /**
-         * @protected
-         * @return {?}
-         */
-        ModalInteractionService.prototype.notifyActivityStarted = /**
-         * @protected
-         * @return {?}
-         */
-        function () {
-            this._activityListeners.fire((/**
-             * @param {?} l
-             * @return {?}
-             */
-            function (l) { return l.onActivityStarted(); }));
-        };
-        /**
-         * @protected
-         * @return {?}
-         */
-        ModalInteractionService.prototype.notifyActivityFinished = /**
-         * @protected
-         * @return {?}
-         */
-        function () {
-            this._activityListeners.fire((/**
-             * @param {?} l
-             * @return {?}
-             */
-            function (l) { return l.onActivityFinished(); }));
-        };
-        return ModalInteractionService;
-    }(pectin.GarbageCollector));
-    if (false) {
-        /**
-         * @type {?}
-         * @private
-         */
-        ModalInteractionService.prototype._activityListeners;
-        /** @type {?} */
-        ModalInteractionService.prototype.active;
-        /**
-         * @abstract
-         * @param {?} disposable
-         * @return {?}
-         */
-        ModalInteractionService.prototype.createInteractionContextFor = function (disposable) { };
-        /**
-         * @abstract
-         * @return {?}
-         */
-        ModalInteractionService.prototype.createExclusiveInteractionContext = function () { };
-        /**
-         * @abstract
-         * @return {?}
-         */
-        ModalInteractionService.prototype.getCurrentActivity = function () { };
-    }
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    /** @type {?} */
-    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) {
-            var _this = _super.call(this) || this;
-            _this.dialogService = dialogService;
-            _this.dialogServiceDefaults = dialogServiceDefaults;
-            _this.matDialogDefaultConfig = matDialogDefaultConfig;
-            _this._activeInteractionContextModel = new pectin.MutableValueModel();
-            typescriptUtilities.assert.notNil(dialogService);
-            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-            _this.active = chain(_this._activeInteractionContextModel).isNotNil();
-            return _this;
-        }
-        /**
-         * @param {?} disposable
-         * @return {?}
-         */
-        DialogInteractionService.prototype.createInteractionContextFor = /**
-         * @param {?} disposable
-         * @return {?}
-         */
-        function (disposable) {
-            return disposable.registerDisposable(this._createInteractionContext());
-        };
-        /**
-         * @return {?}
-         */
-        DialogInteractionService.prototype._createInteractionContext = /**
-         * @return {?}
-         */
-        function () {
-            /** @type {?} */
-            var config = __assign({ autoFocus: false, hasBackdrop: true, closeOnNavigation: false }, this.matDialogDefaultConfig, this.dialogServiceDefaults);
-            /** @type {?} */
-            var self = this;
-            /** @type {?} */
-            var dialogInteractionContext = new DialogInteractionContext(this.dialogService, config);
-            dialogInteractionContext.registerDisposable(dialogInteractionContext.addActivityListener({
-                onActivityStarted: /**
-                 * @return {?}
-                 */
-                function () {
-                    self.onActivityStarted(dialogInteractionContext);
-                },
-                onActivityFinished: /**
-                 * @return {?}
-                 */
-                function () {
-                    self.onActivityFinished(dialogInteractionContext);
-                }
-            }));
-            return dialogInteractionContext;
-        };
-        /**
-         * @return {?}
-         */
-        DialogInteractionService.prototype.createExclusiveInteractionContext = /**
-         * @return {?}
-         */
-        function () {
-            this.exclusiveContext = this._createInteractionContext();
-            /** @type {?} */
-            var self = this;
-            this.exclusiveContext.registerDisposable({
-                dispose: /**
-                 * @return {?}
-                 */
-                function () {
-                    self.exclusiveContext = null;
-                }
-            });
-            return this.exclusiveContext;
-        };
-        // @Trace()
-        // @Trace()
-        /**
-         * @param {?} dialogInteractionContext
-         * @return {?}
-         */
-        DialogInteractionService.prototype.onActivityStarted = 
-        // @Trace()
-        /**
-         * @param {?} dialogInteractionContext
-         * @return {?}
-         */
-        function (dialogInteractionContext) {
-            typescriptUtilities.assert.isFalsey(this.isActive());
-            if (this.exclusiveContext && dialogInteractionContext !== this.exclusiveContext) {
-                pectin.lang.illegalState("Interaction started while exclusive lock active.  This is usually because you using a different context during place.canDeactivate(interactionContext)");
-            }
-            this._activeInteractionContextModel.value = dialogInteractionContext;
-            this.notifyActivityStarted();
-        };
-        // @Trace()
-        // @Trace()
-        /**
-         * @param {?} dialogInteractionContext
-         * @return {?}
-         */
-        DialogInteractionService.prototype.onActivityFinished = 
-        // @Trace()
-        /**
-         * @param {?} dialogInteractionContext
-         * @return {?}
-         */
-        function (dialogInteractionContext) {
-            typescriptUtilities.assert.isTruthy(this._activeInteractionContextModel.value === dialogInteractionContext);
-            this._activeInteractionContextModel.value = null;
-            this.notifyActivityFinished();
-        };
-        /**
-         * @return {?}
-         */
-        DialogInteractionService.prototype.getCurrentActivity = /**
-         * @return {?}
-         */
-        function () {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    typescriptUtilities.assert.isTruthy(this.isActive());
-                    return [2 /*return*/, this._activeInteractionContextModel.value.getCurrentActivity()];
-                });
-            });
-        };
-        DialogInteractionService.decorators = [
-            { type: core.Injectable, args: [{
-                        providedIn: 'root'
-                    },] }
+            }));
+        };
+        InplaceInteractionContextComponent.decorators = [
+            { type: core.Component, args: [{
+                        selector: 'aup-inplace-interaction-context',
+                        template: "<mat-tab-group no-tab-header [selectedIndex]=\"isActive() ? 1 : 0\" full-height-tabs [dynamicHeight]=\"false\">\n  <mat-tab>\n    <ng-content></ng-content>\n  </mat-tab>\n  <mat-tab>\n    <aup-activity-container #activityContainer\n                            [(initialActivityOutletContext)]=\"initialActivityContext\"\n                            [dynamicHeight]=\"false\"></aup-activity-container>\n  </mat-tab>\n</mat-tab-group>\n\n",
+                        styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}"]
+                    }] }
         ];
         /** @nocollapse */
-        DialogInteractionService.ctorParameters = function () { return [
-            { type: material.MatDialog },
-            { 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,] }] }
+        InplaceInteractionContextComponent.ctorParameters = function () { return [
+            { type: exports.ɵv }
         ]; };
-        /** @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" });
-        return DialogInteractionService;
-    }(ModalInteractionService));
+        InplaceInteractionContextComponent.propDecorators = {
+            interactionContext: [{ type: core.ViewChild, args: ['activityContainer', { static: true },] }]
+        };
+        return InplaceInteractionContextComponent;
+    }(InteractionContextBase));
     if (false) {
-        /**
-         * @type {?}
-         * @private
-         */
-        DialogInteractionService.prototype._activeInteractionContextModel;
         /** @type {?} */
-        DialogInteractionService.prototype.active;
-        /**
-         * @type {?}
-         * @private
-         */
-        DialogInteractionService.prototype.exclusiveContext;
+        InplaceInteractionContextComponent.prototype.interactionContext;
+        /** @type {?} */
+        InplaceInteractionContextComponent.prototype.initialActivityContext;
         /**
          * @type {?}
          * @private
          */
-        DialogInteractionService.prototype.dialogService;
-        /** @type {?} */
-        DialogInteractionService.prototype.dialogServiceDefaults;
+        InplaceInteractionContextComponent.prototype._active;
         /** @type {?} */
-        DialogInteractionService.prototype.matDialogDefaultConfig;
+        InplaceInteractionContextComponent.prototype.interactionService;
     }
 
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var InteractionOutletComponent = /** @class */ (function () {
+        function InteractionOutletComponent() {
+        }
+        InteractionOutletComponent.decorators = [
+            { type: core.Component, args: [{
+                        selector: 'aup-interaction-outlet',
+                        template: "<router-outlet name=\"interaction-context\"></router-outlet>\n",
+                        styles: [":host{display:block}"]
+                    }] }
+        ];
+        /** @nocollapse */
+        InteractionOutletComponent.ctorParameters = function () { return []; };
+        return InteractionOutletComponent;
+    }());
+
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -2987,7 +2852,7 @@
                         declarations: [
                             ActivityContainerComponent,
                             ConfirmationDialogComponent,
-                            exports.ɵbj,
+                            exports.ɵbk,
                             AlertDialogComponent,
                             ActivityOutletComponent,
                             InteractionOutletComponent,
@@ -3002,11 +2867,11 @@
                         entryComponents: [
                             ActivityContainerComponent,
                             ConfirmationDialogComponent,
-                            exports.ɵbj,
+                            exports.ɵbk,
                             AlertDialogComponent
                         ],
                         providers: [
-                            DialogInteractionService,
+                            exports.ɵv,
                         ]
                     },] }
         ];
@@ -3979,67 +3844,110 @@
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     var PlaceComponentDeactivationHandler = /** @class */ (function () {
-        function PlaceComponentDeactivationHandler(component, navigationSession) {
+        function PlaceComponentDeactivationHandler(component, navigationState, isPrimaryComponent) {
             this.component = component;
-            this.navigationSession = navigationSession;
+            this.navigationState = navigationState;
+            this.isPrimaryComponent = isPrimaryComponent;
         }
+        Object.defineProperty(PlaceComponentDeactivationHandler.prototype, "interactionService", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this.navigationState.interactionService;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(PlaceComponentDeactivationHandler.prototype, "placeRouter", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this.navigationState.placeRouter;
+            },
+            enumerable: true,
+            configurable: true
+        });
         /**
+         * @param {?} currentUrl
          * @param {?} nextState
          * @return {?}
          */
         PlaceComponentDeactivationHandler.prototype.canDeactivate = /**
+         * @param {?} currentUrl
          * @param {?} nextState
          * @return {?}
          */
-        function (nextState) {
+        function (currentUrl, nextState) {
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
                     // We'll get called multiple times if there's any parameter sanitisation so
                     // we always return true if we accepted promise from a previous cycle of the current
                     // navigation session.
                     if (!this.canDeactivatePromise) {
-                        this.canDeactivatePromise = this.canDeactivateComponent(nextState);
+                        console.log("creating deactivate promise for -> " + this.component.constructor.name);
+                        this.canDeactivatePromise = this.canDeactivateComponent(currentUrl, nextState);
                     }
                     return [2 /*return*/, this.canDeactivatePromise];
                 });
             });
         };
+        // @Trace()
+        // @Trace()
         /**
          * @protected
+         * @param {?} currentUrl
          * @param {?} nextState
          * @return {?}
          */
-        PlaceComponentDeactivationHandler.prototype.canDeactivateComponent = /**
+        PlaceComponentDeactivationHandler.prototype.canDeactivateComponent = 
+        // @Trace()
+        /**
          * @protected
+         * @param {?} currentUrl
          * @param {?} nextState
          * @return {?}
          */
-        function (nextState) {
+        function (currentUrl, nextState) {
             return __awaiter(this, void 0, void 0, function () {
-                var activity;
+                var routeIds, currentIds;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            if (!(this.navigationSession.isPopState && this.component.interactionContext && this.component.interactionContext.isActive())) return [3 /*break*/, 2];
-                            // Note: Modal interactions are run in a different router outlet so we never get place deactivating while
-                            // a model interaction is active. This is because:
-                            // 1. the user can't click anything to navigate away
-                            // 2. clicking the back button will only change the outlet route portion of the URL. This
-                            //    is all handled by the InteractionGuard and so the component guards will never run.
-                            //
-                            // Now we just cancel the current activity...
-                            return [4 /*yield*/, this.component.interactionContext.getCurrentActivity()];
+                            console.log(this.navigationState.toString());
+                            if (!this.navigationState.isPopState) return [3 /*break*/, 5];
+                            if (!(this.isPrimaryComponent && this.interactionService.isModalActive())) return [3 /*break*/, 3];
+                            routeIds = this.placeRouter.getActiveInteractionIdsFromUrl(nextState.url);
+                            currentIds = this.interactionService.activeInteractionContextIds.value;
+                            if (!!___default.isEqual(currentIds, routeIds)) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.interactionService.getActiveContext().cancelCurrentActivity()];
                         case 1:
-                            activity = _a.sent();
-                            activity.cancel(null);
-                            return [2 /*return*/, false]; // ..and stay where we are.
-                        case 2:
+                            _a.sent();
+                            return [2 /*return*/, currentUrl.updateInteractionIds(this.interactionService.activeInteractionContextIds.value)];
+                        case 2: return [3 /*break*/, 5];
+                        case 3:
+                            if (!(this.component.interactionContext && this.component.interactionContext.isActive())) return [3 /*break*/, 5];
+                            return [4 /*yield*/, this.component.interactionContext.cancelCurrentActivity()];
+                        case 4:
+                            _a.sent();
+                            return [2 /*return*/, currentUrl
+                                    .updateInteractionIds(this.interactionService.activeInteractionContextIds.value)];
+                        case 5:
                             // Ok, so now we're really leaving, so we ask the component if we should.;
-                            if (this.isNotJustAChangeInRouteId(nextState) && this.component.canDeactivate) {
-                                // No interaction in progress, so ask the component .
-                                // This may start an interaction, hence checking the interaction context before now. I.e. if the place pops up the dialog, and
-                                // the user clicks back again, we'll re-enter here and go bang when the component tries to open another dialog.
-                                return [2 /*return*/, this.component.canDeactivate(this.navigationSession.interactionContext)];
+                            if (this.isNotJustAChangeInRouteId(nextState)) {
+                                if (this.component.canDeactivate) {
+                                    // No interaction in progress, so ask the component .
+                                    // This may start an interaction, hence checking the interaction context before now. I.e. if the place pops up the dialog, and
+                                    // the user clicks back again, we'll re-enter here and go bang when the component tries to open another dialog.
+                                    return [2 /*return*/, this.component.canDeactivate(this.navigationState.interactionContext)];
+                                }
+                                // The component has an active interaction but no deactivation hook.  Rather than guessing what to do
+                                // we'll just cancel the navigation and print a warning.
+                                if (this.component.interactionContext && this.component.interactionContext.isActive()) {
+                                    console.warn('Route changed while component has active interaction, cancelling navigation');
+                                    return [2 /*return*/, false];
+                                }
                             }
                             return [2 /*return*/, true];
                     }
@@ -4073,7 +3981,9 @@
         /** @type {?} */
         PlaceComponentDeactivationHandler.prototype.component;
         /** @type {?} */
-        PlaceComponentDeactivationHandler.prototype.navigationSession;
+        PlaceComponentDeactivationHandler.prototype.navigationState;
+        /** @type {?} */
+        PlaceComponentDeactivationHandler.prototype.isPrimaryComponent;
     }
 
     /**
@@ -4082,6 +3992,9 @@
      */
     /**
      * @abstract
+     */
+      /**
+     * @abstract
      */
     exports.NavigationState = /** @class */ (function (_super) {
         __extends(NavigationState, _super);
@@ -4091,6 +4004,46 @@
             _this._visits = new Map();
             return _this;
         }
+        Object.defineProperty(NavigationState.prototype, "name", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this.constructor.name;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(NavigationState.prototype, "idle", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return !this.isTransitional;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(NavigationState.prototype, "placeRouter", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this.context.placeRouter;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(NavigationState.prototype, "interactionService", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this.context.interactionService;
+            },
+            enumerable: true,
+            configurable: true
+        });
         Object.defineProperty(NavigationState.prototype, "interactionContext", {
             get: /**
              * @return {?}
@@ -4123,6 +4076,74 @@
         function (placeDef) {
             return this._visits.get(placeDef);
         };
+        /**
+         * @param {?} visit
+         * @param {?} initialUrl
+         * @return {?}
+         */
+        NavigationState.prototype.onPlaceNavigationStart = /**
+         * @param {?} visit
+         * @param {?} initialUrl
+         * @return {?}
+         */
+        function (visit, initialUrl) {
+            return this.illegalTransition('onPlaceNavigationStart');
+        };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        NavigationState.prototype.onPopState = /**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
+            return this.illegalTransition(event);
+        };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        NavigationState.prototype.onRouterStarted = /**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
+            return this.illegalTransition(event);
+        };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        NavigationState.prototype.onRouterCancelled = /**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
+            return this.illegalTransition(event);
+        };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        NavigationState.prototype.onRouterError = /**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
+            return this.illegalTransition(event);
+        };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        NavigationState.prototype.onRouterEnd = /**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
+            return this.illegalTransition(event);
+        };
         /**
          * @param {?} newUrl
          * @return {?}
@@ -4134,6 +4155,25 @@
         function (newUrl) {
             return this.illegalTransition('onBackClickedDuringNavigationInteraction');
         };
+        /**
+         * @param {?} component
+         * @param {?} currentUrl
+         * @param {?} nextUrl
+         * @return {?}
+         */
+        NavigationState.prototype.canDeactivatePlace = /**
+         * @param {?} component
+         * @param {?} currentUrl
+         * @param {?} nextUrl
+         * @return {?}
+         */
+        function (component, currentUrl, nextUrl) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, this.illegalTransition('canDeactivatePlace')];
+                });
+            });
+        };
         /**
          * @return {?}
          */
@@ -4167,34 +4207,53 @@
          * @return {?}
          */
         function () {
-            return this.context.router.routerState ? this.context.router.routerState.snapshot.url : null;
+            return this.placeRouter.getCurrentRouterUrl();
         };
         /**
          * @protected
          * @param {?} event
          * @return {?}
          */
-        NavigationState.prototype.createActiveSession = /**
+        NavigationState.prototype.createTransitionStateFor = /**
          * @protected
          * @param {?} event
          * @return {?}
          */
         function (event) {
-            // TODO: check if the event is purely for interaction context changes.
-            return new NavigationState.Active(this.context, event.navigationTrigger === 'popstate', this.currentRouterUrl());
+            /** @type {?} */
+            var popstate = event.navigationTrigger === 'popstate';
+            return popstate ?
+                this.interactionService.isActive() ?
+                    new NavigationState.InteractionPopStateTransition(this.context, this.currentRouterUrl()) :
+                    new NavigationState.PopStateTransition(this.context, this.currentRouterUrl())
+                :
+                    this.interactionService.isActive() ?
+                        new NavigationState.InteractionTransition(this.context, this.currentRouterUrl()) :
+                        new NavigationState.NavigationTransition(this.context, this.currentRouterUrl());
         };
         /**
          * @protected
-         * @param {?} url
          * @return {?}
          */
-        NavigationState.prototype.updateLocation = /**
+        NavigationState.prototype.createIdleState = /**
          * @protected
+         * @return {?}
+         */
+        function () {
+            return this.interactionService.isActive() ?
+                new NavigationState.IdleDuringInteraction(this.context, this.currentRouterUrl()) :
+                new NavigationState.Idle(this.context);
+        };
+        /**
+         * @param {?} url
+         * @return {?}
+         */
+        NavigationState.prototype.resetBrowserLocation = /**
          * @param {?} url
          * @return {?}
          */
         function (url) {
-            this.context.angularLocation.go(url);
+            this.placeRouter.resetBrowserLocation(url);
         };
         /**
          * @return {?}
@@ -4205,12 +4264,6 @@
         function () {
             return this.constructor.name;
         };
-        __decorate([
-            pectin.Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [Object]),
-            __metadata("design:returntype", void 0)
-        ], NavigationState.prototype, "updateLocation", null);
         return NavigationState;
     }(pectin.GarbageCollector));
     if (false) {
@@ -4220,54 +4273,22 @@
          */
         exports.NavigationState.prototype._visits;
         /** @type {?} */
-        exports.NavigationState.prototype.isPopState;
-        /** @type {?} */
-        exports.NavigationState.prototype.active;
+        exports.NavigationState.prototype.isTransitional;
         /** @type {?} */
         exports.NavigationState.prototype.startingUrl;
+        /** @type {?} */
+        exports.NavigationState.prototype.isPopState;
         /**
          * @type {?}
          * @protected
          */
         exports.NavigationState.prototype.context;
-        /**
-         * @abstract
-         * @param {?} event
-         * @return {?}
-         */
-        exports.NavigationState.prototype.onStart = function (event) { };
-        /**
-         * @abstract
-         * @param {?} event
-         * @return {?}
-         */
-        exports.NavigationState.prototype.onCancel = function (event) { };
-        /**
-         * @abstract
-         * @param {?} event
-         * @return {?}
-         */
-        exports.NavigationState.prototype.onError = function (event) { };
-        /**
-         * @abstract
-         * @param {?} event
-         * @return {?}
-         */
-        exports.NavigationState.prototype.onEnd = function (event) { };
-        /**
-         * @abstract
-         * @param {?} component
-         * @param {?} nextState
-         * @return {?}
-         */
-        exports.NavigationState.prototype.canDeactivatePlace = function (component, nextState) { };
     }
     (function (NavigationState) {
         var Context = /** @class */ (function () {
-            function Context(router, modalInteractionService, angularLocation, notifySuccess) {
-                this.router = router;
-                this.modalInteractionService = modalInteractionService;
-                this.angularLocation = angularLocation;
+            function Context(placeRouter, interactionService, notifySuccess) {
+                this.placeRouter = placeRouter;
+                this.interactionService = interactionService;
                 this.notifySuccess = notifySuccess;
             }
             return Context;
@@ -4275,11 +4296,9 @@
         NavigationState.Context = Context;
         if (false) {
             /** @type {?} */
-            Context.prototype.router;
-            /** @type {?} */
-            Context.prototype.modalInteractionService;
+            Context.prototype.placeRouter;
             /** @type {?} */
-            Context.prototype.angularLocation;
+            Context.prototype.interactionService;
             /** @type {?} */
             Context.prototype.notifySuccess;
         }
@@ -4287,100 +4306,85 @@
             __extends(Idle, _super);
             function Idle(context) {
                 var _this = _super.call(this, context) || this;
-                _this.active = false;
+                _this.isTransitional = false;
                 _this.startingUrl = null;
+                _this.isPopState = false;
                 return _this;
-            }
-            /**
-             * @param {?} component
-             * @param {?} nextState
-             * @return {?}
-             */
-            Idle.prototype.canDeactivatePlace = /**
-             * @param {?} component
-             * @param {?} nextState
-             * @return {?}
-             */
-            function (component, nextState) {
-                return __awaiter(this, void 0, void 0, function () {
-                    return __generator(this, function (_a) {
-                        return [2 /*return*/, this.illegalTransition('canDeactivatePlace')];
-                    });
-                });
-            };
-            /**
-             * @param {?} event
-             * @return {?}
-             */
-            Idle.prototype.onStart = /**
-             * @param {?} event
-             * @return {?}
-             */
-            function (event) {
-                // calling angularLocation.go() to clear back state can trigger router cycles to the current url if we don't ignore them
-                if (event.url === this.currentRouterUrl()) {
-                    pectin.Logger.get(this).info("navigation started to same url -> " + event.url);
-                    return this;
-                }
-                if (event.url === (this.currentRouterUrl() + "(aup-interaction:modal)")) {
-                    pectin.Logger.get(this).info("navigation started with interaction outlet -> " + event.url);
-                    return new ModalInteractionSession(this.context, event.url);
-                }
-                return this.createActiveSession(event);
-            };
+            }
             /**
-             * @param {?} event
+             * @param {?} visit
+             * @param {?} initialUrl
              * @return {?}
              */
-            Idle.prototype.onCancel = /**
-             * @param {?} event
+            Idle.prototype.onPlaceNavigationStart = /**
+             * @param {?} visit
+             * @param {?} initialUrl
              * @return {?}
              */
-            function (event) {
-                return this.illegalTransition(event);
+            function (visit, initialUrl) {
+                /** @type {?} */
+                var navigationTransition = new NavigationTransition(this.context, initialUrl);
+                navigationTransition.storeVisit(visit);
+                return navigationTransition;
             };
             /**
              * @param {?} event
              * @return {?}
              */
-            Idle.prototype.onEnd = /**
+            Idle.prototype.onRouterStarted = /**
              * @param {?} event
              * @return {?}
              */
             function (event) {
-                return this.illegalTransition(event);
+                // calling angularLocation.go() to clear back state can trigger router cycles to the current url if we don't ignore them
+                if (event.url === this.currentRouterUrl()) {
+                    pectin.Logger.get(this).info("navigation started to same url -> " + event.url);
+                    return this;
+                }
+                if (this.placeRouter.hasActiveInteractionIds(event.url)) {
+                    pectin.Logger.get(this).info("navigation started with interaction outlet -> " + event.url);
+                    return new InteractionTransition(this.context, event.url);
+                }
+                else {
+                    return this.createTransitionStateFor(event);
+                }
             };
             /**
              * @param {?} event
              * @return {?}
              */
-            Idle.prototype.onError = /**
+            Idle.prototype.onPopState = /**
              * @param {?} event
              * @return {?}
              */
             function (event) {
-                return this.illegalTransition(event);
+                return this.createTransitionStateFor(event);
             };
             return Idle;
         }(NavigationState));
         NavigationState.Idle = Idle;
         if (false) {
             /** @type {?} */
-            Idle.prototype.isPopState;
-            /** @type {?} */
-            Idle.prototype.active;
+            Idle.prototype.isTransitional;
             /** @type {?} */
             Idle.prototype.startingUrl;
+            /** @type {?} */
+            Idle.prototype.isPopState;
         }
-        var Active = /** @class */ (function (_super) {
-            __extends(Active, _super);
-            function Active(context, isPopState, startingUrl) {
+        /**
+         * @abstract
+         */
+        var /**
+         * @abstract
+         */
+        AbstractNavigationTransition = /** @class */ (function (_super) {
+            __extends(AbstractNavigationTransition, _super);
+            function AbstractNavigationTransition(context, startingUrl) {
                 var _this = _super.call(this, context) || this;
-                _this.isPopState = isPopState;
                 _this.startingUrl = startingUrl;
-                _this.active = true;
+                _this.isTransitional = true;
                 _this.componentDeactivationHandlers = new Map();
-                _this._interactionContext = _this.context.modalInteractionService.createExclusiveInteractionContext();
+                _this._interactionContext = _this.interactionService._createExclusiveModalInteractionContext();
                 _this.onDispose((/**
                  * @return {?}
                  */
@@ -4388,14 +4392,14 @@
                     // the interaction context can be detached during the back button cancellation state transition
                     // as the transition is synchronous and activityCancellation isn't.  Otherwise dispose will be
                     // called before the context has been cancelled.  It might be work having the interaction context
-                    // automatically cancel if the context is disposed.
+                    // automatically cancel if the context is disposed so we don't have worry about detaching etc.
                     if (_this._interactionContext) {
-                        _this._interactionContext.dispose();
+                        _this._interactionContext.dispose(); // or do something like cancelAndDispose?
                     }
                 }));
                 return _this;
             }
-            Object.defineProperty(Active.prototype, "interactionContext", {
+            Object.defineProperty(AbstractNavigationTransition.prototype, "interactionContext", {
                 get: /**
                  * @return {?}
                  */
@@ -4409,19 +4413,20 @@
              * @param {?} event
              * @return {?}
              */
-            Active.prototype.onStart = /**
+            AbstractNavigationTransition.prototype.onRouterStarted = /**
              * @param {?} event
              * @return {?}
              */
             function (event) {
-                // active sessions can have many cancel start cycles.
+                // active sessions can have many cancel start cycles due
+                // to place guard redirects
                 return this;
             };
             /**
              * @param {?} event
              * @return {?}
              */
-            Active.prototype.onEnd = /**
+            AbstractNavigationTransition.prototype.onRouterEnd = /**
              * @param {?} event
              * @return {?}
              */
@@ -4430,85 +4435,47 @@
                 this.context.notifySuccess(this);
                 return new Idle(this.context);
             };
-            /**
-             * @param {?} event
-             * @return {?}
-             */
-            Active.prototype.onCancel = /**
-             * @param {?} event
-             * @return {?}
-             */
-            function (event) {
-                if (this.isPopState) { // back button clicked and a guard cancelled
-                    // Angular doesn't preserve the url when a guard cancels the back button.
-                    // See https://github.com/angular/angular/issues/13586#issuecomment-432795720
-                    pectin.Logger.get(this).info('WORK-AROUND: Updating browser location after pop state - see angular issue #13586');
-                    this.updateLocation(this.startingUrl);
-                }
-                return this.isPopState ? new Idle(this.context) : this;
-            };
-            /**
-             * @param {?} event
-             * @return {?}
-             */
-            Active.prototype.onError = /**
-             * @param {?} event
-             * @return {?}
-             */
-            function (event) {
-                // navigation was aborted.
-                if (this.isPopState && this.currentRouterUrl() !== this.startingUrl) {
-                    // Angular doesn't preserve the url when a guard cancels the back button.
-                    // See https://github.com/angular/angular/issues/13586#issuecomment-432795720
-                    pectin.Logger.get(this).info('WORK-AROUND: Updating browser location after pop state - see angular issue #13586');
-                    this.updateLocation(this.startingUrl);
-                }
-                return new Idle(this.context);
-            };
             /**
              * @param {?} locationTriggerUrl
              * @return {?}
              */
-            Active.prototype.onBackClickedDuringNavigationInteraction = /**
+            AbstractNavigationTransition.prototype.onBackClickedDuringNavigationInteraction = /**
              * @param {?} locationTriggerUrl
              * @return {?}
              */
             function (locationTriggerUrl) {
+                pectin.Logger.get(this).info("back button pressed during navigation session interaction promise");
+                // detach the interaction from the session so it doesn't get disposed until the activity has completed.
                 /** @type {?} */
-                var context = this.detachInteractionContext();
-                context.getCurrentActivity().then((/**
-                 * @param {?} activity
+                var navigationInteraction = this.detachInteractionContext();
+                var when = pectin.Dsl.disposeWith(navigationInteraction).when;
+                // TODO: I need to make the exclusive interaction context disallow nested activities or
+                //       that would mess things up entirely. Or, can I do a context.abortAll().then(..)
+                navigationInteraction.cancelCurrentActivity().then((/**
                  * @return {?}
                  */
-                function (activity) {
-                    context.addActivityListener({
-                        onActivityFinished: /**
-                         * @return {?}
-                         */
-                        function () {
-                            context.dispose();
-                        },
-                        onActivityStarted: /**
-                         * @return {?}
-                         */
-                        function () {
-                        }
-                    });
-                    activity.cancel(null);
+                function () {
+                    navigationInteraction.dispose();
                 }));
-                return new CancelledDuringNavigationInteraction(this.context, this.startingUrl, locationTriggerUrl);
+                return new CancelledDuringNavigationInteraction(this.context, this.startingUrl, this.isPopState, locationTriggerUrl);
             };
+            // @Trace()
+            // @Trace()
             /**
              * @param {?} component
-             * @param {?} nextState
+             * @param {?} currentUrl
+             * @param {?} nextUrl
              * @return {?}
              */
-            Active.prototype.canDeactivatePlace = /**
+            AbstractNavigationTransition.prototype.canDeactivatePlace = 
+            // @Trace()
+            /**
              * @param {?} component
-             * @param {?} nextState
+             * @param {?} currentUrl
+             * @param {?} nextUrl
              * @return {?}
              */
-            function (component, nextState) {
+            function (component, currentUrl, nextUrl) {
                 return __awaiter(this, void 0, void 0, function () {
                     var handler, isPrimaryHandler;
                     return __generator(this, function (_a) {
@@ -4516,10 +4483,10 @@
                         handler = this.componentDeactivationHandlers.get(component);
                         if (!handler) {
                             isPrimaryHandler = this.componentDeactivationHandlers.size === 0;
-                            handler = new PlaceComponentDeactivationHandler(component, this);
+                            handler = new PlaceComponentDeactivationHandler(component, this, isPrimaryHandler);
                             this.componentDeactivationHandlers.set(component, handler);
                         }
-                        return [2 /*return*/, handler.canDeactivate(nextState)];
+                        return [2 /*return*/, handler.canDeactivate(currentUrl, nextUrl)];
                     });
                 });
             };
@@ -4527,7 +4494,7 @@
              * @private
              * @return {?}
              */
-            Active.prototype.detachInteractionContext = /**
+            AbstractNavigationTransition.prototype.detachInteractionContext = /**
              * @private
              * @return {?}
              */
@@ -4537,226 +4504,390 @@
                 this._interactionContext = null;
                 return context;
             };
-            /**
-             * @return {?}
-             */
-            Active.prototype.toString = /**
-             * @return {?}
-             */
-            function () {
-                return this.constructor.name + "(startingUrl: " + this.startingUrl + ", isPopState:" + this.isPopState + ")";
-            };
-            __decorate([
-                pectin.Trace(),
-                __metadata("design:type", Function),
-                __metadata("design:paramtypes", [router.NavigationStart]),
-                __metadata("design:returntype", NavigationState)
-            ], Active.prototype, "onStart", null);
-            __decorate([
-                pectin.Trace(),
-                __metadata("design:type", Function),
-                __metadata("design:paramtypes", [router.NavigationCancel]),
-                __metadata("design:returntype", NavigationState)
-            ], Active.prototype, "onCancel", null);
-            __decorate([
-                pectin.Trace(),
-                __metadata("design:type", Function),
-                __metadata("design:paramtypes", [router.NavigationError]),
-                __metadata("design:returntype", NavigationState)
-            ], Active.prototype, "onError", null);
-            return Active;
+            return AbstractNavigationTransition;
         }(NavigationState));
-        NavigationState.Active = Active;
+        NavigationState.AbstractNavigationTransition = AbstractNavigationTransition;
         if (false) {
             /** @type {?} */
-            Active.prototype.active;
+            AbstractNavigationTransition.prototype.isTransitional;
             /**
              * @type {?}
              * @private
              */
-            Active.prototype.componentDeactivationHandlers;
+            AbstractNavigationTransition.prototype.componentDeactivationHandlers;
             /**
              * @type {?}
              * @private
              */
-            Active.prototype._interactionContext;
+            AbstractNavigationTransition.prototype._interactionContext;
             /** @type {?} */
-            Active.prototype.isPopState;
-            /** @type {?} */
-            Active.prototype.startingUrl;
+            AbstractNavigationTransition.prototype.startingUrl;
         }
-        var ModalInteractionSession = /** @class */ (function (_super) {
-            __extends(ModalInteractionSession, _super);
-            function ModalInteractionSession(context, startingUrl) {
-                var _this = _super.call(this, context) || this;
-                _this.startingUrl = startingUrl;
-                _this.active = false;
+        var NavigationTransition = /** @class */ (function (_super) {
+            __extends(NavigationTransition, _super);
+            function NavigationTransition() {
+                var _this = _super !== null && _super.apply(this, arguments) || this;
                 _this.isPopState = false;
                 return _this;
             }
             /**
-             * @param {?} url
+             * @param {?} event
              * @return {?}
              */
-            ModalInteractionSession.hasInteraction = /**
-             * @param {?} url
+            NavigationTransition.prototype.onRouterCancelled = /**
+             * @param {?} event
              * @return {?}
              */
-            function (url) {
-                return url.endsWith('(aup-interaction:modal)');
+            function (event) {
+                return this;
             };
             /**
              * @param {?} event
              * @return {?}
              */
-            ModalInteractionSession.prototype.onStart = /**
+            NavigationTransition.prototype.onRouterError = /**
              * @param {?} event
              * @return {?}
              */
             function (event) {
-                // VERY VERY IMPORTANT BACK BUTTON NOTE:
-                // When the back button is clicked we'll enter here first, and push the url
-                // back to the browser.  Angular seems to ignore it from a routing perspective
-                // and then the InteractionGuard will cancel the navigation.  This process seems
-                // to keep the brower history in a sane state.
-                if (this.context.modalInteractionService.isActive()) {
-                    if (!ModalInteractionSession.hasInteraction(event.url)) {
-                        // this capture the case where
-                        this.updateLocation(this.startingUrl);
-                    }
-                }
-                return this;
+                // navigation was aborted.
+                return new Idle(this.context);
+            };
+            /**
+             * @return {?}
+             */
+            NavigationTransition.prototype.toString = /**
+             * @return {?}
+             */
+            function () {
+                return this.constructor.name + "(startingUrl: " + this.startingUrl + ")";
             };
+            return NavigationTransition;
+        }(AbstractNavigationTransition));
+        NavigationState.NavigationTransition = NavigationTransition;
+        if (false) {
+            /** @type {?} */
+            NavigationTransition.prototype.isPopState;
+        }
+        var PopStateTransition = /** @class */ (function (_super) {
+            __extends(PopStateTransition, _super);
+            function PopStateTransition() {
+                var _this = _super !== null && _super.apply(this, arguments) || this;
+                _this.isPopState = true;
+                return _this;
+            }
             /**
              * @param {?} event
              * @return {?}
              */
-            ModalInteractionSession.prototype.onCancel = /**
+            PopStateTransition.prototype.onRouterCancelled = /**
              * @param {?} event
              * @return {?}
              */
             function (event) {
-                // this.updateLocation(this.startingUrl);
-                return this;
+                // Angular doesn't preserve the url when a guard cancels the back button.
+                // See https://github.com/angular/angular/issues/13586#issuecomment-432795720
+                pectin.Logger.get(this).info('WORK-AROUND: Updating browser location after pop state - see angular issue #13586');
+                this.resetBrowserLocation(this.startingUrl);
+                return new Idle(this.context);
             };
             /**
              * @param {?} event
              * @return {?}
              */
-            ModalInteractionSession.prototype.onEnd = /**
+            PopStateTransition.prototype.onRouterError = /**
              * @param {?} event
              * @return {?}
              */
             function (event) {
-                if (this.context.modalInteractionService.isActive()) {
-                    return this;
-                }
-                else {
-                    return new Idle(this.context);
+                // navigation was aborted.
+                if (this.currentRouterUrl() !== this.startingUrl) {
+                    // Angular doesn't preserve the url when a guard cancels the back button.
+                    // See https://github.com/angular/angular/issues/13586#issuecomment-432795720
+                    pectin.Logger.get(this).info('WORK-AROUND: Updating browser location after pop state - see angular issue #13586');
+                    this.resetBrowserLocation(this.startingUrl);
                 }
+                return new Idle(this.context);
+            };
+            return PopStateTransition;
+        }(AbstractNavigationTransition));
+        NavigationState.PopStateTransition = PopStateTransition;
+        if (false) {
+            /** @type {?} */
+            PopStateTransition.prototype.isPopState;
+        }
+        var IdleDuringInteraction = /** @class */ (function (_super) {
+            __extends(IdleDuringInteraction, _super);
+            function IdleDuringInteraction(context, startingUrl) {
+                var _this = _super.call(this, context) || this;
+                _this.startingUrl = startingUrl;
+                _this.isTransitional = false;
+                _this.isPopState = false;
+                return _this;
+            }
+            /**
+             * @param {?} visit
+             * @param {?} initialUrl
+             * @return {?}
+             */
+            IdleDuringInteraction.prototype.onPlaceNavigationStart = /**
+             * @param {?} visit
+             * @param {?} initialUrl
+             * @return {?}
+             */
+            function (visit, initialUrl) {
+                /** @type {?} */
+                var navigationTransition = new InteractionTransition(this.context, initialUrl);
+                navigationTransition.storeVisit(visit);
+                return navigationTransition;
             };
             /**
              * @param {?} event
              * @return {?}
              */
-            ModalInteractionSession.prototype.onError = /**
+            IdleDuringInteraction.prototype.onRouterStarted = /**
              * @param {?} event
              * @return {?}
              */
             function (event) {
-                return this.illegalTransition(event);
+                return new InteractionTransition(this.context, event.url);
             };
             /**
-             * @param {?} component
-             * @param {?} nextState
+             * @param {?} event
              * @return {?}
              */
-            ModalInteractionSession.prototype.canDeactivatePlace = /**
-             * @param {?} component
-             * @param {?} nextState
+            IdleDuringInteraction.prototype.onPopState = /**
+             * @param {?} event
              * @return {?}
              */
-            function (component, nextState) {
-                return __awaiter(this, void 0, void 0, function () {
-                    return __generator(this, function (_a) {
-                        return [2 /*return*/, true];
-                    });
-                });
+            function (event) {
+                return new InteractionPopStateTransition(this.context, event.url);
             };
             __decorate([
                 pectin.Trace(),
                 __metadata("design:type", Function),
                 __metadata("design:paramtypes", [router.NavigationStart]),
                 __metadata("design:returntype", NavigationState)
-            ], ModalInteractionSession.prototype, "onStart", null);
-            __decorate([
-                pectin.Trace(),
-                __metadata("design:type", Function),
-                __metadata("design:paramtypes", [router.NavigationCancel]),
-                __metadata("design:returntype", NavigationState)
-            ], ModalInteractionSession.prototype, "onCancel", null);
+            ], IdleDuringInteraction.prototype, "onRouterStarted", null);
             __decorate([
                 pectin.Trace(),
                 __metadata("design:type", Function),
-                __metadata("design:paramtypes", [router.NavigationEnd]),
+                __metadata("design:paramtypes", [router.NavigationStart]),
                 __metadata("design:returntype", NavigationState)
-            ], ModalInteractionSession.prototype, "onEnd", null);
-            return ModalInteractionSession;
+            ], IdleDuringInteraction.prototype, "onPopState", null);
+            return IdleDuringInteraction;
         }(NavigationState));
-        NavigationState.ModalInteractionSession = ModalInteractionSession;
+        NavigationState.IdleDuringInteraction = IdleDuringInteraction;
+        if (false) {
+            /** @type {?} */
+            IdleDuringInteraction.prototype.isTransitional;
+            /** @type {?} */
+            IdleDuringInteraction.prototype.isPopState;
+            /** @type {?} */
+            IdleDuringInteraction.prototype.startingUrl;
+        }
+        /**
+         * @abstract
+         */
+        var /**
+         * @abstract
+         */
+        AbstractInteractionTransition = /** @class */ (function (_super) {
+            __extends(AbstractInteractionTransition, _super);
+            function AbstractInteractionTransition(context, startingUrl) {
+                var _this = _super.call(this, context, startingUrl) || this;
+                _this.startingUrl = startingUrl;
+                _this.isTransitional = true;
+                return _this;
+            }
+            return AbstractInteractionTransition;
+        }(AbstractNavigationTransition));
+        NavigationState.AbstractInteractionTransition = AbstractInteractionTransition;
         if (false) {
             /** @type {?} */
-            ModalInteractionSession.prototype.active;
+            AbstractInteractionTransition.prototype.isTransitional;
+            /** @type {?} */
+            AbstractInteractionTransition.prototype.startingUrl;
+        }
+        /**
+         * This state exists to handle all events while any kind of navigation is in progress.  That way all other states can
+         * happily ignore interaction contexts.
+         */
+        var /**
+         * This state exists to handle all events while any kind of navigation is in progress.  That way all other states can
+         * happily ignore interaction contexts.
+         */
+        InteractionTransition = /** @class */ (function (_super) {
+            __extends(InteractionTransition, _super);
+            function InteractionTransition() {
+                var _this = _super !== null && _super.apply(this, arguments) || this;
+                _this.isPopState = false;
+                return _this;
+            }
+            /**
+             * @param {?} event
+             * @return {?}
+             */
+            InteractionTransition.prototype.onRouterCancelled = /**
+             * @param {?} event
+             * @return {?}
+             */
+            function (event) {
+                if (this.context.interactionService.isActive()) {
+                    /** @type {?} */
+                    var interactionIds = this.interactionService.activeInteractionContextIds.value;
+                    this.resetBrowserLocation(this.placeRouter.parseUrl(this.startingUrl).updateInteractionIds(interactionIds).url);
+                    return new IdleDuringInteraction(this.context, this.startingUrl);
+                }
+                else {
+                    return new Idle(this.context);
+                }
+            };
+            /**
+             * @param {?} event
+             * @return {?}
+             */
+            InteractionTransition.prototype.onRouterError = /**
+             * @param {?} event
+             * @return {?}
+             */
+            function (event) {
+                // navigation was aborted.
+                return new IdleDuringInteraction(this.context, this.startingUrl);
+            };
+            /**
+             * @param {?} event
+             * @return {?}
+             */
+            InteractionTransition.prototype.onRouterEnd = /**
+             * @param {?} event
+             * @return {?}
+             */
+            function (event) {
+                if (this.context.interactionService.isActive()) {
+                    return new IdleDuringInteraction(this.context, this.startingUrl);
+                }
+                else {
+                    return new Idle(this.context);
+                }
+            };
+            return InteractionTransition;
+        }(AbstractInteractionTransition));
+        NavigationState.InteractionTransition = InteractionTransition;
+        if (false) {
             /** @type {?} */
-            ModalInteractionSession.prototype.isPopState;
+            InteractionTransition.prototype.isPopState;
+        }
+        /**
+         * This state exists to handle all events while any kind of navigation is in progress.  That way all other states can
+         * happily ignore interaction contexts.
+         */
+        var /**
+         * This state exists to handle all events while any kind of navigation is in progress.  That way all other states can
+         * happily ignore interaction contexts.
+         */
+        InteractionPopStateTransition = /** @class */ (function (_super) {
+            __extends(InteractionPopStateTransition, _super);
+            function InteractionPopStateTransition() {
+                var _this = _super !== null && _super.apply(this, arguments) || this;
+                _this.isPopState = true;
+                return _this;
+            }
+            /**
+             * @param {?} event
+             * @return {?}
+             */
+            InteractionPopStateTransition.prototype.onRouterCancelled = /**
+             * @param {?} event
+             * @return {?}
+             */
+            function (event) {
+                if (this.interactionService.isActive()) {
+                    /** @type {?} */
+                    var interactionIds = this.interactionService.activeInteractionContextIds.value;
+                    this.resetBrowserLocation(this.placeRouter.parseUrl(this.startingUrl).updateInteractionIds(interactionIds).url);
+                    return new IdleDuringInteraction(this.context, this.startingUrl);
+                }
+                else {
+                    return new Idle(this.context);
+                }
+            };
+            /**
+             * @param {?} event
+             * @return {?}
+             */
+            InteractionPopStateTransition.prototype.onRouterEnd = /**
+             * @param {?} event
+             * @return {?}
+             */
+            function (event) {
+                if (this.context.interactionService.isActive()) {
+                    return new IdleDuringInteraction(this.context, this.startingUrl);
+                }
+                else {
+                    return new Idle(this.context);
+                }
+            };
+            return InteractionPopStateTransition;
+        }(AbstractInteractionTransition));
+        NavigationState.InteractionPopStateTransition = InteractionPopStateTransition;
+        if (false) {
             /** @type {?} */
-            ModalInteractionSession.prototype.startingUrl;
+            InteractionPopStateTransition.prototype.isPopState;
         }
         var CancelledDuringNavigationInteraction = /** @class */ (function (_super) {
             __extends(CancelledDuringNavigationInteraction, _super);
-            function CancelledDuringNavigationInteraction(context, startingUrl, locationChangeTriggerUrl) {
+            function CancelledDuringNavigationInteraction(context, startingUrl, startingEventWasAPopState, locationChangeTriggerUrl) {
                 var _this = _super.call(this, context) || this;
                 _this.startingUrl = startingUrl;
+                _this.startingEventWasAPopState = startingEventWasAPopState;
                 _this.locationChangeTriggerUrl = locationChangeTriggerUrl;
-                _this.active = false;
-                _this.capturedFauxRouterStart = false;
+                _this.isPopState = false;
+                _this.gotPopStateWithLeavingUrl = false;
                 return _this;
-                // This will trigger a return to the route we originally started with.
-                // this.angularLocation.go(this.startingUrl);
             }
+            Object.defineProperty(CancelledDuringNavigationInteraction.prototype, "isTransitional", {
+                get: /**
+                 * @return {?}
+                 */
+                function () {
+                    return true;
+                },
+                enumerable: true,
+                configurable: true
+            });
             /**
-             * @param {?} component
-             * @param {?} nextState
+             * @param {?} event
              * @return {?}
              */
-            CancelledDuringNavigationInteraction.prototype.canDeactivatePlace = /**
-             * @param {?} component
-             * @param {?} nextState
+            CancelledDuringNavigationInteraction.prototype.onRouterStarted = /**
+             * @param {?} event
              * @return {?}
              */
-            function (component, nextState) {
-                return __awaiter(this, void 0, void 0, function () {
-                    return __generator(this, function (_a) {
-                        return [2 /*return*/, false];
-                    });
-                });
+            function (event) {
+                return this.ignore(event);
             };
             /**
              * @param {?} event
              * @return {?}
              */
-            CancelledDuringNavigationInteraction.prototype.onCancel = /**
+            CancelledDuringNavigationInteraction.prototype.onRouterCancelled = /**
              * @param {?} event
              * @return {?}
              */
             function (event) {
-                return this.ignore(event);
+                // Depending on the state of the router and what was done we get a different
+                // sequence of events.  I.e.  If they just clicked a link we'll get a cancel
+                // with the locationChangeTriggerUrl as the final event. However the user
+                // started the initial navigation with a pop state then we'll get one of
+                // those with the locationChangeTriggerUrl but no cancel event with it.
+                return this.gotPopStateWithLeavingUrl || this.locationChangeTriggerUrl === event.url ? this.createIdleState() : this.ignore(event);
             };
             /**
              * @param {?} event
              * @return {?}
              */
-            CancelledDuringNavigationInteraction.prototype.onEnd = /**
+            CancelledDuringNavigationInteraction.prototype.onRouterEnd = /**
              * @param {?} event
              * @return {?}
              */
@@ -4767,7 +4898,7 @@
              * @param {?} event
              * @return {?}
              */
-            CancelledDuringNavigationInteraction.prototype.onError = /**
+            CancelledDuringNavigationInteraction.prototype.onRouterError = /**
              * @param {?} event
              * @return {?}
              */
@@ -4778,18 +4909,36 @@
              * @param {?} event
              * @return {?}
              */
-            CancelledDuringNavigationInteraction.prototype.onStart = /**
+            CancelledDuringNavigationInteraction.prototype.onPopState = /**
              * @param {?} event
              * @return {?}
              */
             function (event) {
-                if (event.url === this.locationChangeTriggerUrl && !this.capturedFauxRouterStart) {
-                    this.capturedFauxRouterStart = true;
-                    return this.ignore(event, 'url matched back button location change');
-                }
-                else {
-                    return this.createActiveSession(event);
-                }
+                this.gotPopStateWithLeavingUrl = this.gotPopStateWithLeavingUrl || event.url === this.locationChangeTriggerUrl;
+                return this.ignore(event);
+            };
+            // @Trace()
+            // @Trace()
+            /**
+             * @param {?} component
+             * @param {?} currentUrl
+             * @param {?} nextUrl
+             * @return {?}
+             */
+            CancelledDuringNavigationInteraction.prototype.canDeactivatePlace = 
+            // @Trace()
+            /**
+             * @param {?} component
+             * @param {?} currentUrl
+             * @param {?} nextUrl
+             * @return {?}
+             */
+            function (component, currentUrl, nextUrl) {
+                return __awaiter(this, void 0, void 0, function () {
+                    return __generator(this, function (_a) {
+                        return [2 /*return*/, false];
+                    });
+                });
             };
             /**
              * @param {?} event
@@ -4802,7 +4951,7 @@
              * @return {?}
              */
             function (event, reason) {
-                reason = reason ? " (" + reason + ")" : '';
+                reason = reason ? " -> " + reason : '';
                 pectin.Logger.get(this).info("ignoring router event" + reason + ": " + event.constructor.name + " -> " + event.url);
                 return this;
             };
@@ -4813,24 +4962,30 @@
              * @return {?}
              */
             function () {
-                return this.constructor.name + "(startingUrl: " + this.startingUrl + ", locationChangeTriggerUrl:" + this.locationChangeTriggerUrl + ")";
+                return this.constructor.name + "(isIdl: " + this.idle + ", startingUrl: " + this.startingUrl + ", locationChangeTriggerUrl:" + this.locationChangeTriggerUrl + ")";
             };
+            __decorate([
+                pectin.Trace(),
+                __metadata("design:type", Function),
+                __metadata("design:paramtypes", [router.NavigationCancel]),
+                __metadata("design:returntype", NavigationState)
+            ], CancelledDuringNavigationInteraction.prototype, "onRouterCancelled", null);
             return CancelledDuringNavigationInteraction;
         }(NavigationState));
         NavigationState.CancelledDuringNavigationInteraction = CancelledDuringNavigationInteraction;
         if (false) {
-            /** @type {?} */
-            CancelledDuringNavigationInteraction.prototype.active;
             /** @type {?} */
             CancelledDuringNavigationInteraction.prototype.isPopState;
             /**
              * @type {?}
              * @private
              */
-            CancelledDuringNavigationInteraction.prototype.capturedFauxRouterStart;
+            CancelledDuringNavigationInteraction.prototype.gotPopStateWithLeavingUrl;
             /** @type {?} */
             CancelledDuringNavigationInteraction.prototype.startingUrl;
             /** @type {?} */
+            CancelledDuringNavigationInteraction.prototype.startingEventWasAPopState;
+            /** @type {?} */
             CancelledDuringNavigationInteraction.prototype.locationChangeTriggerUrl;
         }
     })(exports.NavigationState || (exports.NavigationState = {}));
@@ -4919,20 +5074,14 @@
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    var UrlSnapshot = /** @class */ (function () {
-        function UrlSnapshot(urlTree) {
-            this.urlTree = urlTree;
-            // console.log({ segments: this.urlTree.root.children.primary.segments });
+    exports.UrlSnapshot = /** @class */ (function () {
+        // TODO: Update this accept a url Parser so it can be immutable and generate new trees on mutation using toString() are parseUrl.
+        function UrlSnapshot(urlSerializer, url, options) {
+            this.urlSerializer = urlSerializer;
+            this.url = url;
+            this.options = options;
+            this.urlTree = urlSerializer.parse(url);
         }
-        /**
-         * @return {?}
-         */
-        UrlSnapshot.prototype.cloneUrlSegmentList = /**
-         * @return {?}
-         */
-        function () {
-            return __spread(this.urlTree.root.children.primary.segments);
-        };
         /**
          * @param {?} visit
          * @return {?}
@@ -4942,11 +5091,13 @@
          * @return {?}
          */
         function (visit) {
+            /** @type {?} */
+            var urlTree = this.urlSerializer.parse(this.url);
             // Ugly, but it works for now.
             /** @type {?} */
-            var segments = this.cloneUrlSegmentList();
+            var segments = __spread(this.getPrimarySegments(urlTree));
             /** @type {?} */
-            var visitSegments = this.convertToUrlSegments(visit);
+            var visitSegments = this.getSegmentsFor(visit);
             /** @type {?} */
             var replaceAt = segments.findIndex((/**
              * @param {?} segment
@@ -4955,7 +5106,21 @@
             function (segment) { return segment.path === visitSegments[0].path; }));
             // do not use the return value, it's the items that were removed!
             segments.splice.apply(segments, __spread([replaceAt, visitSegments.length], visitSegments));
-            return segments;
+            urlTree.root.children.primary.segments = segments;
+            return new UrlSnapshot(this.urlSerializer, urlTree.toString(), this.options);
+        };
+        /**
+         * @private
+         * @param {?} urlTree
+         * @return {?}
+         */
+        UrlSnapshot.prototype.getPrimarySegments = /**
+         * @private
+         * @param {?} urlTree
+         * @return {?}
+         */
+        function (urlTree) {
+            return this.urlTree.root.children.primary.segments;
         };
         /**
          * Converts the visit into segments.  Please not that these segments are not e
@@ -4963,11 +5128,13 @@
          */
         /**
          * Converts the visit into segments.  Please not that these segments are not e
+         * @protected
          * @param {?} visit
          * @return {?}
          */
-        UrlSnapshot.prototype.convertToUrlSegments = /**
+        UrlSnapshot.prototype.getSegmentsFor = /**
          * Converts the visit into segments.  Please not that these segments are not e
+         * @protected
          * @param {?} visit
          * @return {?}
          */
@@ -4986,79 +5153,182 @@
                     ];
         };
         /**
-         * @param {?} visit
+         * @param {?} placeDef
          * @return {?}
          */
-        UrlSnapshot.prototype.createRedirectCommandsFor = /**
-         * @param {?} visit
+        UrlSnapshot.prototype.includesPathOf = /**
+         * @param {?} placeDef
          * @return {?}
          */
-        function (visit) {
-            /** @type {?} */
-            var segments = this.updateVisitSegments(visit);
-            /** @type {?} */
-            var commands = [];
-            segments.forEach((/**
+        function (placeDef) {
+            return this.getPrimarySegments(this.urlTree).find((/**
              * @param {?} s
              * @return {?}
              */
-            function (s) {
-                commands.push(s.path);
-                if (s.parameterMap.keys.length > 0) {
-                    commands.push(s.parameters);
-                }
-            }));
-            return commands;
+            function (s) { return s.path === placeDef.path; }));
         };
         /**
-         * @param {?} placeDef
          * @return {?}
          */
-        UrlSnapshot.prototype.includesPathOf = /**
-         * @param {?} placeDef
+        UrlSnapshot.prototype.getInteractionIds = /**
          * @return {?}
          */
-        function (placeDef) {
-            return this.cloneUrlSegmentList().find((/**
-             * @param {?} s
-             * @return {?}
-             */
-            function (s) { return s.path === placeDef.path; }));
+        function () {
+            /** @type {?} */
+            var queryParam = this.urlTree.queryParams[UrlSnapshot.INTERACTION_QUERY_PARAM];
+            if (queryParam) {
+                return UrlSnapshot.parseInteractionIds(queryParam);
+            }
+            else {
+                return [];
+            }
+        };
+        /**
+         * @return {?}
+         */
+        UrlSnapshot.prototype.hasInteractionIds = /**
+         * @return {?}
+         */
+        function () {
+            return this.getInteractionIds().length > 0;
+        };
+        // @Trace()
+        // @Trace()
+        /**
+         * @param {?} ids
+         * @return {?}
+         */
+        UrlSnapshot.prototype.updateInteractionIds = 
+        // @Trace()
+        /**
+         * @param {?} ids
+         * @return {?}
+         */
+        function (ids) {
+            if (ids.length === 0) {
+                return this.removeInteractionIds();
+            }
+            else {
+                /** @type {?} */
+                var urlTree = this.urlSerializer.parse(this.url);
+                urlTree.queryParams[UrlSnapshot.INTERACTION_QUERY_PARAM] = UrlSnapshot.createPathIdFor(ids);
+                return new UrlSnapshot(this.urlSerializer, urlTree.toString(), this.options);
+            }
+        };
+        // @Trace()
+        // @Trace()
+        /**
+         * @return {?}
+         */
+        UrlSnapshot.prototype.removeInteractionIds = 
+        // @Trace()
+        /**
+         * @return {?}
+         */
+        function () {
+            /** @type {?} */
+            var urlTree = this.urlSerializer.parse(this.url);
+            if (urlTree.queryParams && urlTree.queryParams[UrlSnapshot.INTERACTION_QUERY_PARAM]) {
+                urlTree.queryParams = {}; //[UrlSnapshot.INTERACTION_ROUTER_OUTLET]
+            }
+            return new UrlSnapshot(this.urlSerializer, urlTree.toString(), this.options);
+        };
+        /**
+         * @param {?} options
+         * @return {?}
+         */
+        UrlSnapshot.prototype.withOptions = /**
+         * @param {?} options
+         * @return {?}
+         */
+        function (options) {
+            return new UrlSnapshot(this.urlSerializer, this.url, options);
+        };
+        /**
+         * @return {?}
+         */
+        UrlSnapshot.prototype.getNavigationExtras = /**
+         * @return {?}
+         */
+        function () {
+            return this.options;
         };
         return UrlSnapshot;
     }());
     if (false) {
         /** @type {?} */
-        UrlSnapshot.prototype.urlTree;
+        exports.UrlSnapshot.prototype.urlTree;
+        /** @type {?} */
+        exports.UrlSnapshot.prototype.urlSerializer;
+        /** @type {?} */
+        exports.UrlSnapshot.prototype.url;
+        /**
+         * @type {?}
+         * @private
+         */
+        exports.UrlSnapshot.prototype.options;
     }
+    (function (UrlSnapshot) {
+        UrlSnapshot.INTERACTION_QUERY_PARAM = 'aup-interactions';
+        UrlSnapshot.INTERACTION_ID_SEPARATOR = '--';
+        /**
+         * @param {?} path
+         * @return {?}
+         */
+        function parseInteractionIds(path) {
+            return path.split(UrlSnapshot.INTERACTION_ID_SEPARATOR);
+        }
+        UrlSnapshot.parseInteractionIds = parseInteractionIds;
+        /**
+         * @param {?} interactionIds
+         * @return {?}
+         */
+        function createPathIdFor(interactionIds) {
+            return interactionIds.join(UrlSnapshot.INTERACTION_ID_SEPARATOR);
+        }
+        UrlSnapshot.createPathIdFor = createPathIdFor;
+        /**
+         * @record
+         */
+        function NavigationOptions() { }
+        UrlSnapshot.NavigationOptions = NavigationOptions;
+        if (false) {
+            /** @type {?|undefined} */
+            NavigationOptions.prototype.replaceUrl;
+        }
+    })(exports.UrlSnapshot || (exports.UrlSnapshot = {}));
 
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    exports.ɵt = /** @class */ (function (_super) {
+    var PlaceRouter = /** @class */ (function (_super) {
         __extends(PlaceRouter, _super);
-        function PlaceRouter(router$1, urlSerializer, angularLocation, placeHistory, modalInteractionService) {
+        function PlaceRouter(router$1, urlSerializer, angularLocation, placeHistory, interactionService) {
             var _this = _super.call(this) || this;
             _this.router = router$1;
             _this.urlSerializer = urlSerializer;
             _this.angularLocation = angularLocation;
             _this.placeHistory = placeHistory;
-            _this.modalInteractionService = modalInteractionService;
-            _this.firstRoute = true;
-            _this._navigationSessionModel = new pectin.MutableValueModel();
+            _this.interactionService = interactionService;
+            _this._navigationStateModel = new pectin.MutableValueModel();
             _this._activeVisits = new pectin.MutableListModel();
             var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
             _this.activeVisitIndex = chain(_this._activeVisits).indexBy('placeDefinition');
-            _this.navigationSessionActive = chain(_this.navigationSessionModel).pluck('active');
-            _this._navigationSessionContext = new exports.NavigationState.Context(_this.router, _this.modalInteractionService, _this.angularLocation, (/**
+            _this.navigationInProgress = chain(_this.navigationStateModel).pluck('isTransitional');
+            _this._navigationSessionContext = new exports.NavigationState.Context(_this, _this.interactionService, (/**
              * @param {?} session
              * @return {?}
              */
             function (session) {
                 _this.processNavigationSuccess(session);
             }));
-            _this._navigationSessionModel.value = new exports.NavigationState.Idle(_this._navigationSessionContext);
+            _this._navigationStateModel.value = new exports.NavigationState.Idle(_this._navigationSessionContext);
+            _this._navigationStateTypeModel = chain(_this._navigationStateModel).map((/**
+             * @param {?} state
+             * @return {?}
+             */
+            function (state) { return (/** @type {?} */ (state.constructor)); }));
             // TODO: make setup the callbacks in during module initiation to make this testable.
             _this.router.events.subscribe((/**
              * @param {?} event
@@ -5072,53 +5342,83 @@
                 // NavigationStart -> .... -> NavigationError --> navigation aborted, end session.
                 // =======================
                 if (event instanceof router.NavigationStart) {
-                    _this.runStateTransition((/**
-                     * @param {?} session
-                     * @return {?}
-                     */
-                    function (session) { return session.onStart(event); }));
+                    if (event.navigationTrigger === 'popstate') {
+                        _this.runStateTransition((/**
+                         * @param {?} state
+                         * @return {?}
+                         */
+                        function (state) { return state.onPopState(event); }));
+                    }
+                    else {
+                        _this.runStateTransition((/**
+                         * @param {?} state
+                         * @return {?}
+                         */
+                        function (state) { return state.onRouterStarted(event); }));
+                    }
                 }
                 if (event instanceof router.NavigationEnd) {
+                    console.log(event);
                     _this.runStateTransition((/**
-                     * @param {?} session
+                     * @param {?} state
                      * @return {?}
                      */
-                    function (session) { return session.onEnd(event); }));
+                    function (state) { return state.onRouterEnd(event); }));
                 }
                 if (event instanceof router.NavigationError) {
+                    console.log(event);
                     _this.runStateTransition((/**
-                     * @param {?} session
+                     * @param {?} state
                      * @return {?}
                      */
-                    function (session) { return session.onError(event); }));
+                    function (state) { return state.onRouterError(event); }));
                 }
                 if (event instanceof router.NavigationCancel) {
+                    console.log(event);
                     _this.runStateTransition((/**
-                     * @param {?} session
+                     * @param {?} state
                      * @return {?}
                      */
-                    function (session) { return session.onCancel(event); }));
+                    function (state) { return state.onRouterCancelled(event); }));
                 }
             }));
             // Push dialog state to the url so we can capture the back button.
-            _this.modalInteractionService.addActivityListener(new PlaceRouter.InteractionRouteMediator(_this.navigationSessionActive, _this.router));
+            when.listOf(_this.interactionService.activeInteractionContextIds).changes((/**
+             * @param {?} ids
+             * @param {?} previous
+             * @return {?}
+             */
+            function (ids, previous) {
+                _this.syncInteractionIdsWithRouter();
+            }), { unless: _this.navigationInProgress }); // TODO: I think the exclusive interaction prevents interactions starting while it's active so we might not need this.
+            // TODO: I think the exclusive interaction prevents interactions starting while it's active so we might not need this.
+            /** @type {?} */
+            var urlChanges = new pectin.MutableStream();
             // The angular router doesn't always fire router events when the back button is pushed while a navigation
             // session is in progress.  Sometimes we only know about it from the url change.
+            // IMPORTANT ORDER DEPENDENCY
+            // This only works because we're notified of the change after the router has started reacting to it.  This
+            // we can can use our navigationState to determine things.
             angularLocation.onUrlChange((/**
              * @param {?} url
              * @return {?}
              */
             function (url) {
-                console.log("#### url changed ->", { url: url, navIsActive: _this.navigationSessionActive.value });
                 /** @type {?} */
-                var interactionContext = _this.navigationSessionActive.value && _this.navigationSession.interactionContext;
-                if (interactionContext && interactionContext.isActive()) {
-                    pectin.Logger.get(_this).info("back button pressed during navigation session interaction");
-                    _this.runStateTransition((/**
-                     * @param {?} navigationSession
-                     * @return {?}
-                     */
-                    function (navigationSession) { return navigationSession.onBackClickedDuringNavigationInteraction(url); }));
+                var navigationState = _this._navigationStateModel.value;
+                console.log("URLChange -> " + url, { state: navigationState });
+                urlChanges.publish({ url: url, state: navigationState });
+                // The url has changed while we're in a transitional state
+                if (navigationState.isTransitional) {
+                    /** @type {?} */
+                    var navigationInteraction = _this.navigationState.interactionContext;
+                    if (navigationInteraction && navigationInteraction.isActive()) {
+                        _this.runStateTransition((/**
+                         * @param {?} state
+                         * @return {?}
+                         */
+                        function (state) { return state.onBackClickedDuringNavigationInteraction(url); }));
+                    }
                 }
             }));
             return _this;
@@ -5137,7 +5437,7 @@
             var _this = this;
             // We need to update the visits before the session finishes.  This allows the placeOutets to ignore visit
             // changes that occur while routerNavigationActive is true.
-            pectin.assert.isTruthy(this.navigationSessionActive.value);
+            pectin.assert.isTruthy(this.navigationInProgress.value);
             /** @type {?} */
             var visits = session.getVisits();
             visits.forEach((/**
@@ -5147,22 +5447,22 @@
             function (v) { return _this.placeHistory.add(v); }));
             this._activeVisits.value = visits;
         };
-        Object.defineProperty(PlaceRouter.prototype, "navigationSession", {
+        Object.defineProperty(PlaceRouter.prototype, "navigationState", {
             get: /**
              * @return {?}
              */
             function () {
-                return this._navigationSessionModel.value;
+                return this._navigationStateModel.value;
             },
             enumerable: true,
             configurable: true
         });
-        Object.defineProperty(PlaceRouter.prototype, "navigationSessionModel", {
+        Object.defineProperty(PlaceRouter.prototype, "navigationStateModel", {
             get: /**
              * @return {?}
              */
             function () {
-                return this._navigationSessionModel.readonly;
+                return this._navigationStateModel.readonly;
             },
             enumerable: true,
             configurable: true
@@ -5253,9 +5553,9 @@
                              */
                             function (router) {
                                 /** @type {?} */
-                                var commands = _this.parseUrl(_this.router.routerState.snapshot).createRedirectCommandsFor(next);
-                                console.log('### Push Changes to route Redirect', { commands: commands });
-                                return router.navigate(commands);
+                                var urlSnapshot = _this.parseUrl(_this.router.routerState.snapshot.url).updateVisitSegments(next);
+                                console.log('### Push Changes to route Redirect', { commands: urlSnapshot.url });
+                                return _this.navigateByUrl(urlSnapshot);
                             }))];
                     }
                     return [2 /*return*/];
@@ -5278,7 +5578,7 @@
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            if (this.navigationSessionActive.value) {
+                            if (this.navigationInProgress.value) {
                                 pectin.lang.illegalState('Navigation already in progress');
                             }
                             this.runStateTransition((/**
@@ -5287,7 +5587,7 @@
                              */
                             function (current) {
                                 /** @type {?} */
-                                var session = new exports.NavigationState.Active(_this._navigationSessionContext, false, _this.router.routerState.snapshot.url);
+                                var session = _this.navigationState.onPlaceNavigationStart(visit, _this.getCurrentRouterUrl());
                                 session.storeVisit(visit);
                                 return session;
                             }));
@@ -5301,12 +5601,12 @@
                         case 3:
                             // Router has finished (since there was no router change required) so we
                             // need to end the navigation session.
-                            if (this.navigationSession.active && !this.router.getCurrentNavigation()) {
+                            if (this.navigationState.isTransitional && !this.router.getCurrentNavigation()) {
                                 this.runStateTransition((/**
                                  * @param {?} session
                                  * @return {?}
                                  */
-                                function (session) { return session.onEnd(new router.NavigationEnd(-1, '', '')); }));
+                                function (session) { return session.onRouterEnd(new router.NavigationEnd(-1, '', '')); }));
                             }
                             return [7 /*endfinally*/];
                         case 4: return [2 /*return*/];
@@ -5314,22 +5614,26 @@
                 });
             });
         };
+        // @Trace()
+        // @Trace()
         /**
          * @protected
          * @param {?} transition
          * @return {?}
          */
-        PlaceRouter.prototype.runStateTransition = /**
+        PlaceRouter.prototype.runStateTransition = 
+        // @Trace()
+        /**
          * @protected
          * @param {?} transition
          * @return {?}
          */
         function (transition) {
             /** @type {?} */
-            var previous = this._navigationSessionModel.value;
+            var previous = this._navigationStateModel.value;
             /** @type {?} */
-            var next = transition(this.navigationSession);
-            this._navigationSessionModel.value = next;
+            var next = transition(this.navigationState);
+            this._navigationStateModel.value = next;
             if (next !== previous) {
                 previous.dispose();
                 pectin.Logger.get(this).info("Router State Transition: " + previous.toString() + " -> " + next.toString());
@@ -5368,15 +5672,114 @@
             function (child) { return child.url; })));
         };
         /**
-         * @param {?} snapshot
+         * @param {?} url
          * @return {?}
          */
         PlaceRouter.prototype.parseUrl = /**
-         * @param {?} snapshot
+         * @param {?} url
+         * @return {?}
+         */
+        function (url) {
+            return new exports.UrlSnapshot(this.urlSerializer, url, {});
+        };
+        /**
+         * @param {?} url
+         * @return {?}
+         */
+        PlaceRouter.prototype.resetBrowserLocation = /**
+         * @param {?} url
+         * @return {?}
+         */
+        function (url) {
+            this.angularLocation.go(url);
+        };
+        /**
+         * @return {?}
+         */
+        PlaceRouter.prototype.getCurrentRouterUrl = /**
+         * @return {?}
+         */
+        function () {
+            return this.router.routerState ? this.router.routerState.snapshot.url : null;
+        };
+        /**
+         * @return {?}
+         */
+        PlaceRouter.prototype.getCurrentRouteSnapshot = /**
+         * @return {?}
+         */
+        function () {
+            return this.parseUrl(this.getCurrentRouterUrl());
+        };
+        /**
+         * @param {?} url
+         * @return {?}
+         */
+        PlaceRouter.prototype.getActiveInteractionIdsFromUrl = /**
+         * @param {?} url
+         * @return {?}
+         */
+        function (url) {
+            return this.parseUrl(url).getInteractionIds();
+        };
+        // @Trace()
+        // @Trace()
+        /**
+         * @param {?} url
+         * @return {?}
+         */
+        PlaceRouter.prototype.hasActiveInteractionIds = 
+        // @Trace()
+        /**
+         * @param {?} url
+         * @return {?}
+         */
+        function (url) {
+            return this.getActiveInteractionIdsFromUrl(url).length > 0;
+        };
+        // @Trace()
+        // @Trace()
+        /**
+         * @param {?} urlSnapshot
+         * @return {?}
+         */
+        PlaceRouter.prototype.navigateByUrl = 
+        // @Trace()
+        /**
+         * @param {?} urlSnapshot
+         * @return {?}
+         */
+        function (urlSnapshot) {
+            this.router.navigateByUrl(urlSnapshot.urlTree, urlSnapshot.getNavigationExtras());
+        };
+        // @Trace()
+        // @Trace()
+        /**
+         * @return {?}
+         */
+        PlaceRouter.prototype.syncInteractionIdsWithRouter = 
+        // @Trace()
+        /**
          * @return {?}
          */
-        function (snapshot) {
-            return new UrlSnapshot(this.urlSerializer.parse(snapshot.url));
+        function () {
+            pectin.assert.isFalsey(this.navigationInProgress.value); // Updating interaction routes during an existing navigation breaks all the things.
+            // Updating interaction routes during an existing navigation breaks all the things.
+            /** @type {?} */
+            var currentIds = this.interactionService.activeInteractionContextIds.value;
+            if (___default__default.isEqual(currentIds, this.getActiveInteractionIdsFromUrl(this.getCurrentRouterUrl()))) {
+                console.log('activity ids were the same, skipping');
+            }
+            else {
+                if (currentIds.length < 1) {
+                    // no more interactions to remove from history.
+                    this.navigateByUrl(this.getCurrentRouteSnapshot().removeInteractionIds());
+                }
+                else {
+                    // todo was or is...
+                    this.navigateByUrl(this.getCurrentRouteSnapshot().updateInteractionIds(currentIds));
+                }
+            }
         };
         PlaceRouter.decorators = [
             { type: core.Injectable, args: [{
@@ -5389,9 +5792,9 @@
             { type: router.UrlSerializer },
             { type: common.Location },
             { type: PlaceHistory },
-            { type: ModalInteractionService }
+            { type: exports.ɵv }
         ]; };
-        /** @nocollapse */ PlaceRouter.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(core.ɵɵinject(router.Router), core.ɵɵinject(router.UrlSerializer), core.ɵɵinject(common.Location), core.ɵɵinject(PlaceHistory), core.ɵɵinject(ModalInteractionService)); }, token: PlaceRouter, providedIn: "root" });
+        /** @nocollapse */ PlaceRouter.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(core.ɵɵinject(router.Router), core.ɵɵinject(router.UrlSerializer), core.ɵɵinject(common.Location), core.ɵɵinject(PlaceHistory), core.ɵɵinject(exports.ɵv)); }, token: PlaceRouter, providedIn: "root" });
         return PlaceRouter;
     }(pectin.GarbageCollector));
     if (false) {
@@ -5399,127 +5802,52 @@
          * @type {?}
          * @private
          */
-        exports.ɵt.prototype.firstRoute;
+        PlaceRouter.prototype._navigationStateModel;
         /**
          * @type {?}
          * @private
          */
-        exports.ɵt.prototype._navigationSessionModel;
+        PlaceRouter.prototype._activeVisits;
+        /** @type {?} */
+        PlaceRouter.prototype.navigationInProgress;
+        /** @type {?} */
+        PlaceRouter.prototype.activeVisitIndex;
         /**
          * @type {?}
          * @private
          */
-        exports.ɵt.prototype._activeVisits;
-        /** @type {?} */
-        exports.ɵt.prototype.navigationSessionActive;
-        /** @type {?} */
-        exports.ɵt.prototype.activeVisitIndex;
+        PlaceRouter.prototype._navigationSessionContext;
         /**
          * @type {?}
          * @private
          */
-        exports.ɵt.prototype._navigationSessionContext;
+        PlaceRouter.prototype._navigationStateTypeModel;
         /**
          * @type {?}
          * @private
          */
-        exports.ɵt.prototype.router;
+        PlaceRouter.prototype.router;
         /**
          * @type {?}
          * @private
          */
-        exports.ɵt.prototype.urlSerializer;
+        PlaceRouter.prototype.urlSerializer;
         /**
          * @type {?}
          * @private
          */
-        exports.ɵt.prototype.angularLocation;
+        PlaceRouter.prototype.angularLocation;
         /**
          * @type {?}
          * @private
          */
-        exports.ɵt.prototype.placeHistory;
+        PlaceRouter.prototype.placeHistory;
         /**
          * @type {?}
          * @private
          */
-        exports.ɵt.prototype.modalInteractionService;
+        PlaceRouter.prototype.interactionService;
     }
-    (function (PlaceRouter) {
-        PlaceRouter.INTERACTION_ROUTER_OUTLET = 'aup-interaction';
-        var InteractionRouteMediator = /** @class */ (function () {
-            function InteractionRouteMediator(navigationSessionModelActive, router) {
-                this.navigationSessionModelActive = navigationSessionModelActive;
-                this.router = router;
-            }
-            Object.defineProperty(InteractionRouteMediator.prototype, "isNavigating", {
-                get: /**
-                 * @return {?}
-                 */
-                function () {
-                    return this.navigationSessionModelActive.value;
-                },
-                enumerable: true,
-                configurable: true
-            });
-            // If we're not in a navigation we push
-            // @Trace()
-            // If we're not in a navigation we push
-            // @Trace()
-            /**
-             * @return {?}
-             */
-            InteractionRouteMediator.prototype.onActivityStarted = 
-            // If we're not in a navigation we push
-            // @Trace()
-            /**
-             * @return {?}
-             */
-            function () {
-                var _a;
-                if (!this.isNavigating) {
-                    this.router.navigate(['.', {
-                            outlets: (_a = {},
-                                _a[PlaceRouter.INTERACTION_ROUTER_OUTLET] = ['modal'] // "open" must be a valid route for this outlet.
-                            ,
-                                _a)
-                        }], {
-                        replaceUrl: false
-                    });
-                }
-            };
-            // @Trace()
-            // @Trace()
-            /**
-             * @return {?}
-             */
-            InteractionRouteMediator.prototype.onActivityFinished = 
-            // @Trace()
-            /**
-             * @return {?}
-             */
-            function () {
-                var _a;
-                if (!this.isNavigating) {
-                    this.router.navigate(['.', {
-                            outlets: (_a = {},
-                                _a[PlaceRouter.INTERACTION_ROUTER_OUTLET] = null,
-                                _a)
-                        }], {
-                        replaceUrl: true // remove the interaction from the history.
-                    });
-                }
-            };
-            return InteractionRouteMediator;
-        }());
-        PlaceRouter.InteractionRouteMediator = InteractionRouteMediator;
-        if (false) {
-            /** @type {?} */
-            InteractionRouteMediator.prototype.navigationSessionModelActive;
-            /** @type {?} */
-            InteractionRouteMediator.prototype.router;
-        }
-    })(exports.ɵt || (exports.ɵt = {}));
 
     /**
      * @fileoverview added by tsickle
@@ -5670,10 +5998,10 @@
             function (next, previous) {
                 _this.pushVisitChangesToRoute(next, previous);
             }), {
-                unless: _this.placeRouter.navigationSessionActive
+                unless: _this.placeRouter.navigationInProgress
             });
             chain(_this._activePlace)
-                .postponeWhile(placeRouter.navigationSessionActive)
+                .postponeWhile(placeRouter.navigationInProgress)
                 .subscribe((/**
              * @param {?} place
              * @return {?}
@@ -5903,7 +6231,7 @@
         /** @nocollapse */
         PlaceOutletComponent.ctorParameters = function () { return [
             { type: router.Router },
-            { type: exports.ɵt },
+            { type: PlaceRouter },
             { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [AUP_PLACE_CONFIG,] }] },
             { type: PlaceOutletComponent, decorators: [{ type: core.SkipSelf }, { type: core.Optional }] }
         ]; };
@@ -6694,45 +7022,264 @@
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    /**
-     * @record
-     * @template R, E
-     */
-    function Result() { }
-    (function (Result) {
+    /**
+     * @record
+     * @template R, E
+     */
+    function Result() { }
+    (function (Result) {
+        /**
+         * @record
+         * @template R, E
+         */
+        function Callback() { }
+        Result.Callback = Callback;
+        if (false) {
+            /** @type {?} */
+            Callback.prototype.then;
+            /** @type {?} */
+            Callback.prototype.catch;
+        }
+    })(Result || (Result = {}));
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /**
+     * @record
+     * @template D, R, E
+     */
+    function ActivityOutletContext() { }
+    if (false) {
+        /** @type {?} */
+        ActivityOutletContext.prototype.activityClass;
+        /** @type {?} */
+        ActivityOutletContext.prototype.activityData;
+        /**
+         * @param {?} component
+         * @return {?}
+         */
+        ActivityOutletContext.prototype.componentReady = function (component) { };
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var DialogInteractionContext = /** @class */ (function (_super) {
+        __extends(DialogInteractionContext, _super);
+        function DialogInteractionContext(dialogService, config) {
+            var _this = _super.call(this) || this;
+            _this.dialogService = dialogService;
+            _this.config = config;
+            _this._activeModel = new pectin.MutableValueModel(false);
+            typescriptUtilities.assert.notNil(dialogService);
+            _this.onDispose((/**
+             * @return {?}
+             */
+            function () {
+                if (_this.isActive()) {
+                    pectin.lang.illegalState('Dispose called while active.');
+                }
+            }));
+            return _this;
+        }
+        Object.defineProperty(DialogInteractionContext.prototype, "active", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this._activeModel.readonly;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * @protected
+         * @template D, R, E
+         * @param {?} activityType
+         * @param {?} data
+         * @param {?=} disableClose
+         * @return {?}
+         */
+        DialogInteractionContext.prototype._startActivity = /**
+         * @protected
+         * @template D, R, E
+         * @param {?} activityType
+         * @param {?} data
+         * @param {?=} disableClose
+         * @return {?}
+         */
+        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._activeModel.value = true;
+            /** @type {?} */
+            var config = __assign({}, this.config, {
+                data: data,
+                disableClose: disableClose,
+                panelClass: 'dialog-interaction-context'
+            });
+            /** @type {?} */
+            var self = this;
+            /** @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;
+                self.safelyUpdateActivityListDelegate(activityContainer.activityList);
+                activityContainer.initialActivityOutletContext = {
+                    activityClass: activityType,
+                    activityData: data,
+                    onDone: /**
+                     * @param {?} result
+                     * @return {?}
+                     */
+                    function (result) {
+                        resolve(result);
+                        matDialogRef.close(true); // return true to let the after close listener know we've already handled it.
+                    },
+                    onCancel: /**
+                     * @param {?} error
+                     * @return {?}
+                     */
+                    function (error) {
+                        reject(error);
+                        matDialogRef.close(true); // return true to let the after close listener know we've already handled it.
+                    }
+                };
+                // we need to check if our onDone/onCancel methods above we called or if we were
+                // closed by the user clicking the backdrop.  If the later then we need to reject
+                // our promise.
+                matDialogRef.afterClosed().subscribe((/**
+                 * @param {?} promiseAlreadyFinished
+                 * @return {?}
+                 */
+                function (promiseAlreadyFinished) {
+                    if (!promiseAlreadyFinished) {
+                        reject('auto-closed');
+                    }
+                }));
+                matDialogRef.updateSize();
+                matDialogRef.afterOpened().subscribe((/**
+                 * @param {?} promiseAlreadyFinished
+                 * @return {?}
+                 */
+                function (promiseAlreadyFinished) {
+                    matDialogRef.updateSize();
+                }));
+            })).finally((/**
+             * @return {?}
+             */
+            function () {
+                self.safelyUpdateActivityListDelegate(null);
+                _this._activeModel.value = 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 {?}
+         */
+        DialogInteractionContext.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.setActivityList(delegate); }));
+        };
+        return DialogInteractionContext;
+    }(InteractionContextBase));
+    if (false) {
+        /**
+         * @type {?}
+         * @private
+         */
+        DialogInteractionContext.prototype._activeModel;
+        /**
+         * @type {?}
+         * @private
+         */
+        DialogInteractionContext.prototype.dialogService;
+        /** @type {?} */
+        DialogInteractionContext.prototype.config;
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /** @type {?} */
+    var DIALOG_INTERACTION_SERVICE_DEFAULTS = new core.InjectionToken('DIALOG_INTERACTION_SERVICE_DEFAULTS');
+    var DialogInteractionContextFactory = /** @class */ (function (_super) {
+        __extends(DialogInteractionContextFactory, _super);
+        function DialogInteractionContextFactory(dialogService, dialogServiceDefaults, matDialogDefaultConfig) {
+            var _this = _super.call(this) || this;
+            _this.dialogService = dialogService;
+            _this.dialogServiceDefaults = dialogServiceDefaults;
+            _this.matDialogDefaultConfig = matDialogDefaultConfig;
+            typescriptUtilities.assert.notNil(dialogService);
+            return _this;
+        }
         /**
-         * @record
-         * @template R, E
+         * @return {?}
          */
-        function Callback() { }
-        Result.Callback = Callback;
-        if (false) {
-            /** @type {?} */
-            Callback.prototype.then;
+        DialogInteractionContextFactory.prototype.createInteractionContext = /**
+         * @return {?}
+         */
+        function () {
             /** @type {?} */
-            Callback.prototype.catch;
-        }
-    })(Result || (Result = {}));
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    /**
-     * @record
-     * @template D, R, E
-     */
-    function ActivityOutletContext() { }
+            var config = __assign({ autoFocus: false, hasBackdrop: true, closeOnNavigation: false }, this.matDialogDefaultConfig, this.dialogServiceDefaults);
+            return new DialogInteractionContext(this.dialogService, config);
+        };
+        DialogInteractionContextFactory.decorators = [
+            { type: core.Injectable, args: [{
+                        providedIn: 'root'
+                    },] }
+        ];
+        /** @nocollapse */
+        DialogInteractionContextFactory.ctorParameters = function () { return [
+            { type: material.MatDialog },
+            { 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 */ DialogInteractionContextFactory.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function DialogInteractionContextFactory_Factory() { return new DialogInteractionContextFactory(core.ɵɵinject(dialog.MatDialog), core.ɵɵinject(DIALOG_INTERACTION_SERVICE_DEFAULTS, 8), core.ɵɵinject(dialog.MAT_DIALOG_DEFAULT_OPTIONS, 8)); }, token: DialogInteractionContextFactory, providedIn: "root" });
+        return DialogInteractionContextFactory;
+    }(ModalInteractionContextFactory));
     if (false) {
         /** @type {?} */
-        ActivityOutletContext.prototype.activityClass;
-        /** @type {?} */
-        ActivityOutletContext.prototype.activityData;
+        DialogInteractionContextFactory.prototype.active;
         /**
-         * @param {?} component
-         * @return {?}
+         * @type {?}
+         * @private
          */
-        ActivityOutletContext.prototype.componentReady = function (component) { };
+        DialogInteractionContextFactory.prototype.dialogService;
+        /** @type {?} */
+        DialogInteractionContextFactory.prototype.dialogServiceDefaults;
+        /** @type {?} */
+        DialogInteractionContextFactory.prototype.matDialogDefaultConfig;
     }
 
     /**
@@ -6809,103 +7356,6 @@
         }
     })(Place || (Place = {}));
 
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var VisitSanitiser = /** @class */ (function () {
-        function VisitSanitiser(activatedRoute, router, placeHistory, injector) {
-            this.activatedRoute = activatedRoute;
-            this.router = router;
-            this.placeHistory = placeHistory;
-            this.injector = injector;
-        }
-        // @Trace()
-        // @Trace()
-        /**
-         * @param {?} visit
-         * @return {?}
-         */
-        VisitSanitiser.prototype.sanitise = 
-        // @Trace()
-        /**
-         * @param {?} visit
-         * @return {?}
-         */
-        function (visit) {
-            return __awaiter(this, void 0, void 0, function () {
-                var placeDef, routeIdDef, routeId, sanitisedValue, parameterDefs, sanitisedVisit, i, def, value, sanitisedValue;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            placeDef = visit.placeDefinition;
-                            if (!placeDef.hasRouteId()) return [3 /*break*/, 2];
-                            routeIdDef = placeDef.getRouteIdParameterDef();
-                            routeId = visit.getRouteId();
-                            return [4 /*yield*/, routeIdDef.sanitise(routeId, visit, this.placeHistory, this.injector)];
-                        case 1:
-                            sanitisedValue = _a.sent();
-                            // console.log({routeId, sanitisedValue});
-                            // ###------- EARLY EXIT --------###
-                            if (routeIdDef.hasChanged(routeId, sanitisedValue)) {
-                                // if the route id has changed we redirect immediately as other
-                                // parameter sanitisers might use it.
-                                return [2 /*return*/, visit.replace(routeIdDef, sanitisedValue)];
-                            }
-                            _a.label = 2;
-                        case 2:
-                            // if we didn't replace the routeId we continue the url present parameters.
-                            parameterDefs = placeDef.getVisitParameterDefs({
-                                includeRouteParameters: true,
-                                includeNonRouteParameters: true
-                            });
-                            sanitisedVisit = visit;
-                            i = 0;
-                            _a.label = 3;
-                        case 3:
-                            if (!(i < parameterDefs.length)) return [3 /*break*/, 6];
-                            def = parameterDefs[i];
-                            value = visit.getParameter(def.name);
-                            return [4 /*yield*/, def.sanitise(value, sanitisedVisit, this.placeHistory, this.injector)];
-                        case 4:
-                            sanitisedValue = _a.sent();
-                            if (def.hasChanged(value, sanitisedValue)) {
-                                sanitisedVisit = sanitisedVisit.replace(def, sanitisedValue);
-                            }
-                            _a.label = 5;
-                        case 5:
-                            i++;
-                            return [3 /*break*/, 3];
-                        case 6: return [2 /*return*/, sanitisedVisit.hasChangedFrom(visit) ? sanitisedVisit : visit];
-                    }
-                });
-            });
-        };
-        return VisitSanitiser;
-    }());
-    if (false) {
-        /**
-         * @type {?}
-         * @private
-         */
-        VisitSanitiser.prototype.activatedRoute;
-        /**
-         * @type {?}
-         * @private
-         */
-        VisitSanitiser.prototype.router;
-        /**
-         * @type {?}
-         * @private
-         */
-        VisitSanitiser.prototype.placeHistory;
-        /**
-         * @type {?}
-         * @private
-         */
-        VisitSanitiser.prototype.injector;
-    }
-
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -7010,58 +7460,190 @@
             this.params = params;
         }
         /**
-         * @param {?} name
+         * @param {?} name
+         * @return {?}
+         */
+        ParamMapAdapter.prototype.get = /**
+         * @param {?} name
+         * @return {?}
+         */
+        function (name) {
+            return this.params[name];
+        };
+        /**
+         * @param {?} name
+         * @return {?}
+         */
+        ParamMapAdapter.prototype.getAll = /**
+         * @param {?} name
+         * @return {?}
+         */
+        function (name) {
+            /** @type {?} */
+            var value = this.get(name);
+            return Array.isArray(value) ? value : [value];
+        };
+        /**
+         * @param {?} name
+         * @return {?}
+         */
+        ParamMapAdapter.prototype.has = /**
+         * @param {?} name
+         * @return {?}
+         */
+        function (name) {
+            return this.keys.includes(name);
+        };
+        Object.defineProperty(ParamMapAdapter.prototype, "keys", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return Object.keys(this.params);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        return ParamMapAdapter;
+    }());
+    if (false) {
+        /**
+         * @type {?}
+         * @private
+         */
+        ParamMapAdapter.prototype.params;
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var NoopAuthGuard = /** @class */ (function () {
+        function NoopAuthGuard() {
+        }
+        /**
+         * @param {?} activatedRoute
+         * @param {?} state
+         * @return {?}
+         */
+        NoopAuthGuard.prototype.canActivate = /**
+         * @param {?} activatedRoute
+         * @param {?} state
+         * @return {?}
+         */
+        function (activatedRoute, state) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, true];
+                });
+            });
+        };
+        NoopAuthGuard.decorators = [
+            { type: core.Injectable, args: [{
+                        providedIn: 'root'
+                    },] }
+        ];
+        /** @nocollapse */
+        NoopAuthGuard.ctorParameters = function () { return []; };
+        /** @nocollapse */ NoopAuthGuard.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function NoopAuthGuard_Factory() { return new NoopAuthGuard(); }, token: NoopAuthGuard, providedIn: "root" });
+        return NoopAuthGuard;
+    }());
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var VisitSanitiser = /** @class */ (function () {
+        function VisitSanitiser(activatedRoute, router, placeHistory, injector) {
+            this.activatedRoute = activatedRoute;
+            this.router = router;
+            this.placeHistory = placeHistory;
+            this.injector = injector;
+        }
+        // @Trace()
+        // @Trace()
+        /**
+         * @param {?} visit
          * @return {?}
          */
-        ParamMapAdapter.prototype.get = /**
-         * @param {?} name
+        VisitSanitiser.prototype.sanitise = 
+        // @Trace()
+        /**
+         * @param {?} visit
          * @return {?}
          */
-        function (name) {
-            return this.params[name];
+        function (visit) {
+            return __awaiter(this, void 0, void 0, function () {
+                var placeDef, routeIdDef, routeId, sanitisedValue, parameterDefs, sanitisedVisit, i, def, value, sanitisedValue;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            placeDef = visit.placeDefinition;
+                            if (!placeDef.hasRouteId()) return [3 /*break*/, 2];
+                            routeIdDef = placeDef.getRouteIdParameterDef();
+                            routeId = visit.getRouteId();
+                            return [4 /*yield*/, routeIdDef.sanitise(routeId, visit, this.placeHistory, this.injector)];
+                        case 1:
+                            sanitisedValue = _a.sent();
+                            // console.log({routeId, sanitisedValue});
+                            // ###------- EARLY EXIT --------###
+                            if (routeIdDef.hasChanged(routeId, sanitisedValue)) {
+                                // if the route id has changed we redirect immediately as other
+                                // parameter sanitisers might use it.
+                                return [2 /*return*/, visit.replace(routeIdDef, sanitisedValue)];
+                            }
+                            _a.label = 2;
+                        case 2:
+                            // if we didn't replace the routeId we continue the url present parameters.
+                            parameterDefs = placeDef.getVisitParameterDefs({
+                                includeRouteParameters: true,
+                                includeNonRouteParameters: true
+                            });
+                            sanitisedVisit = visit;
+                            i = 0;
+                            _a.label = 3;
+                        case 3:
+                            if (!(i < parameterDefs.length)) return [3 /*break*/, 6];
+                            def = parameterDefs[i];
+                            value = visit.getParameter(def.name);
+                            return [4 /*yield*/, def.sanitise(value, sanitisedVisit, this.placeHistory, this.injector)];
+                        case 4:
+                            sanitisedValue = _a.sent();
+                            if (def.hasChanged(value, sanitisedValue)) {
+                                sanitisedVisit = sanitisedVisit.replace(def, sanitisedValue);
+                            }
+                            _a.label = 5;
+                        case 5:
+                            i++;
+                            return [3 /*break*/, 3];
+                        case 6: return [2 /*return*/, sanitisedVisit.hasChangedFrom(visit) ? sanitisedVisit : visit];
+                    }
+                });
+            });
         };
+        return VisitSanitiser;
+    }());
+    if (false) {
         /**
-         * @param {?} name
-         * @return {?}
-         */
-        ParamMapAdapter.prototype.getAll = /**
-         * @param {?} name
-         * @return {?}
+         * @type {?}
+         * @private
          */
-        function (name) {
-            /** @type {?} */
-            var value = this.get(name);
-            return Array.isArray(value) ? value : [value];
-        };
+        VisitSanitiser.prototype.activatedRoute;
         /**
-         * @param {?} name
-         * @return {?}
+         * @type {?}
+         * @private
          */
-        ParamMapAdapter.prototype.has = /**
-         * @param {?} name
-         * @return {?}
+        VisitSanitiser.prototype.router;
+        /**
+         * @type {?}
+         * @private
          */
-        function (name) {
-            return this.keys.includes(name);
-        };
-        Object.defineProperty(ParamMapAdapter.prototype, "keys", {
-            get: /**
-             * @return {?}
-             */
-            function () {
-                return Object.keys(this.params);
-            },
-            enumerable: true,
-            configurable: true
-        });
-        return ParamMapAdapter;
-    }());
-    if (false) {
+        VisitSanitiser.prototype.placeHistory;
         /**
          * @type {?}
          * @private
          */
-        ParamMapAdapter.prototype.params;
+        VisitSanitiser.prototype.injector;
     }
 
     /**
@@ -7071,12 +7653,16 @@
     /**
      * @abstract
      */
-    var AbstractPlaceGuard = /** @class */ (function () {
-        function AbstractPlaceGuard(router, urlSerializer, placeRouter, placeHistory, injector) {
+    var   /**
+     * @abstract
+     */
+    PlaceGuard = /** @class */ (function () {
+        function PlaceGuard(router, urlSerializer, placeRouter, placeHistory, interactionService, injector) {
             this.router = router;
             this.urlSerializer = urlSerializer;
             this.placeRouter = placeRouter;
             this.placeHistory = placeHistory;
+            this.interactionService = interactionService;
             this.injector = injector;
         }
         // @Trace()
@@ -7086,7 +7672,7 @@
          * @param {?} state
          * @return {?}
          */
-        AbstractPlaceGuard.prototype.canActivate = 
+        PlaceGuard.prototype.canActivate = 
         // @Trace()
         /**
          * @param {?} activatedRoute
@@ -7097,44 +7683,59 @@
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
                 return __generator(this, function (_a) {
+                    // TODO: this is ugly now that I'm return UrlSnapshots and not UrlTrees.  It'd be better if the functions
+                    //        weren't nested or if I implemented a handler chain.
                     return [2 /*return*/, this.authorisePlaceThen(activatedRoute, state, (/**
                          * @param {?} placeDefinition
                          * @return {?}
                          */
                         function (placeDefinition) { return __awaiter(_this, void 0, void 0, function () {
-                            var params, parsedParams, initialVisit, sanitiser, sanitisedVisit, commands;
+                            var result;
+                            var _this = this;
                             return __generator(this, function (_a) {
                                 switch (_a.label) {
-                                    case 0:
-                                        // Parse our route params.
-                                        params = new ConsolidatedParameterMap(activatedRoute.paramMap, activatedRoute.url);
-                                        parsedParams = placeDefinition.parseRouteParams(params);
-                                        initialVisit = this.placeRouter.navigationSession.getVisitFor(placeDefinition) || new Visit(placeDefinition, parsedParams);
-                                        sanitiser = new VisitSanitiser(activatedRoute, this.router, this.placeHistory, this.injector);
-                                        return [4 /*yield*/, sanitiser.sanitise(initialVisit.mergeRouteParameters(parsedParams))];
+                                    case 0: return [4 /*yield*/, this.cleanInteractionState(activatedRoute, state, (/**
+                                         * @return {?}
+                                         */
+                                        function () { return __awaiter(_this, void 0, void 0, function () {
+                                            var params, parsedParams, initialVisit, sanitiser, sanitisedVisit, urlSnapshot;
+                                            return __generator(this, function (_a) {
+                                                switch (_a.label) {
+                                                    case 0:
+                                                        // Parse our route params.
+                                                        params = new ConsolidatedParameterMap(activatedRoute.paramMap, activatedRoute.url);
+                                                        parsedParams = placeDefinition.parseRouteParams(params);
+                                                        initialVisit = this.placeRouter.navigationState.getVisitFor(placeDefinition) || new Visit(placeDefinition, parsedParams);
+                                                        sanitiser = new VisitSanitiser(activatedRoute, this.router, this.placeHistory, this.injector);
+                                                        return [4 /*yield*/, sanitiser.sanitise(initialVisit.mergeRouteParameters(parsedParams))];
+                                                    case 1:
+                                                        sanitisedVisit = _a.sent();
+                                                        // Save the visit with any updated parameters.  We need to save it so we remember any non route parameters
+                                                        this.placeRouter.navigationState.storeVisit(sanitisedVisit);
+                                                        if (initialVisit.hasRoutingChangedFrom(sanitisedVisit)) {
+                                                            // Regenerate the url
+                                                            urlSnapshot = this.placeRouter.parseUrl(state.url).updateVisitSegments(sanitisedVisit);
+                                                            console.log('##### Place Guard Redirect', urlSnapshot);
+                                                            return [2 /*return*/, urlSnapshot];
+                                                        }
+                                                        else {
+                                                            return [2 /*return*/, true];
+                                                        }
+                                                        return [2 /*return*/];
+                                                }
+                                            });
+                                        }); }))];
                                     case 1:
-                                        sanitisedVisit = _a.sent();
-                                        // Save the visit with any updated parameters.  We need to save it so we remember any non route parameters
-                                        this.placeRouter.navigationSession.storeVisit(sanitisedVisit);
-                                        if (initialVisit.hasRoutingChangedFrom(sanitisedVisit)) {
-                                            // Regenerate the url
-                                            commands = this.placeRouter.parseUrl(state).createRedirectCommandsFor(sanitisedVisit);
-                                            console.log('##### Place Guard Redirect', commands);
-                                            return [2 /*return*/, this.router.createUrlTree(commands, {
-                                                    replaceUrl: true,
-                                                    skipLocationChange: false
-                                                })];
-                                        }
-                                        else {
-                                            return [2 /*return*/, true];
-                                        }
-                                        return [2 /*return*/];
+                                        result = _a.sent();
+                                        return [2 /*return*/, this.handleGuardResult(result)];
                                 }
                             });
                         }); }))];
                 });
             });
         };
+        // @Trace()
+        // @Trace()
         /**
          * @param {?} component
          * @param {?} currentRoute
@@ -7142,7 +7743,9 @@
          * @param {?=} nextState
          * @return {?}
          */
-        AbstractPlaceGuard.prototype.canDeactivate = /**
+        PlaceGuard.prototype.canDeactivate = 
+        // @Trace()
+        /**
          * @param {?} component
          * @param {?} currentRoute
          * @param {?} currentState
@@ -7151,32 +7754,59 @@
          */
         function (component, currentRoute, currentState, nextState) {
             return __awaiter(this, void 0, void 0, function () {
+                var currentUrl, nextUrl, result;
                 return __generator(this, function (_a) {
-                    return [2 /*return*/, this.placeRouter.navigationSession.canDeactivatePlace(component, this.placeRouter.parseUrl(nextState))];
+                    switch (_a.label) {
+                        case 0:
+                            currentUrl = this.placeRouter.parseUrl(currentState.url);
+                            nextUrl = this.placeRouter.parseUrl(nextState.url);
+                            return [4 /*yield*/, this.placeRouter.navigationState.canDeactivatePlace(component, currentUrl, nextUrl)];
+                        case 1:
+                            result = _a.sent();
+                            return [2 /*return*/, this.handleGuardResult(result)];
+                    }
                 });
             });
         };
+        /**
+         * @private
+         * @param {?} result
+         * @return {?}
+         */
+        PlaceGuard.prototype.handleGuardResult = /**
+         * @private
+         * @param {?} result
+         * @return {?}
+         */
+        function (result) {
+            if (result instanceof exports.UrlSnapshot) {
+                return result.urlTree;
+            }
+            else {
+                return result;
+            }
+        };
         // @Trace()
         // @Trace()
         /**
          * @protected
          * @param {?} activatedRoute
          * @param {?} state
-         * @param {?} canActivate
+         * @param {?} runPlaceGuards
          * @return {?}
          */
-        AbstractPlaceGuard.prototype.authorisePlaceThen = 
+        PlaceGuard.prototype.authorisePlaceThen = 
         // @Trace()
         /**
          * @protected
          * @param {?} activatedRoute
          * @param {?} state
-         * @param {?} canActivate
+         * @param {?} runPlaceGuards
          * @return {?}
          */
-        function (activatedRoute, state, canActivate) {
+        function (activatedRoute, state, runPlaceGuards) {
             return __awaiter(this, void 0, void 0, function () {
-                var placeDefinition, authorised, _a;
+                var placeDefinition, authoriseResult, _a;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0:
@@ -7191,13 +7821,14 @@
                             _a = true;
                             _b.label = 3;
                         case 3:
-                            authorised = _a;
-                            if (authorised === true) {
-                                return [2 /*return*/, canActivate(placeDefinition)];
+                            authoriseResult = _a;
+                            if (authoriseResult === true) {
+                                // we're authorised, now run the place guards.
+                                return [2 /*return*/, runPlaceGuards(placeDefinition)];
                             }
                             else {
-                                console.log('not authorised result', authorised);
-                                return [2 /*return*/, authorised];
+                                console.log('not authorised result', authoriseResult);
+                                return [2 /*return*/, authoriseResult];
                             }
                             return [3 /*break*/, 5];
                         case 4: return [2 /*return*/, pectin.lang.illegalState("expected component to be an instance of PlaceComponent, got " + activatedRoute.component)];
@@ -7206,12 +7837,16 @@
                 });
             });
         };
+        // @Trace()
+        // @Trace()
         /**
          * @param {?} activatedRoute
          * @param {?} state
          * @return {?}
          */
-        AbstractPlaceGuard.prototype.isAuthorised = /**
+        PlaceGuard.prototype.isAuthorised = 
+        // @Trace()
+        /**
          * @param {?} activatedRoute
          * @param {?} state
          * @return {?}
@@ -7225,195 +7860,79 @@
                 });
             });
         };
-        __decorate([
-            pectin.Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [router.ActivatedRouteSnapshot, router.RouterStateSnapshot]),
-            __metadata("design:returntype", Promise)
-        ], AbstractPlaceGuard.prototype, "isAuthorised", null);
-        return AbstractPlaceGuard;
-    }());
-    if (false) {
-        /**
-         * @type {?}
-         * @private
-         */
-        AbstractPlaceGuard.prototype.router;
-        /**
-         * @type {?}
-         * @private
-         */
-        AbstractPlaceGuard.prototype.urlSerializer;
-        /**
-         * @type {?}
-         * @private
-         */
-        AbstractPlaceGuard.prototype.placeRouter;
-        /**
-         * @type {?}
-         * @private
-         */
-        AbstractPlaceGuard.prototype.placeHistory;
-        /**
-         * @type {?}
-         * @private
-         */
-        AbstractPlaceGuard.prototype.injector;
-        /**
-         * @abstract
-         * @param {?} injector
-         * @return {?}
-         */
-        AbstractPlaceGuard.prototype.getAuthGuard = function (injector) { };
-    }
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var InteractionGuard = /** @class */ (function () {
-        function InteractionGuard(router, injector, placeRouter, angularLocation, modalInteractionService) {
-            this.router = router;
-            this.injector = injector;
-            this.placeRouter = placeRouter;
-            this.angularLocation = angularLocation;
-            this.modalInteractionService = modalInteractionService;
-        }
+        // @Trace()
+        // @Trace()
         /**
          * @param {?} route
          * @param {?} state
+         * @param {?} then
          * @return {?}
          */
-        InteractionGuard.prototype.canActivate = /**
+        PlaceGuard.prototype.cleanInteractionState = 
+        // @Trace()
+        /**
          * @param {?} route
          * @param {?} state
+         * @param {?} then
          * @return {?}
          */
-        function (route, state) {
-            /** @type {?} */
-            var url = this.router.parseUrl(state.url);
-            if (!this.modalInteractionService.isActive() && url.root.children[exports.ɵt.INTERACTION_ROUTER_OUTLET]) {
-                // This happens if we reload the page or the url was pasted as the route should only be activated
-                // after the interaction context has become active.
-                delete url.root.children[exports.ɵt.INTERACTION_ROUTER_OUTLET];
-                return url;
-            }
-            else {
-                return true;
-            }
-        };
-        /**
-         * @param {?} component
-         * @param {?} currentRoute
-         * @param {?} currentState
-         * @param {?=} nextState
-         * @return {?}
-         */
-        InteractionGuard.prototype.canDeactivate = /**
-         * @param {?} component
-         * @param {?} currentRoute
-         * @param {?} currentState
-         * @param {?=} nextState
-         * @return {?}
-         */
-        function (component, currentRoute, currentState, nextState) {
+        function (route, state, then) {
             return __awaiter(this, void 0, void 0, function () {
-                var popstateReturnUrl, activity;
+                var url;
                 return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            popstateReturnUrl = this.placeRouter.navigationSession.startingUrl;
-                            if (!this.modalInteractionService.isActive()) return [3 /*break*/, 2];
-                            // The activity is still active so the route change was triggered by the back button.
-                            return [4 /*yield*/, this.modalInteractionService.getCurrentActivity()];
-                        case 1:
-                            activity = _a.sent();
-                            activity.cancel();
-                            // See ModalInteractionSession#onStart() for the url updating.
-                            return [2 /*return*/, false];
-                        case 2: return [2 /*return*/, true];
+                    url = this.placeRouter.parseUrl(state.url);
+                    if (!this.interactionService.isActive() && url.hasInteractionIds()) {
+                        // This happens if we reload the page or the url was pasted as the route should only be activated
+                        // after the interaction context has become active.
+                        return [2 /*return*/, url.removeInteractionIds()];
+                    }
+                    else {
+                        return [2 /*return*/, then()];
                     }
+                    return [2 /*return*/];
                 });
             });
         };
-        InteractionGuard.decorators = [
-            { type: core.Injectable, args: [{
-                        providedIn: 'root'
-                    },] }
-        ];
-        /** @nocollapse */
-        InteractionGuard.ctorParameters = function () { return [
-            { type: router.Router },
-            { type: core.Injector },
-            { type: exports.ɵt },
-            { type: common.Location },
-            { type: ModalInteractionService }
-        ]; };
-        /** @nocollapse */ InteractionGuard.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function InteractionGuard_Factory() { return new InteractionGuard(core.ɵɵinject(router.Router), core.ɵɵinject(core.INJECTOR), core.ɵɵinject(exports.ɵt), core.ɵɵinject(common.Location), core.ɵɵinject(ModalInteractionService)); }, token: InteractionGuard, providedIn: "root" });
-        return InteractionGuard;
+        return PlaceGuard;
     }());
     if (false) {
         /**
          * @type {?}
          * @private
          */
-        InteractionGuard.prototype.router;
+        PlaceGuard.prototype.router;
         /**
          * @type {?}
          * @private
          */
-        InteractionGuard.prototype.injector;
+        PlaceGuard.prototype.urlSerializer;
         /**
          * @type {?}
          * @private
          */
-        InteractionGuard.prototype.placeRouter;
+        PlaceGuard.prototype.placeRouter;
         /**
          * @type {?}
          * @private
          */
-        InteractionGuard.prototype.angularLocation;
+        PlaceGuard.prototype.placeHistory;
         /**
          * @type {?}
          * @private
          */
-        InteractionGuard.prototype.modalInteractionService;
-    }
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var NoopAuthGuard = /** @class */ (function () {
-        function NoopAuthGuard() {
-        }
+        PlaceGuard.prototype.interactionService;
         /**
-         * @param {?} activatedRoute
-         * @param {?} state
-         * @return {?}
+         * @type {?}
+         * @private
          */
-        NoopAuthGuard.prototype.canActivate = /**
-         * @param {?} activatedRoute
-         * @param {?} state
+        PlaceGuard.prototype.injector;
+        /**
+         * @abstract
+         * @param {?} injector
          * @return {?}
          */
-        function (activatedRoute, state) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    return [2 /*return*/, true];
-                });
-            });
-        };
-        NoopAuthGuard.decorators = [
-            { type: core.Injectable, args: [{
-                        providedIn: 'root'
-                    },] }
-        ];
-        /** @nocollapse */
-        NoopAuthGuard.ctorParameters = function () { return []; };
-        /** @nocollapse */ NoopAuthGuard.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function NoopAuthGuard_Factory() { return new NoopAuthGuard(); }, token: NoopAuthGuard, providedIn: "root" });
-        return NoopAuthGuard;
-    }());
+        PlaceGuard.prototype.getAuthGuard = function (injector) { };
+    }
 
     /**
      * @fileoverview added by tsickle
@@ -7679,9 +8198,8 @@
     exports.AUP_PLACE_CONFIG = AUP_PLACE_CONFIG;
     exports.AbstractActivity = AbstractActivity;
     exports.AbstractInputComponent = AbstractInputComponent;
-    exports.AbstractPlaceGuard = AbstractPlaceGuard;
     exports.AbstractPlaceNavigationComponent = AbstractPlaceNavigationComponent;
-    exports.Activity = exports.ɵbh;
+    exports.Activity = exports.ɵbi;
     exports.ActivityContainerComponent = ActivityContainerComponent;
     exports.ActivityOutletComponent = ActivityOutletComponent;
     exports.AlertDialogComponent = AlertDialogComponent;
@@ -7689,37 +8207,38 @@
     exports.BusyOverlayComponent = BusyOverlayComponent;
     exports.CommandDirective = CommandDirective;
     exports.ComponentsModule = ComponentsModule;
-    exports.ConfirmThenDialogComponent = exports.ɵbj;
+    exports.ConfirmThenDialogComponent = exports.ɵbk;
     exports.ConfirmationDialogComponent = ConfirmationDialogComponent;
     exports.ConsolidatedParameterMap = ConsolidatedParameterMap;
     exports.DEFINITION_META_DATA_KEY = DEFINITION_META_DATA_KEY;
     exports.DIALOG_INTERACTION_SERVICE_DEFAULTS = DIALOG_INTERACTION_SERVICE_DEFAULTS;
     exports.DialogInteractionContext = DialogInteractionContext;
-    exports.DialogInteractionService = DialogInteractionService;
+    exports.DialogInteractionContextFactory = DialogInteractionContextFactory;
     exports.Dimension = Dimension;
     exports.DirectivesModule = DirectivesModule;
     exports.DisposableComponent = DisposableComponent;
     exports.EmptyStateComponent = EmptyStateComponent;
     exports.FocusBindingDirective = FocusBindingDirective;
     exports.InplaceInteractionContextComponent = InplaceInteractionContextComponent;
-    exports.InteractionContext = exports.ɵbc;
+    exports.InteractionContext = InteractionContext;
     exports.InteractionContextBase = InteractionContextBase;
-    exports.InteractionGuard = InteractionGuard;
     exports.InteractionModule = InteractionModule;
     exports.InteractionOutletComponent = InteractionOutletComponent;
+    exports.InteractionService = exports.ɵv;
     exports.LEFT_RIGHT_PLACE_ANIMATION = LEFT_RIGHT_PLACE_ANIMATION;
     exports.ListPlaceNavComponent = ListPlaceNavComponent;
-    exports.ModalInteractionService = ModalInteractionService;
+    exports.ModalInteractionContextFactory = ModalInteractionContextFactory;
     exports.NoopAuthGuard = NoopAuthGuard;
     exports.NoopComponent = NoopComponent;
     exports.NumberInputComponent = NumberInputComponent;
     exports.PasswordInputComponent = PasswordInputComponent;
     exports.Place = Place;
     exports.PlaceComponentDeactivationHandler = PlaceComponentDeactivationHandler;
+    exports.PlaceGuard = PlaceGuard;
     exports.PlaceHistory = PlaceHistory;
     exports.PlaceModule = PlaceModule;
     exports.PlaceOutletComponent = PlaceOutletComponent;
-    exports.PlaceRouter = exports.ɵt;
+    exports.PlaceRouter = PlaceRouter;
     exports.Point = Point;
     exports.ROUTE_PARAMETER_LIST_KEY = ROUTE_PARAMETER_LIST_KEY;
     exports.ResizeAwareComponent = ResizeAwareComponent;
@@ -7727,7 +8246,6 @@
     exports.SelectInputComponent = SelectInputComponent;
     exports.StringInputComponent = StringInputComponent;
     exports.TabbedPlaceNavigationComponent = TabbedPlaceNavigationComponent;
-    exports.UrlSnapshot = UrlSnapshot;
     exports.Visit = Visit;
     exports.VisitParameter = VisitParameter;
     exports.VisitParameterList = VisitParameterList;
@@ -7736,17 +8254,17 @@
     exports.slideDownAndUpAnimation = slideDownAndUpAnimation;
     exports.ɵa = DirectivesModule;
     exports.ɵb = CommandDirective;
-    exports.ɵba = ActivityContainerComponent;
-    exports.ɵbb = InteractionContextBase;
-    exports.ɵbd = ActivityOutletComponent;
-    exports.ɵbe = ConfirmationDialogComponent;
-    exports.ɵbf = AbstractActivity;
-    exports.ɵbg = ACTIVITY_DATA;
-    exports.ɵbk = AlertDialogComponent;
-    exports.ɵbm = InteractionOutletComponent;
-    exports.ɵbn = InplaceInteractionContextComponent;
-    exports.ɵbo = DIALOG_INTERACTION_SERVICE_DEFAULTS;
-    exports.ɵbp = DialogInteractionService;
+    exports.ɵba = InteractionModule;
+    exports.ɵbb = ActivityContainerComponent;
+    exports.ɵbc = InteractionContextBase;
+    exports.ɵbd = InteractionContext;
+    exports.ɵbe = ActivityOutletComponent;
+    exports.ɵbf = ConfirmationDialogComponent;
+    exports.ɵbg = AbstractActivity;
+    exports.ɵbh = ACTIVITY_DATA;
+    exports.ɵbl = AlertDialogComponent;
+    exports.ɵbn = InteractionOutletComponent;
+    exports.ɵbo = InplaceInteractionContextComponent;
     exports.ɵc = FocusBindingDirective;
     exports.ɵd = DisposableComponent;
     exports.ɵe = ComponentsModule;
@@ -7763,12 +8281,12 @@
     exports.ɵp = leftRightPlaceAnimation;
     exports.ɵq = LEFT_RIGHT_PLACE_ANIMATION;
     exports.ɵr = AUP_PLACE_CONFIG;
+    exports.ɵt = PlaceRouter;
     exports.ɵu = PlaceHistory;
-    exports.ɵv = ModalInteractionService;
-    exports.ɵw = TabbedPlaceNavigationComponent;
-    exports.ɵx = AbstractPlaceNavigationComponent;
-    exports.ɵy = ListPlaceNavComponent;
-    exports.ɵz = InteractionModule;
+    exports.ɵw = ModalInteractionContextFactory;
+    exports.ɵx = TabbedPlaceNavigationComponent;
+    exports.ɵy = AbstractPlaceNavigationComponent;
+    exports.ɵz = ListPlaceNavComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });