@coolon/angular-ui-powerups 0.0.98 → 0.0.101

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

@@ -1,16 +1,15 @@
 import { DOCUMENT, CommonModule, Location } from '@angular/common';
 import { Directive, ElementRef, Inject, Input, HostListener, NgZone, NgModule, EventEmitter, Output, Component, InjectionToken, Injector, ComponentFactoryResolver, ViewContainerRef, ViewChild, ViewChildren, Injectable, ɵɵdefineInjectable, ɵɵinject, Optional, SkipSelf, HostBinding, INJECTOR } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MatInputModule, MatFormFieldModule, MatSelectModule, MatDialog, MatButtonModule, MatDialogModule, MatTabsModule as MatTabsModule$1, MatProgressSpinnerModule } from '@angular/material';
+import { MatInputModule, MatFormFieldModule, MatSelectModule, MatButtonModule, MatDialogModule, MatTabsModule as MatTabsModule$1, MatProgressSpinnerModule, MatDialog } from '@angular/material';
 import { MatTabsModule } from '@angular/material/tabs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { __extends, __decorate, __metadata, __awaiter, __generator, __assign, __spread } from 'tslib';
-import { DelegatingValueModel, assert, UnaryCommand, lang, Dsl, GarbageCollector, Logger, DelegatingFormValueModel, UseDelegate, ValueModel, ListModel, StoreInListModel, EventListenerList, DelegatingListModel, Deferred, MutableStream, MutableValueModel, MutableListModel, Binding, Trace, Guard as Guard$1, StoreInValueModel, Command, OptionsHelper, ValueHolder } from '@coolon/pectin';
+import { DelegatingValueModel, assert, UnaryCommand, lang, Dsl, GarbageCollector, Logger, DelegatingFormValueModel, UseDelegate, ValueModel, ListModel, StoreInListModel, DelegatingListModel, Deferred, MutableStream, MutableValueModel, MutableListModel, Binding, Trace, Guard, StoreInValueModel, Command, OptionsHelper, ValueHolder } from '@coolon/pectin';
 import { PortalModule } from '@angular/cdk/portal';
-import { RouterModule, NavigationStart, NavigationCancel, NavigationError, NavigationEnd, UrlSegment, Router, UrlSerializer, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { RouterModule, UrlSegment, UrlSegmentGroup, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, Router, UrlSerializer, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
 import ___default, { last, isNil, isEqual } from 'lodash';
 import { assert as assert$1, Opts, Klass } from '@coolon/typescript-utilities';
-import { MatDialogConfig, MatDialog as MatDialog$1, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -19,6 +18,7 @@ import { Memoize as Memoize$1 } from '@typescript-plus/fast-memoize-decorator';
 import 'reflect-metadata';
 import { style, query, group, animate, trigger, transition } from '@angular/animations';
 import ResizeObserver from 'resize-observer-polyfill';
+import { MatDialogConfig, MAT_DIALOG_DEFAULT_OPTIONS, MatDialog as MatDialog$1 } from '@angular/material/dialog';
 import { Observable } from 'rxjs';
 
 /**
@@ -1106,9 +1106,7 @@ var  /**
 InteractionContext = /** @class */ (function (_super) {
     __extends(InteractionContext, _super);
     function InteractionContext() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.activityListeners = new EventListenerList();
-        return _this;
+        return _super !== null && _super.apply(this, arguments) || this;
     }
     /**
      * Returns true if an activity is currently running.
@@ -1125,54 +1123,20 @@ InteractionContext = /** @class */ (function (_super) {
         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.
+        assert.isFalsey(this.isActive());
+        _super.prototype.dispose.call(this);
     };
     return InteractionContext;
 }(GarbageCollector));
 if (false) {
-    /**
-     * @type {?}
-     * @private
-     */
-    InteractionContext.prototype.activityListeners;
     /** @type {?} */
     InteractionContext.prototype.activityList;
     /** @type {?} */
@@ -1221,23 +1185,6 @@ if (false) {
      */
     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 () { };
-    }
-})(InteractionContext || (InteractionContext = {}));
 
 /**
  * @fileoverview added by tsickle
@@ -1817,6 +1764,15 @@ TabContext = /** @class */ (function () {
         this._complete = true;
         this.activityCallbacks.onCancel(error);
     };
+    /**
+     * @return {?}
+     */
+    TabContext.prototype.dispose = /**
+     * @return {?}
+     */
+    function () {
+        this.component.dispose();
+    };
     return TabContext;
 }());
 if (false) {
@@ -1906,20 +1862,10 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
         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 () {
@@ -2033,14 +1979,24 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
      * @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;
             }));
         }
     };
@@ -2167,6 +2123,292 @@ if (false) {
     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;
+var InteractionService = /** @class */ (function () {
+    function InteractionService(modelInteractionContextFactory) {
+        this.modelInteractionContextFactory = modelInteractionContextFactory;
+        this.garbage = new GarbageCollector();
+        this.exclusiveContext = new MutableValueModel();
+        this._activeModalInteractionContextModel = new MutableValueModel();
+        this._activeInlineInteractionContextModel = new MutableValueModel();
+        var _a = 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 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) {
+                assert$1.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: Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    /** @nocollapse */
+    InteractionService.ctorParameters = function () { return [
+        { type: ModalInteractionContextFactory }
+    ]; };
+    /** @nocollapse */ InteractionService.ngInjectableDef = ɵɵdefineInjectable({ factory: function InteractionService_Factory() { return new InteractionService(ɵɵinject(ModalInteractionContextFactory)); }, token: InteractionService, providedIn: "root" });
+    return InteractionService;
+}());
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    InteractionService.prototype.garbage;
+    /** @type {?} */
+    InteractionService.prototype.active;
+    /**
+     * @type {?}
+     * @private
+     */
+    InteractionService.prototype.exclusiveContext;
+    /**
+     * @type {?}
+     * @private
+     */
+    InteractionService.prototype._activeModalInteractionContextModel;
+    /**
+     * @type {?}
+     * @private
+     */
+    InteractionService.prototype._activeInlineInteractionContextModel;
+    /**
+     * @type {?}
+     * @private
+     */
+    InteractionService.prototype._activeInteractionContext;
+    /** @type {?} */
+    InteractionService.prototype.activeInteractionContextIds;
+    /** @type {?} */
+    InteractionService.prototype.modelInteractionActive;
+    /** @type {?} */
+    InteractionService.prototype.inlineInteractionActive;
+    /** @type {?} */
+    InteractionService.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 = 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 () {
+            assert$1.isFalsey(this.currentActiveMonitor.value);
+            if (this.exclusiveContext.value && this.interactionContext !== this.exclusiveContext.value) {
+                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 () {
+            assert$1.isTruthy(this.currentActiveMonitor.value === this);
+        };
+        return Monitor;
+    }(GarbageCollector));
+    InteractionService.Monitor = Monitor;
+    if (false) {
+        /** @type {?} */
+        Monitor.prototype.id;
+        /** @type {?} */
+        Monitor.prototype.interactionContext;
+        /** @type {?} */
+        Monitor.prototype.currentActiveMonitor;
+        /** @type {?} */
+        Monitor.prototype.exclusiveContext;
+    }
+})(InteractionService || (InteractionService = {}));
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -2176,9 +2418,11 @@ if (false) {
  */
 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 MutableValueModel(false);
+        _this.interactionService._registerInplaceInteractionContext(_this);
         return _this;
     }
     /**
@@ -2255,7 +2499,9 @@ var InplaceInteractionContextComponent = /** @class */ (function (_super) {
                 }] }
     ];
     /** @nocollapse */
-    InplaceInteractionContextComponent.ctorParameters = function () { return []; };
+    InplaceInteractionContextComponent.ctorParameters = function () { return [
+        { type: InteractionService }
+    ]; };
     InplaceInteractionContextComponent.propDecorators = {
         interactionContext: [{ type: ViewChild, args: ['activityContainer', { static: true },] }]
     };
@@ -2271,6 +2517,8 @@ if (false) {
      * @private
      */
     InplaceInteractionContextComponent.prototype._active;
+    /** @type {?} */
+    InplaceInteractionContextComponent.prototype.interactionService;
 }
 
 /**
@@ -2296,500 +2544,8 @@ var InteractionOutletComponent = /** @class */ (function () {
  * @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 MutableValueModel(false);
-        assert$1.notNil(dialogService);
-        _this.onDispose((/**
-         * @return {?}
-         */
-        function () {
-            if (_this.isActive()) {
-                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()) {
-            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: Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-    /** @nocollapse */
-    DialogInteractionContext.ctorParameters = function () { return [
-        { type: MatDialog },
-        { type: MatDialogConfig }
-    ]; };
-    /** @nocollapse */ DialogInteractionContext.ngInjectableDef = ɵɵdefineInjectable({ factory: function DialogInteractionContext_Factory() { return new DialogInteractionContext(ɵɵinject(MatDialog$1), ɵɵinject(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;
-}(ValueModel));
-/**
- * @abstract
- */
-var  /**
- * @abstract
- */
-ModalInteractionService = /** @class */ (function (_super) {
-    __extends(ModalInteractionService, _super);
-    function ModalInteractionService() {
-        var _this = _super.call(this) || this;
-        _this._activityListeners = new 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;
-}(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 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 MutableValueModel();
-        assert$1.notNil(dialogService);
-        var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-        _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) {
-        assert$1.isFalsey(this.isActive());
-        if (this.exclusiveContext && dialogInteractionContext !== this.exclusiveContext) {
-            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) {
-        assert$1.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) {
-                assert$1.isTruthy(this.isActive());
-                return [2 /*return*/, this._activeInteractionContextModel.value.getCurrentActivity()];
-            });
-        });
-    };
-    DialogInteractionService.decorators = [
-        { type: Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-    /** @nocollapse */
-    DialogInteractionService.ctorParameters = function () { return [
-        { type: MatDialog },
-        { type: MatDialogConfig, decorators: [{ type: Optional }, { type: Inject, args: [DIALOG_INTERACTION_SERVICE_DEFAULTS,] }] },
-        { type: MatDialogConfig, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DIALOG_DEFAULT_OPTIONS,] }] }
-    ]; };
-    /** @nocollapse */ DialogInteractionService.ngInjectableDef = ɵɵdefineInjectable({ factory: function DialogInteractionService_Factory() { return new DialogInteractionService(ɵɵinject(MatDialog$1), ɵɵinject(DIALOG_INTERACTION_SERVICE_DEFAULTS, 8), ɵɵinject(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: NgModule, args: [{
@@ -2823,7 +2579,7 @@ var InteractionModule = /** @class */ (function () {
                         AlertDialogComponent
                     ],
                     providers: [
-                        DialogInteractionService,
+                        InteractionService,
                     ]
                 },] }
     ];
@@ -3900,7 +3656,10 @@ if (false) {
 /**
  * @abstract
  */
-var NavigationState = /** @class */ (function (_super) {
+var  /**
+ * @abstract
+ */
+NavigationState = /** @class */ (function (_super) {
     __extends(NavigationState, _super);
     function NavigationState(context) {
         var _this = _super.call(this) || this;
@@ -3908,6 +3667,36 @@ var NavigationState = /** @class */ (function (_super) {
         _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 {?}
@@ -3940,16 +3729,88 @@ var NavigationState = /** @class */ (function (_super) {
     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 {?}
      */
-    NavigationState.prototype.onBackClickedDuringNavigationInteraction = /**
-     * @param {?} newUrl
+    NavigationState.prototype.onBackClickedDuringNavigationInteraction = /**
+     * @param {?} newUrl
+     * @return {?}
+     */
+    function (newUrl) {
+        return this.illegalTransition('onBackClickedDuringNavigationInteraction');
+    };
+    /**
+     * @param {?} component
+     * @param {?} nextState
+     * @return {?}
+     */
+    NavigationState.prototype.canDeactivatePlace = /**
+     * @param {?} component
+     * @param {?} nextState
      * @return {?}
      */
-    function (newUrl) {
-        return this.illegalTransition('onBackClickedDuringNavigationInteraction');
+    function (component, nextState) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, this.illegalTransition('canDeactivatePlace')];
+            });
+        });
     };
     /**
      * @return {?}
@@ -3984,34 +3845,41 @@ var NavigationState = /** @class */ (function (_super) {
      * @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 {?}
@@ -4022,12 +3890,6 @@ var NavigationState = /** @class */ (function (_super) {
     function () {
         return this.constructor.name;
     };
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Object]),
-        __metadata("design:returntype", void 0)
-    ], NavigationState.prototype, "updateLocation", null);
     return NavigationState;
 }(GarbageCollector));
 if (false) {
@@ -4037,54 +3899,22 @@ if (false) {
      */
     NavigationState.prototype._visits;
     /** @type {?} */
-    NavigationState.prototype.isPopState;
-    /** @type {?} */
-    NavigationState.prototype.active;
+    NavigationState.prototype.isTransitional;
     /** @type {?} */
     NavigationState.prototype.startingUrl;
+    /** @type {?} */
+    NavigationState.prototype.isPopState;
     /**
      * @type {?}
      * @protected
      */
     NavigationState.prototype.context;
-    /**
-     * @abstract
-     * @param {?} event
-     * @return {?}
-     */
-    NavigationState.prototype.onStart = function (event) { };
-    /**
-     * @abstract
-     * @param {?} event
-     * @return {?}
-     */
-    NavigationState.prototype.onCancel = function (event) { };
-    /**
-     * @abstract
-     * @param {?} event
-     * @return {?}
-     */
-    NavigationState.prototype.onError = function (event) { };
-    /**
-     * @abstract
-     * @param {?} event
-     * @return {?}
-     */
-    NavigationState.prototype.onEnd = function (event) { };
-    /**
-     * @abstract
-     * @param {?} component
-     * @param {?} nextState
-     * @return {?}
-     */
-    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;
@@ -4092,11 +3922,9 @@ if (false) {
     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;
     }
@@ -4104,27 +3932,11 @@ if (false) {
         __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 {?}
@@ -4139,65 +3951,51 @@ if (false) {
                 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)) {
                 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 {?}
              */
@@ -4205,14 +4003,14 @@ if (false) {
                 // 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 {?}
              */
@@ -4226,19 +4024,20 @@ if (false) {
          * @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 {?}
          */
@@ -4247,70 +4046,31 @@ if (false) {
             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
-                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
-                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 = 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);
@@ -4320,7 +4080,7 @@ if (false) {
          * @param {?} nextState
          * @return {?}
          */
-        Active.prototype.canDeactivatePlace = /**
+        AbstractNavigationTransition.prototype.canDeactivatePlace = /**
          * @param {?} component
          * @param {?} nextState
          * @return {?}
@@ -4344,7 +4104,7 @@ if (false) {
          * @private
          * @return {?}
          */
-        Active.prototype.detachInteractionContext = /**
+        AbstractNavigationTransition.prototype.detachInteractionContext = /**
          * @private
          * @return {?}
          */
@@ -4354,180 +4114,304 @@ if (false) {
             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([
-            Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [NavigationStart]),
-            __metadata("design:returntype", NavigationState)
-        ], Active.prototype, "onStart", null);
-        __decorate([
-            Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [NavigationCancel]),
-            __metadata("design:returntype", NavigationState)
-        ], Active.prototype, "onCancel", null);
-        __decorate([
-            Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [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
+            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 {?}
          */
-        Active.prototype._interactionContext;
-        /** @type {?} */
-        Active.prototype.isPopState;
+        NavigationBackTransition.prototype.onError = /**
+         * @param {?} event
+         * @return {?}
+         */
+        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
+                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 {?} */
-        Active.prototype.startingUrl;
+        NavigationBackTransition.prototype.isPopState;
     }
-    var ModalInteractionSession = /** @class */ (function (_super) {
-        __extends(ModalInteractionSession, _super);
-        function ModalInteractionSession(context, startingUrl) {
+    /**
+     * @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.active = false;
+            _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 {?} */
+        AbstractInteractionTransition.prototype.isTransitional;
+        /** @type {?} */
+        AbstractInteractionTransition.prototype.startingUrl;
+    }
+    /**
+     * This state exists to handle all events while any kind of navigation is in progress.  That way all other states can
+     * happily ignore interaction contexts.
+     */
+    var /**
+     * This state exists to handle all events while any kind of navigation is in progress.  That way all other states can
+     * happily ignore interaction contexts.
+     */
+    InteractionTransition = /** @class */ (function (_super) {
+        __extends(InteractionTransition, _super);
+        function InteractionTransition() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
             _this.isPopState = false;
             return _this;
         }
-        /**
-         * @param {?} 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([
-            Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [NavigationStart]),
-            __metadata("design:returntype", NavigationState)
-        ], ModalInteractionSession.prototype, "onStart", null);
-        __decorate([
-            Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [NavigationCancel]),
-            __metadata("design:returntype", NavigationState)
-        ], ModalInteractionSession.prototype, "onCancel", null);
-        __decorate([
-            Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [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);
@@ -4535,28 +4419,36 @@ if (false) {
             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
@@ -4595,18 +4487,12 @@ if (false) {
          * @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
@@ -4636,8 +4522,6 @@ if (false) {
     }(NavigationState));
     NavigationState.CancelledDuringNavigationInteraction = CancelledDuringNavigationInteraction;
     if (false) {
-        /** @type {?} */
-        CancelledDuringNavigationInteraction.prototype.active;
         /** @type {?} */
         CancelledDuringNavigationInteraction.prototype.isPopState;
         /**
@@ -4737,33 +4621,28 @@ if (false) {
  * @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 });
+    // 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
@@ -4774,17 +4653,30 @@ var UrlSnapshot = /** @class */ (function () {
         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 {?}
      */
@@ -4812,7 +4704,7 @@ var UrlSnapshot = /** @class */ (function () {
      */
     function (visit) {
         /** @type {?} */
-        var segments = this.updateVisitSegments(visit);
+        var segments = this.replaceExistingVisitSegmentsWith(visit);
         /** @type {?} */
         var commands = [];
         segments.forEach((/**
@@ -4836,18 +4728,93 @@ var UrlSnapshot = /** @class */ (function () {
      * @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) {
+            assert.isTruthy(interactionOutlet.segments.length === 2);
+            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 UrlSegmentGroup([
+            new UrlSegment(UrlSnapshot.INTERACTION_ROUTER_PATH, {}),
+            new UrlSegment(UrlSnapshot.createPathIdFor(ids), {})
+        ], {});
+        return new UrlSnapshot(this.urlSerializer, urlTree.toString());
+    };
     return UrlSnapshot;
 }());
 if (false) {
-    /** @type {?} */
+    /**
+     * @type {?}
+     * @private
+     */
     UrlSnapshot.prototype.urlTree;
+    /** @type {?} */
+    UrlSnapshot.prototype.urlSerializer;
+    /** @type {?} */
+    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;
+})(UrlSnapshot || (UrlSnapshot = {}));
 
 /**
  * @fileoverview added by tsickle
@@ -4855,27 +4822,31 @@ if (false) {
  */
 var PlaceRouter = /** @class */ (function (_super) {
     __extends(PlaceRouter, _super);
-    function PlaceRouter(router, urlSerializer, angularLocation, placeHistory, modalInteractionService) {
+    function PlaceRouter(router, urlSerializer, angularLocation, placeHistory, interactionService) {
         var _this = _super.call(this) || this;
         _this.router = router;
         _this.urlSerializer = urlSerializer;
         _this.angularLocation = angularLocation;
         _this.placeHistory = placeHistory;
-        _this.modalInteractionService = modalInteractionService;
-        _this.firstRoute = true;
-        _this._navigationSessionModel = new MutableValueModel();
+        _this.interactionService = interactionService;
+        _this._navigationStateModel = new MutableValueModel();
         _this._activeVisits = new MutableListModel();
         var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
         _this.activeVisitIndex = chain(_this._activeVisits).indexBy('placeDefinition');
-        _this.navigationSessionActive = chain(_this.navigationSessionModel).pluck('active');
-        _this._navigationSessionContext = new NavigationState.Context(_this.router, _this.modalInteractionService, _this.angularLocation, (/**
+        _this.navigationInProgress = chain(_this.navigationStateModel).pluck('isTransitional');
+        _this._navigationSessionContext = new NavigationState.Context(_this, _this.interactionService, (/**
          * @param {?} session
          * @return {?}
          */
         function (session) {
             _this.processNavigationSuccess(session);
         }));
-        _this._navigationSessionModel.value = new NavigationState.Idle(_this._navigationSessionContext);
+        _this._navigationStateModel.value = new 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
@@ -4889,53 +4860,85 @@ var PlaceRouter = /** @class */ (function (_super) {
             // NavigationStart -> .... -> NavigationError --> navigation aborted, end session.
             // =======================
             if (event instanceof 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 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 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 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 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()) {
-                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 NavigationState.NavigationTransition) {
+                /** @type {?} */
+                var navigationInteraction = _this.navigationState.interactionContext;
+                if (navigationInteraction && navigationInteraction.isActive()) {
+                    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;
@@ -4954,7 +4957,7 @@ var PlaceRouter = /** @class */ (function (_super) {
         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.
-        assert.isTruthy(this.navigationSessionActive.value);
+        assert.isTruthy(this.navigationInProgress.value);
         /** @type {?} */
         var visits = session.getVisits();
         visits.forEach((/**
@@ -4964,22 +4967,22 @@ var PlaceRouter = /** @class */ (function (_super) {
         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
@@ -5070,7 +5073,7 @@ var PlaceRouter = /** @class */ (function (_super) {
                          */
                         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);
                         }))];
@@ -5095,7 +5098,7 @@ var PlaceRouter = /** @class */ (function (_super) {
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        if (this.navigationSessionActive.value) {
+                        if (this.navigationInProgress.value) {
                             lang.illegalState('Navigation already in progress');
                         }
                         this.runStateTransition((/**
@@ -5104,7 +5107,7 @@ var PlaceRouter = /** @class */ (function (_super) {
                          */
                         function (current) {
                             /** @type {?} */
-                            var session = new NavigationState.Active(_this._navigationSessionContext, false, _this.router.routerState.snapshot.url);
+                            var session = new NavigationState.NavigationTransition(_this._navigationSessionContext, false, _this.router.routerState.snapshot.url);
                             session.storeVisit(visit);
                             return session;
                         }));
@@ -5118,7 +5121,7 @@ var PlaceRouter = /** @class */ (function (_super) {
                     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 {?}
@@ -5143,10 +5146,10 @@ var PlaceRouter = /** @class */ (function (_super) {
      */
     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();
             Logger.get(this).info("Router State Transition: " + previous.toString() + " -> " + next.toString());
@@ -5185,15 +5188,97 @@ var PlaceRouter = /** @class */ (function (_super) {
         function (child) { return child.url; })));
     };
     /**
-     * @param {?} snapshot
+     * @param {?} url
      * @return {?}
      */
     PlaceRouter.prototype.parseUrl = /**
-     * @param {?} snapshot
+     * @param {?} url
+     * @return {?}
+     */
+    function (url) {
+        return new 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;
+        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.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[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[UrlSnapshot.INTERACTION_ROUTER_OUTLET] = UrlSnapshot.createInteractionOutletRouterCommands(currentIds),
+                            _b)
+                    }]);
+            }
+        }
     };
     PlaceRouter.decorators = [
         { type: Injectable, args: [{
@@ -5206,9 +5291,15 @@ var PlaceRouter = /** @class */ (function (_super) {
         { type: UrlSerializer },
         { type: Location },
         { type: PlaceHistory },
-        { type: ModalInteractionService }
+        { type: InteractionService }
     ]; };
-    /** @nocollapse */ PlaceRouter.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(ɵɵinject(Router), ɵɵinject(UrlSerializer), ɵɵinject(Location), ɵɵinject(PlaceHistory), ɵɵinject(ModalInteractionService)); }, token: PlaceRouter, providedIn: "root" });
+    /** @nocollapse */ PlaceRouter.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(ɵɵinject(Router), ɵɵinject(UrlSerializer), ɵɵinject(Location), ɵɵinject(PlaceHistory), ɵɵinject(InteractionService)); }, token: PlaceRouter, providedIn: "root" });
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], PlaceRouter.prototype, "syncInteractionIdsWithRouter", null);
     return PlaceRouter;
 }(GarbageCollector));
 if (false) {
@@ -5216,26 +5307,26 @@ if (false) {
      * @type {?}
      * @private
      */
-    PlaceRouter.prototype.firstRoute;
-    /**
-     * @type {?}
-     * @private
-     */
-    PlaceRouter.prototype._navigationSessionModel;
+    PlaceRouter.prototype._navigationStateModel;
     /**
      * @type {?}
      * @private
      */
     PlaceRouter.prototype._activeVisits;
     /** @type {?} */
-    PlaceRouter.prototype.navigationSessionActive;
+    PlaceRouter.prototype.navigationInProgress;
     /** @type {?} */
     PlaceRouter.prototype.activeVisitIndex;
     /**
      * @type {?}
      * @private
      */
-    PlaceRouter.prototype._navigationSessionContext;
+    PlaceRouter.prototype._navigationSessionContext;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceRouter.prototype._navigationStateTypeModel;
     /**
      * @type {?}
      * @private
@@ -5260,83 +5351,8 @@ if (false) {
      * @type {?}
      * @private
      */
-    PlaceRouter.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;
-    }
-})(PlaceRouter || (PlaceRouter = {}));
 
 /**
  * @fileoverview added by tsickle
@@ -5425,9 +5441,9 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
         _this.placeChanged = new EventEmitter();
         _this._activePlace = new MutableValueModel();
         _this._activePlaceVisitModel = new DelegatingValueModel();
-        _this._inOutletActivation = new Guard$1();
-        _this._inOutletDeactivation = new Guard$1();
-        _this._inRouteVisitUpdate = new Guard$1();
+        _this._inOutletActivation = new Guard();
+        _this._inOutletDeactivation = new Guard();
+        _this._inRouteVisitUpdate = new Guard();
         _this._activatedRouteModel = new MutableValueModel();
         _this._placeDefinition = new MutableValueModel();
         _this.initialPlaceIndex = null;
@@ -5487,10 +5503,10 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
         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 {?}
@@ -6552,6 +6568,225 @@ if (false) {
     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 MutableValueModel(false);
+        assert$1.notNil(dialogService);
+        _this.onDispose((/**
+         * @return {?}
+         */
+        function () {
+            if (_this.isActive()) {
+                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()) {
+            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 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;
+        assert$1.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: Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    /** @nocollapse */
+    DialogInteractionContextFactory.ctorParameters = function () { return [
+        { type: MatDialog },
+        { type: MatDialogConfig, decorators: [{ type: Optional }, { type: Inject, args: [DIALOG_INTERACTION_SERVICE_DEFAULTS,] }] },
+        { type: MatDialogConfig, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DIALOG_DEFAULT_OPTIONS,] }] }
+    ]; };
+    /** @nocollapse */ DialogInteractionContextFactory.ngInjectableDef = ɵɵdefineInjectable({ factory: function DialogInteractionContextFactory_Factory() { return new DialogInteractionContextFactory(ɵɵinject(MatDialog$1), ɵɵinject(DIALOG_INTERACTION_SERVICE_DEFAULTS, 8), ɵɵinject(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
@@ -6926,16 +7161,16 @@ var AbstractPlaceGuard = /** @class */ (function () {
                                     // 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,
@@ -6969,7 +7204,7 @@ var AbstractPlaceGuard = /** @class */ (function () {
     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))];
             });
         });
     };
@@ -6979,7 +7214,7 @@ var AbstractPlaceGuard = /** @class */ (function () {
      * @protected
      * @param {?} activatedRoute
      * @param {?} state
-     * @param {?} canActivate
+     * @param {?} runPlaceGuards
      * @return {?}
      */
     AbstractPlaceGuard.prototype.authorisePlaceThen = 
@@ -6988,12 +7223,12 @@ var AbstractPlaceGuard = /** @class */ (function () {
      * @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:
@@ -7008,13 +7243,14 @@ var AbstractPlaceGuard = /** @class */ (function () {
                         _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*/, lang.illegalState("expected component to be an instance of PlaceComponent, got " + activatedRoute.component)];
@@ -7089,12 +7325,12 @@ if (false) {
  * @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
@@ -7109,10 +7345,10 @@ var InteractionGuard = /** @class */ (function () {
     function (route, state) {
         /** @type {?} */
         var url = this.router.parseUrl(state.url);
-        if (!this.modalInteractionService.isActive() && url.root.children[PlaceRouter.INTERACTION_ROUTER_OUTLET]) {
+        if (!this.interactionService.isActive() && url.root.children[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[PlaceRouter.INTERACTION_ROUTER_OUTLET];
+            delete url.root.children[UrlSnapshot.INTERACTION_ROUTER_OUTLET];
             return url;
         }
         else {
@@ -7135,20 +7371,26 @@ var InteractionGuard = /** @class */ (function () {
      */
     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 (!!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];
                 }
             });
         });
@@ -7164,9 +7406,9 @@ var InteractionGuard = /** @class */ (function () {
         { type: Injector },
         { type: PlaceRouter },
         { type: Location },
-        { type: ModalInteractionService }
+        { type: InteractionService }
     ]; };
-    /** @nocollapse */ InteractionGuard.ngInjectableDef = ɵɵdefineInjectable({ factory: function InteractionGuard_Factory() { return new InteractionGuard(ɵɵinject(Router), ɵɵinject(INJECTOR), ɵɵinject(PlaceRouter), ɵɵinject(Location), ɵɵinject(ModalInteractionService)); }, token: InteractionGuard, providedIn: "root" });
+    /** @nocollapse */ InteractionGuard.ngInjectableDef = ɵɵdefineInjectable({ factory: function InteractionGuard_Factory() { return new InteractionGuard(ɵɵinject(Router), ɵɵinject(INJECTOR), ɵɵinject(PlaceRouter), ɵɵinject(Location), ɵɵinject(InteractionService)); }, token: InteractionGuard, providedIn: "root" });
     return InteractionGuard;
 }());
 if (false) {
@@ -7194,7 +7436,7 @@ if (false) {
      * @type {?}
      * @private
      */
-    InteractionGuard.prototype.modalInteractionService;
+    InteractionGuard.prototype.interactionService;
 }
 
 /**
@@ -7512,5 +7754,5 @@ if (false) {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractActivity, AbstractInputComponent, AbstractPlaceGuard, AbstractPlaceNavigationComponent, Activity, ActivityContainerComponent, ActivityOutletComponent, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CommandDirective, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DialogInteractionContext, DialogInteractionService, Dimension, DirectivesModule, DisposableComponent, EmptyStateComponent, FocusBindingDirective, Formatter, InplaceInteractionContextComponent, InteractionContext, InteractionContextBase, InteractionGuard, InteractionModule, InteractionOutletComponent, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ModalInteractionService, NavigationState, NoopAuthGuard, NoopComponent, NumberInputComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, ROUTE_PARAMETER_LIST_KEY, ResizeAwareComponent, RouteId, SelectInputComponent, StringInputComponent, TabbedPlaceNavigationComponent, UrlSnapshot, Visit, VisitParameter, VisitParameterList, VisitSanitiser, leftRightPlaceAnimation, slideDownAndUpAnimation, DirectivesModule as ɵa, CommandDirective as ɵb, ActivityContainerComponent as ɵba, InteractionContextBase as ɵbb, InteractionContext as ɵbc, ActivityOutletComponent as ɵbd, ConfirmationDialogComponent as ɵbe, AbstractActivity as ɵbf, ACTIVITY_DATA as ɵbg, Activity as ɵbh, ConfirmThenDialogComponent as ɵbj, AlertDialogComponent as ɵbk, InteractionOutletComponent as ɵbm, InplaceInteractionContextComponent as ɵbn, DIALOG_INTERACTION_SERVICE_DEFAULTS as ɵbo, DialogInteractionService as ɵbp, FocusBindingDirective as ɵc, DisposableComponent as ɵd, ComponentsModule as ɵe, NumberInputComponent as ɵf, AbstractInputComponent as ɵg, StringInputComponent as ɵh, PasswordInputComponent as ɵi, SelectInputComponent as ɵj, NoopComponent as ɵk, PlaceModule as ɵl, EmptyStateComponent as ɵm, BusyOverlayComponent as ɵn, PlaceOutletComponent as ɵo, leftRightPlaceAnimation as ɵp, LEFT_RIGHT_PLACE_ANIMATION as ɵq, AUP_PLACE_CONFIG as ɵr, PlaceRouter as ɵt, PlaceHistory as ɵu, ModalInteractionService as ɵv, TabbedPlaceNavigationComponent as ɵw, AbstractPlaceNavigationComponent as ɵx, ListPlaceNavComponent as ɵy, InteractionModule as ɵz };
+export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractActivity, AbstractInputComponent, AbstractPlaceGuard, AbstractPlaceNavigationComponent, Activity, ActivityContainerComponent, ActivityOutletComponent, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CommandDirective, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EmptyStateComponent, FocusBindingDirective, Formatter, InplaceInteractionContextComponent, InteractionContext, InteractionContextBase, InteractionGuard, InteractionModule, InteractionOutletComponent, InteractionService, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ModalInteractionContextFactory, NavigationState, NoopAuthGuard, NoopComponent, NumberInputComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, ROUTE_PARAMETER_LIST_KEY, ResizeAwareComponent, RouteId, SelectInputComponent, StringInputComponent, TabbedPlaceNavigationComponent, UrlSnapshot, Visit, VisitParameter, VisitParameterList, VisitSanitiser, leftRightPlaceAnimation, slideDownAndUpAnimation, DirectivesModule as ɵa, CommandDirective as ɵb, InteractionModule as ɵba, ActivityContainerComponent as ɵbb, InteractionContextBase as ɵbc, InteractionContext as ɵbd, ActivityOutletComponent as ɵbe, ConfirmationDialogComponent as ɵbf, AbstractActivity as ɵbg, ACTIVITY_DATA as ɵbh, Activity as ɵbi, ConfirmThenDialogComponent as ɵbk, AlertDialogComponent as ɵbl, InteractionOutletComponent as ɵbn, InplaceInteractionContextComponent as ɵbo, FocusBindingDirective as ɵc, DisposableComponent as ɵd, ComponentsModule as ɵe, NumberInputComponent as ɵf, AbstractInputComponent as ɵg, StringInputComponent as ɵh, PasswordInputComponent as ɵi, SelectInputComponent as ɵj, NoopComponent as ɵk, PlaceModule as ɵl, EmptyStateComponent as ɵm, BusyOverlayComponent as ɵn, PlaceOutletComponent as ɵo, leftRightPlaceAnimation as ɵp, LEFT_RIGHT_PLACE_ANIMATION as ɵq, AUP_PLACE_CONFIG as ɵr, PlaceRouter as ɵt, PlaceHistory as ɵu, InteractionService as ɵv, ModalInteractionContextFactory as ɵw, TabbedPlaceNavigationComponent as ɵx, AbstractPlaceNavigationComponent as ɵy, ListPlaceNavComponent as ɵz };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map