@coolon/angular-ui-powerups 0.0.98 → 0.0.101

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('lodash'), 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('@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', 'lodash', '@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', '@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.___default, global.typescriptUtilities, global.ng.material.icon, global.ng.material.list, global.ng.material.tooltip, global.src, global.fastMemoizeDecorator, null, global.ng.animations, global.ResizeObserver, global.ng.material.dialog, global.rxjs));
+}(this, function (exports, common, core, forms, material, tabs, animations, pectin, portal, router, ___default, typescriptUtilities, icon, list, tooltip, src, fastMemoizeDecorator, reflectMetadata, 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,13 @@
     /**
      * @abstract
      */
-      /**
+    var   /**
      * @abstract
      */
-    exports.ɵbc = /** @class */ (function (_super) {
+    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 +1306,31 @@
             return this.active.value;
         };
         /**
-         * @param {?} listener
-         * @return {?}
-         */
-        InteractionContext.prototype.addActivityListener = /**
-         * @param {?} listener
-         * @return {?}
-         */
-        function (listener) {
-            return this.activityListeners.add(listener);
-        };
-        /**
-         * @protected
-         * @return {?}
-         */
-        InteractionContext.prototype.notifyActivityStarted = /**
-         * @protected
-         * @return {?}
-         */
-        function () {
-            this.activityListeners.fire((/**
-             * @param {?} l
-             * @return {?}
-             */
-            function (l) { return l.onActivityStarted(); }));
-        };
-        /**
-         * @protected
          * @return {?}
          */
-        InteractionContext.prototype.notifyActivityFinished = /**
-         * @protected
+        InteractionContext.prototype.dispose = /**
          * @return {?}
          */
         function () {
-            this.activityListeners.fire((/**
-             * @param {?} l
-             * @return {?}
-             */
-            function (l) { return l.onActivityFinished(); }));
+            // 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);
         };
         return InteractionContext;
     }(pectin.GarbageCollector));
     if (false) {
-        /**
-         * @type {?}
-         * @private
-         */
-        exports.ɵbc.prototype.activityListeners;
         /** @type {?} */
-        exports.ɵbc.prototype.activityList;
+        InteractionContext.prototype.activityList;
         /** @type {?} */
-        exports.ɵbc.prototype.active;
+        InteractionContext.prototype.active;
         /**
          * Returns the activity that is currently active.
          * This model is only updated in the next tick after the view has been updated.
          * @abstract
          * @return {?}
          */
-        exports.ɵbc.prototype.getCurrentActivity = function () { };
+        InteractionContext.prototype.getCurrentActivity = function () { };
         /**
          * @abstract
          * @template D, R, E
@@ -1374,25 +1338,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 +1366,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 +1376,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 +1442,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 +1467,7 @@
             /** @type {?} */
             Data.prototype.data;
         }
-    })(exports.ɵbj || (exports.ɵbj = {}));
+    })(exports.ɵbk || (exports.ɵbk = {}));
 
     /**
      * @fileoverview added by tsickle
@@ -1736,14 +1683,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.
@@ -1828,7 +1775,7 @@
             var injector = core.Injector.create({
                 providers: [
                     {
-                        provide: exports.ɵbc,
+                        provide: InteractionContext,
                         useValue: this.interactionContext
                     },
                     { provide: ACTIVITY_DATA, useValue: activityContext.activityData }
@@ -2000,6 +1947,15 @@
             this._complete = true;
             this.activityCallbacks.onCancel(error);
         };
+        /**
+         * @return {?}
+         */
+        TabContext.prototype.dispose = /**
+         * @return {?}
+         */
+        function () {
+            this.component.dispose();
+        };
         return TabContext;
     }());
     if (false) {
@@ -2089,20 +2045,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 () {
@@ -2216,14 +2162,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;
                 }));
             }
         };
@@ -2350,6 +2306,292 @@
         ActivityContainerComponent.prototype._activityList;
     }
 
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /**
+     * @abstract
+     */
+    var   /**
+     * @abstract
+     */
+    ModalInteractionContextFactory = /** @class */ (function () {
+        function ModalInteractionContextFactory() {
+        }
+        return ModalInteractionContextFactory;
+    }());
+    if (false) {
+        /**
+         * @abstract
+         * @return {?}
+         */
+        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 () {
+            return this.active.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));
+        };
+        /**
+         * @return {?}
+         */
+        InteractionService.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._activeInteractionContext.value.getCurrentActivity()];
+                });
+            });
+        };
+        /**
+         * 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;
+            this.exclusiveContext.value.registerDisposable({
+                dispose: /**
+                 * @return {?}
+                 */
+                function () {
+                    self.exclusiveContext.value = null;
+                }
+            });
+            return this.exclusiveContext.value;
+        };
+        InteractionService.decorators = [
+            { type: core.Injectable, args: [{
+                        providedIn: 'root'
+                    },] }
+        ];
+        /** @nocollapse */
+        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 {?} */
+        exports.ɵv.prototype.active;
+        /**
+         * @type {?}
+         * @private
+         */
+        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;
+    }
+    (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) { };
+        }
+        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
@@ -2359,9 +2601,11 @@
      */
     var InplaceInteractionContextComponent = /** @class */ (function (_super) {
         __extends(InplaceInteractionContextComponent, _super);
-        function InplaceInteractionContextComponent() {
+        function InplaceInteractionContextComponent(interactionService) {
             var _this = _super.call(this) || this;
+            _this.interactionService = interactionService;
             _this._active = new pectin.MutableValueModel(false);
+            _this.interactionService._registerInplaceInteractionContext(_this);
             return _this;
         }
         /**
@@ -2438,7 +2682,9 @@
                     }] }
         ];
         /** @nocollapse */
-        InplaceInteractionContextComponent.ctorParameters = function () { return []; };
+        InplaceInteractionContextComponent.ctorParameters = function () { return [
+            { type: exports.ɵv }
+        ]; };
         InplaceInteractionContextComponent.propDecorators = {
             interactionContext: [{ type: core.ViewChild, args: ['activityContainer', { static: true },] }]
         };
@@ -2454,6 +2700,8 @@
          * @private
          */
         InplaceInteractionContextComponent.prototype._active;
+        /** @type {?} */
+        InplaceInteractionContextComponent.prototype.interactionService;
     }
 
     /**
@@ -2479,500 +2727,8 @@
      * @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;
-            this.notifyActivityStarted();
-            /** @type {?} */
-            var config = __assign({}, this.config, {
-                data: data,
-                disableClose: disableClose,
-                panelClass: 'dialog-interaction-service'
-            });
-            /** @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 () {
-                _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'
-                    },] }
-        ];
-        /** @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,] }] }
-        ]; };
-        /** @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));
-    if (false) {
-        /**
-         * @type {?}
-         * @private
-         */
-        DialogInteractionService.prototype._activeInteractionContextModel;
-        /** @type {?} */
-        DialogInteractionService.prototype.active;
-        /**
-         * @type {?}
-         * @private
-         */
-        DialogInteractionService.prototype.exclusiveContext;
-        /**
-         * @type {?}
-         * @private
-         */
-        DialogInteractionService.prototype.dialogService;
-        /** @type {?} */
-        DialogInteractionService.prototype.dialogServiceDefaults;
-        /** @type {?} */
-        DialogInteractionService.prototype.matDialogDefaultConfig;
-    }
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var InteractionModule = /** @class */ (function () {
-        function InteractionModule() {
+    var InteractionModule = /** @class */ (function () {
+        function InteractionModule() {
         }
         InteractionModule.decorators = [
             { type: core.NgModule, args: [{
@@ -2987,7 +2743,7 @@
                         declarations: [
                             ActivityContainerComponent,
                             ConfirmationDialogComponent,
-                            exports.ɵbj,
+                            exports.ɵbk,
                             AlertDialogComponent,
                             ActivityOutletComponent,
                             InteractionOutletComponent,
@@ -3002,11 +2758,11 @@
                         entryComponents: [
                             ActivityContainerComponent,
                             ConfirmationDialogComponent,
-                            exports.ɵbj,
+                            exports.ɵbk,
                             AlertDialogComponent
                         ],
                         providers: [
-                            DialogInteractionService,
+                            exports.ɵv,
                         ]
                     },] }
         ];
@@ -4082,6 +3838,9 @@
      */
     /**
      * @abstract
+     */
+      /**
+     * @abstract
      */
     exports.NavigationState = /** @class */ (function (_super) {
         __extends(NavigationState, _super);
@@ -4091,6 +3850,36 @@
             _this._visits = new Map();
             return _this;
         }
+        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 +3912,61 @@
         function (placeDef) {
             return this._visits.get(placeDef);
         };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        NavigationState.prototype.onPopState = /**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
+            return this.illegalTransition(event);
+        };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        NavigationState.prototype.onStart = /**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
+            return this.illegalTransition(event);
+        };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        NavigationState.prototype.onCancel = /**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
+            return this.illegalTransition(event);
+        };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        NavigationState.prototype.onError = /**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
+            return this.illegalTransition(event);
+        };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        NavigationState.prototype.onEnd = /**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
+            return this.illegalTransition(event);
+        };
         /**
          * @param {?} newUrl
          * @return {?}
@@ -4134,6 +3978,23 @@
         function (newUrl) {
             return this.illegalTransition('onBackClickedDuringNavigationInteraction');
         };
+        /**
+         * @param {?} component
+         * @param {?} nextState
+         * @return {?}
+         */
+        NavigationState.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')];
+                });
+            });
+        };
         /**
          * @return {?}
          */
@@ -4167,34 +4028,41 @@
          * @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 ?
+                new NavigationState.NavigationBackTransition(this.context, popstate, this.currentRouterUrl()) :
+                new NavigationState.NavigationTransition(this.context, popstate, this.currentRouterUrl());
         };
         /**
-         * @protected
          * @param {?} url
          * @return {?}
          */
-        NavigationState.prototype.updateLocation = /**
-         * @protected
+        NavigationState.prototype.resetBrowserLocation = /**
          * @param {?} url
          * @return {?}
          */
         function (url) {
-            this.context.angularLocation.go(url);
+            var _this = this;
+            // TODO: Should this be a navigate operation to avoid confusing the router...??
+            setTimeout((/**
+             * @return {?}
+             */
+            function () { return _this.placeRouter.resetBrowserLocation(url); }));
         };
         /**
          * @return {?}
@@ -4205,12 +4073,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 +4082,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 +4105,9 @@
         NavigationState.Context = Context;
         if (false) {
             /** @type {?} */
-            Context.prototype.router;
+            Context.prototype.placeRouter;
             /** @type {?} */
-            Context.prototype.modalInteractionService;
-            /** @type {?} */
-            Context.prototype.angularLocation;
+            Context.prototype.interactionService;
             /** @type {?} */
             Context.prototype.notifySuccess;
         }
@@ -4287,27 +4115,11 @@
             __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 {?}
@@ -4322,65 +4134,51 @@
                     pectin.Logger.get(this).info("navigation started to same url -> " + event.url);
                     return this;
                 }
-                if (event.url === (this.currentRouterUrl() + "(aup-interaction:modal)")) {
+                if (this.placeRouter.hasActiveInteractionIds(event.url)) {
                     pectin.Logger.get(this).info("navigation started with interaction outlet -> " + event.url);
-                    return new ModalInteractionSession(this.context, event.url);
+                    return new InteractionTransition(this.context, event.url);
+                }
+                else {
+                    return this.createTransitionStateFor(event);
                 }
-                return this.createActiveSession(event);
-            };
-            /**
-             * @param {?} event
-             * @return {?}
-             */
-            Idle.prototype.onCancel = /**
-             * @param {?} event
-             * @return {?}
-             */
-            function (event) {
-                return this.illegalTransition(event);
-            };
-            /**
-             * @param {?} event
-             * @return {?}
-             */
-            Idle.prototype.onEnd = /**
-             * @param {?} event
-             * @return {?}
-             */
-            function (event) {
-                return this.illegalTransition(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, isPopState, 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 +4186,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 +4207,20 @@
              * @param {?} event
              * @return {?}
              */
-            Active.prototype.onStart = /**
+            AbstractNavigationTransition.prototype.onStart = /**
              * @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.onEnd = /**
              * @param {?} event
              * @return {?}
              */
@@ -4430,70 +4229,31 @@
                 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) {
+                // detach the interactoin from the session so it doesn't get disposed until the activity
+                // has completed.
                 /** @type {?} */
                 var context = this.detachInteractionContext();
+                var when = pectin.Dsl.disposeWith(context).when;
+                // TODO: I need to make the exclusive interaction context disallow nested activities or
+                //       that would mess things up entirely.
                 context.getCurrentActivity().then((/**
                  * @param {?} activity
                  * @return {?}
                  */
                 function (activity) {
-                    context.addActivityListener({
-                        onActivityFinished: /**
-                         * @return {?}
-                         */
-                        function () {
-                            context.dispose();
-                        },
-                        onActivityStarted: /**
-                         * @return {?}
-                         */
-                        function () {
-                        }
-                    });
+                    when.valueOf(context.active).becomesFalsey((/**
+                     * @return {?}
+                     */
+                    function () { return context.dispose(); }), { once: true });
                     activity.cancel(null);
                 }));
                 return new CancelledDuringNavigationInteraction(this.context, this.startingUrl, locationTriggerUrl);
@@ -4503,7 +4263,7 @@
              * @param {?} nextState
              * @return {?}
              */
-            Active.prototype.canDeactivatePlace = /**
+            AbstractNavigationTransition.prototype.canDeactivatePlace = /**
              * @param {?} component
              * @param {?} nextState
              * @return {?}
@@ -4527,7 +4287,7 @@
              * @private
              * @return {?}
              */
-            Active.prototype.detachInteractionContext = /**
+            AbstractNavigationTransition.prototype.detachInteractionContext = /**
              * @private
              * @return {?}
              */
@@ -4537,180 +4297,304 @@
                 this._interactionContext = null;
                 return context;
             };
+            return AbstractNavigationTransition;
+        }(NavigationState));
+        NavigationState.AbstractNavigationTransition = AbstractNavigationTransition;
+        if (false) {
+            /** @type {?} */
+            AbstractNavigationTransition.prototype.isTransitional;
+            /**
+             * @type {?}
+             * @private
+             */
+            AbstractNavigationTransition.prototype.componentDeactivationHandlers;
+            /**
+             * @type {?}
+             * @private
+             */
+            AbstractNavigationTransition.prototype._interactionContext;
+            /** @type {?} */
+            AbstractNavigationTransition.prototype.isPopState;
+            /** @type {?} */
+            AbstractNavigationTransition.prototype.startingUrl;
+        }
+        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 {?} event
+             * @return {?}
+             */
+            NavigationTransition.prototype.onStart = /**
+             * @param {?} event
+             * @return {?}
+             */
+            function (event) {
+                // active sessions can have many cancel start cycles due
+                // to place guard redirects
+                return this;
+            };
+            /**
+             * @param {?} event
+             * @return {?}
+             */
+            NavigationTransition.prototype.onEnd = /**
+             * @param {?} event
+             * @return {?}
+             */
+            function (event) {
+                // navigation succeeded
+                this.context.notifySuccess(this);
+                return new Idle(this.context);
+            };
+            /**
+             * @param {?} event
+             * @return {?}
+             */
+            NavigationTransition.prototype.onCancel = /**
+             * @param {?} event
+             * @return {?}
+             */
+            function (event) {
+                return new Idle(this.context);
+            };
+            /**
+             * @param {?} event
+             * @return {?}
+             */
+            NavigationTransition.prototype.onError = /**
+             * @param {?} event
+             * @return {?}
+             */
+            function (event) {
+                // navigation was aborted.
+                return new Idle(this.context);
+            };
             /**
              * @return {?}
              */
-            Active.prototype.toString = /**
+            NavigationTransition.prototype.toString = /**
              * @return {?}
              */
             function () {
-                return this.constructor.name + "(startingUrl: " + this.startingUrl + ", isPopState:" + this.isPopState + ")";
+                return this.constructor.name + "(startingUrl: " + this.startingUrl + ")";
             };
-            __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;
-        }(NavigationState));
-        NavigationState.Active = Active;
+            return NavigationTransition;
+        }(AbstractNavigationTransition));
+        NavigationState.NavigationTransition = NavigationTransition;
         if (false) {
             /** @type {?} */
-            Active.prototype.active;
+            NavigationTransition.prototype.isPopState;
+        }
+        var NavigationBackTransition = /** @class */ (function (_super) {
+            __extends(NavigationBackTransition, _super);
+            function NavigationBackTransition() {
+                var _this = _super !== null && _super.apply(this, arguments) || this;
+                _this.isPopState = true;
+                return _this;
+            }
             /**
-             * @type {?}
-             * @private
+             * @param {?} event
+             * @return {?}
+             */
+            NavigationBackTransition.prototype.onCancel = /**
+             * @param {?} event
+             * @return {?}
              */
-            Active.prototype.componentDeactivationHandlers;
+            function (event) {
+                // 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);
+            };
             /**
-             * @type {?}
-             * @private
+             * @param {?} event
+             * @return {?}
+             */
+            NavigationBackTransition.prototype.onError = /**
+             * @param {?} event
+             * @return {?}
              */
-            Active.prototype._interactionContext;
+            function (event) {
+                // 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 NavigationBackTransition;
+        }(AbstractNavigationTransition));
+        NavigationState.NavigationBackTransition = NavigationBackTransition;
+        if (false) {
+            /** @type {?} */
+            NavigationBackTransition.prototype.isPopState;
+        }
+        /**
+         * @abstract
+         */
+        var /**
+         * @abstract
+         */
+        AbstractInteractionTransition = /** @class */ (function (_super) {
+            __extends(AbstractInteractionTransition, _super);
+            function AbstractInteractionTransition(context, startingUrl) {
+                var _this = _super.call(this, context) || this;
+                _this.startingUrl = startingUrl;
+                _this.isTransitional = true;
+                return _this;
+            }
+            /**
+             * @protected
+             * @return {?}
+             */
+            AbstractInteractionTransition.prototype.reinstateInteractionRoute = /**
+             * @protected
+             * @return {?}
+             */
+            function () {
+                var _this = this;
+                console.log(this.startingUrl);
+                setTimeout((/**
+                 * @return {?}
+                 */
+                function () { return _this.placeRouter.syncInteractionIdsWithRouter(); }));
+            };
+            return AbstractInteractionTransition;
+        }(NavigationState));
+        NavigationState.AbstractInteractionTransition = AbstractInteractionTransition;
+        if (false) {
             /** @type {?} */
-            Active.prototype.isPopState;
+            AbstractInteractionTransition.prototype.isTransitional;
             /** @type {?} */
-            Active.prototype.startingUrl;
+            AbstractInteractionTransition.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;
+        /**
+         * 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 {?} url
-             * @return {?}
-             */
-            ModalInteractionSession.hasInteraction = /**
-             * @param {?} url
-             * @return {?}
-             */
-            function (url) {
-                return url.endsWith('(aup-interaction:modal)');
-            };
             /**
              * @param {?} event
              * @return {?}
              */
-            ModalInteractionSession.prototype.onStart = /**
+            InteractionTransition.prototype.onEnd = /**
              * @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);
-                    }
+                if (this.context.interactionService.isActive()) {
+                    this.reinstateInteractionRoute();
+                    return new IdleDuringInteraction(this.context, this.startingUrl);
+                }
+                else {
+                    return new Idle(this.context);
                 }
-                return this;
-            };
-            /**
-             * @param {?} event
-             * @return {?}
-             */
-            ModalInteractionSession.prototype.onCancel = /**
-             * @param {?} event
-             * @return {?}
-             */
-            function (event) {
-                // this.updateLocation(this.startingUrl);
-                return this;
             };
+            return InteractionTransition;
+        }(AbstractInteractionTransition));
+        NavigationState.InteractionTransition = InteractionTransition;
+        if (false) {
+            /** @type {?} */
+            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.
+         */
+        InteractionBackTransition = /** @class */ (function (_super) {
+            __extends(InteractionBackTransition, _super);
+            function InteractionBackTransition() {
+                var _this = _super !== null && _super.apply(this, arguments) || this;
+                _this.isPopState = true;
+                return _this;
+            }
             /**
              * @param {?} event
              * @return {?}
              */
-            ModalInteractionSession.prototype.onEnd = /**
+            InteractionBackTransition.prototype.onEnd = /**
              * @param {?} event
              * @return {?}
              */
             function (event) {
-                if (this.context.modalInteractionService.isActive()) {
-                    return this;
+                if (this.interactionService.isActive()) {
+                    this.reinstateInteractionRoute();
+                    return new IdleDuringInteraction(this.context, this.startingUrl);
                 }
                 else {
                     return new Idle(this.context);
                 }
             };
+            return InteractionBackTransition;
+        }(AbstractInteractionTransition));
+        NavigationState.InteractionBackTransition = InteractionBackTransition;
+        if (false) {
+            /** @type {?} */
+            InteractionBackTransition.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 {?} event
              * @return {?}
              */
-            ModalInteractionSession.prototype.onError = /**
+            IdleDuringInteraction.prototype.onStart = /**
              * @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 InteractionBackTransition(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);
-            __decorate([
-                pectin.Trace(),
-                __metadata("design:type", Function),
-                __metadata("design:paramtypes", [router.NavigationEnd]),
-                __metadata("design:returntype", NavigationState)
-            ], ModalInteractionSession.prototype, "onEnd", null);
-            return ModalInteractionSession;
+            return IdleDuringInteraction;
         }(NavigationState));
-        NavigationState.ModalInteractionSession = ModalInteractionSession;
+        NavigationState.IdleDuringInteraction = IdleDuringInteraction;
         if (false) {
             /** @type {?} */
-            ModalInteractionSession.prototype.active;
+            IdleDuringInteraction.prototype.isTransitional;
             /** @type {?} */
-            ModalInteractionSession.prototype.isPopState;
+            IdleDuringInteraction.prototype.isPopState;
             /** @type {?} */
-            ModalInteractionSession.prototype.startingUrl;
+            IdleDuringInteraction.prototype.startingUrl;
         }
         var CancelledDuringNavigationInteraction = /** @class */ (function (_super) {
             __extends(CancelledDuringNavigationInteraction, _super);
@@ -4718,28 +4602,36 @@
                 var _this = _super.call(this, context) || this;
                 _this.startingUrl = startingUrl;
                 _this.locationChangeTriggerUrl = locationChangeTriggerUrl;
-                _this.active = false;
+                _this.isPopState = false;
                 _this.capturedFauxRouterStart = 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 !this.capturedFauxRouterStart;
+                },
+                enumerable: true,
+                configurable: true
+            });
             /**
-             * @param {?} component
-             * @param {?} nextState
+             * @param {?} event
              * @return {?}
              */
-            CancelledDuringNavigationInteraction.prototype.canDeactivatePlace = /**
-             * @param {?} component
-             * @param {?} nextState
+            CancelledDuringNavigationInteraction.prototype.onStart = /**
+             * @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) {
+                if (event.url === this.locationChangeTriggerUrl && !this.capturedFauxRouterStart) {
+                    this.capturedFauxRouterStart = true;
+                    return this.ignore(event, 'url matched back button location change');
+                }
+                else {
+                    return this.createTransitionStateFor(event);
+                }
             };
             /**
              * @param {?} event
@@ -4778,18 +4670,12 @@
              * @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);
-                }
+                return this.createTransitionStateFor(event);
             };
             /**
              * @param {?} event
@@ -4819,8 +4705,6 @@
         }(NavigationState));
         NavigationState.CancelledDuringNavigationInteraction = CancelledDuringNavigationInteraction;
         if (false) {
-            /** @type {?} */
-            CancelledDuringNavigationInteraction.prototype.active;
             /** @type {?} */
             CancelledDuringNavigationInteraction.prototype.isPopState;
             /**
@@ -4919,34 +4803,29 @@
      * @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) {
+            this.urlSerializer = urlSerializer;
+            this.url = url;
+            this.urlTree = urlSerializer.parse(url);
         }
         /**
-         * @return {?}
-         */
-        UrlSnapshot.prototype.cloneUrlSegmentList = /**
-         * @return {?}
-         */
-        function () {
-            return __spread(this.urlTree.root.children.primary.segments);
-        };
-        /**
+         * @protected
          * @param {?} visit
          * @return {?}
          */
-        UrlSnapshot.prototype.updateVisitSegments = /**
+        UrlSnapshot.prototype.replaceExistingVisitSegmentsWith = /**
+         * @protected
          * @param {?} visit
          * @return {?}
          */
         function (visit) {
             // Ugly, but it works for now.
             /** @type {?} */
-            var segments = this.cloneUrlSegmentList();
+            var segments = __spread(this.getPrimarySegments());
             /** @type {?} */
-            var visitSegments = this.convertToUrlSegments(visit);
+            var visitSegments = this.getSegmentsFor(visit);
             /** @type {?} */
             var replaceAt = segments.findIndex((/**
              * @param {?} segment
@@ -4957,17 +4836,30 @@
             segments.splice.apply(segments, __spread([replaceAt, visitSegments.length], visitSegments));
             return segments;
         };
+        /**
+         * @private
+         * @return {?}
+         */
+        UrlSnapshot.prototype.getPrimarySegments = /**
+         * @private
+         * @return {?}
+         */
+        function () {
+            return this.urlTree.root.children.primary.segments;
+        };
         /**
          * Converts the visit into segments.  Please not that these segments are not e
          * @param visit
          */
         /**
          * 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 {?}
          */
@@ -4995,7 +4887,7 @@
          */
         function (visit) {
             /** @type {?} */
-            var segments = this.updateVisitSegments(visit);
+            var segments = this.replaceExistingVisitSegmentsWith(visit);
             /** @type {?} */
             var commands = [];
             segments.forEach((/**
@@ -5019,46 +4911,125 @@
          * @return {?}
          */
         function (placeDef) {
-            return this.cloneUrlSegmentList().find((/**
+            return this.getPrimarySegments().find((/**
              * @param {?} s
              * @return {?}
              */
             function (s) { return s.path === placeDef.path; }));
         };
+        /**
+         * @return {?}
+         */
+        UrlSnapshot.prototype.getInteractionIds = /**
+         * @return {?}
+         */
+        function () {
+            /** @type {?} */
+            var interactionOutlet = this.urlTree.root.children[UrlSnapshot.INTERACTION_ROUTER_OUTLET];
+            if (interactionOutlet) {
+                pectin.assert.isTruthy(interactionOutlet.segments.length === 2);
+                pectin.assert.isTruthy(interactionOutlet.segments[0].path === UrlSnapshot.INTERACTION_ROUTER_PATH);
+                return UrlSnapshot.parseInteractionIds(interactionOutlet.segments[1].path);
+            }
+            else {
+                return [];
+            }
+        };
+        // @Trace()
+        // @Trace()
+        /**
+         * @param {?} ids
+         * @return {?}
+         */
+        UrlSnapshot.prototype.addOrReplaceInteractionIds = 
+        // @Trace()
+        /**
+         * @param {?} ids
+         * @return {?}
+         */
+        function (ids) {
+            /** @type {?} */
+            var urlTree = this.urlSerializer.parse(this.url);
+            urlTree.root.children[UrlSnapshot.INTERACTION_ROUTER_OUTLET] = new router.UrlSegmentGroup([
+                new router.UrlSegment(UrlSnapshot.INTERACTION_ROUTER_PATH, {}),
+                new router.UrlSegment(UrlSnapshot.createPathIdFor(ids), {})
+            ], {});
+            return new UrlSnapshot(this.urlSerializer, urlTree.toString());
+        };
         return UrlSnapshot;
     }());
     if (false) {
+        /**
+         * @type {?}
+         * @private
+         */
+        exports.UrlSnapshot.prototype.urlTree;
+        /** @type {?} */
+        exports.UrlSnapshot.prototype.urlSerializer;
         /** @type {?} */
-        UrlSnapshot.prototype.urlTree;
+        exports.UrlSnapshot.prototype.url;
     }
+    (function (UrlSnapshot) {
+        UrlSnapshot.INTERACTION_ROUTER_OUTLET = 'aup-interactions';
+        UrlSnapshot.INTERACTION_ROUTER_PATH = 'active';
+        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;
+        /**
+         * @param {?} interactionIds
+         * @return {?}
+         */
+        function createInteractionOutletRouterCommands(interactionIds) {
+            return [UrlSnapshot.INTERACTION_ROUTER_PATH, createPathIdFor(interactionIds)];
+        }
+        UrlSnapshot.createInteractionOutletRouterCommands = createInteractionOutletRouterCommands;
+    })(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 +5043,85 @@
                 // NavigationStart -> .... -> NavigationError --> navigation aborted, end session.
                 // =======================
                 if (event instanceof router.NavigationStart) {
-                    _this.runStateTransition((/**
-                     * @param {?} session
-                     * @return {?}
-                     */
-                    function (session) { return session.onStart(event); }));
+                    console.log(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.onStart(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.onEnd(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.onError(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.onCancel(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 });
+                // We've entered a navigation transition
+                if (navigationState instanceof exports.NavigationState.NavigationTransition) {
+                    /** @type {?} */
+                    var navigationInteraction = _this.navigationState.interactionContext;
+                    if (navigationInteraction && navigationInteraction.isActive()) {
+                        pectin.Logger.get(_this).info("back button pressed during navigation session interaction promise");
+                        _this.runStateTransition((/**
+                         * @param {?} state
+                         * @return {?}
+                         */
+                        function (state) { return state.onBackClickedDuringNavigationInteraction(url); }));
+                    }
                 }
             }));
             return _this;
@@ -5137,7 +5140,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 +5150,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,7 +5256,7 @@
                              */
                             function (router) {
                                 /** @type {?} */
-                                var commands = _this.parseUrl(_this.router.routerState.snapshot).createRedirectCommandsFor(next);
+                                var commands = _this.parseUrl(_this.router.routerState.snapshot.url).createRedirectCommandsFor(next);
                                 console.log('### Push Changes to route Redirect', { commands: commands });
                                 return router.navigate(commands);
                             }))];
@@ -5278,7 +5281,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 +5290,7 @@
                              */
                             function (current) {
                                 /** @type {?} */
-                                var session = new exports.NavigationState.Active(_this._navigationSessionContext, false, _this.router.routerState.snapshot.url);
+                                var session = new exports.NavigationState.NavigationTransition(_this._navigationSessionContext, false, _this.router.routerState.snapshot.url);
                                 session.storeVisit(visit);
                                 return session;
                             }));
@@ -5301,7 +5304,7 @@
                         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 {?}
@@ -5326,10 +5329,10 @@
          */
         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 +5371,97 @@
             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;
+        };
+        /**
+         * @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;
+        };
+        /**
          * @return {?}
          */
-        function (snapshot) {
-            return new UrlSnapshot(this.urlSerializer.parse(snapshot.url));
+        PlaceRouter.prototype.syncInteractionIdsWithRouter = /**
+         * @return {?}
+         */
+        function () {
+            var _a, _b;
+            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) {
+                    this.router.navigate(['.', {
+                            outlets: (_a = {},
+                                _a[exports.UrlSnapshot.INTERACTION_ROUTER_OUTLET] = null,
+                                _a)
+                        }], {
+                        replaceUrl: true // remove the interaction from the history.
+                    });
+                }
+                else {
+                    /** @type {?} */
+                    var urlSnapshot = this.parseUrl(this.getCurrentRouterUrl());
+                    this.router.navigate(['.', {
+                            outlets: (_b = {},
+                                _b[exports.UrlSnapshot.INTERACTION_ROUTER_OUTLET] = exports.UrlSnapshot.createInteractionOutletRouterCommands(currentIds),
+                                _b)
+                        }]);
+                }
+            }
         };
         PlaceRouter.decorators = [
             { type: core.Injectable, args: [{
@@ -5389,9 +5474,15 @@
             { 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" });
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], PlaceRouter.prototype, "syncInteractionIdsWithRouter", null);
         return PlaceRouter;
     }(pectin.GarbageCollector));
     if (false) {
@@ -5399,127 +5490,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 +5686,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 +5919,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 }] }
         ]; };
@@ -6735,6 +6751,225 @@
         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;
+        }
+        /**
+         * @return {?}
+         */
+        DialogInteractionContextFactory.prototype.createInteractionContext = /**
+         * @return {?}
+         */
+        function () {
+            /** @type {?} */
+            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 {?} */
+        DialogInteractionContextFactory.prototype.active;
+        /**
+         * @type {?}
+         * @private
+         */
+        DialogInteractionContextFactory.prototype.dialogService;
+        /** @type {?} */
+        DialogInteractionContextFactory.prototype.dialogServiceDefaults;
+        /** @type {?} */
+        DialogInteractionContextFactory.prototype.matDialogDefaultConfig;
+    }
+
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -7109,16 +7344,16 @@
                                         // 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);
+                                        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.navigationSession.storeVisit(sanitisedVisit);
+                                        this.placeRouter.navigationState.storeVisit(sanitisedVisit);
                                         if (initialVisit.hasRoutingChangedFrom(sanitisedVisit)) {
                                             // Regenerate the url
-                                            commands = this.placeRouter.parseUrl(state).createRedirectCommandsFor(sanitisedVisit);
+                                            commands = this.placeRouter.parseUrl(state.url).createRedirectCommandsFor(sanitisedVisit);
                                             console.log('##### Place Guard Redirect', commands);
                                             return [2 /*return*/, this.router.createUrlTree(commands, {
                                                     replaceUrl: true,
@@ -7152,7 +7387,7 @@
         function (component, currentRoute, currentState, nextState) {
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
-                    return [2 /*return*/, this.placeRouter.navigationSession.canDeactivatePlace(component, this.placeRouter.parseUrl(nextState))];
+                    return [2 /*return*/, this.placeRouter.navigationState.canDeactivatePlace(component, this.placeRouter.parseUrl(nextState.url))];
                 });
             });
         };
@@ -7162,7 +7397,7 @@
          * @protected
          * @param {?} activatedRoute
          * @param {?} state
-         * @param {?} canActivate
+         * @param {?} runPlaceGuards
          * @return {?}
          */
         AbstractPlaceGuard.prototype.authorisePlaceThen = 
@@ -7171,12 +7406,12 @@
          * @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 +7426,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)];
@@ -7272,12 +7508,12 @@
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     var InteractionGuard = /** @class */ (function () {
-        function InteractionGuard(router, injector, placeRouter, angularLocation, modalInteractionService) {
+        function InteractionGuard(router, injector, placeRouter, angularLocation, interactionService) {
             this.router = router;
             this.injector = injector;
             this.placeRouter = placeRouter;
             this.angularLocation = angularLocation;
-            this.modalInteractionService = modalInteractionService;
+            this.interactionService = interactionService;
         }
         /**
          * @param {?} route
@@ -7292,10 +7528,10 @@
         function (route, state) {
             /** @type {?} */
             var url = this.router.parseUrl(state.url);
-            if (!this.modalInteractionService.isActive() && url.root.children[exports.ɵt.INTERACTION_ROUTER_OUTLET]) {
+            if (!this.interactionService.isActive() && url.root.children[exports.UrlSnapshot.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];
+                delete url.root.children[exports.UrlSnapshot.INTERACTION_ROUTER_OUTLET];
                 return url;
             }
             else {
@@ -7318,20 +7554,26 @@
          */
         function (component, currentRoute, currentState, nextState) {
             return __awaiter(this, void 0, void 0, function () {
-                var popstateReturnUrl, activity;
+                var currentIds, routeIds, activity;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            popstateReturnUrl = this.placeRouter.navigationSession.startingUrl;
-                            if (!this.modalInteractionService.isActive()) return [3 /*break*/, 2];
+                            if (!this.interactionService.isActive()) return [3 /*break*/, 2];
+                            currentIds = this.interactionService.activeInteractionContextIds.value;
+                            routeIds = this.placeRouter.getActiveInteractionIdsFromUrl(nextState.url);
+                            if (!!___default.isEqual(currentIds, routeIds)) 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()];
+                            return [4 /*yield*/, this.interactionService.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];
+                            _a.label = 2;
+                        case 2: 
+                        // IMPORTANT:
+                        // We always return true, the router state engine will redirect as required.  Return false
+                        // during the guard causes all kinds of grief.  It might be worth trying a redirect here
+                        // again now that our state engine is more thorough.
+                        return [2 /*return*/, true];
                     }
                 });
             });
@@ -7345,11 +7587,11 @@
         InteractionGuard.ctorParameters = function () { return [
             { type: router.Router },
             { type: core.Injector },
-            { type: exports.ɵt },
+            { type: PlaceRouter },
             { type: common.Location },
-            { type: ModalInteractionService }
+            { type: exports.ɵv }
         ]; };
-        /** @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" });
+        /** @nocollapse */ InteractionGuard.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function InteractionGuard_Factory() { return new InteractionGuard(core.ɵɵinject(router.Router), core.ɵɵinject(core.INJECTOR), core.ɵɵinject(PlaceRouter), core.ɵɵinject(common.Location), core.ɵɵinject(exports.ɵv)); }, token: InteractionGuard, providedIn: "root" });
         return InteractionGuard;
     }());
     if (false) {
@@ -7377,7 +7619,7 @@
          * @type {?}
          * @private
          */
-        InteractionGuard.prototype.modalInteractionService;
+        InteractionGuard.prototype.interactionService;
     }
 
     /**
@@ -7681,7 +7923,7 @@
     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,27 +7931,28 @@
     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;
@@ -7719,7 +7962,7 @@
     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 +7970,6 @@
     exports.SelectInputComponent = SelectInputComponent;
     exports.StringInputComponent = StringInputComponent;
     exports.TabbedPlaceNavigationComponent = TabbedPlaceNavigationComponent;
-    exports.UrlSnapshot = UrlSnapshot;
     exports.Visit = Visit;
     exports.VisitParameter = VisitParameter;
     exports.VisitParameterList = VisitParameterList;
@@ -7736,17 +7978,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 +8005,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 });